Here is the **fully formatted and updated Web Design Theory Guide** (KNEC):

---

# 📘 Web Design Theory Guide with Past Paper Questions (KNEC)

---

## **1. Website & Web Design Basics**

### 📝 Short Notes:

* A **web page** is a single document on the web, while a **website** is a
collection of related web pages under a common domain.
* The **World Wide Web (WWW)** is a service running on the internet, consisting
of web pages accessed via web browsers.
* **Web design** involves planning and creating websites using layout, color,
fonts, and structure to ensure functionality and user experience.
* Characteristics of a good website: fast loading, user-friendly, responsive
design, accessible, clear navigation.

### ❓ Past Paper Questions:

1. Explain the characteristics of a good web design.
2. Outline any four web design principles.
3. State four characteristics of a good website.
4. Differentiate between a website and a web page.
5. Define a website.
6. Outline three components of a website.
7. State four characteristics of a good web page.
8. Outline any four features of a good web page.

---

## **2. Internet, WWW, and Web Browsers**

### 📝 Short Notes:

* The **Internet** is a global network of computers that communicate through
standardized protocols.
* The **WWW** is a service on the internet consisting of interlinked hypertext
documents accessed using web browsers.
* A **web browser** is software used to retrieve and display web pages (e.g.,
Chrome, Firefox).
* A **web server** is a system that delivers content (web pages) to a browser
upon request via HTTP/HTTPS.

### ❓ Past Paper Questions:

