Website authoring with HTML and CSS
Build a small, linked website by separating content structure from presentation and using paths, metadata and accessible media correctly.
Exam scope and assessment notes
Cambridge IGCSE Information and Communication Technology 0983, for exams in 2026, 2027 and 2028. Examples, datasets and practice are original StudyForA material; they are not Cambridge questions, source files, mark schemes or grades. Practical lessons teach transferable operations, but learners must perform them in locally available office and web-authoring software and inspect their own files. This site does not reproduce a Cambridge practical examination or award an official grade. The separate 2029 syllabus is not mapped here. Cambridge states that IGCSE 0983 has the same subject content as IGCSE 0417, with 9–1 grading. This StudyForA pathway maps the 2026–2028 syllabus only. This 9–1 graded qualification is available only in a limited number of administrative zones. Confirm that your centre can enter you for this code and exam series with Cambridge International. Cambridge has published a separate syllabus for 2029. StudyForA has not reconciled that version yet; this page supports exams in 2026, 2027 and 2028 only.
Before you begin
- No previous ICT course is assumed. Read each scenario carefully and justify a tool or method by connecting it to the task, user and constraints.
Work on paper. Try each question before revealing help, and explain why your method works.
Quick readiness check
Which layer defines a page's semantic structure and content?
What you will learn
- Explain content, presentation and behaviour layers and create HTML content with appropriate head and body elements.
- Use title, metadata, external stylesheets, tables, headings, paragraphs, lists, images, audio/video, divs, classes, IDs, anchors and hyperlinks.
- Use CSS styles and classes for text, backgrounds, tables, spacing and borders; explain inline versus external styles and stylesheet hierarchy.
- Use relative paths for locally stored pages and resources, and create valid links, bookmarks and metadata without requiring scripting.
Separate structure from presentation
The content layer contains page structure and information in HTML; the presentation layer controls appearance through CSS; the behaviour layer may use scripting. This syllabus requires HTML and CSS, not a scripting language. A page normally has a head for title, metadata and stylesheet links and a body for displayed content.
Use heading levels, paragraphs, ordered and unordered lists and suitable tables. A class can apply a reusable style to multiple elements; an id identifies an individual location and can create a bookmark. Add meaningful alternative text to images and controls where appropriate. Metadata can describe charset, author, keywords, description and viewport.
Link, style and verify the site
A hyperlink can open another local page, an external URL, a bookmark or an email address. Relative paths are portable within a folder structure; absolute local paths tied to one computer may fail elsewhere. CSS can be inline, in a class or in an external stylesheet. Multiple stylesheets and inline declarations have a priority order that must be checked.
Create and test all links, verify table structure and media sizing, and inspect the rendered page on the intended screen sizes. Keep a clear folder structure and use the right relative paths for pages, images and style files. A good web page should work without relying on colour alone and should identify its purpose in the browser title.
Sources for this lesson
Pause and explain
A stylesheet link works on the author's laptop but breaks when the project folder is moved. Which path choice is more portable?
Worked example
A page in folder /site/pages must display /site/images/map.png and use /site/css/main.css. Explain suitable relative paths and one test.
Show the worked solution
- From /site/pages, go up one folder to /site, then into images or css.
- Use ../images/map.png and ../css/main.css.
- Open the page from the site folder and check that the image and styles load.
Answer Use ../images/map.png for the image and ../css/main.css for the stylesheet from a page in /site/pages. Test the site using the expected folder structure on another compatible computer; a path that points to one learner's absolute local drive is not portable.
Try a topic test
Choose Easy, Normal or Difficult. Save your answers and open worked review after finishing.
Test this topic →From guided practice to a new situation
Write your answer and reasoning first. Use a hint only if you are stuck. The model solution is for self-checking; your written work is not automatically marked.
Write a simple HTML outline for a page with a title, description metadata, one main heading, a paragraph and a local image with alternative text.
Give me a hint
Put metadata in the head and visible content in the body.
Compare my reasoning
- Set the document title and a description meta element in the head.
- Add an h1 and paragraph to the body.
- Add an image with a relative src path and useful alt text.
A suitable outline is: <head><title>Coastal habitats</title><meta name="description" content="A field guide to local habitats"></head><body><h1>Coastal habitats</h1><p>...</p><img src="../images/coast.jpg" alt="Rock pools at low tide"></body>. The page should also declare its character set and link its stylesheet with a correct relative path.
Look for these in your work
- Places page metadata in the head
- Uses meaningful alt text and a relative path
A site has four feature cards with the same appearance, but one card must be a bookmark target. Explain which selector each should use.
Give me a hint
Use reusable selectors for shared appearance and a unique target for one location.
Compare my reasoning
- Apply one class to all four cards for shared styling.
- Give the target card a unique id.
- Create a hyperlink whose fragment matches that id and test it.
Give all four cards a shared class such as feature-card for reusable CSS. Give the target card a unique id such as booking-help and link to #booking-help. Do not reuse the same id on every card because an id should identify one target.
Look for these in your work
- Uses class and id for different roles
- Tests the bookmark link
A project uses multiple CSS files and inline styles. Explain how to diagnose why a heading remains red after changing the external stylesheet to blue.
Give me a hint
Check cascade order, selector specificity, inline declarations and cache/output.
Compare my reasoning
- Inspect whether an inline style or more-specific selector sets red.
- Check stylesheet order and whether the page links to the intended file.
- Reload and inspect the rendered page after changing the conflicting rule.
The heading may have an inline red style, a more-specific selector or a later stylesheet overriding the external rule. Confirm the correct relative stylesheet path and load order, remove or update the conflicting declaration, then reload and inspect the rendered page. A class should be used for a reusable rule rather than adding duplicate inline styles.
Look for these in your work
- Checks likely cascade causes
- Verifies the rendered result
Common mistakes
- Using an absolute path to a local file on one computer
- Confusing a class used for a group with an id used for one element or bookmark
- Assuming valid HTML automatically makes a page accessible or attractive
What can you explain now?
What is the difference between a class and an id in a web page?
Compare with the explanation
A class can be reused across multiple elements; an id identifies one element or bookmark.
Classes support reusable styles; an id provides a unique target within the page.
After trying it yourself, choose your next review. This is your self-assessment.
Your review choice appears on Today. Sign in to sync it across devices.
Make it stick
Explain the HTML/CSS layer split and give one reason a relative local path is safer than an absolute computer path.
If you needed the solution, close it and solve the problem again from a blank page. A correct answer is stronger when you can explain the reason for each step.