3. IMÁGENES

Hasta el momento he explicado como se puede escribir el texto en una pagina web, asi como sus posibles formatos. Para incluir una imagen en una página web se debe utilizar el tag <img>. Este tag muestra todos los formatos de imagenes que hay (gif, jpg, png, bmp, etc).

3.1 El Tag <img>

Supongamos que tienes una imagen llamada ejemplo.jpg, para que sea visible en tu página web escribe:

<img src="ejemplo.jpg">

en donde ejemplo.jpg está en el mismo directorio en donde tienes tu página. Ahora bien si se tienen muchas imágenes se puede crear una carpeta llamada images y poner todas la imágenes dentro de este directorio. Entonces ahora deberias escribir:

<img src="images/ejemplo.jpg">

El otro caso es cuando sabes la dirección de la imagen, por ejemplo https://www.mpmx.info/ejemplo.jpg, entonces ahora en vez de poner sólo en nombre de la imagen, poner su dirección, es decir:

<img src="https://www.mpmx.info/ejemplo.jpg">

3.2 Atributos de el Tag <img>

Atributo Función
alt = "texto" Mostrará el texto indicado en el caso de que el navegador no sea capaz de visualizar la imagen o ésta no cargue.

align = top / middle / bottom / left / right

Indica como se alineará el texto que siga a la imagen. top alinea el texto con la parte superior de la imagen, middle con la parte central, bottom con la parte inferior left dejará la imagen a la izquierda del texto y right, a la derecha.
border = número Indica el tamaño del "borde" de la imagen.
height = número Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.
width = número Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.
hspace = número Indica el número de espacios horizontales, en puntos (pixeles), que separarán la imagen del texto que la siga y la anteceda.
vspace = número Indica el número de puntos (pixeles) verticales que separarán la imagen del texto que le siga y la anteceda.

Entonces supongamos que tienes una imagen llamada sonrie.gif, es así como se escribe el código html para indicar una imagen.

Ejemplo Se vería
<img src="sonrie.gif" alt="�Sonrie!"> ¡Sonrie!
Si el navegador no pudiese visualizar la imágen... ¡Sonrie!

Aquí hay varios ejemplos "jugando" con los tamaños de la imagen, así como comprobando la alineación de los textos.

Ejemplo Se vería Comentario
<img src="sonrie.gif"> Cuidado!! Su tamaño original es de width="39" y height="38".
<img src="sonrie.gif" width="20" height="70"> Aquí le cambié su tamaño original, ahora tiene 20 de ancho (width) y 70 de alto (height).
<p>hola hola hola
<img
src="sonrie.gif" align="top">
hola hola hola</p>
hola hola hola
hola hola
hola hola hola
El texto empieza en la parte superior.
<p>hola hola hola
<img src="sonrie.gif" align="middle">
hola hola hola </p>
hola hola hola
hola hola
hola hola hola
El texto empieza en la parte del medio.
<p>hola hola hola
<img src="sonrie.gif" align="bottom">
hola hola hola</p>
hola hola hola
holahola
hola hola hola
El texto empieza en la parte inferior.
<p>hola hola hola
<img
src="sonrie.gif" align="left">
hola hola hola </p>
hola hola hola
hola hola
hola hola
hola hola hola
La imagen está al lado izquierdo del texto.
<p>hola hola hola
<img src="sonrie.gif" align="right">
hola hola hola </p>
hola hola hola
hola hola
hola hola
hola hola hola
La imagen está al lado derecho del texto.

<p>hi
<img src="sonrie.gif" hspace="15">
hi</p>

hihi Nótese en la separación horizontal.

<p>hola
<img src="sonrie.gif" vspace="20">
hola</p>

hola

hola
Nótese en la separación vertical.

3.3 El Tag <body>

Ya que sabes como manejar imágenes, pasemos al tag <body>.

3.4 Atributos de el Tag <body>

Atributo Función
background="imagen" Indica el nombre de una imagen que servirá como "fondo" de una página. Si la imagen no rellena todo el fondo del documento, esta sera reproducida tantas veces como sea necesario.
bgcolor="código color" Indica un color para el fondo del documento. Se ignora si se ha usado el parámetro background. Por defecto es blanco.
text="código color" Indica un color para el texto que incluyas en tu documento. Por defecto, es decir si no lo pones, es negro.
link="código color" Indica el color de los textos que dan acceso a un enlace. Por defecto es azul.
alink="código color" Indica el color de como se verá el enlace mientras estas dandole click. Por defecto es azul.
vlink="código color" Indica el color de los textos que dan acceso a un enlace después de haberlos visitado. Por defecto es morado.

Para el fondo la prioridad es la siguiente, primero revisa el atributo background, si no lo encuentra o no encuentra la imagen revisa el bgcolor. Para el texto es parecido, primero revisa el tag <font> si en ella no se especifica algún color entonces revisa el atributo text de el tag <body>.

Recuerda que no es bueno poner muchas imágenes grandes en una misma página, puede que se vea mejor pero para una conexión de modem, se va a tardar una eternidad en cargar, ¡Algo muy molesto!

Creo que esto es lo más necesario en cuanto a imágenes se trate, ya con esto se pueden hacer cosas buenas, sólo hay que tener creatividad. Más adelante explicaré como hacer galerías de imágenes.