This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

13. El atributo IMG [May 9, 2012, 4:50 p.m.]


Uno de los elementos más interesantes que podemos introducir en nuestra web son las imágenes. Esto se realiza de una forma muy sencilla, mediante el atributo <img>. Esta etiqueta a diferencia de las que hemos visto hasta ahora, no tiene un cierre. Aqui viene la diferencia entre el html y xhtml. El html al ser más abierto en su sintaxis nos permite dejarla abierta, y en cuanto se abra otra esta, esta se cierra automáticamente. El xhtml es más estricto y nos dice que todas las etiquetas tienen que tener un principio y un cierre, e implementa "/" para cerrar las etiquetas individuales. Un ejemplo:

<img src="pelota.jgp" alt="pelota" />

Los atributos de esta etiqueta son:

  • alt: Con este atributo definimos un texto como alternativa por si no se visualiza la imagen. Deberá ser descriptivo de la imagen.
  • title: Especifica un título que aparecerá cuando coloquemos el cursor encima de la imagen.
  • width: Establece la anchura de la imagen.
  • height: Establece la altura de la imagen.
  • align: Establece la alineación de la imagen en relación a los elementos que la rodean. Sus posibilidades son:
    • Top: Arriba
    • middle: medio 
    • left: izquierda
    • right: derecha
    • bottom: Abajo
  • border: Define el ancho del borde de la imagen mediante un valor expresado en píxeles.
  • hspace y vspace: Espacio horizontal y vertical que separa la imagen de los elemntos que la rodean, respectivamente. Se define en píxeles.
  • longdesc: Hace referencia a un archivo de texto tipo "txt" que contiene una definici´ñon extensa de la imagen mostrada. Se suele utilizar para personas con deficiencias, que puedan acceder al contenido gráfico a través de un texto alternativo.

Como pueden ver, es muy sencillo incluir imagenes en nuestra página web. Pero no se nos tiene que olvidar que las imagenes tiene que ser archivos pequeños. Hoy en día la cantidad de dispositivos diferentes que se puede conectar a nuestra web, es muy variada, desde smartphones, ipad, portatiles, sobremesa... y no todos tienen un ancho de banda igual. Por eso tenemos que intentar que, aunque nuestra página tenga muchas imágenes, esta no pese mucho en la red.