HyperText Markup Language (HTML): HTML Documents and Their Structure, HTML Tags, HTML Syntax and Their Functions | Primary 5 (Basic 5) Information Technology (Computer Studies) | Second Term Week 10

HYPERTEXT MARKUP LANGUAGE (HTML): HTML DOCUMENTS AND THEIR STRUCTURE, HTML TAGS, HTML SYNTAX AND THEIR FUNCTIONS 

INFORMATION TECHNOLOGY (COMPUTER STUDIES)

PRIMARY 5 – THIRD TERM – WEEK 10

THEME – BASIC COMPUTER OPERATIONS 

PREVIOUS LESSON – Internet Safety and Online Threats: Meaning and Ways of Using the Internet Safely, Meaning and Types of Online Threats Primary 5 (Basic 5) Second Term Week 9 Information Technology – Computer Studies

TOPIC – HYPERTEXT MARKUP LANGUAGE (HTML)

LEARNING AREA

1. Introduction

2. HTML Documents and Their Structure

3. HTML Tags, HTML Syntax and Their Functions

4. Practical Activities

5. Weekly Assessment: Test Questions and Answers/Assignment

6. Summary

LEARNING OBJECTIVES 

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

1. Define HyperText Markup Language (HTML).

2. Explain the meaning of an HTML document.

3. Identify the basic structure of an HTML document.

4. Identify common HTML tags.

5. Explain the functions of common HTML tags.

6. Explain the meaning of HTML syntax.

7. State the rules of HTML syntax.

8. Create a simple HTML document using basic HTML tags.

ENTRY BEHAVIOUR

In the previous lesson, pupils learned how to create documents, spreadsheets, and presentations using Microsoft Word, Microsoft Excel, and Microsoft PowerPoint. They also learned that computers use different software for different purposes.

Building on that knowledge, pupils will now learn about HyperText Markup Language (HTML), the language used to create and structure web pages that are displayed in web browsers. This will help them understand how websites are created and how information is organised on the Internet.

INSTRUCTIONAL MATERIALS

The teacher will teach the lesson with the aid of:

1. Desktop or laptop computer

2. Text editor (e.g., Notepad or Notepad++)

3. Web browser (e.g., Google Chrome, Microsoft Edge, or Mozilla Firefox)

4. Sample HTML document

5. Chart showing common HTML tags

6. Projector (if available)

7. Whiteboard and marker

8. Printed handouts showing the structure of an HTML document

METHOD OF TEACHING

Choose a suitable and appropriate methods for the lessons.

Note – Irrespective of choosing methods of teaching, always introduce an activities that will arouse pupil’s interest or lead them to the lessons. 

REFERENCE MATERIALS

1. Scheme of Work

2. 9 – Years Basic Education Curriculum

3. Course Book

4. All Relevant Material

5. Online Information

CONTENT OF THE LESSON

INTRODUCTION

Have you ever wondered how websites such as school websites, news websites, or educational websites are created? Every webpage you see on the Internet is built using a special language called HyperText Markup Language (HTML).

HTML helps web browsers know where to display headings, paragraphs, pictures, tables, and links on a webpage. Without HTML, web pages cannot be properly displayed.

In this lesson, pupils will learn the meaning of HTML, understand HTML documents and their structure, identify HTML tags, explain HTML syntax, and state the functions of common HTML tags used to create simple web pages.

LESSON 1 – MEANING OF HTML

HyperText Markup Language (HTML) is the standard markup language used to create web pages.

  • HyperText means text containing links to other pages.
  • Markup means using tags to organise content.
  • Language means a set of instructions used to create web pages.

HTML DOCUMENT

An HTML document is a file that contains HTML code and is displayed as a web page in a web browser.

HTML file extensions:

  • .html
  • .htm

STRUCTURE OF AN HTML DOCUMENT

The basic structure of an HTML document includes:

  • <!DOCTYPE html> – Declares the document as HTML5.
  • <html> – Root element.
  • <head> – Contains page information.
  • <title> – Displays the page title.
  • <body> – Contains the visible webpage content.

LESSON 2 – HTML TAGS

HTML tags are special codes enclosed in angle brackets (< >) that tell a web browser how to display and organise the content of a web page.

COMMON HTML TAGS AND THEIR FUNCTIONS

HTML Tag – Function

  • <html> – Starts and ends the HTML document.
  • <head> – Contains page information.
  • <title> – Displays the page title.
  • <body> – Displays webpage content.
  • <h1> – Creates a main heading.
  • <p> – Creates a paragraph.
  • <a> – Creates a hyperlink.
  • <img> – Displays an image.

LESSON 3 – HTML SYNTAX

