Aprende Trabajar con Imágenes en HTML

Las imágenes mejoran el atractivo visual de una página web y ayudan a comunicar información. En HTML, las imágenes se agregan utilizando la etiqueta <img>.

Insertar imágenes

La etiqueta <img> es autocontenida y requiere al menos dos atributos:

src: ubicación del archivo de imagen;
alt: texto alternativo para accesibilidad o cuando la imagen no se carga.

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

Atributos de imagen

src: ruta o URL de la imagen (obligatorio);
alt: texto alternativo y descripción para accesibilidad;
width: define el ancho de la imagen;
height: define la altura de la imagen;
title: muestra una descripción emergente al pasar el cursor.

index.html

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.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 3. Capítulo 1

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you explain more about the difference between using local and online images?

What happens if I don't include the alt attribute in my image tag?

How do I make sure my images are responsive on different devices?

Awesome!

Completion rate improved to 2.86

Desliza para mostrar el menú

Las imágenes mejoran el atractivo visual de una página web y ayudan a comunicar información. En HTML, las imágenes se agregan utilizando la etiqueta <img>.

Insertar imágenes

La etiqueta <img> es autocontenida y requiere al menos dos atributos:

src: ubicación del archivo de imagen;
alt: texto alternativo para accesibilidad o cuando la imagen no se carga.

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

Atributos de imagen

src: ruta o URL de la imagen (obligatorio);
alt: texto alternativo y descripción para accesibilidad;
width: define el ancho de la imagen;
height: define la altura de la imagen;
title: muestra una descripción emergente al pasar el cursor.

index.html

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.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 3. Capítulo 1

Trabajar con Imágenes en HTML

Insertar imágenes

Atributos de imagen

1. ¿Qué etiqueta se utiliza para insertar imágenes en un documento HTML?

2. ¿Qué atributo es obligatorio para que la etiqueta `<img>` muestre la imagen?

3. ¿Qué proporciona el atributo `alt` para una imagen?

4. ¿Qué sucede si no se puede cargar la imagen especificada en el atributo `src`?

Awesome!

Trabajar con Imágenes en HTML

Insertar imágenes

Atributos de imagen

1. ¿Qué etiqueta se utiliza para insertar imágenes en un documento HTML?

2. ¿Qué atributo es obligatorio para que la etiqueta `<img>` muestre la imagen?

3. ¿Qué proporciona el atributo `alt` para una imagen?

4. ¿Qué sucede si no se puede cargar la imagen especificada en el atributo `src`?

Trabajar con Imágenes en HTML

Insertar imágenes

Atributos de imagen

1. ¿Qué etiqueta se utiliza para insertar imágenes en un documento HTML?

2. ¿Qué atributo es obligatorio para que la etiqueta <img> muestre la imagen?

3. ¿Qué proporciona el atributo alt para una imagen?

4. ¿Qué sucede si no se puede cargar la imagen especificada en el atributo src?

Awesome!

Trabajar con Imágenes en HTML

Insertar imágenes

Atributos de imagen

1. ¿Qué etiqueta se utiliza para insertar imágenes en un documento HTML?

2. ¿Qué atributo es obligatorio para que la etiqueta <img> muestre la imagen?

3. ¿Qué proporciona el atributo alt para una imagen?

4. ¿Qué sucede si no se puede cargar la imagen especificada en el atributo src?

2. ¿Qué atributo es obligatorio para que la etiqueta `<img>` muestre la imagen?

3. ¿Qué proporciona el atributo `alt` para una imagen?

4. ¿Qué sucede si no se puede cargar la imagen especificada en el atributo `src`?

2. ¿Qué atributo es obligatorio para que la etiqueta `<img>` muestre la imagen?

3. ¿Qué proporciona el atributo `alt` para una imagen?

4. ¿Qué sucede si no se puede cargar la imagen especificada en el atributo `src`?