Year 10 · ICT · Summer 2

Website authoring and images; the Year 10 mock · Lesson 1 of 5

HTML structure, tables and lists

Practical21.2a HTML structure and the head21.2b HTML body: text, tables and media

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 1 of 5

You will learn to

  • Write the basic structure of an HTML page with correctly nested tags.
  • Add a title and meta tags in the head.
  • Mark up headings, paragraphs and lists.
  • Build a table with merged cells, using rowspan and colspan.

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 1 of 5

Success criteria

You have got it when you can say:

  • I can write the html, head and body tags in the right order and nesting.
  • I can build a table that matches the specification, including merged cells.
  • I can use h1, h2 and h3 exactly as the specification asks.

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 1 of 5

Retrieval starter

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

  1. Last unit

    A line chart is for…

    A Unrelated categoriesB Change over timeC Parts of a whole

    B. Change over time

  2. Last unit

    COUNTIF(C2:C30,">=50") counts…

    A Cells that are 50 or moreB Empty cellsC All the cells

    A. Cells that are 50 or more

  3. Earlier this year

    A .pdf is used because…

    A It is the smallest fileB It looks the same on every computerC Anyone can edit it

    B. It looks the same on every computer

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 1 of 5

Key words (1 of 4)

HTML
HyperText Markup Language: the language of the content layer of a web page.
CSS
Cascading Style Sheets: the language of the presentation layer, which sets how a page looks.
Tag
A word in angle brackets, such as `<p>`, that marks the start or end of an element.
Attribute
Extra information inside an opening tag, written name="value", such as src or alt.

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 1 of 5

Key words (2 of 4)

Head
The part of a page holding information about it: title, meta tags, stylesheet links.
Meta tag
A head element that gives data about the page, such as charset, description or viewport.
External stylesheet
A separate .css file attached to pages with the link element.
Class
A label given to elements with the class attribute so CSS can style them as a group.

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 1 of 5

Key words (3 of 4)

Bookmark
A named place on a page, made with an id, that a hyperlink can jump to.
Relative path
A file location described from the current file's folder, such as images/logo.png.
Absolute path
A full file location from the very start, such as a full URL or C:/...
Target
The attribute that sets which window a link opens in, such as _blank.

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 1 of 5

Key words (4 of 4)

colspan / rowspan
Attributes that make a table cell stretch across columns or down rows.
Padding
The space inside an element or cell between its border and its content.
Alt text
Alternative text for an image, read by screen readers and shown if the image fails.

21.2a HTML structure and the head · The explanation · step 1 of 13 · part 1 of 3

Tags, attributes and the page skeleton

HTML uses tags in angle brackets. Most come in pairs: an opening tag `<p>` and a closing tag `</p>`. The content goes between them.

An attribute gives extra information inside an opening tag, as name="value". In `<img src="images/logo.png">`, src is the attribute.

Every page has the same skeleton: `<!DOCTYPE html>`, then `<html>` with a `<head>` and a `<body>` inside it.

21.2a HTML structure and the head · The explanation · step 1 of 13 · part 2 of 3

Tags, attributes and the page skeleton (continued)

The head holds information about the page. The body holds everything the visitor sees.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- information about the page goes here -->
</head>
<body>
    <!-- everything the visitor sees goes here -->
    <h1>Café Retiro</h1>
    <p>Coffee and cakes next to Retiro Park.</p>
</body>
</html>

21.2a HTML structure and the head · The explanation · step 1 of 13 · part 3 of 3

Tags, attributes and the page skeleton (continued)

!Watch out

Close tags in the reverse order you opened them. `<p><b>Hi</p></b>` is wrong. `<p><b>Hi</b></p>` is right. Wrongly nested tags can lose the mark for that element.

21.2a HTML structure and the head · The explanation · step 2 of 13 · part 1 of 2

The title

The `<title>` element goes in the head. Its text appears on the browser tab, in bookmarks and in search results.

It is not shown on the page itself. A heading on the page needs `<h1>`.

<head>
    <title>Café Retiro | Home</title>
</head>

21.2a HTML structure and the head · The explanation · step 2 of 13 · part 2 of 2

The title (continued)

!Watch out

