Lesson Plan: Introduction to HTML and CSS

Details

Subject: Technology (Digital Technologies)
Year Level: Year 13 (NZ Curriculum Level 8)
Duration: 60 minutes
Class size: 40 students
Curriculum Area: Technology - Digital Technologies
Standards Referenced:
- Technology in the New Zealand Curriculum
- NCEA Level 3 Technology Achievement Standards

Learning Objectives

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

Understand the fundamental concepts of HTML (Hypertext Markup Language).
Create basic HTML documents using common tags such as <html>, <head>, <title>, <body>, <h1>, <p>, <a>, and <img>.
Apply CSS (Cascading Style Sheets) to HTML documents to alter colour, font, and layout.
Understand and apply inline, internal, and external CSS in HTML documents.

Resources Needed

Computers with internet access for each student.
Text editor software (e.g., Visual Studio Code, Sublime Text).
Access to W3Schools HTML Tutorial and W3Schools CSS Tutorial.
Projector and screen for demonstrations.

Lesson Structure

Introduction (10 minutes)

Overview of HTML and CSS: Brief explanation about what HTML and CSS are and how they work together to create styled web pages.
Importance in Web Development: Discuss the role of HTML and CSS in web development within the context of the New Zealand technology sector.

Activity 1: Basic HTML Document (15 minutes)

Task: Students will create a basic HTML document including headings, paragraphs, links, and images.
Guidance:
- Use W3Schools as a reference point.
- Demonstrate on the projector how to start a basic HTML document.
- Students will replicate this on their computers.

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My HTML Page</h1>
    <p>This is a paragraph of text!</p>
    <a href="https://www.google.com">Visit Google</a>
    <img src="image.jpg" alt="Descriptive Image Text">
</body>
</html>

Activity 2: Styling with CSS (20 minutes)

Task: Students will add CSS to their HTML document to modify text colours, font types, and layout.
Methods of Applying CSS:
- Inline CSS
- Internal CSS
- External CSS (time-permitting)
Demonstration and Practice:
- Show examples on the projector.
- Students apply CSS to their own HTML documents.

/* External CSS file */
body {
    background-color: lightblue;
}
h1 {
    color: navy;
    font-family: Arial;
}
p {
    font-size: 20px;
}

Conclusion and Discussion (10 minutes)

Review of Key Concepts: Recap what has been covered about HTML and CSS.
Discussion:
- Ask students about the challenges they faced.
- Discuss how these skills apply to real-world web development.
Homework/Extension:
- Students are encouraged to enhance their web page by adding more CSS styles and experimenting with different HTML tags.

Assessment

Formative Assessment: Observe student engagement and provide feedback during the activities.
Summative Assessment: Review the final HTML and CSS files to assess understanding and correct application of the coding practices.

This lesson plan introduces students to the basic but essential skills required for web development, aligning with the goals and objectives of the New Zealand Curriculum at Level 8 of Technology, preparing students for potential pathways in digital technologies and web development. For further resources, educators can go to the TKI Technology Section or explore the NCEA standards linked above.

HTML and CSS Basics.

Teaching Instructions