Technologie · Seconde

Idées d’apprentissage actif

Le Web : HTML, CSS et Client-Serveur

Les élèves comprennent mieux les concepts abstraits du développement web quand ils manipulent directement le code et observent son effet. Cette unité active les engage à déconstruire ce qu’ils voient tous les jours sur Internet, ce qui renforce leur compréhension des couches techniques sous-jacentes.

• Programmes Officiels
• MEN: Lycee - Le Web
• MEN: Lycee - Langages et programmation

• 20–50 min
• Binômes → Classe entière
• 4 activités

Activité 01

• Rotation par ateliers
• 50 min · Petits groupes

Rotation par ateliers: Déconstruire une page web

Trois ateliers tournants : un groupe analyse la structure HTML d'un site avec l'inspecteur du navigateur, un deuxième modifie les styles CSS pour transformer l'apparence d'une page, et le troisième observe le trafic réseau client-serveur dans l'onglet Network.

Pourquoi est-il important de séparer le contenu de la mise en forme dans la conception d'un site web ?

Conseil de facilitation

Pendant la Station Rotation, placez un navigateur ouvert avec l'inspecteur de code sur chaque poste pour que les élèves voient en temps réel comment le HTML et le CSS s'articulent.

À observer

Demandez aux élèves de répondre par écrit à ces deux questions : 1. Citez un avantage de séparer le HTML du CSS. 2. Décrivez en une phrase ce qui se passe quand vous tapez une adresse web dans votre navigateur.

• Mémoriser
• Comprendre
• Appliquer
• Analyser
• Autogestion
• Compétences relationnelles

Activité 02

• Jeu de rôle
• 35 min · Classe entière

Jeu de rôle: Le dialogue HTTP

Un élève joue le navigateur, un autre le serveur. Le 'navigateur' envoie des requêtes écrites (GET /index.html) et le 'serveur' doit répondre avec les bons fichiers (HTML, CSS, images) dans le bon ordre. Les erreurs (404, 500) sont simulées par des cartes aléatoires.

Comment le modèle client-serveur détermine-t-il la façon dont une page web nous parvient ?

Conseil de facilitation

Pour le Role Play HTTP, donnez aux élèves des cartes avec des rôles précis (navigateur, serveur, routeur) et des exemples de requêtes/réponses à échanger pour éviter des dialogues trop libres.

À observer

Présentez aux élèves un extrait de code HTML et un extrait de code CSS. Demandez-leur d'identifier quel code structure le contenu et quel code gère la mise en forme, en justifiant leur réponse.

• Appliquer
• Analyser
• Évaluer
• Conscience sociale
• Conscience de soi

Activité 03

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

Penser-Partager-Présenter: Séparation contenu et présentation

Les élèves reçoivent une page web dont le CSS a été retiré. Ils observent le résultat brut, réfléchissent à l'utilité de cette séparation, puis partagent leurs conclusions sur les avantages pour la maintenance et l'accessibilité.

Quels risques de sécurité l'interaction entre client et serveur peut-elle introduire ?

Conseil de facilitation

Lors du Think-Pair-Share, exigez des exemples concrets de pages web où le HTML et le CSS sont bien séparés, et d'autres où ce n'est pas le cas, pour ancrer la discussion dans des cas réels.

À observer

Lancez une discussion en classe avec la question : 'Comment le modèle client-serveur pourrait-il être vulnérable à des attaques, et quelles informations échangées pourraient être sensibles ?' Encouragez les élèves à proposer des exemples concrets.

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

Activité 04

• Cercle de recherche
• 40 min · Petits groupes

Cercle de recherche: Failles client-serveur

Les groupes analysent des scénarios simplifiés d'attaques (injection de script, interception de données non chiffrées) pour identifier les vulnérabilités du modèle client-serveur. Ils proposent des mesures de protection pour chaque cas.

Pourquoi est-il important de séparer le contenu de la mise en forme dans la conception d'un site web ?

Conseil de facilitation

Pendant l'investigation collaborative sur les failles client-serveur, limitez le nombre de sites à analyser pour éviter une surcharge d'informations et recentrez les élèves sur des exemples simples comme les formulaires de connexion.

À observer

Demandez aux élèves de répondre par écrit à ces deux questions : 1. Citez un avantage de séparer le HTML du CSS. 2. Décrivez en une phrase ce qui se passe quand vous tapez une adresse web dans votre navigateur.

• Analyser
• Évaluer
• Créer
• Autogestion
• Conscience de soi

Quelques notes pour enseigner cette unité

Commencez par montrer une page web familière aux élèves et demandez-leur de deviner ce qui se passe derrière l'écran. Cette approche 'révélation progressive' crée un besoin de comprendre les mécanismes techniques. Évitez de donner trop d’informations théoriques d’emblée : privilégiez l’exploration guidée pour ancrer les concepts. La recherche montre que les élèves retiennent mieux quand ils construisent eux-mêmes leur compréhension à partir de preuves concrètes, comme le code source ou les requêtes HTTP.

Les élèves démontrent une compréhension claire de la séparation entre le contenu (HTML), la présentation (CSS) et le transport (client-serveur) en expliquant les rôles de chaque couche. Ils identifient aussi les risques liés à une mauvaise gestion de ces couches, notamment en matière de sécurité.

---

Attention à ces idées reçues

• During the Station Rotation activity, watch for students who think that the browser displays a 'finished image' of the page instead of interpreting code. Correct this by having them open the developer tools (F12) and inspect the HTML/CSS tabs to see the raw text-based structure.

  During the Role Play activity, clarify that the 's' in HTTPS stands for 'secure' by using a network capture tool like Wireshark or Fiddler to show unencrypted HTTP traffic compared to encrypted HTTPS traffic. Have students observe the difference in data readability.

---

Méthodes utilisées dans ce dossier

• Rotation par ateliers
• Jeu de rôle
• Penser-Partager-Présenter
• Cercle de recherche