6. TP1 - Étape 1 - HTML
TP1 – À la manière de. Amélioration progressive et balisage sémantique.
6. TP1 – À la manière de
Ce travail pratique amène à intégrer une page Web complète selon l'approche de l'amélioration progressive : on procède par étapes en s'assurant d'abord que les contenus sont accessibles grâce à un balisage HTML structurel et sémantique, puis on ajoute les balises nécessaires à la mise en page, avant d'introduire les styles CSS. À chaque étape, l'expérience doit rester bonne quel que soit le contexte (navigateur, taille d'écran, avec ou sans images, feuille de styles utilisateur, avec ou sans JavaScript).
Acceptez le défi (GitHub Classroom)
Télécharger le kit de départ
Étape 1 – Balisage HTML sémantique
L'Étape 1 est à remettre pour lundi le 2 février, avant le début du cours : avoir complété l'étape 1 du TP1 (balisage HTML sémantique).
1.1 – Balisage structurel
- D'après les textes fournis pour le TP1, faire le balisage structurel.
- Aucune attention à la présentation ; aucun style CSS.
- S'appuyer sur le guide-html.md (sémantique structurelle :
header,main,footer,section,nav, etc.) et au besoin sur MDN – Éléments HTML. - Utiliser Emmet pour générer des segments HTML (voir Leçon 03 – Emmet).
Exemples Emmet :
| Abréviation | Résultat |
|---|---|
nav>ul>(li>a)*5 |
<nav> avec une liste de 5 items contenant chacun un lien |
figure>img+figcaption |
<figure> avec image et légende |
ul>(li>a)*3 |
Liste de 3 hyperliens |
footer>p>small |
<footer> avec paragraphe et <small> pour la mention légale |
1.2 – Raffinements sémantiques
- Ajouter des balises
<time>pour les dates. - Utiliser
<small>pour la mention légale dans le<footer>. - Utiliser une entité HTML pour la ligature œ (ex.
œpour œuvres). - Placer des espaces fines insécables devant les
!(ex. ). - Marquer les mots en anglais avec
<span lang="en">pour la prononciation par un lecteur vocal.
1.3 – Versionner l'étape
Le versionnement permet de sauvegarder l'historique de vos modifications et de synchroniser votre travail avec GitHub. Vous pouvez utiliser VSCode ou GitHub Desktop.
Option A – VSCode (recommandé)
- Cliquer sur l'icône Source Control dans la barre latérale (ou
Ctrl+Shift+G/Cmd+Shift+G). - Les fichiers modifiés apparaissent dans la section Changes.
- Cliquer sur le + à côté d'un fichier pour l'indexer (stage), ou sur le + global pour tout indexer.
- Saisir un message de commit descriptif dans le champ texte :
- Premier commit :
Création index.html - En cours :
Balisage index – 50 % - Terminé :
Balisage index – terminé
- Premier commit :
- Appuyer sur Cmd+Entrée (Mac) ou Ctrl+Entrée (Windows) pour valider.
- Cliquer sur Sync Changes (ou l'icône de synchronisation) pour pousser vers GitHub.
- S'authentifier via le navigateur si demandé.
Tutoriel vidéo – VSCode et Git
Option B – GitHub Desktop
- Ouvrir GitHub Desktop et sélectionner votre dépôt.
- Les fichiers modifiés s'affichent dans le panneau de gauche.
- Cocher les fichiers à inclure dans le commit.
- Saisir un titre de commit (Summary) et une description optionnelle.
- Cliquer sur Commit to main.
- Cliquer sur Push origin pour synchroniser avec GitHub.
Tutoriel vidéo – GitHub Desktop
Bonnes pratiques de versionnement
| Pratique | Exemple |
|---|---|
| Messages clairs et concis | Ajout navigation principale plutôt que modif |
| Commits fréquents | Un commit par fonctionnalité ou étape complétée |
| Synchronisation régulière | Push après chaque session de travail |
Grille de correction (sur 10)
| Critère | Points |
|---|---|
| Balisage sémantique et structurel | 2 |
| Stratégie d'intégration complétée | 1 |
| Styles CSS (base) – charte typo responsive, rangées 3-4-5-7-8 | 2 |
| Styles CSS (header/footer) – rangées 1-2-6 | 2 |
| Versionnage | 1 |
| Complétion du README selon README-template | 1 |
| Mise en ligne sur GitHub Pages | 1 |
Modalités de remise
- Versionnage : Vous remettez via des commits et en faisant un push sur votre dépôt GitHub (VSCode ou GitHub Desktop).
- Mise en ligne : URL du type
https://utilisateur.github.io/tp1/.