Year 10 · ICT · Summer 2

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

A full past-paper website task

Exam practice21.2b HTML body: text, tables and media21.2c Hyperlinks and file paths21.3b CSS: page styles, tables and the cascade

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

You will learn to

  • Complete a full past-paper website task under timed conditions.
  • Give clear evidence: screenshots of the HTML and CSS source, and of the page in a browser.
  • Evaluate your work against the mark scheme, including the evidence document.

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

Success criteria

You have got it when you can say:

  • I can finish the task in the time set.
  • I can test every link and every image before I save.
  • I can mark my evidence document and say which marks were lost, and why.

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

Retrieval starter

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

  1. Last lesson

    .csv is…

    A A web pageB A pictureC Comma-separated values: a generic data format

    C. Comma-separated values: a generic data format

  2. Last unit

    A legend shows…

    A The chart titleB The axis scaleC Which colour is which data series

    C. Which colour is which data series

  3. Earlier this year

    A section break lets you…

    A Spell checkB Add a pictureC Change orientation or columns part-way through a document

    C. Change orientation or columns part-way through a document

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

Key words (1 of 5)

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 4 of 5

Key words (2 of 5)

Head
The part of a page holding information about it: title, meta tags, stylesheet links.
External stylesheet
A separate .css file attached to pages with the link element.
Inline style
CSS written in a style attribute inside one tag; it affects only that 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 4 of 5

Key words (3 of 5)

Selector
The part of a CSS rule that says which elements it styles, such as h1 or .note.
Generic font family
A fallback type of font (serif, sans-serif, monospace) used if named fonts are missing.
Cascade
The rules that decide which style wins when two styles set the same property.
Bookmark
A named place on a page, made with an id, that a hyperlink can jump to.

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

Key words (4 of 5)

Hyperlink
Clickable text or an image that goes to another place, made with the a tag.
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 4 of 5

Key words (5 of 5)

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.

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

Run it like the real exam

Use the same time rule as the spreadsheet task: about 2 minutes per mark.

  1. Copy the source files into the folder the task names. Work only on the copies.
  2. Edit the HTML and CSS in a text editor. View the page in a browser.
  3. Save each file with the exact name the task gives.
  4. Put your name, centre number and candidate number on the evidence document.

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

Run it like the real exam (continued)

!Watch out

Use relative paths only. A path like C:\Users\… works on your computer but breaks everywhere else.

The explanation · step 2 of 22

The evidence document

The examiner never opens your web page. They only mark the screenshots in your evidence document.

EvidenceWhat it must show
HTML sourceEvery line the task asks about, readable. Zoom in or take two screenshots.
CSS sourceThe whole stylesheet, including the selectors.
Page in a browserThe finished page, so the examiner sees the styles working.
★Remember

If a line of code is cut off or blurred in the screenshot, it cannot earn a mark.

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

Check before you stop

  • Click every link. Does each one open the right page, window or email?
  • Does every image show? Check the file name, including capital letters.
  • Is the stylesheet attached? Rename it for a moment: the page should lose its styles.
  • Search the code for C:\ or file:// and replace them with relative paths.

The explanation · step 3 of 22 · part 2 of 2

Check before you stop (continued)

Then mark it against the scheme. Add each lost mark to the same log as the spreadsheet task.

21.2b HTML body: text, tables and media · The explanation · step 4 of 22 · part 1 of 2

Headings and paragraphs

`<h1>` is the main heading. `<h2>` is a subheading. `<h3>` is a heading inside an h2 section.

`<p>` is a paragraph. The browser adds space before and after it.

Use headings in order. Choose the tag for what the text is, not for how big it looks. CSS controls the size.

<h1>Café Retiro</h1>
<h2>Breakfast</h2>
<h3>Served until 12:00</h3>
<p>Fresh coffee, toast with tomato and olive oil, and homemade cakes.</p>

21.2b HTML body: text, tables and media · The explanation · step 4 of 22 · part 2 of 2

Headings and paragraphs (continued)

?Why?

Search engines and screen readers use headings to understand the page. A blind visitor can jump from heading to heading.

21.2b HTML body: text, tables and media · The explanation · step 5 of 22 · part 1 of 3

Ordered and unordered lists

An unordered list `<ul>` shows bullet points. Use it when order does not matter.

An ordered list `<ol>` shows numbers. Use it when order matters, such as steps or a top 3.

Each item goes in `<li>` (list item), inside the ul or ol.

21.2b HTML body: text, tables and media · The explanation · step 5 of 22 · part 2 of 3

Ordered and unordered lists (continued)

<ul>
    <li>Café con leche</li>
    <li>Tostada con tomate</li>
    <li>Tarta de Santiago</li>
</ul>

<ol>
    <li>Choose a cake.</li>
    <li>Pay at the counter.</li>
    <li>Collect your order.</li>
</ol>

21.2b HTML body: text, tables and media · The explanation · step 5 of 22 · part 3 of 3

Ordered and unordered lists (continued)

!Watch out

An li must be inside a ul or ol. A list item on its own is invalid HTML.

21.2b HTML body: text, tables and media · The explanation · step 10 of 22 · part 1 of 2

Images

`<img>` inserts an image. It has no closing tag.

src is the relative path to the image file. alt is the alternative text, read aloud by screen readers and shown if the image cannot load.

width and height set the display size in pixels. Keep the aspect ratio (topic 12), or the image looks stretched.

21.2b HTML body: text, tables and media · The explanation · step 10 of 22 · part 2 of 2

Images (continued)

e.g.Example
tarta.jpg is 600 × 400 pixels. The ratio is 600 ÷ 400 = 1.5. The question asks for a width of 300 pixels. Height = 300 ÷ 1.5 = 200 pixels. The ratio is kept. width="300" height="300" would squash the cake into a square.
<img src="images/tarta.jpg" alt="A slice of tarta de Santiago, an almond cake" width="300" height="200">
?Why?

Alt text makes the page accessible to blind visitors. The exam often asks for it and gives the exact words.

The explanation · 16 more steps

More on the lesson page

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

  • div and classes
  • Tables: table, tr, th, td
  • Merging cells: colspan and rowspan
  • Table and cell sizes
  • Sound and video
  • Bookmarks and links to them
  • Links to pages, websites and email
  • Target windows: _blank, _self and named windows
  • Relative and absolute paths
  • Why absolute paths to local files break
  • A full stylesheet for h1, h2, h3, p and li
  • Table borders: thickness, colour, collapse, invisible
  • Cells: padding, spacing, size, colour and alignment
  • The cascade: which style wins
  • How website marks are lost
  • Giving evidence

Open the lesson page

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

Quick quiz · 1 of 3

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

  1. A External
  2. B Internal
  3. C Inline

C. Inline

Inline beats internal beats external.

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

Quick quiz · 2 of 3

Keeping the aspect ratio means…

  1. A Width and height change together so nothing stretches
  2. B Only the width changes
  3. C The image is cropped

A. Width and height change together so nothing stretches

Drag a corner, not a side.

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

Quick quiz · 3 of 3

Cropping…

  1. A Makes it brighter
  2. B Cuts away part of the image
  3. C Flips it

B. Cuts away part of the image

Keep only the part you want.

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

Exit ticket

Answer on paper before you go. Then check.

  1. A big image is compressed for the web because…

    A It becomes a vectorB Smaller files load fasterC It looks better

    B. Smaller files load faster Fewer pixels or more compression means a smaller file.

  2. Reflecting an image…

    A Makes it darkerB Rotates it 90°C Mirrors it

    C. Mirrors it Flip horizontally or vertically.