8.

9 Web Application Development

A-Level Computer Science Study Notes — Concepts, Explanations & Worked Examples

Objective What it covers

Design parts of a website users interact Building the visible, interactive interface of a page
with

Create Forms Collecting input from users through form controls

Create navigation tools Letting users move between pages

Validate websites Checking that code and data meet required standards

Debug webpages and websites Finding and fixing errors

Construct and link web pages Building a working multi-page site

1. User Interface (UI) Creation

The User Interface is everything a visitor sees and interacts with in a browser: the layout, text, images, and controls on a page.

Building a UI mostly happens in HTML (structure) and CSS (appearance). Below are the elements the syllabus lists.

1.1 Headings
Headings organise a page into sections and tell both the reader and search engines what each part is about. HTML provides six
levels, <h1> (most important) to <h6> (least important).

EXAMPLE

<h1>Fatima High School</h1>

<h2>About Us</h2>
<h3>Our Mission</h3>

<h1> would be used once for the page's main title; <h2> and <h3> for sub-sections beneath it.

1.2 Paragraphs
The <p> tag groups a block of text into a paragraph, adding space above and below it automatically.

EXAMPLE

<p>Fatima High School has offered quality education

since its founding, guided by strong Christian values.</p>

1.3 Strike-through
Strike-through draws a line through text to show it has been removed, corrected, or is no longer valid — useful for showing edits
such as an old price being replaced.

EXAMPLE

<p>Enrolment fee: <s>$120</s> $100 (new intake discount)</p>

Page 1 of 7
1.4 Graphics
Images make a page visually engaging and communicate information faster than text. The <img> tag embeds a graphic; it needs a
src (the file location) and an alt (backup text for accessibility and if the image fails to load).

EXAMPLE

<img src="[Link]" alt="Fatima High School logo" width="150">

1.5 Tables
Tables display data in rows and columns, e.g. a timetable or a results grid. <table> holds the whole table, <tr> a table row,
<th> a header cell, and <td> a normal data cell.

EXAMPLE

<table>
<tr><th>Subject</th><th>Grade</th></tr>
<tr><td>Mathematics</td><td>A</td></tr>
<tr><td>Physics</td><td>B</td></tr>
</table>

1.6 Bullets and Numbering

Lists present related items clearly. An unordered (bulleted) list uses <ul> when the order doesn't matter; an ordered (numbered)
list uses <ol> when sequence matters (e.g. steps in a process). Each item sits inside <li> .

EXAMPLE

<ul>
<li>Mathematics</li>
<li>Computer Science</li>
<li>Physics</li>
</ul>

<ol>
<li>Register for the exam</li>
<li>Pay the exam fee</li>
<li>Sit the exam</li>
</ol>

1.7 Text Formatting

Formatting tags change how text is displayed to add emphasis or meaning, e.g. <b> / <strong> for bold, <i> / <em> for italics,
and <u> for underline.

EXAMPLE

<p><strong>Important:</strong> results close on

<em>Friday</em>. <u>Late entries will not be accepted.</u></p>

Page 2 of 7
 2. Creating Forms

A form is a section of a webpage that collects information from the user (e.g. names, choices, feedback) and sends it
somewhere for processing, such as a database or an email.

A form is built with the <form> tag, which wraps all the individual controls below.

EXAMPLE – A SIMPLE REGISTRATION FORM

<form action="submit_registration.php" method="post">

<label for="name">Full Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Register">
</form>

The action attribute says which page will process the data, and method says how it is sent (e.g. post ).

2.1 Form Controls

Label
A label is text that names a control so the user knows what to enter. Linking a label's for attribute to an input's id also means
clicking the label activates the control.

EXAMPLE

<label for="email">Email Address:</label>

<input type="email" id="email" name="email">

Textbox
A textbox lets a user type free text, such as a name or a comment.

EXAMPLE

<input type="text" name="student_name" placeholder="Enter your name">

Radio Button
Radio buttons let a user pick exactly one option from a set. All related buttons share the same name so selecting one deselects
the others.

EXAMPLE – CHOOSING A GENDER FOR A SCHOOL RECORD

<input type="radio" name="sex" value="male"> Male

<input type="radio" name="sex" value="female"> Female

Check Box
Checkboxes let a user select none, one, or several options independently — unlike radio buttons.

EXAMPLE – SUBJECTS A STUDENT IS TAKING

<input type="checkbox" name="subjects" value="maths"> Mathematics

<input type="checkbox" name="subjects" value="physics"> Physics
<input type="checkbox" name="subjects" value="cs"> Computer Science

Page 3 of 7
Combo Box
A combo box (drop-down select box) presents a compact list the user opens and picks one item from, saving space compared to
radio buttons.

EXAMPLE

<select name="grade">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

List Box
A list box is similar to a combo box but shows several options at once (using the size attribute) and can allow multiple selections
with multiple .

EXAMPLE

<select name="languages" size="4" multiple>

<option>Shona</option>
<option>Ndebele</option>
<option>English</option>
<option>French</option>
</select>

Button
A button triggers an action, most commonly submitting the form's data.

EXAMPLE

<button type="submit">Submit</button>
<button type="reset">Clear Form</button>

