Alineamiento de imágenes
En los ejemplos vistos al principio, en los que insertábamos imágenes junto con texto normal, la parte inferior de la imagen quedaba alineada con la parte inferior del texto. La etiqueta IMG tiene un atributo llamado ALIGN que nos permite controlar el alineamiento vertical de la imagen en función del texto que le rodee o de otras imágenes de la misma línea. El atributo ALIGN puede tomar cinco valores diferentes. En primer lugar veremos aquellos que nos permiten controlar la alineación vertical de la imagen. Para cada uno de ello mostraremos dos ejemplos, en ambos la imagen que será alineada es un cuadrado rojo con una línea que marca su centro. En el primero la imagen irá seguida de tres líneas de texto y en el segundo irá precedida de una imagen el doble de alto que marcará los límites verticales de la línea.
- align=top:
-
Alinea la parte superior de la imagen con la parte superior de la línea. Para determinar cual es el límite superior de la línea se tendrán en cuenta todos los elementos de esta (ya sean texto, imágenes u otros), tanto los anteriores como los posteriores a la imagen que estamos insertando. En la figura 5.12 podemos ver dos ejemplos de align=top. El primer caso es sencillo de entender, pero el segundo requiere alguna explicación. La primera imagen se alinea (por defecto) con su parte inferior a la misma altura que la base del texto, después nuestro cuadrado rojo, alinea su parte superior con la parte superior de dicha imagen.
- align=middle:
-
Alinea el centro (vertical) de la imagen con el centro de la línea. Si la línea esta compuesta únicamente por texto el se tomará la base de éste como centro de la línea. Si hay más elementos el navegador calcula cual es el centro de la línea en función de todos ellos. En la figura 5.13 podemos ver unos ejemplos.
- align=bottom:
-
Alinea la parte inferior de la imagen con la parte inferior de la línea de texto. En este caso no se tendrán en cuenta otros elementos a parte del texto para realizar el alineamiento. De nuevo podemos ver ejemplos de este alineamiento en este caso en la figura 5.14.
NOTA: Es posible que nos encontremos alguna página en la que haya una imagen con el atributo align=center. Este nuevo valor (center) sólo funciona con Internet Explorer y tiene el mismo significado que align=middle y además su nombre puede confundirnos y creer que la imagen se mostrará como si estuviese encerrada por la etiqueta <center>..</denter>. Por estas dos razones recomendamos el uso de align=middle en su lugar.
Estos tres son los únicos tipos de alineamiento que incluía el lenguaje HTML en sus orígenes. Sin embargo, aunque son útiles, no nos permiten controlar la disposición de las imágenes tanto como querríamos. Por ejemplo, todavía no podemos insertar una imagen y que el texto la bordee tal y como veíamos en la figura 5.11. De hecho en todos los valores anteriores sólo la primera línea de texto introducida después de la imagen se situaba a la derecha de esta, aunque esta línea estuviese en la parte superior de la imagen como ocurría en el primer caso de la figura 5.12. La segunda línea y las siguientes serían mostradas debajo de la imagen.
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.
- 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.
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.
