Scribd
Upload
3 views47 pages

HTML Class

Uploaded by

lucasmatara47
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views47 pages

HTML Class

Uploaded by

lucasmatara47
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

lOMoARcPSD|47232591

Tvetcdacc web dev notes

diploma in information communication technology (Eldoret National Polytechnic)

messages.pdf_cover_qr_code_label

messages.studocu_not_sponsored_or_endorsed_by_college
messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

TVET CDACC
Technical and Vocational Education and Training
Curriculum Development Assessment and Certification Council

WEB DESIGN & DEVELOPMENT


HTML, CSS & JavaScript
COMPREHENSIVE STUDY NOTES & EXAMINATION PAPER
Units 1 - 6 | Theory, Practical & Application Questions

Level: Certificate / Diploma Subject: ICT / Computing

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

SECTION I: COMPREHENSIVE STUDY NOTES


Units 1 – 6 | HTML, CSS & JavaScript

UNIT 1: UNDERSTAND HTML BASICS

1.1 Definition of HTML


HTML stands for HyperText Markup Language. It is the standard language used to create and structure
content on the World Wide Web. HTML describes the structure of web pages using a system of
elements represented by tags.

Key Points about HTML

HTML is NOT a programming language - it is a markup language.


HTML was created by Tim Berners-Lee in 1991.
The current standard is HTML5, maintained by the W3C (World Wide Web Consortium).
HTML files are plain text files saved with the .html or .htm extension.
Web browsers read HTML documents and render them as visible web pages.
HTML works alongside CSS (for styling) and JavaScript (for interactivity).
HyperText refers to text that contains links to other texts or documents.
Markup refers to the system of annotations (tags) that define structure.

1.2 Terminologies Used in HTML


Understanding HTML requires familiarity with the following key terminologies:

Term Definition
Document An HTML document is a complete web page file containing HTML
code. It begins with <!DOCTYPE html> and contains the entire
structure of a web page saved with the .html extension.
Stylesheet A stylesheet is a file or section of code that defines the visual
presentation (style) of an HTML document. CSS (Cascading Style
Sheets) is used as the stylesheet language.
Element An HTML element is a building block of an HTML page. It consists of a
start tag, content, and an end tag. Example: <p>Hello</p> is a
paragraph element.
Attribute An attribute provides additional information about an HTML element.
Attributes appear inside the opening tag as name-value pairs.
Example: <img src='[Link]' alt='Photo'>.
Tag Tags are the markup notations used to define HTML elements. They
are enclosed in angle brackets. Most tags come in pairs: opening

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

<tagname> and closing </tagname>.


Browser A web browser is software that reads HTML documents and renders
them as visual web pages. Examples: Chrome, Firefox, Edge, Safari.
URL Uniform Resource Locator - the web address used to locate resources
on the internet. Example: [Link]
Nesting Placing HTML elements inside other HTML elements. Proper nesting
means closing inner tags before outer tags.
Semantic HTML Using HTML elements that carry meaning about the content they
contain. Example: <article>, <nav>, <header> describe their content.
Void Element HTML elements that do not have a closing tag and cannot have child
content. Examples: <br>, <img>, <input>, <hr>.

1.3 Creating an HTML File


An HTML file is created using any text editor and saved with the .html extension. Follow these steps:
1. Open a text editor (Notepad, VS Code, Sublime Text, Notepad++, or Atom).
2. Type the HTML structure (see below).
3. Save the file with an ".html" extension (e.g., [Link]).
4. Open the file in a web browser to view the result.

Basic Structure of an HTML File:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first HTML page.</p>
</body>
</html>

Explanation of Each Line

<!DOCTYPE html> - Tells the browser this is an HTML5 document. Must be the very first line.
<html lang='en'> - Root element; wraps all content. lang='en' specifies English language.
<head> - Contains meta-information (not visible on page): title, character set, links.
<meta charset='UTF-8'> - Specifies character encoding to support special characters.
<meta name='viewport'...> - Makes the page responsive on mobile devices.
<title> - Sets the text shown on the browser tab or window title bar.
<body> - Contains all visible content displayed on the web page.
</html> - Closes the root HTML element.

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

1.4 HTML Core Elements Explained


Core HTML elements provide the foundation structure for every web page:

Element Description & Usage


<!DOCTYPE html> Document type declaration. Tells the browser to use HTML5. Must appear on
the very first line of an HTML document.
<html> The root (top-level) element of an HTML page. All other elements must be
descendants of this element. Contains the lang attribute.
<head> Contains machine-readable information (metadata) about the document, like
its title, character set, styles, and scripts. Content here is NOT visible.
<title> Defines the title of the document shown in the browser's title bar or tab.
Important for SEO (Search Engine Optimization).
<meta> Defines metadata such as character set, page description, keywords, author,
and viewport settings. Self-closing (void element).
<body> Contains all the content that is visible to website users - text, images, links,
tables, lists, etc.
<link> Used in the <head> to link external resources, most commonly external CSS
stylesheets.
<script> Used to embed or reference JavaScript code. Can be placed in <head> or at
the end of <body>.
<style> Used to include internal CSS styles within the HTML document, placed inside
<head>.

1.5 Adding HTML Core Elements to a File


A complete HTML file with all core elements properly structured:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="My personal website">
<meta name="author" content="John Doe">
<title>John Doe - Personal Website</title>
<link rel="stylesheet" href="[Link]">
<style>
body { font-family: Arial, sans-serif; }
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Hello, I am John Doe.</p>
<script src="[Link]"></script>
</body>
</html>

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

UNIT 2: USE HTML ELEMENTS

2.1 Basic HTML Elements Explained


Basic HTML elements define the content and structure visible to website visitors:

Text Elements
Element Description
<h1> to <h6> Heading elements. <h1> is the largest/most important, <h6> the smallest.
Used to create headings and subheadings.
<p> Paragraph element. Defines a block of text as a paragraph. Browsers add
space before and after paragraphs automatically.
<br> Line break. A void element (no closing tag). Forces a new line within text
content.
<hr> Horizontal rule. Creates a horizontal dividing line across the page. Void
element.
<strong> Makes text bold AND semantically important. Differs from <b> which is only
visual bold.
<em> Emphasizes text (italic). Semantically meaningful emphasis, unlike <i> which
is only visual.
<span> Inline container for styling small pieces of text without line breaks.
<div> Block-level container for grouping elements for styling and layout purposes.
<pre> Preformatted text. Displays text in a fixed-width font preserving spaces and
line breaks.
<code> Defines a piece of computer code. Displayed in monospace font.
<blockquote> Defines a section quoted from another source. Usually rendered with
indentation.
<abbr> Defines an abbreviation or acronym. The title attribute provides the full
description.

List Elements
Element Description
<ul> Unordered list. Creates a bulleted list. Contains <li> elements.
<ol> Ordered list. Creates a numbered list. Contains <li> elements.
<li> List item. Used inside <ul> or <ol> to define each item in the list.
<dl> Description list. Container for description terms and their definitions.
<dt> Description term. Used inside <dl> to define a term.
<dd> Description definition. Provides the definition/description for the <dt> term.

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

