Atributos de Imágenes en HTML

En el articulo anterior sobre la etiqueta <img> habíamos vistos que la sintaxis mas sencilla incluía el atributo src, aparte de este atributo existen otros aplicable a la etiqueta <img>:

Atributo Opciones Descripción

src

URL

Nombre y dirección del archivo de imagen a insertar.

alt

Texto.

Descripción de la imagen a insertar. Texto que aparece en el lugar de la imagen mientras esta se carga.

width

Valor numérico en pixeles.

Ancho de la imagen a presentar en pixeles.

height

Valor numérico en pixeles.

Alto de la imagen en pixeles.

title

Texto

Texto que aparece en etiqueta cuando se mueve el cursor sobre la imagen.

border

Valor numérico en pixeles

Grosor del borde alrededor de la imagen.

hspace

Valor numérico en pixeles

Espacio horizontal libre entre la imagen y otros elementos, tales como texto, imágenes, etc.

vspace

Valor numérico en pixeles

Espacio vertical libre entre la imagen y otros elementos, tales como texto, imágenes, etc.

align

left,

center,

right

Permite alinear horizontalmente una imagen.

Un ejemplo de la sintaxis de la etiqueta <img> con alguno de los atributos se muestra a continuación:

<img src=”Url” alt=”Esta es una imagen de prueba” title=”imagen de prueba” border=”1”

width=”200” height=”200” />

A continuación se muestra ejemplo de uso de la etiqueta <img> y sus atributos. 

imagenatr-1
Fragmento de documento HTML con uso de la etiqueta <img> y algunos atributos.

Como el archivo se encuentra en la misma carpeta que el documento html, la dirección es sencilla:

src=”brujula.jpg”

El texto alternativo que se muestra cuando se esta cargando la imagen:

alt=”Imagen de brújula con regla”

El texto que aparece como etiqueta de la imagen cuando se pasa el cursor por encima:

title=”brujula”

Se ha colocado un borde grueso, de 10 pixeles alrededor de la imagen:

border=”10”

El ancho de la imagen a presentar se ha colocado en 250 pixeles:

width=”250”

El alto de la imagen a presentar se ha colocado en 166 pixeles:

height=”166”

Con estos atributos se tiene la siguiente salida en el navegador: 

imagenatr-2

Referencias Bibliográficas

Alvarez, R. (2012). Manual de HTML de Desarrollo Web.

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