lunes, 12 de abril de 2010

COMO INSERTAR LA IMAGEN A LA PAGINA WEB






La etiqueta utilizada para agregar imágenes a una página web es [IMG], siempre va acompañada del atributo SCR, que indica la ruta donde se encuentra el archivo que deseamos insertar.

Por ejemplo:

[IMG SRC="nombre completo de mi imagen"]

Si tuvieramos un archivo "tierra.jpg" (en el mismo directorio de la página), la manera de insertarlo sería:

[IMG SRC="tierra.jpg" ]

Y se muestra en el browser:

En cambio si la imagen se encuentra en un directorio distinto de el de la página habrá que especificar la ruta completa (es decir, la ubicación exacta del archivo). Si, por ejemplo, tenemos la misma imagen en el directorio "/mis documentos", la manera de hacer lo anterior es la siguiente:

[IMG SRC="../mis documentos/tierra.jpg"]

Es importante notar que las barras van invertidas, no como en Windows y DOS, y que para insertar las imágenes no hacen falta las etiquetas de cierre.

Atributos del elemento IMG

Mediante los atributos Width y Height (ancho y alto respectivamente), se indica el espacio que el navegador debe reservar para la imagen. Aunque es optativo especificarlos, es conveniente indicarlos siempre ya que de lo contrario el navegador esperará a la descarga completa de la imagen antes de seguir presentando el contenido del documento. Estan dos dimensiones no tienen porque coincidir con el tamaño real de la imagen, dado que el navegador la va a redimensionar.

Otro atributo importante es ALT. Mediante el mismo se ofrece una breve descripcion en texto de la imagen. Esta descripción es muy útil si el navegador está configurado para no mostrar imágenes o si simplemente no las soporta. El texto aparecerá en el espacio correspondiente a la imagen, y también cuando el usuario pase el mouse por arriba de la imagen, incluso si ésta bajó normalmente a la computadora del navegante.

Ejemplo:

[IMG SRC="cake.jpg" ALT= "Torta de cumpleaños" width="198" height= "191"]

Al dejar el puntero del mouse encima de la imagen unos segundos el usuario verá:

No hay comentarios:

Publicar un comentario