Imágenes

Las imágenes juegan un papel crucial en mejorar el atractivo visual y transmitir información en las páginas web. En HTML, las imágenes se insertan usando la etiqueta <img>.

Insertar 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 una etiqueta de cierre y es auto-cerrada.
Ejemplo:

En el ejemplo anterior:

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

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

Atributos de Imagen

1. src: Especifica la fuente (URL) del archivo de imagen. Este atributo es necesario 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 se puede cargar o para propósitos de accesibilidad. Es esencial para usuarios que puedan estar usando lectores de pantalla o para situaciones donde la imagen no pueda ser mostrada;
3. width: Especifica el ancho de la imagen en píxeles o como un porcentaje del contenedor padre;
4. height: Especifica la altura de la imagen en píxeles o como un porcentaje del contenedor padre;
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 establece el ancho de la imagen;
• El atributo height establece la altura de la imagen;
• El atributo title proporciona más información sobre la imagen.

Tutorial en Video