From c00418ee78bfbe4e8a958736907d9dd260168a16 Mon Sep 17 00:00:00 2001 From: Florian Mathieu Date: Fri, 6 Feb 2026 13:17:10 +0100 Subject: [PATCH] ajout fiche aide tp --- web/tp/fiche_exercices_html.md | 362 +++++++++++++++++++++++++++++++++ 1 file changed, 362 insertions(+) create mode 100644 web/tp/fiche_exercices_html.md diff --git a/web/tp/fiche_exercices_html.md b/web/tp/fiche_exercices_html.md new file mode 100644 index 0000000..705de5b --- /dev/null +++ b/web/tp/fiche_exercices_html.md @@ -0,0 +1,362 @@ +# 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 + + + + + + + + + + + + + + + + +
      Jour8h-9h9h-10h
      LundiMathsNSI
      MardiFrancaisAnglais
      +``` + +**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 | +| `