# 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 : ```html Ma page ``` 4. Ouvrez le fichier dans votre navigateur **Checkpoint 1.1 :** L'onglet du navigateur affiche "Ma page" --- ### Exercice 1.2 - Titre et paragraphes Dans le ``, ajoutez : 1. Un titre principal `

` avec votre prenom 2. Un paragraphe `

` de presentation (2-3 phrases) 3. Un sous-titre `

` "Mes passions" 4. Un paragraphe decrivant une de vos passions 5. Utilisez `
` 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 `...` 2. Mettez un mot en gras avec `...` 3. Surlignez un mot avec `...` **Checkpoint 1.3 :** Trois mots sont mis en evidence differemment --- ### Exercice 1.4 - Les listes Ajoutez sous vos paragraphes : 1. Un titre `

` "Mes 3 films preferes" 2. Une liste ordonnee `
    ` avec 3 films (utilisez `
  1. ` pour chaque film) 3. Un titre `

    ` "Ce que j'aime manger" 4. Une liste a puces `
      ` 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 : ```html Texte du lien ``` 3. 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 `

      ` 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` : ```html Voir mes hobbies ``` 2. Dans `hobbies.html`, ajoutez un lien pour revenir a `index.html` : ```html Retour a l'accueil ``` 3. 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 : `

      Mes films

      ` 3. En haut de page, creez un lien vers cette ancre : ```html Aller a mes films ``` 4. 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 : ```html

      Voici ma photo : Description de l'image

      ``` **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 : ```html Description ``` **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 : ```html
      Jour 8h-9h 9h-10h
      Lundi Maths NSI
      Mardi Francais Anglais
      ``` **Checkpoint 4.1 :** Le tableau s'affiche (sans bordures pour l'instant) --- ### Exercice 4.2 - Ajouter des bordures (CSS) Dans le ``, ajoutez : ```html ``` **Checkpoint 4.2 :** Le tableau a des bordures visibles --- ### Exercice 4.3 - Titre et structure 1. Ajoutez un titre au tableau avec `Mon emploi du temps` (juste apres ``) 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 : ```html

      Mon site

      Bienvenue

      Contenu principal...

      Site cree par [Votre nom] - 2026

      ``` **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 `
      `, ``, `
      `, `` | Tableau | | `
      ` | En-tete | | `