Consignes du compte rendu¶

Bravo ! 🎉

Une fois les 3 exercices validés, vous avez terminé ce TP ! Vous maîtrisez maintenant :

✅ La structure HTML de base
✅ Les éléments sémantiques (header, main, footer, nav, section)
✅ Les listes et tableaux
✅ La navigation entre pages
✅ Le workflow Git avec branches
✅ Les Pull Requests sur GitHub

Félicitations pour votre travail ! 🚀

Cette section explique comment votre travail sera évalué et quelles sont les attentes pour la remise de ce TP. GitHub Classroom va automatiquement vérifier votre code grâce à des tests automatisés.

📋 Récapitulatif du workflow de remise¶

Voici le processus complet que vous avez suivi pour ce TP :

graph LR
    A[Exercice 1<br/>Branche] --> B[Pull Request 1]
    B --> C[Validation<br/>Enseignant]
    C --> D[Fusion dans main]
    D --> E[Exercice 2<br/>Branche]
    E --> F[Pull Request 2]
    F --> G[Validation<br/>Enseignant]
    G --> H[Fusion dans main]
    H --> I[Exercice 3<br/>Branche]
    I --> J[Pull Request 3]
    J --> K[Validation<br/>Enseignant]
    K --> L[Fusion finale]
    L --> M[✅ TP Terminé]

📦 Fichiers attendus dans votre dépôt¶

À la fin du TP, votre dépôt GitHub doit contenir la structure suivante :

votre-depot-tp1/
├── README.md                    # Informations sur votre projet
├── index.html                   # Exercice 1 : Profil étudiant
├── cv.html                      # Exercice 2 : Page CV
└── site/                        # Exercice 3 : Mini-site
    ├── index.html               # Page d'accueil du site
    ├── about.html               # Page à propos
    └── contact.html             # Page contact

Description des fichiers requis¶

Fichier	Description	Exercice
`README.md`	Fichier de présentation du projet	Tous
`index.html`	Page de profil personnel	Exercice 1
`cv.html`	Page CV avec navigation interne	Exercice 2
`site/index.html`	Page d'accueil du mini-site	Exercice 3
`site/about.html`	Page "À propos" du mini-site	Exercice 3
`site/contact.html`	Page de contact du mini-site	Exercice 3

Attention aux noms de fichiers

