Leccion 3: IMAGENES
En esta lección veremos
como ponerle imagenes de fondo a nuestra pagina y como
insertar imágenes y animaciones.
FONDOS
Incluir una imágen de
fondo puede hacer más atractivas las páginas web,
teoricamente cualquier imágen puede servir de fondo de
una página web. Hay que tener en cuenta que la imágen
se repetirá tantas veces como sea necesario para cubrir
la pantalla.
El tag para la imágen de fondo (que se incluye siempre
después de la etiqueta <body> es:
<BODY BACKGROUND>
Ejemplo
práctico:
Primero guarda esta
imágen en la carpeta donde guardaras el documento html
que crearemos, con el nombre de Cielo (para ello utiliza
el boton derecho del mouse y elige la opcion guardar
imagen como... )
Ahora crearemos un
documento html con esa imágen de fondo:
<HTML>
<HEAD>
<TITLE>Imagen de fondo</TITLE>
</HEAD>
<BODY>
<BODY BACKGROUND="Cielo.gif">
</BODY>
</HTML>
Ahora lo guardas en la
misma carpeta de la imágen con el nombre que quieras,
siempre con la extensión .html
Tip: a
veces es aconsejable agregar al tag un color de fondo,
por dos razones: primero, porque mientras se carga la
imágen de fondo se verá el color (por ej, si usamos una
imágen oscura y letras claras, mientras no se cargue la
imágen no se verán bien las letras). La segunda razón
es que si el navegante tiene deshabilitada la opción de
cargar imágenes no verá la imágen pero si el color.
Para agregar un color de fondo escribimos en el mismo
tag:
<BODY BACKGROUND="Cielo.gif" BG
COLOR="#75C0F9">
(Ver explicacion sobre colores en la leccion 2)
IMAGENES
El tag para insertar
imágenes es <IMG SRC> Este tag tiene varios
parámetros: ellos son: ALIGN, ALT, WIDTH y HEIGHT. Ahora
pasaremos a ver para qué sirve cada uno de ellos, no son
indispensables pero si ayudan. Voy a insertar una imágen
sin usar ningún parámetro: sólo escribo <IMG
SRC="dog.jpg">
El resultado es: la imágen
aparece donde inserte el tag y si escribo algo, el texto
se alinea al pie de la imágen.
En cambio , si quiero que
la imágen se ubique a la derecha de la pantalla como en
este caso, y el texto rodee a la imágen, escribo:
<IMG SRC="dog.jpg" ALIGN="RIGHT">
El efecto contrario se obtiene con
ALIGN="LEFT". También por supuesto podemos
centrar la imagen escribiendo ALIGN="CENTER"
El parámetro ALT
(texto alternativo) es util para cuando el navegante
tiene las opcion de carga de imágenes deshabilitada,
asimismo, sobre todo en imágenes grandes, podrá ver una
descripción de la imágen mientras ésta no aparece.
Este texto también aparecerá al situar el puntero del
mouse sobre la imágen. Para el ejemplo que hemos venido
usando en esta lección sería: <IMG
SRC="dog.jpg" ALT="Perro">.
WIDTH
y HEIGHT (ancho y alto). Estos parámetros se
utilizan para las medidas de las imágenes, esto es útil
porque cuando el browser está cargando la página, está
solicitando los datos al servidor, si se encuentra con
una imágen grande, se detendrá hasta que haya cargado
la totalidad de la imágen, demorando la carga del resto
del documento, en cambio si tiene las medidas que
ocupará, reserva el espacio y continúa cargando el
texto y demás elementos de la página. Con cualquier
programa gráfico se pueden averiguar las medidas de la
imágen (Por ejemplo el Microsoft Photo Editor, incluido
en el paquete de office: clickeas sobre la imagen con el
boton derecho, vas a propiedades y ahi tienes el ancho y
el alto).
Siguiendo el mismo ejemplo para este caso escribiríamos:
<IMG SRC="dog.jpg" ALT="Perro"
WIDTH="82" HEIGHT="76">
Nota
final: los formatos de imágenes soportados por
todos los browsers o navegadores son jpg y gif. Conviene
utilizar unicamente estos dos, otros formatos como tiff,
además de tardar muchisimo mas en cargar, no nos
aseguran que serán vistos por todos los navegantes.
RESUMEN:
TAG <BODY BACKGROUND>
inserta una imágen de fondo
TAG <BG COLOR="XXXX"> donde
"xxxx" es un color de fondo
TAG <IMG SRC> inserta una imágen
o animación.
PARAMETROS:
ALIGN Valores: LEFT
(izquierda), RIGHT (derecha), CENTER
(centro)
ALT="texto alternativo
describiendo el gráfico"
WIDTH="XX" donde
"xx" es un numero que indica el ancho
en pixeles.
HEIGHT="XX" donde
"xx" es un numero que indica el alto en
pixeles.
|
IR A
LECCION 4
|
Introducción 