21-website-authoring

Metatag	Written as	What it is for
charset		Tells the browser which character set to use, so letters like é, £ and — display correctly instead of turning into garbage.
description		A sentence or two summarising the page. Search engines often show exactly this text under your link in their results.
keywords		A comma-separated list of the words someone might search for. Modern search engines give it far less weight than they used to — but the syllabus still names it.
author		Records who wrote the page. Useful for a school or business site where several people contribute.
viewport		Tells a phone or tablet to use its own real width. Without it a phone pretends to be a ~980 px desktop and shows the whole page zoomed out and unreadable.

Meaning	Pre-defined style	Use it for
Heading level 1	Largest, boldest, space above and below	The page title — one per page
Heading level 2	Smaller than h1, still bold	Main sections
Heading level 3	Smaller again, still bold	Sub-sections inside an h2
Paragraph	Normal text, space above and below	Running text
List item	Indented with a bullet or a number	Always inside a or an

Item	Price
Notebook	450

01

Paper 3 · 2 hours 15 minutes · 70 marks

Why this section is worth more than it looks

Website authoring is one of only two applications in Paper 3. The task hands you a text file, some images, a sound clip, a video and a stylesheet — and asks you to build pages that work. Every mark is practical: either the link goes where it should, or it does not.

1 It is a craft, not a memory test

Nobody asks you to recite HTML. They ask you to make something: put a title in the head, attach the stylesheet, span a table cell across two columns, make an image link to another page, set a link to open in a new window.

That means the marks go to candidates who have practised the doing, not the reading.

2 The marks hide in small places

A single missing quote mark, an absolute file path instead of a relative one, a colspan counted wrong, an alt attribute left off an image. None of these stops the page working — each one is simply a mark gone.

§21 is where a careful candidate quietly beats a clever one.

3 The three layers explain everything

Once you can say "HTML is the content, CSS is the presentation, JavaScript is the behaviour" — and mean it — the rest of the section stops feeling like a list of unrelated tags.

That one idea is the whole of §21.1, and it organises the other two sub-sections.

The one-sentence summary You write the content in HTML, you describe how it should look in CSS, and you keep the two in separate files joined by a relative file path. Get that right and almost every §21 mark follows.

21.1Web development layers — know the three and what each does

21.2Create a web page — the head, the body, tables, objects, links

21.3Use stylesheets — external styles, inline styles, classes, the cascade

Paper 3Practical test, no internet, source files supplied

02

The shape of the chapter

The §21 roadmap

The syllabus splits this section into three unequal parts. §21.1 is one idea you must be able to explain. §21.2 is the long list of things you must be able to do in HTML. §21.3 is the same again for CSS.

Figure 1 — The three web development layers. Content in HTML, presentation in CSS, behaviour in a scripting language.

The running example for this chapter

Every simulation builds one small site: Riverside Bookshop, four pages, one stylesheet, some images and a video. Using one site throughout means you build a single mental model of how the files fit together — which is exactly what the file-path and stylesheet questions are testing.

▸riverside/

index.htmlhome page

about.htmlabout us

books.htmlwhat we sell

contact.htmlfind us

▸ css/

main.csslayout

theme.csscolours & fonts

▸ images/

logo.png150 × 60

shop.jpg800 × 450

▸ media/

tour.mp4shop tour

Why the folders matter

The four .html files sit in the root folder. The stylesheet lives in css/, the pictures in images/ and the video in media/. That is deliberate: it means every link in the site is a relative path such as css/main.css or images/logo.png — the only kind the exam will accept.

The rule that wins marks A path that starts C:\ or /home/ works on the computer it was written on and nowhere else. Move the folder — as the exam centre does when it loads your files — and every one of those links breaks.

03

21.1 · Web development layers

The three web development layers

Every web page you have ever looked at is three things happening at once. The syllabus wants you to know the three layers, what each is written in, and — most importantly — what each one is responsible for.

Content layer

Enter the content and create the structure of a web page.

