Information and Communication Technology (0417) | Navigation

IGCSE ICT (0417) Study Notes: Navigation in HTML (Website Authoring)

Hello! Welcome to the essential guide on how to master Navigation for your Website Authoring practical exams. Navigation is the backbone of any website—it tells the user where they can go next. Think of it as creating the map and the signposts for your site!

In the IGCSE ICT practical papers, you need to prove you can create functional links (hyperlinks) and internal jump points (bookmarks) using HTML. Don't worry, once you understand the basic tags, it's very straightforward!

1. Understanding Hyperlinks and Anchors (The Basics)

A hyperlink is the element (usually text or an image) that, when clicked, takes you to another location. This location can be another page, a different website, or even just another spot on the same page.

The core HTML tag used for navigation is the Anchor Tag: <a>

The Anchor Tag (<a>)

The anchor tag uses an essential attribute called href (Hypertext Reference). This attribute specifies the destination address.

• <a href="...">: This is the actual link that you click.
• The text or image placed between the opening and closing tags is what the user sees and clicks on.

Example:

<a href="homepage.html">Go Home</a>

When a user clicks on the text "Go Home", the browser will navigate to the file named "homepage.html".

What is an Anchor/Bookmark?

An anchor or bookmark is a specific named location *within* a web page. If you have a very long page and want a "Back to Top" button, you need to set a bookmark at the top.

• Bookmarks are created using the id attribute on any existing HTML element (like an <h1> or <p> tag).
• Every id on a single page must be unique.

Analogy: Think of a hyperlink as a letter you are sending, and the bookmark (ID) is the specific mailbox number on a large building.

How to Create a Bookmark (Anchor Target)

Use the id attribute on the element where you want the link to land.

Example creating a bookmark called "section1":

<h4 id="section1">Start of Topic 1</h4>

2. The Different Types of Hyperlinks (Syllabus Checklist)

You must be able to create links to four main types of destinations.

2.1 Linking to a Bookmark on the Same Page

This is used for internal jumps (e.g., jumping from the bottom of the page back to the top). The href attribute must start with a # (hash symbol) followed immediately by the target id name.

Example (linking to the bookmark created above):

<a href="#section1">Jump to Topic 1</a>

Memory Aid: If you see the # symbol in the href, it means the link is going somewhere on the # (same) page!

2.2 Linking to Other Locally Stored Web Pages

This is the most common link type in web authoring tasks. You link to another HTML file stored in the same folder or directory structure. This uses a Relative File Path.

Example:

<a href="products.html">View Our Products</a>

2.3 Linking to an External Website (URL)

This link takes the user away from your website to another site on the World Wide Web. This requires an Absolute File Path.

• The link must include the full protocol, usually http:// or https://.

Example:

<a href="https://www.google.com">Search Google</a>

2.4 Linking to an Email Address (Mailto)

Using the mailto: protocol in the href will open the user’s default email client, pre-filling the recipient's address.

Example:

<a href="mailto:manager@site.org">Send us an enquiry</a>

2.5 Using Images as Hyperlinks

Instead of clicking text, you can click an image to navigate. To do this, simply place the <img> tag inside the <a> tag.

Example:

<a href="index.html"><img src="home_icon.jpg" alt="Home" /></a>

Tip: Always remember to include the alt attribute for images! This is important for accessibility if the image fails to load.

3. File Paths: Absolute vs. Relative

This is a common source of confusion but is critical for your practical work, especially when submitting files for grading.

3.1 Relative File Paths (Use for Local Files)

A relative path is the address of a file relative to the current location. It assumes the browser already knows where the root folder of your website is.

• Used when: Linking between pages within your website (e.g., from index.html to about.html).
• Why use it? When the examiner copies your entire website folder onto their own computer, the relative links still work because the files are still positioned correctly *relative* to each other.
• Example: href="products/summer.html" (Go into the "products" folder and find "summer.html")

3.2 Absolute File Paths (Use for External Websites)

An absolute path is the complete, full address, like a GPS coordinate, starting with the root directory or domain name.

• Used when: Linking to a website outside of your own project (e.g., Google, Wikipedia).
• Key Feature: It always starts with the protocol (http:// or https://).
• Example: href="https://www.example.com/page.html"

4. Controlling the Link Target (Where the Page Opens)

Sometimes you don't want the user to leave your current page entirely; you might want the linked page to open in a new tab. We control this using the target attribute inside the <a> tag.

The syllabus requires you to know how to open a link in the same window, a new window, or a window named as specified.

Key Target Values:

1. Same Window (The Default)

This is the default behaviour. The linked document replaces the current document in the same browser window or tab.

Code (You usually don't need to specify this, but you can): target="_self"

2. New Window/Tab

This forces the linked document to open in a brand new, unnamed browser window or tab. This is great for external links so the user doesn't lose your site.

Code: target="_blank"

Example:

<a href="https://externalsite.com" target="_blank">Visit External Site</a>

3. Specified Named Window

This is often used when working with frames (though frames are less common now) or when directed specifically in the exam task. If a window already exists with that name, the content will load there; if not, a new window with that name is created.

Code: target="window_name" (where window_name is any name you choose, like info_popup or main_content)

Example:

<a href="data.html" target="info_frame">Open Data Sheet</a>