| Full lesson | Create for a teacher a set of content for giving a lesson, beginning with the lesson plan. Each new block of materials must begin with an H1 heading (other subheaders must be H2, H3, etc). When you describe required pictures, write those descriptions in curly brackets, for example: {A picture of a triangle} |
| Which subject | Computer science |
| What topic | Html |
| What length (min) | 30 |
| What age group | Year or Grade 11 |
| Class size | 20 |
| What curriculum | |
| Include full script | |
| Check previous homework | |
| Ask some students to presents their homework | |
| Add a physical break | |
| Add group activities | |
| Include homework | |
| Show correct answers | |
| Prepare slide templates | |
| Number of slides | 5 |
| Create fill-in cards for students | |
| Create creative backup tasks for unexpected moments |
HTML Basics
Year 11
Computer Science
30 minutes
20
This lesson meets the standards set for digital literacy and computer science education for Year 11 students, focusing on web development fundamentals.
| Step Number | Step Title | Length (mins) | Details |
|---|---|---|---|
| 1 | Introduction and Objectives | 5 | Briefly introduce the topic of HTML, explain the lesson objectives, and outline the structure of the lesson. |
| 2 | Homework Check | 5 | Go over the homework from the previous lesson without having students present it. Provide feedback based on common errors and highlight successful submissions. |
| 3 | Printable Card Activity | 5 | Distribute printable HTML cards to each student. Explain that they will fill these in during the lesson with key concepts discussed. |
| 4 | HTML Basics Presentation | 10 | Present key concepts of HTML, including the basic structure and common tags using a projector. Engage the class with questions to encourage participation. |
| 5 | Fill in Cards Activity | 3 | Allow students time to fill in their printable cards with the information learned about HTML tags and structure as you circulate around the room. |
| 6 | Collect/Check Cards | 2 | Collect the printed cards or perform random checks of some students' cards to ensure understanding of the material covered. |
| 7 | Assign Homework | 0.5 | Briefly explain the homework assignment and expectations without going into details. |
| 8 | Wrap-Up and Reflection | 0.5 | Recap key points of the lesson, answer any remaining questions, and discuss how today's lesson relates to future lessons on web development. |
"Good morning, everyone! Today we are going to dive into the exciting world of HTML, which stands for HyperText Markup Language. This is the foundational building block of web development, and by the end of this lesson, you will understand the fundamental structure of an HTML document, learn some key tags, and even create a simple HTML page. We will also have some activities to foster teamwork, so let's get started!"
"Before we jump into today's content, let's take a moment to review the homework from last time. I will summarize some common errors and highlight successful submissions. [Go through the common errors and positives]. Great job on those who excelled! Your understanding of previous concepts will be vital for today’s lesson."
"Now, I will hand out some printable HTML cards to each of you. These cards will help you document key concepts as we discuss them today. Please remember to fill these in as you learn — it will solidify your understanding. Let’s proceed to the next activity!"
"Alright! Let’s dive into the basics of HTML. [Begin presentation with a projector]. First, every HTML document starts with a declaration that the document is HTML5. Below that, we have the <html> tag that wraps all our content. Next, inside the <html> tag, there are two main sections: the <head> and the <body>. Can anyone tell me what they think goes inside the <head>? [Wait for students to respond]. Yes, great answers! Things like the title of the page and links to stylesheets go in here.
Now, in the <body>, we will put all our visible content. Let's discuss some key tags you will frequently use, such as <h1> for headings, <p> for paragraphs, and <a> for links. [Engage with questions throughout the presentation]. Does anyone have questions about these tags before we move on?"
"Now, I’d like you to take a few minutes to fill in the cards you've received with the information we've just covered. Please ensure you note down the key structure of an HTML document and some of the tags we discussed. I will be walking around, so feel free to ask if you need clarification or assistance!"
"Time’s up! I’d like you to pass your cards to the front. I will quickly check them to ensure everyone has grasped the material. [Collect cards or randomly check a few students’ cards]. Overall, most of you have incorporated the correct information. Excellent work!"
"As we wrap up, I want to give you a quick idea of your next homework assignment. You will need to create a simple HTML page using the concepts we've learned today. I’ll provide detailed instructions afterward, so don’t worry about it for now!"
"To wind down today's lesson, let's recap what we've learned about the structure of an HTML document and the key tags. Does anyone have any lingering questions? [Address questions]. This lesson is just the first step on your journey into web development, and I can't wait to build on this foundation in our future lessons. Thank you for your participation today!"
What does HTML stand for, and why is it important in web development?
Describe the basic structure of an HTML document, including its main sections.
What is the purpose of the <head> section in an HTML document? List at least two elements that can be found in the <head>.
Identify three common HTML tags we discussed in class and provide a brief description of their functions.
Create a simple HTML skeleton structure with the tags we learned today. Include at least one <h1>, one <p>, and one <a> tag.
Explain the difference between block-level elements and inline elements in HTML. Provide an example of each.
Reflect on the key takeaways from today's lesson. What was the most challenging concept for you, and how do you plan to overcome it in your future learning?
Using the concepts covered in class, design a simple homepage that includes a title, a heading, a paragraph of text, and a link to an external website. Write the HTML code for your design.
In what scenarios would you use the <a> tag, and what attribute is most essential for it to function correctly?
Research one additional HTML tag not covered in class and explain its purpose and usage in an HTML document.
| Question | Answer |
|------------------------------------------------------------------|--------|
| What does HTML stand for? | |
| What is the purpose of the `<head>` tag in an HTML document? | |
| Can you name three key tags used in HTML? | |
| What is the function of the `<body>` tag? | |
| Why is it important to fill out the printable HTML cards? | |
| What should you include in your homework assignment? | |
| Why do we use the `<h1>` tag in an HTML document? | |
| What can be found inside the `<head>` section of an HTML page? | |
| What is the structure of a basic HTML document? | |
| How can you apply styles to an HTML document? | |