Written in HTML. It holds the words, the headings, the lists, the table, the images, the links — and the structure that says what is a heading and what is a paragraph.

In a nutshell The content layer is what the page says.

Presentation layer

Display and format the elements within a web page.

Written in CSS. It decides the font, the size, the colour, the background, the borders, the spacing and the alignment — everything about appearance, and nothing about content.

In a nutshell The presentation layer is how the page looks.

Behaviour layer

A scripting language to control the elements within a web page.

Usually JavaScript. It makes the page respond: a menu that opens, a form that checks itself, an image that changes when you click it.

In a nutshell The behaviour layer is how the page reacts.

Figure 2 — How the layers are wired together. The HTML file names the other two in its head section; the browser collects all three and renders one page.

The distinction examiners look for Candidates routinely write that CSS "changes the content" or that HTML "makes the text bold". Neither is true. HTML carries the content; CSS only ever changes how that content is displayed. If you delete the stylesheet the page still contains every word — it just looks like a 1995 document.

Simulation 1 — The layer switcher

Switch each layer on and off · the words never change, only the page does

The browser window

The source for this layer

Add the presentation layer — not one word of the HTML changes.

04

21.2 · Create a web page

The head section

The head holds information about the page rather than anything the visitor reads. Nothing you put in the head appears in the page itself — with two exceptions you can see: the title shows in the browser tab, and the metatags show up in search results.

The head — information about the page

<title> — the text shown in the browser tab and used as the bookmark name

<meta> — charset, description, keywords, author, viewport

<link> — attaches external stylesheets

<base> — sets the default target window for every link

<style> — a stylesheet written inside the page

<script> — attaches or contains a script

The body — everything the visitor sees

Headings and paragraphs: h1, h2, h3, p

Lists: ul and ol with li

Structure and grouping: div, with class and id

Tables: table, tr, th, td

Objects: images, sound clips, video

Links: <a> to pages, files, bookmarks and email

Figure 3 — Where the head shows up. The title in the tab, the description in a search result, the viewport on a phone.

Simulation 2 — The head builder

Fill the head in · watch the tab, the search result and the phone change

Page title

Character set

Description (for search engines)

Keywords, separated by commas

Author

Metatag: viewport

Base target: _blank

Attached stylesheets, in order

The head this produces

What the visitor sees

Everything in the head is about the page, not in it.

05

21.2 · Create a web page

Metatags

A metatag is a piece of information about the page that the visitor never sees on the page. Search engines, browsers and phones read them instead. The syllabus names five, and each has a different job.

Metatag	Written as	What it is for
charset	<meta charset="UTF-8">	Tells the browser which character set to use, so letters like é, £ and — display correctly instead of turning into garbage.
description	<meta name="description" content="…">	A sentence or two summarising the page. Search engines often show exactly this text under your link in their results.
keywords	<meta name="keywords" content="…">	A comma-separated list of the words someone might search for. Modern search engines give it far less weight than they used to — but the syllabus still names it.
author	<meta name="author" content="…">	Records who wrote the page. Useful for a school or business site where several people contribute.
viewport	<meta name="viewport" content="width=device-width, initial-scale=1">	Tells a phone or tablet to use its own real width. Without it a phone pretends to be a ~980 px desktop and shows the whole page zoomed out and unreadable.

The pattern to learn Four of the five use name plus content; only charset stands alone. So the shape is <meta name="…" content="…"> — name says what kind of information, content says what the information is.

Simulation 3 — The metatag explorer

Pick a metatag · see the syntax, the effect, and what happens without it

The tag

What it does

Without it

The effect

Metatags live in the head — nothing here appears in the page itself.

06

21.2 · Create a web page

The body: text tags and lists

The syllabus names five tags you must be able to apply to text: h1, h2, h3, p and li. Each carries a pre-defined style — which is why choosing the right tag matters more than making the text look right by hand.

