Imágenes en HTML

Las imágenes, gráficos y fotos le dan vida y color a las páginas web.


Las imágenes

Para insertar imágenes en un sitio usaremos la etiqueta <img>.

Esta etiqueta debe ir acompañada del atributo src que es el que contiene el URL de la ubicación del archivo de la imagen.

El atributo alt se utiliza para dar una breve descripción de la imagen, la cual podremos observar en caso que el navegador del usuario, por alguna razón, no muestre la misma.

La etiqueta <img> no tiene cierre.

Sintaxis

<img src="/URL" alt="texto descriptivo">

Ejemplo

Código
<img src="/../imagenes/foto1.jpg" alt="Dos niñas de la mano">
Resultado
Dos niñas de la mano

Las etiquetas map y area

La etiqueta map especifica un mapa de imágenes.
Un mapa de imágenes es una imagen que permite clickear diferentes áreas de la misma.
Esta etiqueta requiere del atributo name, con el mismo nombre usado en el atributo usemap de la etiqueta img. De esta forma se establece la relación imagen-mapa.
La etiqueta area se utiliza para definir regiones o áreas dentro de un mapa de imágenes y los enlaces asociados a esas regiones.

Ejemplo

Código
<img src="/../imagenes/formas.gif" usemap="#map1">
<map name="map1">
<area href="/cuadrado.html" shape=rect coords="0,75,100,175">
<area href="/circulo.html" shape=circle coords="175,50,50">
<area href="/triangulo.html" shape=poly coords="125,250, 225,250,175,165">
</map>
Resultado

Etiquetas y atributos de las imágenes

Etiquetas Atributos Valor Descripción Ej.
<img> Define una imagen. Ejemplo básico de como insertar una imagen
alt
Requerido
text Breve descripción de la imagen.
src
Requerido
URL Dirección URL de la imagen a mostrar.
align
Desaprobado
top Alínea la imagen de acuerdo al texto circundante. Use las propiedades de ubicación de CSS en su lugar. Sin ejemplo
bottom Sin ejemplo
middle Sin ejemplo
left Sin ejemplo
right Sin ejemplo
border
Desaprobado
pixels Define el borde alrededor de la imagen. Use las propiedades de los bordes de CSS en su lugar. Sin ejemplo
height pixels Define la altura de la imagen. Ejemplo de como definir la altura de una imagen en pixels
% Ejemplo de como definir la altura de una imagen en porcentaje
hspace
Desaprobado
pixels Deja espacios en blanco a derecha e izquierda de la imagen. Use las propiedades de ubicación de CSS en su lugar. Sin ejemplo
ismap URL Define el mapa de la imagen del lado del servidor. Ejemplo de como definir un mapa de una imagen
longdesc URL La URL a un documento con una larga descripción de la imagen.
usemap URL Define el mapa de una imagen del lado del cliente. Ejemplo de como definir un mapa de una imagen
vspace
Desaprobado
pixels Deja espacios en blanco arriba y abajo de la imagen. Use las propiedades de ubicación de CSS en su lugar. Sin ejemplo
width pixels Define el ancho de la imagen. Ejemplo de como definir el ancho de una imagen en pixels
%
<map> Define el mapa de una imagen del lado del cliente. Ejemplo de una imagen mapeada con el uso de las etiquetas map y area y sus atributos
name nombre único Define un único nombre para la etiqueta <map>.
<area> Define una región en el mapa de una imagen.
alt
Requerido
text Breve descripción de la imagen.
coords Especifica las coordinadas en donde se puede apretar.
href URL Dirección URL del área.
nohref true Excluye un área en el mapa de la imagen.
false
shape Define la forma del área. Ejemplo de una imagen mapeada con el uso de las etiquetas map y area y sus atributos
rect Usamos coords="izquierda,arriba,derecha,abajo".
rectangle
circ Usamos coords="centro x,centro y, radio".
circle
poly Usamos coords="x1,y1,x2,y2,..,xn,yn".
polygon
target Indica donde abrir el URL.
_blank El URL se abrirá en una nueva ventana.
_parent El URL se abrirá en el frameset padre.
_self El URL se abrirá en el mismo frame donde fue apretado.
_top El URL se abrirá en una ventana de tamaño completo.
<applet>
Desaprobado
Permite incluir un applet Java en un documento HTML. Use la etiqueta <object> en su lugar. Sin ejemplo

Atributos estándard

id, class, title, style, dir, lang, tabindex, accesskey

Si desea una descripción completa, diríjase a: atributos estándard.

Eventos intrínsecos

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur

Si desea una descripción completa, diríjase a: eventos intrínsecos.



<<< Uso de los formularios en HTML Diseño de las páginas web >>>

Alojamiento Web

¡OFERTA ESPECIAL! . COM SOLO $ 7.99 * por año. ¡Registrarse suyo hoy y por varios años!