Cambridge IGCSE ICT (0417/0983) syllabus — Unit: Website Authoring and CSS.
✅ IGCSE Website Authoring & CSS – Full Guide to Success
🎯 Learning Objectives:
By the end of this lesson, you should be able to:
Understand HTML structure and elements
Write and edit basic web pages using HTML
Apply CSS for layout and style
Link multiple pages together
Use tables, forms, and multimedia elements in web pages
Validate and test web pages
📘 Part 1: Introduction to HTML
💡 What is HTML?
HTML (HyperText Markup Language) is the standard language used to create web pages.
It describes the structure of a web page using elements called tags.
📂 Basic Structure of an HTML Document
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to IGCSE Web Design</h1>
<p>This is a paragraph.</p>
</body>
</html>
🔤 Key HTML Tags
Tag Purpose
<html> Root element
<head> Metadata section
<title> Title in browser tab
<body> Visible content
<h1> to <h6> Headings
<p> Paragraph
<br> Line break
<hr> Horizontal line
<b>, <i>, <u> Bold, Italic, Underline
📎 Part 2: Links and Images
🔗 Hyperlinks
<a href="https://www.example.com">Visit Example</a>
href: destination of the link
Can link to external sites or internal pages
Images
<img src="image.jpg" alt="Description" width="300" height="200">
src: source file
alt: alternative text
width and height control size
🧱 Part 3: HTML Layout and Structure
📄 Lists
Ordered List:
<ol>
<li>Step One</li>
<li>Step Two</li>
</ol>
Unordered List:
<ul>
<li>Milk</li>
<li>Bread</li>
</ul>
🧮 Tables
<table border="1">
<tr>
<th>Name</th>
<th>Grade</th>
</tr>
<tr>
<td>Ali</td>
<td>A</td>
</tr>
</table>
<table>, <tr>, <th>, <td> are used to create structured data
📝 Forms (Basics)
<form action="submit.html" method="post">
Name: <input type="text" name="username"><br>
<input type="submit" value="Send">
</form>
action: where to send form data
method: get or post
Inputs: text, radio, checkbox, submit, etc.
🎨 Part 4: CSS (Cascading Style Sheets)
💡 What is CSS?
CSS is used to style HTML elements — change fonts, colors, layout, etc.
🧷 3 Ways to Use CSS:
Inline CSS
<p style="color: red;">This is red text.</p>
Internal CSS
<head>
<style>
body { background-color: lightblue; }
p { font-family: Arial; }
</style>
</head>
External CSS
<link rel="stylesheet" href="style.css">
And in style.css:
body {
background-color: white;
}
h1 {
color: green;
}
🎯 Common CSS Properties
Property Description Example
color Text color color: blue;
background-color Background color background-color: yellow;
font-family Font style font-family: Arial;
font-size Text size font-size: 16px;
text-align Align text text-align: center;
border Add borders border: 1px solid black;
margin, padding Spacing margin: 10px;
🔗 Part 5: Linking Pages and Navigation
🌐 Internal Links (within your website)
<a href="page2.html">Go to Page 2</a>
Use relative paths when linking to pages or images in the same folder.
🧪 Part 6: Validation & Best Practices
✅ Validation
Use https://validator.w3.org
to check for HTML errors.
✅ Good Practice Checklist:
Use proper indentation
Close all tags properly
Use comments: <!-- This is a comment -->
Keep file names lowercase and avoid spaces
Organize files in folders (images/, css/, pages/)
📚 Exam Tips (IGCSE ICT Paper 2 – Practical)
✅ Remember:
You'll use a text editor like Notepad++
Avoid using WYSIWYG editors (e.g. Dreamweaver unless allowed)
All HTML/CSS must be written manually
Tasks usually include:
Creating multi-page websites
Using CSS for design
Adding images, links, tables
Creating navigation menus
✅ Exam Command Words:
Create – Build a website from scratch
Edit – Change existing content
Format – Apply styles
Link – Connect pages/images properly
Test – Check functionality of links/images
🧠 Practice Task (Try This)
Create a mini-website with 2 pages:
Page 1: index.html
Heading: “Welcome to My Site”
Paragraph
Image
Link to page 2
Page 2: about.html
Heading: “About Me”
List of hobbies
Link back to index.html
Add CSS to change:
Background color
Font style
Text color of headings
🏁 Final Thoughts
To succeed in IGCSE Website Authoring:
Master HTML structure
Practice writing clean CSS
Practice common layouts: tables, forms, navigation
Understand file management
Practice under timed conditions
Good Luck!
