Make Your Own Webpage | Tag Tag Revolution

• Preparation

  Review these facilitation tips before running the activity.

  This game is best played with groups over 10. If you have a larger group, you may want to add some extra tags. If you have a small group you may want to use fewer. Feel free to make up your own.

  Make Tag Cards: Either print-out the Tag Cards here, or make your own on separate pieces of paper, write the following “tags” (be sure to include the arrow!):

  • Open tags: "<clap> →" (also sing, stomp, spin, shake).
  • Close tags: "</clap> ←" (also sing, stomp, spin, shake).

  Clear enough space in the room for players to stand in a circle.

• Introduction

  5 minutes

  
  Image credit by MOUSE

  Ask participants to raise their hands if they know some HTML already. On a projector, go to any website and click “View Source” to show the HTML code for that page. "View Source" is usually under the "View" or "Tools" tab of a browser's menu. If you have a participant with HTML experience, ask them to see if they can point out a tag in the code. Make sure to introduce these concepts before starting the game:

  • HTML stands for Hypertext Markup Language and is the standard “markup” for contributing pages to the web.
  • HTML Tags tell your web browser how to translate the code into the website that most Internet users will see. For instance, HTML tags can tell your browser when to turn text into a link, or how big to make the words on the page.
  • An Open Tag, <tag>, tells the webpage when to start doing something, while a Closed Tag, </tag>, tells the webpage when to stop.

• Getting Started

  10 minutes

  Explain to participants that they are about to have a fun dance competition to show them how HTML tags work. To get things started,

  1. Arrange the players into a circle, making sure there is enough room to walk around the outside of the circle.
  2. Select 2 players from the group to be the “Coders”. Hand one of them the first open tag and the other one the corresponding closed tag. Start with an easy one like <clap> and </clap>.
  3. Start the music and have the 2 Coders walk around the outside of the circle while the other players stand still. Make sure the Coders keep a little distance between them. You could have them start walking 5 paces back from each other.
  4. When you stop the music, the Coders attach the tags to the members of the circle they are standing closest to.
  5. Everyone who is standing in between the arrows of the open tag <clap> and closed tag </clap>; will now have to start clapping (the people wearing the tags, don’t have to). The clapping players should continue to clap for the rest of the game.
  6. Now select 2 new tags and hand them to the Coders (for instance <sing> and </sing>).
  7. Repeat steps 3 & 4. This time, when the Coders hand over the tags, anyone who is between the <sing> tags will have to sing. If any players are between both the <clap> tags AND the <sing> tags, then they will have to clap AND sing.
  8. Continue these steps again with the rest of the tags (and any other tags you want to add the game) to make a fun, complicated tag dance party! When the Coders have the final tags, ask them to join the circle wherever they are once the music stops (instead of handing the tags to people in the circle). Everyone standing between the tags the Coders are holding performs the actions on their tags.
  9. After all the tags have been used, you could have the players with tags move around one at a time to change up who is doing what. This will help communicate how tags work in HTML code.

• Reflection

  5 minutes

  Ask learners to choose any website and “view source” to look for tags and guess what each tag does.

  NOTE: some websites, like Google or Facebook have more complicated code and not enough simple HTML to explore. News sites, wikipedia, blogs, YouTube, and company or organization websites are better choices for beginners.

  Reflect on the activity with participants in a short discussion using guiding questions like these:

  • What was it like to play this game?
  • What did you do when you were not between the open and closed tags?
  • What happened when you were between 2 different tags?

  Up Next --> HTML Puzzle Boxes

  Questions? Comments? Suggestions for improvement? Email Chad Sansing, curriculum developer at the Mozilla Foundation.