---

Virtualnauta > Tutorial HTML > Imágenes, Gráficos y Fotos

HTML

Imágenes en HTML

<<< Uso de los formularios en HTML Imágenes y colores de fondo de HTML >>>

---

¿Cómo insertamos imágenes en un archivo HTML?

Para insertar imagenes en un sitio usaremos la etiqueta <img>.
Esta etiqueta es vacía, es decir que debemos utilizarla con el atributo src para que muestre la imagen.
La etiqueta <img> no tiene cierre.

---

Veamos un ejemplo

Si tenemos que insertar una imagen que lleva por nombre de archivo "foto1.jpg" y que está ubicada en el directorio "www.virtualnauta.com/imagenes/", entonces esta sería la forma de escribir el código:

Nota: el atributo <img> mediante el uso del atributo src inserta la imagen foto1.jpg ubicada en la dirección "www.virtualnauta.com/imagenes/"

---

Texto alternativo de la imagen

Se utiliza comunmente cuando deseamos visualizar un texto explicativo de una imagen.

Este texto aparece al pasar el apuntador sobre la imagen o en muchos casos cuando el navegador, por alguna razón, no visualiza las imágenes y en su lugar coloca este texto alternativo dentro de un recuadro.

Para ello vamos a usar el atributo alt

---

Etiquetas y atributos de las imágenes

Etiquetas	Atributos	Valor	Descripción	Ej.
<img>			Define 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.
		bottom
		middle
		left
		right
	border Desaprobado	pixels	Define el borde alrededor de la imagen. Use las propiedades de los bordes de CSS en su lugar.
	height	pixels	Define la altura de la imagen.
		%
	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.
	ismap	URL	Define el mapa de la imagen del lado del servidor.
	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.
	vspace Desaprobado	pixels	Deja espacios en blanco arriba y abajo de la imagen. Use las propiedades de ubicación de CSS en su lugar.
	width	pixels	Define el ancho de la imagen.
		%
<map>			Define el mapa de una imagen del lado del cliente.
	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.
		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.

Atributos estándard

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

Eventos intrínsecos

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

---

<<< Uso de los formularios en HTML Imágenes y colores de fondo de HTML >>>

    Virtualnauta provee del material para uso exclusivo de aprendizaje.
No garantizamos que el contenido sea correcto.
El riezgo por el uso del mismo queda bajo la entera responsabilidad del usuario.
Mientras use este sitio, usted acuerda haber leido y aceptado nuestros términos de uso y privacidad.

Copyright 2007 - 2009 by Martín Solomiak. Todos los derechos reservados.

webmaster@virtualnauta.com

Mapa del sitio