Challenge: Travailler Avec des Images
Glissez pour afficher le menu
Objectif
Exercice sur l'utilisation du chemin absolu pour les images en HTML.
Tâche
Vérifier que l'attribut src de la première image utilise le chemin absolu. Vous pouvez trouver l'image à l'adresse suivante :
https://content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/adik.png
Utiliser le chemin absolu pour l'attribut src de la deuxième image. Accéder à l'image ici :
https://content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/joking.png
Spécifier la valeur appropriée de l'attribut alt pour les deux images. Rappel : la valeur alt est essentielle pour fournir un contexte si les images ne se chargent pas ou pour les utilisateurs utilisant des lecteurs d'écran.
index.html
Indice
- Utiliser la balise
<img>pour afficher une image ; - Utiliser l'attribut
srcpour spécifier l'emplacement de l'image ; - Utiliser l'attribut
altpour fournir un texte descriptif pour l'image ; - Utiliser l'attribut
widthpour définir la largeur de l'image ; - Utiliser l'attribut
heightpour définir la hauteur de l'image.
Solution
<!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>
Tout était clair ?
Merci pour vos commentaires !
Section 4. Chapitre 2
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Section 4. Chapitre 2