Imágenes I

Contenidos:

Imágenes II


Introducción

Insertar imágenes en un documento permite crear páginas mucho más atractivas. Según el tipo de gráfico utilizado se pueden conseguir efectos realmente sorprendentes.

Existen dos formas de mostrar una imagen en una página HTML, la primera es mostrar la imágen en línea, o sea, la imagen se visualiza automáticamente al cargar la página; la segunda es mediante la activación de un enlace de hipertexto que provoque la visualización de la imagen.

Existen diversos formatos de imagenes . Los formatos GIF y JPEG son interpretados directamente por el visualizador. Se puede usar cualquier otro formato como el MPG (vídeo), pero en este caso el visualizador llamará a un programa auxiliar, que previamente se habrá definido, para que sea éste el que visualice el fichero. La desventaja de las imágenes en formatos no tratados por el propio visualizador es que no se verá el texto junto con la imagen, y por tanto no se podrá imprimir la página compuesta.

Para que todos los browsers puedan comprender el formato en el que está codificado la imagen, se ha hecho una normalización con el estándar GIF (Graphics Interchange Format). Se trata de un formato comprimido pensado para optimizar el tiempo de telecarga que permite el tratamiento de imágenes en colores (256 como máximo) o niveles de gris.


IMG

Este elemento permite incluir una imagen en un documento. Vendrá siempre acompañado por el atributo SRC que indica la dirección del fichero gráfico que contiene la imagen:
<IMG SRC="dirección_URL_del_fichero_gráfico">

Ejemplos:

Imagen situada en un fichero local:

<IMG SRC="images/wmelon.gif">

Imagen residente en un servidor:

<IMG SRC="http://www.iconbazaar.com/misc/apple.gif">
Pulse aquí para ver el resultado de este ejemplo

Esta última opción de insertar una imagen de un servidor exterior en un texto no es muy recomendable ya que ralentiza mucho la carga de la página y además no se asegura que la imagen pueda ser siempre accedida. Realmente el resultado del ejemplo sería ver directamente la imagen, no un enlace a ésta, pero como se ha dicho anteriormente esto puede dar problemas al cargar la página. Esta opción, por tanto, se utiliza sólo en casos excepcionales de imágenes que son actualizadas periódicamente (p.e: un mapa metereológico).

Si el fichero indicado no es encontrado el browser mostrará un símbolo en lugar de la imagen, indicando el error. Por ejemplo:

<IMG SRC="directorio/imagen.gif">

En los documentos HTML se suelen insertar diversos iconos con significados implícitos, como es el caso de "página en construcción":

Este elemento permite además los siguientes atributos:

ALT: Define un texto alternativo que sustituirá a la imagen en caso de que el browser no sea capaz de tratar imagenes. Esto es importante sobretodo cuando la imagen soporta un enlace. Por ejemplo:
<IMG SRC="images/toucan.gif" ALT="Imagen de un TUCAN">
Imagen de un TUCAN

ALIGN: Situa la imagen en la posición que se le indique respecto a la línea de texto en la que está. Este atributo se explica con mayor detalle en el apartado que viene a continuación.

Inicio

El atributo ALIGN

Alinea la imagen, según la posición que se le indique, respecto a la línea de texto en la que está. Puede tomar los siguientes valores: Ejemplos:

Parte superior de la imagen <IMG SRC="images/flor.gif" ALIGN="top">
alineada con el texto
Parte superior de la imagen alineada con el texto

Parte central de la imagen <IMG SRC="flor.gif" ALIGN="middle"> 
alineada con el texto
Parte central de la imagen alineada con el texto

Parte inferior de la imagen <IMG SRC="flor.gif" ALIGN="bottom"> 
alineada con el texto
Parte inferior de la imagen alineada con el texto
Inicio

Extensiones del Netscape

Estas extensiones no son reconocidas por HTML 2, sin embargo son bastante utilizadas por muchos autores de páginas HTML.

ALIGN: Además de los valores ya definidos anteriormente para el atributo ALIGN , el Netscape permite la utilización de dos nuevos valores. Estos permitirán que el texto fluya alrededor de la imagen con una regulación del espacio vertical (atributo VSPACE) y del espacio horizontal (atributo HSPACE).

WIDTH: Redefine el ancho de la imagen.

HEIGHT: Redefine el alto de la imagen.

BORDER: Dibuja un marco alrededor de la imagen.

