Web Literacy Basics | 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.
Follow this link to localized versions of the activity.
Web Literacy Skills
21st Century Skills
Learning 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
Learning Progression
In this lesson, your learners will:
- Assemble paper HTML puzzle blocks.
- Stack the blocks to model the structure of a webage.
- Race against their own best times to stack the blocks accurately
- Review the HTML tags on the blocks.
You should...
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. Or, just have learners shout out what each tag means.
Bonus: If time permits, show the tags in action by clicking "View Source" or using the Web 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 desccribe to mark-up the room as if it was a webpage.Conclude by asking the group to reflect on what they found.
-
5. Optional: Badging
You will race to sequence the paper boxes labeled with HTML tags, becoming familiar with the most common HTML tags and learning how to structure a web page and how to code and remix.
Steps to complete this task:
- Print a copy of the HTML Puzzle Boxes to do this activity.
- Order your HTML tags correctly to complete the simple structure of a webpage.
Evidence:
Upload a photo of your HTML Puzzle Blocks in the correct sequence and of the code written on Thimble.
If you successfully complete the above, you will practice the following skills:
- Creativity
The skills that you have learned through this activity can be recognized and validated by earning credentials or badges.
Through a partnership with the Open Badges Academy (OBA), you can earn over 15 Web Literacy and 21st Century Skills credentials or badges. Once you earn them, you can share the credentials/badges via your social media or resume or use them to connect with others.
If you are interested in applying for badges, visit the OBA and/or reach out to Matt Rogers or DigitalMe to schedule a demonstration.