Cambridge Syllabus Notes

21. Website Authoring

Objective

By the end of this unit you will be able to:

Explain the three layers of web authoring – Content, Presentation and Behaviour (security/e‑safety).
Write correct HTML to create a simple web page, including headings, paragraphs, lists, images, tables, forms, links and multimedia (audio, video, embedded objects).
Apply CSS to control font family, size, colour, alignment, bold, italic and other presentation properties.
Link external style‑sheets, use selectors, and manage the cascade and specificity.
Identify e‑safety considerations when using HTML forms and hyperlinks.
Produce the evidence required for the IGCSE ICT assessment (file naming, folder structure, screenshots, evidence document).

1. The Three Layers of Web Authoring

Layer	Purpose	Key HTML / CSS Features
Content (HTML)	Structure and meaning of the page.	Doctype, `<html>`, `<head>`, `<body>`, headings, paragraphs, lists, images, audio, video, `<embed>`/`<iframe>`, tables, forms, links, `class`/`id` attributes, accessibility attributes.
Presentation (CSS)	Visual appearance – fonts, colours, spacing, layout.	Selectors, cascade, specificity, external vs. embedded vs. inline styles, `font-family`, `font-size`, `color`, `text-align`, `font-weight`, `font-style`, background, margin, padding, border, `display`/`float`, responsive units.
Behaviour (Security & e‑Safety)	Protect data and users when the page interacts with the web.	Secure form handling, `mailto:` vs. server‑side scripts, HTTPS/SSL, safe linking, `alt` text for images, proper use of `label` elements, basic client‑side validation attributes (`required`, `pattern`, `type`), and a note that JavaScript is not required for the IGCSE exam.

2. HTML Basics – Building the Content Layer

2.1 Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First IGCSE Page</title>
    <link rel="stylesheet" href="css/style.css">  <!-- external CSS -->
</head>
<body>
    ...content...
</body>
</html>

2.2 Common Structural Elements

<h1>–<h6> – headings (semantic hierarchy).
<p> – paragraph.
<ul>, <ol>, <li> – unordered / ordered lists.
<img src="…" alt="…"> – image with alternative text.
<a href="…" target="_blank"> – hyperlink (internal or external).
<div> and <span> – generic containers; useful for applying classes/IDs.
class="…" and id="…" – hooks for CSS and JavaScript.

2.3 Multimedia Elements (HTML 5)

<audio src="song.mp3" controls>Your browser does not support audio.</audio>
<video src="movie.mp4" width="320" height="240" controls>Your browser does not support video.</video>
<embed src="flash.swf" width="300" height="200"> – generic embedded object.
<iframe src="https://www.youtube.com/embed/xyz" width="560" height="315"></iframe> – external content.

2.4 Tables

Header 1	Header 2	Header 3
Row 1 Col 1	Row 1 Col 2	Row 1 Col 3
Spanning two columns		Row 2 Col 3

Accessibility tip: always use <caption> and scope="col"/scope="row" where appropriate.

2.5 Forms – Elements, Validation & e‑Safety

A form for the exam should demonstrate a range of input types and client‑side validation attributes. The form itself must be processed on a secure server (HTTPS) – never rely on mailto: for personal data.

<form action="process.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br>

    <label for="dob">Date of Birth:</label>
    <input type="date" id="dob" name="dob"><br>

    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" 
           title="Enter a 10‑digit phone number"><br>

    <label for="gender">Gender:</label>
    <input type="radio" id="male" name="gender" value="M">
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="F">
    <label for="female">Female</label><br>

    <label for="newsletter">
        <input type="checkbox" id="newsletter" name="newsletter">
        Subscribe to newsletter
    </label><br>

    <label for="feedback">Feedback:</label>
    <textarea id="feedback" name="feedback" rows="4" cols="30"></textarea><br>

    <button type="submit">Send</button>
</form>

e‑Safety note: Use HTTPS, validate inputs on the server side, and never expose personal data in the URL.

3. CSS Fundamentals – Controlling the Presentation Layer

3.1 Selectors, Cascade & Specificity

Element selector: p { … }
Class selector: .highlight { … }
ID selector: #mainTitle { … }
Combined selector: ul li { … }

