Section 2. Writing the Web


HTML Puzzle Boxes

Made by Yofie Setiawan, Mozilla Indonesia and remixed for Clubs by Mozilla.

Learners will race to sequence the paper boxes labeled with HTML tags, becoming familiar with the most common HTML tags and how to structure a web page.

45 minutes to an hour

  • Preparation

    Complete the pre-activity questionnaire. Do the activity on your own to become familiar with it. See the video to the left under "Activity in Action".

    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.

    Have learners complete their pre-activity questionnaire.

  • 15
    min

    Introduction: Make the Boxes

    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.

  • 20
    min

    HTML Puzzle Box Challenge

    First assemble the tags in the right order in a small group. Then race!

    This is the right combination of HTML tags structure.

    <html>
    <head>
    <title>
    </title>
    <style>
    </style>
    </head>
    <body>
    <p>
    </p>
    </body>
    </html>

  • 10
    min

    Reflection: Review the Tags

    Repeat the HTML Corners game if time permits. Or, 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.

    Conclude by asking the group to reflect on what they found.