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


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.

Task Discussion


  • robicho   May 9, 2012, 6:08 p.m.

    Cual es el peso recomendado de cada tipo de imagen ? Y el de una pagina web ?

  • jose francisco   May 10, 2012, 5:40 p.m.
    In Reply To:   robicho   May 9, 2012, 6:08 p.m.

    No hay un peso recomendado para las imagenes. Siempre vamos a intentar que las imagenes pesen lo menos posible pero sin perder nunca demasiada calidad. Yo personalmente siempre intento que las imagenes pesen menos de 100kbs.

    Por eso es conveniente elegir bien el formato que vamos a utlizar para nuestras imagenes. En una foto que va en blanco y negro no me hace falta utilizar un jpg. Es un icono y con dos colores. Entonces utilizare un gif con una paleta de dos colores.

    Hoy en día tambien se utiliza el coger una parte de la imagen y repetirla para crear un fondo, con lo que su peso se reduce. Pero esto ya lo veremos con las css.

    Una cosa que muchas veces no tenemos presente es que no solo hay que cargar las imagenes. Hoy en día una página esta compuesta de imagenes, script de programación, reglas css, etc... todo esto ha de ser cargado para que una página funciones correctamente.