Be able to create the presentation layer of a web page using HTML and basic CSS techniques.
The presentation layer defines how a web page looks to the user. It includes the arrangement of text, images, links, tables, lists and the visual styling such as colours, fonts and spacing.
Every web page starts with a standard skeleton:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
...content goes here...
</body>
</html>
The <head> contains meta‑information, while the <body> holds the visible content.
Headings organise content hierarchically. Use <h1> to <h6> – the higher the number, the lower the importance.
Wrap blocks of text in <p> tags.
Two main types:
<ol> with <li> items.<ul> with <li> items.Create hyperlinks with the <a> element:
<a href="https://www.example.com">Visit Example</a>
Tables organise data in rows and columns. Use <table>, <thead>, <tbody>, <tr>, <th> and <td>.
Forms collect user input. Basic elements include <input>, <textarea>, <select> and <button>.
CSS (Cascading Style Sheets) controls visual style. For the IGCSE exam you only need to know:
<p style="color:blue;"><head> (no external files required).
<p style="font-family:Arial; font-size:14px; color:#333333;">
This paragraph uses an inline style.
</p>
<head>
<style>
body { background-color:#f9f9f9; }
h2 { color:#006699; }
.important { font-weight:bold; }
</style>
</head>
| Tag / Attribute | Purpose | Example |
|---|---|---|
| <h1> – <h6> | Headings (semantic hierarchy) | <h2>Section title</h2> |
| <p> | Paragraph of text | <p>This is a paragraph.</p> |
| <ul> / <ol> + <li> | Unordered / ordered lists | <ol><li>First</li><li>Second</li></ol> |
| <a href=""> | Hyperlink | <a href="page.html">Link</a> |
| <table> + <thead> + <tbody> | Tabular data | See example in section 3.5 |
| style attribute | Inline CSS | <span style="color:red;">Red text</span> |
| <div class=""> | Block‑level container for grouping | <div class="header">...</div> |
| <span> | Inline container for styling part of text | <span style="font-weight:bold;">Bold</span> |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
<style>
body { font-family:Helvetica,Arial,sans-serif; margin:20px; }
h2 { color:#2A7AE2; }
table { border-collapse:collapse; width:60%; }
th, td { border:1px solid #999; padding:8px; text-align:left; }
.highlight { background-color:#FFEB99; }
</style>
</head>
<body>
<h2>Welcome to My Page</h2>
<p>This paragraph demonstrates <strong>basic formatting</strong> and the use of an inline style:
<span style="color:#006600;">green text</span>.</p>
<h3>Steps to Follow</h3>
<ol>
<li>Plan the layout.</li>
<li>Write the HTML structure.</li>
<li>Add CSS for presentation.</li>
</ol>
<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>
<p>For more information visit <a href="https://www.w3schools.com">W3Schools</a>.</p>
</body>
</html>
<p> without </p>.<div> inside a <span>).style attributes or internal style blocks, not in the content itself.alt attribute for images (even though images are not shown here, remember it for real projects).<a>?