Aller au contenu

Fiche d'exercices - TP HTML5

Consignes generales

  • Travaillez dans un dossier mon_site sur votre espace personnel
  • Utilisez Notepad++ (ou VS Code) pour editer vos fichiers
  • Testez regulierement dans votre navigateur (double-clic sur le fichier .html)
  • Encodage : UTF-8 (Menu Encodage > Encoder en UTF-8)
  • Appelez le professeur si vous etes bloque plus de 5 minutes

Seance 1 : Structure de base et texte

Objectif : Creer sa premiere page web avec du texte structure

Exercice 1.1 - Ma premiere page

  1. Creez un dossier mon_site dans votre espace personnel
  2. Creez un fichier index.html dans ce dossier
  3. Ecrivez la structure de base d'une page HTML5 :
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Ma page</title>
    </head>
    <body>

    </body>
</html>
  1. Ouvrez le fichier dans votre navigateur

Checkpoint 1.1 : L'onglet du navigateur affiche "Ma page"

Exercice 1.2 - Titre et paragraphes

Dans le <body>, ajoutez :

  1. Un titre principal <h1> avec votre prenom
  2. Un paragraphe <p> de presentation (2-3 phrases)
  3. Un sous-titre <h2> "Mes passions"
  4. Un paragraphe decrivant une de vos passions
  5. Utilisez <br /> pour faire un retour a la ligne dans un paragraphe

Checkpoint 1.2 : Votre page affiche un gros titre, un titre moyen, et deux paragraphes

Exercice 1.3 - Mise en valeur

  1. Mettez un mot en italique avec <em>...</em>
  2. Mettez un mot en gras avec <strong>...</strong>
  3. Surlignez un mot avec <mark>...</mark>

Checkpoint 1.3 : Trois mots sont mis en evidence differemment

Exercice 1.4 - Les listes

Ajoutez sous vos paragraphes :

  1. Un titre <h2> "Mes 3 films preferes"
  2. Une liste ordonnee <ol> avec 3 films (utilisez <li> pour chaque film)
  3. Un titre <h2> "Ce que j'aime manger"
  4. Une liste a puces <ul> avec 4 aliments

Checkpoint 1.4 : Vous avez une liste numerotee (1, 2, 3) et une liste a puces

Seance 2 : Les liens

Objectif : Creer plusieurs pages et les relier entre elles

Exercice 2.1 - Lien vers un site externe

  1. Ajoutez un paragraphe : "Visitez mon site prefere :"
  2. Creez un lien vers un site de votre choix :
<a href="https://www.exemple.com">Texte du lien</a>
  1. Testez en cliquant sur le lien

Checkpoint 2.1 : Le clic ouvre le site externe

Exercice 2.2 - Deuxieme page

  1. Creez un fichier hobbies.html dans le meme dossier
  2. Copiez la structure de base HTML5
  3. Changez le titre en "Mes hobbies"
  4. Ajoutez un <h1> et un paragraphe de contenu

Checkpoint 2.2 : Vous avez 2 fichiers .html dans votre dossier

Exercice 2.3 - Liens entre pages

  1. Dans index.html, ajoutez un lien vers hobbies.html :
<a href="hobbies.html">Voir mes hobbies</a>
  1. Dans hobbies.html, ajoutez un lien pour revenir a index.html :
<a href="index.html">Retour a l'accueil</a>
  1. Testez la navigation entre les deux pages

Checkpoint 2.3 : Vous pouvez naviguer de index vers hobbies et revenir

Exercice 2.4 - Les ancres

  1. Dans index.html, ajoutez beaucoup de contenu (copiez-collez des paragraphes)
  2. Ajoutez un id a l'un de vos titres : <h2 id="films">Mes films</h2>
  3. En haut de page, creez un lien vers cette ancre :
<a href="#films">Aller a mes films</a>
  1. Testez : le clic doit faire defiler la page

Checkpoint 2.4 : Le clic sur le lien fait defiler jusqu'au titre "Mes films"

Seance 3 : Les images

Objectif : Inserer et organiser des images

Exercice 3.1 - Preparation

  1. Creez un sous-dossier images dans mon_site
  2. Telechargez ou copiez 2-3 images (format .jpg ou .png)
  3. Renommez-les sans espaces ni accents (ex: photo1.jpg)

Checkpoint 3.1 : Vous avez un dossier images avec des fichiers dedans

Exercice 3.2 - Inserer une image

Dans index.html, ajoutez une image :

<p>
    Voici ma photo :
    <img src="images/photo1.jpg" alt="Description de l'image" />
