En classe de seconde, le programme de SNT permet de découvrir comment fonctionne le numérique au-delà de la simple utilisation des outils. Parmi les thèmes abordés, le Web occupe une place importante : comment une page est-elle construite ? Quel est le rôle du HTML ? À quoi sert le CSS ? Comment intégrer une image, une vidéo ou un lien ?
C’est précisément l’objectif de ce premier travail pratique consacré au Web : modifier progressivement une page HTML sur le thème de Pix, jusqu’à obtenir une page complète et mise en forme.
Comprendre la structure d’une page Web
Pour beaucoup d’élèves, une page Web est d’abord ce qu’ils voient dans leur navigateur. Pourtant, derrière l’affichage se trouvent plusieurs langages qui jouent des rôles différents.
Dans ce TP, les élèves commencent par distinguer deux notions essentielles :
- le contenu d’une page ;
- son style de présentation.
Ils apprennent ainsi à étudier et à modifier une page HTML simple, mais aussi à créer des renvois vers différents contenus.
L’objectif n’est donc pas simplement de recopier du code : il s’agit de commencer à comprendre comment une page Web est organisée.
Apprendre le HTML étape par étape
Le travail est construit de manière progressive.
Les élèves commencent par modifier le contenu d’un fichier index.html. Ils découvrent notamment les balises permettant de structurer un texte avec des titres, des paragraphes et des listes.
Ils travaillent par exemple sur une page consacrée à la culture numérique et à Pix. L’activité les amène notamment à créer des titres, à utiliser des listes à puces et à organiser différentes parties d’un document HTML.
Cette progression permet de comprendre une idée essentielle : le navigateur interprète le code HTML pour construire la page affichée à l’écran.
Intégrer une vidéo dans une page Web
Une page Web moderne ne contient pas uniquement du texte.
Dans une autre partie du TP, les élèves découvrent comment intégrer une vidéo YouTube directement dans leur page. Ils utilisent pour cela le code d’intégration fourni par la plateforme, puis l’insèrent dans leur fichier HTML.
Ils découvrent ainsi concrètement qu’une page Web peut agréger différents types de contenus provenant de plusieurs services.
Le résultat visible dans le document présente par exemple une vidéo Pix directement intégrée à la page.
Créer des listes structurées
Les élèves découvrent également la différence entre une liste simple et une liste numérotée.
Ils réalisent notamment une liste présentant les cinq grands domaines de compétences numériques :
- Informations et données
- Communication et collaboration
- Création de contenu
- Protection et sécurité
- Environnement numérique
Cette partie permet d’introduire les balises HTML <ol> et <li>.
Le choix de Pix comme fil conducteur permet ainsi de travailler simultanément le Web et la culture numérique.
Créer des liens et rendre une image cliquable
Un site Web prend tout son intérêt lorsqu’il permet de naviguer vers d’autres ressources.
Les élèves apprennent donc à créer un lien vers le site de Pix avec la balise <a>. Ils découvrent ensuite comment appliquer ce même principe à une image afin de rendre le logo Pix cliquable.
C’est une étape importante : ils comprennent que le Web repose en grande partie sur des documents reliés les uns aux autres par des hyperliens.
Passer du HTML au CSS
Une fois le contenu construit, reste à améliorer son apparence.
Les élèves découvrent alors un second langage : le CSS.
Ils modifient plusieurs propriétés de la page :
- couleur de fond ;
- police de caractères ;
- taille du texte ;
- marges ;
- couleur et taille des titres.
Le fichier CSS est ensuite relié à la page HTML grâce à une balise <link> placée dans l’en-tête du document.
Ils découvrent ainsi une séparation fondamentale du développement Web :
HTML structure le contenu ; CSS agit sur sa présentation.
Une première page Web complète
À la fin du TP, les différentes étapes sont réunies dans une seule page.
Le résultat obtenu présente notamment :
- des titres hiérarchisés ;
- du texte et des listes ;
- une vidéo intégrée ;
- les domaines de compétences Pix ;
- un lien vers le site Pix ;
- une image cliquable ;
- une mise en forme réalisée en CSS.
La page finale obtenue montre concrètement le chemin parcouru : les élèves sont partis d’un fichier HTML à compléter pour parvenir à une véritable page Web structurée et personnalisée. Le résultat final fourni avec l’activité permet d’en visualiser l’ensemble sur une seule page.
Apprendre le numérique en créant
Ce type d’activité illustre bien l’esprit de la SNT : il ne s’agit pas seulement d’utiliser les outils numériques, mais de commencer à comprendre comment ils fonctionnent.
En manipulant directement le HTML et le CSS, les élèves découvrent ce qui se cache derrière les pages qu’ils consultent quotidiennement.
Pour certains, cette première expérience constitue également une première approche de la programmation et peut donner envie d’aller plus loin, notamment en choisissant la spécialité NSI en classe de première.
Le développement de la culture numérique et la découverte concrète de l’informatique constituent justement deux objectifs importants du projet de valorisation des enseignements numériques du lycée.
Laisser un commentaire