| Lesson Plan |
| Grade: |
Date: 01/12/2025 |
| Subject: Information Communication Technology ICT |
| Lesson Topic: Be able to use the tag including to apply styles and classes |
Learning Objective/s:
- Describe the purpose and characteristics of the
<div> element.
- Write correct HTML syntax for a
<div> with optional attributes.
- Apply
class and id attributes to <div> elements for styling.
- Use inline
style attributes and nest <div> containers to create simple layouts.
|
Materials Needed:
- Computer with internet access
- Projector or interactive whiteboard
- HTML editor or IDE (e.g., VS Code)
- Sample HTML files and stylesheet
- Printed worksheet with practice tasks
- Reference handout summarising
class, id, and inline styles
|
Introduction:
Begin with a quick demonstration of a two‑column web page, asking students what HTML element could create the side‑by‑side boxes. Recall their prior work on block‑level elements and set the success criteria: students will correctly code a <div> with classes, ids, and optional inline styles.
|
Lesson Structure:
- Do‑now (5'): Complete a short quiz on block‑level vs. inline elements.
- Mini‑lecture (10'): Explain the purpose, syntax, and attributes of
<div> with live coding.
- Guided practice (15'): Build a two‑column layout together, adding classes and an inline style.
- Independent activity (15'): Create a three‑section page (header, main, footer) using nested
<div>s and unique ids.
- Check for understanding (5'): Review the quick‑revision checklist, address common pitfalls, and collect exit tickets.
|
Conclusion:
Summarise how <div> provides a flexible container for layout and styling. Students submit an exit ticket describing one way they will use a class or id in future work. For homework, they redesign a personal web page using nested <div>s and external CSS.
|