Veamos en este punto los atributos de las imágenes, los cuales no permitirán controlar todas las posibilidades del diseño y colocación de gráficos en HTML.

Atributos de las imágenes:

src="imagen.gif". Este atributo es obligatorio e indica el nombre del archivo imagen (entre comillas) o la URL (ruta o dirección en la que esta la imagen que se va incluir en el documento).

align="left / right / top / middle / bottom". Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea.

alt="Texto explicativo". Mensaje que se mostrará al pasar el ratón sobre la imágen. Este texto se mostrará en caso de que la imágen no se cargara. Este atributo se implemento cuando los navegadores sólo podían desplegar sólo texto.

width="n" n en pixels. Atributo opcional siendo recomendable usarlo para ayudar al navegador a representar la imagen, define el ancho de la imagen que vamos a representar.

height="n" n en pixels. Atributo es opcional y recomendable ponerlo, define la altura de la imagen.

border= "n", n en pixels. Mediante este atributo designamos el ancho del borde que rodea la imagen.

Seguidamente mostramos un ejemplo de cómo incluir una imagen en nuestra página web:

 
 <img src"img/jardin.jpg" width="300" height="200" 
     border="0" alt="Un maravilloso jardín">
 

Es muy importante que observar que podemos modificar la presentación en pantalla de la imagén (que no el archivo en si) con los atributos width y height

Ejemplo (1):

 
 <img src"img/jardin.jpg" width="150" height="100" 
     border="0" alt="Un maravilloso jardín">
 

Texto con imágenes

Veamos ahora como maquetar un poco de texto conjuntamente con imágenes:
Ejemplo (2):

<p>
 <img src ="img/ordenata_man.gif"
 align ="left" width="48" height="48"> 
 Un párrafo con una imagen. El atributo align de la 
 imagen esta configurado a la izquierda.
 La imagen aparecerá a la izquierda de este texto
</p>

Un párrafo con una imagen. El atributo align de la imagen esta configurado a la izquierda. La imagen aparecerá a la izquierda de este texto

Ejemplo (3):

<p>
 <img src ="img/ordenata_man.gif"
 align ="right" width="48" height="48"> 
 Un párrafo con una imagen. El atributo align de la 
 imagen esta configurado a la derecha.
 La imagen aparecerá a la derecha de este texto
</p>

Un párrafo con una imagen. El atributo align de la imagen esta configurado a la derecha. La imagen aparecerá a la derecha de este texto