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
Pista
- Utilizar la etiqueta
<img>para mostrar una imagen; - Utilizar el atributo
srcpara especificar la ubicación de la imagen; - Utilizar el atributo
altpara proporcionar un texto descriptivo para la imagen; - Utilizar el atributo
widthpara definir el ancho de la imagen; - Utilizar el atributo
heightpara definir la altura de la imagen.
Solución
<!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?
¡Gracias por tus comentarios!
Sección 4. Capítulo 2
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Sección 4. Capítulo 2