Imágenes
Imágenes
Las imágenes pueden dar colorido a nuestras páginas y hacerlas más atractivas. Las imágenes pueden convertir nuestra página en una maravilla, pero también puede convertirla en una pesadilla (toma pareado). Las imágenes tienen unas cuantas pegas:
Una pista: una página con muchos gráficos es muy probable que sea pobre de contenidos (a no ser que la página sea una galería de imágenes).
Al principio a todos nos gusta tener una página con muchos gráficos y colores para hacerla más vistosa, pero hay que contenerse. Piensa en los sufridos internautas que tienen una conexión lenta.
NOTA: Cuando un navegador carga una imagen la guarda en la caché (en el disco para entendernos), de tal forma que si pasamos a otra página en nuestro sitio que use la misma imagen no necesita cargarla de nuevo.
Un primer efecto bastante bueno lo podemos conseguir poniendo una imagen como fondo. Es muy fácil, basta añadir un par de cosas a la etiqueta body:
<body background="nombre_de_la_imagen">
Lo que hace el navegador es ir colocando la imagen indicada hasta llenar el fondo.
Veamos un ejemplo de cómo usar correctamente los fondos: ejemplo7.html
Sin embargo tienes que tener cuidado con el fondo, no escojas una imagen muy grande. Ten cuidado que contraste bien con el texto para que se pueda leer con comodidad.
Por ejemplo mira esta imagen:
"es un precioso muro con esos colores, esa definición, mmm, me gusta, voy a ponerla como fondo" puede pensar alguien. Pues vamos a ponerla como fondo: ejemplo8.html
Y ahora le metemos texto, a ver si eres capaz de leerlo: ejemplo9.html (se lee mal y eso que está puesto con letra grande, con letra pequeña es imposible).
Para insertar una imagen en nuestra página debemos hacer:
<img src="nombre_de_la_imagen">
src es la abreviatura de SouRCe. La etiqueta img no tiene pareja, no existe una etiqueta <img>.
Esta etiqueta tiene varias opciones:
La descripción que se mete en alt es la que se muestra en caso que de la imagen no se pueda cargar por el motivo que sea. Esto es conveniente para que la gente que tiene un navegador de texto o las imágenes desactivadas no se pierda en nuestra página.
Esta descripción también se muestra si ponemos el ratón sobre la imagen y lo dejamos quieto unos segundos. El siguiente ejemplo muestra una imagen y al poner el ratón encima muestra el mensaje "Gráfico que representa un muro":
<center><IMG SRC="fondo-piedra.gif" width="96" height="96" ALT="Gráfico que representa un muro"></center>
Con esta etiqueta podemos alinear el texto con respecto a la imagen. Con unos ejemplos es como mejor se explica:
<img img="fondo-piedra.gif" align=top> Este texto va arriba
Este texto va arriba
<img src="fondo-piedra.gif" align=middle> Este texto va en medio
Este texto va en medio
<img src="fondo-piedra.gif" align=bottom> Este texto va abajo
Este texto va abajo
Existen otras dos posibilidades (left y right):
<IMG SRC="fondo-piedra.gif" align=right width="96" height="96" ALT="Gráfico que representa un muro"> Bla, bla, bla, ...
Bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.
<IMG SRC="fondo-piedra.gif" align=left width="96" height="96" ALT="Gráfico que representa un muro"> Bla, bla, bla, ...
Bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.
Estas opciones definen el tamaño (heigth=altura, width=anchura) con el que se mostrará la imagen. Si no especificamos nada la imagen se muestra con su tamaño real.
La imagen que venimos usando (el muro) tiene unas dimensiones de 96x96. Si cambiamos estas dimensiones, por ejemplo a 96x48 la imagen quedaría así:
<IMG SRC="fondo-piedra.gif" width="96" height="48" ALT="Imagen reducida">
Pero también podemos agrandarla (196x98):
<IMG SRC="fondo-piedra.gif" width="192" height="96" ALT="Imagen reducida">
NOTA: Es importante poner las dimensiones siempre, aunque sean las originales, para facilitar al navegador la representación de la imagen.
Con esta opción podemos poner un borde a la imagen.
<IMG SRC="puppy.jpg" width="192" height="96" ALT="Imagen ampliada" border=0>
<IMG SRC="puppy.jpg" width="192" height="96" ALT="Imagen ampliada" border=6>
Con estas opciones podemos especificar cuántos pixels queremos de separación entre la imagen y el resto del documento. Comprueba en esta tabla la diferencia entre usar vspace=20 y no usarlo. Si lo usamos el texto queda separado por arriba y por abajo 20 pixels:
|
<IMG SRC="puppy.jpg"> Línea superior |
<IMG SRC="puppy.jpg" vspace=20> Línea superior |
Vimos en el capítulo de capítulo 9 cómo poner enlaces de texto en nuestra página. Ahora vamos a ver cómo se usan las imágenes para que sirvan como enlaces gráficos.
Para poner una imagen como enlace debemos meterla dentro de una etiqueta <a href>: Usamos la imagen de Tux el pingüino de Linux:
Y ponemos un enlace a www.linux.org (página con un montón de información sobre el sistema operativo GNU/Linux:
<A HREF="http://www.linux.org/"><IMG SRC="linux-logo.gif" width="92" height="39" ALT="Tux, el pingüino de Linux"></A>
y ya tenemos nuestro enlace gráfico.
Fíjate que aparece un borde alrededor de la imagen. Este borde indica que se trata de un enlace, pero si quieres quitarlo basta con usar la opción border=0.
Montones de imágenes para tus páginas:
Lugares para construir tus banners rápidamente
Free Animated Banners - Animation Online