Media & Link Elements


Element Description
<a> Anchor element. Creates hyperlinks to other pages, files, locations, or URLs.
Uses href attribute.
<img> Embeds an image. Void element. Requires src (source) and alt (alternative
text) attributes.
<audio> Embeds audio content. Supports MP3, WAV, OGG formats. Uses controls
attribute for playback controls.
<video> Embeds video content. Supports MP4, WebM, OGG. Uses controls, width,
height attributes.
<iframe> Inline frame. Embeds another webpage or content within the current page.
<figure> Groups media (image/diagram) with its caption using <figcaption>.
<figcaption> Defines a caption for a <figure> element.

Table Elements
Element Description
<table> Defines an HTML table. Container for all table elements.
<thead> Groups header content in a table. Contains one or more <tr> rows.
<tbody> Groups body content in a table. Contains the main data rows.
<tfoot> Groups footer content in a table. Contains summary rows.
<tr> Table row. Defines a row of cells in a table.
<th> Table header cell. Bold and centered by default. Used for column/row headings.
<td> Table data cell. Contains the actual data in a table.
<caption> Defines a title/caption for a table. Placed immediately after the <table> tag.

Form Elements
Element Description
<form> Creates an HTML form for user input. Attributes: action (where to send data),
method (GET or POST).
<input> Creates various input controls depending on the type attribute (text,
password, email, checkbox, radio, submit, etc.).
<label> Defines a label for an input element. The for attribute links it to an input's id.
<textarea> Multi-line text input field. Attributes: rows, cols define visible size.
<select> Creates a dropdown list. Contains <option> elements.
<option> Defines an option within a <select> dropdown.
<button> Creates a clickable button. Can be type='submit', 'reset', or 'button'.
<fieldset> Groups related elements in a form with a box.

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

<legend> Defines a caption for a <fieldset> element.

2.2 Adding Basic HTML Elements to a Document


Complete example showing various HTML elements in use:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Elements Demo</title>
</head>
<body>
<!-- Headings -->
<h1>Main Heading (H1)</h1>
<h2>Sub Heading (H2)</h2>
<h3>Section Heading (H3)</h3>

<!-- Paragraph and text formatting -->


<p>This is a <strong>bold</strong> word and this is <em>italic</em>.</p>
<p>Line one.<br>Line two after a break.</p>
<hr>

<!-- Lists -->


<ul>
<li>Unordered item one</li>
<li>Unordered item two</li>
</ul>
<ol>
<li>Ordered item one</li>
<li>Ordered item two</li>
</ol>

<!-- Link and Image -->


<a href="[Link] Example</a>
<img src="[Link]" alt="A sample photo" width="300">

<!-- Table -->


<table border="1">
<thead><tr><th>Name</th><th>Age</th></tr></thead>
<tbody><tr><td>Alice</td><td>20</td></tr></tbody>
</table>

<!-- Form -->


<form action="[Link]" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
</body>
</html>

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

2.3 Attributes Defined


Attributes are special words placed inside opening HTML tags that provide additional information about
elements. They modify or configure the behaviour and appearance of elements.

Rules for HTML Attributes

Attributes are always written in the opening tag, never in the closing tag.
Attributes come in name-value pairs: name="value".
Attribute values should be enclosed in double quotes (recommended) or single quotes.
Multiple attributes can be placed in one opening tag, separated by spaces.
Some attributes are Boolean - their presence alone activates them (e.g., disabled, checked).
Attribute names are case-insensitive, but lowercase is the HTML5 standard.
Global attributes can be used on any HTML element (id, class, style, title, lang, data-).

Attribute Description & Example


id Unique identifier for an element. Only ONE element should have a specific
id per page. Used in CSS and JavaScript. Example: <div id="main-
content">
class Assigns one or more class names to an element for CSS styling. Multiple
elements can share a class. Example: <p class="intro bold">
style Applies inline CSS styling directly to an element. Example: <p
style="color:red; font-size:18px;">
href Specifies the URL of a link. Used in <a> tags. Example: <a
href="[Link]
src Specifies the source (URL/path) of an embedded resource. Used in
<img>, <script>, <audio>, <video>. Example: <img src="[Link]">
alt Provides alternative text for images if they cannot be displayed. Essential
for accessibility. Example: <img alt="Company Logo">
width & height Specifies the width and height of elements in pixels or percentage.
Example: <img width="300" height="200">
type Specifies the type of an element. Used in <input>, <button>, <script>.
Example: <input type="email">
name Identifies form data when submitted. Example: <input name="username">
value Specifies the value of an element. Used in <input>, <option>, <button>.
Example: <input value="Default Text">
placeholder Displays hint text in an input field before user types. Example: <input
placeholder="Enter your name">
action Specifies where form data is sent upon submission. Example: <form
action="[Link]">
method Specifies the HTTP method (GET or POST) for form submission.
Example: <form method="POST">
target Specifies where to open a linked document. Values: _blank (new tab),
_self (same tab), _parent, _top. Example: <a target="_blank">
colspan & rowspan colspan: merges a cell across multiple columns. rowspan: merges across
multiple rows. Example: <td colspan="2">

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

disabled Boolean attribute that disables an input element. Example: <input


disabled>
required Boolean attribute that makes an input field mandatory before form
submission. Example: <input required>
checked Boolean attribute that pre-selects a checkbox or radio button. Example:
<input type="checkbox" checked>

2.4 Adding Attributes to Elements

<!-- Using id, class, and style attributes -->


<h1 id="page-title" class="main-heading" style="color: navy;">Welcome</h1>

<!-- Image with src, alt, width, height -->


<img src="images/[Link]" alt="Profile photo" width="200" height="200">

<!-- Anchor with href and target -->


<a href="[Link] target="_blank">Visit TVET CDACC</a>

<!-- Form with action and method -->


<form action="[Link]" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter email"
required>
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" placeholder="Password" required>
<input type="submit" value="Login">
</form>

<!-- Table with colspan -->


<table border="1">
<tr><th colspan="2">Student Details</th></tr>
<tr><td>Name</td><td>Alice Wanjiku</td></tr>
<tr><td>Class</td><td>Form 3</td></tr>
</table>

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

UNIT 3: DEMONSTRATE WEB PAGE FORMATTING

3.1 Layout Elements Explained


HTML5 introduced semantic layout elements that describe the structure and meaning of web page
sections. These replace generic <div> elements with meaningful names.

Layout Element Description & Purpose


