Setting Up HTML and How Html Works | Primary 5 (Basic 5) Information Technology (Computer Studies) | Third Term Week 8

SETTING UP HTML DOCUMENTS AND HOW HTML WORKS

INFORMATION TECHNOLOGY (COMPUTER STUDIES)

PRIMARY 5 – THIRD TERM – WEEK 8

THEME – BASIC COMPUTER OPERATIONS 

PREVIOUS LESSON – Desktop Publishing Applications: Microsoft Word, Microsoft Excel and Microsoft PowerPoint Primary 5 (Basic 5) Third Term Week 6 Information Technology – Computer Studies

TOPIC – HTML SETUP 

LEARNING AREA

1. Introduction

2. Meaning and How to Setup Html

3. How Html Works and Examples

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. Explain the meaning of HTML setup.

2. Identify the requirements for setting up HTML.

3. Explain how HTML works.

4. Create a simple HTML document.

5. Open and view an HTML file in a web browser.

ENTRY BEHAVIOUR

Pupils have previously learned the meaning of HTML, HTML documents, HTML tags, HTML document structure, and HTML syntax. They also learned the functions of common HTML tags used to create web pages.

This lesson builds on that knowledge by teaching pupils how to set up HTML using a text editor and a web browser. Pupils will also learn how HTML works to display web pages.

INSTRUCTIONAL MATERIALS

The teacher will teach the lesson with the aid of:

1. Desktop computer or laptop

2. Multimedia projector (optional)

3. Text editor (Notepad, Notepad++, or Visual Studio Code)

4. Web browser (Google Chrome, Microsoft Edge, Mozilla Firefox)

5. Sample HTML files

6. Whiteboard and marker

7. HTML chart showing the document structure

8. Pupils’ notebooks and writing materials

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

After learning the structure of an HTML document and the functions of HTML tags, pupils are introduced to the process of setting up HTML. The teacher explains that HTML code is written in a text editor, saved with the .html extension, and opened in a web browser where it is interpreted and displayed as a web page.

In this lesson, pupils will learn how to set up HTML, the tools needed, how HTML works, and how to create and display a simple web page .

LESSON 1 – MEANING OF HTML SETUP

Setting up HTML is the process of preparing the tools needed to create and display HTML web pages. It involves using a text editor to write HTML code and a web browser to view the web page.

REQUIREMENTS FOR SETTING UP HTML

1. A computer or laptop.

2. A text editor (e.g., Notepad or Visual Studio Code).

3. A web browser (e.g., Google Chrome or Microsoft Edge).

4. An HTML file saved with the .html extension.

STEPS FOR SETTING UP HTML

1. Open a text editor.

2. Type the HTML code.

3. Save the file with the .html extension.

4. Open the saved file in a web browser.

5. View the webpage displayed by the browser.

LESSON 2 – HOW HTML WORKS

HTML works through the following steps:

1. A user writes HTML code in a text editor.

2. The file is saved with the .html extension.

3. The HTML file is opened using a web browser.

4. The browser reads and interprets the HTML tags.

5. The browser displays the webpage on the screen.

EXAMPLE OF A SIMPLE HTML DOCUMENT

BACKEND

HTML

<!DOCTYPE html>

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Welcome to HTML</h1>

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

</body>

</html>

FRONTEND

Welcome to HTML

This is my first HTML page.

LESSON 3 – HTML SETUP: PRACTICAL ACTIVITIES

The teacher demonstrates how to set up and use HTML by carrying out the following activities:

1. Open a text editor such as Notepad, Notepad++, or Visual Studio Code.

2. Type a simple HTML document using the correct HTML structure.

3. Save the file with the .html extension (e.g., index.html).

4. Locate the saved HTML file and open it with a web browser such as Google Chrome, Microsoft Edge, or Mozilla Firefox.

5. Explain how the browser reads the HTML tags and displays the webpage.

6. Edit the HTML file by changing the heading or paragraph, save the changes, and refresh the browser to show the updated webpage.

PUPILS’ ACTIVITIES

1. Observe the teacher’s demonstration.

2. Open a text editor and type a simple HTML document.

3. Save the file with the .html extension.

4. Open the HTML file in a web browser.

5. Observe how the webpage is displayed and make simple changes to see the results.

WEEKLY ASSESSMENT: TEST QUESTIONS AND ANSWERS/ASSIGNMENT 

A. Multiple Choice Questions

1. HTML code is usually written in a _______.

A. Web browser

C. Calculator

B. Media player

D. Text editor

2. Which file extension is used to save an HTML file?

A. .doc

B. .txt

C. .html

D. .jpg

3. Which of the following is a web browser?

A. Notepad

B. Google Chrome

C. Microsoft Word

D. Paint

4. After writing HTML code, the next step is to _______.

