Imágenes en HTML (III)
por Luciano Moreno, del departamento de diseño web de BJS Software.

La etiqueta <IMG> (y II).-

Seguimos con los atributos de IMG:

* ALIGN="left / right / top / middle /bottom": que establece la alineación que va a tener la imagen en la página. Las alineaciónes pueden ser de tipo horizontal (left a la izquierda - right a la derecha) o verticales (top en lo alto, middle en medio y bottom abajo). El valor por defecto es left. Vamos a analizar las diferentes posibilidades una a una, ya que ofrecen matizes que conviene explicar.

Si no establecemos una alineación determinada, hemos dicho que por defecto se toma left, pero hay una diferencia entre no poner nada y asignar una alineación a la izquierda. Si no ponemos nada y colocamos una imagen "a pelo" entre dos trozos de texto, esta ocupará su posición natural en la página. Ejemplo:

ejemplo de<IMG SRC= "images/bandera.jpg" WHIDTH="55" HEIGHT= "37">imagen entre texto y sin alineación

que nos da:

ejemplo de imagen entre texto y sin alineación

donde vemos que la imagen se sitúa entre las dos porciones de texto, sin ruptura de línea.

Pero si asignamos un valor ALIGN="left", ya no se produce este efecto. Ahora el texto se sitúa rodeando la imagen, envolviéndola. Ejemplo:

ejemplo de<IMG SRC= "images/bandera.jpg" WHIDTH= "55" HEIGHT= "37" ALIGN= "left">imagen entre texto y  alineación...

que nos da:

ejemplo de imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación

En el caso de ALIGN="right" ocurrelo mismo. Ejemplo:

ejemplo de<IMG SRC= "images/bandera.jpg" WHIDTH= "55" HEIGHT= "37" ALIGN="right">imagen entre texto  y alineación...

ejemplo de imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación

En ambos casos, si colocamos en el código primero la imagen con alineación y después el texto, este rellenará el espacio lateral disponible, sin que aparezca entonces la primera línea encima de la imagen. Ejemplo:

<IMG SRC= "images/bandera.jpg" WHIDTH= "55" HEIGHT="37" ALIGN= "left">imagen entre texto y alineación...

imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación

Este efecto conseguido, en el que el texto parece flotar alrededor de la imagen es conocido como imágenes flotantes.

Si establecemos la alineación como ALIGN= "top" la imagen se situará encima del texto que le sigue, excepto la primera línea de texto siguiente, salvo que la primera línea de texto sea excesivamente larga, en cuyo caso no permitirá ni siquiera que esta flote a su lado, desplazándose todo el texto a la parte inferior de la imagen. Ejemplo:

<IMG SRC= "images/bandera.jpg" WHIDTH= "55" HEIGHT="37" ALIGN= "top">imagen con alineación superior...

imagen con alineación superior imagen con alineación superior imagen con alineación superior imagen con alineación superior imagen con alineación superior imagen con alineación superior imagen con alineación superior imagen con alineación superior imagen con alineación superior imagen con alineación superior imagen con alineación superior imagen con alineación superior

Si queremos forzar a esta primera línea a que salte también debajo de la imagen, basta situar una etiqueta <BR> trás la definición de esta. Ejemplo:

<IMG SRC= "images/bandera.jpg" WHIDTH= "55" HEIGHT="37" ALIGN= "top"><BR>imagen con alineación superior...

imagen con alineación superior imagen con alineación superior imagen con alineación superior imagen con alineación superior imagen con alineación superior imagen con alineación superior imagen con alineación superior imagen con alineación superior imagen con alineación superior imagen con alineación superior imagen con alineación superior imagen con alineación superior

Cuando usamos la alineación ALIGN= "middle", es decir, alineación superior centrada, ocurrirá algo parecido al caso anterior: la primera línea se sitúa al lado de la imagen, pero centrada verticalmente en el espacio lateral restante, y las siguientes líneas saltan debajo de la imagen. Ejemplo:

<IMG SRC= "images/bandera.jpg" WHIDTH= "55" HEIGHT="37" ALIGN="middle">imagen con alineación media...

imagen con alineación vertical media imagen con alineación vertical media imagen con alineación vertical media imagen con alineación vertical media imagen con alineación vertical media imagen con alineación vertical media imagen con alineación vertical media imagen con alineación vertical media imagen con alineación vertical media imagen con alineación vertical media imagen con alineación vertical media imagen con alineación vertical media

Al igual que antes, si queremos que la primera línea se sitúe debajo de la imagen, basta con añadir un <BR> al final de la etiqueta IMG.

Por último, si establecemos una alineación ALIGN="bottom", es decir, vertical inferior, la primera línea se sitúa en el lateral de la imagen, pero en su parte inferior, y las demás se colocan debajo de la imagen, consiguiendo con ello una continuidad en el texto. Ejemplo:

<IMG SRC= "images/bandera.jpg" WHIDTH= "55" HEIGHT="37" ALIGN="middle">imagen con alineación inferior...

imagen con alineación vertical inferior imagen con alineación vertical inferior imagen con alineación vertical inferior imagen con alineación vertical inferior imagen con alineación vertical inferior imagen con alineación vertical inferior imagen con alineación vertical inferior imagen con alineación vertical inferior imagen con alineación vertical inferior imagen con alineación vertical inferior imagen con alineación vertical inferior imagen con alineación vertical inferior

También existen otros valores posibles para el atributo ALIGN, como absbottom,absmiddle, texttop, etc., pero son específicos de un navegador determinado, por lo que no conviene su uso.

Y ahora os preguntaréis ¿;no hay una forma de centrar las imágenes en pantalla mediante el atributo ALIGN?. Pués bien, NO la hay, desgraciadamente. Si queremos centrar una imagen en pantalla deberemos utilizar las etiquetas <CENTER> (no aconsejable - declarada obsoleta por el W3C), <P ALIGN="center"> o <DIV ALIGN="center">, pero en ningún caso podremos con ellas situar texto en sus laterales. Ejemplo:

<P ALIGN="CENTER"><IMG SRC= "images/bandera.jpg" WHIDTH= "55" HEIGHT= "37"></P>

En los ejemplos anteriores de imágenes flotantes habréis apreciado cómo el texto se sitúa alrededor de la imagen, pero a veces se pega demasiado a ella, resultando un efecto de apelotonamiento que no suele ser el adecuado. Podemos fijar el espacio que debe haber vacío alrededor de la imagen, y esto se consigue mediante los siguientes atributos.

* HSPACE="valor" / VSPACE="valor": que van a establecer el espacio horizontal y el espacio vertical que va a haber entre la imagen y el texto que la rodea. El parámetro valor es un número que representa la medida del atributo en pixels. Ejemplos:

<IMG SRC= "images/bandera.jpg" WHIDTH= "55" HEIGHT="37" ALIGN= "left" HSPACE="40">imagen entre texto  y alineación...

imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación

<IMG SRC= "images/bandera.jpg" WHIDTH= "55" HEIGHT="37" ALIGN= "left" VSPACE="10">imagen entre texto y alineación...

imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación imagen entre texto y con alineación