Images

Les images sont une partie essentielle de la conception web. Elles rendent une page web attrayante pour un visiteur. Elles peuvent être facilement incluses dans un document HTML en utilisant la balise <img>.

• src: attribut requis. Sa valeur est le chemin vers l'emplacement de l'image. Le chemin peut être absolu ou relatif;
• alt: attribut requis. Fournit un texte alternatif qui peut être affiché lorsque l'image ne peut pas être rendue;
• width et height: spécifie la taille de l'image en pixels. Sans ces attributs, une image sera rendue dans sa taille originale.

Attribut alt

La description de l'image doit être informative et significative. Elle aide à décrire l'image pour les personnes malvoyantes ou incapables de la voir. De cette façon, le navigateur lira l'attribut alt, et un utilisateur pourra comprendre pourquoi un site web a cette image.

Imaginons l'exemple suivant. Vous avez une source sur les courses de chevaux. Vous voulez montrer comment les concurrents se préparent pour la course.

Une mauvaise valeur pour l'attribut alt sera :

Une bonne valeur pour l'attribut alt sera :

Le texte alternatif "Un homme sur un cheval" est trop générique et manque de contexte. Il fournit une description de base, mais ne transmet pas de détails utiles sur la scène ou l'objectif de l'image.

Attribut src

L'attribut src peut utiliser des chemins absolus et relatifs pour spécifier l'emplacement du fichier image.

Chemin Absolu

Il spécifie l'URL complète du fichier image sur le serveur web. Par exemple :

Cela signifie que le fichier image est situé au lien https://example.com/images/image.jpg sur Internet. Tout le monde peut accéder à l'image en utilisant ce lien.

Veuillez examiner l'exemple réel suivant dans le bac à sable de code ci-dessous :

Remarque

Pour examiner la structure du dossier de fichiers, faites glisser le curseur sur le côté gauche de l'interface du bac à sable de code. Dans le coin supérieur gauche, vous trouverez un bouton burger représenté par trois bandes. En cliquant sur ce bouton, vous naviguerez vers l'organisation du dossier de fichiers.

Chemin Relatif

Il spécifie l'emplacement du fichier image par rapport au document actuel. Par exemple :

Cela signifie que le fichier image.jpg est situé dans le répertoire images.

Veuillez examiner l'exemple réel fourni dans le bac à sable de code ci-dessous. Vous trouverez le dossier images, qui contient le fichier sun.png.

Remarque

Pour résumer la différence entre les chemins relatifs et absolus, un chemin absolu représente le lien réel que tout le monde peut utiliser pour accéder à une image. En revanche, un chemin relatif est un lien dans le contexte de votre propre projet. Il fait référence à une image locale et à un chemin que toute personne au sein du projet peut accéder.