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

Website Authoring – Hyperlinks (ICT 0417)

Learning Objective

By the end of this lesson you will be able to create hyperlinks that:

  • Jump to a bookmark on the same page (text or image).

  • Open another page stored locally on the same computer.

  • Open a page on a remote website using its full URL.

  • Launch the default e‑mail client (or other URI scheme) with pre‑filled information.

  • Control where the link opens – the same window, a new window, or a named window.

  • Apply optional attributes (download, rel, title, aria‑label) for security and accessibility.

  • Style link states with CSS pseudo‑classes.

1. Page Structure – Content Layer Basics

Every HTML document consists of two main sections:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
…content goes here…
</body>
</html>

  • <head> – meta‑data, page title, character set, viewport settings, links to external resources (CSS, favicons, etc.).

  • <body> – all visible content: headings, paragraphs, lists, tables, images, audio/video, links, and structural containers.

2. Core HTML Elements (Content Layer)

These are the building blocks you will use most often. The syllabus also expects you to recognise the semantic elements that give meaning to page sections.

ElementPurposeExample
<h1>–<h6>Document headings – hierarchical structure.<h2>Features</h2>
<p>Paragraph of text.<p>Welcome to our site.</p>
<ul>, <ol>, <li>Unordered / ordered lists.<ul><li>Item</li></ul>
<table>Tabular data – use <thead>, <tbody>, <tr>, <th>, <td>.

<table>
<thead>
<tr><th>Name</th><th>Score</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>85</td></tr>
</tbody>
</table>

<img>Embedded image – requires src and alt.<img src="logo.png" alt="School logo">
<audio>, <video>Multimedia playback.<audio src="song.mp3" controls></audio>
<div>, <span>Generic containers – div for block‑level, span for inline. Use class or id for styling.<div class="feature">…</div>
<section>, <article>, <nav>, <header>, <footer>Semantic elements that describe the role of a block of content.<nav><a href="index.html">Home</a></nav>

3. Hyperlinks – The <a> Element

3.1 Basic Syntax

<a href="destination">Link text</a>

The href attribute defines the destination. All other attributes are optional but often essential for usability, security or accessibility.

3.2 Full Attribute Overview

AttributePurposeTypical Values / Example
hrefTarget URL or fragment identifier.href="page2.html" or href="#section3"
targetWhere the link opens (see 3.4).target="_blank"
downloadForce download of the linked resource.download="report.pdf"
relRelationship to the linked document; also used for security with _blank.rel="noopener noreferrer"
titleTooltip text shown on hover.title="Read the full article"
aria-labelAccessible name for screen‑reader users.aria-label="Open PDF in new tab"

3.3 Linking to a Bookmark on the Same Page

Bookmarks are created with an id (or the legacy name) on any element.

<h2 id="features">Features</h2>
<a href="#features">Jump to Features</a>

3.4 Controlling the Browsing Context – target

ValueEffectSecurity / Accessibility Note
_selfOpens in the same tab/window (default).–
_blankOpens in a new, unnamed tab/window.Always add rel="noopener noreferrer". Indicate in the link text that a new tab will open.
_parentOpens in the parent frame (relevant only with framesets).Rarely needed in modern sites.
_topBreaks out of all frames and loads in the full window.Same security considerations as _blank.
myWindow (any custom name)Opens in a named window; creates it if it does not exist.Useful for pop‑up style windows, but ensure the user can control the behaviour.

3.5 Linking to Other Pages (Internal & External)

  • Relative path – based on the current file’s location.

    <a href="about.html">About us</a>

  • Root‑relative path – starts with “/” and is relative to the web‑server’s document root.

    <a href="/resources/help.html">Help</a>

  • Absolute URL – includes protocol and domain.

    <a href="https://www.bbc.com">BBC News</a>

Remember: a leading “/” points to the server root; omit it for a true relative link.

3.6 Other URI Schemes

Links can use any valid URI scheme, not just http or mailto.

