Know and understand the behaviour layer is for a scripting language to control elements within a web page

Topic 21 – Website Authoring: The Three Web‑Development Layers

Learning Objective

Know and understand the purpose of the behaviour layer and how it works together with the content (HTML) and presentation (CSS) layers to create a complete web page.

1. The Three Layers at a Glance

LayerPrimary technologyWhat it does
ContentHTMLDefines the structure, meaning and basic elements of the page (headings, paragraphs, tables, forms, media, links, bookmarks, etc.).
PresentationCSSControls visual appearance – colours, fonts, layout, spacing, responsive design.
BehaviourJavaScript (or another client‑side scripting language)Adds interactivity, reacts to user actions, and can change the page while it is displayed.

2. Content Layer – Required HTML Features (IGCSE 0417 §21.2)

2.1 Minimal Document Head (exam‑required meta‑tags)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">                     <!-- character set – required -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- responsive – required -->
<meta name="description" content="Brief description of the page">   <!-- optional but useful -->
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">   <!-- external CSS – see §3 -->
</head>
<body>
…content goes here…
</body>
</html>

2.2 Common Content Elements (required for the exam)

  • Headings: <h1>…</h1> to <h6>

  • Paragraphs: <p>…</p>

  • Lists: ordered <ol>, unordered <ul> with <li>

  • Links: <a href="page2.html">Link text</a>

  • Bookmarks (named anchors):

    <a id="top"></a>                <!-- target – can be linked to with #top -->
    <a href="#top">Back to top</a>

  • Images: <img src="photo.jpg" alt="Description">

  • Tables (required for the exam):

    <table>
    <thead>
    <tr><th>Header 1</th><th>Header 2</th></tr>
    </thead>
    <tbody>
    <tr><td>Data 1</td><td>Data 2</td></tr>
    </tbody>
    </table>

  • Media objects:

    • Audio – <audio controls src="song.mp3"></audio>

    • Video – <video controls src="movie.mp4"></video>

  • Forms (required for the exam):

    <form action="process.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <label>Gender:</label>
    <input type="radio" name="gender" value="M">Male
    <input type="radio" name="gender" value="F">Female
    <label for="country">Country:</label>
    <select id="country" name="country">
    <option value="uk">UK</option>
    <option value="us">USA</option>
    </select>
    <button type="submit">Submit</button>
    </form>

  • Semantic sectioning elements (helpful but not mandatory): <section>, <article>, <nav>, <header>, <footer>

2.3 File‑Path Basics (exam‑relevant)

  • Relative path: images/photo.jpg (from the current folder)

  • Absolute path (from site root): /assets/images/photo.jpg

3. Presentation Layer – Required CSS Features (IGCSE 0417 §21.3)

3.1 Linking a Style Sheet

<link rel="stylesheet" href="styles.css">

3.2 Basic CSS Syntax

selector {
property: value;
property: value;
}

3.3 Common Selectors & Properties

  • Element selector: p { margin: 0; }

  • Class selector: .highlight { background: yellow; }

  • ID selector: #mainHeader { color: #003366; }

  • Colour, background‑color, font‑family, font‑size, text‑align

  • Box model – margin, border, padding, width, height

  • Display – block, inline, inline‑block

3.4 Cascading & Inheritance (exam‑relevant points)

  • Specificity order: inline style > ID selector > class selector > element selector.

  • Later rules in the same stylesheet override earlier rules of equal specificity.

  • External stylesheet overrides embedded style, which overrides inline style (unless inline uses !important).

3.5 Simple CSS Example (styling the HTML from §2)

/* styles.css */
body {
font-family: Arial, sans-serif;
line-height: 1.5;
margin: 20px;
}
h1 {
color: #2a7ae2;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
.highlight {
background-color: #ffeb3b;
}

4. Behaviour Layer – Scripting Basics (IGCSE 0417 §21.4)

4.1 What the Behaviour Layer Does

  • Runs a client‑side script (normally JavaScript) after the page has loaded.

  • Uses the Document Object Model (DOM) to read, add, remove or modify any element.

  • Responds to events such as clicks, key presses, form submissions, mouse movements, or timers.

4.2 Core JavaScript Concepts for the Exam

  • Event listeners – attach a function to an element:

    element.addEventListener('click', functionName);

  • DOM access methods:

    document.getElementById(), document.querySelector(), document.getElementsByClassName()

  • Changing content:

    • element.textContent = 'plain text'; – inserts only text.

    • element.innerHTML = '<strong>HTML</strong>'; – inserts HTML markup.

  • Preventing default actions – essential for client‑side form validation:

    event.preventDefault();

  • Timing functions – setTimeout() (run once after a delay) and setInterval() (repeat at regular intervals).

4.3 Simple Interaction Example (click a button to change a paragraph)

<button id="changeBtn">Change text</button>
<p id="demo">Original paragraph.</p>
<script>
document.getElementById('changeBtn').addEventListener('click', function () {
// change only the text – no HTML is added
document.getElementById('demo').textContent = 'Paragraph updated by JavaScript!';
});
</script>

4.4 Basic Form Validation (exam‑style)

<form id="myForm">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Send</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function (e) {
var email = document.getElementById('email').value.trim();
if (email === '') {
e.preventDefault();               // stop form submission
alert('Please enter an email address.');
}
});
</script>

4.5 What the Exam Expects

  • The behaviour layer does not alter the original HTML file; changes exist only while the page is displayed in the browser.

  • Be able to describe, in words, what an event‑listener does and the difference between innerHTML and textContent.

  • Explain the purpose of event.preventDefault() when handling forms.

  • Identify simple JavaScript snippets and state their effect on the DOM (e.g., changing text, showing an alert, stopping a form submission).

5. Quick Revision Checklist

  • HTML – document structure, required meta‑tags, headings, paragraphs, lists, tables, forms, media, hyperlinks, bookmarks, alt text, relative/absolute paths.

  • CSS – linking a stylesheet, selectors (element, class, id), cascade order, basic properties, box model, responsive meta‑tag.

  • JavaScript – purpose of the behaviour layer, DOM, event listeners, textContent vs innerHTML, preventDefault(), setTimeout/setInterval, simple validation.

6. Suggested Diagram (for classroom use)

Stack diagram showing the three layers:

  • Bottom: Content Layer (HTML)

  • Middle: Presentation Layer (CSS)

  • Top: Behaviour Layer (JavaScript)

Arrows point from the JavaScript layer down to the DOM, illustrating how scripts read and modify HTML elements that are then rendered with CSS styling.