Exercices corrigés HTML et CSS type examen

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Agenda des ateliers – Médiathèque des Tilleuls</title>
    <meta name="description" content="Les ateliers gratuits de la médiathèque des Tilleuls : dates, public et places restantes. Inscription en ligne ou à l'accueil.">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <a class="lien-evitement" href="#contenu">Aller au contenu</a>

    <header>
      <a href="index.html"><img src="images/logo.svg" alt="Médiathèque des Tilleuls – accueil" width="180" height="48"></a>
      <nav aria-label="Menu principal">
        <ul>
          <li><a href="index.html">Accueil</a></li>
          <li><a href="agenda.html" aria-current="page">Agenda</a></li>
          <li><a href="catalogue.html">Catalogue</a></li>
          <li><a href="infos.html">Infos pratiques</a></li>
        </ul>
      </nav>
    </header>

    <main id="contenu">
      <h1>Agenda des ateliers</h1>
      <p>Tous les ateliers sont gratuits, sur inscription en ligne ou à l'accueil.</p>

      <table>
        <caption>Ateliers de juin 2026</caption>
        <thead>
          <tr>
            <th scope="col">Atelier</th>
            <th scope="col">Date</th>
            <th scope="col">Public</th>
            <th scope="col">Places restantes</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Initiation à l'ordinateur</th>
            <td><time datetime="2026-06-03T10:00">3 juin, 10 h</time></td>
            <td>Adultes</td>
            <td>2</td>
          </tr>
          <tr>
            <th scope="row">Club lecture ados</th>
            <td><time datetime="2026-06-06T14:30">6 juin, 14 h 30</time></td>
            <td>12 à 17 ans</td>
            <td>Complet</td>
          </tr>
          <tr>
            <th scope="row">Démarches en ligne</th>
            <td><time datetime="2026-06-10T10:00">10 juin, 10 h</time></td>
            <td>Adultes</td>
            <td>6</td>
          </tr>
        </tbody>
      </table>
    </main>

    <aside>
      <h2>À ne pas manquer</h2>
      <p>Festival « Lire en été », du 1<sup>er</sup> au 15 juillet.</p>
    </aside>

    <footer>
      <address>Médiathèque des Tilleuls, 12 rue des Écoles – <a href="tel:+33123456789">01 23 45 67 89</a></address>
      <ul>
        <li><a href="mentions-legales.html">Mentions légales</a></li>
        <li><a href="donnees-personnelles.html">Données personnelles</a></li>
        <li><a href="accessibilite.html">Accessibilité : partiellement conforme</a></li>
      </ul>
    </footer>
  </body>
</html>

Les points qui comptent : lang, charset, viewport, un <title> et une description propres à la page ; un seul <h1> ; le tableau avec caption, th et scope (le nom de l'atelier est l'en-tête de sa ligne) ; « Complet » écrit en toutes lettres, pas seulement signalé par une couleur ; aria-current="page" sur le lien de l'agenda. L'<aside> est placé ici hors du <main>, comme une colonne de la page : les deux placements sont acceptés si tu les justifies.

<form action="adhesion.php" method="post">
  <p>Les champs marqués « (obligatoire) » doivent être remplis.</p>

  <fieldset>
    <legend>Civilité (facultatif)</legend>
    <input type="radio" id="civ-mme" name="civilite" value="mme">
    <label for="civ-mme">Madame</label>
    <input type="radio" id="civ-m" name="civilite" value="m">
    <label for="civ-m">Monsieur</label>
    <input type="radio" id="civ-np" name="civilite" value="" checked>
    <label for="civ-np">Non précisé</label>
  </fieldset>

  <label for="prenom">Prénom (obligatoire)</label>
  <input type="text" id="prenom" name="prenom" required maxlength="50" autocomplete="given-name">

  <label for="nom">Nom (obligatoire)</label>
  <input type="text" id="nom" name="nom" required maxlength="50" autocomplete="family-name">

  <label for="email">Adresse e-mail (obligatoire)</label>
  <input type="email" id="email" name="email" required autocomplete="email">

  <label for="cp">Code postal, 5 chiffres (obligatoire)</label>
  <input type="text" id="cp" name="cp" required inputmode="numeric" pattern="[0-9]{5}"
         autocomplete="postal-code">

  <label for="formule">Formule (obligatoire)</label>
  <select id="formule" name="formule" required>
    <option value="">-- Choisir une formule --</option>
    <option value="individuelle">Individuelle</option>
    <option value="famille">Famille</option>
    <option value="etudiant">Étudiant</option>
  </select>

  <input type="checkbox" id="reglement" name="reglement" value="oui" required>
  <label for="reglement">J'accepte le <a href="reglement-interieur.html">règlement intérieur</a> (obligatoire)</label>

  <button type="submit">Envoyer ma demande d'adhésion</button>

  <p class="rgpd">Vos données servent à gérer votre adhésion et sont conservées tant que
  vous êtes adhérent, puis un an. <a href="donnees-personnelles.html">Vos données et vos droits</a>.</p>
