Setting up the HTML Document Computer Studies Primary 5 Third Term Lesson Notes Week 8
Discover HTML: Building Your First Web Page
Subject: Computer Studies
Class: Primary 5
Term: Third Term
Week: 8
Topic: Setting up the HTML Document
Duration: 45 minutes
Behavioural Objectives:
- Students will understand how to set up an HTML document.
- Students will be able to identify HTML tags and their purposes.
- Students will learn the importance of metadata in HTML.
Key Vocabulary Words:
- HTML
- Text editor
- <!DOCTYPE html>
- <html>
- <head>
- <body>
- <title>
- <meta>
- Extension
Learning Resources and Materials:
- Textbooks: Lagos State Scheme of Work for Primary 5 Computer Studies
- Visual aids: Images showing HTML tags and examples
- Computers or tablets with text editors installed
- Worksheets on HTML document structure
Building Background / Connection to Prior Knowledge:
- Review with students the concept of writing and saving documents on computers.
- Introduce the idea of HTML as a language used to create web pages.
Embedded Core Skills:
- Information literacy
- Digital literacy
- Problem-solving
Content:
- Introduction to HTML and its importance in creating web pages.
- Explanation of each step in setting up an HTML document, including choosing a text editor, using <!DOCTYPE html>, enclosing content with <html> tags, adding a language attribute, etc.
Setting up the HTML Document:
- Choose a text editor: 🖥️
- Use software like Visual Studio Code or Sublime Text to write your HTML code.
- Start with <!DOCTYPE html>: 📜
- This tells the browser that the document is written in HTML.
- Enclose content with <html> tags: 🏷️
- Use <html> at the beginning and </html> at the end to wrap your HTML code.
- Add a language attribute: 🌐
- Inside the <html> tag, add lang=”en” (for English) or another language code.
- Add head and body sections: 📑
- Separate your HTML content into <head> and <body> sections.
- Add a title in the head section: 📝
- Inside the <head> section, use <title> to give your webpage a title.
- Add HTML elements in the body section: 🧩
- Use tags like <p>, <h1>, <ul>, and <img> to structure your content.
- Set metadata with the <meta> tag: 🏷️
- Use <meta> tags to specify metadata like page title and character encoding.
- Save the file with a .html extension: 💾
- When you’re done, save your file with a .html extension to make it an HTML document.
Class Activity Discussion about Setting up the HTML Document:
- What do you need to start creating an HTML document?
- You need a text editor like Visual Studio Code.
- What is the first line of an HTML document?
- It starts with <!DOCTYPE html>.
- How do you enclose the content of an HTML document?
- You use <html> tags at the beginning and </html> tags at the end.
- Why is a language attribute added to the <html> tag?
- It specifies the language used in the document.
- What are the two main sections of an HTML document?
- The head and body sections.
- Where do you add the title of the HTML document?
- In the head section using the <title> tag.
- What type of content goes in the body section of an HTML document?
- HTML elements like paragraphs, headings, and images.
- How do you set metadata in an HTML document?
- You use the <meta> tag to specify page title and character encoding.
- What file extension do you use when saving an HTML document?
- .html extension.
- Can you name a text editor you can use for writing HTML code?
- Visual Studio Code, Sublime Text, or Atom.
- Why is the <!DOCTYPE html> declaration important?
- It tells the browser which version of HTML is being used.
- What is the purpose of the <html> tags in an HTML document?
- They enclose all the content of the document.
- What information is typically included in the head section of an HTML document?
- Metadata like page title and character encoding.
- How do you specify the language of an HTML document?
- By adding a language attribute to the <html> tag.
- What is the significance of saving the HTML document with a .html extension?
- It tells the computer that the file contains HTML code.
Evaluation
- How do you start an HTML document?
- a) <!DOCTYPE html>
- b) <html>
- c) <head>
- d) <title>
- What do you use to enclose the content of an HTML document?
- a) <!DOCTYPE html>
- b) <html>
- c) <head>
- d) <title>
- Which tag is used to specify the language of the HTML document?
- a) <html>
- b) <head>
- c) <meta>
- d) <body>
- Where do you add the title of the HTML document?
- a) <head>
- b) <body>
- c) <title>
- d) <meta>
- What section contains the main content of the HTML document?
- a) <head>
- b) <body>
- c) <meta>
- d) <!DOCTYPE html>
- How do you save an HTML document?
- a) With a .css extension
- b) With a .js extension
- c) With a .html extension
- d) With a .txt extension
- What is the purpose of the <meta> tag in HTML?
- a) To add a title to the document
- b) To specify the language of the document
- c) To enclose the content of the document
- d) To set metadata like page title and character encoding
- Which tag starts the HTML document structure?
- a) <html>
- b) <head>
- c) <body>
- d) <!DOCTYPE html>
- What comes after the <!DOCTYPE html> declaration?
- a) <html>
- b) <head>
- c) <meta>
- d) <body>
- Where do you add HTML elements like paragraphs and headings?
- a) <head>
- b) <meta>
- c) <body>
- d) <title>
- What tag contains the title of the HTML document?
- a) <html>
- b) <head>
- c) <title>
- d) <meta>
- What tag encloses the metadata of the HTML document?
- a) <html>
- b) <head>
- c) <title>
- d) <meta>
- What section specifies the language of the HTML document?
- a) <html>
- b) <head>
- c) <meta>
- d) <body>
- Which tag is used to create the body of the HTML document?
- a) <html>
- b) <head>
- c) <meta>
- d) <body>
- How do you denote the end of the HTML document?
- a) </html>
- b) </head>
- c) </title>
- d) </meta>
Presentation:
- Show examples of HTML documents and highlight the different tags used. Microsoft Word, Microsoft Excel, Microsoft PowerPoint Computer Studies Primary 5 Third Term Lesson Notes Week 6
- Use visual aids to illustrate each step of setting up an HTML document.
- Encourage student participation by asking questions and inviting them to identify HTML tags.
Teacher’s Activities:
- Presenting information about HTML document structure.
- Demonstrating how to use HTML tags.
- Guiding students through hands-on activities on computers or tablets.
Learners’ Activities:
- Participating in class discussions.
- Practicing writing HTML code on computers or tablets.
- Completing worksheets to reinforce learning.
Assessment:
- Observing students’ participation and engagement during activities.
- Reviewing completed worksheets to assess understanding.
Evaluation Questions:
- What is the first line of an HTML document called?
- How do you enclose the content of an HTML document?
- What tag is used to specify the language of the HTML document?
- Where do you add the title of the HTML document?
- What section contains the main content of the HTML document?
- How do you set metadata in an HTML document?
- What file extension do you use when saving an HTML document?
- Can you name a text editor used for writing HTML code?
- Why is the <!DOCTYPE html> declaration important?
- What is the purpose of the <meta> tag in HTML?
Conclusion: The teacher goes around to review students’ worksheets and provide feedback on their understanding of setting up an HTML document. Any misconceptions are addressed before concluding the lesson