Internet et le Web : Architecture et Navigation · 1er Trimestre

Le Web : HTML, CSS et Client-Serveur

Découverte de la structure des pages web et du modèle d'interaction entre le navigateur et le serveur.

À propos de ce thème

Les pages web que les élèves consultent chaque jour résultent de l'interaction entre trois composantes : le HTML qui structure le contenu, le CSS qui en définit la présentation, et le modèle client-serveur qui organise leur acheminement. Séparer le fond de la forme est un principe fondamental du développement web qui améliore la maintenance, l'accessibilité et l'adaptabilité des sites.

En Seconde, ce sujet permet aux élèves de comprendre les coulisses d'une page web : le navigateur (client) envoie une requête HTTP au serveur, qui répond avec les fichiers nécessaires. Cette mécanique pose aussi des questions de sécurité, car chaque échange entre client et serveur peut être intercepté ou manipulé. Les ateliers pratiques où les élèves modifient du code source et observent le résultat en temps réel ancrent ces concepts abstraits dans une expérience directe et stimulante.

Objectifs d'apprentissage

• Expliquer le rôle du HTML dans la structuration sémantique et le contenu d'une page web.
• Démontrer comment le CSS permet de séparer la présentation du contenu HTML pour améliorer l'accessibilité et la maintenance.
• 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.
• Identifier les risques de sécurité potentiels liés aux échanges entre un client (navigateur) et un serveur web.

Avant de commencer

Introduction à Internet et au World Wide Web

Pourquoi : Les élèves doivent avoir une compréhension de base de ce qu'est Internet et comment le Web fonctionne pour appréhender les concepts de client, serveur et navigation.

Notions de base de la programmation

Pourquoi : Une familiarité avec les concepts de base comme les instructions, les variables et la logique est utile pour comprendre la structure du code HTML et CSS.

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.

Idées d'apprentissage actif

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.

⏱ 50 min·Petits groupes

Générer mission

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.

⏱ 35 min·Classe entière

Générer mission

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

⏱ 20 min·Binômes

Générer mission

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.

⏱ 40 min·Petits groupes

Générer mission

Liens avec le monde réel

Les développeurs web chez des entreprises comme Google ou Meta utilisent HTML et CSS quotidiennement pour construire et maintenir les interfaces utilisateur de leurs plateformes, assurant une expérience cohérente sur différents appareils.

Les administrateurs système gèrent les serveurs web qui hébergent des millions de sites, surveillant les requêtes et les réponses HTTP pour garantir la disponibilité et la sécurité des services en ligne, comme ceux utilisés par les banques pour les transactions en ligne.

Attention à ces idées reçues

Idée reçue courante

Le serveur envoie une 'photo' de la page web au navigateur.

Ce qu'il faut enseigner à la place

Le serveur envoie du code (HTML, CSS, JavaScript) que le navigateur interprète et reconstruit localement. Observer l'inspecteur de code aide les élèves à voir que la page est un document textuel, pas une image.

Idée reçue courante

HTTPS et HTTP sont la même chose, le 's' est juste une variante.

Ce qu'il faut enseigner à la place

Le 's' signifie 'secure' et indique que les échanges sont chiffrés par le protocole TLS. Sans HTTPS, les données circulent en clair et peuvent être lues par un intermédiaire. Montrer la différence avec un outil de capture réseau rend ce risque tangible.

Idées d'évaluation

Billet de sortie

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.

Vérification rapide

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.

Question de discussion

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.

Questions fréquentes

Pourquoi est-il important de séparer le contenu de la mise en forme ?

Cette séparation permet de modifier l'apparence d'un site entier en changeant un seul fichier CSS, sans toucher au contenu HTML. Elle facilite aussi l'accessibilité, car un lecteur d'écran peut interpréter le HTML indépendamment du style visuel. C'est un principe clé de la maintenance web professionnelle.

Comment le navigateur sait-il où trouver le serveur d'un site ?

Le navigateur utilise le DNS pour traduire le nom de domaine en adresse IP, puis établit une connexion TCP avec le serveur à cette adresse. Il envoie ensuite une requête HTTP précisant la ressource demandée. Le serveur traite la requête et renvoie les fichiers correspondants.

Quels risques de sécurité existent entre le client et le serveur ?

Les principaux risques sont l'interception des données en transit (attaque 'man-in-the-middle'), l'injection de code malveillant (XSS), et l'usurpation de serveur. Le chiffrement HTTPS, la validation des entrées côté serveur et les en-têtes de sécurité HTTP sont les principales protections contre ces menaces.

Comment les ateliers pratiques aident-ils à comprendre le modèle client-serveur ?

Le modèle client-serveur est un échange invisible qui se déroule en quelques millisecondes. En jouant physiquement les rôles du navigateur et du serveur, ou en observant le trafic réseau dans les outils de développement, les élèves rendent visible chaque étape de la communication et identifient les points de vulnérabilité.