Manual de HTML - Alineación y dimensionado de imágenes

8. Alineación y dimensionado de imágenes

Alineación de las imágenes

La alineación de las imágenes fue, en su día, el primer golpe de efecto del programa Navigator de Netscape. Permitió alinear una imagen a la izquierda o a la derecha de la página y hacer que el texto la rodee completamente, consiguiéndose así una apariencia similar a la de una revista. Es el caso de este párrafo con respecto a la imagen de la derecha. Obsérvese cómo las líneas, cuando rebasan su parte inferior, continúan normalmente hasta el margen derecho de la página. De manera análoga, se puede alinear la imagen a la izquierda, comportándose el texto de una forma equivalente. Esto se consigue con las extensiones de la etiqueta ALIGN, (que ya se vio en el Capítulo 4 con los comandos TOP, MIDDLE y BOTTOM). Pero entonces sólo se hacía referencia al titular de la imagen, es decir, a un texto explicativo, pero menor que una línea completa, pues en caso de rebasarla, el texto saltaba a la parte inferior de la imagen, dejando un hueco en blanco, con lo que su utilidad era muy limitada. Este inconveniente queda solventado con los comandos de Netscape RIGHT (derecha) y LEFT (izquierda). La imagen de arriba, "doom.gif", alineada a la derecha, se ha obtenido con la etiqueta:

<IMG SRC="doom.gif" ALIGN=RIGHT>

y la imagen de abajo, "doom2.gif", alineada a la izquierda, se ha obtenido con la etiqueta:

<IMG SRC="doom2.gif" ALIGN=LEFT>

Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se pueden emplear las siguientes extensiones de la etiqueta <BR>:

<BR CLEAR=LEFT> Busca el primer margen libre (clear) a la izquierda. 
<BR CLEAR=RIGHT> Busca el primer margen libre a la derecha. 
<BR CLEAR=ALL> Busca el primer margen libre a ambos lados.

Un ejemplo para aclarar esto:

<IMG SRC="isla.gif" ALIGN=LEFT> Este texto esta a un lado de la imagen. 
<BR> Este también esta a un lado de la imagen, en la línea siguiente. 
<BR CLEAR=LEFT> Este otro texto, en cambio, ha buscado el primer margen libre a la izquierda.

Que resulta:

Este texto esta a un lado de la imagen.
Este también esta a un lado de la imagen, en la línea siguiente.
Este otro texto, en cambio, ha buscado el primer margen libre a la izquierda.

Dimensionando la imagen

Los programas navegadores cuando cargan un documento HTML y encuentran una etiqueta de una imagen, interrumpen el proceso de carga y solicitan al servidor que le envíe dicha imagen, quedando a la espera hasta que se complete el envío, repitiéndose este proceso con cada una de las imágenes.

Esto es especialmente molesto cuando, como ocurre frecuentemente, en la cabecera de la página se encuentra una imagen grande, ya que durante un tiempo relativamente largo no se verá nada en la pantalla.

Para evitar este inconveniente existen unas extensiones de la etiqueta de la imagen <IMG SRC="imagen.gif"> que sirven para indicar al navegador cuáles son sus dimensiones en pixels. (Este dato lo habremos obtenido previamente de algún programa gráfico).

En este caso, el navegador actúa de una forma más favorable, ya que entonces, como conoce las dimensiones de las imágenes les reserva un espacio en la pantalla y va colocando el texto de forma apropiada, sin ninguna interrupción, a la vez que va rellenando esos espacios reservados a las imágenes.

Estos comandos son WIDTH (ancho) y HEIGHT (alto).

Por ejemplo, para la imagen isla.gif situada más arriba:

<IMG SRC="isla.gif" WIDTH=120 HEIGHT=94>

Es conveniente hacer esto con todas las imágenes, incluso con las más pequeñas (iconos, botones, etc), para que no haya ninguna interrupción en el proceso de carga del documento.

Se pueden también, si se quiere, dimensionar las imágenes con unos valores distintos a los que realmente tienen, variando el tamaño, la anchura o la altura. Esto es muy conveniente, por ejemplo para poner en la página un thumbnail (reproducción en pequeño de una imagen), que hace de enlace a la imagen en su verdadero tamaño. De esta manera no recargamos demasiado una página, y el usuario será quien decida qué imágenes desea cargar.

He aquí un ejemplo de thumbnail:

nytimes.gif (35334 bytes) La imagen, "nytimes.gif", tiene realmente unas dimensiones de 575 x 300 pixels (datos obtenidos de un programa gráfico). Para dimensionar el thumbnail a 150x75 (guardando unas proporciones parecidas al original, de 2:1), lo conseguimos con:

<IMG SRC="nytimes.gif" WIDTH=150 HEIGHT=75>

Para hacer que esta imagen reducida sea el enlace con la imagen en su tamaño original, lo conseguimos con:

<A HREF="nytimes.gif"> <IMG SRC="nytimes.gif" WIDTH=150 HEIGHT=75> </A>

También se puede conseguir esto de otra manera, más correcta aunque más laboriosa. Es la de reducir en un programa gráfico esta imagen a 150x75, guardarla con otro nombre, y luego hacer que la pequeña sea el enlace de la grande. Es más correcta esta otra solución porque no todos los navegadores reconocen los comandos WIDTH y HEIGHT, incluso tampoco algunas de las versiones más antiguas de Netscape.

Ejemplo práctico

Partiendo del ejemplo práctico del capítulo anterior, mipag7.html, vamos a dimensionar las imágenes existentes y añadir otra, doom.gif, como ejemplo de imagen alineada a la izquierda, con su texto correspondiente.

Capturamos la imagen "doom.gif" y la guardamos junto con el fichero que vamos a crear. Cargamos el fichero mipag7.html y cambiamos las etiquetas de las imágenes de la siguiente manera:

<IMG SRC="hombre.gif"> por <IMG SRC="hombre.gif" WIDTH=29 HEIGHT=27> 
<IMG SRC="casa.gif"> por <IMG SRC="casa.gif" WIDTH= 30 HEIGHT=29> 
<IMG SRC="isla.gif"> por <IMG SRC="isla.gif" WIDTH= 120 HEIGHT=94>

(La imagen del fondo "nubes.jpg" no se dimensiona).

Además de esto, añadimos entre las etiquetas </CENTER> y </BODY> (al final del documento), lo siguiente:

<P> 
<HR> 
<P><IMG SRC="doom.gif" WIDTH=160 HEIGHT=100 ALIGN=LEFT>
Una de mis aficiones favoritas son los juegos tipo "Doom", con los que paso horas incontables. 
<BR CLEAR=LEFT> 
<P> 
<HR>

Guardamos este fichero como mipag8.html y lo cargamos en el navegador para verlo. Resultado


WebMaestro: http://wmaestro.com/webmaestro - © Francisco Arocena