Respectez exactement les noms de fichiers indiqués (minuscules, pas d'espaces)
Les fichiers du mini-site doivent être dans le dossier site/
❌ Index.html ou INDEX.html → Ne sera pas reconnu
✅ index.html → Correct

Le fichier README.md¶

Le fichier README.md est obligatoire et doit contenir :

# TP1 - Introduction au HTML et Git

## Informations générales

- **Nom :** Votre Nom
- **Prénom :** Votre Prénom
- **Classe :** Votre Classe
- **Date de rendu :** 3 octobre 2025

## Description du projet

Ce dépôt contient les exercices du TP1 sur l'introduction au HTML et à Git.

## Exercices réalisés

### Exercice 1 : Profil étudiant
- ✅ Création de la page `index.html`
- ✅ Structure HTML5 avec header, main, footer
- ✅ Lien email fonctionnel

### Exercice 2 : Page CV
- ✅ Création de la page `cv.html`
- ✅ Navigation interne avec ancres
- ✅ Sections : Profil, Compétences, Formations, Contact
- ✅ Utilisation de listes et tableaux

### Exercice 3 : Mini-site personnel
- ✅ Création du dossier `site/`
- ✅ 3 pages HTML avec navigation cohérente
- ✅ Header et footer sur toutes les pages
- ✅ Lien email fonctionnel

## Difficultés rencontrées

(Décrivez les difficultés que vous avez rencontrées et comment vous les avez résolues)

## Ce que j'ai appris

- Structuration d'une page HTML
- Utilisation des balises sémantiques
- Navigation entre pages
- Workflow Git avec branches et Pull Requests
- Travail collaboratif avec GitHub

## Ressources utilisées

- [Documentation MDN](https://developer.mozilla.org/fr/)
- Cours et supports fournis

Pourquoi un README.md ?

Le README est la première chose que les visiteurs voient sur votre dépôt GitHub. C'est comme la couverture d'un livre : il doit donner envie de découvrir votre projet et expliquer clairement ce qu'il contient.

🤖 Tests automatisés GitHub Classroom¶

Une fois vos Pull Requests fusionnées, GitHub Classroom lancera automatiquement des tests pour valider votre travail.

Comment fonctionnent les tests automatisés ?¶

sequenceDiagram
    participant Vous
    participant GitHub
    participant Tests
    participant Enseignant

    Vous->>GitHub: git push
    GitHub->>Tests: Déclenche les tests
    Tests->>Tests: Vérifie votre code
    Tests->>GitHub: Résultats (✅ ou ❌)
    GitHub->>Vous: Notification des résultats
    GitHub->>Enseignant: Rapport de tests

Ce qui est vérifié automatiquement¶

✅ Structure HTML valide¶

Les tests vérifient que votre HTML est bien formé :

<!-- ✅ Correct -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma page</title>
</head>
<body>
    <h1>Titre</h1>
</body>
</html>

<!-- ❌ Incorrect : balises mal fermées -->
<body>
    <h1>Titre
    <p>Texte</h1>
</body>

✅ Présence des balises requises¶

Pour chaque exercice, les tests vérifient la présence des éléments demandés :

Exercice 1 :

Balise <header> présente
Balise <main> présente
Balise <footer> présente
Lien mailto: dans le footer

Exercice 2 :

Balise <nav> présente
Au moins 4 sections avec des id
Balise <ul> présente (compétences)
Balise <table> présente (formations)

Exercice 3 :

Dossier site/ existe
3 fichiers HTML présents
Chaque page contient <nav>, <header>, <footer>

Les tests vérifient que :

Les liens internes fonctionnent (href="#section")
Les liens entre pages fonctionnent (href="about.html")
Les liens email sont valides (href="mailto:...@...")

✅ Fichier README présent¶

Le test vérifie que :

Le fichier README.md existe
Il contient vos informations (nom, classe, etc.)
Il décrit le contenu du projet

Où voir les résultats des tests ?¶

Accédez à votre dépôt GitHub
Cliquez sur l'onglet "Actions" en haut de la page
Consultez les résultats :
- ✅ Coche verte = Tous les tests passent
- ❌ Croix rouge = Certains tests échouent
- 🟡 Point orange = Tests en cours d'exécution
Cliquez sur un test pour voir le détail :
- Quels tests ont réussi
- Quels tests ont échoué et pourquoi
- Des messages d'erreur explicites

Exemple de résultat de test

✅ Structure HTML valide
✅ Balise DOCTYPE présente
✅ Header présent dans index.html
❌ Footer manquant dans index.html
✅ Lien email présent
✅ Fichier README.md présent

Score : 5/6 tests réussis

Que faire si un test échoue ?¶

Si vous voyez une croix rouge ❌ :

Lisez le message d'erreur : Il vous indique précisément ce qui ne va pas
Corrigez le problème sur votre branche ou créez une nouvelle branche
Testez localement dans votre navigateur
Commitez et poussez vos modifications
Les tests se relancent automatiquement

Exemple de correction

# Test échoué : "Footer manquant dans cv.html"

# 1. Ouvrez cv.html et ajoutez le footer :
# <footer>
#     <p>&copy; 2025 Votre Nom</p>
# </footer>

# 2. Commitez et poussez
git add cv.html
git commit -m "Ajout du footer manquant dans cv.html"
git push

# 3. Les tests se relancent automatiquement

✅ Checklist finale avant la remise¶

Avant de considérer votre TP comme terminé, vérifiez ces points :

Fichiers et structure¶

Le fichier index.html existe à la racine du dépôt
Le fichier cv.html existe à la racine du dépôt
Le dossier site/ existe avec les 3 fichiers HTML
Le fichier README.md est présent et complet

Contenu HTML¶

Toutes les pages ont une structure HTML5 valide
Toutes les balises sont correctement fermées
Les liens email fonctionnent (test dans le navigateur)
La navigation entre pages fonctionne (test dans le navigateur)
Les ancres internes fonctionnent dans cv.html

Git et GitHub¶

Tous les exercices sont poussés sur GitHub
Les 3 Pull Requests ont été créées et fusionnées
Les messages de commit sont clairs et descriptifs
Aucun fichier inutile n'est dans le dépôt

Tests automatisés¶

J'ai consulté l'onglet "Actions" sur GitHub
Tous les tests sont au vert ✅
Si des tests échouent, j'ai corrigé les erreurs

Qualité¶

Mon code est bien indenté (utilisez Shift+Alt+F dans VS Code)
J'ai testé toutes mes pages dans le navigateur
Mon README est complet avec toutes les informations

Prêt à rendre ?

Si vous avez coché tous les points ci-dessus, félicitations ! Votre TP est prêt à être évalué. 🎉

🆘 Besoin d'aide ?¶

Si vous rencontrez des difficultés :

Problèmes techniques¶

Tests qui échouent : Lisez attentivement les messages d'erreur dans l'onglet Actions
Git qui ne fonctionne pas : Vérifiez que vous êtes sur la bonne branche avec git status
Page qui ne s'affiche pas : Vérifiez les chemins des liens et la structure HTML

Ressources disponibles¶

📚 Documentation du cours : Relisez les sections précédentes
💬 Forum de la classe : Posez vos questions à la communauté
👨‍🏫 Enseignant : Contactez votre enseignant en cas de blocage
🌐 MDN Web Docs : https://developer.mozilla.org/fr/

Conseil final

N'attendez pas la dernière minute pour rendre votre TP ! Faites vos exercices au fur et à mesure et testez régulièrement. Les Pull Requests permettent justement de recevoir des retours progressifs plutôt que tout à la fin.