Antalaha Propre : site multi-pages d'une association

README.md · 2.8 Ko

# Antalaha Propre (site multi-pages d'une association)

## Cas d'usage
Une association (fictive) de nettoyage des plages veut un petit site de quatre
pages : accueil, actions, agenda, contact. Le site doit être lisible sur
téléphone, agréable en mode sombre, accessible au clavier et imprimable
(l'agenda affiché sur un panneau, par exemple). Aucun JavaScript.

## Arborescence
```
html-association/
├── index.html              accueil (racine du site) : image <picture> portrait/paysage
├── pages/
│   ├── actions.html        les trois actions, cartes avec images lazy-loading
│   ├── agenda.html         rendez-vous (liste ordonnée, balise <time>)
│   └── contact.html        coordonnées + formulaire de démonstration
├── css/
│   ├── style.css           CSS partagé : variables, mode sombre, navigation, composants
│   └── impression.css      règles pour le papier (media="print")
├── medias/                 illustrations SVG (portrait + paysage)
├── site.json               métadonnées pour le portail
└── README.md               ce fichier
```
Les pages de `pages/` remontent d'un niveau avec `../` pour atteindre les CSS,
les médias et l'accueil.

## Notions abordées
- Organisation multi-pages et chemins relatifs (`pages/x.html`, `../css/style.css`)
- CSS partagé entre plusieurs pages, variables CSS
- Mode sombre automatique : `@media (prefers-color-scheme: dark)` qui redéfinit les variables, `color-scheme`
- Navigation accessible : lien d'évitement, `nav` + `aria-label`, `aria-current="page"` (aussi utilisé comme sélecteur CSS), `main tabindex="-1"`
- Focus visible (`:focus-visible`) et `prefers-reduced-motion`
- `<picture>` avec `<source media>` : art direction (portrait sur mobile, paysage ensuite)
- Images : `width`/`height` (évite le saut de mise en page), `loading="lazy"`, `aspect-ratio`, `object-fit`
- `time datetime`, `ol`, `address`, liens `tel:` et `mailto:`
- Grille adaptative (`auto-fit` + `minmax`), Flexbox
- Feuille d'impression : `media="print"`, `break-inside`, `attr(href)`, masquage du superflu

## Idées d'exercices
1. Essayer le mode sombre : changez le thème de votre appareil, ou modifiez les variables de `@media (prefers-color-scheme: dark)`.
2. Imprimer (Ctrl+P) l'agenda et comparer avec l'écran ; ajouter une règle dans `impression.css`.
3. Ajouter une page « Dons » : copiez `contact.html`, ajoutez-la à la navigation de CHAQUE page, placez `aria-current` au bon endroit.
4. Remplacer l'image d'accueil par la baie à l'aube (les deux versions sont dans `medias/`) ; changer le seuil `599px` du `<picture>`.
5. Tester la navigation uniquement au clavier (Tab, Entrée) : le lien d'évitement apparaît-il ?
6. Ajouter un quatrième événement dans l'agenda.
7. Défi : ajouter un thème « contraste élevé » par un attribut `data-theme` en CSS.