Web Design I – SS2 Digital Technologies Lesson Note (First Term)

A web page is built with two main languages. HTML (HyperText Markup Language) sets out the structure and content of the page, such as headings, paragraphs, images and links. CSS (Cascading Style Sheets) controls how the page looks, including colour, font size, spacing and position. The browser reads both sets of instructions and displays the page.

Behavioural objectives

By the end of the lesson, students should be able to:

• state what HTML and CSS stand for and what each one does;
• explain the difference between an opening tag and a closing tag;
• identify the common tags <h1>, <p>, <img> and <a> and state their uses;
• describe the roles of <!DOCTYPE html>, <html>, <head> and <body> in a basic web page;
• use the building analogy to explain the roles of HTML, CSS and JavaScript.

How does a browser display a website?

When you visit a website like Facebook or Jumia, your browser (Chrome, Safari or Edge) is reading a set of instructions. These instructions tell the computer where to put text, what colours to use, and where to place images.

We build these instructions using two main “languages”: HTML and CSS.

What is HTML?

HTML stands for HyperText Markup Language. Think of HTML as the bones of a human body or the blocks of a house. It defines what is on the page.

• Without HTML, there is no website.
• It handles things like: “This is a heading,” “This is a paragraph,” or “This is a button.”

How does HTML use tags?

HTML uses “tags” to label content. Most tags come in pairs: an opening tag and a closing tag (which has a slash /).

Which common tags should you know?

• <h1>: Used for the biggest, most important heading.
• <p>: Used for a regular paragraph of text.
• <img>: Used to put a picture on the page.
• <a>: Used to create a link to another page.

What is CSS?

CSS stands for Cascading Style Sheets. If HTML is the skeleton, CSS is the skin, clothes and makeup. It defines how the page looks.

Without CSS, every website would look like a plain white piece of paper with black text. CSS allows us to:

• change the colour of text (for example, make a heading blue);
• change the font size;
• add space between elements (padding and margins);
• move a photo to the centre of the screen.

How do HTML, CSS and JavaScript differ? The “building a house” analogy

To help you remember the difference, think of a building project:

1. HTML: The foundation, the walls and the roof (the structure).
2. CSS: The paint on the walls, the curtains and the tiles (the decoration).
3. JavaScript (which we will learn later): The electricity and plumbing. It makes things work, like a doorbell or a light switch (the action).

What is the basic structure of a web page?

Every HTML file follows a specific “skeleton” or order. If you do not follow this, the browser might get confused.

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Site!</h1>
<p>This is my first time learning web design.</p>
</body>
</html>

What does each part do?

• <!DOCTYPE html>: Tells the computer, “I am writing in modern HTML.”
• <html>: The “container” for everything.
• <head>: This is for “behind-the-scenes” information (like the title that appears on the tab at the top).
• <body>: This is where everything the user sees goes (text, images, videos).

Teacher’s tip: When coding, even a tiny mistake, like forgetting a / or a >, can make your whole page look broken. Always double-check your “punctuation”.

How do HTML and CSS compare?

Evaluation

1. If I want to change the background of my website to yellow, which language do I use?
2. What is the difference between an opening tag and a closing tag?
3. Can a website exist with only CSS and no HTML? Why or why not?

Assignment

1. Write out the basic structure of an HTML page. Use “My School” as the title and your own name as the <h1> heading.
2. List the four common tags from this lesson and state what each one is used for.
3. State two things that CSS could change on your page.