Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Challenge: Trabajar con Imágenes | Trabajando con Medios y Tablas
HTML Definitivo

Challenge: Trabajar con Imágenes

Desliza para mostrar el menú

Objetivo

Práctica del uso de la ruta absoluta para imágenes en HTML.

Tarea

Asegúrate de que el atributo src de la primera imagen utilice la ruta absoluta. Puedes encontrar la imagen en:

https://content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/adik.png

Utiliza la ruta absoluta para el atributo src de la segunda imagen. Accede a la imagen aquí:

https://content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/joking.png

Especifica el valor adecuado del atributo alt para ambas imágenes. Recuerda que el valor de alt es fundamental para proporcionar contexto en caso de que las imágenes no se carguen o para usuarios que utilizan lectores de pantalla.

index.html

index.html

Pista
expand arrow
  1. Utilizar la etiqueta <img> para mostrar una imagen;
  2. Utilizar el atributo src para especificar la ubicación de la imagen;
  3. Utilizar el atributo alt para proporcionar un texto descriptivo para la imagen;
  4. Utilizar el atributo width para definir el ancho de la imagen;
  5. Utilizar el atributo height para definir la altura de la imagen.
Solución
expand arrow
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Challenge: Images</title>
  </head>
  <body>
    <!-- Image one -->
    <img
      src="https://content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/adik.png"
      alt="Emotion that opens the mouth"
      width="256"
      height="256"
    />

    <!-- Image two -->
    <img
      src="https://content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/joking.png"
      alt="Emotion that shows the tongue"
      width="256"
      height="256"
    />
  </body>
</html>
¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 2

Pregunte a AI

expand

Pregunte a AI

ChatGPT

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

Sección 4. Capítulo 2
some-alt