Tag	Meaning	Pre-defined style	Use it for
<h1>	Heading level 1	Largest, boldest, space above and below	The page title — one per page
<h2>	Heading level 2	Smaller than h1, still bold	Main sections
<h3>	Heading level 3	Smaller again, still bold	Sub-sections inside an h2
<p>	Paragraph	Normal text, space above and below	Running text
<li>	List item	Indented with a bullet or a number	Always inside a <ul> or an <ol>

Ordered and unordered lists

A list is always two tags: the container and the items.

unordered — bullets
<ul>
<li>Books</li>
<li>Stationery</li>
</ul>

ordered — numbers
<ol>
<li>Choose a book</li>
<li>Pay at the till</li>
</ol>

Swap ul for ol and the bullets become numbers. The li tags do not change at all.

Why tag choice matters

A candidate who wants a big bold heading sometimes types the words and makes them bold by hand. Three things are then lost:

A screen reader cannot announce it as a heading, so a blind user cannot skim the page.

A search engine cannot tell that it is important.

One stylesheet rule cannot restyle every heading at once — which is exactly what §21.3 asks you to do.

The exam wording "Apply tags to text within a web page to display pre-defined styles including h1, h2, h3, p, li." The tag supplies the style — you do not fake it.

Simulation 4 — The tagging desk

A plain text file · choose the tag for each line · watch the page appear

Source file: content.txt

The page it produces

The HTML in the body

Tag every line before you touch a single piece of formatting.

07

21.2 · Create a web page

Divs, classes and ids

Three tools for grouping things. They look similar in code and do completely different jobs — and the difference between a class and an id is one of the most reliably tested ideas in §21.

<div> — a container

A div is a box. It has no meaning and no style of its own; it exists to group other elements together so you can treat them as one thing.

<div>
<h2>Opening hours</h2>
<p>Mon–Sat, 9 to 6</p>
</div>

On its own a div changes nothing. Give it a class and it becomes useful.

class — reusable

A class is a name you can put on as many elements as you like. Every element with that class picks up the same style.

In CSS a class is written with a dot: .offer { … }

id — unique, and a target

An id is a name used once only on a page. It identifies one specific element — and that is what makes a bookmark possible.

<h2 id="contact">Find us</h2>
then
<a href="#contact">Contact</a>

In CSS an id is written with a hash: #contact { … }

Class or id — the decision Ask: "will this name appear more than once?" If yes, it is a class. If it is one element and you need to point a link at it, it is an id. A style that fifty elements share is a class; a bookmark destination is always an id.

Simulation 5 — The box workshop

Wrap each block in a div · give it a class or an id · watch the code and the page

Three blocks of content

The page it produces

The HTML

How the same class is written in CSS

A class is reusable; an id is unique.

08

21.2 · Create a web page

Tables

Tables in web authoring do two jobs: they hold tabular data, and they structure elements on the page. The syllabus asks for both, plus the attributes that control size, spanning and styling.

Figure 4 — The anatomy of a table. The four tags nest inside each other, and a spanning cell simply replaces the cells it covers.

Table attributes you must know

Attribute	Goes on	Does
colspan="n"	th or td	Makes one cell cover n columns
rowspan="n"	th or td	Makes one cell cover n rows
width="600"	table or td	Fixed size in pixels
width="80%"	table or td	Flexible size, relative to the window
class / style	any of them	Applies CSS to the table, row or cell

Why tables are used to structure a page

Before CSS could lay pages out, tables were the only way to put two things side by side. They are still used for that, and the syllabus expects you to know why:

They hold elements in a fixed grid that behaves the same in every browser

Columns keep their alignment — a caption under an image stays under it

A whole block can be moved by changing one cell width

The exam answer Tables are used to structure the elements within a web page — to place text and objects in a fixed grid so they line up. A table holding data and a table holding layout are the same tags; only the purpose differs.

Simulation 6 — The table builder

Select a cell · make it a header · span it across or down · set the width

The grid — click a cell

Table width

Show a border

How it renders

The HTML

A spanning cell replaces the cells it covers — you simply do not write them.

09

21.2 · Create a web page