<header> Defines the introductory content or navigational links section of a page or
section. Typically contains logo, site title, and navigation menu.
<nav> Defines a set of navigation links. Used for the main menu or table of
contents. Helps screen readers identify navigation.
<main> Specifies the main content of the document. There should be only ONE
<main> element per page. Excludes headers, footers, and sidebars.
<section> Defines a thematic grouping of content, typically with a heading. Used to
break content into logical segments.
<article> Defines independent, self-contained content that can be redistributed (blog
posts, news articles, forum posts, product cards).
<aside> Defines content that is tangentially related to the main content. Used for
sidebars, pull quotes, or advertisements.
<footer> Defines the footer for a page or section. Typically contains copyright,
contact info, and secondary navigation links.
<figure> Specifies self-contained content like illustrations, diagrams, photos, code
listings. Can have a caption.
<figcaption> Defines a caption for the <figure> element. Placed as the first or last child of
<figure>.
<details> Creates a disclosure widget that users can open and close to reveal/hide
additional information.
<summary> Defines the visible heading for a <details> element. Users click it to
show/hide the details content.
<div> Generic block-level container with no semantic meaning. Used for grouping
elements for styling or scripting.
<span> Generic inline container with no semantic meaning. Used for styling small
portions of text or inline elements.

Semantic vs Non-Semantic Elements

SEMANTIC elements: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>


- Clearly describe their meaning to both the browser and the developer.
- Improve accessibility (screen readers understand the page structure).
- Improve SEO (search engines understand content hierarchy).

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

NON-SEMANTIC elements: <div>, <span>


- Tell nothing about their content.
- Used as generic containers when no semantic element is appropriate.

3.2 Adding Layout Elements to the HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>School Website</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>

<header>
<h1>Mwangi Secondary School</h1>
<p>Excellence in Education</p>
</header>

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

<main>
<section>
<h2>About Our School</h2>
<p>We offer the best education in the region.</p>
</section>

<article>
<h2>Latest News</h2>
<p>Our students won the national science fair!</p>
</article>
</main>

<aside>
<h3>Quick Links</h3>
<ul>
<li><a href="[Link]">Fee Structure</a></li>
<li><a href="[Link]">Timetable</a></li>
</ul>
</aside>

<footer>
<p>&copy; 2024 Mwangi Secondary School. All rights reserved.</p>
</footer>

</body>

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

</html>

3.3 Layout Element Attributes


Attribute Usage with Layout Elements
id Uniquely identifies a layout section. Used for anchor links and JavaScript
targeting. E.g., <section id="about">
class Assigns styles to layout sections. Multiple sections can share a class. E.g.,
<div class="container">
style Applies inline styling directly. E.g., <header style="background-color: #333;
color: white;">
role ARIA role attribute. Improves accessibility by defining the purpose. E.g.,
<nav role="navigation">
aria-label Provides an accessible label for elements. Helps screen reader users. E.g.,
<nav aria-label="Main Menu">
hidden Boolean attribute. Hides an element from the page. E.g., <aside hidden>
data-* Custom data attributes. Store extra data for JavaScript. E.g., <section data-
category="news">

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

UNIT 4: APPLY STYLES (CSS)

4.1 Style Concepts Explained


CSS (Cascading Style Sheets) is the language used to describe the presentation of HTML documents.
CSS controls layout, colours, fonts, spacing, and overall visual appearance.

CSS Core Concepts

SELECTOR - Identifies which HTML element(s) to style. E.g., p { } targets all paragraphs.
PROPERTY - The aspect of the element to style. E.g., color, font-size, background-color.
VALUE - The setting for the property. E.g., red, 16px, #FFFFFF.
DECLARATION - A property-value pair. E.g., color: red;
RULE SET - A selector plus one or more declarations in curly braces.
CASCADE - When multiple rules apply, CSS uses specificity and order to determine which wins.
INHERITANCE - Some CSS properties are inherited by child elements from parent elements.
BOX MODEL - Every element is a rectangular box with content, padding, border, and margin.

Types of CSS Selectors


Selector Type Syntax & Description
Element Selector p { color: blue; } - Selects all <p> elements on the page.
Class Selector .intro { font-size: 18px; } - Selects all elements with class='intro'.
ID Selector #header { background: navy; } - Selects the element with id='header'.
Highest specificity.
Universal Selector * { margin: 0; padding: 0; } - Selects ALL elements.
Descendant Selector nav a { color: white; } - Selects <a> tags inside <nav>.
Child Selector ul > li { list-style: none; } - Selects direct <li> children of <ul>.
Attribute Selector input[type='text'] { } - Selects inputs with type='text'.
Pseudo-class a:hover { color: red; } - Applies when user hovers over <a>.
Pseudo-element p::first-line { } - Styles the first line of paragraphs.
Group Selector h1, h2, h3 { font-family: Arial; } - Applies same style to multiple selectors.

The CSS Box Model


Every HTML element is treated as a rectangular box with four areas:
• Content - The actual text, image, or other content inside the element.
• Padding - Space between the content and the border (inside the element). Background colour
shows here.
• Border - A line surrounding the padding and content. Can have width, style, and colour.

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

• Margin - Space outside the border, between this element and neighbouring elements.
Transparent.

.box {
/* Content size */
width: 300px;
height: 200px;

/* Inner spacing */
padding: 20px; /* All sides */
padding-top: 10px; /* Individual side */

/* Border */
border: 2px solid #333;
border-radius: 8px; /* Rounded corners */

/* Outer spacing */
margin: 15px auto; /* 15px top/bottom, auto = centred horizontally */

/* Background */
background-color: #f0f0f0;
}

4.2 Applying Internal Styles


Internal CSS is placed within a <style> tag in the <head> section of the HTML document. It applies
styles to elements in that specific page only.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal CSS Demo</title>
<style>
/* Global Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Body styling */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333333;
line-height: 1.6;
}

/* Header */
header {
background-color: #1F3864;

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

color: white;
padding: 20px;
text-align: center;
}

/* Navigation */
nav ul {
list-style: none;
background-color: #2E75B6;
overflow: hidden;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: white;
padding: 14px 20px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #1F3864;
}

/* Main content */
main {
width: 80%;
margin: 20px auto;
padding: 20px;
background-color: white;
border-radius: 5px;
}

/* Footer */
footer {
background-color: #333;
color: #ccc;
text-align: center;
padding: 15px;
}
</style>
</head>
<body>
<header><h1>My Website</h1></header>
<nav><ul><li><a href="#">Home</a></li></ul></nav>
<main><p>Main content goes here.</p></main>
<footer><p>&copy; 2024 My Website</p></footer>
</body>
</html>

4.3 Creating an External CSS File


External CSS is written in a separate .css file and linked to the HTML document using the <link> tag.
This is the best practice as it allows one stylesheet to control the appearance of multiple pages.

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

Step 1: Create the CSS file ([Link])

/* [Link] - External Stylesheet */

/* ===== RESET ===== */


* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* ===== VARIABLES (Custom Properties) ===== */


:root {
--primary-color: #1F3864;
--secondary-color: #2E75B6;
--accent-color: #C9A227;
--font-main: 'Arial', sans-serif;
}

/* ===== BODY ===== */


body {
font-family: var(--font-main);
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}

/* ===== HEADER ===== */


header {
background-color: var(--primary-color);
color: #ffffff;
padding: 30px 20px;
text-align: center;
}

/* ===== TYPOGRAPHY ===== */


h1 { font-size: 2.5em; margin-bottom: 10px; }
h2 { font-size: 1.8em; color: var(--secondary-color); margin-bottom: 8px; }
p { margin-bottom: 15px; }

