Los atributos de las imágenes del blog

Los atributos son los elementos que podemos insertar dentro de las etiquetas XHTML. En esta ocasión quiero hablar de la etiqueta IMG que sirve para pintar o publicar una imagen esté donde esté. La etiqueta IMG tiene el siguiente aspecto. Recordemos que los puntos suspensivos reemplazan a la ruta http de la imagen.

<img src="...." />

Los atributos de la etiqueta IMG son: title, alt, width, height, align, hspace y vspace.

• title: sirve para poner un título a la imagen y es estándar en XHTML. Las últimas versiones del navegador Explorer la leen, gracias a que a Microsoft, contra su voluntad, se le ha forzado a ello. Al poner el ratón sobre la imagen, el texto del title le aparece al internauta; aunque en Explorer esta función se otorga a la etiqueta alt.
  
• alt: es el mismo atributo que title, pero siguiendo el pseudo-estándard de Microsoft. El término proviene de "texto alternativo". Lamentablemente conviene que los desarrolladores la pongan con el fin de compatibilidad con navegadores de hace unos años. Simplemente cortamos lo que hayamos puesto en el elemento title y lo pegamos en el elemento alt.
  
• width: sirve para marcar en píxeles el ancho de la imagen.
• height: sirve para mostrar el alto de la imagen.
• align: usada para alinear la foto a la derecha o izquierda del texto que le acompaña (right=derecha y left=izquierda)
• hspace: para marcar el espacio horizontal que dejamos entre el texto y el borde de la imagen.
• vspace: para marcar el espacio vertical que dejamos entre el texto y el borde de la imagen.
  

Veamos ahora cómo se incrustan estos elementos en la etiqueta. Pongo un ejemplo ficticio:

<img src=".../ehu.png" title="EHU" alt="EHU" width="80" height="15" align="left" />

Los elementos width y height solemos ponerlos cuando queremos cambiar algo las medidas de una foto o imagen original que hemos subido al servidor sin antes bajarla en tamaño. Con estas dos etiquetas y teniendo siempre en cuenta que conviene guardar la proporcionalidad entre el ancho y alto, adaptamos mejor la imagen al espacio en el que queramos insertarla. También quiero recordar que el error más común que tienen los bloggers novatos es el de poner los atributos sin separación alguna entre ellos, lo cual es un error grave ya que de esa forma el navegador no los puede leer. Los elementos deben ir separados, como aparece en el ejemplo.


Etiqueta en Technorati: XHTML Categorizado en: trucos Wikipedia: XHTML