Diploma in Information Communication Technology (ICT)
Course ContentHTML/CSS
Habari Mwanafunzi! Welcome to the World of Web Design!
Karibu sana to your first lesson in Internet Based Programming! Think about the websites you visit every day, like the Nation news site or Jumia. They look so different, right? Some are colourful and busy, others are simple and clean. Ever wondered how they are built?
Today, you're going to learn the secret. Building a website is like building a house. First, you need a strong structure – the foundation, walls, and roof. This is HTML. Then, you need to make it look beautiful – the paint, the furniture, the decorations. This is CSS. Together, they create every single website you see. Let's start building!
HTML: The Strong Foundation (Mfumo) of Your Website
HTML stands for HyperText Markup Language. Don't worry about the long name! Just think of it as the skeleton of your webpage. It tells the web browser (like Chrome or Firefox) what each piece of content is. Is it a heading? A paragraph? A list of items? HTML gives your content meaning and structure.
Kenyan Example: Think of building a simple kibanda (a small shop). You first put up the wooden posts (the main structure), then the walls (mabati or wood), and finally the roof. This is your HTML. Without this structure, you just have a pile of materials on the ground.
HTML uses "tags" to define elements. Tags are like labels you put on your content. They usually come in pairs: an opening tag <tag> and a closing tag </tag>.
<h1>- The main heading of a page. (There are also<h2>,<h3>, etc.)<p>- A paragraph of text.<img>- An image. (This one is special and doesn't need a closing tag!)<a>- A link to another page.<ul>- An unordered list (like this one!), with each item in a<li>tag.
Let's create a simple page about a classic Kenyan meal!
<!DOCTYPE html>
<html>
<head>
<title>My Favourite Meal</title>
</head>
<body>
<h1>Ugali and Sukuma Wiki</h1>
<p>This is the most famous meal in Kenya. It is simple, healthy, and delicious. Ugali is a maize flour cake, and sukuma wiki is collard greens.</p>
<h3>Ingredients:</h3>
<ul>
<li>Maize Flour</li>
<li>Water</li>
<li>Sukuma Wiki (Collard Greens)</li>
<li>Onions and Tomatoes</li>
</ul>
</body>
</html>Image Suggestion: [A bright, clean photo of a simple wireframe of a webpage. On the left, show basic gray boxes and lines labeled "h1", "p", "ul", representing the HTML structure. On the right, a sketch of a simple house frame with labels "Foundation", "Walls", "Roof". The style should be educational and clear, like a textbook diagram.]
CSS: Adding the Style and Colour (Mapambo)!
Now that we have our structure, it's time to make it look good! This is where CSS, or Cascading Style Sheets, comes in. CSS is the language of design. It lets you add colours, change fonts, add spacing, and create layouts.
Kenyan Example: If HTML is the basic structure of a matatu, then CSS is all the amazing things that make it unique! The colourful graffiti paint, the loud music system, the flashy LED lights, and the comfortable custom seats. That's all CSS! It's the personality and style.
CSS works by selecting an HTML element and then applying a "rule" or "style" to it. You create these rules in a separate file (e.g., styles.css) and then link it to your HTML file. This keeps your structure (HTML) separate from your presentation (CSS), which is very good practice!
Here's a diagram showing how CSS "targets" HTML elements to style them:
+----------------------+ Applies Styles To +-----------------+
| | ------------------------> | |
| styles.css | | index.html |
| | <------------------------ | |
| h1 { color: blue; } | (Linked inside) | <h1>Hello</h1> |
| | | |
+----------------------+ +-----------------+
Let's add some style to our page about Ugali. First, we link the stylesheet in our HTML file inside the <head> section. Then, we write the CSS rules in a new file called styles.css.
Add this line to your HTML inside <head>:
<link rel="stylesheet" href="styles.css">Now, create a new file, styles.css, with this content:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4; /* A light grey background */
}
h1 {
color: #4CAF50; /* A nice green colour, like sukuma! */
text-align: center;
}
h3 {
color: #FF5722; /* An orange colour */
}
ul {
list-style-type: square;
background-color: #ffffff; /* White background for the list */
padding: 20px;
}If you save both files and open the HTML file in your browser, you will see a much more colourful and organised page! You have just combined structure and style. Hongera!
Understanding Space: The CSS Box Model
This is a very important concept! Every single element on your page is a rectangular box. The CSS Box Model helps us control the space around and inside these boxes. It has four parts:
- Content: The actual text, image, or content inside the box.
- Padding: The space between the content and the border. It's like the empty space inside a box protecting the item.
- Border: The line that goes around the padding and content.
- Margin: The space outside the border. It pushes other elements away.
Here is a visual to help you understand:
-------------------------------------------------
| Margin |
| ----------------------------------------- |
| | Border | |
| | --------------------------------- | |
| | | Padding | | |
| | | +-----------------------+ | | |
| | | | | | | |
| | | | CONTENT | | | |
| | | | (e.g. Text) | | | |
| | | | | | | |
| | | +-----------------------+ | | |
| | | | | |
| | --------------------------------- | |
| | | |
| ----------------------------------------- |
| |
-------------------------------------------------
We can use math to calculate the total space an element takes up. This is crucial for creating perfect layouts.
// Let's say we have a box with these CSS properties:
width: 300px;
padding: 10px; // This applies 10px to all four sides
border: 2px solid black; // 2px on all four sides
margin: 15px; // 15px on all four sides
// CALCULATION FOR TOTAL WIDTH:
Total Width = (width) + (left padding + right padding) + (left border + right border) + (left margin + right margin)
Total Width = 300px + (10px + 10px) + (2px + 2px) + (15px + 15px)
Total Width = 300px + 20px + 4px + 30px
Total Width = 354px
// This box will occupy 354 pixels of horizontal space on the page.
Image Suggestion: [An infographic showing a beautifully framed painting of Maasai warriors. The painting itself is labeled "Content". The mat board between the painting and the frame is labeled "Padding". The wooden picture frame is labeled "Border". The space on the wall between this frame and another nearby painting is labeled "Margin". Use bright, vibrant Kenyan-inspired colors.]
Wakati wako wa Kujaribu! (Your Time to Try!)
Now it's your turn to practice. Knowledge becomes skill only through practice!
Your Task: Create a new HTML and CSS file. Your goal is to make a simple webpage about your home county.
- Create an HTML file named
mycounty.html. - It should have a main heading (
<h1>) with the name of your county. - Add a paragraph (
<p>) describing something you love about your county. - Add a sub-heading (e.g.,
<h3>) that says "Famous Places". - Below it, add a list (
<ul>) of at least three famous places. - Now, create a CSS file named
county_style.cssand link it to your HTML. - In your CSS, make the main heading (
<h1>) blue. - Change the font of the paragraph. A good one to try is
font-family: Georgia, serif;. - Give your list a light grey background colour and 15px of padding.
Don't be afraid to experiment! Try changing other colours and sizes. This is how you learn best.
Hongera! You've Taken Your First Steps!
You have done an amazing job today! You've learned the two most fundamental languages of the web: HTML for the structure and CSS for the style. You now understand how every website is built from these two core technologies.
This is just the beginning of an exciting journey. Keep practicing, stay curious, and don't be afraid to make mistakes. Every expert was once a beginner. Kazi nzuri, and I look forward to seeing what you will build next!
Pro Tip
Take your own short notes while going through the topics.