/* ===== LINKS ===== */


a { color: var(--secondary-color); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--accent-color); }

/* ===== BUTTONS ===== */


.btn {
display: inline-block;
padding: 10px 25px;
background-color: var(--secondary-color);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.btn:hover { background-color: var(--primary-color); }

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

/* ===== LAYOUT ===== */


.container { width: 85%; max-width: 1200px; margin: 0 auto; }

/* ===== FOOTER ===== */


footer {
background-color: #222;
color: #aaa;
text-align: center;
padding: 20px;
margin-top: 40px;
}

Step 2: Link the CSS file in the HTML document ([Link])

<head>
<meta charset="UTF-8">
<title>My Website</title>
<!-- Link the external stylesheet -->
<link rel="stylesheet" href="[Link]">
</head>

CSS Type Advantages / Disadvantages


Inline CSS (style attribute) PROS: Highest specificity, immediate. CONS: Hard to maintain, mixes
content with style, cannot reuse, no pseudo-classes.
Internal CSS (<style> tag) PROS: Page-specific, no extra HTTP request. CONS: Cannot be
shared across pages, increases HTML file size.
External CSS PROS: Shared across multiple pages, cached by browser, clean
(separate .css file) separation of concerns, easier to maintain. CONS: Extra HTTP request
(minor).

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

UNIT 5: UNDERSTAND JAVASCRIPT BASICS

5.1 Purpose of JavaScript


What is JavaScript?

JavaScript (JS) is a lightweight, interpreted, high-level programming language primarily used to


make web pages interactive.

JavaScript was created by Brendan Eich in 1995 at Netscape and standardised as ECMAScript
(ES).

The three pillars of web development:


1. HTML - Structure (what is on the page)
2. CSS - Style (how it looks)
3. JavaScript - Behaviour (how it acts/responds)

JavaScript is used for:


• Dynamic content updates - Changing content without reloading the page.
• Form validation - Checking user input before submission.
• Event handling - Responding to user actions (clicks, keystrokes, hovers).
• Animations and effects - Visual transitions and dynamic styling.
• API communication - Fetching data from servers (AJAX, Fetch API).
• Browser control - Manipulating browser history, cookies, local storage.
• Server-side development - Using [Link], JavaScript runs on servers.
• Mobile app development - Frameworks like React Native build mobile apps.

5.2 JavaScript Syntax


JavaScript syntax refers to the set of rules that define how JavaScript programs are written.

// ===== COMMENTS =====


// This is a single-line comment
/* This is a
multi-line comment */

// ===== VARIABLES =====


var name = 'Alice'; // var: function-scoped, can be re-declared (avoid in
modern JS)
let age = 20; // let: block-scoped, can be reassigned
const PI = 3.14159; // const: block-scoped, cannot be reassigned

// ===== OUTPUT =====

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

[Link]('Hello, World!'); // Prints to browser console


alert('Welcome!'); // Shows a popup alert dialog
[Link]('Hello'); // Writes to the HTML document (rarely used)

// ===== OPERATORS =====


let x = 10 + 5; // Arithmetic: + - * / % **
let isAdult = age >= 18; // Comparison: == === != !== > < >= <=
let canVote = isAdult && age < 70; // Logical: && || !

// ===== CONDITIONAL STATEMENTS =====


if (age >= 18) {
[Link]('Adult');
} else if (age >= 13) {
[Link]('Teenager');
} else {
[Link]('Child');
}

// ===== LOOPS =====


for (let i = 0; i < 5; i++) {
[Link]('Count: ' + i);
}

let count = 0;
while (count < 3) {
[Link](count);
count++;
}

// ===== FUNCTIONS =====


function greet(name) {
return 'Hello, ' + name + '!';
}
let message = greet('Kenya');
[Link](message); // Hello, Kenya!

// Arrow function (ES6)


const square = (n) => n * n;
[Link](square(4)); // 16

5.3 Accessing HTML Element Attributes Using the DOM


The Document Object Model (DOM) is a programming interface for HTML documents. It represents the
page as a tree of objects, allowing JavaScript to read and modify the document's structure, content,
and attributes.

DOM Access Methods

[Link]('id') - Returns element with matching id.


[Link]('cls') - Returns HTMLCollection of elements with class
name.
[Link]('tag') - Returns HTMLCollection of elements with tag name.

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

[Link]('selector') - Returns FIRST element matching CSS selector.


[Link]('selector') - Returns NodeList of ALL matching elements.

<!-- HTML -->


<h1 id="title">Welcome to Kenya</h1>
<p class="intro">Hello from Nairobi!</p>
<img id="logo" src="[Link]" alt="School Logo" width="100">
<input id="username" type="text" value="Alice">

// ===== ACCESSING ELEMENTS =====


let heading = [Link]('title');
let intro = [Link]('.intro');
let logo = [Link]('logo');
let input = [Link]('username');

// ===== READING ATTRIBUTES =====


[Link]([Link]); // 'Welcome to Kenya'
[Link]([Link]); // 'Welcome to Kenya' (includes HTML tags)
[Link]([Link]); // Full URL to [Link]
[Link]([Link]); // 'School Logo'
[Link]([Link]); // 100
[Link]([Link]); // 'Alice'
[Link]([Link]); // 'text'

// Using getAttribute() method


[Link]([Link]('src')); // '[Link]'
[Link]([Link]('alt')); // 'School Logo'
[Link]([Link]('id')); // 'title'

5.4 Changing HTML Element Attributes Using the DOM

<!-- HTML Structure -->


<h1 id="greeting">Good Morning!</h1>
<p id="para">Original paragraph text.</p>
<img id="photo" src="[Link]" alt="Day photo">
<button id="myBtn" style="background:blue; color:white;"
onclick="changeContent()">
Click to Change
</button>

// ===== CHANGING CONTENT =====


[Link]('greeting').textContent = 'Good Evening!';
[Link]('para').innerHTML = '<strong>Updated</strong> paragraph!';

// ===== CHANGING ATTRIBUTES =====


let img = [Link]('photo');
[Link] = '[Link]'; // Change image source
[Link] = 'Night photo'; // Change alt text
[Link] = 400; // Change width

// Using setAttribute() method


let btn = [Link]('myBtn');

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

[Link]('disabled', true); // Disable the button


[Link]('class', 'btn-primary'); // Change class

// ===== CHANGING CSS STYLES via DOM =====


let heading = [Link]('greeting');
[Link] = 'red';
[Link] = '32px';
[Link] = '#ffff00';

// ===== CHANGING CLASS =====


[Link] = 'active'; // Set class
[Link]('highlight'); // Add class
[Link]('active'); // Remove class
[Link]('visible'); // Toggle class

// ===== PRACTICAL FUNCTION EXAMPLE =====


function changeContent() {
let h = [Link]('greeting');
if ([Link] === 'Good Morning!') {
[Link] = 'Good Evening!';
[Link]('photo').src = '[Link]';
} else {
[Link] = 'Good Morning!';
[Link]('photo').src = '[Link]';
}
}

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

UNIT 6: USE JAVASCRIPT DATA TYPES

6.1 JavaScript Data Types Explained


JavaScript has two categories of data types: Primitive and Non-Primitive (Reference).

Primitive Data Types


Data Type Description & Example
String Sequence of characters (text). Enclosed in single quotes, double quotes, or
backticks. Example: let name = 'Nairobi'; let msg = `Hello ${name}`;
Number All numbers (integers and decimals). No separate int/float types. Example: let
age = 25; let pi = 3.14; let neg = -10;
Boolean Only two values: true or false. Used in conditions and comparisons. Example:
let isLoggedIn = true; let isEmpty = false;
Undefined A variable that has been declared but not yet assigned a value. Example: let
score; [Link](score); // undefined
Null Intentional absence of a value. An object type but represents 'nothing'.
Example: let user = null; // explicitly empty
BigInt For very large integers beyond Number safe limits. Example: let big =
9007199254740991n;
Symbol Unique, immutable identifier. Used as object keys. Example: let sym =
Symbol('description');

Non-Primitive (Reference) Data Types


Data Type Description & Example
Object Collection of key-value pairs. Used to represent real-world entities. Example:
let student = { name: 'Alice', age: 20, grade: 'A' };
Array Ordered collection of values. Index starts at 0. Example: let fruits = ['mango',
'banana', 'avocado'];
Function A block of reusable code. Functions are first-class objects in JavaScript.
Example: function add(a, b) { return a + b; }

// ===== CHECKING DATA TYPES =====


[Link](typeof 'Hello'); // 'string'
[Link](typeof 42); // 'number'
[Link](typeof true); // 'boolean'
[Link](typeof undefined); // 'undefined'
[Link](typeof null); // 'object' (known JS quirk!)
[Link](typeof [1,2,3]); // 'object'
[Link](typeof {a:1}); // 'object'
[Link](typeof function(){}); // 'function'

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

// ===== TYPE CONVERSION =====


let str = '42';
let num = Number(str); // String to Number: 42
let backToStr = String(100); // Number to String: '100'
let bool = Boolean(0); // 0, '', null, undefined, NaN = false; else true
let parsed = parseInt('3.7'); // 3 (truncates decimal)
let float = parseFloat('3.7'); // 3.7

6.2 Operations on Data Types


// ===== STRING OPERATIONS =====
let str = 'Hello, World!';

// Properties
[Link]([Link]); // 13

// Methods
[Link]([Link]()); // 'HELLO, WORLD!'
[Link]([Link]()); // 'hello, world!'
[Link]([Link]('World')); // 7
[Link]([Link]('Hello'));// true
[Link]([Link](0, 5)); // 'Hello'
[Link]([Link]('World', 'Kenya')); // 'Hello, Kenya!'
[Link]([Link](', ')); // ['Hello', 'World!']
[Link]([Link]()); // removes whitespace
[Link]([Link](0)); // 'H'

// Template literals
let name = 'Alice';
let age = 20;
[Link](`Name: ${name}, Age: ${age}`); // 'Name: Alice, Age: 20'

// ===== NUMBER OPERATIONS =====


let n = 15.6789;
[Link]([Link](n)); // 16
[Link]([Link](n)); // 15
[Link]([Link](n)); // 16
[Link]([Link](2)); // '15.68'
[Link]([Link](5, 10, 3)); // 10
[Link]([Link](5, 10, 3)); // 3
[Link]([Link](-7)); // 7
[Link]([Link](25)); // 5
[Link]([Link](2, 8)); // 256
[Link]([Link]()); // Random: 0.0 to < 1.0

// ===== OBJECT OPERATIONS =====


let student = { name: 'Wanjiku', age: 19, grade: 'A' };

// Access properties
[Link]([Link]); // 'Wanjiku' (dot notation)
[Link](student['age']); // 19 (bracket notation)

// Modify properties

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

[Link] = 20;
[Link] = 'Nairobi Tech'; // Add new property
delete [Link]; // Remove property

// Iterate
for (let key in student) {
[Link](key + ': ' + student[key]);
}

// Object methods
[Link]([Link](student)); // ['name', 'age', 'school']
[Link]([Link](student)); // ['Wanjiku', 20, 'Nairobi Tech']
[Link]([Link](student));// [['name','Wanjiku'],...]

6.3 Operations on Arrays

// ===== CREATING ARRAYS =====


let fruits = ['mango', 'banana', 'avocado', 'orange'];
let numbers = [10, 20, 30, 40, 50];
let mixed = [1, 'hello', true, null, {name: 'Alice'}];

// ===== ACCESSING ELEMENTS (0-indexed) =====


[Link](fruits[0]); // 'mango'
[Link](fruits[[Link] - 1]); // 'orange' (last element)

// ===== ARRAY PROPERTIES =====


[Link]([Link]); // 4

// ===== ADDING ELEMENTS =====


[Link]('pawpaw'); // Add to END. Returns new length.
[Link]('apple'); // Add to BEGINNING. Returns new length.

// ===== REMOVING ELEMENTS =====


[Link](); // Remove from END. Returns removed item.
[Link](); // Remove from BEGINNING. Returns removed item.
[Link](1, 2); // Remove 2 elements starting at index 1.
[Link](1, 0, 'kiwi'); // Insert 'kiwi' at index 1 (remove 0 items).

// ===== FINDING ELEMENTS =====


[Link]([Link]('banana')); // Returns index or -1
[Link]([Link]('mango')); // true or false
[Link]([Link](f => [Link] > 5)); // First matching element
[Link]([Link](f => f === 'mango')); // Index of first match

// ===== TRANSFORMING ARRAYS =====


// map() - creates new array by transforming each element
let doubled = [Link](n => n * 2); // [20, 40, 60, 80, 100]

// filter() - creates new array with elements that pass a condition


let bigNums = [Link](n => n > 25); // [30, 40, 50]

// reduce() - reduces array to single value


let sum = [Link]((acc, n) => acc + n, 0); // 150

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

// ===== SORTING =====


let letters = ['c', 'a', 'b'];
[Link](); // ['a', 'b', 'c'] - alphabetical
[Link](); // ['c', 'b', 'a']

[Link]((a, b) => a - b); // Ascending numeric sort


[Link]((a, b) => b - a); // Descending numeric sort

// ===== JOINING & SLICING =====


[Link]([Link](' | ')); // 'mango | banana | ...'
[Link]([Link](1, 3)); // New array: elements 1 and 2

// ===== ITERATING =====


// forEach - executes a function for each element
[Link]((fruit, index) => {
[Link](index + ': ' + fruit);
});

// for...of loop
for (let fruit of fruits) {
[Link](fruit);
}

// ===== SPREAD OPERATOR (ES6) =====


let moreFruits = [...fruits, 'grape', 'lemon']; // Combine arrays

// ===== DESTRUCTURING (ES6) =====


let [first, second, ...rest] = fruits;
[Link](first); // 'mango'
[Link](rest); // remaining elements

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

SECTION II: COMPREHENSIVE EXAMINATION


HTML, CSS & JavaScript | TVET CDACC

EXAMINATION INSTRUCTIONS

1. This examination consists of THREE papers:


Paper 1 - Multiple Choice Questions (40 marks)
Paper 2 - Short Answer / Theory Questions (60 marks)
Paper 3 - Practical / Application Questions (100 marks)

2. Answer ALL questions in Paper 1 and Paper 2.


3. In Paper 3, answer any FOUR questions.
4. Write your answers clearly. Show all working where applicable.
5. Time Allowed: Paper 1 & 2 = 2 Hours | Paper 3 = 3 Hours
6. Examiner: TVET CDACC | ©2024

PAPER 1: MULTIPLE CHOICE QUESTIONS


40 Questions | 40 Marks | Circle the correct answer

SECTION A: HTML BASICS & ELEMENTS (Questions 1–15)

1. What does HTML stand for? [1 mark]


A. Hyper Text Markup Language
B. High Transfer Markup Language
C. Hyper Transfer Mode Language
D. Home Tool Markup Language

2. Which of the following is the CORRECT HTML document type declaration? [1 mark]
A. <!DOCTYPE HTML5>
B. <!DOCUMENT html>
C. <!DOCTYPE html>
D. <DOCTYPE = html>

3. Which HTML element contains all the visible content of a web page? [1 mark]
A. <head>
B. <html>
C. <title>
D. <body>

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

4. What is the correct HTML element for the largest heading? [1 mark]
A. <heading>
B. <h6>
C. <h1>
D. <head>

5. Which HTML element creates a hyperlink? [1 mark]


A. <link>
B. <a>
C. <href>
D. <url>

6. An HTML attribute is ALWAYS placed in the: [1 mark]


A. Closing tag
B. Opening tag
C. Body section
D. Head section

7. Which attribute specifies the destination URL of a hyperlink? [1 mark]


A. src
B. link
C. url
D. href

8. Which HTML element is used to embed an image? [1 mark]


A. <picture>
B. <image>
C. <img>
D. <photo>

9. What does the 'alt' attribute in an <img> tag provide? [1 mark]


A. Image alignment
B. Alternate text if image cannot be displayed
C. Image link
D. Image title tooltip

10. Which HTML element creates an UNORDERED list? [1 mark]


A. <list>
B. <ol>
C. <ul>
D. <li>

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

11. What is the correct HTML element for inserting a line break? [1 mark]
A. <break>
B. <lb>
C. <newline>
D. <br>

12. Which HTML tag defines a table row? [1 mark]


A. <td>
B. <tr>
C. <th>
D. <table>

13. Which form attribute specifies WHERE to send form data? [1 mark]
A. method
B. href
C. action
D. target

14. Which input type is used for passwords? [1 mark]


A. type="text"
B. type="hidden"
C. type="secure"
D. type="password"

15. Which HTML5 element defines the main navigation links of a page? [1 mark]
A. <menu>
B. <navigation>
C. <nav>
D. <links>

SECTION B: CSS STYLING (Questions 16–26)

16. What does CSS stand for? [1 mark]


A. Computer Style Sheets
B. Cascading Style Sheets
C. Creative Style System
D. Colourful Style Sheets

17. Which CSS selector targets an element with id='header'? [1 mark]


A. .header
B. *header

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

C. #header
D. id-header

18. How do you apply the colour red to all paragraph elements using CSS? [1 mark]
A. p { color: red; }
B. [Link] = red;
C. <p style=red>
D. paragraph { color: red; }

19. Which CSS property controls the TEXT colour of an element? [1 mark]
A. font-color
B. text-color
C. color
D. foreground-color

20. The CSS Box Model consists of (from inside to outside): [1 mark]
A. Content, Margin, Border, Padding
B. Content, Padding, Border, Margin
C. Border, Padding, Content, Margin
D. Margin, Border, Padding, Content

21. Which type of CSS is written inside a <style> tag in the HTML <head>? [1 mark]
A. Inline CSS
B. External CSS
C. Internal CSS
D. Embedded Script CSS

22. How do you link an external stylesheet named '[Link]' to an HTML page? [1 mark]
A. <style href="[Link]">
B. <css src="[Link]">
C. <link rel="stylesheet" href="[Link]">
D. <script src="[Link]">

23. Which CSS property adds space INSIDE an element's border? [1 mark]
A. margin
B. spacing
C. padding
D. border-space

24. Which CSS pseudo-class applies a style when the user hovers over an element? [1 mark]
A. a:active
B. a:hover

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

C. a:focus
D. a:visited

25. The CSS property 'display: flex' is used to: [1 mark]


A. Hide an element
B. Create a flexible box layout
C. Display text inline
D. Add a border around elements

26. Which CSS property makes text bold? [1 mark]


A. text-style: bold
B. font-weight: bold
C. text-weight: bold
D. font-style: bold

SECTION C: JAVASCRIPT (Questions 27–40)

27. What is the correct way to declare a variable in modern JavaScript? [1 mark]
A. variable name = 5;
B. v name = 5;
C. let name = 5;
D. dim name = 5;

28. Which operator is used for STRICT equality (value AND type) in JavaScript? [1 mark]
A. ==
B. !=
C. ===
D. =

29. What does DOM stand for? [1 mark]


A. Document Object Model
B. Data Output Module
C. Display Object Manager
D. Digital Output Map

30. Which JavaScript method selects an element by its id? [1 mark]


A. [Link]('id')
B. [Link]('id')
C. [Link]('id')
D. [Link]('id')

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

31. What is the output of: [Link](typeof 42)? [1 mark]


A. 'integer'
B. 'float'
C. 'number'
D. 'numeric'

32. Which array method adds an element to the END of an array? [1 mark]
A. shift()
B. unshift()
C. push()
D. add()

33. Which method removes the FIRST element from an array? [1 mark]
A. pop()
B. push()
C. shift()
D. remove()

34. What will: let x = '5' + 3; produce? [1 mark]


A. 8
B. 53
C. '53'
D. Error

35. Which JavaScript method is used to set an attribute on a DOM element? [1 mark]
A. [Link](name, value)
B. [Link](name, value)
C. [Link](name, value)
D. [Link](name, value)

36. Which of the following is a correct JavaScript function declaration? [1 mark]


A. func myFunction() {}
B. function = myFunction() {}
C. function myFunction() {}
D. def myFunction() {}

37. Which array method creates a NEW array with elements that satisfy a condition? [1 mark]
A. sort()
B. reduce()
C. map()
D. filter()

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

38. What is the index of the first element in a JavaScript array? [1 mark]
A. 1
B. 0
C. -1
D. Undefined

39. Which property returns the number of elements in an array? [1 mark]


A. [Link]
B. [Link]
C. [Link]
D. [Link]

40. Which statement correctly assigns a new text to a paragraph with id='msg'? [1 mark]
A. getElementById('msg').value = 'Hello';
B. [Link]('msg').textContent = 'Hello';
C. [Link]('msg').text = 'Hello';
D. document('msg').innerHTML = 'Hello';

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

PAPER 2: SHORT ANSWER & THEORY QUESTIONS


Answer ALL Questions | 60 Marks

Question 1 (10 Marks)


Answer the following questions on HTML Basics:
a) Define HTML and state TWO characteristics that distinguish it from a programming
language. (3 marks)
b) List and briefly explain FOUR HTML terminologies used in web development. (4 marks)
c) State the purpose of the <!DOCTYPE html> declaration and explain what would happen if
it were omitted. (2 marks)
d) What is the difference between the <head> and <body> elements in an HTML document?
(1 mark)

Question 2 (10 Marks)


Answer the following on HTML Elements and Attributes:
e) Differentiate between block-level elements and inline elements in HTML. Give TWO
examples of each. (4 marks)
f) Explain the purpose of the following HTML attributes: (i) href, (ii) src, (iii) alt, (iv) action. (4
marks)
g) Write the HTML code to create a table with TWO columns (Name, Score) and TWO data
rows. Include a table header row. (2 marks)

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

Question 3 (10 Marks)


Answer the following on HTML Forms:
h) List FIVE different values of the type attribute for the <input> element and state the
purpose of each. (5 marks)
i) What is the difference between GET and POST methods in HTML forms? State ONE
advantage of each. (3 marks)
j) Write HTML code for a simple login form containing: a text field for username, a password
field, and a submit button. The form should use the POST method. (2 marks)

Question 4 (10 Marks)


Answer the following on CSS:
k) Describe the THREE ways of applying CSS to an HTML document and state ONE
advantage and disadvantage of each. (6 marks)
l) Explain the CSS Box Model using a labelled diagram or description. (2 marks)
m) Write a CSS rule that: sets all paragraph text to blue, font-size to 16px, and font-family to

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

Arial. (2 marks)

Question 5 (10 Marks)


Answer the following on CSS Selectors and Properties:
n) Explain the difference between a class selector and an ID selector in CSS. (2 marks)
o) Write CSS rules for: (i) an element selector targeting all <h2> tags to be dark blue and
bold; (ii) a class selector .highlight with yellow background and padding of 5px. (3 marks)
p) What is the CSS cascade? Explain how specificity determines which CSS rule is applied
when multiple rules target the same element. (3 marks)
q) State the CSS property and value used to: (i) centre text, (ii) make text italic, (iii) remove
underline from a link. (2 marks)

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

Question 6 (10 Marks)


Answer the following on JavaScript Basics:
r) State FOUR purposes of JavaScript in web development. (4 marks)
s) Explain the difference between var, let, and const in JavaScript. (3 marks)
t) Write a JavaScript function called calculateArea that takes width and height as
parameters and returns the area of a rectangle. Show how you would call this function
and display the result. (3 marks)

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

PAPER 3: PRACTICAL & APPLICATION QUESTIONS


Answer ANY FOUR Questions | 100 Marks (25 each)

Question 1 (25 Marks)


SCHOOL WEBSITE - HTML & CSS PRACTICAL
u) Create a complete HTML file named '[Link]' for a school called 'Uwezo Secondary
School'. The page MUST include: (8 marks) i) A proper HTML5 document structure
with all core elements ii) A <header> with the school name and motto iii) A
<nav> element with links to: Home, About, Academics, Contact iv) A <main> section
with a welcome paragraph
v) Add a <section> containing a table showing Class, Teacher, and Room for three classes
(Form 1, Form 2, Form 3) with appropriate data. (5 marks)
w) Add an <aside> element containing an unordered list of at least three upcoming school
events. (3 marks)
x) Add a <footer> with the school address and copyright notice using the HTML &copy;
entity. (2 marks)
y) Using internal CSS within a <style> tag, style the page as follows: (7 marks) -
Header: dark blue background, white text, centred, padding 20px - Nav links: inline,
white text, no underline, green background, hover changes to dark blue - Table:
border 1px solid grey, border-collapse: collapse, header row with light blue background
- Footer: grey background, centred, small font size - Body: font-family Arial,
background colour #f4f4f4

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

Question 2 (25 Marks)


STUDENT REGISTRATION FORM - HTML FORMS & ATTRIBUTES
z) Create a complete HTML document containing a student registration form. The form must
include the following fields with appropriate attributes: (12 marks) i) Full Name (text
input, required, placeholder) ii) Date of Birth (date input) iii) Gender (radio
buttons: Male, Female, Prefer not to say) iv) County of Origin (dropdown <select>
with at least 5 Kenyan counties as options) v) Course of Study (text input) vi)
Email Address (email input, required) vii) Phone Number (tel input) viii)
Disability Status (checkbox: 'I have a disability') ix) Upload ID/Certificate (file input)
x) Comments/Additional Info (textarea, 5 rows) xi) Submit and Reset buttons
aa) Add appropriate <label> elements for ALL input fields, linked using the for and id
attributes. (4 marks)
bb) Add a <fieldset> with <legend> to group the personal information fields and a separate
fieldset for academic information. (3 marks)
cc) Style the form using internal CSS: inputs should be 100% width, with 8px padding, 1px
border, and 10px margin below each field. Labels should be bold. The submit button
should be green with white text. (6 marks)

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

Question 3 (25 Marks)


EXTERNAL CSS STYLESHEET - RESPONSIVE LAYOUT
dd) Create two files: '[Link]' and '[Link]'. The HTML file should include a
personal portfolio structure with header, nav, main, aside, and footer. Link the external
CSS file properly. (5 marks)
ee) In '[Link]', write CSS for the following: (12 marks) i) A CSS custom property
(variable) for primary colour, secondary colour, and font family ii) Body: use the
custom font variable, background #f0f0f0 iii) Header: primary colour background,
white text, 30px padding, centred iv) Navigation: secondary colour background, links
as inline-blocks, padding, hover effect v) Main content area: 70% width, float left,
white background, padding vi) Aside: 25% width, float right, light grey background,
padding vii) Footer: clear both, dark background, white centred text, padding 20px
viii) An .active class for the current nav link with a different colour ix) h2 inside main:
use the primary colour variable, underline border-bottom
ff) Explain the 'cascade' order of precedence when conflicting CSS rules exist, using an
example. (4 marks)
gg) Define CSS specificity and calculate the specificity of these selectors: (i) p (ii) .intro (iii)
#main (iv) #main [Link]. (4 marks)

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

Question 4 (25 Marks)


JAVASCRIPT DOM MANIPULATION - INTERACTIVE PAGE
hh) Create an HTML file with the following elements, each with an appropriate id: (5 marks)
- A heading <h1> with text 'Welcome, Guest!' - A paragraph <p> with text 'Click the
button to personalise.' - An image <img> with a default source and alt attribute
- A text <input> for the user to type their name - A colour <input> picker -A
button 'Apply Changes'
ii) Write a JavaScript function called applyChanges() that: (10 marks) i) Reads the
user's name from the text input ii) Changes the heading text to 'Welcome, [Name]!'
using DOM iii) Changes the paragraph text content using DOM iv) Changes
the image src based on the name entered (show logic with an if/else) v) Changes
the background colour of the body to the selected colour picker value vi) Disables
the input field and button after clicking using setAttribute
jj) Write a separate JavaScript function that uses a for loop to dynamically create an
unordered list of 5 items and appends it to the body using DOM methods (createElement,
appendChild, textContent). (7 marks)
kk) Explain with an example the difference between innerHTML and textContent DOM
properties and when each should be used. (3 marks)

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

