Imágenes en HTML

Imágenes

 

La etiqueta que nos sirve para incluir imágenes en nuestras páginas del WEB es muy similar a la de enlaces a otras páginas, que hemos visto en el capítulo anterior. La única diferencia es que, en lugar de indicar al programa navegador el nombre y la localización de un documento de texto HTML para que lo cargue, se le indica el nombre y la localización de un archivo que contiene una imagen.

La estructura de la etiqueta es:

<IMG SRC="imagen.gif">

Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quiere cargar una imagen llamada imagen.gif (o el nombre que tenga).

Dentro de la etiqueta se pueden añadir otros comandos, tal como ALT

<IMG SRC="imagen.gif" ALT="descripción">

Con el comando ALT se introduce una descripción (una palabra o una frase breve) indicativa de la imagen. Este comando, que en principio se puede omitir, es en beneficio de los que accedan a nuestra página con un programa navegador en forma de texto como el lynx. Ya que no son capaces de ver la imagen, por lo menos pueden hacerse una idea sobre ella. Pero no es sólo por esto. Hay casos, como veremos más adelante, en los que se utiliza una imagen como enlace a otra página. Si se omitiera este comando, los que utilizan dichos navegadores no podrían de ninguna manera acceder a esas páginas.

Con respecto a la localización del archivo de esa imagen, se puede decir aquí lo mismo que en el capítulo anterior referente a los enlaces. Si no se indica nada especial, como en el caso que se ha expuesto, quiere decir que el archivo imagen.gif está en el mismo directorio que el documento HTML que estamos escribiendo. Si no es así, se siguen los mismos criterios que los indicados para los enlaces.

Las imágenes deben estar guardadas en un formato de archivo especial llamado GIF. (Hay también otro formato más avanzado JPG). Este formato GIF almacena las imágenes con un máximo de 256 colores, en forma comprimida.

Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes, pues una imagen grande supone un archivo grande, y esto puede resultar en un tiempo excesivo de carga, con el consiguiente riesgo de que quien esté intentando cargar nuestra página se canse de esperar, y desista de ello.

Para elegir la posición de la imagen con respecto al texto hay distintas posibilidades. La más sencilla es colocarla entre dos párrafos, con un titular a un lado. Los navegadores más actuales (como el Netscape Navigator y el Microsoft Internet Explorer) permiten que el texto pueda rodear a la imagen.

De momento nos vamos a limitar a escoger la posición del titular con respecto a la imagen. Se puede poner arriba, en medio o abajo del lado de la imagen. Para ello se añade el comando ALIGN a la etiqueta, de la siguiente manera:

<IMG SRC="isla.gif" ALIGN=TOP>

Titular alineado arriba

<IMG SRC="isla.gif" ALIGN=MIDDLE>

Titular alineado en medio

<IMG SRC="isla.gif" ALIGN=BOTTOM>

Titular alineado abajo

Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra página. Para estos casos se utilizan generalmente imágenes pequeñas (iconos), aunque se puede usar cualquier tipo de imagen.

Según vimos en el capítulo anterior, la estructura general de un enlace es:

                           <A HREF="XXX"> YYY </A>

En este caso sustituimos XXX por el nombre del archivo de la página a la que queremos acceder. Y en lugar de YYY ponemos la etiqueta completa de la imagen (que queda así englobada dentro de la etiqueta del enlace).

Como por ejemplo (hombre.gif) para acceder al ejemplo práctico del capítulo 2 (mipag2.html):

<A HREF="mipag2.html"><IMG SRC="hombre.gif"></A>

Pulsando la imagen comprobamos cómo efectivamente enlaza con la página deseada. Obsérvese además que la imagen está rodeada de un rectágulo del color normal en los enlaces. Si no se desea que aparezca ese rectángulo, hay que incluir dentro de la etiqueta de la imagen el atributo BORDER=0, es decir:

<A HREF="mipag2.html"><IMG SRC="hombre.gif" BORDER=0></A>

