Les images · Code avec Martin

Ajoute des photos et des images à ton site web – et apprends à les garder bien rangées dans un dossier.

Montre-moi : la balise image

Une image s’ajoute avec la balise <img> :

<img src="images/school.jpg" alt="Our school building">

Deux choses à expliquer ici :

src (source) dit où se trouve l’image. Ici : dans le dossier images, le fichier school.jpg.
alt (alternative) est une description textuelle de l’image. Elle s’affiche si l’image ne charge pas, et elle est lue à voix haute par les lecteurs d’écran pour les personnes aveugles. Remplis-la toujours – c’est à la fois poli et une pratique standard pour les pros.

Remarque encore une chose : <img> n’a pas de balise fermante. Elle n’enveloppe rien, elle s’insère simplement – certaines balises fonctionnent comme ça.

💡

Où trouver des images ? Tes propres photos (demande à un parent de te les envoyer sur l’ordinateur), tes propres dessins scannés ou photographiés – ou des images gratuites sur un site comme pixabay.com. Ne prends pas des images sur Google au hasard – la plupart appartiennent à quelqu’un et ne peuvent pas être utilisées sans permission.

Reste organisé : un dossier pour les images

Dans VS Code, à l’intérieur de ton dossier my-website, crée un nouveau dossier et nomme-le images (l’icône dossier avec un plus en haut à gauche).
Copie 2–3 images dedans. Tu peux même les glisser-déposer directement dans VS Code.
Renomme-les simplement : lettres minuscules, pas d’accents, pas d’espaces. Quelque chose comme school.jpg, field.jpg, trip-mountains.jpg. Ça t’évitera beaucoup de maux de tête.

À toi 💪

Ajoute au moins deux images à ta page qui correspondent au contenu (peut-être une juste sous le titre principal et une dans un chapitre).

🏫 Site web d'école – solution

<h1>Riverside Elementary School</h1>
<img src="images/school.jpg" alt="Our school building">
<p>Welcome to our school's website.</p>

<h2>Clubs</h2>
<img src="images/gym.jpg" alt="Our gym during a floorball game">
<ul>
  <li>floorball</li>
  <li>ceramics</li>
</ul>

🙋 Site web personnel – solution

<h1>Hi, I'm Jake</h1>
<img src="images/me.jpg" alt="Me with a soccer ball">

<h2>What I Like</h2>
<img src="images/minecraft-build.jpg" alt="My castle built in Minecraft">
<p>More than anything, soccer and Minecraft.</p>

🌍 Journal de voyage – solution

<h1>Where We've Been 🌍</h1>

<h2>Last Trip: The Mountains</h2>
<img src="images/mountains.jpg" alt="View from the summit over the forest">
<p>Over the summer we hiked through the mountains.</p>

<h2>Greece 2025</h2>
<img src="images/sea.jpg" alt="A bay with crystal-clear water">

⚽ Site web de club – solution

<h1>Riverside Eagles FC</h1>
<img src="images/team.jpg" alt="Our team photo after the match">

<h2>Recent Results</h2>
<img src="images/match.jpg" alt="Owen scoring a goal against the Wildcats">

⚠️

L’image ne s’affiche pas ? Vérifie : 1) le nom dans ton code correspond exactement au nom du fichier (même majuscules/minuscules !), 2) l’image est vraiment dans le dossier images, 3) tu n’as pas oublié d’enregistrer et d’actualiser la page. Trouve plus d’aide dans le chapitre Quand quelque chose ne fonctionne pas.

✅

Vérifie : Tu vois tes images sur la page. Elles sont peut-être beaucoup trop grandes ou bizarrement étirées – c’est normal, on corrigera la taille quand on arrivera au CSS.

Ce que tu retiens de cette leçon

La balise <img src="..." alt="..."> insère une image – elle n’a pas de balise fermante.
alt décrit l’image avec des mots. Remplis-la toujours.
Garde les images dans un dossier images, nommées simplement : minuscules, pas d’espaces ni d’accents.