Be able to create the content layer of a web page

Resources → Subject Notes → Information Communication Technology ICT → Lesson Plan

ICT 0417 – Website Authoring: Creating the Content Layer

1. The Three‑Layer Model of a Web Page

  • Content layer – the information the user reads or interacts with (HTML).
  • Presentation layer – how the content looks (CSS).
  • Behaviour layer – how the page reacts to user actions (JavaScript – not examined for IGCSE).

These notes concentrate on the content layer but indicate where meta‑data, forms and accessibility fit into the overall model.

2. Basic HTML Skeleton (Content Layer Starts in <body>)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">               <!-- required, must be first meta‑tag -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Brief description of the page">
    <meta name="keywords" content="HTML, ICT, Cambridge">
    <meta name="author" content="Your Name">
    <title>Page title</title>
    <!-- Link to external CSS (presentation layer) – optional for the content layer notes -->
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    
</body>
</html>

3. Required Meta‑tags (Head Section)

Meta‑tagPurpose
<meta charset="UTF-8">Specifies character encoding – mandatory and must be the first meta‑tag.
<meta name="viewport" content="width=device-width, initial-scale=1">Ensures proper scaling on mobile devices.
<meta name="description" content="Brief description of the page">Provides a summary for search‑engine results.
<meta name="keywords" content="HTML, ICT, Cambridge">List of key terms (optional but often taught).
<meta name="author" content="Your Name">Identifies the page’s author.

4. Headings, Paragraphs & Element Types

  • Headings – establish a clear hierarchy. Use only one <h1> per page. 
    <h1>Main title (only once)</h1>
<h2>Section title</h2>
<h3>Sub‑section title</h3>
...
<h6>Lowest level heading</h6>
  • Paragraphs – <p>…</p> automatically adds vertical spacing.
  • Block‑level vs. inline elements
    Block‑levelInline
    <div>, <p>, <h1>–<h6>, <ul>, <table> <span>, <a>, <img>, <strong>, <em>

5. Lists

  • Unordered list – items without a specific order. 
    <ul>
    <li>Home</li>
    <li>About us</li>
    <li>Contact</li>
</ul>
  • Ordered list – items that follow a sequence. 
    <ol>
    <li>Plan the layout</li>
    <li>Write the HTML</li>
    <li>Test in browsers</li>
</ol>

6. Tables – Structure, Accessibility & Extra Sections

A well‑structured table improves readability and accessibility.

<table>
    <caption>Weekly ICT topics</caption>
    <thead>
        <tr>
            <th scope="col">Day</th>
            <th scope="col">Topic</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Monday</td>
            <td>HTML basics</td>
        </tr>
        <tr>
            <td>Wednesday</td>
            <td>Lists and tables</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">All topics are part of the ICT curriculum</td>
        </tr>
    </tfoot>
</table>
  • <caption> – short description of the table’s purpose.
  • scope="col" or scope="row" on <th> helps screen readers.
  • <tfoot> – optional summary or footnote rows.

7. Hyperlinks – Types & Important Attributes

  • Link to another page (internal): 
    <a href="page2.html">Next page</a>
  • Link to an external site (opens in a new tab): 
    <a href="https://www.cambridgeinternational.org" target="_blank" rel="noopener">Cambridge International</a>
  • Email link: 
    <a href="mailto:student@example.com">Email your teacher</a>
  • Bookmark – jump to a section on the same page: 
    <a href="#section3">Jump to Section 3</a>
...
<h2 id="section3">Section 3</h2>

8. Images & Alt‑text

<img src="logo.png" alt="Cambridge ICT logo" width="120" height="60">
  • alt describes the image for users who cannot see it – mandatory for accessibility.
  • Specify width and height to reserve space and improve loading speed.

9. Embedding Multimedia (HTML5)

  • Audio: 
    <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
  • Video: 
    <video controls width="320">
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video element.
</video>

10. Semantic HTML5 Elements (Content Layer)

