ÁREA DE TECNOLOGÍA E INFORMÁTICA                    http://tecnologiaeinformatica-lissyvancelis.blogspot.comGuía 4 de HTML...
Upcoming SlideShare
Loading in …5
×

Guia 4 de html imagenes

1,442 views
1,414 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,442
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Guia 4 de html imagenes

  1. 1. ÁREA DE TECNOLOGÍA E INFORMÁTICA http://tecnologiaeinformatica-lissyvancelis.blogspot.comGuía 4 de HTML – Imágenes y FondosTemas: Imágenes <IMG SRC=>, bordes de una imagen BORDER=, dimensiones de imágenes WIDTH=HEIGHT= y fondos, alineación de la imagen con respecto al texto ALIGN= TOP, MIDDLE, BOTTOM, ajustedel texto junto a la imagen ALIGN= LEFT, RIGHT1. Dentro de la carpeta del curso cree una carpeta llamada Guía 4 y copie en ella algunos archivos (*.bmp o *.gif), imágenes no tan grandes y fondos o texturas (*.jpg).2. Abra Bloc de notas, haga Ajuste de línea y escriba el siguiente código exactamente: <HTML> <HEAD><TITLE>MAS ACERCA DE HTML</TITLE></HEAD> <BODY> <H1>Insertar Imágenes</H1> <P>Los visualizadores pueden desplegar imágenes gráficas junto con el texto, para que los documentos se vean mejor y comuniquen información que sería muy difícil de transmitir solo con palabras. <P>Las gráficas se insertan con la etiqueta &lt;IMG SRC = nombre de archivo gráfico&gt; y luego una palabra o frase referente al dibujo, si se desea. Ejm:<BR><BR> <IMG SRC = “nombre_imagen.extensión”>Texto de la imagen <HR> </BODY> </HTML>3. Guarde con el nombre Imágenes.html en la carpeta Guía 4 que debe estar dentro de la carpeta del curso y ejecute la página web con Internet Explorer observando la utilidad de cada etiqueta.4. Modifique el código en la línea <BODY> para que ahora diga <BODY BACKGROUND = “nombre_fondo.extensión”>5. Guarde el código y ejecute la página para que observe si funciona la imagen como fondo de la página web.6. Para colocarle un borde a una imagen, se escribe el argumento BORDER= en la etiqueta &lt;IMG SRC=&gt;. Escriba el código respectivo para insertar otra imagen, debajo de la etiqueta <HR>, y asígnale un borde de 12 como se acaba de explicar.7. Si deseamos modificar el tamaño de la imagen, podemos incluir las dimensiones WIDTH (para ancho) y HEIGHT (para alto) como parte de la etiqueta &lt;IMG SCR=&gt;. Con estas etiquetas se reduce el tiempo de carga de las imágenes cuando son muy grandes. Inserte el siguiente código en el código de la página y utilice uno de los archivos de imagen que usted copió en la carpeta. <HR> <H1> GRAFICO NORMAL </H1> <IMG SRC = “nombre_imagen.extension”> <H1> GRAFICO ALTERADO EN SU TAMAÑO </H1> <IMG SRC = “nombre_imagen.extension” WIDTH = 10 HEIGHT = 50>8. Inserte una imagen en el primer párrafo después de la etiqueta &lt;P&gt;. Corra la página y observe que el texto quedó en la parte inferior de la imagen.9. Utilice el atributo ALIGN = LEFT o RIGHT dentro de la etiqueta &lt;IMG SRC=&gt; para ajustar el texto a la imagen sin perder espacio. Por ejemplo, así: <IMG SRC = tarros.bmp WIDTH = 70 HEIGHT = 100 ALIGN = LEFT>10. Marque su página Web como venimos haciéndolo: <HR> Nombres y curso<BR> Presentado a: Lis Alexis Vanegas Celis <HR>

×