Bachelor of Science in Computer Science
Course ContentHTML5/CSS3
Habari Mwanafunzi! Ready to Build the Web, Kenyan Style?
Imagine you are building a house, a proper mjengo. What do you need first? You need the foundation, the walls, the roof – the structure, right? That is HTML5. It’s the skeleton of every website you see. But a house with just grey bricks is boring, si ndio? You need to add paint (rangi), beautiful windows, and maybe a nice garden. That is CSS3. It’s the style, the decoration, the fashion that makes a website look amazing!
Today, we are going to be both the fundi (builder) and the artist. We will learn how to build the structure with HTML5 and make it beautiful with CSS3. Let's begin!
Image Suggestion: A vibrant, colourful digital illustration showing a house being built. On one side, it's a grey wireframe structure labeled 'HTML5'. On the other side, a painter is adding bright colours and decorations, labeled 'CSS3'. In the background, there's a backdrop of the Nairobi skyline.
Part 1: HTML5 - The Skeleton of Your Website (Mfumo wa Nyumba)
HTML stands for HyperText Markup Language. It uses 'tags' to structure content. Think of tags like different types of building blocks. HTML5 introduced new, smarter tags called semantic tags. They tell the browser exactly what each part of your website is for, just like you have a room for cooking (kitchen) and a room for sleeping (bedroom).
<header>: The top part of your site, like the mabati roof. Usually has the logo and main title.<nav>: The navigation links, like the corridors that connect rooms. (Home, About, Contact).<main>: The main content area, the biggest room in the house!<section>: A specific section within the main content, like the living room area.<article>: A self-contained piece of content, like a single news story or a blog post.<aside>: Sidebar content. Information that is related but not the main focus, like a small store (duka) beside the main house.<footer>: The bottom part of the site, the foundation. Usually has copyright info and extra links.
Let's create a simple webpage for a local business, "Mama Benta's Kienyeji Eggs". Here is the basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mama Benta's Kienyeji Eggs</title>
</head>
<body>
<header>
<h1>Welcome to Mama Benta's Fresh Kienyeji Eggs</h1>
</header>
<nav>
<a href="#">Home</a> |
<a href="#">Prices</a> |
<a href="#">Contact Us</a>
</nav>
<main>
<h2>The Best Eggs in Town!</h2>
<p>We sell fresh, organic kienyeji eggs, delivered straight to you.</p>
<h3>Our Prices:</h3>
<ul>
<li>1 Tray (30 eggs) - KSh 450</li>
<li>Half Tray (15 eggs) - KSh 250</li>
</ul>
</main>
<footer>
<p>© 2024 Mama Benta. All Rights Reserved.</p>
</footer>
</body>
</html>
Part 2: CSS3 - Adding the Style and Rangi! (Mapambo)
CSS stands for Cascading Style Sheets. It's how we add colour, change fonts, add spacing, and make our website look professional. We link our CSS file to our HTML file so the "paint" knows which "house" to decorate.
A core concept in CSS is the Box Model. Every element on your page is a rectangular box. This box is made of four parts:
+---------------------------------------------------+
| Margin |
| +-------------------------------------------+ |
| | Border | |
| | +-----------------------------------+ | |
| | | Padding | | |
| | | +---------------------------+ | | |
| | | | | | | |
| | | | Content | | | |
| | | | (e.g., text) | | | |
| | | | | | | |
| | | +---------------------------+ | | |
| | | | | |
| | +-----------------------------------+ | |
| | | |
| +-------------------------------------------+ |
| |
+---------------------------------------------------+
- Content: The text, image, or other content.
- Padding: The space between the content and the border. Like the space between you and the wall inside a room.
- Border: The wall itself.
- Margin: The space outside the border. The space between your house and your neighbour's house.
Let's do some math! Understanding the box model is key. If you want to know the total space an element takes up, you must add everything together.
-- Let's say we have a box with these CSS properties:
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
-- The total width calculation is:
Total Width = (width) + (padding-left + padding-right) + (border-left + border-right)
Total Width = 200px + (20px + 20px) + (5px + 5px)
Total Width = 200px + 40px + 10px
Total Width = 250px
-- The total horizontal space it occupies on the page (including outside space) is:
Total Space = Total Width + (margin-left + margin-right)
Total Space = 250px + (10px + 10px)
Total Space = 270px
Now, let's add some rangi to Mama Benta's page. We'll create a file called style.css and add the following code. We can use colours inspired by our beautiful Kenyan flag!
/* style.css */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
}
header {
background-color: #000000; /* Black */
color: #FFFFFF; /* White */
padding: 10px;
text-align: center;
}
main {
border: 2px solid #008000; /* Green */
padding: 15px;
}
h1, h2, h3 {
color: #BB0000; /* Red */
}
footer {
text-align: center;
margin-top: 30px;
font-size: 0.8em;
}
To connect this CSS to our HTML, we add one line in the <head> section of our HTML file:
<head>
<meta charset="UTF-8">
<title>Mama Benta's Kienyeji Eggs</title>
<link rel="stylesheet" href="style.css"> <!-- This is the magic line! -->
</head>
Real-World Story: A student named Kamau from Nakuru loved photography. He took amazing photos of wildlife at the National Park. But nobody knew about his talent. Using the HTML and CSS he learned, he built a simple one-page portfolio website. He put his best 10 photos on it, a small paragraph about himself (HTML), and used CSS to make the background dark grey to make his photos stand out. He shared the link with a local tour company, and they were so impressed they hired him to take photos for their new brochures! From simple code to a real job. That is the power you are learning.
Your Turn! Kazi ya Kujikaza (Your Challenge)
Now it's your chance to be the fundi and the artist. Your challenge is to create a simple, one-page website for your favourite local spot. It could be a kibanda that sells the best chapo, a matatu Sacco with the coolest graffiti, or your local football team.
- Create an
index.htmlfile with the basic structure (header, main, footer). - Give it a main heading (
<h1>) and a short paragraph (<p>) about your chosen topic. - Add a list (
<ul>) of at least three things (e.g., top 3 menu items, best matatu routes, star players). - Create a
style.cssfile and link it. - In your CSS, change the background colour of the
<body>, the text colour of the<h1>, and add a border around your<main>content.
Don't be afraid to experiment with different colours and values. The web is your canvas. Kila la kheri! (All the best!)
Pro Tip
Take your own short notes while going through the topics.
