Exercice 1 : Structure de Base HTML
Objectif : Créer un document HTML simple avec la structure de base.
Instructions
• Crée un fichier [Link].
• Ajoute la structure de base HTML :
• Inclue le <!DOCTYPE html>, la balise <html> avec lang="fr", et la section <head>.
• Dans le <head>, ajoute :
• <title> : Le titre de ta page.
• <meta charset="UTF-8"> pour l’encodage.
• Dans le <body>, ajoute un <h1> avec un titre de ton choix et un <p> pour un court paragraphe.
Exercice 2 : Utilisation des Balises de Texte et Images
Objectif : Apprendre à utiliser les balises de texte et d’images.
Instructions
• Dans le fichier [Link], ajoute :
• Un titre principal avec <h1>.
• Un sous-titre avec <h2>.
• Trois paragraphes avec <p>.
• Insère une image avec <img> :
• Utilise un fichier d’image de ton choix (ou trouve une image en ligne).
• Assure-toi d’ajouter un attribut alt décrivant l’image.
Exercice 3 : Créer une Liste de Liens
Objectif : Créer des liens et des listes pour organiser du contenu.
Instructions
• Dans le fichier [Link], ajoute une section avec un titre <h3>.
• Crée une liste non ordonnée (<ul>) contenant trois liens (<a>) vers des sites de ton choix.
• Crée une autre liste ordonnée (<ol>) contenant trois étapes d’une recette, d’un exercice ou de
quelque chose que tu aimes.
Exercice 4 : Appliquer du Style avec du CSS Interne
Objectif : Appliquer du style directement dans HTML en utilisant CSS interne.
Instructions
Dans ton fichier [Link], ajoute une balise <style> dans la section <head>.
Dans le bloc <style>, applique les styles suivants :
• Change la couleur du texte du <h1>.
• Mets le texte du <h2> en italique.
• Modifie la couleur de fond de tes paragraphes (<p>).
• Centrer l’image.
Exercice 5 : Création et Utilisation d’une Classe CSS
Objectif : Apprendre à styliser des éléments en utilisant des classes CSS.
Instructions
Dans le fichier [Link], crée trois paragraphes <p> et donne à chacun la classe important.
Dans le bloc <style>, ajoute une classe .important :
Change la couleur du texte.
Change la taille de la police.
Ajoute un soulignement.
Exercice 6 : Création d’un Fichier CSS Externe
Objectif : Apprendre à utiliser un fichier CSS externe pour styliser une page.
Instructions
• Crée un fichier [Link].
• Lien le fichier [Link] dans [Link] avec <link rel="stylesheet" href="[Link]"> dans la
section <head>.
• Dans [Link], ajoute :
• Un style pour le <body> : couleur de fond différente et une police sans-serif.
• Un style pour le <h1> : couleur de texte différente et texte centré.
• Un style pour les liens <a> : couleur de texte, suppression du soulignement.
Exercice 7 : Styliser avec Marges et Espacements
Objectif : Pratiquer l’utilisation de margin et padding pour espacer les éléments.
Instructions
Dans [Link], ajoute les styles suivants :
• Un style pour le titre principal <h1> avec une marge extérieure (margin) pour l’espacer du haut
de la page.
• Un style pour les paragraphes <p> avec une marge intérieure (padding) pour espacer le texte
des bords.
• Un style pour l’image, avec une marge extérieure pour l’éloigner des autres éléments.
Exercice 8 : Application de Couleurs et d’Effets de
Survol
Objectif : Utiliser les couleurs et l’effet de survol (hover) en CSS.
Instructions
Dans [Link], ajoute :
Un style pour les liens (<a>) avec une couleur de texte différente.
Un effet de survol (:hover) pour que le lien change de couleur lorsque l’on passe la souris dessus.
Exercice 9 : Créer une Carte Simple avec des Styles
CSS
Objectif : Créer une "carte" pour organiser des informations dans une mise en page
agréable.
Instructions
Dans [Link], ajoute une div avec la classe carte qui contiendra :
• Une image (par exemple, une image de produit ou de profil).
• Un titre pour la carte (<h2>).
• Une description courte (<p>).
Dans [Link], ajoute un style pour .carte :
• Donne-lui une largeur fixe, un fond clair, des marges et du padding.
• Ajoute une bordure et arrondis les coins avec border-radius.
• Ajoute une ombre avec box-shadow.