Question 5 (25 Marks)


JAVASCRIPT DATA TYPES & ARRAY OPERATIONS
ll) Write a JavaScript program that: (8 marks) i) Creates an array called students
containing at least 8 student names ii) Adds a new student 'Akinyi Ochieng' to the
END of the array iii) Removes the FIRST student from the array iv) Finds and
displays the index position of 'Wanjiku Mwangi' v) Sorts the array alphabetically
vi) Iterates through the array using forEach and displays each name with its position
number vii) Filters the array to create a new array of names starting with 'A'
viii) Maps the array to create a new array of names in UPPERCASE
mm) Create a JavaScript object called school with properties: name, location,
founded, totalStudents, and an array of subjects. (4 marks) i) Display all properties
using a for...in loop ii) Add a new property: principal iii) Delete the founded
property iv) Use [Link]() to display all property names
nn) Write a JavaScript program that: (8 marks) i) Declares variables of FOUR different
data types and displays each with typeof ii) Demonstrates type conversion (string to
number, number to string, value to boolean) iii) Shows the difference between ==
and === with examples including edge cases (null, undefined, 0, '') iv) Uses Math
methods: [Link]() to simulate a dice roll (1-6), [Link](), [Link]()
oo) Explain what NaN is in JavaScript. Write code to check if a variable is NaN and handle it
appropriately. (5 marks)

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

Question 6 (25 Marks)


INTEGRATED PROJECT - COMPLETE WEBSITE DEVELOPMENT
pp) You are required to create a three-page website for a fictitious Kenyan business. Create:
[Link], [Link], [Link], shared [Link], and [Link]. (5 marks)
qq) [Link] (Home Page) must contain: (6 marks) i) Semantic HTML5 structure with
all layout elements ii) A hero section with a heading, tagline, and a call-to-action
button iii) A features section with three cards (using div elements with classes)
iv) A table showing products/services with prices v) An HTML5 video or audio
element
rr) [Link] must contain a complete contact form with: name, email, subject (dropdown),
message (textarea), phone, preferred contact method (radio buttons), agree to terms
(checkbox), and submit button. Include client-side validation using the required attribute
and appropriate input types. (6 marks)
ss) In [Link], write JavaScript that: (5 marks) i) Displays a greeting based on the time
of day (morning/afternoon/evening) in the header ii) Validates the contact form
before submission (check all required fields, email format, minimum message length of 20
characters) iii) Dynamically adds a new item to the features list using DOM methods
when a button is clicked
tt) In [Link], implement: (3 marks) i) CSS variables for brand colours and font
ii) A mobile-responsive navigation using flexbox iii) A card layout using CSS grid for
the features section

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

PAPER 1: ANSWER KEY


For Examiners Use Only

Q Ans Q Ans Q Ans Q Ans Q Ans


1 A 2 C 3 D 4 C 5 B
6 B 7 D 8 C 9 B 10 C
11 D 12 B 13 C 14 D 15 C
16 B 17 C 18 A 19 C 20 B
21 C 22 C 23 C 24 B 25 B
26 B 27 C 28 C 29 A 30 B
31 C 32 C 33 C 34 C 35 A
36 C 37 D 38 B 39 D 40 B

PAPER 2: MARKING SCHEME GUIDE


For Examiners Use Only

Question 1 – Marking Scheme (10 marks)


• a) HTML defined as HyperText Markup Language (1mk); any TWO: not executed, uses tags,
platform-independent, browser-rendered (2mks)
• b) 1 mark each for any four: Document, Stylesheet, Element, Attribute, Tag, Browser, URL
(4mks)
• c) DOCTYPE tells browser to use HTML5 standard mode (1mk); without it, browser may enter
quirks mode causing inconsistent rendering (1mk)
• d) <head> = metadata not visible to user; <body> = visible page content (1mk)

Question 2 – Marking Scheme (10 marks)


• a) Block-level: takes full width, starts new line. Examples: <div>, <p>, <h1> (2mks). Inline: takes
only needed width, doesn't start new line. Examples: <span>, <a>, <strong> (2mks)
• b) href: hyperlink URL (1); src: source of media/resource (1); alt: image alternative text (1);
action: form submission URL (1)
• c) Correct <table>, <thead>, <tr>, <th>, <tbody>, <td> structure with data (2mks)

Question 3 – Marking Scheme (10 marks)


• a) 1mk each for 5 correct type/purpose pairs: text, password, email, number, checkbox, radio,
submit, date, file, tel (5mks)
• b) GET: appends data to URL, visible, limited size; POST: sends in body, invisible, unlimited
size. 1mk each advantage (3mks)

messages.downloaded_by
lOMoARcPSD|47232591

TVET CDACC | Web Design & Development - HTML, CSS & JavaScript Page —

• c) Correct form tag with method=POST, text input for username, password input, submit button
(2mks)

Question 4 – Marking Scheme (10 marks)


• a) Inline (1mk) - adv: immediate; disadv: not reusable (1mk). Internal (1mk) - adv: page-specific;
disadv: not shareable (1mk). External (1mk) - adv: shared/cached; disadv: extra request (1mk)
= 6mks
• b) Content, Padding, Border, Margin described (2mks)
• c) p { color: blue; font-size: 16px; font-family: Arial; } (2mks)

Question 5 – Marking Scheme (10 marks)


• a) Class (.name): multiple elements, reusable (1mk); ID (#name): unique per page, highest
specificity (1mk)
• b) h2 rule (1.5mks), .highlight rule (1.5mks)
• c) Cascade defined as rules applied in order with specificity/importance determining winner
(2mks); valid example (1mk)
• d) text-align:center; font-style:italic; text-decoration:none (2mks for any 2 correct)

Question 6 – Marking Scheme (10 marks)


• a) Any 4: form validation, dynamic content, event handling, animations, API calls, browser
control (4mks)
• b) var: function-scoped, hoisted, re-declarable (1mk); let: block-scoped, reassignable (1mk);
const: block-scoped, cannot be reassigned (1mk)
• c) function calculateArea(width, height) { return width * height; } (1mk); calling: let area =
calculateArea(5, 3) (1mk); displaying result with [Link] or DOM (1mk)

END OF EXAMINATION PAPER

Total Marks: Paper 1 = 40 | Paper 2 = 60 | Paper 3 = 100 (Best 4 of 6 x 25)


Combined Total: 200 marks
Pass Mark: 50% (100 marks)
Distinction: 75% and above (150+ marks)

©2024 TVET CDACC - Technical and Vocational Education and Training


Curriculum Development Assessment and Certification Council, Kenya

messages.downloaded_by

You might also like