Be able to insert appropriate objects into a web page – text, images, sound clips and video (display controls, remove controls, autoplay); adjust image or video size, maintain aspect ratio and apply alternate text. Also understand the three web‑development layers, semantic HTML5 structure, basic CSS (including the box model, specificity and media queries), file‑path types and accessible table markup.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Brief description of the page">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="author" content="Your Name">
<title>Page title – ICT 0417</title>
<link rel="stylesheet" href="style.css"> <!-- external CSS – presentation layer -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<!-- page content goes here -->
</body>
</html>
Key points
<!DOCTYPE html> declares HTML5.lang="en" assists screen‑readers and search engines.<title> appears in the browser tab and is indexed.<link rel="stylesheet">; multiple stylesheets can be linked – the later one overrides earlier rules.Using meaningful elements improves accessibility, SEO and exam marks.
| Element | Typical purpose |
|---|---|
<header> | Introductory content – logo, site title, primary navigation. |
<nav> | Set of navigation links. |
<main> | Primary content of the page (only one per page). |
<section> | Thematic grouping of content, usually with a heading. |
<article> | Self‑contained composition (blog post, news item). |
<aside> | Related but tangential content (sidebar, pull‑quotes). |
<footer> | Footer information – copyright, contact details, site map. |
<div> | Generic container when no semantic element fits; often given class or id for CSS. |
<body>
<header>
<h1>My ICT Portfolio</h1>
<nav>
<a href="index.html">Home</a>
<a href="pages/about.html">About</a>
</nav>
</header>
<main>
<section id="media">
<h2>Multimedia objects</h2>
… (images, audio, video) …
</section>
</main>
<aside>
<p>Quick tips for using media tags.</p>
</aside>
<footer>
<p>© 2026 My School</p>
</footer>
</body>
| Purpose | Tag | Typical use |
|---|---|---|
| Headings (outline) | <h1>–<h6> | Section titles; <h1> once per page. |
| Paragraph text | <p> | Blocks of ordinary text. |
| Lists | <ul>, <ol>, <li> | Bulleted or numbered items. |
| Tables | <table>, <tr>, <th>, <td> | Tabular data; see Section 5 for caption & sections. |
| Division / grouping | <div> | Logical sections; styled with class or id. |
| Hyperlink | <a> | Navigation to other pages, external sites, email, or page bookmarks. |
<a href="https://www.example.com" target="_blank">Visit Example</a><a href="pages/about.html">About us</a><a href="/index.html">Home</a><a href="mailto:teacher@example.com">Email the teacher</a>id then link to it:<h2 id="media">Media objects</h2><a href="#media">Jump to Media section</a>
<a href="files/report.pdf" download>Download report</a>| Path type | Example | When to use |
|---|---|---|
| Absolute URL | https://www.school.org/images/logo.png | Linking to resources on another domain. |
| Root‑relative | /images/logo.png | Starts from the website root – safe when the page may be in sub‑folders. |
| Relative to current folder | images/logo.png | Simple when the resource is in a sub‑folder of the current page. |
| Relative to parent folder | ../images/logo.png | When the page is one level deeper than the resource. |
Use <caption> and the sectioning elements <thead>, <tbody>, <tfoot>. Add scope to header cells for screen‑readers.
<table>
<caption>Exam results for Year 12</caption>
<thead>
<tr>
<th scope="col">Subject</th>
<th scope="col">Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mathematics</td>
<td>A</td>
</tr>
<tr>
<td>Physics</td>
<td>B</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Average: A‑</td>
</tr>
</tfoot>
</table>
<link rel="stylesheet" href="style.css"><head>:<style>h1 { colour: #2c3e50; }
</style>
<p style="colour: #555;">Inline‑styled paragraph</p>
If several style sources are used, the order of precedence is: inline > internal > external (later external sheets override earlier ones).
margin → border → padding → content
width and height refer to the content box.padding adds space inside the border.border draws a line around the padding.margin creates space outside the border.| Selector | Specificity (a,b,c) |
|---|---|
element (e.g., p) | (0,0,1) |
.class (e.g., .intro) | (0,1,0) |
#id (e.g., #main) | (1,0,0) |
| inline style | (1,0,0,0) – highest |
Higher specificity overrides lower, unless !important is used (rarely needed for the exam).
@media (max-width: 600px) {
.sidebar { display: none; }
.responsive { width: 100%; }
}
Use media queries to adapt layout for phones, tablets and desktops – a common mark‑scheme point.
/* 1. Reset some defaults */
/* 2. Basic page styling */
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
background-colour: #f9f9f9;
colour: #333;
padding: 1rem;
}
/* 3. Headings */
h1, h2, h3 { colour: #2c3e50; margin-bottom: 0.5rem; }
/* 4. Links */
a {
colour: #0066cc;
text-decoration: none;
}
a:hover { text-decoration: underline; }
/* 5. Images & video – responsive */
img, video { max-width: 100%; height: auto; }
/* 6. Table styling */
table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
th, td { border: 1px solid #ccc; padding: 0.5rem; text-align: left; }
caption { caption-side: top; font-weight: bold; margin-bottom: 0.5rem; }
/* 7. Class vs ID example */
.highlight { background-colour: #fffae6; } /* low specificity */
#mainContent { background-colour: #fff; } /* higher specificity */
/* 8. Media query for small screens */
@media (max-width: 480px) {
nav a { display: block; margin-bottom: 0.5rem; }
}
Text is placed inside structural tags. No special attributes are required, but you can use class or id for styling.
<h1>Welcome to the ICT portfolio</h1>
<p class="intro">This paragraph introduces the project and explains its purpose.</p>
<ul>
<li>First point</li>
<li>Second point</li>
</ul>
<img> is an empty (self‑closing) element.src (file path) and alt (alternate text).width, height, class, id, loading="lazy" (defers loading until needed).<img src="photos/laptop.jpg" alt="Student using a laptop" width="300" loading="lazy">
Responsive image (no width/height, CSS controls size):
<img src="photos/laptop.jpg" alt="Student using a laptop" class="responsive">
.responsive { max-width: 100%; height: auto; }
Keeping aspect ratio – specify only one dimension (width *or* height) or use CSS height:auto.
Use the <audio> element. The controls attribute displays the browser’s player.
src – direct file URL (or use nested <source> for multiple formats).controls – shows play/pause, volume, timeline.autoplay – starts automatically (usually paired with muted to avoid blocked playback).loop – repeats indefinitely.muted – starts without sound.<audio src="audio/lecture.mp3" controls>
Your browser does not support the <audio> element.
</audio>
Multiple‑format fallback:
<audio controls>
<source src="audio/lecture.ogg" type="audio/ogg">
<source src="audio/lecture.mp3" type="audio/mpeg">
Your browser does not support the <audio> element.
</audio>
<video> works like <audio> but displays moving images.src or <source>, controls, autoplay, loop, muted, poster, width, height, class, id.autoplay unless the video is muted.<video src="media/demo.mp4" width="640" height="360" controls>
Your browser does not support the <video> tag.
</video>
<video src="media/background.mp4" autoplay muted loop class="bg-video">
Your browser does not support the <video> tag.
</video>
CSS for a full‑width background video:
.bg-video {
width: 100%;
height: auto;
object-fit: cover; /* fills container while preserving aspect ratio */
}
<video src="media/intro.mp4" width="720" height="405" controls autoplay muted>
Your browser does not support the <video> tag.
</video>
<video controls poster="images/preview.jpg">
<source src="media/intro.webm" type="video/webm">
<source src="media/intro.mp4" type="video/mp4">
Your browser does not support the <video> tag.
</video>
The aspect ratio is width ÷ height. To keep the original ratio:
width: 100%; height: auto; for responsive scaling.Alt text is essential for accessibility, SEO and when the image cannot be displayed.
alt="") for decorative images that convey no information.Good example:
<img src="photos/solar-panel.jpg"
alt="Solar panel on a school roof generating electricity">
| Object | HTML tag | Key attributes | Typical example |
|---|---|---|---|
| Paragraph text | <p> | class, id, style | <p class="intro">This is a paragraph.</p> |
| Heading | <h1>–<h6> | class, id | <h2>Section title</h2> |
| Image | <img> | src, alt, width, height, class, id, loading | <img src="photo.jpg" alt="Student using a laptop" width="300"> |
| Audio clip | <audio> | src, controls, autoplay, loop, muted, preload | <audio src="lecture.mp3" controls>…</audio> |
| Video clip | <video> | src, controls, autoplay, loop, muted, poster, width, height, class, id | <video src="demo.mp4" width="640" height="360" controls>…</video> |
| Hyperlink | <a> | href, target, title, download, rel | <a href="pages/about.html">About us</a> |
| Table | <table> | caption, thead, tbody, tfoot, scope | <table>…</table> |
| Semantic section | <section>, <article>, <nav>, <header>, <footer> | id, class, aria‑label | <section id="media">…</section> |
<!DOCTYPE html> and includes lang on <html>.header, nav, main, section, footer).alt attribute (or alt="" if decorative).audio, video) include controls; if autoplay is used, also include muted.img, video { max-width:100%; height:auto; } or appropriate CSS class.padding inside a div).<caption> and scope="col" or scope="row" on header cells.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.