HomePrimary 5ComputerHyper Text Mark-up Language (HTML) document Identify HTML tags HTML document structure Learning HTML syntax

Hyper Text Mark-up Language (HTML) document Identify HTML tags HTML document structure Learning HTML syntax

Lesson Plan: Information Technology (IT)

Subject: Information Technology (IT)
Class: Primary 5
Term: Second Term
Week: Week 10
Age: 10–11 years
Topic: Hyper Text Mark-up Language (HTML) Document
Sub-topic:

  • Identifying HTML Tags
  • HTML Document Structure
  • Learning HTML Syntax

Duration: 60 minutes

Behavioural Objectives:

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

  1. Define HTML and explain its purpose in web development.
  2. Identify and explain common HTML tags.
  3. Understand and demonstrate the structure of a basic HTML document.
  4. Learn and apply HTML syntax to create simple web pages.
  5. Define internet safety and describe ways to stay safe online.

Keywords:

  • HTML (Hyper Text Markup Language)
  • Tags
  • Syntax
  • Structure
  • <h1>, <p>, <img>, <ul>, <li>
  • Internet Safety

Learning Materials:

  • Internet access
  • Email client (e.g., Gmail, Outlook, Yahoo Mail)
  • Computer/laptop for each student
  • Wall charts
  • Audio-Visual projector for presentations
  • Whiteboard and markers
  • Printed handouts with sample HTML code

Introduction (5 minutes):

Start the lesson by engaging the students in a brief discussion about websites. Ask them if they have ever visited a website and what they think makes a website look attractive and organized. Then, introduce HTML as the “language” used to make websites look nice and structured.

Discussion Prompts:

  1. “What makes a website look neat and organized?”
  2. “Have you ever wondered how web pages are created?”

Transition:
Explain that today’s lesson will teach them about the code that creates websites, focusing on HTML (HyperText Markup Language), and they will learn about HTML tags, structure, and how to create simple webpages.

Direct Instruction (20 minutes):

What is HTML?

Explain that HTML stands for HyperText Markup Language, which is the language used to create the structure of a website. Use relatable examples, such as writing a report or creating a list, to help students understand how HTML helps structure content on a webpage.

Common HTML Tags and Their Functions:

  • <h1> to <h6> – Heading tags for text size and importance.
    • Example: <h1>Welcome to My Website</h1>
  • <p> – Paragraph tag used to display text in a paragraph.
    • Example: <p>This is a paragraph of text.</p>
  • <ul> and <li> – Unordered list and list item tags.
    • Example:
      html
      <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      </ul>
  • <img> – Image tag used to add images to a webpage.
    • Example: <img src="image.jpg" alt="A description of the image">

HTML Syntax:

  • HTML tags always come in pairs: one to open and one to close.
    • For example: <h1>Welcome</h1> where <h1> is the opening tag, and </h1> is the closing tag.

HTML Document Structure:

Show the students the basic structure of an HTML document:

html
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example of an HTML document.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>

Explain each part of the document:

  1. <!DOCTYPE html>: Tells the browser that the file is an HTML document.
  2. <html>: The root element that contains all the content.
  3. <head>: Contains metadata, like the document title.
  4. <title>: Specifies the title of the webpage.
  5. <body>: Contains the visible content of the webpage (text, images, etc.).

Demonstration:
Using the projector, show students how a basic webpage can look when these tags are applied.

Guided Practice (30 minutes):

  1. Activity 1 (Pair Work):
    Divide students into pairs and provide them with printed HTML code examples. Ask them to identify the tags and explain their functions to each other. Walk around the class to provide guidance and answer questions.
  2. Activity 2 (Hands-On HTML Document Creation):
    Provide each student with a template HTML document and ask them to add headings, paragraphs, and an unordered list. Encourage students to be creative and experiment with the tags learned.

    • Example template for students to work on:
      html
      <!DOCTYPE html>
      <html>
      <head>
      <title>My First Webpage</title>
      </head>
      <body>
      <h1>My First Webpage</h1>
      <p>This is a paragraph about my favorite hobby.</p>
      <ul>
      <li>Reading</li>
      <li>Soccer</li>
      <li>Coding</li>
      </ul>
      </body>
      </html>

