Web page design: OxfordAQA IGCSE Computer Science Complete Notes

Web page design in OxfordAQA IGCSE Computer Science, explained

OxfordAQA IGCSE Computer Science web page design sits in its own short section of the specification, but it carries more marks than its size suggests, because it draws together your understanding of markup, presentation and the wider architecture of the web. If your search brought you here for oxfordaqa igcse computer science web page design, you are looking at the right pair of topics: Key concepts, and Hypertext markup language (HTML). Together they cover how a browser turns a text file into a page you can read, click and interact with.

This set of web page design oxfordaqa igcse notes works through both topics in the order the specification presents them, with the HTML tags you are expected to know, the CSS properties you are expected to use, and the distinctions examiners like to test between HTML5 and earlier versions of the language. Treat it as a working reference while you revise, not a one-off read. Consider this igcse 9210 web page design, oxfordaqa igcse computer science explained one piece at a time, from the smallest tag to the finished, styled page.

Key concepts: HTML, CSS and where scripting fits in

Before you touch a single tag, the specification wants you to understand the division of labour behind every web page. A page is not one file doing one job; it is usually several files, each responsible for a different layer of the final result.

HTML (HyperText Markup Language) builds the structure of a web page: the headings, paragraphs, lists and links that give the content its skeleton.
CSS (Cascading Style Sheets) changes the style of that structure: colours, fonts, spacing and alignment, without altering what the content actually says.
Server-side scripting runs on the web server before the page reaches you, and is used for the dynamic generation of web pages, for example building a page from database records that differ for every visitor.
Client-side scripting runs inside your browser after the page has arrived, adding functionality such as validating a form or reacting to a button click without a new request to the server.

Examiners often ask you to place a short scenario into one of these four categories. A page that shows "Welcome back, Marta" using her stored account name is a server-side job, because the server has to look up who Marta is before the page is built. A page that pops up a warning when you leave a required field blank is client-side, because the browser is checking the input itself, instantly, with no round trip to the server.

A useful habit, borrowed from how European exam boards generally set out this topic, is to picture the three layers as separate specialists working on the same building: HTML is the architect drawing the walls and rooms, CSS is the interior designer choosing colours and finishes, and scripting is the building's electrics and plumbing, the part that makes things respond and change. Keeping that separation of concerns in mind stops you writing style information inside a heading tag, or expecting a static HTML page to remember what a user typed on a previous visit.

Building the structure with HTML

OxfordAQA lists the specific HTML tags you need to recognise and use, grouped into three families. Learning them by family, rather than as one long alphabetical list, makes them far easier to recall under exam conditions.

Family	Tags	Role
General	<html></html>, <title></title>, <body></body>, <style></style>	Wrap the whole document, name the browser tab, hold the visible content, and hold embedded CSS rules.
Block-level	<div></div>, <p></p>, <h#></h#>, <ol></ol>, <ul></ul>, <li></li>	Start on a new line and take up the full width available: containers, paragraphs, headings, ordered and unordered lists, list items.
Inline	<span></span>, <strong></strong>, <em></em>, <br />, <a></a>, <img />	Sit within a line of text: a plain wrapper, bold emphasis, italic emphasis, a line break, a hyperlink, an embedded image.

A block-level element pushes surrounding content onto new lines; an inline element does not. That single distinction is a favourite short-answer question: give a candidate a rendered page and ask which tag family must have produced a given visual effect.

Worked example: a bare-bones HTML skeleton
<html>
<title>My Page</title>
<body>
  <h1>Welcome</h1>
  <p>This is a paragraph with a <strong>bold</strong> word.</p>
  <ul>
    <li>First item</li>
    <li>Second item</li>
  </ul>
  <a href="page2.html">Go to page two</a>
</body>
</html>
Notice the nesting: the list items sit inside the list, and the list sits inside the body. Mismatched or missing closing tags are the single most common reason a mark is lost on a "write HTML" question, so read your own answer back before you move on.

Styling with CSS: selectors, properties and values

A style rule has three parts, and OxfordAQA is precise about the terminology: a selector, a property and a value, written as selector { property : value }. The selector says which element the rule applies to, the property says which visual aspect is being changed, and the value says what that aspect should become.

Two kinds of selector are examinable: a type selector, which targets every element of a given tag (for example, every p), and a class selector, written with a leading full stop, which targets only elements that carry a matching class attribute. Class selectors let you style some paragraphs one way and others differently, without changing the tag itself.

Property	Controls
background-color	The colour behind the element
color	The colour of the text itself
text-align	Horizontal alignment of text: left, right, centre or justified
font-family	Which typeface is used
font-size	How large the text renders
font-weight	How bold the text appears
font-style	Whether the text is italic or upright

