loader image

La boite à ITees

Icône du site Boîte à ITées illustrant une boîte à outils numérique, représentant les ressources pour apprendre la programmation et le développement web, avec des boutons colorés et un écran.
Menu
Dessin de deux hommes en tenue de travail réfléchissant à une tâche. L'homme au premier plan est devant un ordinateur portable avec "HTML" écrit sur la façade. Il a l'index gauche levé.

Exercices HTML

La boite à ITees > Exercices pratiques > Exercices HTML
Dessin de deux hommes en tenue de travail réfléchissant à une tâche. L'homme au premier plan est devant un ordinateur portable avec "HTML" écrit sur la façade. Il a l'index gauche levé.

Exercice 1

 

Créer une Structure de Base HTML

Objectif : Comprendre la structure de base d’un document HTML.

 

Consigne : Créez une page HTML simple avec la structure suivante :

      • Une balise <!DOCTYPE html> pour indiquer le type de document.
      • Une balise <html> englobant tout le contenu de la page.
      • Une balise <head> contenant les métadonnées de la page, comme le titre.
      • Une balise <body> contenant le contenu visible de la page.

 

Correction de l’exercice 1 

Correction 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma première page HTML</title>
</head>
<body>
    <h1>Bienvenue sur ma page</h1>
    <p>Ceci est ma première page HTML.</p>
</body>
</html>
    • Ce code crée une page simple avec un titre et du texte visible. La balise <!DOCTYPE html> indique au navigateur que c’est un document HTML5.

Exercice 2

 

Ajouter des Paragraphes et des Titres

Objectif : Apprendre à structurer le texte avec des titres et des paragraphes.

 

Consigne : Ajoutez trois titres de niveaux différents (<h1>, <h2>, <h3>) et deux paragraphes (<p>).

 

Correction de l’exercice 2

Correction 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Structure de la page</title>
</head>
<body>
    <h1>Titre Principal</h1>
    <p>Ceci est le premier paragraphe sous le titre principal.</p>

    <h2>Sous-titre 1</h2>
    <p>Ceci est un paragraphe sous le premier sous-titre.</p>

    <h3>Sous-sous-titre</h3>
    <p>Ceci est un paragraphe sous le sous-sous-titre.</p>
</body>
</html>
    • Les balises de titre (<h1>, <h2>, etc.) structurent la hiérarchie de la page, tandis que les balises <p> définissent des paragraphes de texte.

Exercice 3

 

Ajouter des Liens Hypertexte

Objectif : Apprendre à créer des liens vers d’autres pages ou sites.

 

