Imágenes

Las imágenes desempeñan un papel fundamental en mejorar el atractivo visual y transmitir información en las páginas web. En HTML, las imágenes se insertan utilizando la etiqueta <img>.

Inserción de imágenes

La etiqueta <img> se utiliza para insertar imágenes en un documento HTML. A diferencia de la mayoría de las etiquetas HTML, la etiqueta <img> no tiene etiqueta de cierre y es auto-cerrada.
Ejemplo:

<img src="image.jpg" alt="Description of the image">

En el ejemplo anterior:

• Se utiliza la etiqueta <img> para insertar una imagen;
• El atributo src especifica la fuente (URL) del archivo de imagen;
• El atributo alt proporciona un texto alternativo para la imagen. Este texto se muestra si la imagen no puede cargarse o para fines de accesibilidad.

Antes de explorar un ejemplo del mundo real, comprendamos los atributos esenciales de la etiqueta img y cómo afectan su contenido.

Atributos de imagen

1. src: Especifica la fuente (URL) del archivo de imagen. Este atributo es obligatorio para que la etiqueta <img> muestre la imagen;
2. alt: Proporciona texto alternativo para la imagen. El texto especificado en el atributo alt se muestra si la imagen no puede cargarse o para fines de accesibilidad. Es esencial para usuarios que utilizan lectores de pantalla o en situaciones donde la imagen no puede mostrarse;
3. width: Especifica el ancho de la imagen en píxeles o como porcentaje del contenedor principal;
4. height: Especifica la altura de la imagen en píxeles o como porcentaje del contenedor principal;
5. title: Proporciona información adicional sobre la imagen. A menudo se muestra como un tooltip cuando el usuario pasa el cursor sobre la imagen.
   Ejemplo:

En el ejemplo anterior:

• La etiqueta <img> inserta una imagen en una página web;
• El atributo src especifica la URL de origen del archivo de imagen;
• El atributo alt establece el texto alternativo para la imagen;
• El atributo width define el ancho de la imagen;
• El atributo height define la altura de la imagen;
• El atributo title proporciona información adicional sobre la imagen.

Tutorial en video