Lesson Plan: Introduction to HTML and CSS
Grade Level: 11
Subject: Computer Science
Duration: 30 minutes
Topic: HTML and CSS
Learning Objectives
By the end of this lesson, students will be able to:
- Understand the basic structure of an HTML document.
- Identify common HTML tags and their purposes.
- Define CSS and explain its role in web development.
- Apply fundamental CSS styles to HTML elements.
Materials Needed
- Projector or smartboard
- Computer with internet access for each student
- Text editor (e.g., Visual Studio Code, Notepad++)
- Sample HTML and CSS files (prepared in advance)
Lesson Outline
Introduction (5 minutes)
- Begin with a brief discussion on the importance of web development.
- Ask students if they have any prior experience with HTML or CSS.
- Explain the significance of HTML as the backbone of web pages and CSS as the styling language.
Basic Structure of an HTML Document (10 minutes)
Key Components
-
HTML Tags: Explain the concept of tags using the <html>, <head>, and <body> tags.
-
Example Structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
-
Discuss each component briefly: Doctype declaration, HTML element, Head element, Body element.
Common HTML Tags (5 minutes)
- Introduce students to some common HTML tags:
<h1> to <h6> for headings<p> for paragraphs<a> for links<img> for images<ul> and <ol> for lists
- Encourage students to take notes on these tags.
Introduction to CSS (5 minutes)
- Define CSS (Cascading Style Sheets).
- Explain how CSS is used to control the presentation of HTML elements.
- Mention the concept of "Separation of Concerns": keeping content (HTML) and presentation (CSS) distinct.
CSS Basics (5 minutes)
- Show how to include CSS in an HTML document using:
- Inline CSS: using the
style attribute.
- Internal CSS: using a
<style> element within the <head> section.
- External CSS: linking to a separate CSS file using the
<link> tag.
Example of Internal CSS:
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
}
</style>
</head>
Hands-On Activity (5 minutes)
- Assign an exercise where students create a simple HTML document with basic elements and apply CSS styles.
- Instructions:
- Create a new HTML file.
- Add a title and a few paragraphs.
- Apply styles to change the background color and text color using internal CSS.
Conclusion (5 minutes)
- Recap the key points of the lesson.
- Highlight the importance of HTML and CSS in web development.
- Encourage students to experiment further with HTML and CSS beyond the lesson.
Assessment
- Monitor students as they complete the hands-on activity and provide assistance as needed.
- Collect the HTML files at the end of the class to assess their understanding of the concepts taught.
This lesson plan provides a comprehensive overview of HTML and CSS appropriate for Year 11 students, while allowing for both theoretical understanding and practical application within a concise timeframe.