<a href="mailto:support@example.com?subject=Help%20request">Email Support</a>
<a href="tel:+441234567890">Call us</a>
<a href="ftp://ftp.example.com/file.zip">Download via FTP</a>

3.7 Hyperlinking an Image

<a href="large-photo.html" target="_blank" rel="noopener">
<img src="thumb.jpg" alt="Thumbnail of large photo">
</a>

Wrap the <img> inside the <a>. Provide meaningful alt text; add aria-label if the image alone does not convey the purpose.

3.8 Styling Link States with CSS (Presentation Layer)

<style>
a:link    { color:#0066cc; text-decoration:none; }   /* unvisited */
a:visited { color:#663399; }                         /* visited */
a:hover   { color:#ff6600; text-decoration:underline; } /* mouse over */
a:active  { color:#cc0000; }                         /* while clicking */
</style>

These pseudo‑classes help users recognise link status and improve accessibility.

4. Common Pitfalls & How to Avoid Them

  • Incorrect relative paths – double‑check folder hierarchy; a leading “/” points to the server root.

  • Missing protocol in external URLs – always include https:// or http://.

  • Spaces in file names – replace with hyphens or encode as %20. Use lower‑case letters only.

  • Security risk with _blank – always add rel="noopener noreferrer".

  • Accessibility – indicate when a link opens a new window/tab; use clear link text and aria-label where needed.

  • Deprecated name attribute for anchors – use id instead.

  • Forgetting semantic elements – choose <nav>, <header>, <footer>, <section>, <article> where appropriate.

5. Testing & Validation

  • Open each page in at least two browsers (e.g., Chrome and Firefox) to verify visual and functional behaviour.

  • Use the W3C Markup Validation Service to check HTML syntax.

  • Check for broken links with tools such as Broken Link Checker or browser extensions.

  • Confirm that mailto:, tel: and other schemes launch the appropriate application.

6. Behaviour Layer Note

For the IGCSE exam, JavaScript or other scripting languages are not required for hyperlink tasks. All required functionality can be achieved with pure HTML (and optional CSS for presentation).

7. Summary Checklist

  1. Define the destination with href (bookmark, file path, URL, or other URI scheme).

  2. Give the target element an id when creating same‑page bookmarks.

  3. Choose an appropriate target value; add rel="noopener noreferrer" when using _blank.

  4. Include optional attributes (download, title, aria-label) for usability, security, and accessibility.

  5. Wrap images inside <a> tags to make them clickable.

  6. Style link states with CSS pseudo‑classes.

  7. Validate the markup and test all links in multiple browsers.

  8. Use semantic elements (<nav>, <header>, <section>…) where appropriate.

  9. Follow file‑naming conventions: lower‑case, no spaces, hyphens instead of underscores.

8. Practice Exercise – Build a Mini‑Website

Create three pages: index.html, about.html, contact.html. Implement the features below, then validate each page.

8.1 index.html

  • Bookmark link that jumps to a “Features” section further down the same page.

  • Link to about.html that opens in the same window.

  • Link to contact.html that opens in a new named window called contactWin.

  • Mailto link to info@school.edu with the subject “Inquiry”.

  • At least one image that links to a larger version of the same image.

8.2 about.html

  • Semantic layout using <header>, <nav>, <section>, and <footer>.

  • Link back to the top of index.html using a relative link.

  • Provide a “Download brochure” link that forces a PDF download.

8.3 contact.html

  • Contains a mailto: link with pre‑filled subject and body.

  • Contains a tel: link for a phone number.

  • Uses target="_blank" with rel="noopener noreferrer" for any external links.

8.4 Validation & Testing

  1. Run each page through the W3C validator – fix any errors.

  2. Open the pages in Chrome and Firefox; check that all links work as specified.

  3. Use a broken‑link checker to ensure no dead URLs.

  4. Confirm that the “Download brochure” link triggers a file download rather than navigation.

  5. Verify that screen‑reader users receive appropriate link descriptions (use title or aria-label where needed).