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 Unit | Key Idea | Notes Covered Here |
|---|---|---|
| 20 – Spreadsheets | Cell references, core functions, charts, formatting, printing | Brief “Spreadsheet Essentials” summary (see end of note) |
| 21 – Website Authoring | HTML structure, CSS linking, relative paths, tables, images, multimedia, forms, publishing, e‑safety | All content below relates directly to this unit |
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>
<script> element.| Aspect | Absolute Path | Relative Path |
|---|---|---|
| Definition | Full URL including protocol and domain, e.g. https://www.example.com/css/style.css |
Path written from the location of the current document, e.g. css/style.css or ../styles/main.css |
| Portability | Low – breaks if the domain or folder changes | High – works as long as the relative folder hierarchy is preserved |
| Typical Use | Linking to external resources (CDNs, APIs, third‑party assets) | Linking to internal resources (stylesheets, scripts, images, other pages) |
| Maintenance Effort | High – every link may need updating after a move | Low – only the folder structure matters |
Beyond CSS, the same principles apply to images, audio/video, JavaScript, fonts, and other files.
<img src="assets/images/logo.png" alt="School logo"><audio controls src="media/audio/intro.mp3">Your browser does not support audio.</audio><video controls src="media/video/promo.mp4">Your browser does not support video.</video><script src="js/app.js"></script>@font-face { font-family: "MyFont"; src: url("../fonts/MyFont.woff2") format("woff2"); }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.
<link> the stylesheet.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.<link> element inside the <head> of the HTML document:
<link rel="stylesheet" href="css/style.css">
/css/style.css points to the domain root – makes the link absolute and defeats portability./) in URLs; backslashes (\) are for Windows file paths only... moves up ONE directory level. Count carefully.Style.css ≠ style.css. Match the exact case.my%20file.css).alt text for every image.<th> for table headings and associate them with <td> cells.<label for="id"> elements.<h1> → <h2> → …).
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
| HTML File | Path to main.css |
Path to logo.png |
Path to app.js |
|---|---|---|---|
| index.html | css/main.css |
assets/images/logo.png |
js/app.js |
| about.html | css/main.css |
assets/images/logo.png |
js/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 |
project/ folder to the server, preserving the same structure.https://mydomain.com/project/index.html) and repeat step 1.README.txt file for future developers or exam markers.| Command word | What the examiner expects | Sample response starter (relative‑path topic) |
|---|---|---|
| Define | Give 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.” |
| Explain | Describe 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.” |
| Compare | Show 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.” |
| Evaluate | Give 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.” |
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).
A1 (relative) vs. $A$1 (absolute).SUM(range) – total of a range.AVERAGE(range) – mean value.MIN(range) / MAX(range) – smallest / largest.IF(condition, value_if_true, value_if_false) – basic decision.VLOOKUP(lookup_value, table_array, col_index, [range_lookup]) – vertical lookup.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.
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”.
Create an account or Login to take a Quiz
Log in to suggest improvements to this note.
Your generous donation helps us continue providing free Cambridge IGCSE & A-Level resources, past papers, syllabus notes, revision questions, and high-quality online tutoring to students across Kenya.