Collaboration and Feedback: As students work, encourage them to collaborate and review each other’s code. Ask them to explain the choices they made in their HTML documents.

Independent Practice (30 minutes):

  1. Individual Work:
    Hand out a new set of instructions for students to build their own HTML webpage. They should create a webpage about their favorite subject and include at least three sections (using <h1>, <p>, <ul>, and <img> tags).

    • Example: “Create a webpage about your favorite subject (e.g., math, music, or history) that includes:
      • A heading (<h1>)
      • A paragraph (<p>)
      • A bulleted list (<ul>)
      • An image (`<img src=”yourimage.jpg”>)”
  2. Encourage creativity:
    Tell students to be creative by adding more elements such as images and links to make the webpage unique.

Closure (5 minutes):

Recap the lesson by discussing the key concepts:

  • What HTML is and why it is used to structure websites.
  • Common HTML tags and their functions.
  • Basic HTML document structure.

Questions to Ask Students:

  • “What does the <h1> tag do?”
  • “Can anyone give an example of a tag used for adding images?”
  • “What part of an HTML document would you place the title of the webpage in?”

Homework Assignment (optional):
Ask students to create a webpage at home that showcases a subject they enjoy. They should include at least three headings, a paragraph, a list, and an image.

Evaluation:

Fill-in-the-Blank Questions:

  1. The first line of an HTML document is ____________.
  2. The <head> tag in an HTML document is used to contain ____________.
  3. The <title> tag in an HTML document is used to specify the ____________ of the website.
  4. The <body> tag in an HTML document is used to contain ____________ on the website.
  5. The <h1> tag in an HTML document is used to create a ____________.

Multiple Choice Questions:

  1. What does HTML stand for? A) Hypertext Markup Language
    B) Hyperlink Text Markup Language
    C) Hypertext Markdown Language
    D) Hyperlink Text Markdown Language
  2. What is the purpose of using HTML in web development? A) To create and design the layout of a website
    B) To add interactivity to a website
    C) To create and manage databases
    D) To add security to a website
  3. Which tag is used to create a heading in HTML? A) <h1>
    B) <head>
    C) <title>
    D) <header>
  4. How do you add an image to an HTML document? A) <img src="image.jpg">
    B) <image src="image.jpg">
    C) <picture src="image.jpg">
    D) <src img="image.jpg">
  5. What is the purpose of the <p> tag in HTML? A) To create a heading
    B) To create a paragraph of text
    C) To create a list item
    D) To create an image

Assessment Method:

  • Observe student participation during guided practice.
  • Review their independent work for understanding and proper usage of HTML syntax.
  • Check the completion and creativity of their HTML documents.
  • Provide feedback on their learning and encourage further practice.

This detailed lesson plan allows students to explore HTML while applying practical knowledge in a creative manner. It also fosters a collaborative environment while ensuring individual comprehension through active practice.

Spread the word if you find this helpful! Click on any social media icon to share

Recommend Posts :

  1. Understanding Electronic Mails: A Primary 5 Computer Studies
  2. Emails : Writing and sending emails, Receiving and replying emails and attaching files to emails
  3. Internet safety : Definition, Safe internet uses and Online treats
  4. Examination Questions Primary 5 Second Term Information Technology Lesson
  5. The Internet Computer Studies Primary 5 Second Term Lesson Notes Week 5
  6. Primary 5 Second Term Information Technology Lesson Notes
  7. Primary 5 Second Term Revision Test Computer Studies ICT
  8. Computer Basics Quiz for Grade 5
  9. Computer Studies Primary 5 Third Term Test The full meaning of www is
  10. Third Term Examinations Primary 5 ICT
Tags:, ,