Séquence 1 – Activité 3 : Exercices HTML & CSS

Introduction : Activité d'approfondissement HTML & CSS

Dans cette activité, vous allez approfondir vos connaissances en HTML et CSS en réalisant des exercices pratiques. L'objectif est de consolider les bases que vous avez déjà acquises en créant des pages web plus structurées et stylisées. Vous utiliserez des balises HTML simples ainsi que des propriétés CSS pour donner un design à vos pages. À la fin de ces exercices, vous serez capables de créer des pages web basiques de manière autonome, avec une structure claire et une mise en page élégante.

Lien pour ordinateur

Exercice 1 : Insérer une Image et Ajouter une Légende

  • But : Manipuler les balises d’image et utiliser des styles CSS simples.
  • Instructions :
    • Ajouter une image sur une page web en utilisant la balise <img src="...">.
    • Ajouter une légende sous l’image en utilisant la balise <figcaption>.
    • Styliser l’image pour qu’elle soit centrée avec margin: auto; et ajouter une bordure autour de l’image.
  • Critères de réussite : Insertion correcte de l’image et légende stylisée.

Exercice 2 : Page Web "Ma Ville"

  • But : Structurer une page avec plusieurs sections et sous-sections.
  • Instructions :
    • Créer une page web qui décrit votre ville (au choix : Dubaï ou votre ville/pays d'origine).
    • Ajouter un titre principal avec le nom de la ville <h1>.
    • Ajouter trois sous-titres <h2> pour décrire les sections : "Lieux intéressants", "Culture", et "Gastronomie".
    • Sous chaque sous-titre, inclure deux ou trois paragraphes <p> qui donnent plus d'informations.
  • Critères de réussite : Page bien structurée avec des titres, sous-titres et paragraphes organisés.

Exercice 3 : Création d’une Page Web "Ma Recette Préférée"

  • But : Utiliser des listes et des images pour organiser des informations de manière visuelle.
  • Instructions :
    • Créer une page web qui présente votre recette (pour votre plat préféré par exemple).
    • Inclure un titre, une liste d'ingrédients sous forme de liste non ordonnée <ul>, et les étapes sous forme de liste ordonnée <ol>.
    • Ajouter une image représentant la recette.
    • Styliser la page avec CSS en changeant les couleurs, la police, et en ajoutant une bordure autour de l’image.
  • Critères de réussite : Utilisation correcte des listes et stylisation basique avec CSS.