Curso de HTML

CONTENIDOS DE LA PAGINA#4

7. Imagenes

Hasta el momento hemos visto como se puede escribir texto en una pagina Web, así como sus posibles formatos. Ahora veremos como incluir una imagen en nuestra página, para ello utilizaremos la orden . Hay dos formatos de imágenes 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 dispongas de un programa externo que permita su visualización.

La orden  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.
lowsrc ="imagen"
Muestra una segunda imagen "superpuesta" sobre la primera una vez se carga la pagina. Este parámetro no es reconocido por la totalidad de los navegadores ya que esta en estudio su aplicación, así que en la mayoría de los casos será ignorado mostrándose solo la primera imagen (src). En Netscape muestra la imagen indicada por lowsrc en primer lugar, y posteriormente muestra la imagen indicada por src. Si las imágenes son iguales pero tienen distinta "resolución" se conseguirá un efecto tipo "Fade". Si las imágenes son de distinto tamaño la imagen indicada en src se redimensionara al tamaño indicado por la imagen indicada en lowsrc
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.
ismap / usemap
Indica que la imagen es un MAPA. Veremos estos parámetros mas adelante en este manual.
 
Ejemplo
Se vería como
MG src ="caution.gif" alt = "Cuidado !!" >  Cuidado!!
Si el visor no pudiese visualizar el gráfico.....  Cuidado!!
 

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

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 Ud. utilice pueden verse o no los efectos de cada parámetro).

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

Atrás

Julián Andrés Muñoz Castro Ing. Electrónica Universidad del QUINDIO (Armenia)