VSPACE: Define el margen vertical a dejar entre la imagen y el texto.

HSPACE: Define el margen horizontal a dejar entre la imagen y el texto.

Para poder saltar la imagen y que el texto continue debajo de ésta se ha definido el atributo CLEAR para el elemento de salto de línea <BR>: <BR CLEAR>.

A continuación se mostrarán varios ejemplos para aclarar lo explicado en este apartado:

Ejemplos:

<IMG SRC="images/sebastia.gif" ALIGN="right" HSPACE=20 
VSPACE=5 WIDTH=30 HEIGHT=30>
Este texto ...
Este texto estará situado a la izquierda de dicha imagen puesto que se ha definido mediante el atributo ALIGN="right" que la imagen estará situada a la derecha. Los márgenes definidos tanto vertical (VSPACE=5) como horizontalmente (HSPACE=20) serán respetados. No se ha definido un borde para la imagen.


<IMG SRC="images/sebastia.gif" ALIGN="left" HSPACE=30 
VSPACE=10 WIDTH=50 HEIGHT=50 BORDER=2>
Este texto ...
Esta imagen estará rodeada de un borde color negro del ancho indicado por BORDER=2. Ahora se quiere que el texto continue pasada la imagen.
Por medio del elemento <BR> con su atributo CLEAR: <BR CLEAR> este texto continua debajo de la imagen.
Inicio

Imágenes como fondo de página

Mediante el elemento <BODY> y el atributo BACKGROUND se permite utilizar una imagen residente en el servidor, o en un fichero local, como fondo de página. El valor que deberá tomar dicho atributo es la dirección donde se encuentra el fichero que contiene la imagen. La sintaxis será:
<BODY BACKGROUND="direccion_del_fichero_grafico">
Ejemplo:
<BODY BACKGROUND="images/blanco51.gif">
Esta sentencia es la utilizada para definir el fondo utilizado en este mismo documento.
Inicio

Imágenes como marcas de una lista

Para obtener una lista adornada con algún tipo de icono se podrán utilizar las listas de definición de la siguiente forma:
<DL>
    <DT><IMG SRC="images/bolaroja.gif"> Línea de texto 
    <DT><IMG SRC="images/bolaroja.gif"> Línea de texto 
    <DT><IMG SRC="images/bolaroja.gif"> Línea de texto 
</DL>
Línea de texto
Línea de texto
Línea de texto

Incluso se podrán anidar como en el siguiente ejemplo:

<DL>
  <DT><IMG SRC="images/bolaroja.gif">Línea de texto 
  <DT><IMG SRC="images/bolaroja.gif">Línea de texto
    <DL>
      <DT><IMG SRC="images/bolaverd.gif">Línea de texto
      <DT><IMG SRC="images/bolaverd.gif">Línea de texto
        <DL>
          <DT><IMG SRC="images/bolaazul.gif">Línea de texto 
          <DT><IMG SRC="images/bolaazul.gif">Línea de texto
            <DL>
              <DT><IMG SRC="images/bolaamar.gif">Línea de texto 
              <DT><IMG SRC="images/bolaamar.gif">Línea de texto 
            </DL>
        </DL>
    </DL>  
</DL>
Línea de texto
Línea de texto
Línea de texto
Línea de texto
Línea de texto
Línea de texto
Línea de texto
Línea de texto
Inicio

Animaciones

Una nueva posibilidad de algunos browsers es la posibilidad de presentar gráficos con animación. Los gráficos animados en formato GIF permiten almacenar secuencias de imagenes en un solo fichero, las cuales forman animaciones que pueden ser visualizadas directamente por el browser. No hay que confundir estos gráficos con los vídeos en formato MPG que no son tratados por el browser sino por una herramienta auxiliar.

La forma de introducir estas animaciones en un documento es la misma que para una imagen fija, como se muestra en el siguiente ejemplo:

Ejemplo:

   <IMG SRC="images/frogani.gif">

Pulsando sobre el botón de Stop del browser la animación se detendrá en la imagen de la secuencia en la que esté.

Los visualizadores que no soportan este efecto representarán solamente la primera o la última de las imágenes de la secuencia. Por esto es conveniente no comenzar o terminar las secuencias con una imagen vacía.

Inicio

Imágenes II

Indice

Facultad de Informática de la Universidad de Las Palmas de Gran Canaria