Para incluir gráficos e imágenes en nuestras páginas, utilizaremos la etiqueta
<IMG>. La sintaxis mínima de la etiqueta <IMG> es la siguiente:
<IMG SRC = "archivo_gráfico"
ALT = "descripción
">
Cuando el navegador interpreta el documento fuente y llega a la etiqueta
<IMG> recupera el archivo cuya ubicación es indicada por el atributo SRC (source, origen o fuente) y reemplaza el elemento por la imagen. Observe que
<IMG> es una etiqueta vacía que, por tanto, se utiliza siempre sin etiqueta de cierre. El atributo SRC siempre es requerido y puede ser una ruta absoluta o relativa de un archivo, incluyendo un URL.
La etiqueta
<IMG> tiene varios parámetros:
ETIQUETA PARA DEFINIR IMAGEN
<IMG SRC =
"archivo_gráfico"
ALT = "descripción"
..... modificadores.... >
Modificador Descripción del Modificador
src = "imagen" Indica el nombre del archivo gráfico que desea mostrar.
alt = "texto"
Mostrará el texto indicado en el caso de que el navegador utilizado para ver la página no sea capaz de visualizar la imagen. En la mayoría de los navegadores modernos se muestra un mensaje emergente al momento de pasar el apuntador del mouse sobre la imagen.
lowsrc ="imagen"
Muestra una segunda imagen "superpuesta" sobre la primera una vez que se carga la página. Este parámetro no es reconocido por la totalidad de los navegadores ya que está en estudio su aplicación, así que en la mayoría de los casos será ignorado, mostrando sólo la primera imagen (src). En Netscape muestra la imagen indicada por lowsrc en primer lugar, y posteriormente muestra la imagen indicada por src. Si las imágenes son iguales pero tienen distinta "resolución" se conseguirá un efecto tipo "Fade". Si las imágenes son de distinto tamaño la imagen indicada en src se redimensionará al tamaño indicado por la imagen indicada en lowsrc.
align = TOP / MIDDLE / BOTTOM
Indica cómo se alineará la primera línea de texto que siga a la imagen. TOP alinea el texto con la parte superior de la imagen, MIDDLE con la parte central, y BOTTOM con la parte inferior.
border = "tamaño" Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un borde que será visible cuando la imagen forme parte de una hiperliga.
Modificador Descripción del Modificador
height = "tamaño" Indica el alto de la imagen en puntos o en porcentaje. Se usa para modificar el tamaño de la imagen original.
width = "tamaño" Indica el ancho de la imagen en puntos o en porcentaje. Se usa para modificar el tamaño de la imagen original.
hspace = "margen" Indica el número de espacios horizontales, en puntos, que separarán la imagen del texto que la siga y la anteceda.
Vspace = "margen" Indica el número de puntos verticales que separarán la imagen del texto que le siga y la anteceda.
ismap / usemap Indica que la imagen es un MAPA sensitivo.
Formatos
Hay dos formatos de imágenes que todos los navegadores modernos reconocen. Son las imágenes
GIF y
JPG. Las últimas versiones de Netscape y Explorer aceptan también el formato PNG.
Cualquier otro tipo de archivo gráfico o de imagen (BMP, PCX, CDR, etc...) no será mostrado por el navegador, a no ser que disponga de un programa externo que permita su visualización.
Modificadores
Tamaño
Existen dos atributos que, aunque son opcionales, convienen indicar siempre: la altura y el ancho del gráfico en pixeles. De este modo, el navegador puede mostrar un recuadro del tamaño de la imagen mientras la va leyendo de la red y así poder mostrar el resto de la página correctamente mientras tanto.
<IMG SRC="../Capitulo8/imagenes/interrogacion.gif"
ALT="Esto es una imagen"
WIDTH="80"
HEIGHT="60
">
En este ejemplo se muestra una imagen que tiene un ancho de 88 pixeles y una altura de 31 pixeles.
El texto que aparecerá antes de que se cargue la imagen será el que está asignado al parámetro ALT.
Alineación
Para poder colocar texto e imágenes en una misma página, HTML proporciona un parámetro muy útil para controlar la posición de estos elementos. Por medio del parámetro ALIGN, es posible alinear una imagen respecto del texto que la acompaña. La siguiente tabla muestra los valores posibles para el parámetro ALIGN.
Modificador Descripción del Modificador
TOP Coloca el punto más alto de la imagen coincidiendo con el más alto de la
línea de texto actual.
MIDDLE Alinea el punto medio (en altura) de la imagen con la base del texto.
BOTTOM Alinea el punto más bajo de la imagen con la base del texto.
LEFT Coloca la imagen a la izquierda del texto.
RIGHT Coloca la imagen a la derecha del texto.
Texto alternativo
El parámetro ALT especifica el texto que se mostrará en lugar del gráfico en aquellos navegadores que no sean capaces de mostrarlos (como el Lynx) y en el supuesto de que el usuario los haya desactivado. Algunos navegadores lo muestran cuando pasamos el ratón por encima de la imagen.
Es por eso que, aunque algunos usuarios no lo lleguen a ver nunca, conviene ponerlo siempre. De hecho, el estándar HTML 4.0 obliga a hacerlo.
Imagen de fondo
Hasta el momento se ha explicado cómo utilizar la etiqueta
<IMG> para mostrar imágenes en nuestras páginas Web. Ahora bien, es posible utilizar una imagen como "fondo" para una página.
Sin embargo, la etiqueta
<IMG> no permite colocar la imagen de fondo para una página Web. Por lo tanto, debemos apoyarnos en los parámetros que admite la etiqueta
<BODY>. Esta última etiqueta define una serie de características respecto a la apariencia de toda la página Web. La siguiente tabla muestra algunos de los parámetros que acepta la etiqueta
<BODY>.
Modificador Descripción del modificador
BACKGROUND Permite definir un gráfico de fondo para la página.
BGCOLOR Permite definir el color de fondo de la página.
TEXT Cambia el color del texto.
LINK Cambia el color de un enlace no visitado (por omisión azul).
VLINK Cambia el color de un enlace ya visitado (por omisión púrpura).
ALINK Cambia el color que toma un enlace mientras lo estamos pulsando (por omisión rojo).
No resulta recomendable cambiar los colores del texto y ligas a no ser que exista alguna dificultad para leerlos por haber cambiado el fondo, ya que en muchas ocasiones el usuario ha podido cambiarlos en las opciones de su navegador y estarán ya a su gusto.
En la siguiente imagen se muestra un signo de interrogación como imagen de fondo en una página de Web. El texto que aparece de color gris no forma parte de la imagen. La imagen original mide 80 pixeles de ancho por 60 pixeles de alto. De modo que, por sí sola no cubre todo el fondo de la página. Por lo que el propio navegador repite la misma imagen tantas veces como sea necesario, pues debe cubrirse toda el área de fondo visible.
Sin embargo, esta útil forma de colocar una imagen de fondo no está disponible con la etiqueta
<IMG>. Para colocar la imagen de fondo es necesario utilizar la etiqueta
<BODY> con su modificador
background.
Ejemplo:
<BODY BACKGROUND="../Capitulo8/imagenes/interrogacion.gif">
Por omisión, la imagen se repite en toda el área de la página.
Imagen como liga
Suele ser común incluir ligas dentro de un gráfico. En ese caso, por defecto, los navegadores colocarán un borde al gráfico para indicar que efectivamente es una hiperliga. Esto es práctico, pero la mayoría de las veces poco estético. Por medio del parámetro BORDER se puede alterar el grosor de ese borde o incluso eliminarlo poniendo su valor a cero.
Ejemplo:
<A HREF = "http://www.unam.mx" >
<IMG SRC="graficos/interrogacion.gif" ALT="Ir a la página de la UNAM" WIDTH=88 HEIGHT=31>
</A>
El resultado de este ejemplo es una página con la imagen anterior rodeada por un marco. Al pasar el puntero del
mouse por encima de la imagen se puede observar que éste último cambia de forma y adquiere la apariencia de "una mano que apunta" con el dedo índice. Eso significa que esa imagen es una hiperliga.
Para quitar el marco que acompaña a la imagen, debemos colocar el modificador
border con un valor de cero. Como se muestra a continuación.
<A HREF="http://www. unam.mx ">
<IMG SRC="graficos/interrogacion.gif" ALT=" Ir a la página de la UNAM" WIDTH=88
HEIGHT=31 BORDER=0>
</A>.