Posicionando el cursor sobre esta última imagen, comprobamos que actúa también como enlace aunque carezca del rectángulo de color. Esto puede resultar más estético, pero se corre el riesgo de que el usuario no se dé cuenta de que la imagen sirve de enlace.

También podemos utilizar una imagen para enlazar con otra imagen. Supongamos que queremos enlazar con la imagen estaimagen.gif por medio de esta otra imagen desdeesta.gif:

<A HREF="estaimagen.gif"><IMG SRC="desdeesta.gif"></A>

Por ultimo, otra posibilidad es la de utilizar un texto para enlazar con una imagen. En este caso sustituimos XXX (el destino del enlace) con el nombre del archivo de la imagen a la que queremos acceder e YYY (lo que aparece en pantalla como el enlace) por el texto.

            Por ejemplo:

<A HREF="isla.gif"> un paraíso tropical </A>

Un tipo de imágenes del que se hace abundante uso y que sirven para mejorar la presentación de la página son los iconos, botones, barras separadoras, etc. A pesar de su tamaño o forma, son imágenes como cualquier otra.

También te podría gustar...

2 Respuestas

  1. Alineación de las imágenes

    Si se quieren lograr diseños fantasticos y rodear con textos los gráficos exactamente igual que en las revistas se pueden usar los comando o atributos conjuntamente con la etiqueta , ALIGN=. Donde quiera que se desee que aparezca una imagen basta con insertar:

    Alinea la pagina a la izquierda
    Alinea la pagina al centro
    Alinea la pagina a la derecha

    Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se pueden emplear las siguientes extensiones de la etiqueta
    :


    Busca el primer margen libre (clear) a la izquierda.

    Busca el primer margen libre a la derecha.

    Busca el primer margen libre a ambos lados.

    Un ejemplo para aclarar esto:

    Este texto esta a un lado de la imagen.

    Este tambien esta a un lado de la imagen, en la linea siguiente.

    Este otro texto, en cambio, ha buscado el primer margen libre a la izquierda.

  2. Dimensionando la imagen

    Los programas navegadores cuando cargan un documento HTML y encuentran una etiqueta de una imagen, interrumpen el proceso de carga y solicitan al servidor que le envíe dicha imagen, quedando a la espera hasta que se complete el envío, repitiéndose este proceso con cada una de las imágenes.

    Esto es especialmente molesto cuando, como ocurre frecuentemente, en la cabecera de la página se encuentra una imagen grande, ya que durante un tiempo relativamente largo no se verá nada en la pantalla.

    Para evitar este inconveniente existen unas extensiones de la etiqueta de la imagen que sirven para indicar al navegador cuáles son sus dimensiones en pixels. (Este dato lo habremos obtenido previamente de algún programa gráfico).

    En este caso, el navegador actúa de una forma más favorable, ya que entonces, como conoce las dimensiones de las imágenes les reserva un espacio en la pantalla y va colocando el texto de forma apropiada, sin ninguna interrupción, a la vez que va rellenando esos espacios reservados a las imágenes.

    Estos comandos o atributos son WIDTH (ancho) y HEIGHT (alto).

    Por ejemplo, para la imagen isla.gif situada más arriba:

    Es conveniente hacer esto con todas las imágenes, incluso con las más pequeñas (iconos, botones, etc), para que no haya ninguna interrupción en el proceso de carga del documento.

    Se puede también, si se quiere, dimensionar las imágenes con unos valores distintos a los que realmente tienen, variando el tamaño, la anchura o la altura. Esto es muy conveniente, por ejemplo para poner en la página un thumbnail (reproducción en pequeño de una imagen), que hace de enlace a la imagen en su verdadero tamaño. De esta manera no recargamos demasiado una página, y el usuario será quien decida qué imágenes desea cargar.

    Para hacer que una imagen reducida sea el enlace con la imagen en su tamaño original, lo conseguimos con:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *