Know and understand the presentation layer is used to display and format elements within a web page

ICT 0417 – Website Authoring: The Presentation Layer

Objective

Know and understand that the presentation layer is used to display and format elements within a web page.

Layer Overview – Content, Presentation & Behaviour

LayerTechnologyWhat It Does
Content layerHTMLProvides the structure and meaning of the page – headings, paragraphs, tables, forms, etc.
Presentation layerCSS (Cascading Style Sheets)Controls how the HTML content looks – colours, fonts, spacing, layout, responsive behaviour.
Behaviour layerJavaScript (optional for IGCSE)Adds interactivity – menus, form validation, dynamic content updates.

1. What Is the Presentation Layer?

  • It determines how the content created in the content layer (HTML) appears to the user.

  • Controlled by:

    • HTML elements that have default visual behaviour.

    • Cascading Style Sheets (CSS) that define colours, fonts, spacing, layout, etc.

    • The browser’s rendering engine, which interprets HTML + CSS to produce the final display.

  • Works together with the structure layer (HTML) and the behaviour layer (JavaScript).

2. Required Meta‑Tags (Head‑Section)

Meta‑tagPurpose (Why It’s Needed)
<meta charset="UTF-8">Specifies character encoding – essential for all modern pages.
<meta name="viewport" content="width=device-width, initial-scale=1">Enables responsive design on mobile devices.
<meta name="description" content="Brief description of the page">Used by search engines and social‑media previews.
<meta name="keywords" content="ICT, presentation layer, CSS">Optional – helps with SEO.
<meta name="author" content="Your Name">Identifies the page author.

3. HTML Elements That Influence Presentation

These tags are part of the content layer but have default visual effects. They are the building blocks that CSS styles.

TagPurposeTypical Visual Effect
<h1>–<h6>HeadingsFont size decreases from h1 to h6.
<p>ParagraphVertical margin before/after; line‑height applied.
<div>Division (block container)Used for grouping and applying CSS styles.
<span>Inline containerStyles a fragment of text without breaking flow.
<ul>, <ol>, <li>ListsBulleted or numbered items; default indentation.
<table>, <tr>, <td>, <th>Tabular dataRows & columns; borders, spacing, alignment are CSS‑controlled.
<a>HyperlinkDefault colour & underline; can be styled.
<header>, <nav>, <section>, <article>, <footer>, <main>Semantic layout containersImprove accessibility & SEO; visual style set via CSS.
<figure> & <figcaption>Media with captionAllows styling of images, video, or audio together with a caption.
<img>Embedded imageRequires src, alt and optional width/height.
<audio>, <video>Embedded mediaControls, fallback text, and track for subtitles.

4. CSS Fundamentals

4.1 Types of Style Sheets

  • Inline style – added directly to an element with the style attribute.

    <p style="color:red;">Red text</p>

  • Internal (embedded) style sheet – placed inside a <style> block in the <head>.

    <style> p { color:red; } </style>

  • External style sheet – stored in a separate .css file and linked with <link>.

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

Order of precedence (cascade): inline > internal > external > browser default.

