Accueil/Informatique & Développement /Chapitre 01 /Exercices corrigés

HTML — exercices

Les TP du cours, refaits proprement : chaque énoncé, une correction en code complet et valide.

🎯

Comment travailler ces exercices

Écrivez le code avant de déplier la correction, puis ouvrez votre fichier dans le navigateur. En HTML, on apprend en voyant le résultat : un titre qui ne s'affiche pas, c'est presque toujours une balise mal fermée.

01Première page (TP1)

1Une page de présentation Facile

Créez mapage.html avec la structure de base, puis dans le <body> :

un titre principal <h1> avec votre nom ;
un paragraphe qui vous décrit ;
un sous-titre <h2> « Mes centres d'intérêt » suivi d'une liste <ul> de trois éléments ;
un lien vers un site que vous aimez et une image.

✅ Correction

mapage.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ma page de présentation</title>
</head>
<body>
    <h1>l'élève</h1>
    <p>Étudiant en BTS CIEL, passionné de réseaux et de développement web.</p>

    <h2>Mes centres d'intérêt</h2>
    <ul>
        <li>Les réseaux informatiques</li>
        <li>La cybersécurité</li>
        <li>Le développement web</li>
    </ul>

    <p>Mon site préféré :
        <a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN</a>
    </p>
    <img src="photo.jpg" alt="Photo de profil de la copie A">
</body>
</html>

⚠️ La couleur ne va pas dans le HTML

L'énoncé du TP demande d'ajouter des couleurs « avec l'attribut style ». C'est possible, mais c'est déjà du CSS écrit dans l'attribut. Le bon réflexe dès maintenant : <h1 style="color:#2D5A27"> plutôt que l'ancienne balise <font>, qui n'existe plus.

02Listes imbriquées (TP2)

2Un plan de villes Moyen

