Antalaha Propre : site multi-pages d'une association

pages/agenda.html · 3.3 Ko

<!DOCTYPE html>
<!--
  =====================================================================
  pages/agenda.html : page « Agenda »
  =====================================================================
  Rôle : liste des prochains rendez-vous de l'association.
  Chemins : on est dans pages/, donc ../css/style.css, ../index.html...
  Nouveauté ici : la balise <time> et la liste ordonnée par date.
  (Dates fictives : modifiez-les librement.)
-->
<html lang="fr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Agenda – Antalaha Propre</title>
  <meta name="description" content="Les prochaines actions d'Antalaha Propre : dates, horaires et lieux de rendez-vous.">
  <meta name="color-scheme" content="light dark">
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="../css/impression.css" media="print">
</head>

<body>
  <a class="lien-evitement" href="#contenu">Aller au contenu principal</a>

  <header class="entete">
    <div class="entete__interieur">
      <a class="entete__nom" href="../index.html">Antalaha Propre</a>
      <nav class="nav" aria-label="Navigation principale">
        <ul class="nav__liste">
          <li><a href="../index.html">Accueil</a></li>
          <li><a href="actions.html">Actions</a></li>
          <li><a href="agenda.html" aria-current="page">Agenda</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main id="contenu" tabindex="-1">
    <h1>Agenda</h1>
    <p class="chapeau">Venez avec des vêtements qui ne craignent rien et de l'eau.</p>

    <!-- <ol> : liste ORDONNÉE (ici, chronologique). -->
    <ol class="agenda">

      <li class="evenement">
        <!-- <time datetime="..."> : le texte est lisible par les humains,
             l'attribut datetime donne la date au format machine
             (AAAA-MM-JJ) que comprennent les moteurs de recherche. -->
        <time class="evenement__date" datetime="2027-01-02">
          <span class="evenement__jour">2</span> janv.
        </time>
        <div>
          <h2>Nettoyage de la plage centrale</h2>
          <p>Samedi, de 7 h à 10 h.</p>
          <p>Rendez-vous devant le marché. Gants et sacs fournis.</p>
        </div>
      </li>

      <li class="evenement">
        <time class="evenement__date" datetime="2027-01-16">
          <span class="evenement__jour">16</span> janv.
        </time>
        <div>
          <h2>Atelier de tri à l'école</h2>
          <p>Samedi, de 9 h à 11 h.</p>
          <p>Pour les enfants de 6 à 12 ans et leurs parents.</p>
        </div>
      </li>

      <li class="evenement">
        <time class="evenement__date" datetime="2027-02-06">
          <span class="evenement__jour">6</span> févr.
        </time>
        <div>
          <h2>Nettoyage de la baie</h2>
          <p>Samedi, de 6 h 30 à 9 h 30.</p>
          <p>En pirogue et à pied. Inscription par téléphone.</p>
        </div>
      </li>
    </ol>

    <p class="note">Besoin d'un renseignement ? <a href="contact.html">Écrivez-nous</a>.</p>
  </main>

  <footer class="pied">
    <p>Antalaha Propre, association fictive créée pour ce tutoriel HTML/CSS.</p>
    <p>Illustrations libres de droits de la médiathèque du Portail Antalaha.</p>
  </footer>
</body>
</html>