Type the title exactly as the question gives it, with the same capitals and spaces. A typing error loses the mark.

21.2a HTML structure and the head · The explanation · step 3 of 13 · part 1 of 3

Attach an external stylesheet

The `<link>` element attaches an external stylesheet. It goes in the head and has no closing tag.

rel="stylesheet" says what the file is. href gives the relative path to the .css file, starting from the HTML file.

index.html is in the cafe folder, and cafe.css is in its styles folder. So the path is styles/cafe.css.

<head>
    <title>Café Retiro | Home</title>
    <link rel="stylesheet" href="styles/cafe.css">
</head>

21.2a HTML structure and the head · The explanation · step 3 of 13 · part 2 of 3

Attach an external stylesheet (continued)

/* This is the whole of styles/cafe.css so far.
   A .css file contains CSS only: no HTML tags. */
h1 {
    color: #8B4513;
}
?Why?

A relative path still works when the whole folder is copied to another computer or a web server. That is what happens when the examiner opens your work.

21.2a HTML structure and the head · The explanation · step 3 of 13 · part 3 of 3

Attach an external stylesheet (continued)

!Watch out

Never write href="C:/Users/Lucia/Desktop/cafe/styles/cafe.css". It only works on your own computer. Absolute paths to local files lose the mark.

21.2a HTML structure and the head · The explanation · step 4 of 13 · part 1 of 3

Meta tags

A `<meta>` tag gives data about the page. It goes in the head and has no closing tag.

charset sets the character set. UTF-8 covers every language, so é, ñ and € show correctly.

description is a short summary. Search engines often show it under the link. keywords lists search words, separated by commas. author names who wrote the page.

viewport tells phones and tablets to use the real screen width, so the page is not shown tiny and zoomed out.

21.2a HTML structure and the head · The explanation · step 4 of 13 · part 2 of 3

Meta tags (continued)

e.g.Example
Without charset UTF-8, "Café" can appear as "Café" in some browsers. Without the viewport tag, a phone shows the page as a shrunken desktop page.

21.2a HTML structure and the head · The explanation · step 4 of 13 · part 3 of 3

Meta tags (continued)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Café Retiro: coffee, cakes and breakfast next to Retiro Park, Madrid.">
    <meta name="keywords" content="café, coffee, cake, breakfast, Madrid, Retiro">
    <meta name="author" content="Lucía Moreno">
    <title>Café Retiro | Home</title>
    <base target="_blank">
    <link rel="stylesheet" href="styles/cafe.css">
</head>

The explanation · 9 more steps

More on the lesson page

The lesson page has the rest of the explanation, step by step:

  • Default target window: base
  • Headings and paragraphs
  • Ordered and unordered lists
  • div and classes
  • Tables: table, tr, th, td
  • Merging cells: colspan and rowspan
  • Table and cell sizes
  • Images
  • Sound and video

Open the lesson page

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 1 of 5

Try it: Edit HTML, see the page

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 1 of 5

Quick quiz · 1 of 3

A stylesheet is attached with…

  1. A <css>
  2. B <style> in the body
  3. C <link rel="stylesheet" href="styles.css"> in the head

C. <link rel="stylesheet" href="styles.css"> in the head

The exact file name matters.

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 1 of 5

Quick quiz · 2 of 3

An anchor (bookmark) link…

  1. A Opens a new site
  2. B Jumps to a place on the same page
  3. C Opens an email

B. Jumps to a place on the same page

href="#top" jumps to id="top".

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 1 of 5

Quick quiz · 3 of 3

font-family: Arial, Helvetica, sans-serif; means…

  1. A Use Arial; if missing, Helvetica; otherwise any sans-serif
  2. B Use all three at once
  3. C Only sans-serif

A. Use Arial; if missing, Helvetica; otherwise any sans-serif

Fallbacks, ending with a generic family.

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 1 of 5

Exit ticket

Answer on paper before you go. Then check.

  1. If inline, internal and external styles disagree, the winner is…

    A InlineB InternalC External

    A. Inline Inline beats internal beats external.

  2. Keeping the aspect ratio means…

    A Only the width changesB The image is croppedC Width and height change together so nothing stretches

    C. Width and height change together so nothing stretches Drag a corner, not a side.