Unidad 5. Imágenes (III)



5.4. Atributo alt de la etiqueta <img>

El atributo alt contiene texto alternativo, que se mostrará en lugar de la imagen cuando no sea posible verla.

Por ejemplo, si escribimos el siguiente código con el nombre del directorio erróneo (grafico en lugar de graficos) se mostrará el texto de atributo alt:

<img src="graficos/logoAulaclic.jpg" alt="Logo de aulaClic" />

Se muestra lo siguiente:

Logo de aulaClic

Si no existe la imagen ni tampoco el atributo alt algunos navegadores (Firefox) mostrarán un pequeño gráfico con un icono similar a este: Si no existe la imagen, y otros navegadores (Chrome) no mostrarán nada:

<img src="graficos/logoAulaclic.jpg" />

Se muestra lo siguiente:

Aunque el atributo Alt es obligatorio, si se omite no se producirá ningún error apreciable por el usuario. Si se omite este atributo, al validar la página con la herramienta W3C no dará una validación correcta. Aparte de la función principal de mostrar el texto cuando no existe la imagen, es importante utilizar Alt por dos motivos.

El primero es porque lo usan los buscadores para indexar las imágenes en sus bases de datos de forma que podamos encontrar la imagen desde un buscador, el segundo motivo es porque el atributo alt es utilizado por los programas que ayudan a los ciegos y personas con problemas visuales a leer las páginas web. En cualquier caso es importante dar un texto descriptivo y corto a este atributo.

5.5. Atributo title en la etiqueta <img>

El atributo title es un atributo global, es decir que puede usarse en la mayor parte de las etiquetas de HTML. El atributo title proporciona información descriptiva del elemento en el que está definido. El atributo title se muestra como un tooltip al colocar el cursor encima del elemento y es bastante utilizado en las etiquetas img ya que puede ser interesante proporcionar al usuario información sobre la imagen en forma de tooltip.

Por ejemplo, con el siguiente código mostrará el tooltip al dejar colocado el cursor sobre la imagen durante un segundo o más:

<img src="graficos/logoAulaclic.jpg" title="Cursos de inforaática gratis" />


Enero-2019 (V 2.0)
Pág. 5.3
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.