Consigne : Ajoutez deux liens hypertexte : l’un vers une autre page de votre site et l’autre vers un site externe (comme https://www.google.com).

 

Correction de l’exercice 3

Correction 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Liens Hypertexte</title>
</head>
<body>
    <h1>Apprenez à créer des liens</h1>
    <p>Voici un lien vers <a href="page2.html">une autre page de ce site</a>.</p>
    <p>Voici un lien vers <a href="https://www.google.com" target="_blank">Google</a>.</p>
</body>
</html>
    • La balise <a> crée un lien hypertexte. L’attribut href spécifie l’URL de destination, et l’attribut target="_blank" ouvre le lien dans un nouvel onglet.

Exercice 4

 

Insérer des Images

Objectif : Apprendre à ajouter des images à une page web.

 

Consigne : Insérez une image dans votre page en utilisant la balise <img> et ajoutez une description alternative (alt).

 

Correction de l’exercice 4

Correction 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Insertion d'images</title>
</head>
<body>
    <h1>Voici une image</h1>
    <img src="image.jpg" alt="Une belle image" width="500" height="300">
    <p>Cette image est décrite comme "Une belle image".</p>
</body>
</html>
    • La balise <img> permet d’ajouter une image à la page. L’attribut src spécifie le chemin de l’image, et l’attribut alt fournit une description pour les navigateurs ne pouvant pas afficher l’image.

Exercice 5

 

Créer une Liste

Objectif : Apprendre à créer des listes non ordonnées et ordonnées.

 

Consigne : Créez une liste non ordonnée (<ul>) et une liste ordonnée (<ol>), avec trois éléments chacune.

 

Correction de l’exercice 5

Correction 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Listes en HTML</title>
</head>
<body>
    <h1>Listes en HTML</h1>

    <h2>Liste non ordonnée</h2>
    <ul>
        <li>Élément 1</li>
        <li>Élément 2</li>
        <li>Élément 3</li>
    </ul>

    <h2>Liste ordonnée</h2>
    <ol>
        <li>Premier</li>
        <li>Deuxième</li>
        <li>Troisième</li>
    </ol>
</body>
</html>
    • <ul> crée une liste non ordonnée (avec des puces).
    • <ol> crée une liste ordonnée (numérotée).
    • <li> définit un élément de liste.

Exercice 6

 

Créer un Formulaire Basique

Objectif : Apprendre à créer un formulaire avec des champs de saisie.

 

Consigne : Créez un formulaire avec un champ texte, un champ email, et un bouton de soumission.

 

Correction de l’exercice 6

Correction 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Formulaire basique</title>
</head>
<body>
    <h1>Contactez-nous</h1>
    <form action="submit_form.php" method="post">
        <label for="name">Nom :</label>
        <input type="text" id="name" name="name" required><br><br>

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

        <button type="submit">Envoyer</button>
    </form>
</body>
</html>
    • La balise <form> encapsule les champs du formulaire.
    • Les balises <input> sont utilisées pour créer des champs de saisie.
    • La balise <button> est utilisée pour créer un bouton de soumission.

Exercice 7

 

Ajouter des Commentaires

Objectif : Apprendre à ajouter des commentaires dans le code HTML.

 

Consigne : Ajoutez des commentaires dans votre code pour décrire la structure de votre page.

 

Correction de l’exercice 7

Correction 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Page avec commentaires</title>
</head>
<body>
    <!-- Titre principal de la page -->
    <h1>Page Commentée</h1>

    <!-- Paragraphe de bienvenue -->
    <p>Bienvenue sur cette page avec des commentaires HTML.</p>
</body>
</html>
    • Les commentaires sont ajoutés avec <!-- commentaire -->. Ils ne sont pas affichés dans le navigateur mais servent à documenter le code.

Exercice 8

 

Créer un Tableau

Objectif : Apprendre à créer et structurer un tableau en HTML.

 

Consigne : Créez un tableau simple avec 3 colonnes et 3 lignes. Utilisez les balises <table>, <tr>, <th>, et <td>.

 

Correction de l’exercice 8

Correction 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Tableau HTML</title>
</head>
<body>
    <h1>Exemple de Tableau</h1>
    <table border="1">
        <tr>
            <th>Colonne 1</th>
            <th>Colonne 2</th>
            <th>Colonne 3</th>
        </tr>
        <tr>
            <td>Cellule 1.1</td>
            <td>Cellule 1.2</td>
            <td>Cellule 1.3</td>
        </tr>
        <tr>
            <td>Cellule 2.1</td>
            <td>Cellule 2.2</td>
            <td>Cellule 2.3</td>
        </tr>
    </table>
</body>
</html>
    • <table> créent un tableau.
    • L’attribut border permet de dessiner une bordure autour du tableau.
    • <tr> crée une ligne.
    • <th> définit une cellule d’en-tête.
    • <td> définit une cellule de données.

Exercice 9

 

Utiliser des Attributs Globaux

Objectif : Apprendre à utiliser des attributs globaux comme id, class, et style.

 

Consigne : Ajoutez des attributs id, class, et style à divers éléments de la page pour les identifier et les styliser.

 

Correction de l’exercice 9

Correction 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Attributs Globaux</title>
</head>
<body>
    <h1 id="main-title" class="title" style="color:blue;">Titre Principal</h1>
    <p class="paragraph" style="font-weight: bold;">Ceci est un paragraphe en gras.</p>
    <p id="special-paragraph" class="paragraph" style="color: red;">Ceci est un paragraphe rouge.</p>
</body>
</html>
    • Les attributs id et class permettent d’identifier des éléments pour les styliser ou les manipuler via CSS ou JavaScript.
    • L’attribut style permet de définir des styles en ligne directement sur les éléments HTML.

Exercice 10

 

Créer un Menu de Navigation

Objectif : Apprendre à créer un menu de navigation simple.

 

Consigne : Créez un menu de navigation avec une liste de liens vers différentes sections de votre site.

 

Correction de l’exercice 10

Correction 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Menu de Navigation</title>
</head>
<body>
    <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>
</body>
</html>
    • La balise <nav> est utilisée pour regrouper les liens de navigation.
    • Les balises <ul> et <li> créent une liste de liens, formant ainsi un menu de navigation simple..