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

Subject : Information Technology (IT)

Class :Primary 5

Term :Second Term

Week :Week 10

Topic :

Hyper Text Mark-up Language (HTML) document

Identify HTML tags

HTML document structure

Learning HTML syntax

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

  • Define internet safety
  • Outline ways of using the internet
  • Online and Internet safety
  • Define online treats
  • Outline types of online treat

Learning Activities

  • Pupils discuss the meaning of Internet safety and online treats

Embedded Core Skills

  • Critical thinking
  • Collaboration and communication
  • Personal development
  • Digital Literacy

Materials Needed:

  • Internet access
  • Email client (e.g. Gmail, Outlook, Yahoo mail)
  • Computer/laptop for each student
  • Wall charts
  • Audio Visual
  • Projector

Content

Hyper Text Mark-up Language (HTML) document

Identify HTML tags

HTML document structure

Learning HTML syntax

HTML is a language used to create websites. It stands for Hypertext Markup Language.

Imagine you are making a book report for a class project. You would write the story and add pictures, headings, and bullet points to make it look nice and organized. HTML is like the instructions for making a website look nice and organized.

For example, if you want to make a heading for the title of your book report, you would use the <h1> tag. So, the title “Harry Potter and the Sorcerer’s Stone” would be written like this in HTML: <h1>Harry Potter and the Sorcerer’s Stone</h1>.

If you want to add a picture of Harry Potter to your report, you would use the <img> tag. The image source would be added to the tag <img src=”harrypotter.jpg”>.

And if you want to make a list of characters in the story, you would use the <ul> tag for unordered list, and <li> tag for each list item. Like this:

<ul> <li>Harry Potter</li> <li>Ron Weasley</li> <li>Hermione Granger</li> </ul>So, HTML is the code that makes websites look nice, organized and easy to read.

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript

Headers

The <header> HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements

Compression

The most common compression scheme is GZIP, which is a file format that uses a lossless compression algorithm called DEFLATE. The algorithm looks for repeat occurrences of text in the HTML file, then replaces those repeat occurrences with references to a previous occurrence.

Space

Since there is no blank space keyboard character in HTML, you must type the entity &nbsp; for each space to add. To insert blank spaces in text in HTML, type &nbsp; for each space to add. For example, to create five blank spaces between two words, type the &nbsp; entity five times between the words.

Purpose

HTML (HyperText Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables

 

Evaluation 

  1. What does the acronym 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 of the following is NOT a basic HTML tag? A) <p> B) <div> C) <table> D) <dog>
  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. How do you create a link to another webpage in HTML? A) <link href=”https://www.example.com”>Example</link> B) <link src=”https://www.example.com”>Example</link> C) <a href=”https://www.example.com”>Example</a> D) <a src=”https://www.example.com”>Example</a>
  6. Which tag is used to create a heading in HTML? A) <h1> B) <head> C) <title> D) <header>
  7. How do you create a bulleted list in HTML? A) <ul> B) <ol> C) <li> D) <list>
  8. How do you create a table in HTML? A) <table> B) <list> C) <grid> D) <spreadsheet>
  9. How do you add a background color to a webpage using HTML? A) <body color=”color”> B) <background color=”color”> C) <body style=”background-color:color;”> D) <bgcolor=”color”>
  10. Which tag is used to create a line break in HTML? A) <br> B) <break> C) <lb> D) <line>

 

 

 Identify HTML tags

HTML tags are like labels that tell the browser how to display the content on a web page. They look like this: <tagname>.

For example, if you want to make a heading for the title of your book report, you would use the <h1> tag. So, the title “Harry Potter and the Sorcerer’s Stone” would be written like this in HTML: <h1>Harry Potter and the Sorcerer’s Stone</h1>.

If you want to add a picture of Harry Potter to your report, you would use the <img> tag. The image source would be added to the tag <img src=”harrypotter.jpg”>.

And if you want to make a list of characters in the story, you would use the <ul> tag for unordered list, and <li> tag for each list item. Like this:

<ul> <li>Harry Potter</li> <li>Ron Weasley</li> <li>Hermione Granger</li> </ul>So, HTML tags are the labels that tell the browser how to display the content on a web page. They are used to format text, add images, create links, and much more.