HTML syntax refers to the rules for writing HTML correctly.

Rules include:

  • Using opening and closing tags.
  • Writing tags inside angle brackets.
  • Closing tags correctly.
  • Writing tags in lowercase.
  • Saving files with the .html extension.

SIMPLE HTML EXAMPLE

BACKEND

<!DOCTYPE html>

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Welcome to HTML</h1>

<p>This is my first web page.</p>

</body>

</html>

FRONTEND

Welcome to HTML

This is my first webpage.

IMPORTANCE OF HTML

1. It creates web pages.

2. It organises webpage contents.

3. It displays text, pictures, videos, and tables.

4. It connects web pages through hyperlinks.

5. It forms the foundation of website development.

6. It makes websites easy to read and navigate.

7. It works with web browsers to display webpages.

8. It helps learners develop web design skills.

LESSON 3 (ANY FREE PERIOD) – HTML PRACTICAL ACTIVITIES

The teacher demonstrates how to create a simple HTML webpage using a computer.

Activity 1: Open a Text Editor

1. Open Notepad (or any text editor).

2. Explain that HTML code is written in a text editor.

Activity 2: Type a Simple HTML Document

The teacher types the following HTML code:

HTML

<!DOCTYPE html>

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Welcome to My Web Page</h1>

<p>My name is __________.</p>

</body>

</html>

Activity 3: Save the File

1. Click File → Save As.

2. Save the file as mypage.html.

3. Select All Files as the file type.

Activity 4: Open the HTML File

1. Locate mypage.html.

2. Double-click the file.

3. Observe that it opens in a web browser.

Activity 5: Identify the HTML Tags

The teacher points out:

1. <html> – Begins the HTML document.

2. <head> – Contains information about the webpage.

3. <title> – Displays the page title.

4. <body> – Contains the webpage content.

5. <h1> – Displays the heading.

6. <p> – Displays the paragraph.

PUPIL’S PRACTICAL ACTIVITIES

Each pupil should:

1. Open Notepad.

2. Type the HTML code demonstrated by the teacher.

3. Replace the blank with their own name.

4. Save the file as mypage.html.

5. Open the file in a web browser.

6. Identify the HTML tags used and explain the function of each one.

WEEKLY ASSESSMENT: TEST QUESTIONS AND ANSWERS/ASSIGNMENT 

A. Multiple Choice Questions (5 Marks)

1. HTML stands for _______.

A. HyperText Markup Language

B. HighText Machine Language

C. Hyper Transfer Markup Language

D. Home Tool Markup Language

2. An HTML document is usually saved with the extension _______.

A. .doc

B. .jpg

C. .mp3

D. .html

3. Which HTML tag is used to create a paragraph?

A. <h1>

B. <p>

C. <img>

D. <table>

4. Which part of an HTML document contains all the visible contents of a webpage?

A. <head>

B. <title>

C. <body>

D. <html>

5. Which HTML tag is used to insert an image?

A. <a>

B. <img>

C. <br>

D. <ul>

B. Fill in the Blanks (5 Marks)

6. HTML is a _______ language.

7. HTML tags are written inside _______ brackets.

8. The _______ tag displays the webpage title on the browser tab.

9. The _______ tag creates a hyperlink.

10. The _______ tag creates the largest heading on a webpage.

C. True or False (5 Marks)

11. HTML is used to create web pages. _______

12. Every HTML document must have a <body> tag. _______

13. The <img> tag is used to display pictures on a webpage. _______

14. HTML files are saved with the extension .html. _______

15. The <title> tag displays the main content of the webpage. _______

D. Match Column A with Column B (5 Marks)

Column A – Column B

16. <html> – A. Creates a paragraph

17. <body> – B. Creates a hyperlink

18. <p> – C. Contains the visible contents of the webpage

19. <a> – D. Begins and ends an HTML document

20. <title> – E. Displays the webpage title

ANSWER KEYS

1. A

2. D

3. B

4. C

5. B

6. markup

7. angle

8. title

9. a

10. h1

11. True

12. True

13. True

14. True

15. False

16. D – Begins and ends an HTML document

17. C – Contains the visible contents of the webpage

18. A – Creates a paragraph

19. B – Creates a hyperlink

20. E – Displays the webpage title

SUMMARY

In this lesson, pupils learned that HyperText Markup Language (HTML) is the standard markup language used to create and organise web pages. They understood that HTML uses tags to tell a web browser how to display text, images, links, tables, and other webpage contents.

Pupils also learned that an HTML document is a file saved with the extension .html or .htm and that it contains the code used to create a webpage. They identified the basic structure of an HTML document, which includes the <!DOCTYPE html>, <html>, <head>, <title>, and <body> elements, and explained the function of each part.

