S06 – HTML et CSS : structurer et présenter une page
| Élément | Détail |
|---|---|
| Niveau | BTS SIO option SISR, 2e année – bloc 1 |
| Séance | S06 (séance 6 sur 19) – Phase 2 |
| Durée | 4 heures |
| Prérequis | S05 (le portail a été cadré en phase 1) |
| Matériel | Éditeur de texte, navigateur avec outils de développement |
| Compétences travaillées | B1.3 · B1.5 (voir le référentiel) |
Note
Question qui guide la séance : « Une page web, c'est du texte : comment le navigateur sait-il ce qui est un titre, un tableau, un formulaire, et à quoi cela doit ressembler ? »
Objectifs
À la fin de la séance, l'étudiant est capable de :
- Écrire une page HTML structurée avec les balises sémantiques
- Construire un tableau et un formulaire accessibles
- Mettre en forme avec CSS (boîte, flex, variables, adaptation à l'écran)
- Vérifier le contraste et la navigation au clavier
- Utiliser les outils de développement du navigateur
Contenu de la séance
| Document | Rôle |
|---|---|
| Cours – HTML et CSS | Cours |
| TP – La page des salles | TP |
| Aide-mémoire – HTML et CSS | Aide-mémoire |
Déroulé conseillé (4 h)
| Durée | Activité | Format |
|---|---|---|
| 0 h 00 – 0 h 15 | Accroche : afficher le code source d'un site connu | Oral et démonstration |
| 0 h 15 – 1 h 15 | Cours | Cours et questions |
| 1 h 15 – 4 h 00 | TP, parties A à D, puis bilan | Individuel |
Retour en entreprise
Si ta situation le permet : observer comment ton entreprise traite le sujet de la séance, documenter en une demi-page l'écart avec le TP, ou réaliser une partie après accord de ton tuteur. Voir Transfert en entreprise. Le travail réalisé peut alimenter une fiche de réalisation.
Évaluation
- Fichiers
salles.htmletstyle.css, plus captures datées de l'audit, nommésRENDU-B1A2-S06-NOM.zip. - Bilan de compétences rempli en fin de séance (individuel).
Notes pour l'enseignant
- Compétences : codes relus sur le référentiel.
- La page de référence (HTML, CSS) a été vérifiée : document bien formé, contrastes calculés (texte 17,4:1 ; bandeau 11,48:1 ; bouton 6,67:1 ; erreur 7,33:1).
- Aucune dépendance externe (pas de bibliothèque, pas de police distante) : adapté au RGPD et au poste de la salle.