Know and understand the reason relative file paths must be used for attached stylesheets

ICT 0417 – Website Authoring: Using Relative File Paths for Stylesheets

Objective

Students will be able to explain why relative file paths are required when linking external style‑sheet files, create correct relative URLs for any HTML document in a web‑project, and demonstrate basic HTML page structure, linking of other resources, and accessibility considerations as required by the Cambridge IGCSE 0417 syllabus.

Syllabus Context (Section 20‑21)

Syllabus UnitKey IdeaNotes Covered Here
20 – SpreadsheetsCell references, core functions, charts, formatting, printingBrief “Spreadsheet Essentials” summary (see end of note)
21 – Website AuthoringHTML structure, CSS linking, relative paths, tables, images, multimedia, forms, publishing, e‑safetyAll content below relates directly to this unit

HTML Page Skeleton (Content & Behaviour Layers)

A minimal, standards‑compliant page that satisfies the syllabus requirements:

<!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="Brief description of the page">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="author" content="Your Name">
<title>Page Title</title>
<link rel="stylesheet" href="css/main.css">  <!-- relative path to stylesheet -->
</head>
<body>
<!-- Content (headings, paragraphs, tables, forms, images, etc.) -->
<script src="js/app.js"></script>  <!-- optional relative path to JavaScript -->
</body>
</html>

  • The content layer is created with HTML elements (headings, tables, forms, images, audio/video, etc.).

  • The presentation layer** is supplied by external CSS (linked with a relative path).

  • The behaviour layer** would be JavaScript; for this syllabus you may state “No client‑side scripting is used” if you do not include a <script> element.

Why Use Relative Paths?

  • Portability: The site works after moving to a different domain, sub‑folder, or local computer.

  • Maintenance: Changing the server address or folder layout never requires editing every link.

  • Collaboration: Team members can keep their own folder structures as long as the relative hierarchy is identical.

  • Performance: No extra DNS lookup is needed, which can slightly speed up page loading.

  • Security: Relative URLs cannot be manipulated to point to malicious external sites.

Absolute vs. Relative Paths

AspectAbsolute PathRelative Path
DefinitionFull URL including protocol and domain, e.g. https://www.example.com/css/style.cssPath written from the location of the current document, e.g. css/style.css or ../styles/main.css
PortabilityLow – breaks if the domain or folder changesHigh – works as long as the relative folder hierarchy is preserved
Typical UseLinking to external resources (CDNs, APIs, third‑party assets)Linking to internal resources (stylesheets, scripts, images, other pages)
Maintenance EffortHigh – every link may need updating after a moveLow – only the folder structure matters

Linking Other Resources (Using Relative Paths)

Beyond CSS, the same principles apply to images, audio/video, JavaScript, fonts, and other files.

  • Images: <img src="assets/images/logo.png" alt="School logo">

  • Audio: <audio controls src="media/audio/intro.mp3">Your browser does not support audio.</audio>

  • Video: <video controls src="media/video/promo.mp4">Your browser does not support video.</video>

  • JavaScript: <script src="js/app.js"></script>

  • Web Fonts: @font-face { font-family: "MyFont"; src: url("../fonts/MyFont.woff2") format("woff2"); }

Behaviour Layer Note (Exam Relevance)

The IGCSE 0417 syllabus only requires an understanding of the presentation layer (CSS). If a page contains no JavaScript, state clearly in the answer, e.g.: “No client‑side scripting is used, therefore only a stylesheet is linked.” This satisfies the examiner’s expectation that you recognise the three layers of a web page.

How to Write a Relative Path for a Stylesheet

  1. Locate the HTML file that will <link> the stylesheet.

  2. Determine where the CSS file sits in relation to that HTML file.

  3. Choose the correct notation:

    • css/style.css – CSS folder is a sub‑folder of the HTML file’s folder.

    • ../css/style.css – CSS folder is one level up from the HTML file.

    • ../../assets/css/style.css – Move up two levels, then down into a different branch.

  4. Insert the <link> element inside the <head> of the HTML document:

    <link rel="stylesheet" href="css/style.css">

  5. Validate:

    • Open the page in a browser – the styles should appear.

    • Upload the whole folder structure to the server and test again.

Common Mistakes & How to Avoid Them

  • Leading slash: /css/style.css points to the domain root – makes the link absolute and defeats portability.

  • Mixed slashes: Always use forward slashes (/) in URLs; backslashes (\) are for Windows file paths only.

  • Wrong number of “..”: Each .. moves up ONE directory level. Count carefully.

  • Case sensitivity: On Linux/Unix servers Style.css ≠ style.css. Match the exact case.

  • Spaces or special characters: Replace with hyphens or encode (e.g., my%20file.css).

Accessibility Checklist (Good Practice for All Web Projects)

  • Provide alt text for every image.

  • Use <th> for table headings and associate them with <td> cells.

  • Label form controls with <label for="id"> elements.

  • Ensure sufficient colour contrast between text and background.

  • Include a logical heading order (<h1> → <h2> → …).

  • Provide captions or transcripts for audio/video where appropriate.

Practical Example – Folder Structure

