Imágenes

La mayoría de navegadores permiten visualizar imágenes en los formatos XBM (X Bitmap), GIF y JPEG. Se están incorporando otros formatos gráficos, como el PNG (Portable Network Graphic). Las imágenes implican tiempo de proceso y ralentizan la descarga y visualización de un documento, por ello conviene seleccionar las imágenes y limitar su número en un documento.

Para incluir una imagen, hay que escribir:

<IMG SRC="nombre_de_fichero">

La sintaxis para URLs con IMG SRC es idéntica a la utilizada en el ancla A HREF. Si el fichero gráfico es un fichero GIF, el nombre_de_fichero debe llevar la extensión .gif; los ficheros en formato X Bitmap, la extensión .xbm; las imágenes JPEG, la extensión .jpg o .jpeg; y los gráficos PNG, la extensión .png.

Tamaño

Conviene incluir los atributos HEIGHT y WIDTH en las etiquetas <IMG> para indicar las dimensiones de las imágenes (en pixels) al navegador, que asignará el espacio apropiado.

El siguiente ejemplo incluiría una imagen indicando su tamaño:

<IMG SRC="logo.gif" HEIGHT="64" WIDTH="128">

Alineación

Las imágenes se visualizan con cierta flexibilidad; pueden ser colocadas separadas del texto y alineadas. Conviene probar varias posibilidades para ver qué opción ofrece un aspecto mejor. Por defecto, se alinea el fondo de la imagen con el texto siguiente.

Para mostrar una imagen sin un texto asociado (por ejemplo, un logotipo), es recomendable hacerlo en un párrafo separado. Utiliza el atributo ALIGN en la etiqueta de párrafo para centrar la imagen o colocarla a la derecha de la ventana. El siguiente ejemplo:

<P ALIGN="CENTER"><IMG SRC="ew_imago.gif" WIDTH="80" HEIGHT="56"></P>

tendría el siguiente aspecto:

Imagotipo de Eureka web

Texto alternativo

Las imágenes ocupan un espacio considerable en comparación con el texto. Ello implica un cierto tiempo de transmisión para descargarlas, razón por la cual muchos usuarios desactivan la opción de descarga de imágenes en el navegador, sobre todo si tienen una conexión lenta.

El lenguaje HTML proporciona un mecanismo para informar a los lectores sobre el contenido de las imágenes que no están viendo. El atributo ALT permite especificar un texto alternativo a mostrar si no se carga una imagen.

Por ejemplo:

<IMG SRC="segovia.gif" WIDTH="400" HEIGHT="240" ALT="Vista panorámica de Segovia">

mostraría el texto alternativo Vista panorámica de Segovia si no se descargase el fichero gráfico ew_imago.gif. Incluir texto alternativo para cada imagen de un documento es todo un detalle para los lectores, que lo agradecerán.

Imágenes de fondo

Los navegadores pueden descargar una imagen y usarla como fondo de una página. Si quieres incluir una imagen de fondo para tus documentos HTML, asegúrate de que el texto puede ser leído fácilmente sobre él. Las imágenes de fondo suelen ser texturas (por ejemplo, el fondo de estas páginas) o una imagen de un objeto (por ejemplo, un logotipo).

En cualquier caso, sólo es necesario crear una pequeña porción de la imagen; el navegador embaldosará toda la ventana con ella. Esta acción de replicar la imágen para llenar la ventana del navegador es automática y funciona cuando se utiliza el atributo BACKGROUND en la etiqueta <BODY>. Estas páginas utilizan el siguiente código para mostrar el fondo actual:

<BODY BACKGROUND="ew_fondo.gif">

Color de fondo

Por defecto, los navegadores suelen mostrar el texto en color negro sobre un fondo gris o blanco. De todos modos, se pueden cambiar estos elementos y otros similares. Los autores de documentos HTML acostumbran a coordinar el color de fondo con el color del texto. Conviene previsualizar estos cambios para asegurarse de que las páginas son legibles. Por ejemplo, este texto verde sobre fondo blanco resulta muy difícil de leer.

Es posible cambiar el color del texto, los enlaces, los enlaces visitados y los enlaces activos utilizando atributos de la etiqueta <BODY>. Por ejemplo:

<BODY BGCOLOR="#000080" TEXT="#FFFFFF" LINK="#FFFF00" VLINK="#00FF00" ALINK="#FF0000">

crea una página con el fondo (BGCOLOR) azul oscuro, el texto (TEXT) de color blanco, los enlaces (LINK) en amarillo, los enlaces visitados (VLINK) en verde y los enlaces activos (ALINK) en rojo.

El número de seis dígitos representa los colores según su valor RGB (red, green, blue). Los seis dígitos son, de hecho, tres números de dos dígitos en una secuencia, representando la cantidad de rojo, verde y azul en un valor hexadecimal en el rango 00-FF. Por ejemplo, 000000 es el color negro, FF0000 es el color rojo, 00FFFF es el color verde y FFFFFF es el color blanco.

Si la página incluye una imágen de fondo es muy aconsejable especificar un color de fondo similar, pues si esta no se descarga, el texto ha de ser igualmente legible.

Imágenes y animaciones externas

Puede ser que quieras tener una imagen abierta como un documento separado cuando un usuario active un enlace. A ello se le llama una imagen externa, y resulta útil si no deseas ralentizar excesivamente la descarga del documento principal con enormes imágenes.

El siguiente ejemplo es una referencia a una imagen externa:

Pincha <A HREF="imagen.gif">aquí</A> para ver la imagen a tamaño natural.

Es una buena idea incluir una imagen más pequeña como enlace a una imágen grande. El siguiente ejemplo muestra cómo conseguirlo:

<A HREF="mayor.gif"><IMG SRC="menor.gif"></A>

El lector verá la imagen menor.gif y podrá pichar sobre ella para abrir el fichero mayor.gif.

Utiliza la misma sintaxis para enlaces a animaciones y sonidos externos. La única diferencia es la extensión del fichero enlazado. Este ejemplo:

<A HREF="liber97.mov">Vídeo resumen del Liber 97</A>

especifica un enlace a un video QuickTime.

Algunos tipos de fichero comunes y sus extensiones son:

Tipo de ficheroExtensión
Texto ASCII.txt
Documento HTML.htm o .html
Imagen GIF.gif
Imagen TIFF.tif
Imagen X Bitmap.xbm
Imagen JPEG.jpg o .jpeg
Fichero PostScript.ps
Fichero de sonido AIFF.aif o .aiff
Fichero de sonido AU.au
Fichero de sonido WAV.wav
Vídeo QuickTime.mov
Vídeo MPEG.mpg o .mpeg

Ten en cuenta tu futura audiencia y su acceso al software; por ejemplo, la mayoría de sistemas UNIX no pueden mostrar vídeos QuickTime.



Anterior Siguiente
Sumario | Inicio