It’s important to note that HTML tags always come in pairs, one to open and one to close the element. So, the <h1> tag is opened at the beginning and closed at the end of the heading text with a </h1> tag.

HTML document structure

An HTML document is like a blueprint for a website. It has different parts that work together to create the final website. Here’s a basic example of an HTML document structure:

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>Here’s some information about my website.</p>
<ul>
<li>We have games</li>
<li>We have videos</li>
<li>We have fun facts</li>
</ul>
</body>
</html>
  • The first line <!DOCTYPE html> is a declaration that tells the browser that this is an HTML document.
  • The <html> tag is the container for all the other HTML tags. It’s like the cover of a book.
  • The <head> tag contains information about the website, such as the title of the website, which is displayed in the browser tab.
  • The <title> tag is where you put the title of the website.
  • The <body> tag contains all the visible content on the website, such as text, images, and links.
  • The <h1> tag is used to create a heading.
  • The <p> tag is used to create a paragraph of text.
  • The <ul> tag is used to create an unordered list and the <li> tag is used to create a list item.

In this example, the final webpage would have a heading “Welcome to My Website!” and a few paragraphs of text, and a list of items “We have games”, “We have videos”, “We have fun facts”

It’s important to note that the structure of an HTML document is very important, as it determines how the website is displayed and functions. Each tag must be properly nested and closed to ensure that the website is displayed correctly.

Evaluation

  1. Which of the following is the first line of an HTML document? a. <html> b. <!DOCTYPE html> c. <head>
  2. What is the purpose of the <head> tag in an HTML document? a. To contain all the visible content on the website b. To contain information about the website, such as the title c. To create a heading
  3. What is the purpose of the <title> tag in an HTML document? a. To create a heading b. To create a paragraph of text c. To specify the title of the website, which is displayed in the browser tab
  4. What is the purpose of the <body> tag in an HTML document? a. To contain information about the website, such as the title b. To contain all the visible content on the website c. To create an unordered list
  5. What is the purpose of the <h1> tag in an HTML document? a. To create a heading b. To create a paragraph of text c. To create an unordered list
  6. What is the purpose of the <p> tag in an HTML document? a. To create a heading b. To create a paragraph of text c. To create an unordered list
  7. What is the purpose of the <ul> tag in an HTML document? a. To create an unordered list b. To create a heading c. To create a paragraph of text
  8. What is the purpose of the <li> tag in an HTML document? a. To create a list item in an unordered list b. To create a heading c. To create a paragraph of text
  9. What is the relationship between the <html> tag and the <head> tag in an HTML document? a. They have no relationship b. The <head> tag is a child of the <html> tag c. The <html> tag is a child of the <head> tag
  10. What is the purpose of the <!DOCTYPE html> in an HTML document? a. To create a heading b. To create a paragraph of text c. To specify that this is an HTML document to the browser

Fill in the gap

  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 ________.
  6. The <p> tag in an HTML document is used to create a ________ of text.
  7. The <ul> tag in an HTML document is used to create an ________ list.
  8. The <li> tag in an HTML document is used to create a ________ item in a list.
  9. The <html> tag in an HTML document is the container for all the other HTML tags and is like the ________ of a book.
  10. The <!DOCTYPE html> in an HTML document is used to tell the browser that this is an ________ document

Learning HTML syntax

HTML stands for Hypertext Markup Language. It is a language that is used to create websites. Just like any other language, HTML has its own set of rules and syntax that you need to learn in order to create a website.

HTML syntax is made up of tags. A tag is a bit of code that tells the browser what to do. For example, the <p> tag is used to create a paragraph of text. The <h1> tag is used to create a heading. And the <img> tag is used to add an image to a website.

Each tag has an opening and closing tag. The opening tag tells the browser to start doing something and the closing tag tells the browser to stop doing it. For example, to create a paragraph of text you would use the <p> tag to start the paragraph and the </p> tag to end the paragraph.

Here’s an example of how you would use the <p> tag to create a paragraph of text:

<p>This is a paragraph of text.</p>

And here’s an example of how you would use the <h1> tag to create a heading:

<h1>This is a heading</h1>

It’s important to remember that each HTML tag has its own purpose and should be used in the correct way. If you use the wrong tag for something, it might not show up correctly on the website.

By learning the basic HTML syntax, you will be able to create simple web pages and improve your coding skills.