A. Delete the file

B. Print the file

C. Close the computer

D. Save the file with the .html extension

5. A web browser is used to _______.

A. Write HTML code

B. View HTML web pages

C. Draw pictures

D. Play music

B. Fill in the Gaps

Complete the sentences using the words in the box: .html, browser, HTML, text editor, webpage

6. _______ is the language used to create web pages.

7. HTML code is written using a _______.

8. An HTML file is saved with the _______ extension.

9. A web _______ interprets HTML code and displays it.

10. The page displayed by a browser is called a _______.

C. Write True or False.

11. Microsoft Excel Files should be saved with the .html extension. _______

12. A web browser is used to display HTML pages. _______

13. Microsoft Word is the only program used to write HTML code. _______

14. HTML code must be interpreted by a web browser before it is displayed. _______

15. Google Chrome is an example of a web browser. _______

Match Column A with Column B.

Column A – Column B

16. Text Editor – A. Creates the structure of a webpage

17. Web Browser – B. Saves files with .html extension

18. .html – C. Page displayed in a browser

19. HTML – D. Used to write HTML code

20. Webpage – E. Displays a webpage

Answer KEYS

1. D – Text editor

2. c – .html

3. b – Google Chrome

4. A – Save the file with the .html extension

5. b – View HTML web pages

6. HTML

7. text editor

8. .html

9. browser

10. webpage

11. False

12. True

13. False

14. True

15. True

16. D – Used to write HTML code

17. E – Displays a webpage

18. B – Saves files with .html extension

19. A – Creates the structure of a webpage

20. C – Page displayed in a browser

SUMMARY

In this lesson, pupils learned that setting up HTML involves preparing the necessary tools, such as a text editor and a web browser, to create and display web pages.

They learned the requirements for setting up HTML and the steps involved in creating an HTML file.

Furthermore, pupils learned how HTML works. They discovered that HTML code is written in a text editor, saved with the .html extension, opened in a web browser, and interpreted by the browser to display a webpage.

Finally, pupils practised creating and viewing a simple HTML webpage, helping them understand the basic process of web page development.

PRESENTATION

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

Step 1: Introduction – The teacher asks pupils if they have ever wondered how a website appears on a computer or mobile phone after it is created. The teacher explains that HTML code must first be written, saved, and opened in a web browser before a webpage can be displayed.

Pupils’ Activities: Pupils share their ideas and listen attentively to the teacher’s explanation.

Step 2: Meaning of HTML Setup – The teacher explains that setting up HTML means preparing the tools needed to create and display HTML web pages. The teacher introduces the text editor and web browser used for HTML development.

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

Step 3: Requirements for Setting Up HTML – The teacher explains the requirements for setting up HTML:

  • Computer or laptop.
  • Text editor.
  • Web browser.
  • HTML file with the .html extension.

Pupils’ Activities: Pupils identify the tools required for setting up HTML.

Step 4: How HTML Works – The teacher explains how HTML works by demonstrating the following process:

  • Writing HTML code.
  • Saving the file with the .html extension.
  • Opening the file in a web browser.
  • Viewing the webpage displayed by the browser.

Pupils’ Activities: Pupils describe the steps involved in how HTML works.

Step 5: Practical Demonstration – The teacher demonstrates how to:

  • Open a text editor.
  • Type a simple HTML document.
  • Save the file as index.html.
  • Open the file in a browser.
  • View the webpage.

Pupils’ Activities: Pupils follow the demonstration and create a simple HTML webpage.

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

  • Group 1: Explain the meaning of HTML setup.
  • Group 2: List the requirements for setting up HTML.
  • Group 3: Explain how HTML works.
  • Group 4: Create and display a simple HTML webpage.

Each group presents its work before the class.

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

Step 7: Lesson Summary – The teacher reviews the meaning of HTML setup, the requirements for setting up HTML, the steps involved in creating an HTML file, and how HTML works to display webpages.

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

Step 8: Evaluation – The teacher asks oral and written questions to assess pupils’ understanding of HTML setup, the tools required, how HTML works, and the steps involved in creating and viewing an HTML webpage.

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

Introduction to Python: Meaning and Uses of Python Syntax and Simple Python Commands | Primary 5 (Basic 5) Information Technology (Computer Studies) | Third Term Week 9

LESSON EVALUATION 

Teacher asks pupils,

1. Explain the meaning of HTML setup.

2. List four requirements for setting up HTML.

3. State the steps involved in setting up HTML.

4. Explain how HTML works from writing the code to displaying the webpage in a web browser.

5. Create a simple HTML document using a text editor.

6. Save an HTML file with the .html extension.

7. Open and view an HTML file in a web browser.

8. Demonstrate the correct process of creating, saving, and displaying a simple HTML webpage.

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.