Offline Icebreakers | HTML Thimble Tag Puzzle
CC-BY-SA by Mozilla and Digital Corps
15 minutes
Learners get familiar with reading, writing and participating on the web in this six-part module. Discover the foundations of the web through production and collaboration.
Web Literacy Skills
-
Read
Synthesize
21st Century Skills
Learning Objectives
- Understand and demonstrate how opening and clsoing t6ags complete HTML elements on a webpage.
Audience
- 13+
- Beginner web users
Materials
- Cards labeled with opening and closing HTML tags for common elements like
p,h1, andimg.
-
Preparation
Learning Progression
In this lesson, your learners will:
- Find HTML tag cards you've created and hidden around the room.
- Pair up by opening and closing tag; for example,
<p>would pair up with the person holding</p>. - Work with you to put the tags in order to create a model of a webpage. For example, the people holding the
<p>tags would stand nested between the people holding the<body>and<html>tags. - Work with you to type their model webpage into a new project you make on Thimble, Mozilla's online code editor, to see if their webpage "works." You'll know the page works when the code has no pink flags indicating errors.
- Reflect on their learning.
You should...
Write "opening" and "closing" tags on index cards or post-its (use different colors for each pair, ex:
<html>tags in blue,<head>tags in orange,<body>in dark green,<p>in light green,<title>in pink = 5 pairs), and print a simple HTML document to serve as a cheat sheet. -
Activity
10 minutesFirst, spread cards around the room and ask each kid to pick a tag. If you have less than 10 participants, use less tags (exclude less crucial tags, starting with
<h1>and</h1>, and<p>and</p>or tell each kid to find a "perfect pair" (ex:<head>and</head>).Next, ask participants to find their "perfect pairs" (ex: kid1 holding
<body>and kid2 holding</body>) and have them explain to the rest of the group what role they believe their tag plays in the HTML document (they can ask for the HTML "cheat sheet"). After the "perfect pairs" describe their "role", see if the entire group can nest the tags in the right order. If you have enough participants you can ask them to position themselves in rows in the room. If space is limited or if a kid has more than one tag, ask them to place the cards on a surface (table or floor) nested in the right order. Remind them to avoid "floating heads" and "open bodies."Finally, drawing on these answers, open a new project in Thimble, Mozilla's online code editor, and create a digital version of the HTML Tag Puzzle in Thimble, while asking learners to tell you what to type to make a webpage that "works." You'll know the page works when the code has no pink flags indicating errors.
-
Reflection and Assessment
5 minutesHave the group collectively assess its performance. Do they believe they have created a functioning HTML document in Thimble? If there are errors in their ordering, ask the participants to "debug" the code, offering placement suggestions to their peers. Continue this debugging, providing guidance as necessary, until participants have created a working Thimble template.