</form>

La première <option> a une valeur vide : avec required, le navigateur refuse l'envoi tant qu'une vraie formule n'est pas choisie. La civilité est facultative et propose « Non précisé » : on ne force pas une personne à répondre à une question non nécessaire. Côté serveur, adhesion.php revérifie tout, y compris que formule vaut bien une des trois valeurs autorisées.

Spécificités : a (0,0,1) ; .menu a (0,1,1) ; #menu .lien (1,1,0) ; .menu .lien.actif (0,3,0) ; nav a.actif (0,1,2) ; .lien (0,1,0) mais !important.

• Couleur : les trois liens ont la classe lien, et color: orange !important passe devant toutes les déclarations normales, y compris l'attribut style du lien Contact. Les trois liens sont orange.
• Taille : Accueil et Contact n'ont que a { font-size: 1rem } : 1rem. Agenda reçoit trois déclarations : 1rem (0,0,1), 1.25rem (0,3,0) et 1.125rem (0,1,2). (0,3,0) bat (0,1,2) en deuxième colonne : 1,25rem.

Sans le !important, Accueil serait vert (#menu .lien, (1,1,0)), Agenda aussi (l'id bat les trois classes), Contact violet (l'attribut style passe avant toute feuille de style). Ce !important est un bon exemple de ce qu'il ne faut pas faire : il écrase même la couleur du lien actif.

<article class="carte">
  <img class="carte__image" src="images/atelier-initiation.webp" alt="" width="640" height="360">
  <div class="carte__corps">
    <p class="carte__etiquette">Numérique</p>
    <h3 class="carte__titre">Initiation à l'ordinateur</h3>
    <p class="carte__date"><time datetime="2026-06-03T10:00">Mercredi 3 juin, 10 h</time></p>
    <p>Allumer, naviguer, envoyer un e-mail : les premiers pas, à votre rythme.</p>
    <div class="carte__pied">
      <p>2 places</p>
      <a class="bouton" href="inscription.html?atelier=initiation">S'inscrire<span class="visuellement-masque"> à l'initiation à l'ordinateur</span></a>
    </div>
  </div>
</article>

.carte {
  display: flex;
  flex-direction: column;
  max-width: 20rem;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
  overflow: hidden;                 /* l'image suit les coins arrondis */
}

.carte__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;                /* recadre l'image sans la déformer */
}

.carte__corps {
  display: flex;
  flex-direction: column;
  flex: 1;                          /* le corps prend toute la hauteur restante */
  gap: 0.5rem;
  padding: 1rem;
}

.carte__corps p,
.carte__titre {
  margin: 0;
}

.carte__etiquette {
  align-self: flex-start;           /* l'étiquette garde sa largeur */
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background-color: #0f766e;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.carte__pied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;                 /* pousse le pied en bas de la carte */
}

