Aller au contenu

Correction des exercices - HTML

Exercice 1 : Structure de base

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma première page</title>
</head>
<body>
    <h1>Bienvenue</h1>

    <p>
        Bonjour et bienvenue sur ma première page web !
        Je suis en train d'apprendre le HTML en cours de NSI.
    </p>

    <a href="https://www.google.fr">Aller sur Google</a>
</body>
</html>

Points importants : - Le <!DOCTYPE html> indique qu'il s'agit d'HTML5 - L'attribut lang="fr" précise la langue du document - Le charset="UTF-8" permet d'afficher les accents - Le <title> apparaît dans l'onglet du navigateur - Le contenu visible est dans le <body>

Exercice 2 : Les listes

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mes listes</title>
</head>
<body>
    <h1>Mes films préférés</h1>

    <ul>
        <li>Inception</li>
        <li>Interstellar</li>
        <li>Le Seigneur des Anneaux</li>
        <li>Matrix</li>
        <li>Retour vers le Futur</li>
    </ul>

    <h1>Comment faire des pâtes</h1>

    <ol>
        <li>Faire bouillir de l'eau dans une grande casserole</li>
        <li>Ajouter du sel dans l'eau bouillante</li>
        <li>Verser les pâtes dans l'eau</li>
        <li>Laisser cuire selon le temps indiqué sur le paquet</li>
        <li>Égoutter les pâtes</li>
        <li>Ajouter la sauce de votre choix</li>
        <li>Servir et déguster !</li>
    </ol>
</body>
</html>

Points importants : - <ul> pour une liste non ordonnée (puces) - <ol> pour une liste ordonnée (numérotée) - Chaque élément de liste est dans une balise <li>

Exercice 3 : Images et liens

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Images et liens</title>
</head>
<body>
    <h1>Ma page avec images et liens</h1>

    <!-- Image simple -->
    <img src="paysage.jpg" alt="Un magnifique paysage de montagne">

    <!-- Lien vers Wikipédia dans un nouvel onglet -->
    <p>
        <a href="https://fr.wikipedia.org" target="_blank">
            Visiter Wikipédia (nouvel onglet)
        </a>
    </p>

    <!-- Image cliquable -->
    <p>
        <a href="https://unsplash.com">
            <img src="paysage.jpg" alt="Cliquez pour voir la source de l'image">
        </a>
    </p>
</body>
</html>

Points importants : - L'attribut alt est obligatoire pour l'accessibilité - target="_blank" ouvre le lien dans un nouvel onglet - Pour rendre une image cliquable, on l'entoure d'une balise <a>

Exercice 4 : Tableau

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mes notes</title>
</head>
<body>
    <h1>Bulletin de notes</h1>

    <table border="1">
        <thead>
            <tr>
                <th>Matière</th>
                <th>Coefficient</th>
                <th>Moyenne</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Maths</td>
                <td>4</td>
                <td>14</td>
            </tr>
            <tr>
                <td>NSI</td>
                <td>4</td>
                <td>16</td>
            </tr>
            <tr>
                <td>Français</td>
                <td>3</td>
                <td>12</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Points importants : - <thead> contient l'en-tête du tableau - <tbody> contient le corps du tableau - <tr> définit une ligne (table row) - <th> définit une cellule d'en-tête (table header) - <td> définit une cellule de données (table data) - L'attribut border="1" ajoute une bordure (en pratique, on utilise le CSS)

Exercice 5 : Formulaire

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Inscription</title>
</head>
<body>
    <h1>Formulaire d'inscription</h1>

    <form action="traitement.php" method="post">
        <p>
            <label for="nom">Nom :</label>
            <input type="text" id="nom" name="nom" required>
        </p>

        <p>
            <label for="email">Email :</label>
            <input type="email" id="email" name="email" required>
        </p>

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

        <p>
            <input type="checkbox" id="cgu" name="cgu" required>
            <label for="cgu">J'accepte les conditions générales d'utilisation</label>
        </p>

        <p>
            <button type="submit">S'inscrire</button>
        </p>
    </form>
</body>
</html>

Points importants : - L'attribut required rend le champ obligatoire - type="email" vérifie automatiquement le format de l'email - type="password" masque la saisie - Le for du label doit correspondre à l'id du champ - type="checkbox" crée une case à cocher

Exercice 6 : Page complète

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Le Python - Langage de programmation</title>
</head>
<body>
    <header>
        <h1>Le Python</h1>
        <nav>
            <ul>
                <li><a href="#introduction">Introduction</a></li>
                <li><a href="#historique">Historique</a></li>
                <li><a href="#utilisations">Utilisations</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2 id="introduction">Introduction au Python</h2>

            <p>
                Python est un langage de programmation interprété, multiparadigme
                et multiplateformes. Il favorise la programmation impérative structurée,
                fonctionnelle et orientée objet.
            </p>

            <img src="python-logo.png" alt="Logo du langage Python">

            <p>
                Python est apprécié par les débutants pour sa syntaxe claire et lisible,
                qui utilise l'indentation pour délimiter les blocs de code.
            </p>

            <h2 id="historique">Historique</h2>

            <p>
                Python a été créé par Guido van Rossum et la première version
                a été publiée en 1991. Le nom "Python" fait référence aux
                Monty Python, groupe d'humoristes britanniques.
            </p>

            <h2 id="utilisations">Utilisations</h2>

            <p>Python est utilisé dans de nombreux domaines :</p>

            <table border="1">
                <thead>
                    <tr>
                        <th>Domaine</th>
                        <th>Exemples</th>
                        <th>Bibliothèques</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Data Science</td>
                        <td>Analyse de données</td>
                        <td>Pandas, NumPy</td>
                    </tr>
                    <tr>
                        <td>Intelligence Artificielle</td>
                        <td>Machine Learning</td>
                        <td>TensorFlow, PyTorch</td>
                    </tr>
                    <tr>
                        <td>Web</td>
                        <td>Sites web</td>
                        <td>Django, Flask</td>
                    </tr>
                    <tr>
                        <td>Automatisation</td>
                        <td>Scripts</td>
                        <td>Selenium, Beautiful Soup</td>
                    </tr>
                </tbody>
            </table>
        </article>
    </main>

    <aside>
        <h3>Ressources utiles</h3>
        <ul>
            <li><a href="https://www.python.org" target="_blank">Site officiel</a></li>
            <li><a href="https://docs.python.org/fr/" target="_blank">Documentation</a></li>
        </ul>
    </aside>

    <footer>
        <p>&copy; 2024 - Page créée dans le cadre du cours de NSI</p>
    </footer>
</body>
</html>

Points importants : - Structure sémantique avec <header>, <nav>, <main>, <article>, <aside>, <footer> - Navigation avec des ancres (#introduction, #historique, #utilisations) - Les id sur les titres permettent de créer des liens internes - &copy; affiche le symbole copyright © - target="_blank" pour les liens externes

Auteur : Florian Mathieu

Licence CC BY NC

Licence Creative Commons
Ce cours est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.