The cascade decides which rule wins when several apply. Specificity hierarchy (low → high): element → class → ID → inline style → !important.

3.2 Linking Stylesheets – Relative & Absolute Paths

Relative path (recommended for exam work): <link rel="stylesheet" href="css/style.css">
Absolute path (for external resources): <link rel="stylesheet" href="https://example.com/style.css">

3.3 Placement of CSS

External stylesheet – best practice, reusable across pages.
Embedded stylesheet – placed inside <style> in the <head> (useful for short projects).
Inline style – style="…" attribute on an element (only for demonstration; not exam‑recommended).

3.4 Core Presentation Properties (beyond fonts)

color – text colour.
background-color / background-image.
margin, padding, border – box‑model spacing.
display (block, inline, inline‑block) and float – basic layout.
Responsive units: em, rem, %, vh/vw.

4. Font‑Related CSS Properties

font-family – chooses the typeface (e.g., Arial, "Helvetica Neue", sans-serif).
font-size – size of the text (12px, 1.2em, 80%).
color – text colour (hex, rgb, named colours).
text-align – left, right, center, justify.
font-weight – normal, bold, numeric values (100‑900).
font-style – normal, italic, oblique.

4.1 Example of Inline Styling (illustrative only)

<p style="font-family: Arial; font-size: 14px; color:#333333;
          text-align: justify; font-weight:bold; font-style:italic;">
    This paragraph demonstrates all six font properties.
</p>

4.2 Recommended Font Families

Generic family	Typical fonts	Typical use
serif	Times New Roman, Georgia	Print‑like documents, formal reports
sans‑serif	Arial, Verdana, Helvetica	Web pages, headings, modern layouts
monospace	Courier New, Consolas	Code snippets, tabular data
cursive	Comic Sans MS, Brush Script	Informal notes, decorative text
fantasy	Impact, Papyrus	Special effects, titles

4.3 Choosing an Appropriate Font Size

Body text – 14 px – 16 px (or 1 em).
Headings – larger, usually set with relative units (1.5 em, 2 em, etc.).
Captions / footnotes – not smaller than 10 px for accessibility.

4.4 Colour Contrast (WCAG)

Ensure a contrast ratio of at least 4.5 : 1 for normal text. Tools such as the WebAIM Contrast Checker can be used.

4.5 Text Alignment Options

left – default for LTR languages.
right – RTL languages or special effects.
center – headings, titles, short blocks.
justify – newspaper‑style articles.

4.6 Applying Bold and Italic Semantically

<strong> – strong importance (rendered bold).
<b> – visual bold only.
<em> – emphasis (rendered italic).
<i> – visual italic only.

5. Complete Example – External CSS, Font Properties & Layout

This example meets the exam requirement of using an external stylesheet, reusable classes, and a clear folder structure.

Folder structure
│
├─ index.html
└─ css/
   └─ style.css

5.1 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IGCSE Font Demo</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1 id="mainTitle">Website Authoring – Font Properties</h1>

    <p class="intro">
        This paragraph demonstrates the six core font properties using a reusable CSS class.
    </p>

    <h2>Multimedia Example</h2>
    <audio src="media/sample.mp3" controls>Your browser does not support audio.</audio>
    <video src="media/sample.mp4" width="320" height="240" controls>Your browser does not support video.</video>

    <h2>Sample Table</h2>
    <table class="data">
        <thead>
            <tr><th scope="col">Item</th><th scope="col">Quantity</th></tr>
        </thead>
        <tbody>
            <tr><td>Apples</td><td>12</td></tr>
            <tr><td colspan="2">Total — 12</td></tr>
        </tbody>
    </table>

    <h2>Contact Form</h2>
    <form action="process.php" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br>

        <label for="dob">Date of Birth:</label>
        <input type="date" id="dob" name="dob"><br>

        <label for="phone">Phone:</label>
        <input type="tel" id="phone" name="phone"
               pattern="[0-9]{10}" title="Enter a 10‑digit phone number"><br>

        <label for="gender">Gender:</label>
        <input type="radio" id="male" name="gender" value="M">
        <label for="male">Male</label>
        <input type="radio" id="female" name="gender" value="F">
        <label for="female">Female</label><br>

        <label for="newsletter">
            <input type="checkbox" id="newsletter" name="newsletter">
            Subscribe to newsletter
        </label><br>

        <label for="feedback">Feedback:</label>
        <textarea id="feedback" name="feedback" rows="4" cols="30"></textarea><br>

        <button type="submit">Submit</button>
    </form>
