UA7 : Programmation en HTML(suite et fin)

# UA7 : Programmation en HTML(suite et fin) ## Objectifs et prérequis Ce chapitre vise à permettre à l’élève de maîtriser les techniques fondamentales d’insertion de liens et d’images dans une page web HTML, puis de les combiner pour produire une page web complète, fonctionnelle et structurée. À l’issue de ce chapitre, l’élève sera capable de : - Créer des liens hypertexte internes et externes avec la balise `<a>` ; - Insérer des images avec la balise `<img>` en maîtrisant les attributs essentiels (`src`, `alt`, `width`, `height`) ; - Combiner liens et images pour créer des éléments interactifs (images cliquables) ; - Construire une page web cohérente intégrant texte, liens et images selon une structure sémantique de base ; - Respecter les bonnes pratiques d’accessibilité et de lisibilité du code HTML. **Prérequis** : Maîtrise des bases de HTML (structure minimale d’une page : `<!DOCTYPE html>`, `<html>`, `<head>`, `<body>`), connaissance des balises de texte (`<h1>` à `<h6>`, `<p>`, `<ul>`, `<ol>`, `<li>`), et compréhension du rôle des attributs dans les balises HTML. --- ## I. Insertion des liens en HTML ### Définition et rôle des liens hypertexte Un lien hypertexte (ou hyperlien) permet de naviguer d’une ressource web à une autre (une autre page, une section de la même page, un fichier, une adresse e-mail, etc.) lorsqu’on clique dessus. En HTML, il est créé avec la balise d’ancrage `<a>` (pour *anchor*). > **À retenir** : La balise `<a>` définit un lien hypertexte. Son attribut obligatoire `href` spécifie la destination du lien (URL ou ancre interne). ### Syntaxe de base ```html <a href="destination">Texte du lien</a> ``` - `href` : attribut obligatoire contenant l’URL de destination (ex : `"https://example.com"`, `"page2.html"`, `"#section1"`). - Le contenu entre `<a>` et `</a>` est le texte cliquable (ou une image, voir plus loin). ### Types de liens #### 1. Liens externes Pointent vers une ressource sur un autre domaine. **Exemple résolu** : Créer un lien vers le site du Ministère de l’Éducation du Cameroun. ```html <a href="https://www.mineduc.cm">Visiter le site du MINEDUC</a> ``` #### 2. Liens internes Pointent vers une autre page du même site web (dans le même dossier ou un sous-dossier). **Exemple résolu** : On a deux pages : `index.html` et `contact.html` dans le même dossier. Dans `index.html` : ```html <a href="contact.html">Aller à la page de contact</a> ``` Dans `contact.html` : ```html <a href="index.html">Retour à l'accueil</a> ``` #### 3. Liens vers une ancre interne (même page) Permettent de sauter à une section spécifique de la même page. **Étapes** : 1. Définir une ancre avec l’attribut `id` sur un élément cible. 2. Créer un lien dont la valeur de `href` est `#` suivie de la valeur de l’`id`. **Exemple résolu** : Dans une longue page, créer un lien vers la section « À propos ». Dans le `<body>` : ```html <h2 id="a-propos">À propos</h2> <p>Ce site présente les activités du club informatique du lycée.</p> <!-- Plus haut dans la page --> <a href="#a-propos">Voir la section À propos</a> ``` > **À retenir** : Pour un lien interne vers une ancre, utilisez `href="#id"` où `id` est la valeur de l’attribut `id` de l’élément cible. L’attribut `id` doit être unique dans la page. #### 4. Liens vers une adresse e-mail Ouvrent le client de messagerie par défaut. **Syntaxe** : `href="mailto:adresse@example.com?subject=Objet&body=Message"` **Exemple résolu** : Lien pour envoyer un e-mail au webmaster. ```html <a href="mailto:webmaster@lycee.cm?subject=Question%20sur%20le%20site&body=Bonjour,%20je%20souhaite%20poser%20une%20question.%20">Contacter le webmaster</a> ``` > **À retenir** : Dans un lien `mailto:`, les espaces dans le sujet ou le corps doivent être remplacés par `%20` (encodage URL). #### 5. Liens vers un fichier Permettent de télécharger un document (PDF, image, etc.). **Exemple résolu** : Lien pour télécharger le règlement intérieur. ```html <a href="documents/reglement.pdf" download>Télécharger le règlement intérieur (PDF)</a> ``` L’attribut `download` suggère au navigateur de télécharger le fichier plutôt que de l’afficher. > **À retenir** : L’attribut `download` sur `<a>` indique que la ressource doit être téléchargée. Il peut prendre une valeur optionnelle pour proposer un nom de fichier par défaut. ### Propriétés importantes - Un lien peut entourer du texte, une image, ou d’autres éléments en ligne (mais pas des éléments de bloc comme `<div>` ou `<p>` dans HTML4/XHTML ; en HTML5, c’est autorisé mais moins sémantique). - Par défaut, les liens sont soulignés et bleus (non visités) ou violets (visités). Cela peut être modifié avec CSS (non au programme ici). - Le texte du lien doit être descriptif : éviter « cliquez ici », privilégier « Consulter le programme officiel ». ### Exercices d’application corrigés **Exercice 1** : Dans la page `accueil.html`, créer : - Un lien externe vers `https://www.onuch.org` avec le texte « Plateforme OnBuch ». - Un lien interne vers `cours.html` dans le même dossier avec le texte « Accéder aux cours ». - Un lien vers une ancre `#contact` située plus bas dans la même page avec le texte « Nous contacter ». **Corrigé** : ```html <!-- Dans accueil.html --> <a href="https://www.onuch.org">Plateforme OnBuch</a><br> <a href="cours.html">Accéder aux cours</a><br> <a href="#contact">Nous contacter</a> <!-- Plus bas dans la même page --> <h2 id="contact">Nous contacter</h2> <p>Email : info@onuch.org</p> ``` **Exercice 2** : Créer un lien qui ouvre un nouveau message e-mail destiné à `prof@lycee.cm` avec comme sujet « Devoir HTML » et comme corps « Bonjour Monsieur, voici mon devoir. ». **Corrigé** : ```html <a href="mailto:prof@lycee.cm?subject=Devoir%20HTML&body=Bonjour%20Monsieur,%20voici%20mon%20devoir.">Envoyer le devoir par e-mail</a> ``` **Exercice 3** : Dans une page comportant une section `<h2 id="references">Références bibliographiques</h2>`, créer un lien en haut de page menant à cette section. **Corrigé** : ```html <a href="#references">Voir les références</a> <!-- Plus bas --> <h2 id="references">Références bibliographiques</h2> <ul> <li>W3C. HTML Living Standard.</li> </ul> ``` --- ## II. Insertion des images en HTML ### Définition et rôle des images Une image permet d’enrichir visuellement une page web. Elle est insérée avec la balise vide `<img>` (pas de balise de fermeture en HTML5). > **À retenir** : La balise `<img>` insère une image. Ses attributs essentiels sont `src` (source), `alt` (texte alternatif), et optionnellement `width` et `height`. ### Syntaxe de base ```html <img src="chemin/vers/image.jpg" alt="Description de l'image"> ``` - `src` : attribut obligatoire spécifiant l’URL ou le chemin relatif vers le fichier image. - `alt` : attribut obligatoire fournissant une description textuelle de l’image (pour l’accessibilité, le référencement, et l’affichage si l’image ne charge pas). - `width` et `height` : attributs optionnels spécifiant la largeur et la hauteur en pixels (ou en pourcentage, mais pixels recommandés ici pour éviter les déformations). ### Formats d’image supportés Les formats courants sont : - **JPEG** (`.jpg`, `.jpeg`) : idéal pour les photographies, compression avec perte. - **PNG** (`.png`) : idéal pour les logos, icônes, images avec transparence, compression sans perte. - **GIF** (`.gif`) : utilisé pour les animations simples ou images à peu de couleurs. - **SVG** (`.svg`) : format vectoriel, idéal pour les logos et icônes scalables (non obligatoire au programme mais bonne pratique). > **À retenir** : Choisissez le format adapté : JPEG pour les photos, PNG pour les images avec texte ou transparence, SVG pour les logos vectoriels. ### Chemins d’accès aux images - **Chemin relatif** : relatif à la localisation du fichier HTML. - Même dossier : `image.jpg` - Sous-dossier `images` : `images/logo.png` - Dossier parent : `../banniere.jpg` - **Chemin absolu** : URL complète (ex : `https://example.com/photo.jpg`) — à éviter pour les ressources locales (risque de rupture si le site change de domaine). **Exemple résolu** : Structure du projet : ``` /site-web index.html /images logo.png photo.jpg ``` Dans `index.html` : ```html <img src="images/logo.png" alt="Logo du lycée"> <img src="images/photo.jpg" alt="Photo de la classe de seconde lors du projet informatique"> ``` > **À retenir** : Utilisez des chemins relatifs pour les ressources locales afin de garantir la portabilité du site web. ### Attributs `width` et `height` Ils permettent de contrôler la taille affichée de l’image. Il est recommandé de les spécifier pour éviter le « layout shift » (saut de mise en page) pendant le chargement. **Exemple résolu** : Afficher une vignette de 150px de large. ```html <img src="images/photo.jpg" alt="Photo de classe" width="150" height="112"> ``` > **À retenir** : Spécifiez `width` et `height` en pixels pour réserver l’espace nécessaire et améliorer la performance perçue du chargement de la page. ### Texte alternatif (`alt`) : importance L’attribut `alt` est crucial pour : - L’accessibilité : les lecteurs d’écran le lisent aux utilisateurs malvoyants. - Le référencement (SEO) : les moteurs de recherche l’utilisent pour comprendre le contenu de l’image. - Le fallback : affiché si l’image ne peut pas être chargée. **Bonnes pratiques pour `alt`** : - Décrire le contenu et la fonction de l’image. - Laisser vide (`alt=""`) uniquement si l’image est purement décorative (non recommandé ici sans justification). - Ne pas répéter le texte environnant. - Éviter les expressions comme « image de » ou « photo de » sauf si nécessaire au contexte. **Exemples** : - Image d’un bouton « Envoyer » : `alt="Envoyer le formulaire"` - Photo d’un groupe d’élèves : `alt="Élèves de seconde travaillant sur un projet HTML en salle informatique"` - Logo de l’établissement : `alt="Logo du Lycée Technique de Yaoundé"` > **À retenir** : L’attribut `alt` doit toujours être présent et fournir une description significative de l’image, sauf si elle est purement décorative (alors `alt=""`). ### Images comme liens On peut placer une balise `<img>` à l’intérieur d’une balise `<a>` pour rendre l’image cliquable. **Syntaxe** : ```html <a href="destination"> <img src="chemin/image.jpg" alt="Description"> </a> ``` **Exemple résolu** : Logo cliquable menant à l’accueil du site. ```html <a href="index.html"> <img src="images/logo.png" alt="Logo du lycée - Retour à l'accueil"> </a> ``` > **À retenir** : Pour créer une image cliquable, enveloppez la balise `<img>` dans une balise `<a>`. L’attribut `alt` de l’image doit décrire la fonction du lien (ex : « Retour à l'accueil ») plutôt que seulement le contenu de l’image. ### Exercices d’application corrigés **Exercice 1** : Dans la page `index.html`, insérer : - Une image `banniere.jpg` située dans le dossier `images`, avec un texte alternatif décrivant la bannière du site montrant des élèves en travaux pratiques. - La même image redimensionnée à 800 pixels de large (garder les proportions en ajustant la hauteur si nécessaire, mais on fixe seulement la largeur ici pour simplifier — en pratique, on ajuste les deux ou on laisse le navigateur calculer la hauteur si seule la largeur est donnée, mais ici on spécifie les deux pour éviter l’ambiguïté). - Une version cliquable de cette image menant à la page `galerie.html`. **Corrigé** (on suppose que la hauteur originale est 300px pour 800px de large, donc on garde les proportions) : ```html <!-- Image simple --> <img src="images/banniere.jpg" alt="Bannière du site montrant des élèves de seconde en travaux pratiques informatique" width="800" height="300"> <!-- Image cliquable --> <a href="galerie.html"> <img src="images/banniere.jpg" alt="Voir la galerie des projets élèves" width="800" height="300"> </a> ``` > **Note** : En pratique, si seule la largeur est spécifiée, le navigateur ajuste la hauteur pour garder les proportions. Mais pour cet exercice, on fixe les deux comme demandé. **Exercice 2** : Insérer une image `icone-mail.png` (dans le dossier `images`) devant un lien e-mail, de manière à ce que l’icône soit cliquable et ouvre le client de messagerie. **Corrigé** : ```html <a href="mailto:info@lycee.cm?subject=Demande%20d%27information"> <img src="images/icone-mail.png" alt="Icône e-mail - Nous contacter" width="24" height="24"> </a> <span>info@lycee.cm</span> ``` **Exercice 3** : Pourquoi est-il mauvais de laisser l’attribut `alt` vide (`alt=""`) sur une image qui présente un lien vers une page importante ? Corriger l’exemple suivant : ```html <a href="inscription.html"><img src="images/bouton-inscription.png" alt=""></a> ``` **Corrigé** : L’attribut `alt` vide rend le lien inaccessible aux utilisateurs de lecteurs d’écran : ils ne savent pas quelle action l’image déclenche. ```html <a href="inscription.html"> <img src="images/bouton-inscription.png" alt="S'inscrire au club informatique" width="180" height="50"> </a> ``` --- ## III. Production d’une page Web intégrant les liens et les images ### Objectif Produire une page web complète, structurée et fonctionnelle qui combine : - Du texte structuré (titres, paragraphes, listes) ; - Des liens (externes, internes, vers ancre, e-mail) ; - Des images (avec `alt`, dimensions, éventuellement cliquables). Cette page doit respecter une structure sémantique de base et les bonnes pratiques d’accessibilité. ### Étapes de production 1. **Définir le contenu et la structure** : planifier les sections (accueil, présentation, projets, contact). 2. **Écrire la structure HTML de base** : `<!DOCTYPE html>`, `<html>`, `<head>`, `<body>`. 3. **Structurer le contenu avec des balises sémantiques** : `<header>`, `<nav>`, `<main>`, `<section>`, `<footer>` (optionnel mais encouragé). 4. **Insérer le texte** : titres (`<h1>` à `<h6>`), paragraphes (`<p>`), listes. 5. **Ajouter les images** : avec `src`, `alt`, `width`, `height`. 6. **Ajouter les liens** : selon les types étudiés. 7. **Vérifier l’accessibilité** : présence de `alt`, lisibilité des liens, contraste implicite (non vérifié ici mais à garder à l’esprit). 8. **Tester** : ouvrir dans un navigateur, vérifier que tous les liens et images fonctionnent. ### Exemple résolu : Page d’accueil d’un club informatique scolaire **Nom du fichier** : `index.html` **Dossier du projet** : ``` /club-informatique index.html /images logo.png photo-equipe.jpg banniere-projet.jpg cours.html galerie.html contact.html ``` **Contenu de `index.html`** : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Club Informatique - Lycée Technique de Yaoundé</title> </head> <body> <!-- En-tête avec logo cliquable --> <header> <a href="index.html"> <img src="images/logo.png" alt="Logo du Club Informatique - Retour à l'accueil" width="150" height="50"> </a> <h1>Club Informatique</h1> <p>Lycée Technique de Yaoundé - Section Seconde</p> </header> <!-- Navigation principale --> <nav> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="cours.html">Cours et ressources</a></li> <li><a href="galerie.html">Galerie des projets</a></li> <li><a href="contact.html">Nous contacter</a></li> </ul> </nav> <!-- Contenu principal --> <main> <section id="presentation"> <h2>Présentation du club</h2> <p> Le club informatique réunit des élèves de seconde passionnés par le numérique. Nous apprenons à créer des sites web, à programmer et à utiliser les outils numériques de manière responsable. </p> <img src="images/photo-equipe.jpg" alt="Équipe du club informatique lors d'une séance de travail en salle informatique" width="400" height="267"> </section> <section id="projets"> <h2>Nos projets récents</h2> <p> Découvrez quelques-uns de nos travaux réalisés cette année : </p> <ul> <li><a href="https://scratch.mit.edu">Animations Scratch</a> (lien externe)</li> <li><a href="galerie.html#webdesign">Conception de sites web</a> (lien interne vers ancre)</li> <li><a href="documents/rapport-final.pdf" download>Rapport annuel 2023-2024 (PDF)</a></li> </ul> <img src="images/banniere-projet.jpg" alt="Bannière montrant des élèves présentant leur projet de site web lors de la foire scientifique" width="500" height="200"> </section> <section id="contact"> <h2>Nous contacter</h2> <p> Vous souhaitez nous rejoindre ou nous poser une question ? Écrivez-nous : </p> <p> <a href="mailto:clubinfo@lycee.cm?subject=Adhesion%20au%20club&body=Bonjour,%20je%20souhaite%20obtenir%20plus%20d%27informations%20sur%20le%20club%20informatique."> <img src="images/icone-mail.png" alt="Icône e-mail - Nous écrire" width="24" height="24"> </a> <span> clubinfo@lycee.cm</span> </p> <p>Ou retrouvez-nous en salle B103 chaque mercredi de 15h à 16h.</p> </section> </main> <!-- Pied de page --> <footer> <p>&copy; 2024 Club Informatique - Lycée Technique de Yaoundé. Tous droits réservés.</p> <p><a href="https://www.onuch.org">Plateforme OnBuch</a> | <a href="mentions-legales.html">Mentions légales</a></p> </footer> </body> </html> ``` ### Analyse de l’exemple - **Structure sémantique** : utilisation de `<header>`, `<nav>`, `<main>`, `<section>`, `<footer>` pour une meilleure lisibilité et accessibilité. - **Liens** : - Externes : vers Scratch et OnBuch. - Internes : vers `cours.html`, `galerie.html`, `contact.html`. - Vers ancre : `galerie.html#webdesign` (supposé exister dans `galerie.html`). - E-mail : avec `mailto:` et sujet/corps préremplis. - Téléchargement : attribut `download` sur le PDF. - **Images** : - Toutes possèdent `src`, `alt` descriptif, `width` et `height`. - Certaines sont cliquables (logo, icône e-mail). - Chemins relatifs utilisés. - **Accessibilité** : `alt` présents et significatifs, liens descriptifs, structure logique. ### Exercices d’application corrigés **Exercice 1** : Créer une page `accueil.html` pour un lycée présentant : - Un en-tête avec le nom du lycée et son logo cliquable (menant à l’accueil). - Une section « Présentation » avec une image du bâtiment scolaire et un texte descriptif. - Une section « Formations » avec une liste de 3 filières (ex : Scientifique, Littéraire, Technique), chacune liée à une page détaillée (`sci.html`, `lit.html`, `tech.html`) dans le même dossier. - Une section « Contact » avec un lien e-mail vers `contact@lycee.cm` (sujet : « Demande d'information »), accompagné d’une icône e-mail cliquable. - Un pied de page avec l’année courante et un lien vers les mentions légales. **Corrigé** : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Lycée d'Excellence de Bafoussam</title> </head> <body> <header> <h1>Lycée d'Excellence de Bafoussam</h1> <a href="accueil.html"> <img src="images/logo-lycee.png" alt="Logo du Lycée d'Excellence de Bafoussam - Retour à l'accueil" width="120" height="40"> </a> </header> <section> <h2>Présentation</h2> <p> Fondé en 1980, le Lycée d'Excellence de Bafoussam forme les élites de demain dans un cadre propice à l'apprentissage et à l'épanouissement personnel. </p> <img src="images/bati-scolaire.jpg" alt="Vue extérieure du bâtiment principal du Lycée d'Excellence de Bafoussam" width="500" height="333"> </section> <section> <h2>Formations</h2> <ul> <li><a href="sci.html">Filière Scientifique</a></li> <li><a href="lit.html">Filière Littéraire</a></li> <li><a href="tech.html">Filière Technique</a></li> </ul> </section> <section> <h2>Contact</h2> <p> Pour toute demande d'information : </p> <p> <a href="mailto:contact@lycee.cm?subject=Demande%20d%27information&body=Bonjour,%20je%20souhaite%20obtenir%20des%20renseignements%20sur%20les%20formations%20proposées."> <img src="images/icone-mail.png" alt="Icône e-mail - Nous contacter" width="24" height="24"> </a> <span> contact@lycee.cm</span> </p> </section> <footer> <p>&copy; 2024 Lycée d'Excellence de Bafoussam</p> <p><a href="mentions-legales.html">Mentions légales</a></p> </footer> </body> </html> ``` **Exercice 2** : Dans la page produite à l’exercice précédent, modifier la section « Formations » pour que chaque item de la liste soit accompagné d’une petite icône spécifique (ex : `icone-science.png`, `icone-lettre.png`, `icone-tech.png`) située dans le dossier `images`, et rendre l’ensemble (icône + texte) cliquable vers la page correspondante. **Corrigé** (on remplace la liste simple par des éléments contenant image et texte dans un lien) : ```html <section> <h2>Formations</h2> <ul> <li> <a href="sci.html"> <img src="images/icone-science.png" alt="Icône représentant la filière scientifique" width="20" height="20"> Filière Scientifique </a> </li> <li> <a href="lit.html"> <img src="images/icone-lettre.png" alt="Icône représentant la filière littéraire" width="20" height="20"> Filière Littéraire </a> </li> <li> <a href="tech.html"> <img src="images/icone-tech.png" alt="Icône représentant la filière technique" width="20" height="20"> Filière Technique </a> </li> </ul> </section> ``` > **À retenir** : Pour rendre un groupe image+texte cliquable, enveloppez-les dans une même balise `<a>`. L’attribut `alt` de l’image doit décrire sa fonction ou son contenu dans ce contexte. **Exercice 3** : Expliquer pourquoi il est préférable d’utiliser des chemins relatifs plutôt que des chemins absolus pour les images et les liens internes d’un site web scolaire hébergé sur une clé USB ou un serveur local. **Corrigé** : Les chemins relatifs garantissent que les ressources restent accessibles même si le dossier du site est déplacé ou copié sur un autre support (clé USB, autre ordinateur). Un chemin absolu comme `C:\site\images\logo.png` ne fonctionnerait pas sur un autre appareil où le chemin est différent. Les chemins relatifs sont donc essentiels pour la portabilité du site. --- ## Synthèse du chapitre - Les liens en HTML sont créés avec la balise `<a>` et l’attribut obligatoire `href`. - Types : externe (`https://...`), interne (`page.html`), ancre interne (`#id`), e-mail (`mailto:`), fichier (`download`). - L’attribut `download` suggère le téléchargement d’une ressource. - Le texte du lien doit être descriptif et accessible. - Les images sont insérées avec la balise vide `<img>`. - Attributs essentiels : `src` (chemin vers l’image), `alt` (description textuelle obligatoire), `width` et `height` (dimensions en pixels recommandées). - Formats courants : JPEG (photos), PNG (logos/transparence), GIF (animations simples), SVG (vectoriel). - Utiliser des chemins relatifs pour la portabilité. - L’attribut `alt` est crucial pour l’accessibilité, le référencement et le fallback. - Une image devient cliquable en l’enveloppant dans une balise `<a>`. - Une page web intégrant liens et images respecte : - Une structure sémantique de base (`<header>`, `<nav>`, `<main>`, `<section>`, `<footer>`). - L’utilisation cohérente de liens et d’images avec leurs attributs appropriés. - Les bonnes pratiques d’accessibilité (`alt` significatif, liens descriptifs). - Le recours à des chemins relatifs pour les ressources locales. --- ## Glossaire - **Balise** : Élément de syntaxe HTML entouré de crochets angulaires (ex : `<p>`, `</a>`) qui définit la structure ou le contenu d’une page web. - **Attribut** : Propriété d’une balise HTML fournissant des informations supplémentaires (ex : `src`, `alt`, `href`). - **Lien hypertexte** : Élément cliquable permettant de naviguer vers une autre ressource web (page, section, fichier, e-mail). - **Ancre interne** : Point d’ancrage dans une page web défini par l’attribut `id`, cible d’un lien de type `#id`. - **Texte alternatif (`alt`)** : Description textuelle d’une image, essentielle pour l’accessibilité et le référencement. - **Chemin relatif** : Chemin vers une ressource exprimé relativement à la localisation du fichier HTML courant (ex : `images/logo.png`). - **Chemin absolu** : URL complète vers une ressource (ex : `https://example.com/image.jpg`), dépendant du domaine et de la structure du serveur. - **Balise vide** : Balise HTML qui ne contient pas de contenu et n’a pas de balise de fermeture (ex : `<img>`, `<br>`). - **Layout shift** : Déplacement inattendu d’éléments pendant le chargement d’une page, souvent dû à des images sans dimensions spécifiées. - **Accessibilité** : Ensemble des pratiques permettant de rendre un contenu web utilisable par des personnes en situation de handicap (ex : malvoyants utilisant un lecteur d’écran). - **SEO (Search Engine Optimization)** : Ensemble des techniques visant à améliorer la visibilité d’un site web dans les résultats des moteurs de recherche. - **Attribut `download`** : Attribut de la balise `<a>` qui suggère au navigateur de télécharger la ressource liée plutôt que de l’afficher.