OxfordAQA exam questions only use embedded style sheets, meaning CSS written inside a <style> block in the document itself. You may prefer external style sheets for your own coursework and practical projects, because they let one CSS file style many pages, but for the written papers you only need to read and write the embedded form.

Worked example: an embedded style rule
<style>
p { color : blue }
.warning { background-color : yellow; font-weight : bold }
</style>
The first rule is a type selector, applying blue text to every paragraph. The second is a class selector, applying a yellow background and bold text to any element whose class attribute is set to warning. If you are asked to write a rule that changes only some paragraphs, reach for a class selector rather than trying to force a type selector to do a job it cannot do.

It also helps to keep a short list of what the exam will never ask you to do with CSS: no external stylesheets to read or write, and no properties beyond the seven listed above. Students sometimes over-prepare by learning border, margin and padding properties from wider web development courses, which is not wasted knowledge for a personal project, but is not needed for the written paper and can cost time better spent elsewhere in revision.

HTML5 against earlier versions

A comparative question here rewards precision, so it is worth setting the two side by side rather than memorising a vague sense that "HTML5 is newer and better." HTML5 supports many facilities that earlier versions could only reach through separate add-ons or plug-ins. It improves the provision for building web applications, through better support for scripting and access to a wider set of APIs. It also makes it easier to incorporate graphics and multimedia directly, using tags such as <svg>, <canvas>, <audio> and <video>, where earlier HTML relied on external plug-ins for anything beyond static images.

HTML5 also introduces new semantic elements, such as <header> and <article>, which name what a section of a page is for rather than only how it looks. Older HTML used generic containers, mainly <div>, for every structural role, so a browser, a search engine or an assistive technology reading the page had no built-in way of telling a navigation bar from a footer. Semantic tags close that gap.

Common pitfalls specific to this topic

A handful of errors turn up in web page design answers far more often than the rest, and each one is easy to fix once you know to watch for it.

Confusing HTML and CSS roles. A candidate asked to change the colour of a heading sometimes tries to do it with an HTML tag, when the correct approach is a CSS rule targeting that heading. Structure and style are different jobs, and the mark scheme rewards using the right tool for each.
Forgetting the three parts of a style rule. A rule missing its selector, its property or its value is incomplete, and examiners mark each part separately, so a rule with the colon or curly braces missing loses marks even if the intention is clear.
Mixing up type and class selectors. Forgetting the leading full stop on a class selector, or trying to select more than one tag type at once with a single type selector, is a recurring slip under time pressure.
Treating block-level and inline tags as interchangeable. Wrapping text in <span> when the question calls for a new line, or nesting a block-level element such as <div> inside an inline element such as <a> in the wrong order, both cost marks in "write this HTML" questions.
Vague HTML5 comparisons. Writing that "HTML5 is more modern" without naming a specific capability, such as native <video> support or a named semantic element, will not satisfy a mark scheme that is looking for a concrete, correctly named feature.

Self-check questions

Work through these without notes, then mark yourself against the sections above.

Name the family (general, block-level or inline) that each of the following belongs to: <p>, <a>, <style>, <li>.
Write a CSS class selector called highlight that sets the background colour to yellow and the text alignment to centre.
Explain, using a scenario of your own, the difference between server-side and client-side scripting.
Give two ways HTML5 improved on earlier versions of HTML, and name one tag associated with each.
Identify the error in this fragment and rewrite it correctly: <ul><li>Tea<li>Coffee</li></ul>

How this fits the exam

Web page design questions on the OxfordAQA igcse computer science exam tend to combine a short piece of HTML or CSS with a request to describe its effect, or to ask you to write a short fragment from a description of what the finished page should show. Because the tag list and the CSS property list are both closed and fully specified, there is very little ambiguity in what "revise this topic properly" means: know every tag in the three families, know every listed property, and be able to write and read the three-part structure of a style rule without hesitation.

If you are building your own set of oxfordaqa igcse computer science revision notes, keep this topic on a single page you can glance at the night before the exam: the tag table, the property table, and the HTML5 comparison. Pair it with oxfordaqa igcse computer science practice questions drawn from past and specimen papers, since seeing how the specification's own examiners phrase these questions is the fastest way to stop losing marks on wording you were not expecting.

These oxfordaqa igcse computer science notes are deliberately narrow: web page design is a small corner of the wider specification, and it rewards accuracy over breadth. Get the tag families straight, get the three parts of a CSS rule straight, and know your HTML5 additions cold, and this topic becomes one of the more reliably scoring sections of the paper.