IMÁGENES

Las imágenes en una página web permiten mejorar su apariencia o suministrarle mayor información visual.

 

El código más sencillo para añadir una imagen en html es:

<img src=”link imagen”>

La imágen tiene varios atributos, los cuales son:

  • Alt:

Corta descripción sobre la imágen

<img src="foto.gif" alt="grado décimo">

 Al pasar el puntero sobre la imagen "foto" durante varios segundos, aparecerá el texto grado décimo

  • Height:

Alto de la imágen en pixeles

  • Width:

Ancho de la imágen en pixeles, este en conjunto con height sirven para modificar el tamaño de una imagen

 

<img src="foto.gif" width="200" height="80">

Aparecerá la imagen foto con 200 pixeles de ancho y 80 pixeles de alto.


  • Border:

Borde de la imágen, 0 sin borde, 1 un borde pequeño, etc

 

<img src="foto.gif" border="2">


  • Vspace y Hspace:

Se indica el espacio que separa la imágen de los elementos que lo rodean(texto u otros)

  •   HSPACE define la distancia de los lados derecho e izquierdo de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.)

   VSPACE define la distancia de los lados superior e inferior de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.). La sintaxis correcta es

  • <IMG SRC="foto.gif" WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3 ALT="grado décimo">

  • Align:

Alineación del texto con respecto a la imágen(left, right, middle, top, bottom)

Ejemplo:

 

  • ALIGN=top: alinea la primera línea de texto con la parte superior de la imagen.
  • ALIGN=middle: alinea la primera línea del texto con el centro de la imagen.
  • ALIGN=bottom: alinea la primera línea de texto con la parte inferior de la imagen.
  • ALIGN=left: el texto se coloca a la derecha de la imagen empezando desde la parte superior de la misma.
  • ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior de la misma.

<img src=”foto.gif” alt=”grado décimo” border=”0″ align=”left”>