5.1.Características generales

Las imágenes que se incorporan a una página Web son habitualmente de dos tipos : en formato GIF y en formato JPG. Sin entrar aquí en discusiones técnicas al respecto, comentaremos brevemente cuando debemos usar unas u otras.

El formato GIF, con un máximo de 256 colores, es ideal para imágenes pequeñas, con fondos monótonos, con poca "variedad". El formato JPG (con un espectro de color muy superior) lo usaremos normalmente cuando las imágenes sean muy variadas en su contenido, con pocas zonas iguales, y siempre que queramos una buena calidad de presentación. Los algoritmos utilizados en la compactación de imágenes JPG permiten trabajar perfectamente al 75% de compresión, produciendo imágenes que ocupan relativamente poco y con calidades más que aceptables.

La etiqueta que permite colocar imágenes es

      <IMG>

acompañada siempre del atributo SRC que nos permitirá especificar la imagen que queremos colocar en el documento. Por ejemplo:

      <IMG SRC="maparec.gif">

Esta etiqueta no se cierra, puede ponerse en cualquier lugar como si de texto se tratase, y se ve afectada por otras etiquetas, como por ejemplo <CENTER>.

El atributo ALIGN se usa para alinear verticalmente la imagen y el texto que la sigue.

Si ALIGN=top, el borde superior del texto se colocará alineado con el borde superior de la imagen.

Si ALIGN=middle, se centrará la imagen y la primera línea del texto, y si hay más líneas de texto, aparecerán bajo la imagen.

Si ALIGN=bottom, el borde inferior del texto se colocará alineado con el borde inferior de la imagen.

En Netscape también podemos alinear las imágenes en horizontal. Para ello disponemos de dos valores más del atributo ALIGN, left y right. La imagen queda alineada a la izquierda o a la derecha, y el texto fluye a su alrededor.

La alineación vertical en Netscape también se ha mejorado con cuatro valores más de ALIGN:

texttop: la parte superior de la imagen se alinea con el texto más altode la línea.

top: la imagen se alinea con el primer carácter de la línea.

absmiddle: calcula el centro exacto de la imagen y la alinea con el texto.

absbottom: alinea la parte inferior de la imagen y la línea de texto.