MICHUKI NATIONAL POLYTECHNIC
WEB DEVELOPMENT AND DESIGN
TRAINERS GUIDE
CLASS: SHORT_CS/WDD/024DEC
SECTION A
1. Define the following terms: (4 Marks)
o i. HTML: Hypertext Markup Language is the standard language used to create
and design webpages by structuring content and elements.
o ii. Web Browser: A software application used to access, retrieve, and display
web content from the internet (e.g., Chrome, Firefox).
o iii. Website: A collection of interlinked webpages hosted on a server and
accessed via a domain name.
o iv. Static Website: A website with fixed content that does not change
dynamically and is the same for all users.
2. Identify the parts of the URL: https://www.must.ac.ke/home (4 Marks)
o Protocol: https
o Subdomain: www
o Domain name: must.ac.ke
o Path: /home
3. Name the core components of the Bootstrap framework: (3 Marks)
o CSS (for styling)
o JavaScript (for interactivity)
o Responsive Grid System
4. State any two types of HTML lists: (2 Marks)
o Ordered List (<ol>)
o Unordered List (<ul>)
5. State four attributes of a table: (4 Marks)
o border: Specifies the width of the table border.
o cellpadding: Defines the space inside table cells.
o cellspacing: Defines the space between table cells.
o width: Sets the width of the table.
6. Describe three components of web design: (6 Marks)
o Layout: Defines the structure and placement of elements on a webpage.
o Typography: Focuses on font styles, sizes, and readability.
o Color Scheme: Establishes visual appeal and consistency using appropriate
colors.
7. Example of a <select> dropdown with two options: (2 Marks)
html
Copy code
<select name="options">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
SECTION B
1. a) Explain with clear examples HTML tags for the following:
o i. An Image:
html
Copy code
<img src="image.jpg" alt="Description of image">
o ii. A Link:
html
Copy code
<a href="https://example.com">Click Here</a>
o iii. A Heading:
html
Copy code
<h1>Main Heading</h1>
o iv. A Paragraph:
html
Copy code
<p>This is a sample paragraph.</p>
o v. A Table:
html
Copy code
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
</tr>
</table>
2. b) Five Principles of Good Web Design: (10 Marks)
o Responsiveness: Ensure the website is accessible and displays well on various
devices and screen sizes.
o Navigation: Use intuitive menus and clear navigation paths to enhance user
experience.
o Consistency: Maintain a uniform design style throughout the website for
professionalism.
o Fast Loading Speed: Optimize content and assets to reduce loading times.
o Accessibility: Ensure the website is usable by people with disabilities, including
support for screen readers and keyboard navigation.
2. a) Describe the marquee as used in HTML: (2 Marks)
The <marquee> tag is used to create scrolling text or images on a webpage. It is now
deprecated but can still be used in some cases. Example:
html
Copy code
<marquee behavior="scroll" direction="left">Welcome to my
website!</marquee>
b) Differentiate between external CSS and internal CSS: (2 Marks)
o External CSS: Styles are written in a separate .css file and linked to the HTML
document using <link>.
o Internal CSS: Styles are written within the <style> tag inside the <head>
section of the HTML document.
c) Three scripting languages used in website design: (6 Marks)
o JavaScript: Used for client-side interactivity (e.g., form validation, animations).
o PHP: A server-side scripting language used for dynamic web content (e.g., login
systems).
o Python: Used for backend web development with frameworks like Django and
Flask.
