Tutorial de HTML - 3

En el primer post dedicado al tema aprendimos a comenzar un archivo de HTML escribiendo el código en un editor de textos. Luego aprendimos a incorporar una lista y los encabezados. Ahora insertaremos imágenes entre los párrafos.
Es fundamental saber que para que un sitio sea accesible las imágenes deben tener un texto alternativo que pueda ser leído por los programas lectores de pantalla utilizados por los no videntes.
De esa manera, cuando el programa llegue al lugar donde está la imagen leerá, por ejemplo “fotografía del autor de la página” en lugar de leer sencillamente “imagen”.
Para insertar una imagen en nuestra página web debemos primero tener en un archivo GIF o JPG esa imagen. Tanto en el caso de las imágenes como de animaciones en GIF o SWF (Flash), debemos cuidar que el contenido de ese archivo no sea central para comprender el significado de la página. Un menú realizado en Flash sin utilizar opciones de accesibilidad no permitirá que un no vidente acceda a las opciones. En cambio, una película de Flash (SWF) que ilustre el contenido textual y que sea insertada con texto alternativo será el equivalente a haber insertado una imagen JPG o GIF.

Una vez que tengamos la imagen en la misma carpeta de nuestra página deberemos utilizar la etiqueta IMG SCR. Insertaremos dos renglones en el ejercicio de la clase anterior. En el primero, insertaremos la imagen que tenemos disponible:

<IMG SRC="mifoto.jpg" ALT="Esta es mi foto">

En la segunda, vamos a hacer la prueba de intentar insertar una imagen que no existe para comprobar la utilidad del atributo ALT:

<IMG SRC="mifotonoes.jpg" ALT="Esta NO es mi foto">

Al visualizar el archivo en un navegador observamos que en el primer caso se muestra la imagen y en el segundo caso, sólo un recuadro con el texto alternativo (en Internet Explorer) o el texto alternativo (en Mozila Firefox). En ambos casos, al acercar el mouse veremos en un cartelito flotante el texto alternativo definido.
(imagen con el texto alternativo)

Los últimos detalles

A medida que nuestra página vaya creciendo tendremos cada vez más y más archivos en la misma carpeta. Para facilitar su identificación, es mejor organizarlos en carpetas.
Vamos a colocar todas nuestras imágenes en una carpeta llamada imagenes
Luego de mover los archivos, nos queda modificar el código. Tendremos que aclarar que el archivo mencionado se debe tomar de la carpeta correspondiente:

<IMG SRC="/imagenes/mifoto.jpg" ALT="Esta es mi foto">

También puede ocurrir que nos guste nuestra imagen pero no exactamente su tamaño. Podemos indicarle un tamaño diferente con los parámetros width (ancho) y height (alto):

<IMG SRC="/imagenes/mifoto.jpg" ALT="Esta es mi foto" width=50 height=50 >

Ejercicios para seguir practicando:
1) Probar qué ocurre si sólo se menciona el ancho (width) o el alto (height)
2) Se puede anteponer al nombre de la foto una dirección de web. Eso indicaría que se desea insertar una imagen que se encuentra en línea. Por ejemplo, para insertar el logo del buscador google:
<img src="http://www.google.com/logos/Logo_40wht.gif" alt="Logo Google">

El presente pertenece a una serie de posts con la intención de brindar un tutorial para crear sitios web accesibles, comenzando desde el principio: el lenguaje HTML