project/
│
├─ index.html
├─ about.html
├─ css/
│   └─ main.css
├─ js/
│   └─ app.js
├─ pages/
│   ├─ contact.html
│   └─ services.html
└─ assets/
├─ images/
│   └─ logo.png
└─ media/
├─ audio/
│   └─ intro.mp3
└─ video/
└─ promo.mp4

Relative Paths Required for Each HTML File

HTML FilePath to main.cssPath to logo.pngPath to app.js
index.htmlcss/main.cssassets/images/logo.pngjs/app.js
about.htmlcss/main.cssassets/images/logo.pngjs/app.js
pages/contact.html../css/main.css../assets/images/logo.png../js/app.js
pages/services.html../css/main.css../assets/images/logo.png../js/app.js

Publishing Workflow (From Local to Live Site)

  1. Local testing: Open each HTML file in a browser; verify that CSS, images, scripts and media load correctly.

  2. Folder integrity check: Ensure the folder hierarchy on your computer matches the diagram above.

  3. Upload: Use an FTP client or web‑host file manager to transfer the entire project/ folder to the server, preserving the same structure.

  4. Remote verification: Visit the live URL (e.g., https://mydomain.com/project/index.html) and repeat step 1.

  5. Document: Keep a short “site map” in a README.txt file for future developers or exam markers.

Key Take‑aways

  • Relative paths make a website flexible and portable.

  • Calculate the path from the location of the HTML file, not from the server root.

  • Test locally and after uploading to a server to ensure all resources load.

  • Maintain a clear folder hierarchy and document it for future reference.

  • Include basic accessibility features and, where required, note the absence of a behaviour layer.

Command‑Word Cheat‑Sheet (Useful for Paper 2 & 3)

Command wordWhat the examiner expectsSample response starter (relative‑path topic)
DefineGive a concise definition.“A relative file path is a URL that describes the location of a file in relation to the current document’s folder.”
ExplainDescribe reasons or mechanisms.“Relative paths must be used for internal stylesheets because they remain valid when the site is moved to a new server, as the path is calculated from the document’s own location.”
CompareShow similarities and differences.“Both absolute and relative paths locate a file, but absolute paths include the full domain name whereas relative paths rely on the folder hierarchy.”
EvaluateGive a balanced judgement, weighing advantages and disadvantages.“Using relative paths improves portability and maintenance, but it requires careful planning of the folder structure; an incorrectly placed ‘..’ can break the link.”

Quick Review Checklist (for teachers)

  • ✅ Objective clearly states both path‑reasoning and broader web‑authoring skills.

  • ✅ Syllabus units 20 & 21 are explicitly referenced.

  • ✅ HTML skeleton includes all required meta‑tags (charset, viewport, description, keywords, author).

  • ✅ Reasoning for relative paths is linked to portability, maintenance, collaboration, performance and security.

  • ✅ Absolute vs. relative comparison table is present.

  • ✅ Step‑by‑step guide for linking a stylesheet with examples.

  • ✅ Section on linking other resources (images, audio, video, JavaScript, fonts).

  • ✅ Behaviour‑layer note clarifies exam expectations.

  • ✅ Common mistakes, accessibility checklist, and publishing workflow are included.

  • ✅ Realistic folder‑structure example with a path‑lookup table.

  • ✅ Key take‑aways summarise the most exam‑relevant points.

  • ✅ Command‑word cheat‑sheet added for assessment preparation.

  • ✅ Spreadsheet Essentials summary (see below) satisfies the 20 % spreadsheet requirement.

Spreadsheet Essentials (Brief Summary for Unit 20)

Even though the main focus of this note is website authoring, the IGCSE 0417 qualification also assesses spreadsheets. The following points provide a quick revision aid that can be linked to a web‑project (e.g., embedding a CSV file).

  • Cell references: A1 (relative) vs. \$A\$1 (absolute).

  • Core functions:

    • SUM(range) – total of a range.

    • AVERAGE(range) – mean value.

    • MIN(range) / MAX(range) – smallest / largest.

    • IF(condition, valueiftrue, valueiffalse) – basic decision.

    • VLOOKUP(lookupvalue, tablearray, colindex, [rangelookup]) – vertical lookup.

  • Chart creation: Select data → Insert → Choose chart type → Add titles, axis labels, legend.

  • Formatting & printing: Adjust column width, apply cell borders, set print area, use page‑setup (landscape/portrait, margins).

Cross‑Topic Activity (Integrating Spreadsheets & Web Authoring)

1. Create a simple CSV file data.csv containing a list of student scores.

2. Import the CSV into a spreadsheet, calculate the class average using AVERAGE, and create a bar chart.

3. Export the chart as an image (e.g., chart.png) and place it in assets/images/.

4. Add the image to index.html using a relative path: <img src="assets/images/chart.png" alt="Class average chart">.

5. Explain in a short paragraph why the relative path will continue to work if the whole project/ folder is moved to a new server.

Suggested Diagram (Optional for Teachers)

A simple tree diagram showing the project/ hierarchy with arrows from each HTML file to css/main.css, assets/images/logo.png and js/app.js. This visual aid reinforces the concept of “relative navigation”.