Web Design II SS2 Lesson plan

```html

LESSON PLAN: WEB DESIGN II

Subject	Digital Technologies
Class	SSS 2
Term	First Term
Week	9
Topic	Web Design II
Duration	80 Minutes (Double Period)
Subtopics	Creating multi-page websites; adding text and images; creating hyperlinks; designing navigation menus; applying CSS to web pages.

1. BEHAVIOURAL OBJECTIVES

By the end of the lesson, students should be able to:

1. Define a multi-page website.
2. Identify the basic files and folders used in a simple website.
3. Write HTML code to add text and images to a web page.
4. Create internal and external hyperlinks.
5. Design a simple navigation menu linking different web pages.
6. Apply basic CSS styles to improve the appearance of a website.
7. Create and test a simple multi-page school website.

2. INSTRUCTIONAL / TEACHING AIDS

• Computer system or laptop.
• Projector or display screen, where available.
• Text editor such as Notepad or a code editor.
• Web browser such as Google Chrome or Microsoft Edge.
• Sample HTML and CSS files.
• Whiteboard and marker.

3. PREVIOUS KNOWLEDGE / ENTRY BEHAVIOUR

Students have previously learned the basic structure of HTML documents, common HTML tags, and the introduction to CSS. They can identify headings and paragraphs in HTML and understand that CSS is used to style web pages.

Entry question: How can a visitor move from the home page of a school website to its About page?

4. PRESENTATION STEPS

STEP	TEACHER'S ACTIVITY	STUDENTS' ACTIVITY
Step 1: Introduction	Reviews the previous lesson on HTML and CSS. Asks students how they can connect different pages of a website.	Answer questions and recall the basic HTML tags and CSS concepts learned earlier.
Step 2: Multi-Page Websites	Explains the meaning of a multi-page website and discusses examples such as Home, About, Activities, and Contact pages. Shows how website files are organised.	Define a multi-page website and identify pages that may appear on a school website.
Step 3: Adding Text and Images	Demonstrates the use of headings, paragraphs, and the HTML image tag. Explains the purpose of the src, alt, and width attributes.	Write simple HTML examples and explain the functions of the image attributes.
Step 4: Hyperlinks and Navigation	Explains internal and external hyperlinks. Demonstrates the anchor tag and how to create a navigation menu linking Home, About, and Contact pages.	Write hyperlink code and explain how navigation menus help website visitors.
Step 5: Applying CSS	Demonstrates how to use CSS to style headings, page backgrounds, text, and navigation links. Explains the advantage of using an external stylesheet.	Write basic CSS rules and identify the differences between inline, internal, and external CSS.
Step 6: Practical Activity	Guides students in creating index.html, about.html, contact.html, and style.css. Supervises the addition of text, images, navigation links, and basic styling.	Create the website files, connect the pages, apply CSS, open the home page in a browser, and test the links.
Step 7: Conclusion	Summarises the lesson and corrects common mistakes involving file names, image paths, hyperlinks, and stylesheet links.	Summarise the main concepts and demonstrate the completed website where possible.

5. EVALUATION QUESTIONS

1. What is a multi-page website?
2. Mention four pages that may be included in a school website.
3. Write an HTML statement that displays an image named school.jpg.
4. Differentiate between an internal hyperlink and an external hyperlink.
5. Write HTML code for a navigation menu containing Home, About, and Contact links.
6. State three advantages of using external CSS.

6. ASSIGNMENT

1. Design a simple three-page website for your school using HTML.
2. Include a navigation menu that links all three pages.
3. Add at least one image to the home page and apply CSS to style the headings and links.
4. Write a short explanation of how hyperlinks and navigation menus improve website usability.

7. TEACHER'S REFLECTION

Were the students able to create and connect multiple HTML pages, insert images, build navigation menus, and apply basic CSS? Record students' difficulties and provide additional practical exercises where necessary.

```