5.8 - Imágenes

Imágenes en los documentos HTML

     Una de las características principales del lenguaje HTML y de la WWW es la introducción de elementos multimedia, en este apartado veremos como introducir gráficos y ficheros de imágenes en un documento HTML.

     En un documento HTML se puede incluir cualquier imagen en alguno de los siguientes formatos gráficos: GIF, JPEG ó XBM. El formato más extendido y practico es el GIF, todos los navegadores gráficos de la Web soportan este formato, además existen gran cantidad de programas de tratamiento de gráficos que permiten grabar los gráficos o convertir gráficos a GIF. Este formato, así mismo, utiliza algoritmos de compresión que hacen que sus ficheros sean de corto tamaño y apropiados para su transmisión por la red.

     El formato GIF es más recomendado para iconos, gráficas, ... y el formato JPEG es más útil para imágenes reales como paisajes, personas, ...

     Para poder utilizar otro formato gráfico, necesitará usar un enlace cuyo destino sea el fichero del gráfico. Al seguir el enlace se le pedirá que indique un programa externo que se encargue de mostrar los ficheros de ese formato gráfico, por lo tanto no pueden insertarse dentro de documentos HTML..

     Existe unos casos especiales en las imagenes GIF, que son las imágenes transparentes y las imágenes animadas.

<IMG SRC=...> Inclusión de Imágenes

     La etiqueta encargada de mostrar imágenes en HTML es IMG y tiene el siguiente formato:

<IMG SRC="URL de la Imagen" ALT="Texto alternativo a la imagen">

     En el punto del fichero HTML en el que queramos que se muestre la imagen incluimos esta etiqueta. Se puede mostrar la imagen, al comienzo del documento, al final o intercalada en el texto. Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas, tablas o formularios. Esta etiqueta no necesita la etiqueta de fin, ya que el efecto de la etiqueta no su produce sobre un texto o algún elemento HTML.

     El atributo SRC indica el fichero de imagen que se incluirá en el documento. Se indicará el camino hasta la imagen en formato URL, el fichero de la imagen deberá tener una extensión apropiada a su formato, por ejemplo si es GIF la extensión será .gif, si es JPEG la extensión será .jpg o .jpeg, si no se cumple esto la imagen no se mostrará de forma correcta.

     Al definir la imagen como una URL, esta imagen no es necesario que se encuentre en el servidor local, pudiendo especificar el camino completo y el servidor donde se encuentra la imagen. En este caso al igual que en los hiperenlaces es posible indicar direcciones de URL relativas al documentos actual, como se vio en el apartado anterior.

     Lo normal es referenciar una imagen que se encuentre en el servidor local, ya que el acceso a imágenes en servidores externos puede ser más lento. Por tanto conviene copiar las imágenes e iconos que se usen al servidor local.

     A continuación se explica la utilidad de cada unos de los atributos de la etiqueta IMG.

<IMG ... ALT=...> Texto alternativo

     El atributo ALT, indicará un texto alternativo a mostrar si no fue posible mostrar la imagen. Se usa para navegadores que no permitan mostrar imágenes, sean solo texto o tenga inhabilitado el mostrar imágenes. Se recomienda cuando existan en el documento imágenes usadas como botones, para mostrar un texto en vez del botón en navegadores que no puedan mostrar gráficos, de esta forma se consigue que todos los usuarios puedan consultar sus páginas.

<IMG .. ALIGN=...> Alineación de la imágen

     Indica como se alinea el texto que sigue a la imágen con respecto a esta. Indicará si la primera frase del texto se colocará en la parte alta de la imágen, TOP, en el punto medio de la imagen, MIDDLE, o en la parte de abajo de la imágen, BOTTOM.

     Tambien se pueden utilizar alineaciones un poco más avanzada, TEXTTOP se alinea justo al comienzo del texto más alto de la línea (TOP se alinea al tamaño del primer carácter de la línea). ABSMIDDLE, es el centro real de la imagen, con MIDDLE se coloca el texto a partir del punto medio, con ABSMIDDLE el texto aparece centrado con la imagen. ABSBOTTOM coloca el texto justo al final de la imagen. Se recomienda que se usen estos últimos al ser más precisa la alineación, aunque solo son validos para los navegadores más avanzados.

Ejemplos
Inst.
HTML
<IMG SRC="/iconos1/phone5.gif" ALIGN=TOP><B>Numero de Telefono<B>. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Resul
tado
Numero de Teléfono. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica
ción
Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imágen.
Inst.
HTML
<IMG SRC="/iconos1/phone5.gif" ALIGN=MIDDLE><B>Numero de Telefono<B>. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Resul
tado
Numero de Teléfono. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica
ción
En este caso el texto está alineado en la parte central de la imágen.
Inst.
HTML
<IMG SRC="/iconos1/phone5.gif" ALIGN=BOTTOM><B>Numero de Telefono<B>. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Resul
tado
Numero de Teléfono. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica
ción
El texto está alineado en la parte baja de la imágen.
Inst.
HTML
<IMG SRC="/iconos1/phone5.gif" ALIGN=MIDDLE><IMG SRC="/iconos1/q__mark2.gif">
Resul
tado
Explica
ción
También es posible alinear imágenes entre sí y imágenes respecto a otros elementos HTML

     En los casos anteriores solo se especifica donde se coloca la primera línea del texto y el resto se incluyen debajo de la imágen quedando un efecto muy feo cuando el texto tiene más de una línea. Existen otras alineaciones que incluirán a la imágen insertada dentro del texto. La imágen puede quedar a la izquierda, LEFT o a la derecha, RIGHT. No se podrá utilizar en combinación con las anteriores alineaciones.

