Hasta aquí, la definición de tu imagen debería ser algo como esto
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Sin embargo, algunos atributos pueden (y deben) asignarse al elemento img. En primer lugar, está alt. El texto definido aquí es el que muestra el navegador si la imagen -por la razón que sea- no se ha podido cargar.
Por desgracia, siempre hay malentendidos en relación con el atributo alt. En realidad, el atributo alt sólo se utiliza si la imagen no se muestra. Sin embargo, algunos navegadores muestran el valor del atributo alt en una ventana de información sobre herramientas cuando se pasa el puntero del ratón por encima de la imagen.
Este comportamiento es incorrecto. En su lugar, el atributo title está ahí para tales tooltips. La definición correspondiente sería la siguiente
<img src="images/logo.png" alt="PSD-Tutorials.de" title="El logotipo de PSD-Tutorials.de" />
En este caso, el valor de title anula el valor de alt.
Especificaciones de tamaño
Muchas cosas en HTML ya no se resuelven usando atributos, sino mediante CSS. Sin embargo, esto no incluye la definición de especificaciones de tamaño. La altura y la anchura se siguen definiendo mediante los dos atributos width y height. He aquí otro ejemplo:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="El logotipo de PSD-Tutorials.de" width="200" height="150" />
Si no se especifica ninguna unidad de medida para la anchura o la altura, el navegador interpreta los valores numéricos como valores en píxeles. En el ejemplo anterior, la imagen tiene 200 píxeles de ancho y 150 píxeles de alto. Un porcentaje también sería posible.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="El logotipo de PSD-Tutorials.de" width="20%" height="15%" />
Los porcentajes se refieren al espacio publicitario disponible. Si no se especifica el tamaño, los navegadores muestran los gráficos en su tamaño original.
Imágenes y párrafos de texto
Si coloca imágenes en combinación con el cuerpo del texto, debe tener cuidado.
<p><img src="logo.png" alt="" width="180" height="150" /> Este texto se muestra junto a la imagen.</p> <p>
img es un elemento inline. Por tanto, los gráficos pueden colocarse directamente en el texto. Si el gráfico es mayor que la altura de la línea, el navegador alinea el texto dentro de la línea. Por defecto, el texto se alinea al ras con la parte inferior del gráfico.
En versiones anteriores de HTML se podía influir en la alineación mediante el atributo align. Por favor, no lo utilice más, ya que ha sido eliminado del estándar HTML5. En su lugar, utilice las opciones que ofrece CSS. Esto le permite, por ejemplo, hacer que la imagen fluya alrededor del texto.
Una descripción larga
HTML te ofrece la opción de proporcionar una descripción detallada de una imagen. Esto siempre es práctico si una imagen requiere explicaciones. Puede guardar la información adicional en distintos lugares y hacer referencia a ella.
La información adicional puede ubicarse en distintos lugares.
<img src="imagen1.png" alt="Diagrama 1" title="Diagrama 1" longdesc="#diagrama" />
Aquí se supone que hay un área con el diagrama de identificación dentro de la página.
La variante más común es probablemente aquella en la que la información se guarda en un archivo externo.
<img src="imagen1.png" alt="diagrama 1" longdesc="diagrama1.htm" />
Sin embargo, aquí sigue faltando compatibilidad con los navegadores. Además, este atributo parece plantear a los fabricantes de navegadores la cuestión de cómo pueden implementarlo de forma sencilla.
Esto se debe a que Firefox, por ejemplo, no tiene una solución realmente agradable y autoexplicativa. Si una imagen tiene un atributo longdesc, los visitantes normales del sitio no lo reconocen a primera vista. En su lugar, tienen que hacer clic en la imagen con el botón derecho del ratón.
El menú contextual muestra entonces la opción Mostrar descripción. Si hace clic en él, se mostrará la información adicional especificada para longdesc. Como he dicho, esto funciona en Firefox, pero ciertamente no es elegante.
Opera tiene una solución similar. Si hace clic con el botón derecho en la imagen en este navegador, verá la entrada Descripción larga.
Esto lleva a la información adicional especificada.
WC3 también sugiere especificar la descripción larga en forma de URL de datos.
¡<img src="logo.png" alt="W3C" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E %3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20W3C%20Logo%3C/title%3E%3C/head%3E %3Cbody%3E%3Cp%3EA%20blue%20capital%20letter%20%22W%22%20with%20kerning%20so%20it%20 touches%20a%20blue%203%2C%20followed%20by%20a%20black%20shadow%20of%20a%20white%20 capital%20letter%20C%20all%20on%20a%20white%20background%3C/body%3E%3C/html%3E" />
Si aún no tiene experiencia con estas URL de datos, puede encontrar información detallada sobre ellas en http://de.wikipedia.org/wiki/Data-URL.
Definición de descripciones de imágenes
Hasta ahora no existían opciones para definir pies de foto y agrupaciones de imágenes en HTML. Este aspecto ha cambiado con HTML5. Se han introducido los dos nuevos elementos figure y figcaption.
A modo de anticipación: figure no está pensado exclusivamente para su uso en combinación con gráficos. De hecho, el elemento puede utilizarse para todos los elementos que complementan un documento. Además de imágenes, puede tratarse de diagramas, ejemplos de código y vídeos, por ejemplo.
Además de figure, también existe figcaption. Puede utilizarse para añadir una descripción alternativa al contenido que no es legible para determinados grupos de usuarios.
He aquí un ejemplo del uso de los dos elementos figure y figcaption:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>Este es nuestro nuevo logotipo.</figcaption> </figure>
Un vistazo al resultado en el navegador da el siguiente resultado:
La forma en que los navegadores manejen los dos elementos depende en última instancia de ellos. Sin embargo, puede influir en la visualización utilizando CSS.
Dentro de un elemento figura puede insertarse cualquier número de imágenes u otros elementos. Sin embargo, un elemento figura sólo puede contener un elemento figcaption. He aquí otro ejemplo:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <img src="logo_gross.jpg" width="400" height="250" alt="PSD-Tutorials.de" /> <figcaption>Este es nuestro nuevo logotipo.</figcaption> </figure>.
De este modo, también puedes empaquetar varias imágenes en un elemento figura.
También hay numerosas innovaciones en HTML5, sobre todo en lo que respecta a la estructuración lógica de sitios web y contenidos. Por supuesto, también las conocerás en detalle a lo largo de esta serie.
