Cambridge Notes, Past Papers, Revision Questions

21. Website Authoring – Hyperlinks

Learning Objective

By the end of this section students will be able to create hyperlinks (from text or images) that:

Link to a bookmark on the same page

Link to another page stored locally

Link to an external website using a full URL

Open the default mail client to send an e‑mail

Open in a specified location – the same window, a new window/tab, or a named window

Explain how hyperlinks fit into the three‑layer web‑development model

21.1 – Web‑Development Layers (Content | Presentation | Behaviour)

Layer	Purpose	Typical Technologies (relevant to this syllabus)
Content	Structure and meaning of the page	HTML – e.g. `<a>`, `<div>`, `<table>`, `<img>`
Presentation	How the page looks	CSS – external stylesheet, internal `<style>`, or inline styles
Behaviour	Interaction and dynamic effects	JavaScript, HTML5 APIs (optional – not required for the 0417 exam)

Hyperlinks are created in the content layer using the <a> element. Their colour, underline and hover effects are controlled in the presentation layer with CSS. Any extra behaviour (e.g., a confirmation dialog) would belong to the behaviour layer, but this is not required for the IGCSE exam.

21.2 – Building a Complete HTML Page (Exam Checklist)

When constructing a web page for the Cambridge 0417 exam, the <head> section must contain exactly the following meta‑tags (unless the exam question states otherwise):

<meta charset="UTF-8"> – character encoding (mandatory)

<meta name="viewport" content="width=device-width, initial-scale=1.0"> – makes the page responsive (mandatory)

<meta name="description" content="Brief description of the page"> – used by search engines (mandatory)

<meta name="keywords" content="keyword1, keyword2"> – optional but often required in exam tasks

<meta name="author" content="Your Name"> – optional but useful for credit

<title>Your Page Title</title>

<link rel="stylesheet" href="styles.css"> – attaches an external CSS file (relative path only)

Minimal HTML5 Skeleton (meets the syllabus)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Sample page for IGCSE ICT">
<meta name="keywords" content="hyperlink, bookmark, CSS">
<meta name="author" content="Your Name">
<title>Hyperlink Demo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Page content goes here – see sections below -->
</body>
</html>

21.3 – Using `<div>` and Classes for Organisation

Grouping related elements with <div> makes the markup easier to read and lets CSS target whole sections.


<div class="nav">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</div>

Why use classes instead of inline styles?

HTML stays clean – important for AO2 (producing ICT‑based solutions).

One rule can style many elements, saving time when revisions are needed.

Classes can be reused on any element (text, images, tables, etc.).

21.4 – Stylesheets (CSS) Overview

Key Concepts

Cascading – when several rules match, the rule with the highest specificity wins.

Hierarchy of precedence – browser defaults → external stylesheet → internal <style> → inline style="…" (the order required for quick recall).

Relative vs. absolute paths – for the exam you must use relative paths (e.g., styles.css, images/pic.jpg). Absolute paths such as C:\myfiles\... are marked wrong.

