Make Your First Webpage | HTML Puzzle Boxes

CC-BY-SA by Yofie 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.

Remix this lesson in Thimble!

Web Literacy Skills

Write
Code Remix
Participate
Connect Protect

21st Century Skills

Creativity

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.
Optional: printed copies of customized HTML Puzzle Boxes
Glue or tape
Scissors

Preparation

Learning Progression

In this lesson, your learners will:
1. Assemble paper HTML puzzle blocks.
2. Stack the blocks to model the structure of a webage.
3. Race against their own best times to stack the blocks accurately
4. Review the HTML tags on the blocks.
You should...

Print at least as many copies of the Puzzle Box pattern as you need for your learners.

Note that you can also create your own customized HTML Puzzle Boxes with different tags, as well. (Click in one of the "Customize Your Tags" boxes to edit it once you visit that page.)

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 minutes

This 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 minutes

First 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>
As you finish your introduction, explain that today you'll be working with pairs of tags that "open" and "close" to set the boundaries of different parts of a webpage. In the future, you'll also look at standalone tags, like the image tag, called img, that are self-sufficient. They have an opening tag, but no closing tag. Most, but not all tags, open and close.
Reflection: Review the Tags

10 minutes

Repeat the HTML Corners game if time permits. You can also 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 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. You can use prompts like these or create your own!
- In your own words, can you describe the structure of a web page?
- How would you explain the idea of tags and the way they work to friends or family?
- Can you explain how and why some tags fit inside others?
- What do you think might be some of the most common tags used to structure a webpage? Which ones seem most important or like you couldn't do without them?
- Why do you think giving a webpage some structure might be important in general?
Next activity→Build a Blank Webpage & Beyond

Questions? Comments? Suggestions for improvement? Email Chad Sansing, curriculum developer at the Mozilla Foundation.
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:
1. Print a copy of the HTML Puzzle Boxes to do this activity.
2. 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.

21st Century Skills:

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.