5.5.Algunos ejemplos del uso de imágenes

Escribiremos ahora un ejemplo en el que se vea cómo quedan las diferentes formas de usar las imágenes.

    <!-- Ejemplo 9: ejemplos de uso de imágenes -->
    <HTML>
    <HEAD>
    <TITLE> Ejemplo 9: ejemplos de uso de imágenes </TITLE>
    </HEAD>
    <BODY BACKGROUND="fondo.jpg">
    <H1><CENTER><FONT COLOR="red">
    Estos son ejemplos de las diferentes maneras de usar las imágenes en un documento
    </FONT></CENTER></H1>
    <FONT SIZE=+2>
    <HR><P>
    <IMG SRC="mail.gif" WIDTH=15%>
    Si no se especifica ningún atributo en especial, la imagen queda a la izquierda y el texto
    se pega a ella en su parte inferior. Es la opción por defecto, y si el texto es largo se
    desborda por debajo de la imagen.
    <HR><P>
    <IMG SRC="mail.gif" WIDTH=15% ALIGN=top>
    En este caso, con el atributo ALIGN=top la imagen queda a la izquierda y el texto se pega a ella en
    su parte superior. Si el texto es largo se desborda por debajo de la imagen... obsérvese
    el espacio vacío que deja.
    <HR><P>
    <IMG SRC="mail.gif" WIDTH=15% ALIGN=middle>
    En este caso, con el atributo ALIGN=middle la imagen queda a la izquierda y el texto se pega a
    ella en su parte central. Si el texto es largo se desborda por debajo de la imagen... obsérvese
    el espacio vacío que deja.
    <HR><P>
    <IMG SRC="mail.gif" WIDTH=15% ALIGN=left>
    En este caso, con el atributo ALIGN=left la imagen queda a la izquierda y el texto se pega a ella en
    su parte superior. Pero ahora, si el texto es largo, aunque siga desbordándose por debajo
    de la imagen ya no deja el espacio vacío como antes... es decir, el texto fluye por la derecha
    de la imagen hasta que esta se acaba.
    <HR><P>
    <IMG SRC="mail.gif" WIDTH=15% ALIGN=left>
    Esto es como el ejemplo de arriba , <BR CLEAR>
    pero le hacemos saltar a la línea <BR CLEAR>
    siguiente antes de acabarla. El texto <BR CLEAR>
    sigue fluyendo alrededor de la imagen, pero podemos controlar su margen derecho
    con el atributo CLEAR del salto de línea.
    <HR><P>
    <IMG SRC="mail.gif" WIDTH=15% ALIGN=right>
    En este caso, con el atributo ALIGN=right la imagen queda a la derecha y el texto se pega a
    ella en su parte superior. Pero ahora, si el texto es largo, aunque siga desbordándose por debajo
    de la imagen ya no deja el espacio vacío como antes... es decir, el texto fluye por la izquierda de la
    imagen hasta que esta se acaba.
    <HR><P>
    <IMG SRC="mail.gif" ALIGN=left WIDTH=15% BORDER=5>
    En este caso, con el atributo ALIGN=left la imagen queda a la izquierda y el texto se pega a ella
    en su parte superior a la derecha. Pero ahora, si el texto es largo, aunque siga desbordándose por
    debajo de la imagen ya no deja el espacio vacío como antes... es decir, el texto fluye por la derecha
    de la imagen hasta que esta se acaba. Se le ha puesto un BORDER de valor 5
    <HR><P>
    <IMG SRC="mail.gif" WIDTH=15% ALIGN=left HSPACE=100 VSPACE=30>
    En este caso, con el atributo ALIGN=left la imagen queda a la izquierda y el texto se pega a ella
    en su parte superior a la derecha. Pero ahora, si el texto es largo, aunque siga desbordándose
    por debajo de la imagen ya no deja el espacio vacío como antes... es decir, el texto fluye por
    la derecha de la imagen hasta que esta se acaba. Se ha forzado que quedasen espacios vacíos
    en horizontal y en vertical para situar la imagen.
    <HR><P>
    Ahora usaremos la imagen como punto para un enlace
    <A HREF="Ejem09.htm"><IMG SRC="mail.gif">
    junto con este texto </A> por si está desconectado el visor de imágenes del navegador.
    Si molesta el borde puede ponerse BORDER=0 y se soluciona.
    <HR><P>
    Ahora, con una lista:
    <DL>
    <DT><IMG SRC="bolaroja.gif">Primer elemento de la lista
    <DT><IMG SRC="bolaroja.gif">Segundo elemento de la lista
    <DT><IMG SRC="bolaroja.gif">Tercer elemento de la lista
    </DL>
    </BODY>
    </HTML>
Las dos imágenes necesarias para realizar el ejercicio son y , que pueden capturarse fácilmente marcándolas con el botón derecho y aceptando la opción de guardarlas que ofrece el navegador.

Debe escribirse en un procesador de texto cualquiera (puede copiarse directamente desde aquí), grabarlo con el nombre que se quiera, sin formato (texto puro), con la extensión HTM, y leerlo luego con un navegador. Se observará claramente la diferencia que hay entre el código fuente y lo que luego aparece realmente en la pantalla y se observará cómo trabajan las imágenes incorporadas. Si se desea comprobar el resultado, puede hacerse aquí.