Building a Simple Website

Lesson Overview

Subject: Technology
Grade: 10th Grade
Time: 40 minutes
Class Size: 20 students
Curriculum Area: Computer Science - Web Development (US education standards: CSTA K-12 Computer Science Standards, Level 3B - high school)

Objectives

By the end of this lesson, students will be able to:

Understand the basic structure of an HTML document.
Create a simple web page using HTML tags.
Use HTML to format text and add links.
Preview their work in a web browser.

Materials Needed

Computers with internet access for each student
Text editor software (e.g., Notepad++, VS Code)
Whiteboard and markers
Printed handout with common HTML tags (optional)

Lesson Outline

Introduction (5 minutes)

Engage: Start the class by asking students if they've ever wondered how the websites they use every day are built. Share a quick 1-minute anecdote demonstrating the importance and ubiquitous nature of websites in the digital age.
Objective Overview: Explain the goal of today’s lesson: to learn the basics of creating a webpage using HTML. Highlight that this skill is foundational for anyone interested in web development and technology careers.

Direct Instruction (15 minutes)

Understanding HTML:
- Introduce students to HTML (HyperText Markup Language) as the standard language used to create web pages.
- Explain the basic structure of an HTML document: doctype declaration, <html>, <head>, and <body> tags.

Core HTML Tags:

Demonstrate how to set up a simple HTML document skeleton using:

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This is my first paragraph.</p>
        <a href="https://www.example.com">Visit Example.com</a>
    </body>
</html>

Highlight the use of headings, paragraphs, and links.

Interactive Exploration:
- Project a simple example on the board, explaining each part of the code and its purpose.

Guided Practice (10 minutes)

Create a Web Page:
- Guide students to open a text editor on their computers.
- Instruct students to replicate the example code, encouraging them to replace the text with their personalized content.
Preview and Debug:
- Teach students how to save their file with a .html extension and preview their page in a web browser.
- If errors occur, guide them to debug by checking for omitted tags or syntax errors.

Independent Practice (8 minutes)

Enhance Your Page:
- Challenge students to add an additional feature to their page, such as another heading or paragraph, or even a new link of their choice.
- Encourage creativity while maintaining the structure.

Conclusion and Reflection (2 minutes)

Wrap-Up: Recap the main points covered in the lesson. Emphasize the simplicity and power of HTML in creating web pages.
Reflect: Ask students to think about what they found surprising or exciting in building their first web page. Encourage them to share a thought or idea with the person next to them.

Extension Activity (Optional)

If students finish early or show particular interest, provide an extension challenge:

Introduce the concept of using inline styles or basic CSS to change text color or background color within their HTML file.

Assessment

Informal observation during guided and independent practice.
Collection and review of student-created HTML pages to ensure comprehension of basic tags and structure.

Standards Alignment

CSTA K-12 Computer Science Standards:
- Demonstrate the use of HTML to create web pages at a Level 3B complexity.
- Understand how abstractions are modeled to represent data in a web format.

By engaging students in this practical, interactive approach to learning HTML, teachers can create an enjoyable and effective lesson that not only aligns with educational standards but also encourages the exploration of technology and web development.

Building a Simple Website

Teaching Instructions

Building a Simple Website

Lesson Overview

Objectives

Materials Needed

Lesson Outline

Introduction (5 minutes)

Direct Instruction (15 minutes)

Guided Practice (10 minutes)

Independent Practice (8 minutes)

Conclusion and Reflection (2 minutes)

Extension Activity (Optional)

Assessment

Standards Alignment

Create Your Own AI Lesson Plan

Free Worksheets for Technology