Ejemplos
Inst.
HTML
<IMG SRC="/iconos1/phone5.gif" ALIGN=LEFT><B>Numero de Telefono<B>. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Resul
tado
Numero de Telefono. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica
ción
En este caso aparece la imágen insertada en el texto, de forma que esta se integra en párrafo que la rodea, al contrario que en los casos anteriores
Inst.
HTML
<IMG SRC="/iconos1/phone5.gif" ALIGN=RIGHT><B>Numero de Telefono<B>. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Resul
tado
Numero de Telefono. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica
ción
En este ejemplo aparece la imágen alineada a la derecha.

<IMG .. BODER=...> Borde de la imágen

     Indicará el tamaño del borde de la imagen, si la imagen se encuentra dentro de un hiperenlace el borde de esta será del color apropiado para indicarlo, en caso contrario el borde será invisible. Si se desea que no se muestre el borde cuando la imagen sea un enlace se usará BORDER=0.

Ejemplos
Inst.
HTML
<A HREF="imagenes.htm"><IMG SRC="/iconos1/q_mark3.gif"></A>
Resul
tado
Explica
ción
Como se ve si no se indica nada se muestra un borde entorno a la imágen que activa el hiperenlace.
Inst.
HTML
<A HREF="imagenes.htm"><IMG SRC="/iconos1/q_mark3.gif BORDER=0"></A>
Resul
tado
Explica
ción
Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imágen, que sirve de hiperenlace.

<IMG .. HEIGHT=... WIDTH=...> Tamaño de la imágen

     Es posible cambiar el tamaño de la imágen de forma que pueda ajustarse como se desee, pudiendo ampliar o disminuir este.

     El atributo HEIGHT Determina el alto de la imagen a mostrar, se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamaño del documento. En caso de que la imagen sea mayor o menor se escalará a este tamaño.

     El atributo WIDTH indica el ancho al que se mostrará la imagen, escalándola a este tamaño. También se expresará en pixeles o en tanto por ciento.

     No es necesario indicar el ancho y el alto, se puede especificar solo uno de las dimensiones, ajustándose la otra a la proporción de la imagen. Es recomendable indicar solo uno de estos parámetros para que la imágen no se muestre deformada. Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imágen guarde siempre una misma proporción con respecto al texto. Si se desea mostrar dos imágenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante, se indica en una el ancho (WIDTH) del 25% y en la otra del 74%, no indicando en ningún caso el alto (HEIGHT), de esta forma independientemente como sea el tamaño de la ventana del navegador e independientemente del monitor del cliente, siempre se podrán mostrar ambas imágenes en la misma línea.

Ejemplos
Inst.
HTML
<IMG SRC="/iconos1/world.gif" WIDTH=100 HEIGHT=25>
Resul
tado
Explica
ción
Si no se indican bien ambos valores, teniendo en cuenta la proporción de la imágen esta puede aparecer deformada.
Inst.
HTML
<IMG SRC="/iconos1/world.gif" WIDTH=75>
Resul
tado
Explica
ción
En este se ve como al indicar uno solo de los parámetros, el otro se ajusta apropiadamente a la proporción de la imágen.
Inst.
HTML
<IMG SRC="imagenes/obra_ani.gif" ALIGN=MIDDLE WIDTH=9%> <IMG SRC="/barras1/constr.gif" WIDTH=89%>
Resultado
Explica
ción
Si varia el tamaño de la ventana de su navegador, comprobará que el tamaño de las imágenes cambia, pero guardan la misma proporción, el obrero ocupa un 9% de la ventana y la barra el 86% restante. Y siempre se mostrarán ambas imágenes en la misma línea.

<IMG .. HSPACE=... VSPACE=...> Espaciado de separación de la imágen

     El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante. Se especificará en puntos. Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y además es posible indicar separadamente el margen horizontal y el vertical. Con el atributo VSPACE se indica el margen vertical.

Ejemplos
Inst.
HTML
<IMG SRC="/iconos1/pr_star.gif"><IMG SRC="/iconos1/or__star.gif">
<IMG SRC="/iconos1/pr_star.gif" HSPACE=100><IMG SRC="/iconos1/or__star.gif">
Resul
tado

Explica
ción
Como se ve en el segundo caso las imágenes aparecen separadas 100 puntos. El espaciado es igual a la derecha que a la izquierda, por tanto también aparece la imagen separada del borde.