Lesson 3: Describing Web Pages

Unplugged

Overview

Students will invent their own language that attempts to describe the structure and content of simple web pages. Through this process, they explore the difficulties of creating a language that describes both of these features at the level of specificity required for a computer to understand. Students will come up with many different ideas of languages, leading to a discussion about why everyone who builds a web page needs to use the same set of rules.

Purpose

In the next lesson, students begin to learn HTML, the language used to create structure the content of websites. Before students begin learning HTML, this lesson helps motivate the need for a common language. Students exploration of creating a language that represents both structure and content paves the way for explaining the difference between the HTML tags and website content. Students will also begin to see the need for a new language whose values are not just English words, as they might want to be able to use those words on their web page.

Agenda

Warm Up (10 minutes)

Activity (20 minutes)

Wrap Up (10 minutes)

Objectives

Students will be able to:

  • Create their own language that describes the structure and content of a web page using just letters, basic symbols and numbers.
  • Understand that a language for a computer is just an agreed upon set of rules for communicating and that many different languages can be created.

Preparation

  • Print a copy of A New Language - Activity Guide for each student (print in color if possible).
  • In preparation of the next lesson (U2L04), ask students to think about favorite family or personal recipes they have.

Links

For the Students

Support

Report a Bug

Teaching Guide

Warm Up (10 minutes)

Communicate Design Instructions

Activity (20 minutes)

Creating a New Language

Goal: Students create a unique language to describe both the content and structure of a web page.

Remarks

It’s obviously very difficult to communicate exactly where each page element should go without any common rules. Next, you’ll be challenged to make a new language using only numbers, letters and symbols that would communicate both the content and its structure on a page. This can be a very tricky challenge so make sure to use your problem solving skills as you work through it. Don't worry if you don't have a fully functional language by the end of class, just do your best.

Teaching Tip

If you can't print the activity guide in color, consider displaying the color version of the page with a link in it at the front of the room.

Distribute: A copy of A New Language - Activity Guide to each student.

Group: Students can work in pairs or groups, though working in pairs is suggested.

Content Corner

The conventional way to communicate structure is to specify a set of “reserved words” or characters, that should be interpreted as formatting instructions. HTML uses angle-brackets, as in <...>. It also is typically necessary to have an opening and closing tag to indicate when a specific formatting begins and ends. An HTML example is:

Code : <a>this is a link</a> and this isn’t

Result: this is a link and this isn’t

Students will likely not come up with this structure during this class and that is perfectly fine. If students already know this structure challenge them to come up with something new and completely different.

Creating A Language

On the activity guide students will complete the following steps:

  1. Try to come up with a new language that can describe web pages.
  2. Use the language to describe a set of web pages.
  3. Complete a series of reflection questions.

Stop students once they have finished the reflection questions.

Discuss: Have students share their reflections.

Set Up: Students will need extra scrap paper to write and draw on for the next part of the activity.

Once you have discussed and shared their reflection responses, return to the activity guide. There, they will:

  1. Make improvements to their language if they have new ideas.
  2. Design their own simple web page with a couple elements their language can communicate.
  3. One a separate piece of paper write directions for creating your web page in your language.

Once each group has created their design and written their directions, have sets of groups switch directions and try to recreate the original page.

As students try to recreate web pages, keep an eye out for languages or directions that may have worked well to call out key features present in the original design.

Wrap Up (10 minutes)

Reflection: Characteristics of A Good Language

Set Up: Have students take out their journals.

Prompt: What characteristics does a good language, for describing web pages, have?

Discussion Goal

Students answers will vary but should include:

  • Ways to differentiate between content and structure of the content
  • When describing the structure of a web page you can't use just English words because the computer can't tell the difference between the words that indicate structure and those that indicate what you want on the page (content)
  • A way to show where different structures start and end for different content
  • A guide to interpreting the language in addition to people using the language

Discuss: Have students share out their ideas.

Remarks

Today we designed our own languages for describing web pages to computers. In the next lesson we will start learning the language that computer scientists designed and agreed upon for communicating with computers.

Prep For Next Lesson:

Set Up for Next Lesson: Ask students to think about favorite family or personal recipes they have. Consider having them bring in a copy of the recipe.

View on Code Studio

The Internet - Web Development: Lesson 3 - Describing Web Pages

Background

Students will invent their own language that attempts to describe the structure and content of simple web pages. Through this process, they explore the difficulties of creating a language that describes both of these features at the level of specificity required for a computer to understand. Students will come up with many different ideas of languages, leading to a discussion about why everyone who builds a web page needs to use the same set of rules.

Resources

View on Code Studio

Explaining Website

Goal: Students will understand how complicated it is to communicate a visual representation for another person.

Say:

In the past couple of lessons you have spent some time exploring different web pages and have taken the first steps of the problem solving process in designing part of your website. But how will your computer know how to display the page that you've designed on paper? Today you're going to start thinking about the instructions you might need to give to someone else in order to communicate what your webpage looks like

Transition: Have students go to Code Studio.

Students will be looking at a website included in the Code Studio level and answering the following prompt on a piece of paper or in their journals:

Prompt: You were asked to put together a website for a sports equipment store. You have done the first step - designing the page - and you are about to get on the phone with them, and try to explain your design. You want the clients to be able to draw a sketch of your design on the paper in front of them. Write a step by step list of your instructions so that your clients can draw the new site on the paper in front of them while you talk.

Pick a student who is comfortable being challenged/joked with in front of the whole group - the activity is purposely set up to make them vulnerable.

Sharing Website Instructions

  • Pick one student to verbally share one of their instructions with you.
  • The teacher should act as the client on the phone trying to draw.
  • Publicly "draw" the website exactly as the students instructions say, but don't make assumptions about styling. For example, if told to draw a title, purposely justify the title to the left and write in very small letters.
  • As the student gives you instructions have them tell you if you have drawn it correctly. If you have not drawn it correctly, have them make their directions more specific until you can draw it correctly.
  • Change students after a couple instructions to get more students involved.
  • Keep track of the instructions students give and the improvements they make to the instructions somewhere visible as well.
  • Repeat this process until you have recreated most of the web page.

Discuss: Once you have finished drawing the site, have students identify the common things they needed to express to someone how to represent the site (text on screen, centering, buttons, images, boxes, backgrounds, etc).

Creating instructions to explain a website is difficult because there are lots of different things going on at once. First we have the actual text and images we want to be on the page. This is the CONTENT of the page. Second we have things like paragraphs, titles, lists and grids which group together content of the page. This is the STRUCTURE of the page. Lastly there is the color, font, and sizing of things. This is the STYLE of the page. These three things are being communicated at once in these instructions. Today we are going to focus in on how to communicate content and structure by creating our own languages.

Standards Alignment

View full course alignment