Atributos XHTML de las imágenes

Image via Wikipedia

Siguiendo nuestra máxima de "Aprenderás leguaje XHTML o aprenderás lenguaje XHTML" traigo hoy todo lo referente a los atributos xhtml de una imagen. Así, si queremos colocar una imagen como link en nuestro blog o página web (lo cual es muy recomendable si queremos que nuestro sitio sea ligero y no pesado y lento a la hora de abrir) estos son los valores que debemos añadirle para optimizarla a la vista y para que sea interpretada (esto es indexada) correctamente por los navegadores.

Un código XHTML de imagen luce así:




<img src="http://img188.imageshack.us/img188/8810/latazadecaf.png" />


Escribiendo el código anterior, cuya dirección de imagen es la del icono La taza de café, la imagen aparecerá en pantalla tal y como aparece aquí:

Sustituyendo la dirección de mi icono de taza de café por la dirección de alguna imagen subida por ti a un servicio de alojamiento de imágenes (como Flickr o Image Schack) podrás incorporarla a cualquier post de tu blog o en el sidebar (en el post, trabajando en la vista de "Edición HTML" en vez de en la convencional "Redactar", y en caso del sidebar, agregando el elemento de página "HTML/Javascript" con el cuál podrás introducir cualquier código a tu blog en un lugar diferente del que corresponde a las entradas o posts).

Ahora bien, ¿qué atributos debemos o podemos agregar en lenguaje XHTML al código de nuestra imagen? Acá sigue la lista explicada de los atributos de imagen:

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

• title: se usa para colocar un título a la imagen (es estándar en XHTML). Al poner el mouse sobre la imagen, el texto del title aparece en pantalla, en forma de un pequeño letrero.
• alt: es lo mismo que title, pero siguiendo el estándard de Microsoft (un estándar propio y caprichoso, diferente del universal que es usado por otros navegadores). El término proviene de "texto alternativo". Es necesario poner este atributo independientemente del de title para que Internet Explorer y versiones viejas de otros navegadores lean el título de la imagen. La frase o palabra que pongamos en alt será la que veremos mientras la imagen en cuestión se carga dentro de la página.
• width: es el ancho en píxeles de la imagen. Si nuestra imagen es mayor o menor de lo que pensábamos o quedaría mejor con otras proporciones en nuestra página, podemos manipular sus dimensiones desde este atributo y el siguiente (ancho y alto) y viendo la Vista Previa hasta que quedemos conformes.
• height: la altura de la imagen.
• align: se usa para alinear la foto a la derecha o la izquierda del texto que la acompaña (escribiemos "right" si la queremos a la derecha y left si a la izquierda; si la queremos en el centro escribimos "center")
• 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 todo esto dentro del código de la imagen. Pongo una vez más el ejemplo del icono de La taza:


<img src="http://img188.imageshack.us/img188/8810/latazadecaf.png" title="icono del blog La taza de cafe" alt="icono del blog La taza de cafe" width="80" height="15" align="center" hspace="2" vspace="2"/>



Una nota útil: si queremos colocar una imagen que sea en sí misma un link (al pinchar la imagen se abre una nueva página) sólo debemos agregar el código de un enlace a nuestro código de imagen. El código de un enlace es


<a href="http://ayudacubablogs.blogspot.com">La taza de café</a>




La dirección http://... es la dirección de la web a que queremos se vaya al pinchar la imagen (he puesto la dirección de La taza de café).
Donde pongo La taza de café puede ir un texto o una imagen, lo que se quiera que aparezca como link.

Así, si agrego un link a La taza de café a la imagen de mi icono el código será el siguiente:


<a href="http://ayudacubablogs.blogspot.com" target="_blank" ><img src="http://img188.imageshack.us/img188/8810/latazadecaf.png" title="icono del blog La taza de cafe" alt="icono del blog La taza de cafe" width="80" height="15" align="center" hspace="2" vspace="2"/></a>






Bueno, creo que haz aprendido bastante XHTML por hoy. Espero que lo apliques en tu página. Suerte con ello.