5. Ingresar imagenes en HTML

Para ingresar una imagen en nuestro documento, utilizamos la etiqueta:

 

<img src="imagen.jpg">

 

A veces puede ocurrir que ponemos la etiqueta, pero la imagen no carga en el documento, para ello podemos utilizar la propiedad ALT para signarle un titulo a dicha imagen y quedaria asi:

 

<img src="imagen.gif" alt="Descripcion de la imagen">

 

De esta forma, si nos situamos con el puntero del raton encima de la imagen, aparecera dicha descripcion.

 

El tamaño de las imagenes, es un tema muy a tener en cuenta, pues, si ingresamos una imagen con un gran tamaño, nuestra pagina puede que tarde mucho en cargar, pues seria preferible editar esta imagen antes en un editor de imagenes e ingresarla en nuestra pagina web ya editada.

 

Tenemos la propiedad ALIGN que nos facilita la alineacion del texto sobre la imagen y de ello puede ser TOP, MIDDLE y BOTTOM:

 

<img src="imagen.gif" align="top">    (El texto lo alinea arriba de la imagen)

<img src="imagen.gif" align="middle">    (El texto lo alinea en medio)

<img src="imagen.gif" align="bottom">  (El texto lo alinea abajo)

 

Por otra parte, tambien podemos alinear la propia imagen con las propiedades RIGHT, LEFT, CENTER:

 

<img src="imagen.gif" align="right"> (Alinea la imagen a la derecha)

<img src="imagen.gif" align="left"> (Alinea la imagen a la izquierda)

<img src="imagen.gif" align="center">  (Alinea la imagen al centro)

 

Aunque lo correcto para ingresar una imagen, es ingresarla con su tamaño correcto, muchas veces podemos corregir los tamaños directamente desde la web y es utilizando las propiedades WIDTH y HEIGHT. Esto modificaria el ancho y el alto de la imagen en pixeles.

 

<img src="imagen.png" width="150" height="95">