Fix the newsletter

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

• Slides Download Copy address for Prepare Present from the browser, or export to PowerPoint or PDF.
• Worksheet Download Copy address for Prepare Print the student copy; the Teacher edition has the answers.

Students will be able to

• I can find the part of a page that does a job and change just that part.
• I can say what the head and the body of a page are for.
• I can use paragraphs, lists, links, pictures and classes together in one page.

Timing

Read the page 8 min · Split the article 10 min · Crossed tag 5 min · List, link, picture 12 min · Headline 10 min

Before class

This is a review lesson: nothing new is taught, and each step uses ideas from earlier lessons. Do the last step yourself first (about 5 minutes).

The page wrapper (<!DOCTYPE html>, <html>, <head>, <body>) is a recipe to copy for now. The <title> shows on the browser tab, the <style> block sits in the <head>, and only the <body> shows on the page. The newsletter pulls together headings and paragraphs, nesting, rules, lists, links, pictures and classes.

Running the lesson

1. Read the page: the match is about where each part lives. Ask where the rules for heading colours are.
2. Split the article: they did this in lesson 1. A student who types Enter instead of </p><p> is repeating the first misconception.
3. Crossed tag: ask which tag was opened last.
4. List, link and picture: three small changes in one page; check each one on the page before moving on.
5. Headline: the class goes in the HTML and the rule in the style block; watch for a dot in the HTML or a name that does not match.

In class

On the slides at these points. Students can do the whole lesson on their own; these are for the room. In the deck, the Run, Modify and Make slides have the live playground in them (the tutorial link is the backup), and the notes above are in each slide's speaker notes.

• Where does it live? (start, 3 min)

  Look at the newsletter. With your partner, say which part of the page you would change to rename the browser tab, and which to change a heading's colour.

  Listen for the title and the style block. The aim is to find a part by its job, not by searching the code.

• Swap and spot (end, 4 min)

  Swap newsletters with a partner. Find one list, one link, one picture and one class, and say the job of each.

  A student who cannot find a part is a good prompt to ask which tags they know that part uses.

The hard part (on purpose)

Choosing which part to change. Ask them to name the job first, then point to the part of the page that does it.

When students get stuck

Answers to the checks

1. Match the parts: Match each part of the page with its job.
   <!DOCTYPE html> → A. tells the browser this is a web page; <title>School newsletter</title> → C. the name on the browser tab, which is not on the page itself; <style> … </style> → E. the rules for how the page looks; <body> … </body> → D. everything that shows on the page; <h2>Book fair</h2> → B. a heading for one section
   The wrapper holds the page's information and rules. Only what is inside <body> shows on the page.
2. Find the rule: You want every h2 heading to be teal. Which part of the page do you change?
   The h2 rule inside <style>
   The h2 rule says how every h2 looks, so changing its colour changes them all at once. The title, the first line and the words do not set colours.
3. Fix the crossed tag: The words in the library come out slanted as well, but only 10 am should be. Click the line that causes it.
   line 9
   On line 9, <em> opens inside <strong> but </strong> closes before </em>, so the browser guesses and slants more than 10 am. The last tag opened must close first: </em> then </strong>.

Solutions

One possible solution for each task. Other correct programs are fine.

Split the article › Make three paragraphs

<!DOCTYPE html>
<html>
<head>
  <title>School newsletter</title>
</head>
<body>
<h1>Library news</h1>
<p>The library has 200 new books this term.</p><p>The book fair starts on Monday in the library.</p><p>Bring a gold coin for the raffle.</p>
</body>
</html>

Split the article › Add a heading

<!DOCTYPE html>
<html>
<head>
  <title>School newsletter</title>
</head>
<body>
<h1>Library news</h1>
<p>The library has 200 new books this term.</p>
<h2>Book fair</h2>
<p>The book fair starts on Monday in the library.</p>
<p>Bring a gold coin for the raffle.</p>
</body>
</html>

Add a list, a link and a picture › Add a list

<!DOCTYPE html>
<html>
<head>
  <title>School newsletter</title>
</head>
<body>
<h1>Library news</h1>
<p>The library has 200 new books this term.</p>
<h2>Book fair</h2>
<p>The book fair starts on Monday in the library.</p>
<h2>What to bring</h2>
<ul>
  <li>A gold coin</li>
  <li>A bag</li>
</ul>
</body>
</html>

Add a list, a link and a picture › Add a link

<!DOCTYPE html>
<html>
<head>
  <title>School newsletter</title>
</head>
<body>
<h1>Library news</h1>
<p>The library has 200 new books this term.</p>
<h2>Book fair</h2>
<p>The <a href="https://example.com/bookfair">book fair</a> starts on Monday in the library.</p>
<h2>What to bring</h2>
<ul>
  <li>A gold coin</li>
  <li>A bag</li>
</ul>
</body>
</html>

Add a list, a link and a picture › Add a picture

<!DOCTYPE html>
<html>
<head>
  <title>School newsletter</title>
</head>
<body>
<h1>Library news</h1>
<img src="book.svg" alt="An open book" width="120">
<p>The library has 200 new books this term.</p>
<h2>Book fair</h2>
<p>The <a href="https://example.com/bookfair">book fair</a> starts on Monday in the library.</p>
<h2>What to bring</h2>
<ul>
  <li>A gold coin</li>
  <li>A bag</li>
</ul>
</body>
</html>

Mark the headline story › Mark one story

<!DOCTYPE html>
<html>
<head>
  <title>School newsletter</title>
  <style>
    h1 {
      color: navy;
    }
  </style>
</head>
<body>
<h1>Library news</h1>
<p class="headline">The library has 200 new books this term.</p>
<h2>Book fair</h2>
<p>The book fair starts on Monday in the library.</p>
</body>
</html>

Mark the headline story › Style the class

<!DOCTYPE html>
<html>
<head>
  <title>School newsletter</title>
  <style>
    h1 {
      color: navy;
    }
    .headline {
      background-color: lightyellow;
    }
  </style>
</head>
<body>
<h1>Library news</h1>
<p class="headline">The library has 200 new books this term.</p>
<h2>Book fair</h2>
<p>The book fair starts on Monday in the library.</p>
</body>
</html>

Stretch and support

Stretch: Add a second heading rule that makes every h2 teal, and a class for a third story in a different colour.

Support: Give students only the Read the page and Mark the headline steps, and a copy of the page with the paragraphs already split.

Exit ticket

A student adds a heading to the head of the page, and nothing shows. Why?

Only what is inside the body shows on the page. The head holds the title and the rules.

What each step is for

• Read the page: Before changing a page, say what each part is for: the head holds information and rules, the body holds what shows.
• Split the article: Tags, not line breaks, decide the paragraphs: the whole article came out as one.
• Fix the crossed tag: Tags that overlap give no error message, only the browser's best guess.
• Add a list, a link and a picture: A list, a link and a picture are three different kinds of change, in the right place inside the body.
• Mark the headline story: A class picks the one story to stand out, and a rule in the style block says how.

Where it leads

Next unit is Parts of a page: tables, the named parts of a page, links within a page and forms. Class idea: ask students to open a school page and find its wrapper parts in the browser's view-source.