En este apartado veremos como insertar imagenes en nuestros documentos web. Las imágenes que se utilizan generalmente en este tipo de documentos web son archivos de imagen comprimidos para que la carga de la página sea más rápida, nosotros en este manual utilizaremos los archivos GIF y los JPG por ser los más utilizados.

NOTA IMPORTANTE: Prestad mucha atención a que las imagenes ocupen lo menos posible, especialmente las grandes, ya que debemos lograr que la página cargue lo antes posible.

    Para insertar una imagen debemos utilizar el comando image source.

<IMG src="imagen.gif">

Como utilizar esta etiqueta:

• Esta etiqueta de <IMG> no tiene etiqueta de cierre ya que la imágen a insertar viene especificada en el atributo src (source).
  
  
• En el atributo src pondremos el nombre del archivo con su extensión entre comillas respetando siempre las mayúsculas y minúsculas de dicho nombre.
  
  
• Como ya hemos dicho antes hay que intentar que las imagenes insertadas ocupen lo mínimo posible en memoria.
  
  
• Una de las cosas más importantes al utilizar esta etiqueta es la situación del archivo de imagen, esto es, si la imagen esta o no en el mismo directorio que el documento web. Nosotros por comodidad tendremos el archivo de imagen y el documento web en la misma carpeta o directorio (Caso1). De todas maneras veamos estos 3 casos:
  
  
  
  1. El documento web y el archivo de imagen estan en el mismo directorio:
     
     <IMG src="imagen.gif">
     
     
  2. El archivo de imagen está en un subdirectorio respecto al directorio donde se encuentra el documento web:
     
     <IMG src="subdir/imagen.gif">
     (donde subdir es el nombre del subdirectorio)
     
     
  3. El documento web está en un subdirectorio respecto al directorio donde se encuentra el archivo de imagen :
     
     <IMG src="../imagen.gif">
     
     

    Una vez claros estos conceptos veamos un ejemplo de como insertar una imagen. En este caso vamos a insertar el archivo de imagen dinosaurio.gif:

Ejemplo:          

<IMG src="dinosaurio.gif">

Resultado:

Atributos para <IMG>:

    ALT: Con este atributo se puede introducir una pequeña descripción de la imagen mediante una palabra o frase corta. Este atributo sirve para que el usuario vea de que trata la imagen en el caso de usar un navegador que no cargue imágenes. También notaremos diferencia al cargar la imagen ya que al poner el mouse encima aparece la descripción que hemos puesto.

Ejemplo:          

<IMG src="dinosaurio.gif" alt="dino">

Resultado:

    BORDER: Dandole un valor en pixels a este atributo se puede poner un borde a la imagen.

Ejemplo:          

<IMG src="dinosaurio.gif" border=2>

Resultado:

    HEIGHT y WIDTH: Con estos atributos se puede modificar la altura y la anchura de la imagen, esto se puede hacer dandole un valor en pixels a estos atributos o dandole un valor en tanto por ciento.

Ejemplo:          

<IMG src="dinosaurio.gif" height=31 width=53>

Resultado:

    ALIGN: Este es un atributo nos puede servir para alinear la imagen a derecha e izquierda dandole los valores right y left respectivamente o para que los titulares de la imagen (una linea de texto al lado de la imagen) esten alineados arriba (top), abajo (bottom) o en medio (middle). Veamoslo más claro con estos ejemplos:

Ejemplo1:

          <IMG src="dinosaurio.gif" align=right>

Resultado1:

Ejemplo2:

<IMG src="dinosaurio.gif" align=middle>Texto alineado en medio de la imagen.

Resultado2:
Texto alineado en medio de la imagen

Ejemplo3:

          <IMG src="dinosaurio.gif" align=left>
     Esta es la primera linea de texto
     <BR>Aquí sigo en la segunda!
     <BR>Etc.

Resultado3:          

Esta es la primera linea de texto
Aquí sigo en la segunda!
Etc.