Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Challenge: Travailler Avec des Images | Travail avec les Médias et les Tableaux
HTML Ultime

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

index.html

Indice
expand arrow
  1. Utiliser la balise <img> pour afficher une image ;
  2. Utiliser l'attribut src pour spécifier l'emplacement de l'image ;
  3. Utiliser l'attribut alt pour fournir un texte descriptif pour l'image ;
  4. Utiliser l'attribut width pour définir la largeur de l'image ;
  5. Utiliser l'attribut height pour définir la hauteur de l'image.
Solution
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>
Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 2

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Section 4. Chapitre 2
some-alt