4.2 Selectors, Properties & Values

  • Selector – identifies the HTML element(s) to style (e.g., p, .intro, #main).

  • Property – the visual aspect to change (e.g., color, margin).

  • Value – the setting for the property (e.g., #336699, 15px).

4.3 Selector Specificity (Quick Reference)

Selector TypeSpecificity Score
Inline style (style="")1000
ID selector (#header)0100
Class, attribute, pseudo‑class (.intro, [type="text"], :hover)0010
Element & pseudo‑element (p, ::first-line)0001

If two rules apply, the one with the higher specificity wins; if scores are equal, the later rule in the stylesheet wins.

4.4 The CSS Box Model

Every element is a rectangular box composed of four areas:

+---------------------------+   ← margin
|   +-------------------+   |
|   |   +-------------+ |   |
|   |   |   content   | |   |
|   |   +-------------+ |   |
|   +-------------------+   ← padding
+---------------------------   ← border

Formulas:

  • Total width = content + 2 × padding + 2 × border + 2 × margin

  • Total height = content + 2 × padding + 2 × border + 2 × margin

Setting box-sizing: border-box; makes the width and height include padding and border, preventing accidental overflow.

5. Using Classes and IDs Effectively

  • Class – reusable; can be applied to many elements.

    <div class="intro highlight">…</div>

  • ID – unique identifier; used for one element only (often for JavaScript hooks).

    <section id="main‑article">…</section>

  • Multiple classes can be combined to layer styles (e.g., .btn.primary).

6. File Paths – Relative vs. Absolute

  • Relative path – starts from the current document’s folder.

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

  • Absolute path – full URL, useful for external resources.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

7. Hyperlinks – Types & Attributes

Link TypeExampleKey Attributes
Internal page link<a href="chapter2.html">Next chapter</a>href
External website<a href="https://www.bbc.co.uk">BBC</a>href
Mailto link<a href="mailto:info@example.com">Email us</a>href="mailto:"
Open in new tab/window<a href="https://example.com" target="blank">New tab</a>target="blank"

8. Embedding Media & Providing Alt Text

  • Images – always include an alt attribute for accessibility.

    <img src="logo.png" alt="Company logo" width="120">

  • Audio – provide fallback text and optional captions.

    <audio controls><source src="song.mp3" type="audio/mpeg">Your browser does not support audio.</audio>

  • Video – use controls, provide track for subtitles.

    <video width="320" controls><source src="movie.mp4" type="video/mp4">Your browser does not support video.</video>

9. Layout: <div> vs. Tables

  • Tables should be used only for genuine tabular data, not for page layout.

  • Use <div> or semantic containers (header, nav, main, etc.) together with CSS (Flexbox or Grid) to create flexible, responsive layouts and keep presentation separate from content.

10. Accessibility Essentials

  • Provide meaningful alt text for all images.

  • Use semantic HTML (<header>, <nav>, <main>, <footer>, <section>, <article>) to aid screen readers.

  • Ensure sufficient colour contrast – aim for a contrast ratio of at least 4.5:1 for normal text.

  • Apply ARIA attributes only when native HTML cannot express the relationship (e.g., role="navigation" for a custom menu).

11. Responsive Design Basics

  1. Viewport meta‑tag (already listed in Section 2).

  2. Prefer relative units (em, rem, %) over fixed px for fonts and layout.

  3. Simple media query example:

    @media (max-width: 600px) {
    .intro {
    padding: 10px;
    font-size: 0.9rem;
    }
    nav ul {
    flex-direction: column;
    }
    }

12. Practical Example – Complete Page

This example demonstrates:

  • All required meta‑tags.

  • Linking an external stylesheet with an internal fallback.

  • Semantic HTML, classes & IDs, and a responsive navigation bar.

  • Image with alt, a data table, and a hyperlink that opens in a new tab.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A brief guide to the presentation layer for IGCSE ICT">
<meta name="author" content="Your Name">
<title>Presentation Layer – IGCSE ICT</title>
<!-- External stylesheet – most styling lives here -->
<link rel="stylesheet" href="css/presentation.css">
<!-- Internal fallback (used only if the external file fails) -->
<style>
body {font-family: Arial, sans-serif; margin:20px;}
.intro {background:#F0F8FF; padding:15px; border:1px solid #B0C4DE;}
</style>
</head>
<body>
<header id="site-header">
<h1>The Presentation Layer</h1>
</header>
<nav class="main-nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="https://www.cambridgeinternational.org" target="_blank">Cambridge</a></li>
</ul>
</nav>
<main>
<section class="intro">
<p>This paragraph is inside a styled <code>div</code> that demonstrates background colour, padding and border.</p>
</section>
<section>
<h2>Sample Data Table</h2>
<table>
<thead>
<tr><th>Item</th><th>Quantity</th><th>Price</th></tr>
</thead>
<tbody>
<tr><td>Apples</td><td>10</td><td>$2.00</td></tr>
<tr><td>Bananas</td><td>5</td><td>$1.50</td></tr>
</tbody>
</table>
</section>
<section>
<h2>Image Example</h2>
<figure>
<img src="images/presentation.png" alt="Diagram of the presentation layer">
<figcaption>Figure 1: The presentation layer in a web page.</figcaption>
</figure>
</section>
</main>
<footer>
<p>© 2026 Your Name – All rights reserved.</p>
</footer>
</body>
</html>