Objects: images, sound and video

An object is anything in the page that is not text. The syllabus lists images, sound clips and video — and for each one it names the attributes you must be able to set.

Images

src — where the file is. A relative path.

alt — alternate text: read aloud by a screen reader, shown if the image cannot load.

width / height — the display size in pixels.

The img tag has no closing tag — it is one of the few that stands alone.

Video

controls — show the play, pause and volume controls.

no controls — leave the word out and the visitor cannot start or stop it.

autoplay — start playing as soon as the page loads.

Think about the audience Autoplay with sound switched on is why most browsers now block it. If a question asks you to remove the controls, you are usually being asked for a background video that loops.

Sound

Sound uses the same three ideas as video: src, controls and autoplay. The difference is that audio has no visible size, so width and height never apply.

The three video settings to learn Display controls · remove controls · autoplay. Those exact words are in the syllabus, so use them in an answer.

Aspect ratio — the mark that separates careful candidates from the rest

An image or video has a natural shape, called its aspect ratio: the width divided by the height. Change one number and not the other and the picture stretches.

Original — 800 × 450. Ratio 800 ÷ 450 = 1.78, which is 16:9.

Correct resize — 400 × 225. Ratio still 1.78. The picture is smaller and the shape is right.

Distorted — 400 × 450. Ratio now 0.89. Everyone in the photo is now twice as wide as they should be.

The rule Change width and height by the same factor. Halve one, halve the other. If you only know the new width, work the height out from the ratio rather than guessing.

Simulation 7 — The object inserter

Pick an object · set size, controls and alt text · keep the aspect ratio honest

Object

Width in pixels

Height in pixels

Alternate text

Source path

Ratio 1.78 — matches the original

The page it produces

The HTML

Change the size by the same factor on both sides and the shape stays true.

10

21.2 · Create a web page

Hyperlinks

A hyperlink is a piece of text or an image that takes the visitor somewhere else when it is clicked. The syllabus names five destinations and three target windows — fifteen combinations you should be able to produce without thinking.

Figure 5 — The five destinations and the three target windows. Fifteen combinations, all built from the same two attributes.

The anchor tag

The tag is <a> — short for anchor. It has two jobs: it is the link you click, and (with an id instead of an href) it can be the target you land on.

the link you click
<a href="about.html" target="_blank">About us</a>
the place you land — no href
<h2 id="contact">Find us</h2>

The text between the tags — About us — is what the visitor clicks. Swap that text for an <img> tag and you have an image link.

Making an image into a link

The img goes inside the a. Click anywhere on the picture and the link fires.

Do not forget the alt An image link with no alt text is invisible to a screen reader — the user reaches a link with no name. Alt text on a linked image should describe where the link goes, not just what the picture shows.

Simulation 8 — The hyperlink builder

Choose what is clickable, where it goes and which window opens it

What the visitor clicks on

Where it goes

Value

Which window opens it

The HTML

In the page

What happens when it is clicked

Two attributes do all the work: href says where, target says how.

11

21.2 · Create a web page

Bookmarks and anchors

A bookmark is a named spot inside a page that a link can jump to. On a long page it is the difference between scrolling for thirty seconds and arriving instantly.

How a bookmark is made

It is always two steps, and they must match exactly:

Name the destination. Give the element an id attribute: <h2 id="contact">Find us</h2>

Aim a link at it. Use the id with a hash in front: <a href="#contact">Contact</a>

The hash is the whole trick # in an href means "a bookmark". With nothing after it — href="#" — the link goes nowhere useful. With a name after it, the browser scrolls to the element carrying that id.

Bookmarks on another page

The same idea works across files: put the page name first, then the hash, then the bookmark.

a bookmark on this page
<a href="#contact">Find us</a>
a bookmark on another page
<a href="about.html#contact">Find us</a>

The two words to keep straight An anchor is the <a> tag itself. A bookmark is the destination — the element carrying the id. The anchor is the thing you click; the bookmark is the thing you land on.

