Offline Icebreakers | HTML Puzzle Boxes
CC-BY-SA by Yofi Setiawan, Mozilla Indonesia and Mozilla
45 minutes
Learners will race to sequence the paper boxes labeled with HTML tags, becoming familiar with the code and remix.
Activity 6 of 6
Read and Write the Web
21st Century Skills
CreativityWeb Literacy Competencies
Code RemixLearning Objectives
- Summarize the most commonly-used HTML tags
- Use HTML tags to re-structure a web page
- Create a web page for a specific audience
Audience
- 13+
- Beginner web users
Materials
- Printed HTML Puzzle Boxes on thick paper. 12 copies minimum.
- Glue or tape
- Scissors
-
Preparation
Print at least 12 copies of the Puzzle Box pattern.
Creating one Puzzle Box is pretty easy. But, to have enough Puzzle Boxes to play the game, you will need at least 12 boxes – to ensure that you have enough boxes for opening and closing tags. In total, for a pair of players, you need to build 24 boxes. So, to build all 24 boxes, you need to print 12 sheets of the papercraft pattern.
It is preferable to print the Puzzle Box with thick paper, so it will be easier to assemble and will have a better build.
If you are limited on time, you can do this activity by writing on pieces of paper or post-its instead of making boxes.
-
Introduction: Make the Boxes
15 minutesThis is a pretty fun but time-intensive thing. Learners first assemble their boxes. Bonus: If time permits, mentor plays HTML Corners using the boxes to signal the stations.
-
HTML Puzzle Box Challenge
20 minutesFirst assemble the tags in the right order in a small group. You can model this build for the whole group. Then have learners or groups take down their boxes and "scramble" them up in front of them. Tell participants that their new goal is to stack the blocks into the correct order for building a webpage. Then let them race to see who can build a webpage the fastest!
This is the right combination of HTML tags structure.
<html>
<head>
<title>
</title>
<style>
</style>
</head>
<body>
<p>
</p>
</body>
</html>
-
Reflection: Review the Tags
10 minutesRepeat the HTML Corners game if time permits. You can also just have students shout out what each tag means.
Bonus: If time permits, show the tags in action by clicking "View Source" or using the X-Ray Goggles on a webpage.
Bonus: Tag your environment by putting remixed HTML Puzzle Boxes or post-it notes around the room a la Markup Mixer. That is to say, create tags for the objects in your room, like
<door>and<door>and then put them before and after the objects they describe to mark-up the room as if it was a webpage.Conclude by asking the group to reflect on what they found.