.bouton {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background-color: #0f766e;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

Les choix à savoir justifier : alt="" parce que l'image illustre sans informer (le titre dit tout) ; un lien et non un bouton, parce que « S'inscrire » mène à une autre page ; la fin du texte du lien masquée visuellement, pour que le lien soit explicite dans la liste des liens ; margin-top: auto dans une colonne flex pour coller le pied en bas ; object-fit: cover avec aspect-ratio pour un cadrage identique sur toutes les cartes. L'étiquette « Numérique » est écrite en majuscules par le CSS, pas dans le HTML : un lecteur d'écran ne l'épellera pas.

<section class="contenu">
  <h2>Ateliers de la semaine</h2>
  <div class="grille-ateliers">
    <article class="carte">…</article>
    <!-- cinq autres cartes -->
  </div>
</section>

.contenu {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.grille-ateliers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: 1.5rem;
}

.grille-ateliers .carte {
  max-width: none;          /* la carte suit la largeur de sa colonne */
}

Aucune media query : auto-fill et minmax() calculent le nombre de colonnes. Le min(18rem, 100%) évite qu'une colonne de 18rem déborde sur un écran plus étroit que 18rem + les marges (un vieux téléphone de 320 px, ou un zoom à 200 %). Les cartes ont la même hauteur grâce au stretch par défaut de Grid, et leur bouton reste en bas grâce au margin-top: auto de l'exercice 4.

Validité et structure

1. Pas de <!DOCTYPE html> : mode de compatibilité. L'ajouter en première ligne.
2. Pas de <meta charset="utf-8"> : accents à risque. L'ajouter en tête du <head>.
3. Pas de balise viewport : page minuscule sur mobile.
4. Des <div class="header"> et <div class="footer"> à la place de <header>, <main> et <footer>.

Accessibilité

5. Pas de lang="fr" sur <html>.
6. Images sans alt : alt="Médiathèque des Tilleuls" pour le logo (et un lien vers l'accueil), une description ou alt="" pour la photo.
7. Pas de <h1>, et un <h3> en premier titre : <h1>Bienvenue à la médiathèque des Tilleuls</h1>.
8. Texte #999 sur blanc : contraste de 2,85:1, sous le seuil de 4,5:1. Prendre au moins #767676, idéalement #1f2937.
9. font-size: 12px : trop petit et en pixels. Écrire 1rem.
10. outline: none au focus : la navigation au clavier devient impossible à suivre. Supprimer la règle, ou la remplacer par un :focus-visible bien visible.
11. L'information « ouvert aux enfants » est donnée par la couleur seule : l'écrire (« Atelier ouvert aux enfants dès 8 ans »).
12. Lien « cliquez ici » : « Inscrivez-vous aux ateliers ».
13. Police décorative Lobster pour tout le texte : peu lisible en texte courant ; la garder pour le logo ou les grands titres.

Référencement et performance

14. <title>Accueil</title> : titre unique et descriptif, « Médiathèque des Tilleuls : livres, ateliers et jeux ».
15. Pas de meta description ; la meta keywords est ignorée par Google, la supprimer.
16. Photo en PNG de 4 000 px de large, sans hauteur : la convertir en WebP, la redimensionner, proposer un srcset, déclarer width et height dans les proportions réelles (sinon l'image est déformée ou la page saute).

Droit

17. Police chargée depuis Google Fonts : transfert de l'adresse IP des visiteurs à Google. Héberger la police sur le site.
18. Pas de liens vers les mentions légales, la politique de confidentialité et la déclaration d'accessibilité (obligatoire pour un site public) dans le pied de page.

Dix problèmes suffisaient ; en trouver plus de quinze, c'est un audit de professionnel.

1. « L'identité de l'éditeur, ici la commune pour sa médiathèque, avec son adresse et son téléphone ; le nom du directeur de la publication, le maire ; le nom, l'adresse et le téléphone de l'hébergeur. C'est l'article 1-1 de la LCEN, depuis la loi SREN de 2024. J'ai ajouté les renvois vers la politique de confidentialité et la déclaration d'accessibilité, et le lien est dans le pied de toutes les pages. »
2. « J'ai déclaré le site et son sitemap dans la Search Console. J'ai comparé les impressions, les clics et le taux de clic de la page des ateliers sur deux trimestres, avant et après la réécriture des titres et des descriptions : le taux de clic est passé de 1,5 % à 4 %. J'ai les captures datées dans mon portfolio. »
3. « HTTPS chiffre les échanges, notamment les données du formulaire d'inscription, et prouve au visiteur qu'il est sur le bon site ; c'est aussi un signal pour Google. L'hébergeur fournit un certificat Let's Encrypt renouvelé automatiquement ; j'ai ajouté la redirection 301 de HTTP vers HTTPS et vérifié qu'il ne restait aucun contenu mixte. »
4. « Il est partiellement conforme au RGAA. J'ai vérifié les points principaux : structure des titres, alternatives des images, étiquettes des formulaires, contrastes, navigation au clavier, et je l'ai testé avec NVDA. Les outils automatiques comme Lighthouse ne suffisent pas, ils ne détectent qu'une partie des problèmes. La déclaration d'accessibilité liste ce qui reste à corriger. »
5. « Parce que le site ne dépose aucun traceur soumis au consentement : les polices sont hébergées sur le site, les vidéos sont des liens et non des contenus intégrés, et l'outil de statistiques est configuré dans les conditions où la CNIL l'exempte de consentement. Pas de traceur, donc pas de bandeau : c'est plus respectueux des visiteurs et plus simple à maintenir. »

1. Faux : c'est valide, mais la bonne pratique reste un seul <h1>, qui annonce le sujet de la page ; plusieurs <h1> brouillent le plan pour les lecteurs d'écran.
2. Vrai : il dit « image décorative, ignore-la ».
3. Faux : même rendu par défaut, mais <strong> exprime une importance, <b> non.
4. Faux : la validation côté client se contourne ; seul le serveur protège.
5. Faux : border-box inclut le padding et la bordure, jamais la marge.
6. Vrai : la spécificité se compare colonne par colonne, et l'identifiant est dans la première.
7. Faux : il agit sur l'axe principal, vertical avec flex-direction: column.
8. Faux : c'est l'image à charger en priorité (fetchpriority="high") ; le chargement différé dégrade le LCP.
9. Faux : elle influence le taux de clic, pas le classement.
10. Vrai : tout éditeur d'un service de communication au public en ligne doit s'identifier (un particulier non professionnel peut se limiter à indiquer son hébergeur).