Des puzzles pour apprendre le HTML
CC-BY-SA par Mozilla, ginger coons, Mark Lesser, Thomas Park et Karen Smith
30 minutes
Explorez les compétences de la littératie web avec ces activités–puzzles conçues pour impliquer des participants dans l'apprentissage hors ligne du Web.
Activité 3 sur 6
Consulter le Web et y intervenir
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
- Apprendre la façon dont les balises HTML fonctionnent.
- Explorer les balises « webmaking 101 » et les composants d'un site web.
- Explorer le balisage de texte comme un composant de l'architecture web et la carte de la littératie web.
- Résoudre un puzzle HTML avec une syntaxe de recherche.
Public
- 13 ans et plus
- Utilisateurs novices sur le Web
Matériel
- Des cartes étiquetées avec des balises ouvrantes et fermantes d'éléments fréquents comme
p,h1, etimg
-
Préparation
Ces activités sont conçues pour des environnements hors ligne. Il sera utile d'imprimer ces activités en avance si possible.
Créer des groupes de balises HTML fréquentes sur des post-it. Incluez toutes les balises que l'on trouve dans la structure d'une page HTML standard (regardez un exemple comme celui-ci). Chaque post-it devrait contenir une seule balise, comme
<p>avec la balise fermante correspondante (par exemple,</p>) sur un autre post-it.Tout au long des activités, les participants peuvent collaborer pour s'entraider et travailler vers des solutions. Les mentors et enseignants peuvent fournir les solutions correctes aux balises HTML correspondantes dans les activités ci-dessous, si vous souhaitez ajouter des éléments en ligne à l'un des puzzle, les participants peuvent consulter leurs erreurs HTML sur Thimble, l'éditeur de code en ligne de Mozilla.
-
Puzzle de balise HTLM humains, Partie 1
5 minutesAssignez de façon aléatoire vos post-it de balises HTML aux participants. Chacun doit recevoir une balise.
Demandez aux participants de trouver la personne qui a la balise correspondante à la leur. Cela signifie que la personne qui détient
<p>devrait trouver la personne qui détient</p>, la personne qui détient<h1>devrait trouver la personne qui détient</h1>, et ainsi de suite.Une fois que les participants ont trouvé leur partenaire de balise, demandez-leur de discuter rapidement des sens possibles de leur balise. Que signifierait
<h1>? Quel serait le but de<body>? -
Puzzle de balise HTML humains, Partie 2
10 minutesEnsuite, organisez la pièce en rangées, numérotées de 1 à 7. Chaque rangée doit être clairement marquée, et devrait avoir suffisamment de place pour trois personnes assises côte à côte.
Assurez-vous que chaque participant a toujours la balise de la partie 1 de l'activité. S'il n'y a pas assez de participants pour constituer l'échantillon du document trouvé ici, retirez certaines balises, à commencer par
<h1>et</h1>.Demandez aux participants d'expliquer au groupe quel rôle ils pensent que leurs balises jouent dans un document HTML. À partir de ces réponses, voyez si le groupe peut arriver à un consensus pour déterminer les fonctions des balises.
Ensuite, à partir du consensus de l'étape précédente, demandez aux participants de se déplacer dans la rangée pour laquelle ils pensent que leur balise appartient. Si une rangée a plus d'un participant, demandez-leur de se placer en ordre, de gauche à droite, selon leur compréhension des balises ouvrantes et fermantes.
À la fin de l'activité, faites une pause et demandez au groupe d'évaluer la performance collectivement. Pensent-ils avoir créé un document HTML qui fonctionne ? S'il y a des erreurs dans leur disposition, demandez aux participants de « déboguer » le code, de proposer des suggestions de placement à leurs camarades. Continuez le débogage, fournissez de l'aide si nécessaire, ce jusqu'à ce que les participants aient reproduit l'ordre des balises du document.
-
Markup Mixer
10 minutesIntroduisez l'activité en expliquant que pour que les navigateurs comprennent comment afficher une page web, ils ont besoin de contenus « balisés » qui utilisent un langage appelé HTML. Nous baliserons des objets réels de façon similaire.
Expliquez que nous utilisons des paires de balises pour marquer le contenu – une au début et une à la fin. Montrez le fonctionnement de l'activité en utilisant des post-its afin de créer vos propres balises ouvrantes et fermantes qui décrivent un objet dans la pièce et entourez-le de balises.
Distribuez des post-its préparés avec des balises ouvrantes et fermantes vides <_______> et </_______>. Faites inventer aux participants leur propre balise, séparer les balises ouvrantes et fermantes, et marquer un objet.
Prolongez cette activité en utilisant des photos ou des affiches contenant beaucoup d'objets, ou des impressions de documents contenant du texte telles que des magazines ou des recettes.
Enfin, fournissez des post-its pour valider les éléments HTML comme img, h1, et p. Expliquez ce que chaque balise signifie, et faites baliser par les participants une page web imprimée.
-
Réflexion
5 minutesLes participants peuvent partager leurs solutions au puzzle oralement tout au long de la session ou des activités. Ensuite ils peuvent évaluer et rélféchir sur leur travail une fois qu'il est complet en vérifiant leur solution au puzzle avec un mentor ou en vérifiant leur code HTML dans Thimble.
Vous pouvez animer une discussion en utilisant les questions comme celles-ci :
- Quels sont les 5 points principaux que vous enseigneriez à un ami ?
- Qu'avez-vous appris aujourd'hui en plus du HTML ?