Be able to create the presentation layer of a web page using HTML and basic CSS techniques, and understand how it fits with the content and behaviour layers of the Cambridge IGCSE 0417 syllabus.
| Layer | Purpose | Typical tags / technologies |
|---|---|---|
| Content layer | Provides the meaning and logical structure of the information. | HTML structural tags – <h1>–<h6>, <p>, <ul>, <ol>, <table>, <audio>, <video>, <form>, semantic tags (<header>, <nav>, <section>, <footer>), meta‑tags. |
| Presentation layer | Controls how the content looks to the user. | CSS (inline, internal, external), class and id attributes, style‑related HTML attributes. |
| Behaviour layer | Adds interactivity and dynamic responses. | JavaScript (or any client‑side scripting). The IGCSE syllabus expects you to recognise JavaScript as the behaviour layer, although you will not be required to write code for it. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title> <!-- required – reflects page purpose -->
<!-- additional meta‑tags go here -->
<style>
/* internal CSS (optional) */
</style>
<link rel="stylesheet" href="css/style.css"> <!-- external stylesheet – see §5 -->
</head>
<body>
…content goes here…
</body>
</html>
Checklist for the skeleton (exam tip)
<!DOCTYPE html> – declares HTML5.<html lang="en"> – language attribute.<meta charset="UTF-8"> – character set.<title>…</title> – must be present and describe the page.<meta name="viewport" content="width=device-width, initial-scale=1"> – required for responsive design.<style> block.Use <h1>–<h6> to create a logical hierarchy. The higher the number, the lower the importance. Example:
<h1>Main title</h1> <h2>Section heading</h2> <h3>Sub‑section</h3>
Wrap blocks of text in <p>. Inline formatting tags such as <strong>, <em> and <span> may be used inside a paragraph.
<ol> with <li> items.<ul> with <li> items.<a href="https://www.example.com">Visit Example</a>
target="_blank" – opens the link in a new tab/window.mailto: – opens the default mail client (e.g., <a href="mailto:info@example.com">Email us</a>).<a id="top"></a> <!-- bookmark target --> ... <a href="#top">Back to top</a> <!-- link to the bookmark -->
Use <table> together with <thead>, <tbody>, <tr>, <th> and <td>. Styling is normally done with CSS, but the legacy border and cellpadding attributes are still accepted for simple exam questions.
<audio controls src="media/sound.mp3">Your browser does not support audio.</audio> <video controls width="320" src="media/clip.mp4">Your browser does not support video.</video> <img src="images/logo.png" alt="School logo"> <!-- always provide alt‑text -->
Use <label> (linked via for), <fieldset> (optional grouping), and appropriate input types. Required attributes such as required are examined.
<form action="process.php" method="post">
<fieldset>
<legend>Contact details</legend>
<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="msg">Message:</label>
<textarea id="msg" name="msg" rows="4"></textarea><br>
<button type="submit">Send</button>
</fieldset>
</form>
Instead of generic <div> elements, use semantic tags to give meaning to page sections:
<header> – introductory content or navigation.<nav> – a set of navigation links.<section> – a thematic grouping of content.<article> – self‑contained composition (e.g., a news item).<footer> – footer information, copyright, contact details.| Meta‑tag | Purpose | Example |
|---|---|---|
<meta name="description" content="Brief page description"> |
Provides a summary for search engines. | <meta name="description" content="Introduction to HTML tables"> |
<meta name="keywords" content="HTML, CSS, tables"> |
List of key terms (optional for modern SEO). | <meta name="keywords" content="presentation layer, IGCSE"> |
<meta name="author" content="Your Name"> |
Identifies the page creator. | <meta name="author" content="J. Doe"> |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
Ensures proper scaling on mobile devices and enables responsive design. | Same as shown. |
CSS separates visual style from HTML content, making pages easier to maintain and allowing the same style to be applied to many pages.
style="…" attribute on an individual element.<style> block inside the <head>..css file linked with <link rel="stylesheet">.If two rules have the same origin, the one with the higher specificity wins. The basic order is:
#header) – highest.important, [type="text"], :hover)p) – lowestExample:
p { color: gray; } /* element selector */
.highlight { color: blue; } /* class selector – overrides the element rule */
#main { color: red; } /* ID selector – overrides both */
<head>
<link rel="stylesheet" href="css/style.css">
</head>
The path must be relative to the HTML file (e.g., css/style.css) when the site is stored locally or uploaded to a server.
.className { … } (applies to any element with class="className").#idName { … } (applies to the single element with id="idName").p { … }.nav a { … } (targets <a> elements inside a <nav>).
/* basic page style */
body { font-family:Helvetica,Arial,sans-serif; margin:20px; background:#f9f9f9; }
/* headings */
h2 { color:#006699; }
/* class and ID */
.important { font-weight:bold; }
#header { background:#003366; color:#fff; padding:10px; }
/* table styling */
table { border-collapse:collapse; width:100%; }
th, td { border:1px solid #ccc; padding:8px; text-align:left; }
/* responsive tweak – media query (exam‑relevant example) */
@media (max-width: 600px) {
body { margin:10px; }
h2 { font-size:1.5em; }
}
https://www.example.com/images/logo.png).images/logo.png or ../styles/main.css).<title> element).<header>, <nav>, <section>, <footer>) to give structure.alt text).label, required and fieldset).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Simple presentation‑layer example">
<meta name="keywords" content="HTML, CSS, IGCSE">
<meta name="author" content="Your Name">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My First Web Page</title>
<!-- External stylesheet (relative) -->
<link rel="stylesheet" href="css/style.css">
<style>
/* Internal CSS – overrides external if there is a conflict */
body { font-family:Helvetica,Arial,sans-serif; margin:20px; background:#f9f9f9; }
h2 { color:#2A7AE2; }
.highlight { background:#FFEB99; }
#logo { width:120px; }
/* simple responsive rule */
@media (max-width: 600px) {
body { margin:10px; }
h2 { font-size:1.5em; }
}
</style>
</head>
<body>
<!-- Bookmark at the top of the page -->
<a id="top"></a>
<header id="header">
<h1>Welcome to My Page</h1>
<img src="images/logo.png" alt="School logo" id="logo">
</header>
<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>
<section>
<h2 id="intro">Introduction</h2>
<p>This paragraph demonstrates basic formatting and an inline style:
<span style="color:#006600;">green text</span>.</p>
<h3>Ordered steps</h3>
<ol>
<li>Plan the layout.</li>
<li>Write the HTML structure.</li>
<li>Add CSS for presentation.</li>
</ol>
<h3>Navigation list</h3>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<h3>Sample data table</h3>
<table>
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price (£)</th>
</tr>
</thead>
<tbody>
<tr class="highlight">
<td>Notebook</td>
<td>2</td>
<td>3.50</td>
</tr>
<tr>
<td>Pen</td>
<td>5</td>
<td>1.20</td>
</tr>
</tbody>
</table>
<h3>Multimedia</h3>
<audio controls src="media/sound.mp3">Your browser does not support audio.</audio>
<br>
<video controls width="320" src="media/clip.mp4">Your browser does not support video.</video>
<h3>Contact form</h3>
<form action="process.php" method="post">
<fieldset>
<legend>Send us a message</legend>
<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="msg">Message:</label>
<textarea id="msg" name="msg" rows="4"></textarea><br>
<button type="submit">Send</button>
</fieldset>
</form>
</section>
<footer>
<p><a href="#top">Back to top</a> | © 2026 Your Name</p>
</footer>
</body>
</html>
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.