Rivo, vannier à Antalaha : page de présentation

README.md · 1.8 Ko

# Rivo, vannier à Antalaha (page de présentation)

## Cas d'usage
Un artisan (fictif) veut une « carte de visite » en ligne : qui il est, ce qu'il
vend, comment le joindre. Une seule page suffit. C'est le meilleur premier
projet HTML/CSS : peu de fichiers, beaucoup de bases.

## Arborescence
```
html-carte-artisan/
├── index.html      page unique (header / main / sections / footer), très commentée
├── css/
│   └── style.css   toute la mise en forme, mobile d'abord
├── medias/         2 illustrations SVG libres de droits (ravenala, plage)
├── site.json       titre, description et tags du site pour le portail
└── README.md       ce fichier
```

## Notions abordées
- Structure d'un document HTML : `<!DOCTYPE>`, `lang`, `<meta charset>`, `<meta viewport>`
- Balises sémantiques : `header`, `main`, `section`, `article`, `address`, `footer`
- Titres hiérarchisés `h1` > `h2` > `h3`
- Images : `alt`, `width`/`height`, `loading="lazy"`, `figure`/`figcaption`
- Lien d'évitement et `aria-labelledby`
- Icône SVG en ligne colorée avec `currentColor`
- Lien `tel:`
- Feuille de style externe, sélecteurs de balise et de classe
- Modèle de boîte (`box-sizing`, `padding`, `margin`, `border`)
- Unités relatives (`rem`), Flexbox, grille simple (`display: grid`)
- Media query `min-width` (mobile d'abord) et `:focus-visible`

## Idées d'exercices
1. Changer la palette : modifiez les codes couleur de `style.css` (restez lisible !).
2. Ajouter un cinquième produit (copiez un bloc `<li>`).
3. Ajouter un lien `mailto:` avec l'icône courriel de la médiathèque.
4. Passer la grille à trois colonnes à partir de 900 px.
5. Ajouter une section « Mon atelier » avec une image de la médiathèque.
6. Vérifier avec Tab que chaque lien montre bien son focus.