HFC CAPE U2 Information Technology 2026 Teacher: Rick S.
Soomai
Hi Team,
Based on the responses I got for Question 4 in the MOCK Exam, I feel we can all do with a
little refresher and/or tuition in HTML programming.
Well, here are two things I hope will help.
1. The traditional “Hello World!” program.
Often, a textbook teaching a new language will begin with a “Hello World!” script. This is
usually a simple code snippet that is also a complete working program.
All it will do is put “Hello World! on the screen. You can progressively edit and upgrade this
complete working piece of code until you have a complex routine that can display your
ambitious imagination.
So here’s what we will do:
Copy each of the items below into a Notepad document and give it a name and a .html
extension. Run the script in a browser.
I’ve tested them all so all you need to do is learn the forms as the programming increases in
complexity.
a) A basic HTML “Hello World!”.
<!DOCTYPE html>
<html>
<head>
<title>My Hello World Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Explanation:
• <!DOCTYPE html> → tells the browser this is an HTML5 document
• <html> → root of the webpage (the highest level folder)
• <head> → contains page info (no data to display here)
• <title> → text shown on the browser tab
• <body> → contains the visible content of the page
• <h1> → main heading (displays “Hello, World!”)
1
HFC CAPE U2 Information Technology 2026 Teacher: Rick S. Soomai
b) Let’s move up from this basic, bland display to some style: background, colors and fonts.
CSS (Cascading Style Sheets) and HTML (HyperText Markup Language) are the two core
technologies for building web pages. HTML provides the structure and CSS defines the
presentation.
HTML provides the form elements like headings (<h1>), paragraphs (<p>), and images.
CSS provides the formatting properties controlling colors, fonts, spacing, and layouts.
For example, a CSS rule p { color: red; } tells the browser to display all HTML paragraph
elements in red.
NB! While HTML can exist and be readable on its own (using browser default styles), CSS
has no function without an HTML document to style.
Here’s a styled version using CSS inside HTML:
<!DOCTYPE html>
<html>
<head>
<title>Styled Hello World</title>
<style>
body {
background-color: lightblue;
text-align: center;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
font-size: 48px;
margin-top: 100px;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Explanation:
• background-color: lightblue; → lightblue page background
• text-align: center; → centers the text
• font-family: Arial; → changes font style to Arial
• color: darkblue; → darkbue text color
• font-size: 48px; → makes text 48 pixels in height
• margin-top: 100px; → pushes text down
2
HFC CAPE U2 Information Technology 2026 Teacher: Rick S. Soomai
c) Try this upgraded script which now makes the display a Form with data-input forms and a
Button to submit.
<!DOCTYPE html>
<html>
<head>
<title>Hello World Form</title>
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: darkblue;
margin-top: 50px;
}
form {
background-color: white;
padding: 20px;
margin: 40px auto;
width: 300px;
border-radius: 10px;
box-shadow: 0px 0px 10px gray;
}
input, button {
margin: 10px 0;
padding: 8px;
width: 90%;
}
button {
background-color: darkblue;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: navy;
}
</style>
3
HFC CAPE U2 Information Technology 2026 Teacher: Rick S. Soomai
</head>
<body>
<h1>Hello, World! </h1>
<form action="#" method="post">
<!-- Name -->
<label for="name">Enter your name:</label><br>
<input type="text" id="name" name="name" required
placeholder="Your name"><br>
<!-- Age -->
<label for="age">Enter your age:</label><br>
<input type="number" id="age" name="age" min="1" required><br>
<!-- Submit Button -->
<button type="submit">Submit</button>
</form>
</body>
</html>
Explanation about the functionality of the Submit button:
A SUBMIT button is used to:
• collect all data entered in the form;
• validate the data (using HTML validation rules);
• send the data to a server;
The attribute action and its value “#” in the tag <form action="#" method="post"> tells the
browser to submit the form to the current page. In other words, self-submission, to the exact
same URL it is currently on. You are not submitting the data collected to any external
database.
Make an html doc of the code and open it in your browser. Practice changing some of the
attribute values to see how the page changes.
4
HFC CAPE U2 Information Technology 2026 Teacher: Rick S. Soomai
Ok, that’s it for HELLO WORLD.
Let’s try an exam-like scenario for the production of a form with data and submit button.
2. HTML code for the following scenario.
Question:
A website is to be designed to collect the following information from students graduating from
an educational institution:
• first name
• middle name
• surname
• sex
• date of birth
• academic qualifications
• employment interest
• expected salary
The information must be entered using an HTML form with a Submit button.
Task:
1. Identify all the HTML form elements needed to create the form.
2. Write the HTML code for the form.
State how each field can be validated.
OK! Here’s the code for it, documented to help you follow the specific points.
<form action="#" method="post">
<!--
<form> defines the form container
action="#" means data is sent to the same page
method="post" sends data securely in the request body
-->
<!-- FIRST NAME -->
<label>First Name:</label>
<input type="text" name="fname" required pattern="[A-Za-z]{2,30}">
<!--
type="text" → allows text input
name="fname" → identifies the field when data is sent
5
HFC CAPE U2 Information Technology 2026 Teacher: Rick S. Soomai
required → field must not be empty (presence check)
pattern="[A-Za-z]{2,30}" → only letters allowed, 2–30 characters (format + length
check)
-->
<br><br>
<!-- MIDDLE NAME -->
<label>Middle Name:</label>
<input type="text" name="mname" pattern="[A-Za-z]{0,30}">
<!--
optional field (no 'required')
pattern ensures only letters if entered
-->
<br><br>
<!-- SURNAME -->
<label>Surname:</label>
<input type="text" name="surname" required pattern="[A-Za-z]{2,30}">
<!--
required → must be filled
pattern → letters only, 2–30 characters
-->
<br><br>
<!-- SEX -->
<label>Sex:</label>
<input type="radio" name="sex" value="Male" required> Male
<input type="radio" name="sex" value="Female"> Female
<!--
type="radio" → allows only ONE selection
same name="sex" groups the options together
required → ensures one option is selected
value → data sent to server
-->
<br><br>
<!-- DATE OF BIRTH -->
<label>Date of Birth:</label>
<input type="date" name="dob" required>
<!--
type="date" → user selects a date
required → must be filled
ensures correct date format (type check)
-->
<br><br>
6
HFC CAPE U2 Information Technology 2026 Teacher: Rick S. Soomai
<!-- ACADEMIC QUALIFICATIONS -->
<label>Academic Qualifications:</label>
<select name="qualification" required>
<option value="">Select</option>
<option>CSEC</option>
<option>CAPE</option>
<option>Diploma</option>
<option>Degree</option>
</select>
<!--
<select> → dropdown list
<option> → items in list
value="" → prevents default selection (forces user to choose)
required → ensures a selection is made
-->
<br><br>
<!-- EMPLOYMENT INTEREST -->
<label>Employment Interest:</label><br>
<textarea name="interest" required minlength="10"></textarea>
<!--
<textarea> → multi-line text input
required → must not be empty
minlength="10" → at least 10 characters (length check)
-->
<br><br>
<!-- EXPECTED SALARY -->
<label>Expected Salary:</label>
<input type="number" name="salary" required min="0">
<!--
type="number" → only numeric input allowed
required → must be filled
min="0" → prevents negative values (range check)
-->
<br><br>
<!-- SUBMIT BUTTON -->
<button type="submit">Submit</button>
<!--
type="submit" → sends form data to server
triggers validation before submission
-->
</form>
7
HFC CAPE U2 Information Technology 2026 Teacher: Rick S. Soomai
Validation Used in This Form
Field Validation Type
First Name Presence + Format + Length
Middle Name Format
Surname Presence + Format + Length
Sex Presence
Date of Birth Type + Presence
Qualification Presence
Employment Interest Presence + Length
Salary Type + Range + Presence
Try the code the usual way. Change values to see how the form’s functionality changes. It will
develop your skills with the form elements.
Have a strong HTML background for the coding question in the CAPE exam.
Sameer asked for some pointers with SQL.
I’ll be working on this now and it will be coming very quickly.