Partie 1 : Premiers pas avec le texte (Exercices 1-10)
1. Ma première page : Crée une page qui affiche juste "Bonjour le monde !"
2. Mon titre : Utilise la balise <h1> pour écrire "Bienvenue sur ma page".
3. Un paragraphe : Sous le <h1>, ajoute un paragraphe <p> qui dit "Je découvre le HTML aujourd'hui."
4. Un deuxième titre : Ajoute un <h2> avec le texte "Mes hobbies".
5. Plusieurs paragraphes : Sous le <h2>, fais deux paragraphes <p> : un qui dit "J'aime le sport" et l'autre "J'aime
la musique".
6. Gras et italique : Dans un paragraphe, mets un mot en gras avec <strong> et un mot en italique avec <em>.
7. Toute la structure : Écris le code complet d'une page HTML (avec <!DOCTYPE html>, <html>, <head>, <title>,
<body>). Le titre de l'onglet doit être "Ma Page" et le contenu "C'est ma page".
8. Un grand titre, un petit titre : Utilise <h1>, <h2> et <h3> pour créer trois titres de tailles différentes.
9. Une ligne, une séparation : Dans un paragraphe, fais un saut de ligne avec <br>. Plus bas, trace un trait de
séparation avec <hr>.
10. Un mot important : Utilise la balise <mark> pour surligner le mot le plus important d'une phrase.
Partie 2 : Listes faciles (Exercices 11-16)
1. Ma liste de courses : Fais une liste à puces (<ul>) avec : Lait, Œufs, Pain.
2. Mes amis (par ordre) : Fais une liste numérotée (<ol>) avec les prénoms de 3 personnes.
3. Liste dans la liste : Dans ta liste de courses, ajoute une sous-liste à puces sous "Pain" : "Baguette" et "Pain de
mie".
4. Liste de mes jeux vidéo préférés : Fais une liste numérotée de 1 à 3 de tes jeux préférés.
5. Mélange de listes : Fais une liste numérotée des jours de la semaine (Lundi, Mardi) et sous "Mercredi", fais
une liste à puces des activités.
6. Changer les puces : Fais une liste à puces où les puces sont des carrés (ajoute type="square" dans la balise
<ul>).
Partie 3 : Liens et images simples (Exercices 17-24)
1. Lien vers Google : Crée un lien (<a>) avec le texte "Clique ici pour aller sur Google" qui ouvre le site https://
[Link].
2. Image de ton animal préféré : Trouve une image sur internet, sauvegarde-la (ex: [Link]). Insère-la dans ta
page avec la balise <img>.
3. Image qui manque : Mets une image avec un nom de fichier qui n'existe pas (ex: [Link]). Que vois-tu ?
Ajoute un texte alternatif avec alt="Description de l'image".
4. Lien sur une image : Mets l'image de l'exercice 18 dans un lien (<a>) qui mène vers Google.
5. Lien qui ouvre un nouvel onglet : Modifie le lien de l'exercice 17 pour qu'il s'ouvre dans un nouvel onglet
(target="_blank").
6. Un lien vers le haut de la page : En bas de ta page, crée un lien "Retour en haut" qui pointe vers #top.
7. Un lien pour envoyer un email : Crée un lien "Contacte-moi" qui ouvre ta messagerie (utilise
[Link]
8. Une icône : Trouve une petite image (icône) pour ton site et mets-la à côté du titre <h1>.
Partie 4 : Premiers tableaux (Exercices 25-30)
1. Mon premier tableau : Crée un tableau simple avec 2 lignes et 2 colonnes. Écris "Nom" et "Âge" dans la
première ligne.
2. En-tête du tableau : Refais le tableau de l'exercice 25, mais utilise <th> à la place de <td> pour la première
ligne (celle de "Nom" et "Âge").
3. Mes amis dans un tableau : Fais un tableau avec 3 colonnes : "Prénom", "Ville", "Âge". Remplis-le avec 2 de
tes amis.
4. Tableau avec bordure : Ajoute une bordure visible à ton tableau (ajoute border="1" dans la balise <table>).
Note : C'est juste pour voir, plus tard on fera mieux avec le CSS !
5. Un grand titre pour le tableau : Ajoute une légende au-dessus de ton tableau avec la balise <caption>.
6. Tableau du menu de la cantine : Crée un tableau pour le menu du lundi : 2 lignes (Entrée, Plat) et 2 colonnes
(Type, Exemple).
Partie 5 : Formulaires de base (Exercices 31-40)
1. Mon nom : Crée un formulaire avec juste un champ où on peut écrire son prénom et un bouton "OK".
2. Mot de passe secret : Ajoute un champ de type "password" à ton formulaire.
3. Une grande zone pour écrire : Ajoute une grande boîte de texte (<textarea>) où on peut écrire un message.
4. Liste des classes : Crée une liste déroulante (<select>) pour choisir entre "4ème", "3ème", "2nde".
5. Case à cocher : Ajoute une case à cocher (<input type="checkbox">) avec le texte "Je suis d'accord avec les
règles".
6. Choix unique (boutons radio) : Crée 3 boutons radio (<input type="radio">) pour choisir sa couleur préférée :
Rouge, Vert, Bleu. Ils doivent tous avoir le même name.
7. Bouton Envoyer : Remplace le bouton "OK" par un vrai bouton d'envoi (<input type="submit"
value="Envoyer">).
8. Bouton Effacer : À côté du bouton Envoyer, ajoute un bouton "Tout effacer" (type="reset").
9. Cacher des informations : Ajoute un champ caché (<input type="hidden" name="page" value="contact">) dans
ton formulaire.
10. Grouper des éléments : Utilise <fieldset> et <legend> pour faire un cadre autour de tes boutons radio avec la
légende "Couleur préférée".
Partie 6 : Projets simples et révisions (Exercices 41-50)
1. Page à propos de moi : Crée une page avec ton prénom en <h1>, une photo de toi (ou d'un avatar), une liste
de tes passions et un lien vers ton site préféré.
2. Ma recette de cuisine : Fais une page avec le nom de la recette en <h1>, la liste des ingrédients (liste à puces)
et les étapes (liste numérotée).
3. Mon emploi du temps : Crée un tableau simple de ton emploi du temps pour une journée (Matin/Après-midi en
lignes, Matières en colonnes).
4. Fiche d'un livre/film : Fais une fiche avec une image, le titre, le réalisateur/auteur (en gras) et un résumé en
paragraphe.
5. Page avec ancres : Fais une longue page avec 3 sections (ex: "Accueil", "Photos", "Contact"). En haut, mets
des liens qui, quand on clique, descendent directement à la section voulue.
6. Formulaire de contact : Fais un formulaire avec : Nom (texte), Email (email), Message (textarea), et bouton
Envoyer.
7. Page à deux colonnes (avec tableaux) : Utilise un tableau avec 1 ligne et 2 cellules pour faire une page avec
un menu à gauche et le contenu à droite.
8. Liste de définitions : Fais une liste de définitions (<dl>) pour 3 mots d'argot d'Internet que tu aimes (ex: "GG",
"AFK").
9. Bloc de citation : Trouve une citation que tu aimes et présente-la avec la balise <blockquote>.
10. Ma première page web complète : PROJET FINAL : Crée une page "Mes Vacances" avec :
· Un titre principal
· Une photo
· Un paragraphe racontant un souvenir
· Une liste des endroits visités
· Un petit tableau "Ce que j'ai aimé / Pas aimé"
· Un formulaire pour me laisser un commentaire sur ta page
· Un lien "Retour en haut" en bas de page