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.

• Seconde
• SNT : Culture et Citoyenneté Numérique
• 4 activités
• 20 min–50 min

Objectifs d’apprentissage

1. Expliquer le rôle du HTML dans la structuration sémantique et le contenu d'une page web.
2. Démontrer comment le CSS permet de séparer la présentation du contenu HTML pour améliorer l'accessibilité et la maintenance.
3. Analyser le fonctionnement du modèle client-serveur pour décrire le processus de requête et de réponse HTTP lors de la navigation web.
4. Identifier les risques de sécurité potentiels liés aux échanges entre un client (navigateur) et un serveur web.

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.

Préparation et détails

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.

Setup: Tables ou bureaux organisés en 4 à 6 pôles distincts dans la salle

Materials: Fiches de consignes par station, Matériel spécifique à chaque activité, Minuteur pour les rotations

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

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.

Préparation et détails

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.

Setup: Espace ouvert ou bureaux réorganisés pour la mise en scène

Materials: Fiches de personnage (contexte et objectifs), Fiche de mise en situation (scénario)

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

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é.

Préparation et détails

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.

Setup: Disposition de classe standard ; les élèves se tournent vers leur voisin

Materials: Consigne de discussion (projetée ou distribuée), Optionnel : fiche de prise de notes pour les binômes

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

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.

Préparation et détails

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.

Setup: Groupes en îlots avec accès aux ressources documentaires

Materials: Corpus de documents sources, Fiche de suivi du cycle de recherche, Protocole de formulation de questions, Canevas de présentation des résultats

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

Enseigner ce sujet

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.

À quoi s’attendre

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

Idée reçue courante

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.

Ce qu'il faut enseigner à la place

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.

Idées d'évaluation

Billet de sortie

After the Station Rotation activity, ask students to answer on a slip of paper: 1. Name one advantage of separating HTML from CSS. 2. Describe in one sentence what happens when you type a web address in your browser.

Vérification rapide

During the Think-Pair-Share activity, present students with two snippets of code (one HTML, one CSS) and ask them to identify which one structures the content and which one handles styling, justifying their answers in pairs before sharing with the class.

Question de discussion

After the Collaborative Investigation activity on client-server vulnerabilities, initiate a class discussion with the prompt: 'How could the client-server model be vulnerable to attacks, and what exchanged information could be sensitive?' Encourage students to cite specific examples from their investigations.

Extensions et étayage

• Challenge : Demandez aux élèves de reconstruire une page web simple en partant d'un screenshot, sans voir le code original, pour tester leur compréhension de la séparation HTML/CSS.
• Scaffolding : Pour les élèves en difficulté, fournissez des extraits de code partiellement remplis (par exemple, un HTML avec des balises de base et un CSS avec des couleurs définies) pour qu'ils se concentrent sur l'assemblage.
• Deeper : Proposez aux élèves avancés d'explorer le rôle du JavaScript dans le modèle client-serveur, en analysant comment ce langage peut modifier dynamiquement le contenu ou la présentation d'une page sans recharger celle-ci.

Vocabulaire clé

HTML (HyperText Markup Language)	Langage de balisage utilisé pour créer la structure et le contenu des pages web. Il définit les éléments comme les titres, les paragraphes et les liens.
CSS (Cascading Style Sheets)	Langage utilisé pour décrire la présentation et le style visuel d'un document écrit en HTML. Il contrôle les couleurs, les polices, les mises en page, etc.
Modèle Client-Serveur	Architecture où un client (par exemple, un navigateur web) demande des ressources ou des services à un serveur, qui les traite et les renvoie.
Requête HTTP	Message envoyé par un client à un serveur pour demander une ressource spécifique, comme une page web ou une image. Le protocole HTTP régit ces échanges.
Réponse HTTP	Message envoyé par un serveur à un client en réponse à une requête HTTP. Il contient la ressource demandée ou un code d'état indiquant le résultat de la requête.