REVISED BY:
T. Salami
T. Panaki
C . Ademola-Odebiyi
F. Okpara
Andrew Teaches Coding
For Mastery of Computer Languages
LESSON PLAN
HTML AND THE
WEB
Primary 4
This content of this lesson plan is protected by copyright laws of Nigeria and Uk. They cannot be used for
development or publication of commercial schemes. The scheme is only permitted for use as a guide for
teaching computer languages in schools.
Andrew Teaches Coding
CHATPER 1:
HTML AND THE WEB
LESSON PLAN: HTML AND THE WEB
Andrew Teaches Coding CHAPTER 1
HTML AND THE WEB HTML AND THE WEB
STARTER (ENTRY BEHAVIOUR)
Scenario 1: What do you know about the internet?
Scenario 2: What do you think a website is?
Scenario 3: How do you think a website is created?
LESSON OBJECTIVE
At the end of the lesson,
students should be able to: Gain a basic understanding of the internet and its
structure (Webpage and Website).
Explain HTML and its basic units.
Mention, identify and Implement basic HTML tags.
Mention tools used for previewing HTML.
Riddles and verbal questioning.
TESTING
Self-paced learning evaluations.
Plugged Unplugged
ACTIVITIES Using the playground, instruct Using the blackboard or
pupils/students to: cardboard cut-outs
Create a <p> ta Display correct and incorrect
Write an opening and closing tags and ask students to sort
Tag Ask Students to build up
Using a complete <p> tag, different tags using cardboard
write 3 sentences about cut-outs.
yourself.
Using Verbal questioning
Mention 2 examples of text
editors and browsers for
previewing HTML
What’s the difference between
a webpage and a Website
What does HTML stand for?
KEY LEARNING
Tick learning points achieved
Key Learning by pupils and students
Definition of the internet.
The largest portion of the internet.
The percentage of the internet covered by the web.
Meaning of HTML and CSS.
The tool used for previewing HTML and CSS.
Make-up of a website.
Tool used for writing code.
KEY LEARNING
The unit of HTML.
Grammatical rules for creating opening and closing tags.
REFLECTION
Do your pupil/students
Reflection remembered key points?
What is a tag? Yes No
What is the difference between an open and closed tag? Yes No
What does HTML stand for? Yes No
What is the difference between a website and a
webpage? Yes No
Mention 2 examples of text editors and browsers
for previewing HTML. Yes No
TARGET KNOWLEDGE
Have these knowledge areas
Knowledge Area been transferred into your
pupil's long term memory?
What are tags? Yes No
Differentiate opening and closing tags. Yes No
The meaning of HTML. Yes No
ASSESSMENT OBJECTIVE
To measure the student’s knowledge on
introduction of HTML and implement
grammatical correct tags.
Difficult Rating
Example Question (1 means Easy, 5 means Difficult)
Identify the problem with the tag below:
5
<p> <p>
Using a complete <p> tag, write 3 sentences about
5
yourself.
Identify the problem with the tag below:
5
</html> </html>
Identify the problem with the tag below:
5
<h1> </h3>
INTERVENTION PLAN
Plugged Unplugged
Using the playground Using sheets of paper, pencils and
Reassess each practice area. verbal instruction from educator,
pupils/students should
Write out the basic tags that have
been taught and share with class.
Andrew Teaches Coding
CHATPER 2:
TAGS AND
STRUCTURE
LESSON PLAN: HTML AND THE WEB
Andrew Teaches Coding CHAPTER 2
HTML AND THE WEB TAGS AND STRUCTURE
STARTER (ENTRY BEHAVIOUR)
Scenario 1: What is tag?
Scenario 2: How do you differentiate between an open, closed tags and
self closing tags?
LESSON OBJECTIVE
At the end of the lesson,
students should be able to:
Understand the layout of a page structure in HTML.
Mention the elements of a page structure in HTML.
Arrange and Implement the elements of a page
structure in the right order
Riddles and verbal questioning.
TESTING
Self-paced learning evaluations.
Plugged Unplugged
ACTIVITIES
Using the playground, Using Verbal questioning
instruct pupils/students to: pupils/students should be
describe the function of:
Create a doctype htm
Doctyp
Create a complete HTML
HTM
ta
Hea
Implement a complete
Body
HTML page structure
Using sheets of paper,
pencils and verbal instruction
from educator, pupils/
students should:
Create a complete page
structure.
KEY LEARNING
Tick learning points achieved
Key Learning
by pupils and students
The tags that make up the page structure of a web
interface.
The functional purpose of each tag within the page
structure of a web interface.
Ability to correctly implement skeletal structure of a web
interface.
REFLECTION
Do your pupil/students
Reflection remembered key points?
Recite the page structure of a web interface. Yes No
Can you identify each tag within the page structure and
Yes No
indicate its function?
Begin every Html code with the declaration of the doctype. Yes No
TARGET KNOWLEDGE
Have these knowledge areas
Knowledge Area been transferred into your
pupil's long term memory?
Always remember to start with !doctype. Yes No
Know that an HTML structure is divided into head and
body. Yes No
Know that the title tag goes inside the head tag. Yes No
Know that the head tag holds the personal information of
the website. Yes No
Know that the body tag holds the content of the website. Yes No
Know that the doctype tag is used to tell the browser what
computer language is being written. Yes No
ASSESSMENT OBJECTIVE 1
To measure the student’s ability on
correct Implementation HTML page
structure.
Difficult Rating
Example Question (1 means Easy, 5 means Difficult)
Create a webpage using the complete HTML structure. 5
Assess and Reimplement the page structure below
correctly:
<!doctype html>
<body>
<head>
5
</head>
<html>
</htm>
</body>
INTERVENTION PLAN
Plugged Unplugged
Using the playground, instruct pupils/ Using the blackboard or cardboard
students to cut-outs, pupils/students should
Write down the complete HTML Write down the complete HTML
page structure. page structure
Organize cut-outs to reflect the
correct arrangement of the page
structure.
Andrew Teaches Coding
CHATPER 3:
PUBLISHING WITH
TAGS
LESSON PLAN: HTML AND THE WEB
Andrew Teaches Coding CHAPTER 3
HTML AND THE WEB PUBLISHING WITH
TAGS
STARTER (ENTRY BEHAVIOUR)
Scenario 1: Recite the page structure layout
LESSON OBJECTIVE
At the end of the lesson,
students should be able to:
Mention and identify tags needed for text publishing on
the web interface.
Analyze, Decide and Implement appropriate tags for
publishing text on a website.
Riddles and verbal questioning.
TESTING
Self-paced learning evaluations.
ACTIVITIES Plugged Unplugged
Using the playground, Using Verbal questioning
instruct pupils/students to pupils/students should
Create a complete HTML provide answers to
page about yourself How many heading tags
Using an ordered list, are there in Html
write out five things you Which heading tag is the
like largest and the smallest
Using an unordered list, What is the difference
write out five (5) beautiful between an ordered and
cities you know. unordered list
What tags are used to
create paragraphs?
KEY LEARNING
Tick learning points achieved
Key Learning
by pupils and students
The different tags used for text publishing in web
interfaces.
The functional purpose of each text publishing tag.
The different heading tags.
When to use an ordered list.
When to use an unordered list.
REFLECTION
Do your pupil/students
Reflection remembered key points?
What tags are used to create large headings? Yes No
What tags are used to create small headings? Yes No
What tags are used to create paragraphs? Yes No
What tag is used to create an ordered list. Yes No
What is the difference between an ordered and ordered
list? Yes No
TARGET KNOWLEDGE
Have these knowledge areas
Knowledge Area been transferred into your
pupil's long term memory?
Heading tags are used for converting heading in Yes No
documents to web formats.
There are six heading tags. Yes No
Heading tags are biggest at h1 and smallest at h6. Yes No
Lists tags are used to itemize information on the web. Yes No
There are two types of list tags. Ordered and unordered Yes No
lists.
ASSESSMENT OBJECTIVE 1
To measure the student ability to
implement text publishing tags correctly.
Difficult Rating
Example Question (1 means Easy, 5 means Difficult)
What heading tag is the largest in HTML? 2
How do we separate paragraphs and sub-heading in a
webpage? 5
Create an a list of the top five colors you like. 4
Create a list of shopping items you need to buy. 4
Create a small essay about your favorite Meal. 5
INTERVENTION PLAN
Plugged Unplugged
Using the playground, instruct pupils/ Using sheets of paper, pupils/students
students to should
Write a short story on how your List all the necessary tags for text
last holiday was spent using all text publishing in HTML, with an
publishing tags example of how it can be used.
Make a list with both <ol> and <ul>
tags.
Andrew Teaches Coding
CHATPER 4:
FILE ADDRESSES AND
STORAGE
LESSON PLAN: HTML AND THE WEB
Andrew Teaches Coding CHAPTER 4
HTML AND THE WEB FILE ADDRESSES AND
STORAGE A
STARTER (ENTRY BEHAVIOUR)
Scenario 1: How many types of tags are used for text publishing?
Scenario 2: Mention the two (2) types of list?
LESSON OBJECTIVE
At the end of the lesson,
students should be able to:
Know the various methods of storing media files online
and offline.
Know how to use cloud technology for storing media
files.
Know how to include images from stored media and the
web.
Riddles and verbal questioning.
TESTING
Self-paced learning evaluations.
ACTIVITIES Plugged Unplugged
Using the playground, Using Verbal questioning
instruct pupils/students to pupils/students should
Create a complete page provide answers to
structure List types of storage
Insert image in the body medium
of the page structure. What is the difference
between the local storage
and the cloud storage
What is the meaning of
the acronym URL?
KEY LEARNING
Tick learning points achieved
Key Learning by pupils and students
The different mediums of file storage.
The tags used for including images on web interface.
Difference between a local and cloud storage.
REFLECTION
Do your pupil/students
Reflection remembered key points?
What is the tag used to add images to a web interface? Yes No
What storage medium stores your file on the internet? Yes No
What storage medium stores your file on your computer? Yes No
TARGET KNOWLEDGE
Have these knowledge areas
Knowledge Area been transferred into your
pupil's long term memory?
How to upload images? Yes No
How to insert images from different storage location? Yes No
ASSESSMENT OBJECTIVE 1
To measure the students’ knowledge on
the use of image in HTML.
Difficult Rating
Example Question (1 means Easy, 5 means Difficult)
Write a complete HTML structure and insert two (2)
4
images.
List at least 2 examples of cloud storage. 3
INTERVENTION PLAN
Plugged Unplugged
Using the playground, instruct pupils/ Using sheets of paper, pupils/students
students to should
Insert an image from the Write the full meaning of URL.
computer local storage
Insert an image from the cloud.
Using Verbal questioning pupils/
students should provide answers to
Mention at least 2 examples of
cloud storage.