1. Differentiate between internet and [WWW](http://WWW).
2. State the role of: (a) Web browser (b) Web server.
3. Define the term “internet.”
4. State three uses of the internet.
5. Outline three services offered on the internet.
6. Name any three search engines.
7. Give two functions of each: (i) Web server (ii) Web browser.
8. State three uses of a web browser.
9. Define the term web browser.

---

## **3. Web Elements and Terminology**

### 📝 Short Notes:

* A **webpage** is a single document viewed in a web browser.
* A **hyperlink** is a clickable link that navigates to another resource or
page.
* **HTTP (HyperText Transfer Protocol)** is used for transmitting web pages;
**HTTPS** is its secure version.
* **Hypertext**: text with embedded links.
* **Hypermedia**: hypertext with multimedia (images, video, etc.).
* A **search engine** is a tool used to locate content on the internet.

### ❓ Past Paper Questions:

1. Define the following terms: (a) Hyperlink (b) Hypertext (c) Web browser (d)
Webpage.
2. Differentiate between HTTP and HTTPS.
3. Define the following: (i) Hypertext (ii) Hyperlink (iii) Hypermedia.
4. Define the term “search engine.”
5. Define the term “internet.”
6. Name three types of hyperlinks.
7. Differentiate between: (i) Web browser vs search engine (ii) Webpage vs
website.
8. State three uses of hyperlinks in a webpage.
9. Name three types of hyperlinks.
10. Define the term web page.

---

## **4. Types of Websites and Services**

### 📝 Short Notes:

* Common types of websites: static, dynamic, e-commerce, blogs, portals, social
networking.
* Services offered via the internet include: email, file sharing, web hosting,
e-commerce, VoIP, cloud services.

### ❓ Past Paper Questions:

1. List any three types of websites.
2. Name four types of websites.
3. State three types of websites.
4. List four types of websites.
5. Outline three services offered on the internet.
6. List four examples of website categories.
7. Outline two categories of websites.
8. Give two categories of websites.

---

## **5. Email and Internet Security**

### 📝 Short Notes:

* **Email** is one of the most common internet services, but it can be prone to
spam, phishing, and other threats.
* **Internet security threats** include malware, phishing, man-in-the-middle
attacks, denial-of-service, and spyware.

### ❓ Past Paper Questions:

1. State four disadvantages of email communication.
2. State four disadvantages of using email.
3. State four internet security threats.
---

## **6. HTML Basics**

### 📝 Short Notes:

* **HTML (HyperText Markup Language)** is the standard markup language for
creating web pages.
* Basic features include: use of tags, nesting, linking, image embedding, and
document structure (head/body).
* HTML is used to define structure and layout of a web page.

### ❓ Past Paper Questions:

1. List four basic features of HTML.
2. List any two features of HTML.
3. Name three features of HTML.
4. Outline four features of HTML.
5. Outline four attributes of HTML.

---

## **7. Web Development Tools & Web Authoring**

### 📝 Short Notes:

* **Web development tools** include text editors (VS Code, Notepad++), graphic
tools (Photoshop), FTP tools, and browsers for testing.
* **Web authoring** tools allow creation of web pages without coding — can be
WYSIWYG (e.g., Dreamweaver) or text-based.
* **Text editors** require manual HTML/CSS coding; WYSIWYG tools offer visual
design.

### ❓ Past Paper Questions:

1. Identify three tools used in web development.
2. State three types of web authoring tools.
3. Define the term “web authoring.”
4. Outline two advantages of WYSIWYG tools.
5. State two differences between text and WYSIWYG editors.
6. List three examples of WYSIWYG tools.
7. Differentiate between web authoring and web publishing.

---

## **8. Web Publishing & Hosting**

### 📝 Short Notes:

* **Web hosting** is the service of providing storage space and access for
websites.
* Websites are published via **FTP** or using hosting control panels.
* A **domain name** is a unique address (e.g., example.com) representing your
website on the web.
* **FTP (File Transfer Protocol)** is used to upload site files to the web host.

### ❓ Past Paper Questions:

1. Name two methods of publishing a website.
2. Define “web hosting.”
3. State the purpose of a domain name.
4. State the use of FTP.
5. Explain two advantages of hosting a website.
6. Differentiate between a domain name and a web host.
---

## **9. Comparative & Definition-Based Questions**

### 📝 Short Notes:

These questions often test clear understanding of web concepts in pairs.

### ❓ Past Paper Questions:

1. Differentiate between:

* Internet and WWW

* Web browser and Search engine
* Webpage and Website
* HTTP and HTTPS
2. Define the following:

* Web browser
* Website
* Webpage
* HTTP

---
PROGRAMMING QUESTIONS
Great! Here are the **questions and complete simple answers** for **Section 13:
HTML Tables and Lists**, including HTML and CSS where needed.

---

## 🔷 13. HTML Tables and Lists

---

### ✅ 1. Table with spacing, caption, merged cells, green row

**Question:** Write an HTML table with cell spacing, a caption, merged cells,
and a green row.

**Answer:**

```html
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: separate;
border-spacing: 10px; /* cell spacing */
width: 60%;
border: 1px solid black;
}
caption {
font-weight: bold;
font-size: 1.2em;
margin-bottom: 10px;
}
.green-row {
background-color: lightgreen;
}
td, th {
border: 1px solid black;
padding: 8px;
 text-align: center;
}
</style>
</head>
<body>
<table>
<caption>Sample Table with Merged Cells and Green Row</caption>
<tr>
<th>Name</th>
<th colspan="2">Details</th> <!-- merged cells horizontally -->
</tr>
<tr class="green-row">
<td>John</td>
<td>25</td>
<td>Male</td>
</tr>
<tr>
<td>Mary</td>
<td>30</td>
<td>Female</td>
</tr>
</table>
</body>
</html>
```

---

### ✅ 2. Formatted table with red header, green cell, and link
**Question:** Write a table with a red header row, one green cell, and a
clickable link inside the table.

**Answer:**

```html
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 50%;
border: 1px solid black;
}
th {
background-color: red;
color: white;
padding: 10px;
border: 1px solid black;
}
td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
.green-cell {
background-color: lightgreen;
}
</style>
</head>
<body>
<table>
<tr>
 <th>Product</th>
<th>Price</th>
<th>Link</th>
</tr>
<tr>
<td class="green-cell">Laptop</td>
<td>$1000</td>
<td><a href="https://example.com" target="_blank">Buy Now</a></td>
</tr>
<tr>
<td>Phone</td>
<td>$600</td>
<td><a href="https://example.com" target="_blank">Buy Now</a></td>
</tr>
</table>
</body>
</html>
```

---

### ✅ 3. Table with spacing of 10 pixels for content and borders

**Question:** Write a table with 10 pixels spacing for cell content and borders.

**Answer:**

```html
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: separate;
border-spacing: 10px; /* spacing between cells */
width: 50%;
border: 2px solid black;
}
td, th {
border: 1px solid black;
padding: 10px; /* spacing inside cells */
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>Kenya</td>
<td>Nairobi</td>
</tr>
<tr>
<td>Uganda</td>
<td>Kampala</td>
</tr>
</table>
</body>
</html>
```
---

### ✅ 4. Display list of intakes grouped by month

**Question:** Display a list of intakes grouped by month (use an unordered or
ordered list).

**Answer:**

```html
<!DOCTYPE html>
<html>
<body>
<h3>Intakes by Month</h3>
<ul>
<li>January
<ul>
<li>Intake 1</li>
<li>Intake 2</li>
</ul>
</li>
<li>March
<ul>
<li>Intake 3</li>
</ul>
</li>
<li>July
<ul>
<li>Intake 4</li>
<li>Intake 5</li>
<li>Intake 6</li>
</ul>
</li>
</ul>
</body>
</html>
```

---

### ✅ 5. Display description list (categories, types of transportation)

**Question:** Display a description list showing categories and types of
transportation.

**Answer:**

```html
<!DOCTYPE html>
<html>
<body>
<h3>Types of Transportation</h3>
<dl>
<dt>Land</dt>
<dd>Cars, Buses, Bikes</dd>

<dt>Water</dt>
<dd>Boats, Ships</dd>

<dt>Air</dt>
<dd>Planes, Helicopters</dd>
</dl>
</body>
</html>
```

---

If you'd like, I can also help with explanations of each code or move on to
other sections!