Texto que envuelve a las imágenes o alineamiento horizontal

Vista la necesidad de nuevos métodos de alineamiento se crearon dos nuevos valores para el atributo align: left y right, que nos permitirán controlar el alineamiento horizontal de las imágenes (esto es, izquierda o derecha). Estos valores se han convertido en los más usados de las páginas Web por su enorme utilidad. En seguida veremos como funcionan.

NOTA: Las imágenes pueden alinearse vertical y horizontalmente, pero nunca a la vez. Esto es así porque ambos tipos de alineamiento usan el atributo. align, y sólo puede incluirse uno de estos atributos dentro de la etiqueta img. Si ponemos más el navegador se quedará con el primer valor e ignorará el resto.

Antes es necesario hacer una matización. Aunque en un capítulo próximo estudiaremos con más detenimiento las diferentes versiones del lenguaje HTML, adelantaremos que los tres primeros valores estudiados: top,middle y bottom, pertenecen al estándar HTML 2.0. Sin embargo los dos nuevos valores que vamos a explicar fueron introducidos en la versión HTML 3.2. El lector se preguntará ¿y para que quiero saber yo eso? Pues bueno, todos los navegadores entienden HTML 2.0, pero alguno no entiende HTML 3.2 y por tanto no entenderán align=left ni align=right. Sin embargo no debemos preocuparnos en este caso, ya que es difícil a estas alturas encontrar un navegador que no soporte HTML 3.2 y por tanto podremos estar casi seguros que nuestros visitantes disfrutarán de nuestras imágenes alineadas.

Por otro lado aquellos visitantes de la página que usen un navegador muy antiguo verán lo mismo que si no hubiésemos puesto el atributo align, pero no tendrán ningún otro problema, por tanto concluiremos que podemos usar los nuevos valores sin demasiada preocupación.

Y después de esta matización pasamos ya a explicar el significado de estos atributos.

align=left

La palabra left significa, en inglés, izquierda, por tanto al usar este valor la imagen se sitúa a la izquierda de la página. Pero su efecto es aún más importante, ya que si a continuación de la imagen introducimos texto o cualquier otro elemento del Web éste rodeará a la imagen, no pasará a la siguiente línea.

Como es importante entender bien el significado de esta etiqueta para usarla adecuadamente vamos a explicar más detenidamente como reacciona un navegador cuando se encuentra una imagen alineada a la izquierda entre un párrafo de texto: en primer lugar se pasa a la siguiente línea y se inserta la imagen, alineada, como hemos dicho antes, a la izquierda. Después si el navegador se encuentra con más texto y queda sitio en la línea anterior a la imagen lo rellena con ese texto, cuando se acabe la línea seguirá mostrando el texto en las líneas sucesivas, rodeando la imagen. En la figura 5.15 podemos ver un ejemplo de su funcionamiento. Como vemos aunque insertamos la etiqueta img tras la palabra imagen tras insertar ésta el texto posterior a esta etiqueta sigue mostrándose como si la imagen no hubiera sido insertada.

Figura 5.15. Alineando una imagen a la izquierda con align=left conseguiremos que el texto envuelva a la imagen.

align=right

Probablemente el lector ya haya deducido que este otro valor sirve para indicar que la imagen estará alineada a la derecha (right significa precisamente derecha en inglés). El efecto provocado por align=right es idéntico al anterior, solo que ahora la imagen se situará a la derecha de la página y el texto la bordeará por la izquierda. En la figura 5.16 podemos apreciar el mismo código de la figura 5.15 pero cambiando el alineamiento de la imagen.

Figura 5.16. Usando align=right conseguimos igualmente que el texto envuelva a la imagen pero ahora ésta se situará a la derecha de la página.

NOTA: Existen otros modos de alineamiento, pero no funcionan en todos los navegadores, ni forman parte del lenguaje HTML. Esos modos de alineamiento han sido creados por los fabricantes de un determinado navegador y por tanto no funcionan con el resto. En posteriores capítulos hablaremos de este tema y de otras extensiones de los navegadores y comentaremos los otros tipos de alineamiento existentes.

Fuente: Copyright Jorge Ferrer, Rodrigo Garcia y Victor García, licencia Documentación Libre GNU, Versión 1.1