Exercice 9.6 · 10 min · 0 tentative
Défi : la bannière d'accueil
🎯 Objectif
Le grand final du module : construire la bannière d'accueil du club photo, de A à Z, sans exemple sous les yeux.
📝 Consigne
Le HTML est figé, n'y touche pas : un en-tête de classe banniere, et dedans un bloc de texte de classe encart. Tout se passe dans l'onglet CSS, deux règles à écrire.
- Une règle pour la classe
banniere, avec :- l'air intérieur en deux valeurs : 64 pixels en haut et en bas, 16 à gauche et à droite
- la couleur de secours #14532d, un vert sapin
- l'image de fond /images/fonds/foret.svg
- la taille qui fait couvrir toute la bannière par la photo
- la position qui centre la photo
- Une règle pour la classe
encart, avec :- l'air intérieur en deux valeurs : 16 pixels en haut et en bas, 24 à gauche et à droite
- des coins arrondis de 12 pixels
- un bandeau noir à 60 % d'opacité
- un texte blanc #ffffff
- un texte centré
Résultat attendu
La forêt couvre toute la bannière, sans bande vide. Au milieu, un encart sombre aux coins arrondis porte le nom du club et son message, en blanc, bien lisibles sur le ciel clair comme sur les sapins. 🎉
♿ Un dernier mot sur ce que tu n'as pas fait : écrire le nom du club dans l'image. C'est pourtant ce que font beaucoup de bannières, avec un logiciel de dessin. Le résultat se ressemble à l'écran, mais tout le reste est perdu : un lecteur d'écran ne lit pas le texte d'une image de fond, un moteur de recherche ne le trouve pas, un traducteur automatique ne le traduit pas, et un zoom le rend flou.
Le réflexe à garder : le décor dans le fond, le texte dans le HTML. Si le texte compte, c'est du vrai texte.
Ce qui est vérifié
- Poser la photo de la forêt sur la bannière
- Couvrir toute la bannière
- Centrer la photo
- Prévoir la couleur de secours vert sapin
- Donner sa hauteur à la bannière
- Assombrir l'encart à 60 %
- Écrire le texte de l'encart en blanc
- Arrondir les coins de l'encart
- Centrer le texte de l'encart
- Écrire un code HTML bien formé
- Respecter la structure de la page (doctype, head, body)