Lección 5: Insertando imágenes

Una imágen se inserta en una página Web con la etiqueta <IMG> y su atributo SRC

Igual que para los fondos, la imagen debe estar en una capeta dentro de la estructura del sitio. Puede estar también en la misma carpeta que la página Web.

El atributo SRC define el origen (source) de la imagen, así como la posición respecto a la página Web. En otras palabras se refiere al nombre de la imagen y a su ubicación.

Es importante además de la ubicación, especificar el tamaño de la imagen (ancho y alto) para hacer la carga de la página más rápida, pues la página continúa la carga mientras espera a que la imagen termine de cargarse (importante para el caso de imágenes muy pesadas).

Insertemos la siguiente imágen:

Alojamiento, webhosting en El Salvador

Antes que nada debe colocar la imagen en su carpeta (Coloque el mouse sobre la imágen y oprima el botó derecho del mismo. Escoja guardar imágen como y guardela en un folder dentro de la estructura de su sitio), colóquela en la misma carpeta en donde se encuentra ubicada su página Web. Nómbrela como l5f1.GIF(ele cinco f uno punto GIF)

Ahora procedamos a insertar la imagen, empezaremos un nuevo ejemplo:
<HTML>
<HEAD>
<TITLE>Esta es mi primera página Web</TITLE>

</HEAD>

<BODY>
<IMG SRC="l5f1.GIF" WIDTH="256" HEIGHT="60">
</BODY>

</HTML>

Su página Web debe verse así

Ahora un poco sobre la ubicación de sus imágenes respecto de su página web:

Ubicación de archivos SRC="l5f1.GIF". Significa que la imagen está en el mismo folder que la página que la llama.
Ubicación de archivos SRC="Images/l5f1.GIF". Significa que la imagen esta un folder abajo desde donde se encuentra el archivo HTML que la llama.
Ubicación de archivos SRC="../Images/l5f1.GIF". Significa que la imagen está un folder arriba(..) y luego un folder abajo(/) desde donde se encuentra la página que lo llama.

Nota: Las referencias a las imágenes arriba descritas se refieren a URL relativas, pues la ubicación está en relación a la posición de la misma, respecto a la estructura de sus carpetas. Otra manera de hacer referencia a una imagen es por medio de una URL absoluta, pero este método es un inconveniente cuando tratamos de cargar nuestras páginas a un servidor en la Internet.


Lección AnteriorLección siguiente