Year 8 · Autumn 2

Building the Web · Lesson 1 of 5

HTML structure: tags, head and body

PracticalTopic 16 The web

Year 8 · Building the Web · Lesson 1 of 5

You will learn to

  • Explain what a tag is, and why most tags come in pairs: an opening tag and a closing tag.
  • Identify the head and the body of a page, and what goes in each.
  • Create a page with a heading and two paragraphs, save it as index.html and open it in a browser.
  • Use the HTML toy to predict what a tag will show before you type it.

Year 8 · Building the Web · Lesson 1 of 5

Success criteria

You have got it when you can say:

  • I can write an opening and a closing tag for a paragraph.
  • I can say that the title goes in the head and the content goes in the body.
  • I can open my index.html in a browser and see my heading and two paragraphs.

Year 8 · Building the Web · Lesson 1 of 5

Retrieval starter

Questions from before. Write your answers, then show them.

  1. Last unit

    A new printer won't work until you install its…

    A CompilerB DriverC Defragmenter

    B. Driver

  2. Last unit

    What controls whether current flows through a transistor?

    A A tiny moving armB The voltage on its gateC How hot it is

    B. The voltage on its gate

  3. Last year

    Bubble sort compares…

    A Random pairsB NeighboursC The first and last items

    B. Neighbours

Year 8 · Building the Web · Lesson 1 of 5

Key words

HTML
Markup language for the content of web pages.
URL
The full web address of something online.
Protocol
A set of agreed rules for communication.
CSS
Language that styles how web pages look.

The explanation · step 1 of 1 · part 1 of 2

HTML: the content

HTML labels pieces of content with tags in angle brackets, usually in pairs: <p> and </p>.

<h1>Hot Potato</h1>
<p>A party game for <strong>four</strong> players.</p>
<img src="potato.png" alt="A cartoon potato">
<a href="https://example.com">Visit the site</a>
<ul>
  <li>Fast rounds</li>
  <li>Silly physics</li>
</ul>

The explanation · step 1 of 1 · part 2 of 2

HTML: the content (continued)

  • <h1> biggest heading. <p> paragraph. <strong> important text.
  • <img> image. alt describes it for blind users.
  • <a> a link. Links are what make it a web.
  • <ul> a bullet list, <li> each item.

Year 8 · Building the Web · Lesson 1 of 5

Try it: Edit HTML, see the page

Year 8 · Building the Web · Lesson 1 of 5

Quick quiz · 1 of 3

In https://www.bbc.co.uk/news, the path is…

  1. A https://
  2. B /news
  3. C www.bbc.co.uk

B. /news

The path comes after the domain. It says which page on that server.

Year 8 · Building the Web · Lesson 1 of 5

Quick quiz · 2 of 3

404 means…

  1. A Not found
  2. B OK
  3. C The server crashed

A. Not found

The server works, but there's no page at that path. A crash would be 500.

Year 8 · Building the Web · Lesson 1 of 5

Quick quiz · 3 of 3

Which controls how a page looks?

  1. A DNS
  2. B CSS
  3. C HTML

B. CSS

CSS = style. HTML = content and structure.

Year 8 · Building the Web · Lesson 1 of 5

Exit ticket

Answer on paper before you go. Then check.

  1. The web and the internet are…

    A The same thingB The internet runs on the webC The web is a service that runs on the internet

    C. The web is a service that runs on the internet The internet is the network. The web is pages over HTTP, one of many services using it.

  2. In <img src="cat.png" alt="A sleeping cat">, alt is…

    A A CSS propertyB A tagC An attribute

    C. An attribute Attributes sit inside the opening tag as name="value". alt describes the image for screen readers.