Objective: Understand the basics of HTML and learn to use simple tags to enhance Google Sites pages.
1. Introduction to HTML
Goal: Discuss what HTML is, why it's important, and the basic structure of an HTML document.
Activities:
Welcome and Introduction:
Briefly introduce the day's lesson.
Ask if anyone has heard of HTML and what they think it might be used for.
What is HTML?:
Explain that HTML stands for HyperText Markup Language.
Describe how HTML is used to create web pages and is a foundational technology of the internet.
Importance of HTML:
Discuss why HTML is important and how it allows us to structure content on the web.
Show a simple HTML document structure on the screen:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph.</p>
</body>
</html>
2. Basic HTML Tags
Goal: Teach the <h1> and <p> tags, explaining how they are used for headings and paragraphs, respectively.
Activities:
Introduction to <h1> Tag:
Explain that <h1> is used to define the most important heading on a web page.
Show an example:
<h1>This is a Heading</h1>
Demonstrate how changing the text inside the <h1> tag changes the heading displayed on the page.
Show how headings can be nested, e.g., <h1>, <h2>, <h3>.
Introduction to <p> Tag:
Explain that the <p> tag is used to define a paragraph of text.
Show an example:
<p>This is a paragraph.</p>
Demonstrate how text within the <p> tags appears as a paragraph on the web page.
Live Demonstration:
Demonstrate how to add <h1> and <p> tags to a Google Sites page.
Show a step-by-step process:
Open the Google Sites website.
Create a new page.
Insert > Embed > Embed Code: Add a heading and a paragraph using the tags.
3. Hands-on Activity
Goal: Students will update their Google Sites by adding a heading and a paragraph about themselves or their favorite subject at school.
Activities:
Setup and Instructions:
Instruct students to log in to their Google Sites accounts.
Guide them to the page they will be editing.
Recap the tags learned: <h1> and <p>.
Adding a Heading:
Students will add a heading to their Google Sites page about themselves or their favorite subject.
Example instruction: "Add a heading using the <h1> tag that says 'About Me' or 'My Favorite Subject'."
Adding a Paragraph:
Students will add a paragraph under their heading using the <p> tag.
Example instruction: "Add a paragraph using the <p> tag that describes yourself or explains why you like your favorite subject."
Wrap-up:
Review:
Recap what was learned today: the purpose of HTML, and how to use <h1> and <p> tags.
Encourage students to explore other HTML tags in their own time.