ElementTypical Use
<header>Introductory content, site logo, primary navigation.
<nav>Group of navigation links.
<main>Primary content of the document (only once per page).
<section>Thematic grouping of related content.
<article>Self‑contained composition (blog post, news item).
<aside>Sidebars, related links, adverts.
<footer>Closing information – author, copyright, contact.

Example Layout Using Semantic Elements

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My ICT Project</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>

    <header>
        <h1>My ICT Project</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="intro">
            <h2>Introduction</h2>
            <p>This page demonstrates the content layer required for the IGCSE ICT syllabus.</p>
        </section>

        <section id="media">
            <h2>Multimedia</h2>
            <figure>
                <img src="images/diagram.png" alt="Diagram of the three‑layer model">
                <figcaption>The three‑layer model</figcaption>
            </figure>
            <audio controls>
                <source src="audio/intro.mp3" type="audio/mpeg">
                Your browser does not support audio.
            </audio>
        </section>
    </main>

    <aside>
        <h3>Useful links</h3>
        <ul>
            <li><a href="https://www.w3.org/" target="_blank" rel="noopener">W3C</a></li>
            <li><a href="https://validator.w3.org/" target="_blank" rel="noopener">HTML Validator</a></li>
        </ul>
    </aside>

    <footer>
        <p>&copy; 2026 Your Name – All rights reserved.</p>
    </footer>

</body>
</html>

11. Forms Overview (Basic Awareness)

Forms collect user input. Even if not examined, students should recognise the main elements.

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

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

    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="1" max="120">

    <input type="submit" value="Send">
</form>
  • Common type values: text, email, number, date, password, checkbox, radio, submit.
  • Always pair a <label> with its control using for (or wrap the control inside the label).
  • Use required, min, max, pattern for simple client‑side validation.

12. Accessibility Checklist (Content Layer)

  1. Provide meaningful alt text for every <img>.
  2. Use semantic elements (<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>) to give structure.
  3. Maintain a logical heading order – do not skip levels.
  4. Give tables a <caption> and use scope on <th> cells.
  5. Link text should describe the destination (avoid “click here”).
  6. Colour must not be the sole means of conveying information.
  7. Test the page with a screen‑reader or an accessibility validator.

13. File Paths – Relative vs. Absolute

Path typeExampleWhen to use
Absolute https://www.example.com/images/photo.jpg Linking to resources on another website.
Relative (same folder) photo.jpg Local resources stored in the same directory as the HTML file.
Relative (sub‑folder) images/photo.jpg When the resource is inside a sub‑directory.
Relative (parent folder) ../styles/style.css Moving up one level before descending into another folder.

For IGCSE projects, always use relative paths for local files so the site works when moved to a different server.

14. Using <div> for Layout & Class Assignment

The <div> element groups block‑level content and enables CSS styling via classes or IDs.

<div class="sidebar">
    <h3>Useful links</h3>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>

15. Checklist for a Complete Content Layer

  1. Correct HTML5 doctype and lang attribute.
  2. All required meta‑tags in the <head> (charset first).
  3. Clear heading hierarchy (<h1>–<h6>).
  4. Well‑structured paragraphs and appropriate block‑level elements.
  5. Appropriate list type (<ul> or <ol>).
  6. Tables with <caption>, <thead>, <tbody>, optional <tfoot>, and scope attributes.
  7. Meaningful link text; use target="_blank" and rel="noopener" for external links.
  8. Images include descriptive alt text and size attributes.
  9. Audio and video embedded with the controls attribute.
  10. Semantic elements (<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>).
  11. Basic form elements are recognised (labels, input types, required attributes).
  12. All items on the Accessibility Checklist are satisfied.
  13. All file references use relative paths for local resources.
  14. Validate the page with the W3C HTML validator to catch syntax errors.
Suggested diagram: Flow of creating the content layer – planning headings → writing paragraphs → adding lists/tables → inserting links & images → embedding multimedia → applying semantic tags → checking accessibility → validating HTML.

Create an account or Login to take a Quiz

83 views
0 improvement suggestions

Log in to suggest improvements to this note.