Simulation 9 — The bookmark jumper

Click a contents link · watch the page jump and the id light up

Contents

The HTML for the contents list

The page — top

Click any contents link to jump straight to that section.

12

21.2 · Create a web page

Relative and absolute file paths

This is the single most costly mistake in the whole of Paper 3. Get a path wrong and the page works on your machine and breaks at the exam centre — or worse, works while you test it and breaks when the marker opens it.

Figure 6 — Relative paths describe a file's position inside the site; absolute paths describe its position on one particular machine.

The syllabus wording, and the reason "Relative file path and absolute file path including the reason absolute file paths must not be used for hyperlinks to locally saved web pages/objects." The reason is portability: the exam centre copies your files onto a different computer, so any path that names a user, a drive or a home folder is guaranteed to be wrong there.

Simulation 10 — The path resolver

Pick where you are linking from and what you are linking to

Linking from

Linking to

The site

The two ways to write it

Relative use this

Absolute breaks if moved

How the relative path is worked out

In the tag

Relative paths survive being moved; absolute ones do not.

13

21.3 · Use stylesheets

Where styles live

A style can be written in three places. They all do the same job; they differ in how far their effect reaches and how easy they are to maintain.

Inline — a style attribute

<p style="color:red;">
Closing soon
</p>

Affects one element only

Mixed into the HTML, so it breaks the separation of the layers

Change fifty paragraphs and you edit fifty tags

Use it for a genuine one-off. The syllabus calls it an inline style attribute.

Internal — a <style> block

<head>
  <style>
    p { color: red; }
  </style>
</head>

Affects every matching element on this page

Kept in the head, out of the body

But it is only in this one file — the other pages do not get it

External — a .css file

styles.css
p { color: red; }
index.html head
<link rel="stylesheet"
href="css/main.css">

Affects every page that attaches it

One edit restyles the whole site

This is what the syllabus means by the presentation layer

The shape of a CSS rule

Part	Example	What it does
Selector	h1	Names what is being styled
Property	color	Names what is changing
Value	#0f2f4f	Says what it changes to
Declaration	color: #0f2f4f;	One property-value pair, ending in a semicolon

Comments and saving

A comment in a stylesheet is ignored by the browser and read by the next human. It is how you leave a note explaining why a rule is there.

