Technologie · 5ème

Idées d’apprentissage actif

Création de pages web simples (HTML/CSS)

Les élèves apprennent mieux la création de pages web quand ils manipulent eux-mêmes le code. En écrivant du HTML pour structurer et du CSS pour styliser, ils voient immédiatement le lien entre le code et le résultat visuel. Cette approche concrète réduit l'abstraction souvent liée à l'apprentissage de la programmation.

• Programmes Officiels
• MEN: Cycle 4 - Creation de contenus numeriques
• MEN: Cycle 4 - Langages de programmation

• 15–35 min
• Binômes → Classe entière
• 4 activités

Activité 01

• Classe inversée
• 35 min · Binômes

Pair Programming : Ma première page web

En binôme, un élève dicte la structure HTML souhaitée tandis que l'autre tape le code. Ils alternent les rôles toutes les cinq minutes. Chaque binôme crée une page de présentation personnelle avec titre, photo, liste de centres d'intérêt et un lien vers un site favori.

Comment le HTML structure-t-il le contenu d'une page web ?

Conseil de facilitation

Pendant Pair Programming, assurez-vous que chaque binôme désigne un élève qui tapera le code et un autre qui relit les instructions, puis inversez les rôles après chaque étape.

À observer

Distribuez une courte liste de balises HTML courantes (ex: `<h1>`, `<p>`, `<a>`, `<img>`). Demandez aux élèves d'écrire à côté de chaque balise une phrase expliquant son rôle dans la structure d'une page web.

• Comprendre
• Appliquer
• Analyser
• Autogestion
• Conscience de soi

Activité 02

• Galerie marchande
• 25 min · Petits groupes

Galerie marchande: Avant/Après CSS

Chaque groupe part d'une même page HTML brute et applique un style CSS différent (couleurs, polices, disposition). Les résultats sont projetés côte à côte. Les élèves circulent et votent pour le design le plus lisible, en justifiant leur choix par des critères d'ergonomie.

Expliquez le rôle du CSS dans la présentation visuelle d'un site web.

Conseil de facilitation

Lors du Gallery Walk, demandez aux élèves d'observer les différences de mise en page et de noter le code CSS responsable de ces changements sur une feuille de route.

À observer

Sur un post-it, demandez aux élèves de nommer une propriété CSS qu'ils ont utilisée et d'expliquer en une phrase quel effet elle produit sur le texte ou un élément de la page web.

• Comprendre
• Appliquer
• Analyser
• Créer
• Compétences relationnelles
• Conscience sociale

Activité 03

• Classe inversée
• 20 min · Individuel

Chasse aux bugs : Trouver l'erreur

L'enseignant distribue un code HTML/CSS contenant cinq erreurs volontaires (balise non fermée, propriété CSS mal orthographiée, guillemets manquants). Les élèves travaillent individuellement pour identifier et corriger chaque erreur, puis comparent leurs corrections avec un voisin.

Concevez une page web simple présentant des informations personnelles.

Conseil de facilitation

Pendant la Chasse aux bugs, fournissez des extraits de code avec des erreurs précises (balises mal fermées, propriétés CSS incorrectes) pour cibler les difficultés récurrentes.

À observer

Après la création d'une page simple, les élèves échangent leurs fichiers HTML et CSS. Chaque élève doit vérifier si son camarade a bien utilisé au moins deux balises HTML différentes et une règle CSS. Ils notent un point fort et une suggestion d'amélioration.

• Comprendre
• Appliquer
• Analyser
• Autogestion
• Conscience de soi

Activité 04

• Penser-Partager-Présenter
• 15 min · Binômes

Penser-Partager-Présenter: Séparer structure et style

L'enseignant montre une page web et demande : quels éléments relèvent du HTML (structure) et lesquels du CSS (style) ? Les élèves réfléchissent seuls, échangent avec leur voisin, puis la classe construit collectivement un schéma de répartition HTML/CSS.

Comment le HTML structure-t-il le contenu d'une page web ?

Conseil de facilitation

Lors du Think-Pair-Share, utilisez deux couleurs différentes pour annoter le code HTML et CSS dans un même document afin de visualiser la séparation structure/style.

À observer

Distribuez une courte liste de balises HTML courantes (ex: `<h1>`, `<p>`, `<a>`, `<img>`). Demandez aux élèves d'écrire à côté de chaque balise une phrase expliquant son rôle dans la structure d'une page web.

• Comprendre
• Appliquer
• Analyser
• Conscience de soi
• Compétences relationnelles

Quelques notes pour enseigner cette unité

Commencez par montrer une page web simple sans CSS pour que les élèves voient l'impact du style sur la présentation. Évitez de mélanger trop tôt les concepts de structure et de style, car cela peut créer de la confusion. Les recherches en pédagogie de la programmation recommandent de commencer par des exemples concrets et manipulables avant d'aborder les abstractions.

Les élèves comprennent que le HTML structure le contenu et que le CSS le met en forme. Ils savent utiliser au moins trois balises HTML courantes et une propriété CSS pour modifier l'apparence d'une page. Ils peuvent expliquer cette distinction à un pair.

---

Attention à ces idées reçues

• During Pair Programming, les élèves pensent que le HTML et le CSS sont des langages de programmation.

  Pendant Pair Programming, montrez une page web simple et demandez aux élèves de repérer où se trouve la logique qui change l'apparence (CSS) et où se trouve la structure du contenu (HTML). Comparez avec un programme Scratch qui utilise des blocs pour montrer que seul ce dernier contient de la logique.

• During Gallery Walk, les élèves croient que les couleurs et la mise en page se définissent dans le HTML.

  Pendant le Gallery Walk, affichez deux versions d'une même page : une sans CSS et une avec CSS. Demandez aux élèves de pointer sur le document HTML les balises de structure et sur le document CSS les propriétés qui modifient l'apparence. Insistez sur l'idée que le HTML ne doit contenir que des balises.

• During Chasse aux bugs, les élèves pensent qu'une erreur de syntaxe empêche toujours la page de s'afficher.

  Pendant la Chasse aux bugs, montrez des exemples d'erreurs de syntaxe (balise mal fermée, propriété CSS avec une valeur incorrecte) et demandez aux élèves d'observer comment le navigateur affiche la page malgré tout. Soulignez que certaines erreurs produisent des résultats inattendus plutôt qu'un blocage total.

---

Méthodes utilisées dans ce dossier

• Classe inversée
• Galerie marchande
• Penser-Partager-Présenter