1. ÁREA DE TECNOLOGÍA E INFORMÁTICA
http://tecnologiaeinformatica-lissyvancelis.blogspot.com
Guía 4 de HTML – Imágenes y Fondos
Temas: 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, ajuste
del texto junto a la imagen ALIGN= LEFT, RIGHT
1. 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 <IMG SRC = nombre de archivo gráfico> 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 <IMG SRC=>. 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 <IMG
SCR=>. 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 <P>. 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 <IMG SRC=>
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>
