ALINEACIÓN Y DIMENSIÓN DE IMÁGENES

6.ALINEACIÓN Y DIMENSIONADO DE IMÁGENES

Alineación de las imágenes

Si se quiere lograr diseños fantásticos y rodear con textos los gráficos se puede ALIGN junto con la etiqueta ya conocida

<IMG SRC= "imagen.gif">. Donde quiera que se desee que aparezca una imagen basta con insertar:

<IMG SRC="/camino/imagen.gif" ALIGN="left">   Alinea a la izquierda de la página

<IMG SRC="/camino/imagen.gif" ALIGN="center"> Alinea al centro de la página

<IMG SRC="/camino/imagen.gif" ALIGN="right">  Alinea a la derecha de la página

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 atributos 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.

Ejemplo

<IMG SRC="imagen.gif" ALIGN="left"> Este texto esta a un lado de la imagen.

<BR> Este tambien esta a un lado de la imagen, en la linea siguiente.

<BR CLEAR="left"> 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, interrum- pen el proceso de carga y solicitan al servidor que le envíe dicha imagen, quedando a la espera hasta que se complete el en- ví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 imagen <IMG SRC="imagen.gif"> que sirven para indicar al navegador cuáles son sus dimensiones en pixels. (Obtenidas 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áge- nes 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 o atributos son WIDTH (ancho) y HEIGHT (alto).

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

<IMG SRC="imagen.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 puede 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 (reproduc- ció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.

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

<A HREF="imagen.gif"><IMG SRC="imagen.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, por ejemplo 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, como algunas de las versiones más antiguas de Netscape.