QUESTION ONE (COMPULSORY)
a) Use code illustration to distinguish between the following [6 marks]
i) CSS and HTML QUESTION FOUR
HTML (HyperText Markup Language) a) Define the following as they relate to stylesheets [4 marks]
Used to structure content on a web page. i) Selector
<p>This is a paragraph</p> A selector is a pattern used in CSS to select HTML elements that are to be styled.
<h1>Welcome</h1>
Example:
CSS (Cascading Style Sheets)
p{
Used to style and format HTML elements.
p{ color: blue;
color: blue; }
font-size: 16px; Here, p is the selector.
} ii) Class
A class is a reusable identifier used to apply the same style to multiple HTML elements.
h1 { Example:
text-align: center; <p class="menu">Home</p>
} .menu {
👉 Difference: font-weight: bold;
HTML = structure/content }
CSS = presentation/appearance iii) Anchor
ii) HTML5 and HTML4 An anchor refers to the <a> tag, used to create hyperlinks in web pages.
HTML4
Example:
<div id="header">Header</div>
<a href="[Link]">Home</a>
<div id="footer">Footer</div>
HTML5 iv) li
<header>Header</header> <li> stands for list item and is used inside ordered (<ol>) or unordered (<ul>) lists.
<footer>Footer</footer> Example:
👉 Differences: <li>Home</li>
HTML5 introduces semantic elements (header, nav, section) b) Name the navigation structure shown in the figure [2 marks]
HTML5 supports audio, video, canvas
HTML4 relies heavily on <div>
iii) Values and Elements
Element
<p>Hello World</p>
<p> → element
Includes opening tag, content, closing tag The navigation structure shown is a:
Value 👉 Horizontal navigation menu (navigation bar)
<img src="[Link]" width="300"> c) Use HTML5 to create the navigation structure as shown, including CSS
src="[Link]" → value of attribute src (Underline becomes active on hover) [14 marks]
width="300" → value HTML5 (Structure)
b) Five phases of website development [5 marks] <!DOCTYPE html>
1. Planning – identify goals, audience, requirements <html lang="en">
2. Analysis – content, functionality, technical needs
<head>
3. Design – layout, wireframes, UI/UX
<meta charset="UTF-8">
4. Development – coding HTML, CSS, JavaScript
5. Testing & Deployment – testing, fixing bugs, publishing <title>Navigation Menu</title>
c) Five questions to help “Know the Audience” [5 marks]
1. Who are the target users? <style>
2. What is their age group and education level? /* Navigation container */
3. What devices will they use (mobile, desktop)? nav {
4. What is their technical skill level? margin: 20px;
5. What problems do they expect the application to solve? }
d) Why the organization is not considered an audience [2 marks]
An organization owns the system, but does not use it directly. /* Remove bullets and spacing */
The actual users (customers, staff, clients) interact with the application, not the organization itself. nav ul {
e) Describe the use of the following tools [4 marks]
list-style-type: none;
i) Storyboard
padding: 0;
A visual plan showing how pages/screens will appear
Helps designers plan navigation and content flow margin: 0;
ii) Breadcrumbs }
A navigation aid showing user’s current location
Example: /* Make items horizontal */
Home > News > Sports nav ul li {
Improves usability and navigation display: inline-block;
f) Meaning of “cascaded” in CSS [1 mark] margin-right: 20px;
Styles are applied based on priority rules (browser defaults → external → internal → inline) }
When multiple styles exist, the last or most specific rule wins
g) Five HTML5 semantic elements [5 marks] /* Anchor styling */
1. <header> – page or section header nav ul li a {
2. <nav> – navigation links
text-decoration: none;
3. <section> – related content
color: black;
4. <article> – independent content
5. <footer> – footer information font-size: 18px;
h) Two common web protocols [2 marks] padding-bottom: 5px;
HTTP – HyperText Transfer Protocol }
HTTPS – Secure HyperText Transfer Protocol
/* Underline on hover */
QUESTION TWO nav ul li a:hover {
Given META tag script: border-bottom: 2px solid black;
<head> }
<meta charset="UTF-8"> </style>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript"> </head>
<meta name="author" content="John Doe">
<body>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
a) Explain the use of the following attributes [4 marks] <nav>
i) name <ul>
Identifies the type of meta information (description, keywords, author) <li><a href="#">Home</a></li>
ii) content <li><a href="#">Media</a></li>
Holds the actual value of the metadata <li><a href="#">Photos</a></li>
iii) charset <li><a href="#">Nature (2019)</a></li>
Defines character encoding (UTF-8 supports most languages) </ul>
iv) meta </nav>
Provides metadata about the web page (not displayed)
b) Differentiate between the following [6 marks] </body>
i) Layer vs Tier
</html>
Layer Tier
Logical separation Physical separation Php example
<?php
Example: UI, logic Example: server machines
$servername = "localhost";
ii) Client vs Server $username = "username";
$password = "password";
Client Server
$dbname = "mydb";
Requests services Provides services // Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
Browser Web server // Check connection
iii) Cloud vs Protocol if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
Cloud Protocol }
echo "Connected successfully";
Online computing platform Communication rules
?>
AWS, Azure HTTP, FTP
c) Embed media using HTML5 [10 marks] Java example
i) Video (natGeo.mp4)
<button onclick="showMessage()">Click me</button>
<video controls width="400">
<script>
<source src="natGeo.mp4" type="video/mp4">
function showMessage() {
</video>
ii) Audio (Sights and [Link]) alert("Hello, world!");
<audio controls> }
<source src="Sights and [Link]" type="audio/wav"> </script>
</audio>
iii) Image ([Link])
<img src="[Link]" alt="Banner Image">
QUESTION THREE
a) Parts of a URL [6 marks]
Example:
[Link]
1. Protocol – https
2. Domain name – [Link]
3. Port – 8080
4. Path – /folder/[Link]
5. Query string – ?name=abc
6. Fragment – #top
Suppose we have a webpage called homepage which has the following items on the navigation panel. [ Home | News | Contact | About Us] We would like to style the navigation
panel which has a class called navbar as follows. Set the unordered list to have no bullets and spaces as follows set list- Style-type to be none, the padding to 0, the margin to
0.5em, the position to be absolute, set the top left and width to be 2em, 1em and 9em respectively
b) HTML file with navigation links [4 marks]
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
</head>
<body>
<ul class="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About Us</a></li>
</ul>
</body>
</html>
c) Create a html file which has the four links above. [4 marks] c. Write the Stylesheet rules for the above description. Place the Stylesheet in the context that it will be applied to only
one web page (homepage) *Note you do not require to do an entire web page just the necessary skeleton indicating the scope of your stylesheet as guided. Also note that the
attributes are given in bold and their values are in italics.
<style>
.navbar {
list-style-type: none;
padding: 0;
margin: 0.5em;
position: absolute;
top: 2em;
left: 1em;
width: 9em;
}
</style>