Skip Navigation

Source Whisperer

By MOUSE! 15 minutes
Level
Grade 7-8
Subjects
English Language Arts
components
  • Technology and Society
  • Design
Tools & Languages
Glitch,
HTML,
Unplugged

Key Coding Concepts

  • Sequences

Terminology

HTML

HTML (hypertext markup language) is a language used for tagging or “marking up” text files to achieve font, color, graphics, videos, and links on webpages.

 

CSS

CSS (cascading style sheets) is the visual language used for presentation or styling of a document written in a markup language. CSS files are what make the web colourful, patterned, responsive, and cool

 

Tag

A tag is a piece of code that specifies how the document or piece of the document should be formatted. Tags have angled brackets, for example <h1> is the top most heading on a webpage.

In this activity, learners compete to sketch the most accurate website by only looking at the website’s HTML source code. Created by Mouse! for Mozilla.

Materials

  • “Fido’s Been Bad” Source Code (1 per pair)
  • Paper and pencils
  • Printed solution (page 2 of the above printout) or a computer with access to the internet to show the actual website

  1. Explain that all websites are designed using code (a language that the computer understands)
  2. Give a Source Code sheet to each pair/group
  3. Draw attention to the tags and explain that anything between the <> brackets is code that will not be seen on the actual site. Have them guess what they think each tag will do.
  4. Hand out paper and pencils to each pair/group
  5. Give them a few minutes to draw their best guess of how the webpage will look
  6. Ask for volunteers to show the group their drawing and explain how they interpreted the code
  7. Show learners the solution to see how their drawings compare OR open up the original “Fido’s Been Bad” webpage if you have access to a computer with internet

Learning Outcomes

I can read and interpret basic HTML code.
I can describe the function of both open tags and closed tags.
I can describe how HTML code affects the style of a website.

On computers, have learners edit the source whisperer website with the Inspect Element tool in their browser by right clicking > ‘Inspect’*.

*Note: learners will be able to make immediate changes, but these changes will not be saved to the actual website.

Challenge learners to recreate the webpage from scratch using HTML + CSS (with Glitch or another webmaking tool).

Science or English: Have learners create a simple website that discusses a relevant science or english topic taught. Learners can use Codemoji as a fun HTML editor to reinforce the concepts used in the lesson. Codemoji allows learners to create websites using emoji characters as tags to help remember the tag descriptions.

Technology and Society : Ask learners to describe the ways they use the Web (E.g. entertainment, research, current events, E-commerce, social media). Put learners in groups and have them create a poster for their peers that outlines ways to stay safe on the Internet.

Original lesson by MOUSE!
http://mouse.org/

Inspired by Mozilla’s Unplugged Icebreaker activities
https://learning.mozilla.org/en-US/activities/offline-icebreakers

Puppy image from Pixabay
https://pixabay.com/p-958203

Teach lessons that are tied to your existing curriculum! https://bit.ly/CLClessons

r

More Lesson Plans For Grade 7-8

    View All Lesson Plans

    Explore lessons based on components

    The K-12 Computer Science Framework

    Although learning how to build digital projects is a key part of Computer Science education, students should also learn a wider set of skills and competencies that will help them to harness the power of digital technologies as both creators and consumers. A comprehensive approach to K-12 Computer Science education includes learning about the following five focus areas:

    View Framework ➝

    Programming

    By the end of high school, students should be able to create a simple computer program.

    Programming Lessons

    Computing and Networks

    By the end of high school, students should understand and be able to use the tools and devices commonly used to build digital projects.

    Computing and Networks Lessons

    Data

    By the end of high school, students should be able to explain how we use computers to create, store, organize, and analyze data.

    Data Lessons

    Technology and Society

    By the end of high school, students should be able to explore the ways in which technology and society have mutually shaped each other.

    Technology and Society Lessons

    Design

    By the end of high school, students should be able to apply design principles to the digital projects they create.

    Design Lessons