/* the site header band — keep the contrast high so the white text stays readable */ header { background: #0f2f4f; }

A comment opens with /* and closes with */ — and can run over several lines

The file must be saved with the extension .css — this is cascading stylesheet format

It is a plain text file: no formatting, no page structure, just rules

Why the syllabus asks for comments A stylesheet with no comments is a stylesheet nobody dares edit. Attaching a comment is one of the listed skills, and it takes four keystrokes.

The reason relative paths are used for attached stylesheets too The href in a <link> obeys exactly the same rule as a hyperlink. Write href="css/main.css" and the site can be copied anywhere. Write href="C:\Users\Asha\riverside\css\main.css" and the styling vanishes the moment it is.

14

21.3 · Use stylesheets

The cascade

Cascading is the rule that decides which style wins when several of them apply to the same element. The answer is not "the last one you typed" — it is a fixed hierarchy, and inline styles sit at the top of it.

Figure 7 — The cascade hierarchy. Browser default at the bottom, inline style attribute at the top; later attachments beat earlier ones.

The two rules, stated plainly

Later beats earlier. When two attached stylesheets style the same thing, the one attached second in the head wins — so the order of your <link> tags is not cosmetic, it is decisive.

Closer beats further. An inline style attribute is written on the element itself, so it is closer than any stylesheet and always wins.

The exam phrasing "The hierarchy of multiple attached stylesheets and inline styles within a web page." If a question gives you two stylesheets and an inline style and asks what colour the text will be, the inline style is the answer.

Why cascading is a good idea

It sounds like a nuisance — several places to look for one answer. In practice it is what makes a site maintainable:

A base stylesheet sets the house style for twenty pages at once.

A second stylesheet can re-skin the site for a season or a promotion without touching the first.

An inline attribute handles the one paragraph that genuinely has to differ.

And why it catches people out You write a rule, look at the page, and nothing changes. Nine times out of ten a rule further up the cascade is overriding it — or your stylesheet is attached before the one you are fighting.

Simulation 11 — The cascade resolver

Switch sources on and off · watch which colour actually reaches the paragraph

Which sources are in play

The result

The winner

Turn the inline style on and it wins, no matter what the stylesheets say.

15

21.3 · Use stylesheets

Styles and classes

Both live in the stylesheet and both hold the same kind of properties. The difference is how they get applied: a style finds the elements automatically, a class waits to be asked for.

A style — targets a tag

h2 { color: #14532d; font-size: 20px; }

Written with the tag name and no dot. Every h2 on every page that attaches this stylesheet picks it up automatically.

You do not edit any HTML to use it

It always applies — you cannot switch it off for one element

Ideal for the tags with a clear meaning: h1, h2, h3, p, li

The syllabus wording "Create external styles to be tagged in a web page including h1, h2, h3, p, li." One rule per tag, and the whole site agrees with itself.

A class — waits to be named

.offer { background: #fef3c7; border: 2px solid #f59e0b; padding: 8px; }

Written with a dot in front of the name. Nothing happens until an element asks for it with class="offer".

Any element can carry it — a div, a p, a td, anything

As many elements as you like can share one class

One element can carry several classes, separated by spaces

The exam phrasing "Characteristics of a style and a class including the difference between them." A style applies to every occurrence of a tag; a class applies only where you name it.

Simulation 12 — Style or class?

Style every paragraph at once, or hand a class to just some of them

Five paragraphs

The page

The stylesheet

The body

A class is a label you hand out; a style is a rule that helps itself.

16

21.3 · Use stylesheets

Font and text properties

The syllabus lists six things you must be able to set on text: font family, size, colour, alignment, bold and italic. Each has one CSS property, and each is worth knowing by name.

Property	What it sets	Example values	Watch out for
font-family	The typeface	Arial, sans-serif · Georgia, serif	Always end with a generic family — the browser needs a fallback if the first choice is not installed.
font-size	How big the text is	14px · 1.2em · 120%	px is fixed; em and % are relative to the surrounding text.
color	The text colour	#0f2f4f · red · rgb(15,47,79)	color is the text. The background is a different property entirely.
text-align	Horizontal alignment	left · center · right · justify	It aligns text inside its box — it does not move the box.
font-weight	Boldness	bold · normal	Headings are already bold; adding this to an h2 changes nothing visible.
font-style	Italic	italic · normal	Use it for emphasis, not for whole paragraphs — italic body text is hard to read.

Simulation 13 — The font panel

Set all six properties · read the rule the way the browser does

font-family

font-size

color

text-align

font-weight: bold

font-style: italic

Apply the rule to

The page

The rule

Why the fallback family matters

Write font-family: Georgia; and a visitor without Georgia gets the browser default instead. Write font-family: Georgia, serif; and the browser falls back to some serif face — which keeps the look you designed for.

One rule per tag, and the whole site agrees with itself.

17

21.3 · Use stylesheets

Background properties

Every element has a background, and CSS can fill it with a colour, a picture, or a picture over a colour. The syllabus asks for both.

background-color

div.offer { background-color: #fef3c7; }

A flat colour behind the element. It fills the whole box, including any padding — but not the margin outside it.

Contrast is not optional Dark text on a pale background, or pale text on a dark one. Mid-grey text on a mid-grey background fails accessibility checks and loses marks in a question about audience needs.

background-image

body { background-image: url("images/paper.png"); }

A picture placed behind the content. The path goes inside url("…") and — like every other path in the site — is relative.

By default the image tiles — it repeats to fill the box

background-repeat: no-repeat shows it once

Always set a background-color as well, so text stays readable while the image loads

Simulation 14 — The background studio

Fill a box with a colour, a tiled image, or both

background-color

background-image

background-repeat

Text colour on top

Tiling, in one sentence

If the image is smaller than the box, the browser copies it sideways and downwards until the box is full. That is repeat. A tile designed to join up seamlessly is what makes patterned page backgrounds possible with a file only a few kilobytes in size.

The page

The rule

A background image still needs a background colour behind it.

18

21.3 · Use stylesheets

Tables, borders and spacing

The longest list in §21.3: size, background colour, horizontal and vertical alignment, spacing, padding, and borders — including collapsed, colour, thickness and visible or invisible. All of them can go on the table, the row, the header cell or the data cell.

Borders

table, th, td { border: 2px solid #1e3a8a; }

The shorthand is thickness, then style, then colour.

Thickness — 1px, 2px, thin, thick

Style — solid, dashed, dotted, none

Colour — any colour value, or leave it out to use the text colour

Invisible borders — set the colour to match the background, or use border: none; — how you build a table that structures the page without drawing a grid

border-collapse — the one everybody forgets

With the default separate, every cell draws its own box, so where two cells meet you see two lines side by side and a gap between them.

With border-collapse: collapse; adjacent borders merge into a single line. This is almost always what you want.

The wording "Borders: including collapsed." One word in the syllabus, one line in the stylesheet — and the difference between a table that looks designed and one that looks accidental.

Padding and spacing

padding — the gap inside a cell, between the text and its border. padding: 6px;

border-spacing — the gap between cells. Only has an effect when borders are separate.

width — the table or cell size, in pixels or as a percentage

height — the row or cell height

Crowded tables are the commonest presentation fault in candidate work. Two or three pixels of padding transforms one.

Alignment

text-align — horizontal: left, center, right

vertical-align — vertical: top, middle, bottom

Numbers look best right-aligned so the units columns line up

Text reads best left-aligned; headings often centred

A detail that wins a mark Vertical alignment only becomes visible when a row is taller than its text — which is exactly what a rowspan cell does to the rows beside it.

Simulation 15 — The table styler

Collapse the borders, pad the cells, align the numbers

Table width

Border thickness

Border colour

border-collapse: collapse

Cell padding

text-align

vertical-align

Header background colour

The table

The stylesheet

Collapse the borders and the double lines disappear.

19

Paper 3 · 2 hours 15 minutes · 70 marks

How a website task is set — and how to attack it

You are given a folder of source files and a numbered list of instructions. This section turns everything above into marks under time pressure.

What the question looks like

A website task almost always follows the same shape. You are given a text file of content, some images, a sound or video clip, and a stylesheet. Then you are told to:

Create or open the pages and put the right things in the head — title, metatags, the attached stylesheet.

Put the content in the body, tagged correctly: headings, paragraphs, lists.

Insert the objects — images with alt text, video with or without controls, sized correctly.

Build the links — between your own pages, to a bookmark, to a website, to an email address, each with the right target.

Apply or edit the CSS — a class, a font, a colour, a border, a background.

Produce evidence — screenshots of the page and of the source, printed with your name, centre number and candidate number.

The order that saves time

1 · Check the folder first. Note exactly what is there and where. Every path you write depends on it.

2 · Do the head on every page before any body work. Title, metatags, stylesheet link — then you never forget one.

3 · Attach the stylesheet once, early. Then you can see the page the way the marker will.

4 · Tag, then insert, then link. Structure before decoration, every time.

5 · Test every link by clicking it. A link you have not clicked is a mark you have not earned.

6 · Take the evidence as you go. Screenshot each stage; do not leave it all to the last five minutes.

The mistake	What it looks like	The fix
Absolute file path	Works at home, broken at the centre	Rewrite it relative to the page: images/logo.png
Wrong number of ../ in the path	Image missing from a page inside a folder	Count the folders between the page and the file
Missing quote marks	The attribute silently does nothing	Every value goes in quotes — check both ends
No closing tag	Everything after it inherits the wrong style	Write the opening and closing tag together, then fill between them
colspan counted wrong	The last column of the row is pushed out	Count the cells the spanning one replaces
Forgot to delete the spanned cells	An extra cell appears at the end of the row	A spanning cell replaces them — do not write them
No alt text on an image	Invisible to a screen reader	Add alt="…" to every image
Aspect ratio ignored	People look stretched	Change width and height by the same factor
Bookmark with no matching id	The link does nothing	The hash and the id must match exactly, including the case
Styled one page instead of the stylesheet	The other pages look different	Edit the .css file, not the page
Inline style used where a class was asked for	Only one element changed	Read the verb: "apply a class" means a class
Stylesheet attached after the rule you are fighting	Your rule seems to do nothing	Later attachment wins — check the order of the link tags

Evidence — what you must show

Paper 3 is marked from screenshots and printouts, not from the files. Two kinds of evidence are usually demanded:

The rendered page — proves the site looks and behaves correctly

The source — proves you used a tag rather than faking the effect

If a question asks you to use a class or a metatag, the only way to prove it is to show the source. Get into the habit of capturing both.

Non-negotiable Every piece of evidence carries your name, centre number and candidate number. No identifying detail can mean no marks at all.

Words the examiner will use

Word	What it means you must do
Apply	Put the tag, class or style on the element — do not fake the look
Attach	Link a separate .css file from the head
Insert	Add an object from a supplied file
Appropriate	Justify the choice — there is a mark for why
Adjust	Change a size, keeping the aspect ratio where it applies
Create a bookmark	Add an id, then link to it with a hash
Relative	A path with no drive letter and no leading slash
External	In a separate .css file, not on the tag

20

Test yourself

Chapter 21 quick quiz

Nineteen questions covering every bullet of §21. Answer them all, then check — each one explains itself.

0 / 19 Nothing answered yet — pick an option to see the feedback.

0 / 19

Websiteauthoring

Why this section is worth more than it looks

1 It is a craft, not a memory test

2 The marks hide in small places

3 The three layers explain everything

The §21 roadmap

The running example for this chapter

Why the folders matter

The three web development layers

Content layer

Presentation layer

Behaviour layer

Riverside Bookshop

Simulation 1 — The layer switcher

The head section

The head — information about the page

Simulation 2 — The head builder

Metatags

Simulation 3 — The metatag explorer

What it does

Without it

The body: text tags and lists

Ordered and unordered lists

Why tag choice matters

Simulation 4 — The tagging desk

Divs, classes and ids

— a container

Opening hours

class — reusable

id — unique, and a target

Simulation 5 — The box workshop

How the same class is written in CSS

Tables

Table attributes you must know

Why tables are used to structure a page

Simulation 6 — The table builder

Objects: images, sound and video

Images

Video

Sound

Aspect ratio — the mark that separates careful candidates from the rest

Simulation 7 — The object inserter

Hyperlinks

The anchor tag

Making an image into a link

Simulation 8 — The hyperlink builder

What happens when it is clicked

Bookmarks and anchors

How a bookmark is made

Find us

Bookmarks on another page

Simulation 9 — The bookmark jumper

Relative and absolute file paths

Simulation 10 — The path resolver

Where styles live

Inline — a style attribute

Internal — a block</h4> <div class="synbox"> <span class="ar"><head></span><br/> <span class="ar"><style></span><br/> <span class="fn">p</span> { <span class="p">color</span>: <span class="u">red</span>; }<br/> <span class="ar">

External — a .css file

The shape of a CSS rule

Comments and saving

The cascade

The two rules, stated plainly

Why cascading is a good idea

Simulation 11 — The cascade resolver

Styles and classes

A style — targets a tag

A class — waits to be named

Simulation 12 — Style or class?

Font and text properties

Simulation 13 — The font panel

Why the fallback family matters

Background properties

background-color

background-image

Simulation 14 — The background studio

Tiling, in one sentence

Tables, borders and spacing

Borders

border-collapse — the one everybody forgets

Padding and spacing

Website
authoring

Internal — a

Website
authoring