Trabajo con imágenes

Image

¿Alguna vez has visitado una página web que contiene puro texto? Te puedo asegurar que se te hizo algo aburrido, lo bueno es que HTML nos permite agregar imágenes a nuestras páginas para darle una mejor presencia al contenido web. Es por ello que a continuación te hablare de la etiqueta IMG.

La etiqueta para incluir una imagen es la siguiente:

<IMG SRC=”URL”> (no tiene etiqueta de cierre)

Donde URL es la dirección de la imagen. La URL puede ser relativa o absoluta.

Unos ejemplos aclararán este concepto:

<IMG SRC=”gifs/nido.gif”> Esta es una dirección relativa.

<IMG SRC=”http://spaceart.com/solar/saturn4.jpg”&gt;

La segunda etiqueta insertaría, en el lugar del documento donde hubieras puesto la etiqueta, una bonita foto de Saturno con dos de sus lunas (Tetis y Dione), siempre que estuvieras conectado a Internet. Esta es una dirección absoluta, ya que la dirección no depende del directorio donde esté ubicada la página que la contiene.

Atributos de IMG

Los atributos de la imagen pueden ser los siguientes:

  • ALT=”Texto que aparece al situar el cursor sobre la imagen” También muestra este mismo texto en caso de que el navegador no cargue la imagen.
  • ALIGNNos indica la posición de la imagen respecto del texto. Después del signo igual, pueden ir los valores:
  • TOP= si queremos que el texto esté alineado con la parte superior de la imagen
  • MIDDLE= alinea el texto con la parte central de la imagen
  • BOTTOM= alinea el texto con la parte inferior de la imagen
  • LEFT= alinea la imagen a la izquierda de la página forzando la colocación del texto en la parte derecha y arriba
  • RIGHT= alinea la imagen en la derecha de la página forzando la colocación del texto en la parte izquierda y arriba.

Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se pueden emplear las siguientes extensiones de la etiqueta <br>:

  • <br clear =left > Busca el primer margen libre (clear) a la izquierda.
  • <br clear = right> Busca el primer margen libre a la derecha.
  • <br clear =all > Busca el primer margen libre a ambos lados.
  • WIDTH=80, HEIGTH=100 Indican la anchura y altura de la imagen en píxels, en este caso 80×100 píxels.

Si especificamos las dimensiones de las imágenes, las páginas se cargan más rápido, debido a que el navegador reserva el espacio para ellas y sigue cargando el texto:

  • BORDER=2 Añade un borde, a modo de marco, a la imagen. En este caso de 2 píxels.
  • HSPACE=10 , VSPACE=15 Especifican el espacio horizontal y vertical que separa la imagen del texto que la rodea, en este caso 10 píxels horizontales y 15 verticales

Fuente: Planea, en http://www.planea.pntic.mec.es/, el 30/03/2012

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s