---
marp: true
theme: default
html: true
---
# Fix the newsletter
Structure and style a page · Lists, links and pictures
---
## Today
**We are learning to** read a whole page, find the part that does a job, and change just that part.
- 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.
---
## Why it matters
> Almost every job in web design starts with a page someone else wrote, and the skill is finding the right part to change.
---
💬 Discussion
## Where does it live? (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.
---
💬 Discussion
## Investigate: Read the page
```html
School newsletter
Library news
The library has 200 new books this term.
Book fair
The book fair starts on Monday in the library.
```
---
✅ Check
## Match the parts
**Match each part of the page with its job.**
| | |
|---|---|
| `` | A. the name on the browser tab, which is not on the page itself |
| `School newsletter` | B. the rules for how the page looks |
| `` | C. a heading for one section |
| ` … ` | D. tells the browser this is a web page |
| `Book fair
` | E. everything that shows on the page |
* Answer: <!DOCTYPE html> → D. tells the browser this is a web page; <title>School newsletter</title> → A. the name on the browser tab, which is not on the page itself; <style> … </style> → B. the rules for how the page looks; <body> … </body> → E. everything that shows on the page; <h2>Book fair</h2> → C. a heading for one section
---
✅ Check
## Find the rule
**You want every h2 heading to be teal. Which part of the page do you change?**
- The <title>
- The <!DOCTYPE html> line
- The words inside the <body>
- The h2 rule inside <style>
* Answer: The h2 rule inside <style>
---
✍️ Activity
## Split the article
- **Make three paragraphs:** The article is one long paragraph. Split it into one paragraph for the new books, one for the book fair and one for the raffle.
- **Add a heading:** Add an `` heading, `Book fair`, above the book fair paragraph.
---
✍️ Activity
## Live: Split the article
{{embed: https://studio.learningwaypoints.com/tutorials/_playground-html/index.html?code=%3C%21DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A++%3Ctitle%3ESchool+newsletter%3C%2Ftitle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%3Ch1%3ELibrary+news%3C%2Fh1%3E%0A%3Cp%3EThe+library+has+200+new+books+this+term.%0AThe+book+fair+starts+on+Monday+in+the+library.%0ABring+a+gold+coin+for+the+raffle.%3C%2Fp%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A}}
_If it does not load:_ [open this step in the tutorial](https://studio.learningwaypoints.com/tutorials/code/html/html-newsletter/?full=step-2#step-2)
---
💬 Discussion
## Investigate: Fix the crossed tag
```html
School newsletter
Library news
Book fair
The book fair starts Monday at 10 am in the library.
```
---
✅ Check
## 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.**
```
1
2
3
4 School newsletter
5
6
7 Library news
8 Book fair
9 The book fair starts Monday at 10 am in the library.
10
11
```
* Answer: line 9
---
✍️ Activity
## Add a list, a link and a picture
- **Add a list:** Under a new `` heading, `What to bring`, add a bulleted list: a gold coin and a bag.
- **Add a link:** Make the words `book fair` in the second paragraph a link to `https://example.com/bookfair`.
- **Add a picture:** Add `book.svg` under the `Library news` heading, with `alt` words that describe it.
---
✍️ Activity
## Live: Add a list, a link and a picture
{{embed: https://studio.learningwaypoints.com/tutorials/_playground-html/index.html?code=%3C%21DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A++%3Ctitle%3ESchool+newsletter%3C%2Ftitle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%3Ch1%3ELibrary+news%3C%2Fh1%3E%0A%3Cp%3EThe+library+has+200+new+books+this+term.%3C%2Fp%3E%0A%3Ch2%3EBook+fair%3C%2Fh2%3E%0A%3Cp%3EThe+book+fair+starts+on+Monday+in+the+library.%3C%2Fp%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A}}
_If it does not load:_ [open this step in the tutorial](https://studio.learningwaypoints.com/tutorials/code/html/html-newsletter/?full=step-4#step-4)
---
✍️ Activity
## Mark the headline story
- **Mark one story:** The newsletter has two stories. Mark the first one, the book news, with the class `headline`.
- **Style the class:** Add a rule for `.headline` that gives it a `lightyellow` background.
---
✍️ Activity
## Live: Mark the headline story
{{embed: https://studio.learningwaypoints.com/tutorials/_playground-html/index.html?code=%3C%21DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A++%3Ctitle%3ESchool+newsletter%3C%2Ftitle%3E%0A++%3Cstyle%3E%0A++++h1+%7B%0A++++++color%3A+navy%3B%0A++++%7D%0A++%3C%2Fstyle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%3Ch1%3ELibrary+news%3C%2Fh1%3E%0A%3Cp%3EThe+library+has+200+new+books+this+term.%3C%2Fp%3E%0A%3Ch2%3EBook+fair%3C%2Fh2%3E%0A%3Cp%3EThe+book+fair+starts+on+Monday+in+the+library.%3C%2Fp%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A}}
_If it does not load:_ [open this step in the tutorial](https://studio.learningwaypoints.com/tutorials/code/html/html-newsletter/?full=step-5#step-5)
---
✍️ Activity
## Swap and spot (4 min)
Swap newsletters with a partner. Find one list, one link, one picture and one class, and say the job of each.
---
✅ Check
## 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.