 |
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.
El siguiente ejemplo incluiría una imagen indicando su tamaño:
| <IMG SRC="logo.gif" HEIGHT="64" WIDTH="128"> |
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:
|
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.
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"> |
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.
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:
|
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.