2.2 Drop Down Menus

Beyond form selection, drop-down menus are also used as navigation — a menu heading that reveals a hidden list of links when
clicked or hovered over, saving screen space in a navigation bar.

EXAMPLE – A NAVIGATION DROP-DOWN (HTML + CSS)

<div class="dropdown">
<button>Departments</button>
<div class="dropdown-content">
<a href="[Link]">Sciences</a>
<a href="[Link]">Arts</a>
</div>
</div>
<style>
.dropdown-content { display: none; }
.dropdown:hover .dropdown-content { display: block; }
</style>

2.3 Active Links

An active link (hyperlink) is clickable text or an image that takes the user to another page, another part of the same page, or an
external website.

Page 4 of 7
 EXAMPLE

<a href="[Link]">Check Your Results</a>

<a href="[Link] our website</a>
<a href="#top">Back to top</a>

The first link opens another page on the same site; the second opens an external URL; the third jumps to an anchor within the
same page.

3. Navigation Tools

Navigation tools are the links and menus that let users move between the different pages of a website, e.g. a navigation bar, a
sitemap, or a "Back to Home" link.

EXAMPLE – A SIMPLE NAVIGATION BAR

<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a>
<a href="[Link]">Results</a>
<a href="[Link]">Contact</a>
</nav>

Placing this same block on every page of a site gives visitors a consistent way to reach any section.

4. Validating Websites

Validation is the process of checking that a website's code follows the correct rules (syntax) of the language it is written in, and
that data entered by users meets set requirements before it is accepted.

There are two levels relevant here:

• Code validation — checking HTML/CSS against official web standards, e.g. using the W3C Markup Validator, to catch
mistakes like an unclosed tag.
• Data (form) validation — checking that what a user types is sensible before it is submitted.

EXAMPLE – SIMPLE HTML DATA VALIDATION

<input type="email" name="email" required>

<input type="number" name="age" min="1" max="120" required>

Here, required stops an empty submission, type="email" checks the text looks like an email address, and min / max
restrict the age to a sensible range.

5. Debugging Webpages and Websites

Debugging is the process of finding and fixing errors in code so a webpage works and displays as intended.

Common issues and how to trace them:

• Syntax errors — e.g. a missing closing tag such as </div> , which can break the layout of everything after it.
• Broken links or images — e.g. a misspelled file name in src or href so the resource fails to load.
• Logic errors in scripts — e.g. JavaScript that runs without crashing but produces the wrong result.

EXAMPLE – USING A BROWSER'S DEVELOPER CONSOLE TO DEBUG JAVASCRIPT

Page 5 of 7
 <script>
let total = "10" + 5; // BUG: string + number gives "105", not 15
[Link](total);
</script>

Opening the browser's Developer Tools (usually F12) and checking the Console tab shows the output "105" , revealing the
mistake. The fix is to convert the value first: Number("10") + 5 .

6. Constructing and Linking Web Pages

Constructing a website means combining HTML, CSS, and JavaScript into individual pages, then linking those pages together
with hyperlinks so they function as one connected site.

EXAMPLE – TWO LINKED PAGES

<!-- [Link] -->

<!DOCTYPE html>
<html>
<head><title>Home</title></head>
<body>
<h1>Welcome</h1>
<a href="[Link]">Go to About Page</a>
</body>
</html>

<!-- [Link] -->

<!DOCTYPE html>
<html>
<head><title>About</title></head>
<body>
<h1>About Us</h1>
<a href="[Link]">Back to Home</a>
</body>
</html>

Clicking the link in [Link] loads [Link] , and vice versa — this is what "linking web pages to construct a website"
means in practice.

Page 6 of 7
 7. Tools and Languages Used

The syllabus lists the languages, editors, and resources typically used to build web applications:

Tool / Language Role Example use

HTML Structures the content of a page (headings, paragraphs, forms, <h1>Title</h1>

links)

CSS Styles the appearance — colours, fonts, layout, spacing h1 { color: navy; }

JavaScript Adds interactivity and logic that runs in the browser alert("Form submitted!");

PHP A server-side language that processes form data, talks to echo "Hello, " . $_POST['name'];
databases, and generates pages dynamically before they
reach the browser

Text editors Programs used to write and edit the code above, often with Writing [Link] in VS Code
(Notepad++, VS Code, Vim, syntax highlighting and error checking
Atom)

Internet Required to publish pages online and to test how they load and Uploading files to a web host so
behave for real users [Link] goes live

AI applications Tools (e.g. AI code assistants) that help generate, explain, or Asking an AI assistant to suggest a fix for a
debug code faster broken form validation script

How they fit together

A typical page is written in HTML for structure, styled with CSS, and made interactive with JavaScript in the browser. When a form is
submitted, PHP running on the web server receives the data, processes it (e.g. checks it, stores it in a database), and can send a
response back — this is why PHP is called "server-side" while JavaScript by default is "client-side".

Study notes generated from Fatima High School A-Level Computer Science syllabus section 8.9 — Web Application Development. Each concept above
pairs its definition with a minimal working code example so it can be tested directly in a text editor and viewed in a browser.

Page 7 of 7