Organisez des villes en deux catégories (françaises / étrangères). Pour les villes qui ont des subdivisions, imbriquez une sous-liste en lettres (a, b, c). Structure attendue : Paris (1er, 2e, 3e arrondissement), Lyon (Presqu'île, Part-Dieu), Marseille (Vieux-Port, Le Panier).

✅ Correction

html

<h2>Villes françaises</h2>
<ol>
    <li>Paris
        <ol type="a">
            <li>1er arrondissement</li>
            <li>2e arrondissement</li>
            <li>3e arrondissement</li>
        </ol>
    </li>
    <li>Lyon
        <ol type="a">
            <li>Presqu'île</li>
            <li>Part-Dieu</li>
        </ol>
    </li>
    <li>Marseille
        <ol type="a">
            <li>Vieux-Port</li>
            <li>Le Panier</li>
        </ol>
    </li>
</ol>

⚠️ La sous-liste se place DANS le <li>

L'erreur classique : fermer le <li> de « Paris » avant d'ouvrir la sous-liste. La sous-liste doit être à l'intérieur du <li> parent, avant son </li> — sinon les arrondissements ne sont plus rattachés à Paris. C'est type="a" sur le <ol> qui donne la numérotation a, b, c.

03Tableau de budgets

3Reproduire le tableau Moyen

Reproduisez ce tableau avec une légende « Gestion des budgets », une ligne d'en-tête et une ligne de tarifs :

Gestion des budgets
Poste	Voiture	Maison	Charges
Tarif (€)	2000	3000	7000

✅ Correction

html

<table>
    <caption>Gestion des budgets</caption>
    <thead>
        <tr>
            <th>Poste</th>
            <th>Voiture</th>
            <th>Maison</th>
            <th>Charges</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Tarif (€)</th>
            <td>2000</td>
            <td>3000</td>
            <td>7000</td>
        </tr>
    </tbody>
</table>

🧰 Pourquoi des <th> aussi dans la colonne

La première cellule de la ligne de données (« Tarif ») est un en-tête de ligne : c'est un <th>, pas un <td>. Les <th> annoncent aux lecteurs d'écran « voici ce que décrit cette ligne/colonne » — le tableau devient compréhensible sans le voir.

04Emploi du temps (TP1)

4Un tableau matin / après-midi Moyen

Créez emploi.html : un titre « Mon emploi du temps », puis un tableau avec une ligne d'en-tête pour les jours (Lundi à Vendredi) et deux lignes (Matin, Après-midi). Centrez le tableau.

✅ Correction

html

<h1>Mon emploi du temps</h1>
<table style="margin:auto; border-collapse:collapse">
    <thead>
        <tr>
            <th></th>
            <th>Lundi</th><th>Mardi</th><th>Mercredi</th>
            <th>Jeudi</th><th>Vendredi</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Matin</th>
            <td>Maths</td><td>Réseau</td><td>Dev</td>
            <td>Anglais</td><td>Culture G</td>
        </tr>
        <tr>
            <th>Après-midi</th>
            <td>Dev</td><td>Réseau</td><td>TP</td>
            <td>Maths</td><td>Projet</td>
        </tr>
    </tbody>
</table>

🔧 Corrigé — border="1" laisse place au CSS

Le TP suggère border="1" et style="margin:auto". L'attribut border est obsolète : on trace les bordures en CSS (border:1px solid #ccc sur les cellules, avec border-collapse:collapse sur le tableau). Le centrage margin:auto est déjà du CSS — c'est la bonne voie.

05Liens & images (TP3)

5Les différents liens et images Moyen

Créez trois liens : externe, vers une page locale contact.html, et mailto:. Ajoutez un lien interne (ancre) vers une section plus bas.
Ajoutez une image avec alt, width, height ; une image cliquable vers un site externe ; deux images côte à côte, chacune avec une légende <figcaption>.

✅ Correction

html — les liens

<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
    Documentation MDN
</a>
<a href="contact.html">Page de contact</a>
<a href="mailto:Jone@exemple.fr">M'écrire</a>
<a href="#galerie">Voir la galerie plus bas</a>

html — les images

<h2 id="galerie">Galerie</h2>

<img src="photo.jpg" alt="Vue du campus" width="300" height="200">

<a href="https://www.cfa.fr">
    <img src="logo.png" alt="Logo du CFA">
</a>

<figure>
    <img src="avant.jpg" alt="Réseau avant">
    <figcaption>Avant la refonte</figcaption>
</figure>
<figure>
    <img src="apres.jpg" alt="Réseau après">
    <figcaption>Après la refonte</figcaption>
</figure>

🧰 « Côte à côte » : où se joue l'alignement

Deux <figure> se placent par défaut l'une sous l'autre. Pour les mettre côte à côte, c'est le CSS qui agit (display:flex sur un conteneur, ou figure{display:inline-block}). En HTML pur, on structure ; l'alignement viendra avec le chapitre CSS.

06Formulaire complet (TP4)

6Formulaire d'inscription structuré Exigeant

Créez un formulaire en deux groupes avec <fieldset> et <legend> :

Informations personnelles : nom, prénom, date de naissance, email ;
Compte : pseudo, mot de passe, confirmation, et une case « J'accepte les conditions ».

Rendez obligatoires les champs essentiels, et proposez un champ « modèle de PC » avec des suggestions via <datalist>.

✅ Correction

html

<form method="POST" action="/inscription">
    <fieldset>
        <legend>Informations personnelles</legend>

        <label for="nom">Nom :</label>
        <input type="text" id="nom" name="nom" required>

        <label for="prenom">Prénom :</label>
        <input type="text" id="prenom" name="prenom" required>

        <label for="naissance">Date de naissance :</label>
        <input type="date" id="naissance" name="naissance">

        <label for="email">E-mail :</label>
        <input type="email" id="email" name="email" required>
    </fieldset>

    <fieldset>
        <legend>Compte</legend>

        <label for="pseudo">Pseudo :</label>
        <input type="text" id="pseudo" name="pseudo" required>

        <label for="mdp">Mot de passe :</label>
        <input type="password" id="mdp" name="mdp" required>

        <label for="mdp2">Confirmation :</label>
        <input type="password" id="mdp2" name="mdp2" required>

        <label for="pc">Modèle de PC :</label>
        <input type="text" id="pc" name="pc" list="modeles">
        <datalist id="modeles">
            <option value="Dell OptiPlex">
            <option value="HP ProDesk">
            <option value="Lenovo ThinkCentre">
            <option value="Mac Mini">
            <option value="Asus ExpertCenter">
        </datalist>

        <label>
            <input type="checkbox" name="cgu" required>
            J'accepte les conditions
        </label>
    </fieldset>

    <button type="reset">Effacer</button>
    <button type="submit">S'inscrire</button>
</form>

⚠️ Trois erreurs qui coûtent des points

Oublier le name : le champ ne sera pas envoyé.
Un <label for="…"> dont le for ne correspond à aucun id : l'association est cassée.
Confondre <datalist> (suggestions, on peut taper autre chose) et <select> (choix fermé).

🌍 Le vrai contrôle des mots de passe

Le HTML peut rendre les deux champs obligatoires, mais il ne sait pas vérifier que « mot de passe » et « confirmation » sont identiques : ça demande du JavaScript (côté client) et une revérification côté serveur. Le HTML pose le décor, la logique vient après.