Hasta el momento hemos visto como se puede escribir texto en una pagina Web, asi como sus posibles formatos. Para incluir una imagen en nuestra página Web utilizaremos la directiva <IMG>. Hay dos formatos de imagenes que todos los navegadores modernos reconocen. Son las imágenes GIF y JPG. Cualquier otro tipo de fichero gráfico o de imagen (BMP, PCX, CDR, etc...) no será mostrado por el visor, a no ser que disponga de un programa externo que permita su visualización.

La directiva <IMG> tiene varios parámetros :

src = "imagen"

Indica el nombre del fichero gráfico a mostrar.

alt = "Texto"

Mostrara el texto indicado en el caso de que el navegador utilizado para ver la página no sea capaz de visualizar la imagen.

align = TOP / MIDDLE / BOTTOM

Indica como se alineará el texto que siga a la imagen. TOP alinea el texto con la parte superior de la imagen, MIDDLE con la parte central, y BOTTOM con la parte inferior.

border = tamaño

Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un borde que será visible cuando la imagen forme parte de un Hyperenlace.

height = tamaño

Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.

width = tamaño

Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.

hspace = margen

Indica el numero de espacios horizontales, en puntos, que separarán la imagen del texto que la siga y la anteceda.

vspace = margen

Indica el número de puntos verticales que separaran la imagen del texto que le siga y la anteceda.

Ejemplo	Se vería como
<IMG src="caution.gif" alt= "Cuidado !!" >
Si el visor no pudiese visualizar el gráfico.....

La imagen a mostrar puede encontrase en el mismo lugar (URL) que la pagina Web. Si este no fuera el caso, el nombre de la imagen ha de contener la URL donde se encuentre la imagen.

Ejemplo

<IMG src= "http://www.microsoft.com/iexplorer.gif">

Veamos varios ejemplos "jugando" con los tamaños de la imagen, así como comprobando la alineación de los textos. (Recuerde que en función del visor que vd. utilize pueden verse o no los efectos de cada parametro).

Ejemplo	Se vería como
<IMG src="caution.gif" width=100 >
<IMG src="caution.gif" height=20 >
<IMG src="caution.gif" align=TOP>Atencion !!!	Atencion !!!
<IMG src="caution.gif" align=MIDDLE>Atencion !!!	Atencion !!!
<IMG src="caution.gif" align=BOTTOM>Atencion !!!	Atencion !!!
Tenga en cuenta<IMG src="caution.gif" hspace=20>esta indicacion.	Tenga en cuentaesta indicacion
Tenga en cuenta<IMG src="caution.gif" vspace=40>esta indicacion.	Tenga en cuentaesta indicacion.