estudents photograph




Atributos de las imágenes
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">
 
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">
 
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


< <Imágenes <img> Mapas de imágenes > >
2006 Pc Web.es

Este sitio web usa cookies. Puedes ver nuestra política de cookies. Si continúas navegando se considerará que aceptas su uso. CERRAR AVISO