Manual HTML Aversitenteras

16 pasos sencillos para construir tu propia web




11. IMAGENES - Primera parte



.

bullet  Insertando imágenes:

Llego el momento de insertar imágenes en nuestros documentos web. Las imágenes que se utilizan habitualmente en las páginas web son formatos de archivo de imagen comprimidos para que la carga de la página sea más rápida, en este manual por ejemplo se utilizan los archivos GIF y JPG.

Para insertar un dibujo o imagen se utiliza la etiqueta IMG y añadiremos el atributo src para indicarle la ruta donde tenemos el archivo.


Ejercicio:

<IMG src="imagen.gif">

Centrémonos ahora en el atributo src y en qué valor de la ruta relativa que tenemos que poner para poder visualizar la imagen correctamente. Contemplemos los siguientes 3 casos:

Caso 1: El documento web que estamos editando y el archivo de imagen a insertar están en el mismo directorio. En este caso el valor que tomará src será el del nombre del fichero con su extensión:

<IMG src="imagen.gif">

Caso 2: El archivo de imagen está en un subdirectorio contenido en el directorio donde se encuentra el documento web. En este caso el valor que tomará src será de la siguiente manera subdirectorio/fichero.

<IMG src="subdir/imagen.gif">

Donde subdir es el nombre de nuestro subdirectorio.


Caso 3: El documento web está en un subdirectorio a un nivel inferior respecto al directorio donde se encuentra el archivo de imagen. En este caso el valor que tomará src será de la siguiente manera ../fichero.

<IMG src="../imagen.gif">

Ejercicio:  Para realizar este ejercicio crea una carpeta que se llame img en el mismo directorio que tengas el fichero htm y copia la imagen a insertar en la web ahí. Así mismo en el valor de src debes poner el nombre del fichero de tu imagen sustituyendo al que hemos puesto nosotros en este caso (huelva.jpg)

<HTML>
<HEAD>
<TITLE>Imágenes</TITLE>
</HEAD>
<BODY>
<FONT size="5">
<u><b>FOTOS DE MIS VIAJES</b></u>
</FONT>
<BR><BR>
<FONT size="2">
<i>Foto del parque nacional:</i>
</FONT>
<BR>
<IMG src="img/huelva.jpg">
</BODY>
</HTML>

Pasamos el código al editor y guardamos como ejercicio7.htm. Cargamos la página en el navegador y si has seguido bien los pasos este debería ser el resultado, aunque variaría la imagen ya que tú has colocado otra.


imagenes



anterior     indice     siguiente
tip

Si se desea espaciar las imagenes respecto a lo que les rodea, se pueden utilizar los atributos hspace y vspace, con los que se pueden establecer valores de espaciado horizontal y vertical respectivamente.

Ejemplo:
<IMG src="tuimagen1.jpg" hspace="10" vspace="10">

Lista de links




El portal que comparte sus ingresos