Antalaha Propre : site multi-pages d'une association

index.html · 6.1 Ko

<!DOCTYPE html>
<!--
  =====================================================================
  index.html : page d'ACCUEIL du site de l'association « Antalaha Propre »
  =====================================================================
  Rôle : première page du site. Les autres pages sont dans le dossier
  pages/ (actions.html, agenda.html, contact.html).
  Fichiers liés :
    - css/style.css      : feuille de style partagée par TOUTES les pages
    - css/impression.css : règles pour l'impression papier
    - medias/*.svg       : illustrations (versions portrait et paysage)

  CHEMINS RELATIFS : ce fichier est à la racine du site, donc
    css/style.css            = dossier css, à côté de ce fichier
    pages/actions.html       = fichier dans le sous-dossier pages
  Depuis un fichier de pages/, il faudra remonter d'un niveau avec « ../ »
  (ex. ../css/style.css). C'est la source d'erreur la plus fréquente !

  Remarque : le HTML n'a pas d'« include ». L'en-tête, la navigation et
  le pied de page sont donc RECOPIÉS dans chaque page. Seul le lien
  aria-current="page" change d'une page à l'autre.
-->
<html lang="fr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Accueil – Antalaha Propre</title>
  <meta name="description" content="Antalaha Propre : association de nettoyage des plages et de sensibilisation à Antalaha.">

  <!-- color-scheme : indique que la page gère le clair et le sombre
       (le navigateur adapte aussi ses éléments : barres de défilement...). -->
  <meta name="color-scheme" content="light dark">

  <!-- Feuille de style principale. -->
  <link rel="stylesheet" href="css/style.css">
  <!-- Feuille d'impression : media="print" = appliquée seulement sur papier / PDF. -->
  <link rel="stylesheet" href="css/impression.css" media="print">
</head>

<body>

  <!-- LIEN D'ÉVITEMENT : premier élément de la page. Invisible, il apparaît
       au premier appui sur Tab. Il saute l'en-tête pour aller au contenu
       (utile à qui navigue au clavier ou avec un lecteur d'écran).
       La cible est <main id="contenu"> plus bas. -->
  <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>

      <!-- NAVIGATION ACCESSIBLE : <nav> + aria-label + liste <ul>.
           aria-current="page" marque le lien de la page où l'on se trouve :
           un lecteur d'écran dit « page courante », et le CSS le met en
           évidence (voir a[aria-current="page"] dans style.css). -->
      <nav class="nav" aria-label="Navigation principale">
        <ul class="nav__liste">
          <li><a href="index.html" aria-current="page">Accueil</a></li>
          <li><a href="pages/actions.html">Actions</a></li>
          <li><a href="pages/agenda.html">Agenda</a></li>
          <li><a href="pages/contact.html">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- tabindex="-1" : permet de donner le focus à <main> par programme
       (par le lien d'évitement), sans l'ajouter à l'ordre de Tab. -->
  <main id="contenu" tabindex="-1">

    <h1>Ensemble, gardons Antalaha propre</h1>

    <!-- IMAGE AVEC « ART DIRECTION » : <picture>.
         Le navigateur parcourt les <source> de haut en bas et prend la
         première dont la condition media est vraie ; sinon il utilise
         l'<img> de secours.
           - écran ≤ 599 px (téléphone, tenu en hauteur) : image PORTRAIT ;
           - sinon (tablette, ordinateur) : image PAYSAGE.
         Ce n'est pas qu'un redimensionnement : on charge une image
         DIFFÉRENTE, mieux cadrée pour la forme de l'écran.
         width/height : dimensions réelles de chaque fichier. Elles
         permettent au navigateur de réserver la bonne place avant le
         chargement (pas de saut de page). Une image au-dessus de la ligne
         de flottaison (visible tout de suite) ne doit PAS avoir
         loading="lazy" : on veut qu'elle se charge en premier. -->
    <figure class="hero">
      <picture>
        <source media="(max-width: 599px)"
                srcset="medias/antalaha-plage-palmiers-portrait.svg"
                width="900" height="1600">
        <img src="medias/antalaha-plage-palmiers-paysage.svg"
             width="1600" height="900"
             alt="Une plage de sable bordée de palmiers à Antalaha, propre et ensoleillée">
      </picture>
      <figcaption>Notre objectif : des plages comme celle-ci, toute l'année.</figcaption>
    </figure>

    <p class="chapeau">Antalaha Propre est une association de bénévoles qui
      nettoie les plages, trie les déchets et sensibilise les habitants,
      les écoles et les commerçants.</p>

    <h2>Qui sommes-nous ?</h2>
    <p>Née en 2020 de l'envie de quelques voisins, l'association réunit
      aujourd'hui plus de 150 bénévoles. Chaque mois, nous ramassons
      plusieurs centaines de kilos de plastique sur le littoral.</p>

    <h2>En bref</h2>
    <!-- <ul> de cartes : une liste, car ce sont des éléments équivalents. -->
    <ul class="cartes">
      <li class="carte">
        <div class="carte__corps">
          <h3>Nettoyages</h3>
          <p>Un grand nettoyage de plage chaque mois.</p>
          <p><a href="pages/actions.html">Voir nos actions</a></p>
        </div>
      </li>
      <li class="carte">
        <div class="carte__corps">
          <h3>Prochain rendez-vous</h3>
          <p>Retrouvez les dates dans l'agenda.</p>
          <p><a href="pages/agenda.html">Ouvrir l'agenda</a></p>
        </div>
      </li>
      <li class="carte">
        <div class="carte__corps">
          <h3>Rejoindre</h3>
          <p>Des gants, des sacs et de la bonne humeur : venez !</p>
          <p><a href="pages/contact.html">Nous contacter</a></p>
        </div>
      </li>
    </ul>

  </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>