Puzzle Thimble sur les balises HTML
CC-BY-SA par Mozilla et Digital Corps
15 minutes
Les participants se familiarisent avec la lecture, l'écriture et la participation sur le Web dans ce module en six parties. On découvre les fondations du Web en produisant et en collaborant.
Activité 2 sur 6
Lire sur le Web
Des compétences pour le XXIe siècle
Collaboration Communication Résolution de problèmesLes compétences de la littératie web
SynthétiserObjectifs d'apprentissage
- Comprendre et illustrer la façon dont les balises ouvrantes et fermantes forment des éléments HTML sur une page web.
Public
- 13 ans et plus
- Utilisateurs novices sur le Web
Matériels
- Des cartes avec les balises ouvrantes et fermantes des éléments HTML les plus utilisés tels que
p,h1etimg.
-
Préparation
Écrivez les balises « ouvrantes » et « fermantes » sur deux cartes ou post-its (choisissez des couleurs différentes pour chaque paire, par exemple : les balises
<html>en bleu,<head>en orange,<body>en vert foncé,<p>en vert clair,<title>en rose = 5 paires), et imprimez un document HTML simple qui pourra servir d'aide-mémoire. -
Activité
10 minutesPour commencer, répartissez les cartes dans la salle et demandez à chaque participant de choisir une balise. S'il y a moins de 10 participants, réduisez le nombre de balises (en commençant par les balises les moins importantes comme
<h1>et</h1>,<p>et</p>ou dites-leur de trouver une paire « parfaite » (par exemple :<head>et</head>)).Ensuite, demandez aux participants de trouver la personne qui détient la balise qui correspond à la leur (par exemple, une personne A qui tient
<body>doit trouver une personne B qui tient</body>) et d'expliquer au reste du groupe ce qu'ils pensent que leur balise signifie dans le document HTML (ils peuvent utiliser l'aide-mémoire HTML). Après que les paires aient décrit leur rôle, demandez au groupe d'imbriquer les balises dans le bon ordre. S'il y a suffisamment de participants, vous pouvez leur demander de former des rangées dans la salle. Si l'espace est limité ou si une personne possède plus d'une balise, vous pouvez utiliser une surface (une table ou le sol) pour placer les balises. On rappellera qu'il faut éviter que les balises restent ouvertes.Enfin, à partir de ces réponses, construisez une version numérique du puzzle dans Thimble et demandez au groupe de choisir ce qu'ils veulent écrire à l'intérieur de
<p>et<h1>(ou, si ceux-ci ont été retirés du jeu, ce qu'ils veulent écrire dans<head>et<body>). -
Réflexions
5 minutesDemandez au groupe d'évaluer ce qu'il a réalisé. Est-ce que les participants pensent avoir créé un document fonctionnel dans Thimble ? S'il y a des erreurs dans l'ordre des éléments, demandez au groupe de « déboguer » le code et de proposer des corrections aux autres. Poursuivez cette phase de débogage jusqu'à ce que l'ensemble des participants ait pu construire un modèle Thimble fonctionnel.