Introducción al lenguaje HTML

Imágenes

Las imágenes que aparecen en los documentos HTML siempre son archivos independientes que están referenciados mediante la marca <IMG ....>.

Los formatos de imagen más divulgados son:

Formatos de imagen
JPG	Apropiado para imágenes con gran riqueza de color y transiciones graduales (fotografías).
GIF	Con la limitación de un máximo de 256 colores, son apropiados para dibujos con grandes áreas en colores planos.
GIF animado	Respecto al navegador y al lenguaje HTML no representan ninguna diferencia con el archivo GIF estático.

<HTML>
<HEAD>
<TITLE>Muestra página con texto e imágenes</TITLE>
</HEAD>
<BODY BACKGROUND="punteado.gif" TEXT="#000020" LINK="#3A5FCD" VLINK="#7EC0EE" ALINK="#FF0000">
<IMG SRC="imagen1.jpg">
<H2>Romance de Fonte Frida</H2>
FONTE-FRIDA, Fonte-Frida, 
Fonte-Frida y con amor,  
do todas las avecicas 
van tomar consolación,  
si no es la tortolica,  
que está viuda y con dolor.  
Por allí fuera a pasar 
el traidor del ruiseñor;  
las palabras que le dice 
llenas son de traición:  
- Si tu quisieses, señora,  
yo seria tu servidor.  
- Vete de ahí, enemigo,  
malo, falso, engañador,  
que ni poso en ramo verde 
ni en ramo que tenga flor,  
que si agua hallo clara 
turbia la bebiera yo;  
que no quiero haber marido 
porque hijos no haya, no;  
no quiero placer con ellos 
ni menos consolación.  
¡Déjame, triste, enemigo,  
malo, falso, mal traidor 
que no quiero ser tu amiga 
ni casar contigo, no!

</BODY>
</HTML>

muestra31.html

De manera análoga a la utilizada para referenciar páginas de otras carpetas u otras URL, el objetivo del atributo SRC se puede encontrar en la misma carpeta, en otro lugar del mismo sitio web o en otro lugar de la WWW.

Otros atributos de la imagen son:

ALT="descripción": texto alternativo que aparece si no puede cargarse la imagen o bien si se deja el ratón sobre ella más de un segundo.
ALIGN="posición": posición de la imagen relativa al texto. Los valores aceptados para posición son top, middle, absmiddle y bottom.
WIDTH=n|%, HEIGHT=n|%: determinan las medidas que presentará la imagen en pantalla, ya sea expresadas en píxeles, ya en porcentaje de la medida de la imagen original.
BORDER=n: determina el grosor de la línea que rodea la imagen; por defecto el valor es cero.

muestra32.html