Know and understand 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

Website Authoring – Relative and Absolute File Paths

Objective

By the end of this lesson students will be able to:

• Define absolute and relative file paths.
• Explain why absolute paths must not be used for hyperlinks to locally saved web pages or objects.
• Apply the concepts when linking HTML pages, images, stylesheets and scripts.
• Evaluate the impact of using the correct path type on portability, collaboration, e‑safety and data security (AO2 & AO3).

Quick Review – How the “File‑Path” note stacks up against the Cambridge IGCSE ICT 0417 syllabus

Syllabus Alignment (Cambridge IGCSE ICT 0417)

Key Definitions

• File path – The address that tells a computer where a file is stored.
• Absolute file path – A complete address that starts from the root of the file system or from a protocol.

  • Windows example: file:///C:/Users/John/Documents/site/index.html
  • Web example: https://www.example.com/assets/css/style.css

• Relative file path – An address given in relation to the location of the current document.

  • Same folder: images/logo.png
  • One level up: ../scripts/app.js
  • Two levels up: ../../styles/main.css

Absolute File Paths

Characteristics

1. Start from the root of the drive or from a protocol (file://, https://).
2. Contain the full directory hierarchy.
3. Remain unchanged regardless of the location of the referencing document.

When They Are Useful

• Linking to resources on a public web server.
• Referencing files on a fixed network share where the path never changes.

Relative File Paths

Characteristics

1. Written from the perspective of the current document’s folder.
2. Use . for the current folder and .. to move up one level.
3. Make a site portable – the same set of files can be moved to a different folder or computer without breaking links.

Common Forms

• images/photo.jpg – from current folder to a sub‑folder.
• ../scripts/app.js – up one level, then into scripts.
• ../../styles/main.css – up two levels, then into styles.

Behaviour Layer (JavaScript)

Although the current learning outcome does not require scripting, students should recognise that JavaScript forms the behaviour layer of a web site. A simple, commented‑out script can illustrate the layer without affecting the assessment:

<!-- Behaviour layer (optional) -->
<script>
/* Uncomment to display a greeting
alert('Welcome to my site!'); 
*/</script>

Understanding that the behaviour layer exists helps learners see the three‑layer model (content, presentation, behaviour) and why path concepts apply to all external resources.

Why Absolute Paths Must Not Be Used for Local Hyperlinks

Case Study (e‑Safety)

Emma uploaded a group project to the school’s learning‑management system. The HTML pages used absolute paths such as file:///C:/Users/Emma/Documents/Project/images/logo.png. After publishing, visitors could see the C:/Users/Emma folder name, inadvertently revealing Emma’s home‑directory structure. The teacher asked the group to replace every absolute path with a relative one before re‑uploading, thereby protecting personal data and complying with Cambridge data‑protection principles.

Practical Folder Structure

website/
│
├─ index.html
├─ about.html
├─ images/
│   └─ logo.png
└─ css/
└─ style.css

Linking from about.html to the logo image

• Absolute path (not recommended for local use): file:///C:/Users/John/website/images/logo.png
• Relative path (recommended): images/logo.png

Semantic HTML Checklist (Content Layer – 21.2)

Using meaningful tags improves accessibility, SEO and aligns with good ICT practice.

1. Wrap the page header in <header>.
2. Place primary navigation inside <nav>.
3. Group related content with <section> or <article>.
4. Put the footer in <footer>.
5. Use alt attributes that describe the image purpose (e.g., alt="School logo").

CSS Selector Cheat‑Sheet (Presentation Layer – 21.3)

Mini‑Exercise

1. Add <p class="note">Important note</p> inside index.html.
2. Add <h1 id="mainHeader">Welcome</h1> to the same page.
3. In css/style.css write:

   .note { background:#fffbcc; padding:5px; }
   #mainHeader { colour:#0066cc; }
   

4. Refresh the browser – the paragraph should have a light‑yellow background and the heading should appear in the defined colour.

Step‑by‑Step Example: Linking a Stylesheet (21.3)

1. Create the folder css inside website.
2. Inside css create style.css with the following rules:

   /* Presentation layer – external stylesheet */
   body { font-family: Arial, sans-serif; line-height: 1.5; }
   h1 { colour:#0066cc; }
   .note { background:#fffbcc; padding:5px; }
   #mainHeader { colour:#0066cc; }
   

3. Open index.html (or any HTML page) and add the link in the <head> section using a relative path:

   <!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <title>My First Page</title>
   <!-- Relative link to the external stylesheet -->
   <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
   <header>
   <h1 id="mainHeader">Welcome to My Site</h1>
   </header>
   <nav>
   <a href="about.html">About</a>
   </nav>
   <section>
   <p class="note">This paragraph is highlighted using a class selector.</p>
   <img src="images/logo.png" alt="School logo">
   </section>
   <footer>
   <p>© 2026 My School</p>
   </footer>
   </body>
   </html>
   

4. Save the file and open it in a browser. The heading, paragraph and image should display correctly, proving the relative link works.
5. If you replace the relative link with an absolute URL such as https://example.com/css/style.css, the page will still work online but will break when the folder is moved offline or when the internet connection is unavailable.

Minimal Complete HTML File (21.2 – Content Layer)

Copy the block below into a notebook, save as index.html inside the website folder, and test it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Page</title>
<link rel="stylesheet" href="css/style.css"> <!-- relative path -->
</head>
<body>
<header>
<h1 id="mainHeader">Sample Heading</h1>
</header>
<nav>
<a href="about.html">Go to About page</a>
</nav>
<section>
<p>This paragraph demonstrates a basic HTML page.</p>
<p class="note">Note: this uses a class selector for styling.</p>
<img src="images/logo.png" alt="School logo">
</section>
<footer>
<p>© 2026 My School</p>
</footer>
</body>
</html>

Move the whole website folder to a different location or another computer; all links continue to work because they are relative.

CSS Cascade Order & Specificity (Presentation Layer)

When the same property is defined in more than one place, the rule with the highest specificity wins. Class and ID selectors increase specificity over element selectors.

Web‑development Layers – What the Note Demonstrates

Real‑World Impact (Syllabus 5.1)

Productivity gain: In a recent school project, a group of six students saved 45 minutes of debugging time by using relative paths. When the folder was copied to a USB stick for the teacher’s review, every link worked without modification.

Checklist for Using Paths Correctly

1. Identify the location of the current document.
2. Determine the target file’s location relative to the current document.
3. Use ../ to move up directories as needed, then list the sub‑folders.
4. Write the path with forward slashes (/) – even on Windows.
5. Test the link after moving the whole folder to a new location or another computer.
6. When linking to an online resource, use an absolute URL; for any local resource, always use a relative path.
7. Before publishing:

   • Search the project for “file:///” or drive letters (e.g., C:/).
   • Replace any absolute local paths with the appropriate relative path.
   • Validate that no personal folder names appear in the code.

Assessment Activities (AO2 & AO3)

• Task 1 – Apply (AO2): Create the folder structure shown above, write index.html, about.html, css/style.css and an image. Use relative paths for all links. Verify that the site works after moving the folder to a USB stick or another computer.
• Task 2 – Evaluate (AO3): Write a short paragraph (80‑100 words) evaluating the advantages and disadvantages of using absolute versus relative paths in a collaborative school project. Include considerations of portability, security, and future web publishing.

Summary

• Absolute paths give a complete address but are inflexible for local projects and can expose personal directory information.
• Relative paths are concise, portable, and the preferred method for linking pages, images, stylesheets and scripts within a locally saved website.
• Always use relative paths for local hyperlinks; reserve absolute URLs for resources that are permanently hosted on the web.
• Correct path usage supports the three web‑development layers, enhances collaboration, and meets e‑safety and data‑security requirements of the Cambridge IGCSE ICT syllabus.