Classes vs. IDs – a class (.myClass) can be applied to many elements; an ID (#myId) must be unique and has higher specificity.

Example External Stylesheet (styles.css)


/* Basic page layout */
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
margin: 0;
padding: 0;
}
/* Navigation bar */
.nav a {
color: #0066cc;
text-decoration: none;
margin-right: 1rem;
}
.nav a:hover {
text-decoration: underline;
}
/* Link types – colour coding for exam marking */
a.external { font-weight: bold; color: #d9534f; }   /* external URLs */
a.bookmark { color: #5cb85c; }                    /* intra‑page links */
/* Table styling */
table {
border-collapse: collapse;
width: 100%;
margin: 1rem 0;
}
th, td {
border: 1px solid #ccc;
padding: 0.5rem;
}
th {
background-color: #f2f2f2;
}

Linking the stylesheet (in the page head)


<link rel="stylesheet" href="styles.css">

21.5 – Creating a Bookmark on the Same Page

Give the target element an id (or the older name attribute).

Link to it with a hash (#) followed by the id.


<h2 id="chapter3">Chapter 3 – Advanced Topics</h2>
...
<a href="#chapter3" class="bookmark">Jump to Chapter 3</a>

21.6 – Linking to Another Locally Stored Page

Use a relative path. The path is written from the location of the current file.

Same folder:

<a href="about.html">About Our School</a>

Sub‑folder called pages:

<a href="pages/contact.html">Contact Page</a>

Parent folder (go up one level):
```
<a href="../index.html">Home</a>
```

21.7 – Linking to an External Website

Always include the protocol (http:// or https://). For exam answers, indicate the target behaviour (new tab) if required.


<a href="https://www.bbc.com" target="_blank" class="external">BBC News</a>

21.8 – Creating a Mailto Link

The mailto: scheme opens the user’s default e‑mail client with a pre‑filled address, subject and (optionally) body.


<a href="mailto:info@example.com?subject=Inquiry&body=Hello%20team"%gt;Email Us</a>

Remember to URL‑encode spaces (%20) and other special characters in the query string.

21.9 – Controlling Where the Link Opens (the `target` Attribute)

Same window (default) – target="_self" or omit the attribute.

New window or tab – target="_blank".

Named window – give a name (e.g., helpWindow); subsequent links with the same name reuse that window.


<a href="page2.html" target="_self">Same window</a>
<a href="https://en.wikipedia.org" target="_blank">New tab</a>
<a href="help.html" target="helpWindow">Help (named window)</a>
<a href="faq.html" target="helpWindow">FAQ – same named window</a>

21.10 – Hyperlinking an Image

Wrap the <img> element inside an <a> tag. The image must always have meaningful alt text – this is a mandatory requirement for the exam.


<a href="gallery.html" target="_blank">
<img src="images/thumb.jpg" alt="Open gallery" width="150">
</a>

21.11 – Embedding Multimedia (Audio & Video)

HTML5 provides <audio> and <video> elements with built‑in controls. Always supply fallback text for browsers that do not support the element.

Audio Example


<audio controls>
<source src="media/song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Video Example


<video width="320" height="240" controls>
<source src="media/intro.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

21.12 – Table Example (with CSS Styling)

The table below demonstrates <th>, <td>, colspan and rowspan. The CSS from styles.css will style it automatically.


<table>
<tr>
<th rowspan="2">Day</th>
<th colspan="2">Morning Session</th>
<th colspan="2">Afternoon Session</th>
</tr>
<tr>
<th>Subject</th>
<th>Room</th>
<th>Subject</th>
<th>Room</th>
</tr>
<tr>
<td>Monday</td>
<td>Maths</td>
<td>101</td>
<td>History</td>
<td>202</td>
</tr>
<!-- Additional rows omitted for brevity -->
</table>

21.13 – Summary Table of Common Link Types

Link Purpose	Example `href`	Target Attribute
Bookmark on same page	`#section2`	`_self` (default)
Local page in same folder	`contact.html`	`_self`
External website	`https://www.google.com`	`_blank`
E‑mail address	`mailto:support@example.com?subject=Help`	`_self`
Named window (e.g., help)	`help.html`	`helpWindow`

Practice Exercise

Create a bookmark called top at the very beginning of the page.

Insert a link at the bottom of the page that says “Back to top” and points to that bookmark.

Add a link that opens resources.html in a new tab.

Insert an image placeholder that, when clicked, opens the school’s homepage in the same window.

Write a mailto link that opens a new e‑mail addressed to admin@school.org with the subject “Website feedback”.

Common Mistakes to Avoid (aligned with syllabus wording)

Missing the protocol in an external URL (write https://www.example.com, not www.example.com).

Using spaces in file names – replace spaces with hyphens (my-page.html) or underscores.

Forgetting the leading # when linking to a bookmark.

Using target="_blank" without informing the user – add a visual cue (e.g., an icon) or text such as “(opens new tab)”.

Applying inline CSS to links instead of using classes – reduces maintainability and may lose marks for AO2.

Using absolute file paths (e.g., C:\site\page.html) – the exam requires relative paths only.

Omitting alt text for every <img> – mandatory for accessibility and AO2.

Quick Reference Cheat‑Sheet


<a href="page.html">Link text</a>                     
<a href="page.html" target="_blank">Link</a>          
<a href="page.html" target="myWin">Link</a>          
<a href="#section">Jump to section</a>               
<a href="mailto:name@domain.com">Email</a>           
<a href="https://example.com">External site</a>

Be able to create hyperlinks from text and images to bookmarks on the same page, other locally stored web pages, a website using the URL, send mail to a specified email address, to open in a specified location (the same window, a new window, with a w

21. Website Authoring – Hyperlinks

Learning Objective

21.1 – Web‑Development Layers (Content | Presentation | Behaviour)

21.2 – Building a Complete HTML Page (Exam Checklist)

Minimal HTML5 Skeleton (meets the syllabus)

21.3 – Using `<div>` and Classes for Organisation

21.4 – Stylesheets (CSS) Overview

Key Concepts

Example External Stylesheet (styles.css)

Linking the stylesheet (in the page head)

21.5 – Creating a Bookmark on the Same Page

21.6 – Linking to Another Locally Stored Page

21.7 – Linking to an External Website

21.8 – Creating a Mailto Link

21.9 – Controlling Where the Link Opens (the `target` Attribute)

21.10 – Hyperlinking an Image

21.11 – Embedding Multimedia (Audio & Video)

Audio Example

Video Example

21.12 – Table Example (with CSS Styling)

21.13 – Summary Table of Common Link Types

Practice Exercise

Common Mistakes to Avoid (aligned with syllabus wording)

Quick Reference Cheat‑Sheet

Support e-Consult Kenya

Be able to create hyperlinks from text and images to bookmarks on the same page, other locally stored web pages, a website using the URL, send mail to a specified email address, to open in a specified location (the same window, a new window, with a w

21. Website Authoring – Hyperlinks

Learning Objective

21.1 – Web‑Development Layers (Content | Presentation | Behaviour)

21.2 – Building a Complete HTML Page (Exam Checklist)

Minimal HTML5 Skeleton (meets the syllabus)

21.3 – Using <div> and Classes for Organisation

21.4 – Stylesheets (CSS) Overview

Key Concepts

Example External Stylesheet (styles.css)

Linking the stylesheet (in the page head)

21.5 – Creating a Bookmark on the Same Page

21.6 – Linking to Another Locally Stored Page

21.7 – Linking to an External Website

21.8 – Creating a Mailto Link

21.9 – Controlling Where the Link Opens (the target Attribute)

21.10 – Hyperlinking an Image

21.11 – Embedding Multimedia (Audio & Video)

Audio Example

Video Example

21.12 – Table Example (with CSS Styling)

21.13 – Summary Table of Common Link Types

Practice Exercise

Common Mistakes to Avoid (aligned with syllabus wording)

Quick Reference Cheat‑Sheet

Support e-Consult Kenya

21.1 – Web‑Development Layers (Content | Presentation | Behaviour)

21.3 – Using `<div>` and Classes for Organisation

21.9 – Controlling Where the Link Opens (the `target` Attribute)