Update: Mozilla has officially discontinued X-Ray Goggles. If you want to continue using a similar tool, check out this similar tool created by our friends at Mouse.org.
"On December 16, 2019, Mozilla wound down Thimble. If you are looking to learn about the web with tools like Thimble, we encourage you to check out Glitch (https://glitch.com).
For X-Ray Goggles, the message is: "On December 16, 2019, Mozilla wound down X-Ray Goggles. If you are looking for similar tools, join our friends at the Mouse Learning Network for free and check out their awesome Coding course (https://mouse.org/coding)."
Explore what it means to read, write, and participate on the web by learning how the Internet and webpages work, learning skills like code, connect, navigate, remix, and synthesize.
- Understand and explain how the Internet works.
- Understand and explain how HTML uses tags to build webpages.
- Remix web content using Mozilla’s Web X-Ray Goggles.
- Beginner web users
- Arts and crafts materials for the Perform the Net activity
- Tag Tag Revolution cards
- Internet-connected computers
Review the lesson and try all the activities yourself to see how they work.
Watch the video called “There and Back Again: A Packet’s Tale” and note any questions you or your learners might need answered about the Internet to better understand it. Research answers to those questions to share with learners as needed.
Print the Tag Tag Revolution cards and gather any supplies you need.
In this step you will introduce the ideas of Internet health and web literacy to your learners, show them a video about how the Internet works, and then split them into groups to perform or model the Internet to show what they learned.
Welcome your learners and begin with something like this:
When we talk about “Internet health,” we’re talking about being able to read, write, and participate online in ways that promote inclusion, innovation, shared ownership of the web, and privacy and safety for everyone.
A healthy Internet is one where we are all present and able to share connections, new creations, and relationships with other people around the world.
An unhealthy Internet - or a toxic one - is full of bullying, harassment, and rules that limit what we can do, say, and think online.
An important part of knowing how to help a healthy Internet is web literacy. We want people to be web literate so they can read, write, and participate online. That means they can search for and find the information and tools they want, that they can create and share new things on the web, and that they can be part of online communities that share their concerns, interests, and passions.
Everyone should have the skills to read, write and participate in the digital world. We should work to lift everyone’s online skills — so that they can go beyond consuming and contribute to the future of the Internet.
The first step in further developing our own web literacy is learning how the Internet works, and that’s what we’re going to do today.
Next, ask learners:
How do you get to the Internet?
Take a few ideas from the group, then explain the following:
The "Internet" is a system of networks and the "Web" sits on top of the Internet and provides an interface for viewing and interacting with the information stored in various computers around the world.
Further explain that:
Anytime you ask the Internet to do something, whether by entering a URL into a browser or watching a video on YouTube, your Internet request "hops" through several network devices, like routers and switches and servers, on its way from your computer to the website’s server.
Watch this introductory video (also linked from this picture) to give learners a little more context.
After you share the introduction and show the video, you should have about 20 minutes left in this step. Split your learners into groups using an equitable process and then explain the following:
We’re going to do an activity called “Perform the Net.” Your job is to create skit or model that lets you perform how the Internet works for the rest of the group. Think about how to use your space - you can perform anywhere there's room in the space around you and spread out and move around as much as you'd like. Think about the materials around you and grab any props that might help you show the Net at work.After about ten minutes of planning and practice, you’ll perform your skits for one another.
When it’s time to perform, applaud your heart out for the other groups. Laugh and cheer at especially great moments of Performing the Net history!
After the performances, ask 2-3 volunteers to respond to a prompt like this:
- What seemed like the most important things to learn about how the Internet works? What came up again and again in different skits?
Offline Activity10 minutes
In this step you will show learners how hypertext markup language, or HTML, uses “tags” to build webpages.
Introduce the activity like this:
Now that we know how the Internet works, let’s talk about the way webpages work. We’re going to learn about HTML - the language of the web. HTML stands for hypertext markup language. HTML uses bits of code called “tags” to structure and build webpages. For example, there is a tag called p that HTML uses to tell your web browser a chunk of text is a paragraph. There is a tag called u that tells your browser text is supposed to be underline.
There are tags for all kinds of things - images, movies, titles. We’re going to play a game to see how tags work and then finish the day by looking at tags inside a webpage we can remix using something called the Web X-Ray Goggles.
First, let’s play the game. It’s called “Tag Tag Revolution.”
Explain to participants that they are about to have a fun dance competition to show them how HTML tags work. Here’s how to play:
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.
- Arrange the players into a circle, making sure there is enough room to walk around the outside of the circle.
- 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
- 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.
- When you stop the music, the Coders attach the tags to the members of the circle they are standing closest to.
- 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.
- Now select 2 new tags and hand them to the Coders (for instance
- Repeat steps 3 & 4. This time, when the Coders hand over the tags, anyone who is between the
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.
- 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.
- What seemed most important about learning how HTML and tags work?
- How much do you think you need to know about HTML and other web technologies to promote Internet health? Do you have to be a coder to read, write, and participate online in positive ways?
Online Activity15 minutes
In this step, you will take your learners into a webpage using the Web X-Ray Goggles so they can see - and remix - HTML tags “in the wild” online.
Introduce the goggles by saying something like this:
Now that we have a better understanding of how HTML tags work, let’s look at real tags in a real webpage, We’re going to use a tool called the Web X-Ray Goggles to look inside the code of a webpage and change - or remix - the images on that webpage. Follow along as I demo the goggles.
To install the Web X-Ray Goggles, go to goggles.mozilla.org. Demonstrate how to drag the dark pink “Drag and drop me in your bookmark bar” button to your browser’s bookmarks toolbar.
Once you've installed the goggles, try the sample activity linked at the bottom of the goggles’ landing page.
Demo the activity for your learners and then give them time to change some of the image tags on their own. Help your learners install and use the goggles and encourage them to try the goggles on other pages if they finish the first-time user experience quickly. Encourage them to help one another, as well!
Close this step by asking 2-3 volunteers to answer questions like this:
- How does learning about HTML make you feel about your ability to read, write, and participate online?
Reflection & Assessment5 minutes
End the lesson with a brief, reflective discussion of how web literacy connects to Internet health. You can record learners’ responses for the purposes of assessment, but be sure to do so in an equitable way that doesn’t disadvantage one learner or another because of your choice of medium. You might use prompts like these or create your own:
- What surprised you about the Internet or the way webpages work?
- How might knowing how to read, write, and participate online empower you to work for a healthier Internet?
- How can we teach about Internet health and web literacy better than we do now?
Learn more about web literacy with the Internet Health Report!Next activity→Digital Inclusion Activity
As you play, ask 2-3 volunteers to respond to prompts like these: