Lesson Plan

• Describe the purpose of the presentation layer and identify core HTML elements (headings, paragraphs, lists, tables, links).
• Construct a valid HTML document skeleton and embed basic content structures.
• Apply simple CSS using inline styles and an internal style block to control colour, font and layout.
• Demonstrate correct tag nesting and avoid common markup pitfalls.
• Use a self‑check checklist to verify a completed web page meets presentation requirements.

• Computer with internet access and a projector.
• HTML editor (e.g., VS Code or Notepad++).
• Printed handout of core tags and CSS examples.
• Worksheet with a step‑by‑step coding task.
• Browser for live preview (Chrome/Firefox).
• CSS reference cheat‑sheet.

Show a striking web page and ask, “What makes this page look attractive?” Connect to students’ prior experience writing plain HTML and explain that today they will add visual style. State that by the end of the lesson they will be able to produce a complete, styled page and check their work against a quick checklist.

1. Do‑Now (5'): Students list on sticky notes the visual elements they notice on a sample web page.
2. Mini‑lecture (10'): Review HTML skeleton, core tags, and introduce inline vs. internal CSS.
3. Guided demonstration (15'): Teacher builds a simple page live, adding headings, lists, a table, and styling with an internal <style> block.
4. Hands‑on activity (20'): Students complete the worksheet by creating their own page, applying the tags and CSS discussed.
5. Review & checklist (10'): Peer‑review using the “Quick Revision Checklist” and correct any tag errors.

Recap the steps for building and styling a web page, emphasizing proper tag closure and separation of content and presentation. For the exit ticket, each student writes one HTML tag they used and one CSS property they applied. Homework: design a personal “About Me” page using the same structure and at least three CSS styles.