Imágenes en HMTL

Para asentar las ideas de HTML, veamos cómo sería para incluir imágenes. ¿Qué necesitamos conocer? Pues, la marca para las imágenes, que es img (de image). ¿Y necesitamos algún atributo? Sí, porque hemos de indicar un recurso, vía una URL, que sea una imagen. Así, si para los enlaces indicábamos la URL donde nos dirigiríamos en caso de que alguien pulsara, en este caso, la URL será la dirección de la imagen. Aunque por simplicidad podrían haber llamado al atributo href, por desgracia no fuea así; el estándar dice que el atributo es src (de source, fuente en inglés). En definitivas cuentas, si queremos añadir una imagen, tendríamos algo así:

<p>
  Y ahora añadimos una imagen:
</p>
<img src="http://www.ite.educacion.es/images/stories/logotipos/logo_intef.png" />

Añadiendo una imagen

Elaboración propia.


Las imágenes no necesitan una marca de cierre, por lo que le podemos añadir la barra al final de la marca única. Existen más atributos que podríamos añadir a la marca de la imagen, como por ejemplo, unos para añadir el ancho y el alto de la imagen. Pongamos que quisiéramos que fuera de 200x100 píxeles, porque la imagen original se muestra muy grande. Tendríamos algo así (nótese que hemos perdido el ratio de la imagen original, por lo que la imagen nos sale algo deformada):

<p>
  Y ahora añadimos una imagen:
  <img src="http://www.ite.educacion.es/images/stories/logotipos/logo_intef.png" width="200" height="100" alt="Logo INTEF" />
</p>

Añadiendo una imagen (y especificando su tamaño)

Elaboración propia.

Como siempre nos gusta hacer, para no perder la perspectiva, Veamos ahora qué sucede cuando guardamos esto y lo abrimos con un navegador. El navegador, sin mediar interacción por parte del humano que lo está utilizando, ve que se quiere incluir una imagen en la página web. Sabe que la imagen está en una URL que viene indicada por el valor del atributo src. Lo que hará el navegador es una petición GET al servidor www.ite.educacion.es para pedir el recurso images/stories/logotipos/logo_intef.png, que no es otra cosa que la imagen. El servidor se la enviará vía HTTP. En este caso, al no ser una página web, la respuesta no incluirá un texto plano, sino la imagen en binario. El navegador la tomará y la interpretará convenientemente (en este caso, verá que se trata de una imagen en formato PNG) y la incluirá en la página web, transformándola debidamente para que su tamaño sea de 200x100 píxeles.

¿Y qué es eso de alt? Pues es otro atributo más. En este caso, es un atributo un poco particular, ya que sólo se visualiza en situaciones excepcionales, como podría ser cuando la imagen -por la razón que fuera- no está presente (y entonces se muestra en su hueco el contenido de alt, donde se recomienda poner una descripción de la imagen). Pero el caso más interesante es que la inclusión del atributo alt permite tener navegadores para invidentes; estos programas leen las páginas web a los invidentes y, al llegar a una imagen lo que hacen es leer su descripción. De esta manera, también los invidentes pueden navegar por Internet.

Pregunta Verdadero-Falso

Pregunta 1

Sería válida la secuencia:   <img alt="Logo INTEF" width="200" height="100" src="http://www.ite.educacion.es/images/stories/logotipos/logo_intef.png" />

Sugerencia

Pruébalo con tu editor de textos, guárdalo y ábrelo con tu navegador para comprobarlo.