This beginner-friendly course introduces learners to the fundamentals of HTML (HyperText Markup Language), the standard language used to create web pages. Students will learn how websites are structured and how to build simple web pages from scratch.
Upon successful completion of the course and assessments, participants will receive a Certified Introduction to HTML Level 1 certificate.
Imagine a website as a digital book that lives on the internet. Just like a book has pages, a website has web pages. You can visit websites using a web browser such as Chrome, Edge, Firefox, or Safari.
Think of the internet as a giant city. Every website is a house in that city. The website address is the house address that helps people find it.
Web development means creating websites. The people who build websites are called web developers.
A web developer is like a builder who builds houses, but instead of houses, they build websites.
This is the part users can see and click on. It includes text, pictures, buttons, and menus.
This is the hidden part that makes everything work. Users cannot see it directly.
Think of a bicycle. The colorful parts you see are the frontend. The gears and chains that help it move are the backend.
HTML stands for HyperText Markup Language. It is the language used to create web pages.
HTML tells the browser:
Imagine building a house with LEGO blocks. HTML is like the LEGO pieces that create the structure of the house.
You only need two things:
A code editor is like a notebook where programmers write code.
Let's create our first web page.
<html> <body> Hello World! </body> </html>
Save the file as mypage.html and open it in a browser.
You will see:
Answer the following questions:
Create a file called aboutme.html and type the following:
<html> <body> My name is ________. I am ______ years old. I love __________. </body> </html>
Save the file and open it in your browser.
Draw a picture showing:
An HTML document is a file that tells a web browser what to show on a webpage. Think of it as a recipe for baking a cake. The recipe tells you what ingredients to use and what steps to follow. In the same way, an HTML document tells the browser what to display.
Imagine building a toy house. Every toy house needs a foundation, walls, a roof, and rooms. An HTML document also has parts that work together to build a webpage.
HTML uses special words called tags. Tags tell the browser what each piece of content is.
Most tags come in pairs:
<tag> Content goes here </tag>
<p>I love football.</p>
The <p> tag means paragraph.
Think of tags as sandwich bread. One slice starts the sandwich and another slice ends it. The filling is the content in the middle.
Every HTML page follows a structure.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
Welcome to my webpage!
</body>
</html>
The head section is like the cover page of a school notebook. It contains information about the webpage.
<head>
<title>My School Website</title>
</head>
The title appears on the browser tab.
If your title is "My School Website", that name will appear at the top of the browser tab.
The body section contains everything visitors can see.
<body>
Hello Everyone!
</body>
Whatever is inside the body appears on the webpage.
If a website is a house, the body is all the furniture, pictures, and decorations inside it.
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
My name is Tunde.
I am 10 years old.
I love playing football.
</body>
</html>
Save this file as aboutme.html and open it in your browser.
Match the HTML part with its meaning:
| HTML Part | Meaning |
|---|---|
| <html> | _____________ |
| <head> | _____________ |
| <body> | _____________ |
| <title> | _____________ |
Create a webpage called myfamily.html.
Add:
Fill in the missing tags:
<!DOCTYPE html>
<_____>
<head>
<title>My Page</title>
</head>
<_____>
Hello World!
</_____>
</html>
Create a webpage called myschool.html.
Include:
In the last module, we learned how an HTML page is organized. In this module, we will learn how to add words and sentences to our webpage. We will learn about headings, paragraphs, line breaks, and text formatting.
Headings are titles used to organize information on a webpage. Just like a book has chapter titles, a webpage uses headings.
HTML has six heading levels:
<h1>Biggest Heading</h1> <h2>Second Biggest Heading</h2> <h3>Third Biggest Heading</h3> <h4>Fourth Heading</h4> <h5>Fifth Heading</h5> <h6>Smallest Heading</h6>
Think of headings as signboards in a shopping mall. They help people know where to go and what they are reading.
A paragraph is a group of sentences. In HTML, we use the <p> tag for paragraphs.
<p>My name is Tolu.</p> <p>I love playing football.</p>
Imagine telling a story. Each new idea goes into a new paragraph.
Sometimes we want text to move to a new line. We use the <br> tag.
My name is Tolu.<br> I am 10 years old.<br> I love football.
The browser will show each sentence on a new line.
Think of pressing the Enter key on your keyboard. The <br> tag does the same thing.
A horizontal line separates sections of a webpage. We use the <hr> tag.
<h1>My Hobbies</h1> <hr> <p>I enjoy football and reading books.</p>
The browser will draw a line across the page.
Bold text is darker and stronger. We use the <strong> tag.
<p>My favourite subject is <strong>Mathematics</strong>.</p>
My favourite subject is Mathematics.
Italic text leans to one side. We use the <em> tag.
<p>I love <em>football</em>.</p>
I love football.
Comments are notes written for programmers. Visitors cannot see comments on the webpage.
<!-- This is my webpage -->
Think of comments as secret notes written in your notebook. Only the person reading the notebook can see them.
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
<h1>About Me</h1>
<p>My name is Tolu.</p>
<p>I am 10 years old.</p>
<p>I love <strong>football</strong> and
<em>video games</em>.</p>
<hr>
<p>Thank you for visiting my page.</p>
</body>
</html>
Write the correct HTML tag:
Create a webpage called myhobbies.html.
Include:
Fix the missing tags below:
______ My School ______ ______ I love learning science. ______ ______ ______ My favourite subject is Mathematics. ______
Use:
Create a webpage called aboutme.html.
Add:
In the previous module, we learned how to add text, headings, and paragraphs to a webpage.
In this module, we will learn how to create lists and links. Lists help us organize information, while links help us move from one webpage to another.
A list is a collection of items written one after another.
For example, when your teacher writes school supplies on the board, that is a list.
Imagine making a shopping list with your parents. Lists help us keep things organized.
An unordered list uses bullet points. We create it using the <ul> tag.
<ul>
<li>Football</li>
<li>Basketball</li>
<li>Swimming</li>
</ul>
An ordered list uses numbers. We create it using the <ol> tag.
<ol>
<li>Wake Up</li>
<li>Brush Teeth</li>
<li>Go To School</li>
</ol>
Think of an ordered list as instructions for building a toy. The steps must be followed in the correct order.
A nested list is a list inside another list.
<ul>
<li>Fruit
<ul>
<li>Apple</li>
<li>Orange</li>
</ul>
</li>
</ul>
Nested lists help us group similar items together.
A hyperlink is a clickable piece of text that takes you to another webpage.
We create hyperlinks using the <a> tag.
<a href="https://www.google.com"> Visit Google </a>
Think of a hyperlink as a magical door. When you click it, it takes you somewhere else.
External links take visitors to another website.
<a href="https://www.wikipedia.org"> Visit Wikipedia </a>
Clicking the link opens the Wikipedia website.
Internal links connect pages within your own website.
<a href="about.html"> About Me </a>
This link opens another page inside your website.
Imagine a school with many classrooms. Internal links are hallways that connect one classroom to another.
HTML can create links that open an email program.
<a href="mailto:teacher@example.com"> Send Email </a>
Clicking the link opens an email window.
<!DOCTYPE html>
<html>
<head>
<title>My Favourite Things</title>
</head>
<body>
<h1>My Favourite Things</h1>
<h2>Favourite Foods</h2>
<ul>
<li>Rice</li>
<li>Pizza</li>
<li>Chicken</li>
</ul>
<h2>My Daily Routine</h2>
<ol>
<li>Wake Up</li>
<li>Go To School</li>
<li>Do Homework</li>
</ol>
<a href="https://www.google.com">
Visit Google
</a>
</body>
</html>
Fill in the blanks:
Create a webpage called myfoods.html.
Add:
Fix the missing tags below:
_____
_____ Football _____
_____ Basketball _____
_____ Tennis _____
_____
Use:
Create a webpage called myschool.html.
Include:
So far, we have learned how to add text, headings, lists, and links to a webpage.
In this module, we will learn how to add pictures, music, and videos to make our webpages more fun and exciting.
An image is a picture displayed on a webpage. Pictures help visitors understand information more easily.
For example, instead of describing a dog, you can simply show a picture of a dog.
Think of a webpage as a storybook. Images are the colorful illustrations that make the story interesting.
HTML uses the <img> tag to display images.
<img src="dog.jpg" alt="A cute dog">
The browser needs to know where the picture is saved. The location of the image is called the image path.
<img src="football.jpg" alt="Football">
This means the image named football.jpg is saved in the same folder as the HTML file.
Imagine sending a friend to your classroom. You must tell them exactly where it is. The image path tells the browser where to find the picture.
We can make images bigger or smaller using width and height.
<img src="dog.jpg"
alt="Dog"
width="200"
height="150">
Width controls how wide the image is. Height controls how tall the image is.
The alt attribute describes the image.
<img src="cat.jpg"
alt="A white cat sleeping">
If the image cannot be displayed, the browser shows the description.
It also helps people who use screen readers understand the picture.
Audio allows visitors to listen to sounds or music.
<audio controls>
<source src="song.mp3">
</audio>
The controls attribute creates play and pause buttons.
Imagine adding your favorite song to your webpage. Visitors can listen to it while reading.
Videos can also be displayed on a webpage.
<video width="300" controls>
<source src="video.mp4">
</video>
Visitors can play, pause, and watch the video.
Imagine creating a webpage about football and adding a video showing your favorite football match.
<!DOCTYPE html>
<html>
<head>
<title>My Favorite Animal</title>
</head>
<body>
<h1>My Favorite Animal</h1>
<p>I love dogs.</p>
<img src="dog.jpg"
alt="A happy dog"
width="250">
</body>
</html>
Fill in the blanks:
Create a webpage called mypet.html.
Include:
Fix the missing parts below:
<img _____="cat.jpg"
_____="A cute cat"
width="200">
What attributes are missing?
Create a webpage called myfavoriteanimal.html.
Add:
Create a webpage about your favorite football team, cartoon character, or superhero.
Include:
In the previous module, we learned how to add pictures, audio, and videos to our webpages.
In this module, we will learn how to organize information using tables. Tables help us arrange information into rows and columns, just like a school timetable or a football score sheet.
A table is a way of organizing information into rows and columns.
You see tables every day in school timetables, examination results, attendance registers, and football league tables.
Imagine a chocolate bar divided into small squares. Each square is like a cell in a table.
We use the <table> tag to create a table.
<table> </table>
Everything inside the table tag becomes part of the table.
Rows go from left to right. We use the <tr> tag to create rows.
<table>
<tr>
</tr>
</table>
Think of rows as seats in a classroom. Students sit side by side in the same row.
Cells hold the information inside a table. We use the <td> tag for table data.
<table border="1">
<tr>
<td>Tolu</td>
<td>10</td>
</tr>
</table>
| Tolu | 10 |
Table headings tell us what information is in each column. We use the <th> tag.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Tolu</td>
<td>10</td>
</tr>
</table>
| Name | Age |
|---|---|
| Tolu | 10 |
Let's create a simple school timetable.
<table border="1">
<tr>
<th>Time</th>
<th>Subject</th>
</tr>
<tr>
<td>8:00 AM</td>
<td>Mathematics</td>
</tr>
<tr>
<td>9:00 AM</td>
<td>English</td>
</tr>
</table>
Tables are like shelves in a library. Each shelf stores information in an organized way.
Sometimes we want one cell to take up more than one column. We use the colspan attribute.
<table border="1">
<tr>
<th colspan="2">
My Report Card
</th>
</tr>
</table>
The heading stretches across two columns.
Sometimes we want one cell to cover more than one row. We use the rowspan attribute.
<td rowspan="2">
Football
</td>
This cell will cover two rows.
<!DOCTYPE html>
<html>
<head>
<title>My Class List</title>
</head>
<body>
<h1>My Class List</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Favourite Subject</th>
</tr>
<tr>
<td>Tolu</td>
<td>Science</td>
</tr>
<tr>
<td>Amina</td>
<td>Mathematics</td>
</tr>
</table>
</body>
</html>
Fill in the blanks:
Create a table showing:
Use table headings.
Fix the missing tags below:
<table border="1">
_____
_____ Name _____
_____ Age _____
_____
_____
_____ Tolu _____
_____ 10 _____
_____
</table>
Use:
Create a webpage called myschooltimetable.html.
Add:
Create a football score table with:
Add at least three teams.
In the previous module, we learned how to create tables.
In this module, we will learn about forms. Forms allow people to enter information on a webpage. For example, when you register for a game, fill out a school form, or sign up for a website, you are using a form.
A form is a special area on a webpage where users can type information or make choices.
Forms help websites collect information from visitors.
Imagine your teacher gives you a paper asking for your name, age, and favorite subject. That paper is a form. HTML forms work the same way.
We create forms using the <form> tag.
<form> </form>
Everything inside the form tag becomes part of the form.
Text fields allow users to type information.
<form> Name: <input type="text"> </form>
Name: [____________]
Think of a text box as an empty notebook page waiting for someone to write on it.
Radio buttons allow users to choose only one option.
Favourite input type="radio"> Red <input type="radio"> Blue <input type="radio"> Green
You can select only one color.
Imagine choosing one ice cream flavor. You can only pick one flavor at a time.
Checkboxes allow users to select multiple options.
My Hobbies: <input type="checkbox"> Football <input type="checkbox"> Reading <input type="checkbox"> Drawing
You can choose one, two, or all the hobbies.
Imagine choosing toppings for a pizza. You can select as many toppings as you want.
Dropdown lists allow users to choose from a list of options.
<select> <option>Primary 4</option> <option>Primary 5</option> <option>Primary 6</option> </select>
Clicking the dropdown shows all available choices.
A submit button sends information from the form.
<input type="submit" value="Send">
Think of dropping a completed form into your teacher's collection box. The submit button does the same thing.
A reset button clears everything entered into the form.
<input type="reset" value="Clear">
If you make a mistake, the reset button helps you start again.
<!DOCTYPE html>
<html>
<head>
<title>Student Registration Form</title>
</head>
<body>
<h1>Student Registration Form</h1>
<form>
Name:
<input type="text">
<br><br>
Gender:
<input type="radio"> Boy
<input type="radio"> Girl
<br><br>
Hobbies:
<input type="checkbox"> Football
<input type="checkbox"> Reading
<br><br>
Class:
<select>
<option>Primary 4</option>
<option>Primary 5</option>
<option>Primary 6</option>
</select>
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
Fill in the blanks:
Create a form that asks for:
Add a Submit button.
Fix the missing tags:
<_____> Name: <input type="text"> <input type="submit" value="Send"> </_____>
Create a webpage called schoolregistration.html.
Include:
Create a "Favorite Things Survey" form.
Include:
In the previous module, we learned how to create forms.
In this module, we will learn about Semantic HTML. Semantic HTML helps us organize our webpages using meaningful tags. These tags tell browsers and people what each part of a webpage does.
Semantic means "having meaning."
Instead of using tags that say nothing about their purpose, Semantic HTML uses tags that clearly explain what they contain.
Imagine a toy box with labels. One box says "Cars," another says "Books," and another says "Games." The labels help you know what is inside each box.
Semantic HTML works the same way.
The <header> tag contains the top section of a webpage.
<header>
<h1>My School Website</h1>
</header>
The header is like the title page of a book. It tells visitors what the website is about.
The <nav> tag contains links that help visitors move around a website.
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
Think of navigation as road signs that help people find their way.
The <main> tag contains the most important information on a webpage.
<main>
<p>Welcome to my website.</p>
</main>
If a webpage were a school, the main section would be the classroom where most learning happens.
The <section> tag divides content into different parts.
<section>
<h2>My Hobbies</h2>
<p>I enjoy football.</p>
</section>
Each section focuses on a specific topic.
The <article> tag contains a complete piece of content, such as a story, news article, or blog post.
<article>
<h2>My Trip to the Zoo</h2>
<p>I saw lions and elephants.</p>
</article>
An article is like a chapter in a book. It can stand on its own and tell a complete story.
The <footer> tag contains information shown at the bottom of a webpage.
<footer>
© 2026 My Website
</footer>
The footer is like the last page of a book, where you often find extra information.
Imagine your room is organized with labeled shelves. You can find things faster because everything has a place. Semantic HTML keeps webpages organized the same way.
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
<main>
<section>
<h2>About Me</h2>
<p>I love coding.</p>
</section>
<article>
<h2>My First HTML Project</h2>
<p>I created a webpage about my hobbies.</p>
</article>
</main>
<footer>
© 2026 My Website
</footer>
</body>
</html>
Fill in the blanks:
Create a webpage with:
Fix the missing tags below:
<_____>
<h1>My School Website</h1>
</_____>
<_____>
<a href="#">Home</a>
</_____>
<_____>
Welcome to my school website.
</_____>
Use:
Create a webpage called myprofile.html.
Include:
Create a "My School Website" page using:
Congratulations! You have learned many HTML skills.
You now know how to create headings, paragraphs, images, tables, forms, links, and semantic HTML sections.
In this module, you will combine everything you have learned to build a complete website.
A website project is a collection of web pages that work together.
Instead of creating only one page, you will create several pages and connect them using links.
Think of a website as a school. A school has classrooms, offices, a library, and a playground. Each room has a different purpose, but they all belong to the same school.
A website works the same way. Each page has a different purpose but belongs to the same website.
Before building a website, it is important to plan it.
Ask yourself:
A website usually contains more than one page.
Example:
Each file becomes a separate webpage.
We use hyperlinks to connect pages.
<a href="about.html"> About Me </a>
When visitors click the link, they move to another page.
Think of links as hallways connecting classrooms in a school.
Navigation menus help visitors move around the website.
<nav> <a href="index.html">Home</a> <a href="about.html">About</a> <a href="hobbies.html">Hobbies</a> <a href="contact.html">Contact</a> </nav>
Place the same menu on every page.
Each page should contain useful information.
After creating your website, test everything.
Testing is like checking your homework before submitting it.
Sometimes mistakes happen.
Common problems include:
Always check your code carefully.
<h1>Welcome to My Website</h1>
<nav>
<a href="about.html">About</a>
<a href="hobbies.html">Hobbies</a>
<a href="contact.html">Contact</a>
</nav>
<p>Hello! My name is Tolu.</p>
<h1>About Me</h1> <p>I am 10 years old.</p>
<h1>My Hobbies</h1>
<ul>
<li>Football</li>
<li>Reading</li>
</ul>
<h1>Contact Me</h1>
<form>
Name:
<input type="text">
</form>
Answer the following questions:
Create three pages:
Connect them using hyperlinks.
Complete the missing code:
<nav> <a href="________">Home</a> <a href="________">About</a> <a href="________">Contact</a> </nav>
Build a website called My Personal Website.
Create:
Include:
Create a website about:
Use everything you have learned in the course.
Congratulations! You have reached the final module of your HTML course.
In this module, we will review everything we have learned and discover some good habits that make our HTML code neat, easy to read, and easy to fix when mistakes happen.
Best practices are smart ways of doing things.
They help programmers write clean and organized code.
Imagine cleaning your room. When toys, books, and clothes are arranged properly, it is easy to find things.
Clean HTML code works the same way.
Every HTML page should have the correct structure.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
Content goes here
</body>
</html>
This structure helps browsers understand your webpage.
Headings help visitors understand your page.
<h1>My Favorite Animals</h1>
Good headings tell readers exactly what the page is about.
Indentation means adding spaces to make code easier to read.
<body>
<h1>Welcome</h1>
<p>Hello World</p>
</body>
Imagine arranging books neatly on a shelf instead of throwing them on the floor.
Most HTML tags need a closing tag.
<p>This is a paragraph.</p>
Forgetting to close tags can cause problems on your webpage.
Comments help you leave notes in your code.
<!-- This section contains my hobbies -->
Comments are not shown on the webpage.
Give your files meaningful names.
about.html contact.html gallery.html
page1.html test.html abc.html
Good names make files easier to find.
Let's remember what we learned throughout the course.
| Module | Topic |
|---|---|
| 1 | Introduction to HTML |
| 2 | HTML Page Structure |
| 3 | Text Content |
| 4 | Lists and Hyperlinks |
| 5 | Images and Multimedia |
| 6 | Tables |
| 7 | Forms |
| 8 | Semantic HTML |
| 9 | Website Project Development |
These mistakes are like spelling mistakes in your homework. They can make things confusing.
<!DOCTYPE html>
<html>
<head>
<title>My Personal Website</title>
</head>
<body>
<header>
<h1>My Personal Website</h1>
</header>
<nav>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
<main>
<section>
<h2>About Me</h2>
<p>I love coding and football.</p>
</section>
</main>
<footer>
© 2026 My Website
</footer>
</body>
</html>
Answer the following questions:
Find and correct the mistakes below:
<h1>My Website <p>Welcome to my webpage. <body>
Create a webpage that contains:
Build a complete website using everything you have learned.
Your website should include:
Create a website about yourself, your school, your favorite sport, or your favorite animal.
Use as many HTML elements as possible.
Show your website to a friend, parent, or teacher and explain how it works.
You have completed Introduction to HTML Level One.
You can now create webpages with text, images, links, tables, forms, and multiple pages.
Keep practicing and you will soon be ready to learn CSS, which makes webpages colorful and beautiful.