Coding Class Lesson Plan & Teacher Transcript
Lesson Objective
By the end of this lesson, students will be able to:
- Save a file in HTML format.
- Write a basic webpage using <!DOCTYPE html>, <html>, <head>, <title>, <body>, <h1>,
<p>, <b>, and <i> tags.
Materials Needed
- Computers with a text editor (Notepad, VS Code, Sublime, etc.).
- A web browser (Chrome, Firefox, etc.).
- Projector or large display for demonstration.
- Whiteboard or chart paper for explanations.
Teaching Plan (Time Allocation)
Time Activity
0–5 min Introduction & setting expectations
5–15 min How to save a file in HTML format
15–25 min Structure of a basic HTML page
25–40 min Adding title, heading, and paragraph
40–50 min Making text bold and italic
50–55 min Student practice
55–60 min Review & wrap-up + Take-home exercise
Teacher Transcript (Step-by-Step)
0–5 min: Introduction
Teacher says:
"Hello everyone! Today we’re going to learn how to make our very first webpage. By the
end of the class, you will be able to create and save an HTML file, and when you open it in a
browser, it will display the text you wrote — like magic! HTML is the language that tells the
browser what to show. Think of it like giving instructions to a very obedient robot."
Pause and ask: "Has anyone here visited a website today? Well, what you saw was built
using HTML at the core."
5–15 min: Saving a File in HTML Format
Step-by-step:
1. Open your text editor (Notepad, VS Code, etc.).
2. Type: Hello World!
3. Go to File → Save As…
4. In the file name box, type: myfirstpage.html
5. Set Save as type to All Files (important in Notepad).
6. Click Save.
7. Open the saved file in a browser.
Teacher says:
"Right now, the computer thinks this is just plain text. But when we save it with .html at the
end, it tells the browser, ‘Hey! I’m a webpage.’ Let’s open it in Chrome and see how it looks."
15–25 min: Structure of a Basic HTML Page
Code:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
Hello World!
</body>
</html>
Teacher says:
"This is the skeleton of every webpage. Let’s break it down:
- <!DOCTYPE html> tells the browser that we’re making an HTML5 page.
- <html> starts the page.
- <head> contains settings and information for the browser.
- <title> is what you see on the browser’s tab.
- <body> contains everything you see on the page."
25–40 min: Adding Heading & Paragraph
Code:
<h1>Welcome to My Webpage</h1>
<p>This is my very first webpage. I am learning HTML!</p>
Teacher says:
"Headings are like book chapter titles — <h1> is the biggest one. Paragraphs go inside <p>
tags. They make text nice and readable. We can have multiple paragraphs for more content."
40–50 min: Making Words Bold & Italic
Code:
<p>This is my <b>very first</b> webpage. I am <i>learning HTML</i>!</p>
Teacher says:
"To make words bold, wrap them with <b> and </b>. To make words italic, wrap them with
<i> and </i>. Bold makes text stand out, italic gives it a different style."
50–55 min: Student Practice
Teacher says:
"Now I want you to make your own page:
1. Use an <h1> with your name.
2. Add a <p> saying something about yourself.
3. Make one word bold and one word italic."
55–60 min: Review & Take-Home Exercise
Teacher says:
"Today we learned:
- How to save a file as .html.
- The skeleton of a webpage.
- How to use <h1> and <p>.
- How to make text bold and italic.
For homework, write about a pet in three paragraphs:
• First line in bold.
• Second and third paragraphs in italics.
Example:
<p><b>This is my pet dog, Bruno.</b></p>
<p><i>Bruno is very friendly and loves to play fetch.</i></p>
<p><i>He makes every day more fun.</i></p>"