</body>
</html>

5.2 css/style.css

/* 1. Reset basic margins/padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. Body – default font settings */
body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;               /* 16 px on most browsers */
    line-height: 1.5;
    color: #222222;
    background-color: #f9f9f9;
    padding: 20px;
}

/* 3. Headings – size & weight */
h1, h2 {
    font-weight: bold;
    margin-bottom: 0.5em;
}
h1 {
    font-size: 2rem;               /* 32 px */
    text-align: center;
    color: #003366;
}
h2 {
    font-size: 1.5rem;             /* 24 px */
    color: #004080;
}

/* 4. Reusable class for introductory paragraph */
.intro {
    font-family: Georgia, serif;
    font-size: 1.125rem;           /* 18 px */
    color: #333333;
    text-align: justify;
    margin-bottom: 1.5em;
}

/* 5. Table styling */
table.data {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1em;
}
table.data th,
table.data td {
    border: 1px solid #ccc;
    padding: 0.5em;
    text-align: left;
}
table.data th {
    background-color: #e0e0e0;
}

/* 6. Form styling */
form {
    margin-top: 1.5em;
}
label {
    display: inline-block;
    width: 100px;
    font-weight: 600;
}
input, textarea, button {
    font-family: inherit;
    font-size: 1rem;
    margin-bottom: 0.5em;
}
button {
    background-color: #0066cc;
    color: #fff;
    border: none;
    padding: 0.5em 1em;
    cursor: pointer;
}
button:hover {
    background-color: #004c99;
}

Be able to specify the font properties including font family, size, colour, alignment, bold, italic

21. Website Authoring

Objective

1. The Three Layers of Web Authoring

2. HTML Basics – Building the Content Layer

2.1 Document Structure

2.2 Common Structural Elements

2.3 Multimedia Elements (HTML 5)

2.4 Tables

2.5 Forms – Elements, Validation & e‑Safety

3. CSS Fundamentals – Controlling the Presentation Layer

3.1 Selectors, Cascade & Specificity

3.2 Linking Stylesheets – Relative & Absolute Paths

3.3 Placement of CSS

3.4 Core Presentation Properties (beyond fonts)

4. Font‑Related CSS Properties

4.1 Example of Inline Styling (illustrative only)

4.2 Recommended Font Families

4.3 Choosing an Appropriate Font Size

4.4 Colour Contrast (WCAG)

4.5 Text Alignment Options

4.6 Applying Bold and Italic Semantically

5. Complete Example – External CSS, Font Properties & Layout

5.1 index.html

5.2 css/style.css

Support e-Consult Kenya

Be able to specify the font properties including font family, size, colour, alignment, bold, italic

21. Website Authoring

Objective

1. The Three Layers of Web Authoring

2. HTML Basics – Building the Content Layer

2.1 Document Structure

2.2 Common Structural Elements

2.3 Multimedia Elements (HTML 5)

2.4 Tables

2.5 Forms – Elements, Validation & e‑Safety

3. CSS Fundamentals – Controlling the Presentation Layer

3.1 Selectors, Cascade & Specificity

3.2 Linking Stylesheets – Relative & Absolute Paths

3.3 Placement of CSS

3.4 Core Presentation Properties (beyond fonts)

4. Font‑Related CSS Properties

4.1 Example of Inline Styling (illustrative only)

4.2 Recommended Font Families

4.3 Choosing an Appropriate Font Size

4.4 Colour Contrast (WCAG)

4.5 Text Alignment Options

4.6 Applying Bold and Italic Semantically

5. Complete Example – External CSS, Font Properties & Layout

5.1 index.html

5.2 css/style.css

Support e-Consult Kenya

2.3 Multimedia Elements (HTML 5)