Furthermore, pupils learned about HTML tags, such as <h1>, <p>, <a>, <img>, <table>, and <br>, and stated the functions of each tag.

Finally, pupils learned the rules of HTML syntax, including writing tags inside angle brackets, using opening and closing tags correctly, arranging tags in the proper order, writing tag names in lowercase, and saving HTML files with the .html extension. They concluded that HTML is the foundation of web page creation and website development.

PRESENTATION

To deliver the lesson, the teacher adopts the following steps:

Step 1: Introduction – The teacher displays a simple webpage on a computer or projector and asks pupils how they think the webpage was created. The teacher introduces HTML (HyperText Markup Language) as the language used to create web pages.

Pupils’ Activities: Pupils observe the webpage and mention websites they have visited.

Step 2: Meaning of HTML – The teacher explains that HTML (HyperText Markup Language) is the standard markup language used to create and organise web pages.

The teacher explains:

  • HyperText means text that contains links to other pages.
  • Markup Language means a language that uses tags to organise webpage contents.

Pupils’ Activities: Pupils explain the meaning of HTML in their own words.

Step 3: HTML Documents and Their Structure – The teacher explains that an HTML document is a file saved with the extension .html or .htm. Also, the teacher introduces the basic HTML document structure:

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <title>
  • <body>

The teacher explains the function of each part.

Pupils’ Activities: Pupils identify the different parts of an HTML document.

Step 4: HTML Tags – The teacher explains that HTML tags are instructions written inside angle brackets (< >) that tell the browser how to display webpage contents.

Examples discussed include:

  • <html>
  • <head>
  • <title>
  • <body>
  • <h1>
  • <p>
  • <br>
  • <img>
  • <a>

The teacher explains the function of each tag.

Pupils’ Activities: Pupils identify the functions of different HTML tags.

Step 5: HTML Syntax – The teacher explains that HTML syntax refers to the rules used when writing HTML correctly. Also, the teacher discusses:

  • Using opening and closing tags.
  • Writing tags inside angle brackets.
  • Closing tags correctly.
  • Writing tags in lowercase.
  • Saving files with the .html extension.

Pupils’ Activities: Pupils mention the rules of HTML syntax.

Step 6: Practical Demonstration – The teacher opens Notepad or another text editor and types a simple HTML Document. Also, the teacher saves the file as index.html and opens it in a web browser to show the displayed webpage.

Pupils’ Activities: Pupils observe how HTML code becomes a webpage in the browser.

Step 7: Group Activity – The teacher divides the class into four groups and assigns the following tasks:

  • Group 1: Explain the meaning of HTML.
  • Group 2: Draw and label the structure of an HTML document.
  • Group 3: List common HTML tags and explain their functions.
  • Group 4: State the rules of HTML syntax and explain why they are important.

Each group presents its work to the class.

Pupils’ Activities: Pupils discuss, complete the assigned activities, and present their findings.

Step 8: Lesson Summary – The teacher reviews the meaning of HTML, HTML documents and their structure, HTML tags, HTML syntax, and the functions of each.

Pupils’ Activities: Pupils answer oral questions and summarise the lesson.

Step 9: Evaluation – The teacher asks oral and written questions to assess pupils’ understanding of HTML.

Pupils’ Activities: Pupils answer the evaluation questions and participate actively in the lesson.

CONCLUSION

To conclude the lesson for the week, the teacher revises the entire lesson and links it to the following week’s lesson.

NEXT LESSON

Digital Literacy: Meaning, Components of Digital Literacy, and the Concept of Copyright and Plagiarism Primary 5 (Basic 5) Third Term Week 2 and Week 3 Information Technology – Computer Studies

LESSON EVALUATION 

Teacher asks pupils,

1. Define HyperText Markup Language (HTML).

2. Explain the meaning of an HTML document.

3. Mention five functions of an HTML document.

4. What are HTML tags?

5. State the functions of the following HTML tags:

(a) <html>

(b) <head>

(c) <title>

(d) <body>

(e) <p>

6. Mention five other HTML tags and state one function of each.

7. List the main parts of an HTML document structure.

8. Explain the meaning of HTML syntax.

9. State five rules of HTML syntax.

10. Demonstrate your understanding by identifying the parts of a simple HTML document and explaining the function of each part.

Related Posts

About The Author

Alabi M. S.

Michael is a Principal Education Officer at LASUBEB with over 15 years of experience in teaching and learning. He is passionate about developing plan lesson notes and promoting quality assurance in education. Michael strongly believes that teachers inspire the future and play a vital role in shaping the next generation.