Exercice 3 : Mini-site personnel¶

Objectif¶

Créer un site web multi-pages complet avec navigation cohérente entre les pages. Cet exercice simule un projet professionnel réel avec plusieurs fichiers HTML liés entre eux.

Étape 1 : Préparer votre environnement¶

Après la fusion de l'exercice 2 :

# Revenez sur main et récupérez les dernières modifications
git checkout main
git pull

# Créez une nouvelle branche pour l'exercice 3
git checkout -b exercice-3-mini-site

Étape 2 : Développer l'exercice¶

2.1 Créer la structure du projet¶

Créez un dossier site/ dans votre dépôt :
1
mkdir site

Créez les 3 fichiers HTML dans ce dossier :

cd site
touch index.html about.html contact.html

2.2 Structure commune à toutes les pages¶

Chaque page doit avoir une structure cohérente avec :

Header avec navigation :

<header>
    <h1>Mon Site Personnel</h1>
    <nav>
        <ul>
            <li><a href="index.html">Accueil</a></li>
            <li><a href="about.html">À propos</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
</header>

Footer commun :

<footer>
    <p>&copy; 2025 Votre Nom. Tous droits réservés.</p>
</footer>

Conseil pro

Pour éviter de réécrire le header et footer sur chaque page, copiez-collez le code ! En projet réel, on utiliserait des templates ou des composants pour éviter la duplication.

2.3 Contenu de chaque page¶

index.html - Page d'accueil :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accueil - Mon Site</title>
</head>
<body>
    <!-- Header avec navigation -->
    <header>
        <!-- ... -->
    </header>

    <main>
        <h2>Bienvenue sur mon site</h2>
        <p>Découvrez mon univers et mes projets...</p>
        <!-- Ajoutez du contenu de présentation -->
    </main>

    <!-- Footer -->
    <footer>
        <!-- ... -->
    </footer>
</body>
</html>

about.html - À propos :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>À propos - Mon Site</title>
</head>
<body>
    <!-- Header avec navigation -->
    <header>
        <!-- ... -->
    </header>

    <main>
        <h2>À propos de moi</h2>
        <p>Je suis étudiant en informatique...</p>
        <!-- Parlez de votre parcours, vos passions, vos objectifs -->

        <h3>Mes centres d'intérêt</h3>
        <ul>
            <li>Développement web</li>
            <li>Intelligence artificielle</li>
            <!-- ... -->
        </ul>
    </main>

    <!-- Footer -->
    <footer>
        <!-- ... -->
    </footer>
</body>
</html>

contact.html - Contact :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact - Mon Site</title>
</head>
<body>
    <!-- Header avec navigation -->
    <header>
        <!-- ... -->
    </header>

    <main>
        <h2>Me contacter</h2>
        <p>N'hésitez pas à me contacter pour toute question !</p>

        <p>
            <strong>Email :</strong> 
            <a href="mailto:votre.email@exemple.com">votre.email@exemple.com</a>
        </p>

        <!-- Optionnel : ajoutez d'autres moyens de contact -->
        <p><strong>LinkedIn :</strong> <a href="#">Votre profil</a></p>
        <p><strong>GitHub :</strong> <a href="#">Votre profil</a></p>
    </main>

    <!-- Footer -->
    <footer>
        <!-- ... -->
    </footer>
</body>
</html>

Structure du dossier

À la fin, votre structure devrait ressembler à :

votre-depot/
    ├── index.html          (Exercice 1)
    ├── cv.html             (Exercice 2)
    └── site/               (Exercice 3)
        ├── index.html
        ├── about.html
        └── contact.html

Étape 3 : Tester votre site¶

Ouvrez site/index.html dans votre navigateur
Testez la navigation complète :
- Depuis l'accueil, cliquez sur "À propos" → Vérifiez que vous arrivez sur about.html
- Depuis "À propos", cliquez sur "Contact" → Vérifiez que vous arrivez sur contact.html
- Depuis "Contact", cliquez sur "Accueil" → Vous devez revenir sur index.html
Vérifications importantes :
- ✅ Le menu de navigation est présent sur toutes les pages
- ✅ Le footer est présent sur toutes les pages
- ✅ Les liens de navigation fonctionnent correctement
- ✅ Le lien email sur la page contact fonctionne
- ✅ Les titres des pages (dans l'onglet du navigateur) sont différents

Attention aux chemins

Si vos fichiers sont dans le dossier site/, tous les liens doivent pointer vers des fichiers dans le même dossier :

✅ <a href="index.html"> (correct)
❌ <a href="/index.html"> (incorrect)
❌ <a href="../index.html"> (incorrect)

Étape 4 : Commit et Push¶

# Revenez à la racine du dépôt si vous êtes dans site/
cd ..

# Ajoutez tous les fichiers du dossier site
git add site/

# Commitez
git commit -m "Exercice 3 : Création du mini-site personnel"

# Si vous avez fait des modifications en plusieurs fois, faites des commits séparés
# Par exemple :
# git add site/index.html
# git commit -m "Exercice 3 : Ajout de la page d'accueil"
# git add site/about.html
# git commit -m "Exercice 3 : Ajout de la page à propos"
# git add site/contact.html
# git commit -m "Exercice 3 : Ajout de la page contact"

# Envoyez sur GitHub
git push -u origin exercice-3-mini-site

Bonne pratique : commits atomiques

En situation professionnelle, on préfère faire des commits atomiques (un commit = une fonctionnalité). Par exemple :

Commit 1 : "Création de la structure du dossier site"
Commit 2 : "Ajout de la page d'accueil"
Commit 3 : "Ajout de la page à propos"
Commit 4 : "Ajout de la page contact"
Commit 5 : "Harmonisation des headers et footers"

Étape 5 : Ouvrir une Pull Request¶

Accédez à GitHub et cliquez sur "Compare & pull request"

Remplissez les informations :

Titre : Exercice 3 : Mini-site personnel
Description :

## Exercice 3 : Mini-site personnel

### Ce qui a été fait :

- ✅ Création du dossier `site/`
- ✅ Page d'accueil (`index.html`)
- ✅ Page à propos (`about.html`)
- ✅ Page contact (`contact.html`)
- ✅ Navigation cohérente entre toutes les pages
- ✅ Header et footer identiques sur toutes les pages
- ✅ Lien email fonctionnel sur la page contact

### Test de navigation :

- ✅ Navigation complète testée entre les 3 pages
- ✅ Tous les liens fonctionnent correctement
- ✅ Les titres de pages sont personnalisés

### Structure du site :

site/
├── index.html      (Page d'accueil)
├── about.html      (À propos)
└── contact.html    (Contact)

### Captures d'écran :

(Ajoutez des captures d'écran de vos 3 pages)

Créez la PR : Cliquez sur "Create pull request"

Étape 6 : Attendre la validation¶

Attendez que votre enseignant valide et fusionne cette dernière Pull Request.

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 ! 🚀