Lesson Plan

Resources → Subject Notes → Information Communication Technology ICT → Notes
Lesson Plan
Grade: Date: 01/12/2025
Subject: Information Communication Technology ICT
Lesson Topic: Know and understand the presentation layer is used to display and format elements within a web page
Learning Objective/s:
  • Describe the role of the presentation layer in web pages.
  • Identify HTML tags that affect visual layout.
  • Explain how CSS selectors, properties, and values control appearance.
  • Apply the CSS box model to adjust spacing and layout.
  • Diagnose common presentation issues and propose CSS fixes.
Materials Needed:
  • Projector or interactive whiteboard
  • Computer with internet access
  • Text editor or IDE (e.g., Visual Studio Code)
  • Sample HTML/CSS files (digital or printed)
  • Worksheet with CSS box‑model exercises
  • Web browser for live preview (e.g., Chrome)
 Introduction:
Begin with a quick demo of an unstyled HTML page and ask students how it could be improved visually. Recall that HTML provides structure while CSS handles presentation. Today’s success criteria: students will explain the presentation layer, list key tags, and style a simple page using the box model.
Lesson Structure:
  1. Do‑now (5'): View an unstyled page and note visual issues.
  2. Mini‑lecture (10'): Define the presentation layer, key HTML tags, and CSS fundamentals.
  3. Guided demo (15'): Walk through a sample article, highlighting selectors, properties, and the box model.
  4. Hands‑on activity (20'): Edit provided HTML/CSS to style the page, applying padding, margin, and borders.
  5. Pair check (5'): Exchange work and use a checklist to identify common issues.
  6. Whole‑class debrief (5'): Discuss fixes for overlapping text, image alignment, and other problems.
Conclusion:
Summarise how HTML structures content and CSS shapes its appearance through selectors and the box model. For the exit ticket, each student writes one CSS property they used and why. Homework: create a personal webpage that uses at least three presentation‑related tags and demonstrates proper box‑model spacing.