Technologie · 5ème · Réseaux et Communication : Comment Internet fonctionne · 1er Trimestre

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

Initiation aux langages de base pour structurer et styliser du contenu sur le web.

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

À propos de ce thème

La création de pages web simples constitue une porte d'entrée concrète dans la programmation au Cycle 4. En manipulant le HTML pour structurer le contenu (titres, paragraphes, images, liens) et le CSS pour le mettre en forme (couleurs, polices, mise en page), les élèves comprennent que chaque page web repose sur un code lisible et modifiable. Cette compétence s'inscrit directement dans les attendus du programme de Technologie sur la création de contenus numériques et les langages de programmation.

L'intérêt pédagogique est double : les élèves produisent un résultat visible immédiatement dans le navigateur, ce qui renforce la motivation, et ils développent la rigueur syntaxique nécessaire à tout langage informatique. Les approches actives sont particulièrement efficaces ici : le pair programming permet de détecter les erreurs de syntaxe à deux, et les projets collaboratifs donnent un sens réel à la publication sur le web.

Questions clés

1. Comment le HTML structure-t-il le contenu d'une page web ?
2. Expliquez le rôle du CSS dans la présentation visuelle d'un site web.
3. Concevez une page web simple présentant des informations personnelles.

Objectifs d'apprentissage

• Identifier les balises HTML courantes pour structurer un contenu textuel (titres, paragraphes, listes).
• Expliquer le rôle des sélecteurs et des propriétés CSS pour modifier l'apparence des éléments HTML.
• Concevoir une page web simple en utilisant HTML pour la structure et CSS pour la mise en forme basique.
• Analyser la relation entre un fichier HTML et un fichier CSS pour comprendre comment la présentation est appliquée.
• Créer un lien hypertexte fonctionnel entre deux pages HTML.

Avant de commencer

Utilisation de l'ordinateur et de ses périphériques

Pourquoi : Les élèves doivent être à l'aise avec la manipulation d'un ordinateur, l'utilisation d'un clavier et d'une souris, pour pouvoir écrire et enregistrer du code.

Concepts de base de la navigation sur Internet

Pourquoi : Comprendre comment fonctionnent les liens hypertextes et l'affichage des pages web aide à saisir le but de la création de pages web.

Vocabulaire clé

Balise HTML	Un mot-clé entouré de crochets, utilisé pour définir la structure d'un élément dans une page web (par exemple, `<p>` pour un paragraphe).
Sélecteur CSS	Un motif utilisé pour sélectionner les éléments HTML que l'on souhaite styliser (par exemple, `h1` pour sélectionner tous les titres de niveau 1).
Propriété CSS	Un attribut de style appliqué à un élément sélectionné, comme `color` pour la couleur du texte ou `font-size` pour la taille de la police.
Structure (HTML)	L'organisation logique du contenu d'une page web à l'aide de balises pour définir les titres, paragraphes, images, etc.
Présentation (CSS)	L'apparence visuelle d'une page web, contrôlée par des règles CSS pour définir les couleurs, les polices, les marges, etc.

Attention à ces idées reçues

Idée reçue courante

Le HTML et le CSS sont des langages de programmation.

Ce qu'il faut enseigner à la place

Le HTML est un langage de balisage (il structure) et le CSS est un langage de style (il met en forme). Ni l'un ni l'autre ne contient de logique conditionnelle ou de boucles. La distinction devient claire quand les élèves comparent leurs pages statiques avec un programme Scratch qui réagit à des conditions.

Idée reçue courante

Les couleurs et la mise en page se définissent dans le HTML.

Ce qu'il faut enseigner à la place

Historiquement, le HTML incluait des attributs de style, mais la bonne pratique moderne sépare strictement structure (HTML) et présentation (CSS). L'activité Avant/Après CSS montre concrètement qu'une même structure peut prendre des apparences très différentes.

Idée reçue courante

Une erreur de syntaxe empêche toujours la page de s'afficher.

Ce qu'il faut enseigner à la place

Contrairement à un langage compilé, le navigateur tente d'interpréter le HTML même s'il contient des erreurs, ce qui peut produire un affichage inattendu plutôt qu'un message d'erreur. Les chasses aux bugs apprennent aux élèves à repérer ces erreurs silencieuses.

Idées d'apprentissage actif

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.

35 min·Binômes

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.

25 min·Petits groupes

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.

20 min·Individuel

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.

15 min·Binômes

Liens avec le monde réel

• Les développeurs web utilisent HTML et CSS quotidiennement pour construire les sites que nous visitons, comme ceux des librairies en ligne (par exemple, Fnac.com) ou des sites d'actualités (par exemple, LeMonde.fr).
• Les graphistes et les concepteurs d'interfaces (UI designers) travaillent en étroite collaboration avec les développeurs pour s'assurer que la présentation visuelle d'un site web, définie par CSS, correspond à l'identité de la marque et à l'expérience utilisateur souhaitée.

Idées d'évaluation

Vérification rapide

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.

Billet de sortie

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.

Évaluation par les pairs

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.

Questions fréquentes

Quelle est la différence entre HTML et CSS pour créer un site web ?

Le HTML définit la structure et le contenu de la page : titres, paragraphes, images, liens. Le CSS contrôle l'apparence visuelle : couleurs, tailles de texte, disposition des éléments, espacement. Les deux fonctionnent ensemble : le HTML dit ce qui est affiché, le CSS dit comment c'est affiché.

Par quoi commencer pour créer une page web en 5ème ?

On commence par un fichier texte avec l'extension .html contenant les balises de base : <!DOCTYPE html>, <html>, <head>, <body>. Ensuite on ajoute du contenu avec des balises comme <h1> pour les titres et <p> pour les paragraphes. Un simple navigateur suffit pour visualiser le résultat immédiatement.

Faut-il un logiciel spécial pour coder en HTML/CSS au collège ?

Non, un éditeur de texte gratuit comme Notepad++ ou Visual Studio Code suffit. Le navigateur web (Firefox, Chrome) fait office de visualiseur. Cette simplicité d'outillage est un atout pédagogique : les élèves voient que le code est du texte ordinaire, pas un processus mystérieux.

Comment l'apprentissage actif facilite-t-il la création de pages web ?

Le pair programming permet de détecter les erreurs de syntaxe à deux yeux plutôt qu'un, réduisant la frustration. Les Galerie marchandes comparant différents styles CSS développent le sens critique. Produire une page visible et fonctionnelle donne un retour immédiat qui ancre les concepts bien mieux qu'un exercice théorique.