Summary  
This chapter explains how to embed images in HTML using the `<img>` tag and its key attributes (`src`, `alt`, `width`, `height`), including best practices for accessible alt text and using absolute versus relative paths.  

General domain of usage  
Web page content design

Les images rendent les pages web plus attrayantes. Vous pouvez insérer une image en utilisant la balise `<img>`.

PGltZwogIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL21vdW50YWlucy5hdmlmIgogIGFsdD0iTW91bnRhaW5zIGluIHNub3cgYW5kIGNsZWFuIHNreSIKICB3aWR0aD0iNTAwIgogIGhlaWdodD0iMzMzIgovPg==

### Attributs clés :
- `src` : requis. Chemin vers le fichier image (absolu ou relatif) ;
- `alt` : requis. Texte affiché si l'image ne peut pas être chargée, également utilisé par les lecteurs d'écran ;
- `width` / `height` : taille en pixels. Sans ces attributs, l'image s'affiche à sa taille d'origine.

## Attribut alt
Le texte `alt` doit décrire clairement l'image et fournir un contexte utile.

Imaginons l'exemple suivant. Vous disposez d'une source sur les courses de chevaux. Vous souhaitez montrer comment les concurrents se préparent à la course.

PGltZyAKICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9tYW4raG9yc2UuYXZpZiIKICBhbHQ9IkEgaHVtYW4gb24gYSBob3JzZSIKLz4=

PGltZyAKICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9tYW4raG9yc2UuYXZpZiIKICBhbHQ9IkEgam9ja2V5IHJpZGVzIGEgaG9yc2UgdGhyb3VnaCBhIHRyYWluaW5nIGFyZWEgc3Vycm91bmRlZCBieSB0cmVlcyIKLz4=

La version améliorée fournit un contexte réel et aide les utilisateurs malvoyants à comprendre ce que montre l'image.

## Attribut src
L'attribut `src` peut utiliser à la fois des chemins absolus et relatifs pour spécifier l'emplacement du fichier image.

### Chemin absolu
Une URL complète pointant vers une image en ligne.

PGltZyBzcmM9Imh0dHBzOi8vZXhhbXBsZS5jb20vaW1hZ2VzL2ltYWdlLmpwZyIgYWx0PSJJbWFnZSBEZXNjcmlwdGlvbiIgLz4=

N'importe qui peut accéder à l'image via ce lien complet.

Veuillez examiner l'exemple réel suivant.
- [View the Code](https://github.com/olreyplay/adding-images-in-html/blob/main/index.html)
- [Open the Live Page](https://olreyplay.github.io/adding-images-in-html/)

### Chemin relatif
Fait référence à une image située dans le dossier de votre projet.

PGltZyBzcmM9Ii4vaW1hZ2VzL2ltYWdlLmpwZyIgYWx0PSJJbWFnZSBEZXNjcmlwdGlvbiIgLz4=

Cela signifie que `image.jpg` est stocké dans le répertoire images à côté de votre fichier HTML.

Veuillez examiner l'exemple réel fourni ci-dessous. Vous trouverez le dossier `images`, qui contient le fichier `sun.png`.

- [View the Code](https://github.com/olreyplay/adding-images-in-html-v2/blob/main/index.html)
- [Open the Live Page](https://olreyplay.github.io/adding-images-in-html-v2/)

Chemins absolus : URL complètes qui fonctionnent depuis n'importe où sur Internet.

Chemins relatifs : chemins locaux du projet utilisés dans votre propre structure de dossiers.

Résumé

Quelle balise peut être utilisée pour insérer une image sur un site web ?

Quel attribut est obligatoire à spécifier pour une balise `<img/>` ?

Apprenez les bases du HTML (HyperText Markup Language), le fondement du développement web. Ce cours destiné aux débutants couvre les balises, attributs, éléments et la structuration des pages web. Acquérez des compétences pratiques pour créer des titres, paragraphes, listes, images, liens, formulaires et tableaux. Découvrez les bonnes pratiques, l’optimisation et l’accessibilité web. Commencez votre parcours en développement web avec le HTML.

Explorez le fonctionnement interne du web. Découvrez comment les données circulent à travers les réseaux, le rôle des protocoles, ainsi que les mystères des adresses IP et des noms de domaine. Acquérez une compréhension globale de la manière dont les navigateurs web et les serveurs communiquent pour fournir du contenu web.

Découvrez la puissance des balises pour structurer le contenu, des titres et paragraphes aux listes et tableaux. Apprenez à enrichir les éléments grâce aux attributs.

Le cœur de la structure d'un document HTML. Découverte des composants d'un document HTML, y compris la déclaration doctype, l'en-tête et le corps. Compréhension de la fonction de chaque élément et de leur contribution à la structure globale d'une page web.

Rendez une page web plus attrayante grâce à l'intégration de médias tels que des images, de l'audio et de la vidéo. Manipulez des données structurées sous forme de tableaux.

Découvrez la polyvalence des formulaires HTML. Apprenez à concevoir des formulaires intuitifs et conviviaux en utilisant des concepts et techniques essentiels. Comprenez comment les formulaires permettent l'interaction utilisateur et la soumission de données sur les sites web.

Ajout d'images en HTML

Attributs clés :

Attribut alt

Attribut src

Chemin absolu

Chemin relatif

1. Quelle balise peut être utilisée pour insérer une image sur un site web ?

2. Quel attribut est obligatoire à spécifier pour une balise `<img/>` ?