Web Design I SS2 Digital Technologies Lesson Note
Download Lesson NoteTopic: Web Design I
When you visit a website like Facebook or Jumia, your browser (Chrome, Safari, or Edge) is actually reading a set of instructions. These instructions tell the computer where to put text, what colors to use, and where to place images.
We build these instructions using two main “languages”: HTML and CSS.
HTML: The Skeleton (Structure)
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 HTML Looks (Tags)
HTML uses “Tags” to label content. Most tags come in pairs: an Opening Tag and a Closing Tag (which has a slash /).
Common Tags to 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.
CSS: The Clothing (Style)
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 color of text (e.g., make a heading Blue).
- Change the font size.
- Add space between elements (Padding and Margins).
- Move a photo to the center of the screen.
The “Building a House” Analogy
To help you remember the difference, think of a building project:
- HTML: The foundation, the walls, and the roof. (The structure).
- CSS: The paint on the walls, the curtains, and the tiles. (The decoration).
- JavaScript (which we will learn later): The electricity and plumbing. It makes things work, like a doorbell or a light switch. (The action).
Basic Structure of a Web Page
Every HTML file follows a specific “skeleton” or order. If you don’t follow this, the browser might get confused.
HTML
<!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>
The Breakdown:
- <!DOCTYPE html>: Tells the computer “Hey, I’m writing in modern HTML!”
- <html>: The “container” for everything.
- <head>: This is for “behind-the-scenes” info (like the title that appears on the tab at the top).
- <body>: This is where everything the user sees goes (text, images, videos).
Summary Comparison Table
| Feature | HTML | CSS |
| Full Name | HyperText Markup Language | Cascading Style Sheets |
| Role | Content & Structure | Appearance & Design |
| Analogy | The Skeleton / The Walls | The Clothes / The Paint |
| Example | <h1>Hello</h1> | h1 { color: red; } |
Class Quiz / Discussion
- If I want to change the background of my website to Yellow, which language do I use?
- What is the difference between an Opening Tag and a Closing Tag?
- Can a website exist with only CSS and no HTML? Why or why not?
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”!
First Term Digital Technologies Lesson Notes for Other Topics
Data Protection and Backup System
Explore lesson notes covering all topics.
Internet of Things (IoT) Application
Explore lesson notes covering all topics.
Cloud and Virtualization
Explore lesson notes covering all topics.
Networking II
Explore lesson notes covering all topics.
Software Development Lifecycle
Explore lesson notes covering all topics.
Advanced Programming II
Explore lesson notes covering all topics.
Advanced Programming I
Explore lesson notes covering all topics.
Web Design II
Explore lesson notes covering all topics.
Web Publishing and Hosting
Explore lesson notes covering all topics.
Advanced Word Processing Tools
Explore lesson notes covering all topics.
Advanced Spreadsheet I
Explore lesson notes covering all topics.
Advanced Spreadsheet II
Explore lesson notes covering all topics.
Advanced Presentation Tools
Explore lesson notes covering all topics.
History and Evolution of Digital Technologies
Explore lesson notes covering all topics.
Introduction to Renewable Energy
Explore lesson notes covering all topics.
Lesson Notes for Other Classes
Basic 1 Lesson Note
The complete lesson note to guide your studies.
Basic 2 Lesson Note
The complete lesson note to guide your studies.
Basic 3 Lesson Note
The complete lesson note to guide your studies.
Basic 4 Lesson Note
The complete lesson note to guide your studies.
Basic 5 Lesson Note
The complete lesson note to guide your studies.
Basic 6 Lesson Note
The complete lesson note to guide your studies.