Evaluation

  1. What does HTML stand for? a. Hypertext Markup Language b. Hyperlink Markup Language c. Hypermedia Markup Language
  2. What is a tag in HTML? a. A set of instructions for the browser b. A way to organize website content c. A bit of code that tells the browser what to do
  3. Which tag is used to create a paragraph of text? a. <h1> b. <p> c. <img>
  4. How do you create a heading in HTML? a. <h1>This is a heading</h1> b. <p>This is a heading</p> c. <img>This is a heading</img>
  5. What is the purpose of the opening tag in HTML? a. To tell the browser to start doing something b. To tell the browser to stop doing something c. To create a new line of text
  6. What is the purpose of the closing tag in HTML? a. To tell the browser to start doing something b. To tell the browser to stop doing something c. To create a new line of text
  7. How do you add an image to a website in HTML? a. <img src=”image.jpg”> b. <p>image.jpg</p> c. <h1>image.jpg</h1>
  8. What happens if you use the wrong tag for something in HTML? a. It will not show up correctly on the website b. It will change the font size c. It will change the color of the text
  9. How is HTML syntax different from other languages? a. It uses tags instead of words b. It is not case sensitive c. It is not used to create websites
  10. What is the main goal of learning HTML syntax? a. To create more complex websites b. To improve coding skills c. To understand how the internet works

Fill the gaps

  1. HTML stands for ______________.
  2. A ______________ is a bit of code that tells the browser what to do.
  3. The <p> tag is used to create a ______________ of text.
  4. The <h1> tag is used to create a ______________.
  5. The <img> tag is used to add an ______________ to a website.
  6. Each HTML tag has an ______________ and ______________ tag.
  7. The opening tag tells the browser to ______________ doing something.
  8. The closing tag tells the browser to ______________ doing something.
  9. Each HTML tag has its own ______________ and should be used in the correct way.
  10. By learning the basic HTML ______________, you will be able to create simple web pages and improve your coding skills

Lesson Presentation

Introduction (5 minutes):

  • Begin the lesson by introducing the topic of HTML and explaining that it is the language used to create websites.
  • Show students a basic website and ask them to identify the different parts (text, images, links, etc.)
  • Ask students what they think HTML might stand for and what it might be used for.

Direct Instruction (20 minutes):

  • Provide a brief overview of HTML syntax, including the use of tags, opening and closing tags, and attributes.
  • Show students examples of common HTML tags and their uses (such as <p> for paragraphs and <img> for images)
  • Have students practice writing a few lines of HTML code on their own using the examples provided.

Guided Practice (30 minutes):

  • Have students work in pairs or small groups to create a simple HTML document using the tags and syntax they have learned.
  • Provide assistance and answer any questions as needed.
  • Have students share their documents with the class and discuss any similarities or differences they notice.

Independent Practice (30 minutes):

  • Provide students with a webpage template and ask them to add different elements to it using the HTML tags they have learned.
  • Encourage students to be creative and add their own text, images, and links to the template.
  • Monitor students as they work and provide feedback as needed.

Closure (5 minutes):

  • Review the key concepts covered in the lesson, including HTML syntax and structure.
  • Remind students that HTML is the foundation for creating web pages and that they can continue to learn more about it as they move forward.
  • Assign homework, if any, related to the topic.

Assessment:

  • Observe students as they work on their independent practice, taking note of their understanding of the concepts covered in the lesson.
  • Collect and review their final HTML documents to assess their understanding of HTML syntax and structure.
  • Use the questions on the topic of HTML syntax and structure to quizzes students understanding.
Spread the word if you find this helpful! Click on any social media icon to share

Recommended Posts:

  1. Primary 5 Second Term Information Technology Lesson Notes
  2. Internet Search Engines
  3. Emails : Definition, Creation and Explaining menus on the mail interface
  4. Emails : Writing and sending emails, Receiving and replying emails and attaching files to emails
  5. Internet safety : Definition, Safe internet uses and Online treats
  6. Primary 5 Second Term Revision Test Computer Studies ICT
  7. Computer Basics Quiz for Grade 5
  8. Information Communication Technology PRIMARY 5 ICT FIRST TERM
  9. PRIMARY 5 FIRST TERM LESSON COMPUTER STUDIES ICT 🖥
  10. Estimation and Approximation
Tags:, , , ,