Insérer une image dans la page
Objectif : Afficher une image locale en indiquant son chemin dans le document HTML.
Une page de programme peut contenir toutes les informations nécessaires et rester difficile à se représenter sans image du lieu. Vous allez ajouter au Festival des Rives une photographie de scène déjà prévue dans le projet, puis vérifier que le navigateur la trouve.
Indiquer le fichier à afficher
L’élément img demande au navigateur d’afficher une image. Il ne contient pas de texte entre une balise ouvrante et une balise fermante : son fichier est indiqué avec l’attribut src. Dans ce projet, le fichier image se nomme festival-scene.jpg et se trouve dans le sous-dossier assets.
Écrivez le chemin assets/festival-scene.jpg dans src. Il s’agit d’un chemin relatif : depuis index.html, le navigateur entre dans le dossier assets, puis cherche le fichier indiqué. Le chemin doit correspondre exactement à l’organisation des dossiers et au nom du fichier, y compris son extension.
Ajouter l’image à la présentation
Placez l’image dans la section de présentation, après le paragraphe qui décrit le festival. Elle illustre le lieu avant que la page ne propose le lien vers le site de la mairie. Le code ci-dessous montre index.html complet à l’état de cette leçon ; les liens vers les deux scènes et les horaires ordonnés sont conservés.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Festival des Rives — Programme</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="festival-page">
<header class="festival-page__entete">
<h1>Festival des Rives</h1>
<p>Deux jours de musique au cœur de la ville.</p>
<nav class="festival-page__navigation" aria-label="Navigation principale">
<ul>
<li><a class="festival-page__lien" href="#presentation">Présentation</a></li>
<li><a class="festival-page__lien" href="#programme">Programme</a></li>
<li><a class="festival-page__lien" href="#acces">Accès</a></li>
<li><a class="festival-page__lien" href="#scene-riviere">Scène de la Rivière</a></li>
<li><a class="festival-page__lien" href="#scene-jardin">Scène du Jardin</a></li>
</ul>
</nav>
</header>
<main class="festival-page__contenu">
<section class="festival-page__presentation" id="presentation">
<h2>Un festival local et convivial</h2>
<p>Retrouvez des artistes de la région et des découvertes musicales dans le parc des Rives.</p>
<img class="festival-page__image" src="assets/festival-scene.jpg" alt="La scène principale installée dans le parc, devant un public réuni en soirée">
<p>Pour découvrir les initiatives de la ville, consultez le <a class="festival-page__lien" href="https://www.example.org/">site de la mairie</a>.</p>
</section>
<section class="festival-page__programme" id="programme">
<h2>Programme des concerts</h2>
<section class="festival-page__scene" aria-labelledby="scene-riviere">
<h3 id="scene-riviere">Scène de la Rivière — samedi</h3>
<ol>
<li class="festival-page__horaire"><time datetime="2025-06-14T18:00">18 h</time> — Les Lucioles</li>
<li class="festival-page__horaire"><time datetime="2025-06-14T20:00">20 h</time> — Rivage Sonore</li>
</ol>
</section>
<section class="festival-page__scene" aria-labelledby="scene-jardin">
<h3 id="scene-jardin">Scène du Jardin — samedi</h3>
<ol>
<li class="festival-page__horaire"><time datetime="2025-06-14T19:00">19 h</time> — Trio des Pins</li>
<li class="festival-page__horaire"><time datetime="2025-06-14T21:00">21 h</time> — Les Échos</li>
</ol>
</section>
</section>
<section class="festival-page__acces" id="acces">
<h2>Préparer votre venue</h2>
<p>Le festival se déroule au parc des Rives, accessible à pied depuis la gare centrale.</p>
<ul>
<li>Adresse : 12, avenue du Parc, 00000 Ville-sur-Rive.</li>
<li>Entrée gratuite dans la limite des places disponibles.</li>
<li>Un stationnement vélo est disponible près de l'entrée.</li>
</ul>
<p><a class="festival-page__lien" href="#presentation">Retour à la présentation</a></p>
</section>
</main>
<footer class="festival-page__pied">
<p>Festival des Rives — informations susceptibles d'être mises à jour. <a class="festival-page__lien" href="index.html">Revenir au programme</a></p>
</footer>
</body>
</html>L’attribut class conserve ici la classe de projet prévue pour l’image ; il ne détermine pas le fichier à charger. C’est bien src qui fournit le chemin. Vous n’avez pas besoin de modifier style.css pour apprendre cette association entre l’élément et le fichier : cette leçon porte sur le contenu HTML et le chargement de l’image.
Vérifier le chemin dans le navigateur
Ouvrez le fichier index.html dans le navigateur comme vous l’avez fait précédemment, puis faites défiler la page jusqu’à la présentation. Si le chemin est correct et si le fichier est une image lisible par le navigateur, la photographie de la scène apparaît à cet emplacement. Son apparence dépendra de la feuille de style existante ; l’élément img fournit le contenu, pas une mise en page particulière.
Si une icône d’image manquante apparaît, contrôlez d’abord le chemin depuis index.html : le dossier assets doit se trouver au même niveau que ce fichier. Comparez ensuite l’orthographe exacte de festival-scene.jpg avec le nom réel, sans remplacer l’extension par une autre. Enfin, confirmez que le fichier fourni est bien présent et qu’il n’est pas vide.
À retenir
- L’élément img affiche une image à l’emplacement où il est placé dans le document.
- L’attribut src indique le fichier image à charger.
- Depuis index.html, assets/festival-scene.jpg désigne le fichier situé dans le dossier assets.
- Vérifiez le nom, l’extension et l’emplacement du fichier si l’image ne s’affiche pas.
Dans la prochaine leçon, vous apprendrez à rédiger un texte alternatif utile pour les personnes qui ne peuvent pas percevoir l’image.