Lesson Plan

Resources → Subject Notes → Information Communication Technology ICT → Notes
Lesson Plan
Grade: Date: 17/01/2026
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:
  1. Do‑now (5'): Complete a short quiz on block‑level vs. inline elements.
  2. Mini‑lecture (10'): Explain the purpose, syntax, and attributes of <div> with live coding.
  3. Guided practice (15'): Build a two‑column layout together, adding classes and an inline style.
  4. Independent activity (15'): Create a three‑section page (header, main, footer) using nested <div>s and unique ids.
  5. 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.