Imágenes con HTML:

---

La etiqueta <img> y el atributo Src

En HTML, las imágenes se definen con la etiqueta <img>.
La etiqueta <img> está vacía, lo que significa que contiene atributos solamente, y no tiene etiqueta de cierre.
Para mostrar una imagen en una página, es necesario utilizar el atributo src. Src significa "fuente". El valor del atributo src es la dirección URL de la imagen que desea mostrar.
Sintaxis para la definición de una imagen:

<img src="url" alt="algun texto descriptivo">

La dirección URL apunta a la ubicación donde se almacena la imagen. Una imagen denominada "foto1.gif", ubicado en el directorio "imágenes" en "www.elwebero.es" tiene la URL: http://www.elwebero.es/imagenes/foto1.gif.
El navegador muestra la imagen en la que se produce la etiqueta <img> en el documento. Si pones una etiqueta de imagen entre dos párrafos, el navegador muestra el primer párrafo, a continuación, la imagen, y luego el segundo párrafo.

El atributo Alt

El atributo alt especifica un texto alternativo para una imagen, si la imagen no se puede visualizar entonces se mostrará dicho texto.
El valor del atributo alt es un texto definido por el autor:

<img src="foto1.gif" alt="Esto es la foto1">

El atributo alt proporciona información alternativa para una imagen si un usuario por alguna razón no puede ver la imagen (a causa de conexión lenta, un error en el atributo src, o si el usuario utiliza un lector de pantalla).

Altura y ancho de una imagen

Los atributos de altura y anchura se utilizan para especificar la altura y la anchura de una imagen. Los valores de los atributos se especifican en píxeles por defecto:
<img src="foto1.gif" alt="Esto es la foto1" width="62" height="72">

Consejo: Es una buena práctica para especificar la altura y anchura de los atributos de una imagen. Si se establecen estos atributos, el espacio requerido para la imagen está reservado cuando se carga la página. Sin embargo, sin estos atributos, el navegador no sabe el tamaño de la imagen. El efecto será que el diseño de la página va a cambiar durante la carga (mientras que las imágenes se cargan).

Consejos útiles

Nota: Si un archivo HTML contiene imágenes diez - se requieren archivos de once para mostrar la página de la derecha. Cargando imágenes toma tiempo, así que mi mejor consejo es: Usar imágenes cuidadosamente.

Nota: Cuando se carga una página web, es el navegador, en ese momento, que en realidad pone la imagen de un servidor web y lo inserta en la página. Por lo tanto, asegúrese de que las imágenes realmente se quedan en el mismo lugar en relación con la página web, de lo contrario sus visitantes tendrán un icono de enlace roto. El icono de enlace roto se muestra si el navegador no puede encontrar la imagen.

Etiquetas de imagenes

Etiqueta	Descripción
<img>	Define una imagen en una página HTML.
<map>	Se utiliza para definir al lado del cliente una imagen-mapa. Una imagen-mapa es una imagen con zonas seleccionables.
<area>	Define un área dentro de una imagen de mapa, (una imagen de mapa de una imagen con zonas seleccionables).