</p>

Important : - src = chemin vers l'image - alt = description textuelle (obligatoire)

Checkpoint 3.2 : L'image s'affiche sur votre page

Exercice 3.3 - Image cliquable

Transformez votre image en lien vers votre page hobbies :

<a href="hobbies.html">
    <img src="images/photo1.jpg" alt="Description" />
</a>

Checkpoint 3.3 : Cliquer sur l'image amene vers hobbies.html

Seance 4 : Les tableaux

Objectif : Creer et structurer un tableau

Exercice 4.1 - Tableau simple

Creez un fichier planning.html et ajoutez un tableau de votre emploi du temps :

<table>
    <tr>
        <th>Jour</th>
        <th>8h-9h</th>
        <th>9h-10h</th>
    </tr>
    <tr>
        <td>Lundi</td>
        <td>Maths</td>
        <td>NSI</td>
    </tr>
    <tr>
        <td>Mardi</td>
        <td>Francais</td>
        <td>Anglais</td>
    </tr>
</table>

Checkpoint 4.1 : Le tableau s'affiche (sans bordures pour l'instant)

Exercice 4.2 - Ajouter des bordures (CSS)

Dans le <head>, ajoutez :

<style>
    table {
        border-collapse: collapse;
    }
    td, th {
        border: 1px solid black;
        padding: 5px;
    }
</style>

Checkpoint 4.2 : Le tableau a des bordures visibles

Exercice 4.3 - Titre et structure

  1. Ajoutez un titre au tableau avec <caption>Mon emploi du temps</caption> (juste apres <table>)
  2. Ajoutez au moins 3 lignes supplementaires

Checkpoint 4.3 : Le tableau a un titre au-dessus et au moins 5 lignes

Seance 5 : Structure avancee

Objectif : Organiser sa page avec les balises semantiques HTML5

Exercice 5.1 - Structure semantique

Reorganisez votre index.html avec les balises suivantes :

<body>
    <header>
        <h1>Mon site</h1>
    </header>

    <nav>
        <ul>
            <li><a href="index.html">Accueil</a></li>
            <li><a href="hobbies.html">Hobbies</a></li>
            <li><a href="planning.html">Planning</a></li>
        </ul>
    </nav>

    <section>
        <h2>Bienvenue</h2>
        <p>Contenu principal...</p>
    </section>

    <footer>
        <p>Site cree par [Votre nom] - 2026</p>
    </footer>
</body>

Checkpoint 5.1 : Votre page a un en-tete, un menu, une section et un pied de page

Exercice 5.2 - Menu de navigation

  1. Ajoutez le meme bloc <nav> sur toutes vos pages
  2. Verifiez que tous les liens fonctionnent

Checkpoint 5.2 : On peut naviguer entre toutes les pages depuis n'importe quelle page

Projet final

Objectif : Creer un mini-site personnel complet

Cahier des charges

Votre site doit contenir au minimum :

  • [ ] 3 pages HTML liees entre elles
  • [ ] Un menu de navigation present sur chaque page
  • [ ] Au moins 2 images
  • [ ] Au moins 1 tableau
  • [ ] Au moins 1 liste (ordonnee ou non)
  • [ ] Des titres de differents niveaux (h1, h2, h3)
  • [ ] Une structure semantique (header, nav, section, footer)
  • [ ] Un lien vers un site externe
  • [ ] Un lien avec ancre (vers une partie de la meme page)

Bareme

Critere Points
Structure HTML valide /4
Navigation fonctionnelle /3
Images correctement inserees /2
Tableau structure /2
Listes /2
Structure semantique HTML5 /3
Originalite et contenu /4
Total /20

Aide-memoire

Balises principales

Balise Role
<h1> a <h6> Titres (h1 = plus important)
<p> Paragraphe
<br /> Retour a la ligne
<strong> Texte important (gras)
<em> Texte en emphase (italique)
<ul> Liste a puces
<ol> Liste numerotee
<li> Element de liste
<a href="..."> Lien
<img src="..." alt="..." /> Image
<table>, <tr>, <td>, <th> Tableau
<header> En-tete
<nav> Navigation
<section> Section
<footer> Pied de page

Erreurs frequentes

  1. L'image ne s'affiche pas : Verifiez le chemin (src) et le nom du fichier (pas d'espaces, pas d'accents)
  2. Les accents sont bizarres : Verifiez l'encodage UTF-8
  3. Le lien ne marche pas : Verifiez que le fichier cible existe et que le nom est correct
  4. Le tableau n'a pas de bordures : Ajoutez le CSS pour les bordures