The Invisible Skeleton: Building Your First Web Page with HTML
Lesson Overview
In this lesson, students will transition from being web consumers to web creators. We will explore HTML (HyperText Markup Language), the "skeleton" that holds every website on the internet together. By the end of this session, students will have built a "Digital Trading Card" representing themselves or a fictional character.
Learning Objectives
- Identify the purpose of HTML and distinguish it from CSS and JavaScript.
- Demonstrate how to open, close, and nest HTML tags correctly.
- Construct a basic web page structure including headers, paragraphs, lists, and links.
- Apply HTML knowledge to create an organized "Digital Trading Card."
Materials Needed
- Computer or Tablet with internet access.
- A simple text editor (Notepad for Windows, TextEdit for Mac) or an online code editor (CodePen.io or Glitch.com is recommended for beginners).
- "The HTML Cheat Sheet" (provided within the lesson content).
1. Introduction: The Skeleton Analogy (10 Minutes)
The Hook: Imagine you are building a house. Before you pick out the paint colors (CSS) or install the smart-home gadgets (JavaScript), you need the wooden frame. Without the frame, the house falls down. HTML is that frame for the internet.
The "Secret Sauce": Most people think websites are magic. In reality, they are just text files with special instructions called Tags. If you can type, you can build a website.
Quick Check: If HTML is the skeleton, what do you think the "skin" or "clothes" of a website would be called? (Answer: CSS/Design).
2. Body: The "I Do, We Do, You Do" Model (40 Minutes)
I Do: The Anatomy of a Tag (10 Minutes)
Explain that HTML uses "tags" to tell the browser what to do. Most tags come in pairs: an opening tag and a closing tag.
<tagname> This is the content </tagname> <h1> This is a Big Heading </h1> <p> This is a paragraph. </p>
Key Concept: The forward slash / is the "off switch" for a tag. If you forget it, your whole website might turn into one giant bold heading!
We Do: Setting Up the Boilerplate (15 Minutes)
Let's build the "Shell" together. Everyone open your editor and type exactly what I type. This is the standard "Boilerplate" that every website needs to exist.
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Page</title>
</head>
<body>
<h1>Welcome to My Digital Card</h1>
<p>I am learning how to code today!</p>
</body>
</html>
Instruction: Save your file as index.html and open it in a web browser. If you see your heading and paragraph, you are officially a web developer!
You Do: The Digital Trading Card Challenge (15 Minutes)
The Task: Create a digital trading card for yourself, a superhero, or a pet. Your page must include the following "Success Criteria":
- A Main Heading (
<h1>) for the name. - A Sub-heading (
<h2>) for the "Role" (e.g., Space Explorer, Dog Enthusiast). - A short paragraph (
<p>) describing the "Origin Story." - An Unordered List (
<ul>) containing at least 3 "Special Powers" or "Skills" using list items (<li>). - A link (
<a href="...">) to a website you like.
3. Assessment and Feedback
Formative Assessment (During the Lesson)
Walk around (or check digital screens) to ensure students are properly closing tags. Common error: writing <li> Power 1 <li> instead of <li> Power 1 </li>.
Summative Assessment (End of Lesson)
Peer Review: Have students "swap" computers or links. Each student must find one thing their partner did well and one tag they used correctly. If the link works and the list is formatted correctly, they have mastered the lesson.
4. Differentiation: Scaffolding and Extensions
For Students Needing Support:
Provide a "Fill-in-the-Blanks" template where the tags are already written, and they just need to add the text between the opening and closing tags.
For Advanced Students (The "Level Up" Challenges):
- Image Challenge: Research the
<img>tag and try to add a profile picture to your card. (Note: Mention that img tags are "self-closing"!). - CSS Sneak Peek: Inside the
<body>tag, try addingstyle="background-color: powderblue;"and see what happens. - Ordered Lists: Change the
<ul>to an<ol>. What changes on the page?
5. Conclusion: Closure and Recap (5 Minutes)
Recap: Today we learned that HTML is a markup language, not a programming language. It uses tags to define the structure of a page.
- What does the
<h1>tag do? (Makes a large heading). - What is the difference between
<ul>and<ol>? (Bullets vs. Numbers). - Why is the
/in a tag important? (It tells the browser the instruction is finished).
Real-World Application: Next time you are on your favorite website, right-click and select "View Page Source." You will see thousands of lines of HTML. It looks scary, but now you know the "skeleton" they are using!