Web Design I Lesson plan ss2

LESSON PLAN: WEB DESIGN I

Subject	Digital Technologies
Class	SSS 2
Term	First Term
Week	8
Topic	Web Design I
Duration	80 Minutes (Double Period)
Subtopics	Introduction to HTML; basic HTML structure and tags; introduction to CSS; basic web-page styling.

BEHAVIOURAL OBJECTIVES

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

1. Define web design, website, and web page.
2. Explain the meaning and importance of HTML.
3. Identify common HTML tags and state their functions.
4. Write the basic structure of an HTML document.
5. Explain the meaning and uses of CSS.
6. Apply basic CSS properties to style a simple web page.

INSTRUCTIONAL / TEACHING AIDS

• Computer system or laptop.
• Projector or display screen, where available.
• Text editor such as Notepad or Visual Studio Code.
• Web browser such as Google Chrome or Microsoft Edge.
• Prepared HTML and CSS code examples.
• Whiteboard and marker.

PREVIOUS KNOWLEDGE / ENTRY BEHAVIOUR

Students have experience using web browsers to visit websites and view online information. They can identify common website elements such as headings, paragraphs, images, and hyperlinks. This knowledge will help them understand how HTML structures web pages and CSS controls their appearance.

PRESENTATION STEPS

STEP	TEACHER'S ACTIVITY	STUDENTS' ACTIVITY
Step 1: Introduction	The teacher displays a familiar website and asks students to identify its headings, paragraphs, images, links, and colours. The teacher introduces the topic, Web Design I.	Students observe the website and identify the elements they recognize.
Step 2: Meaning of Web Design	The teacher explains web design and defines website, web page, web browser, hyperlink, domain name, and web hosting.	Students listen, take notes, and give examples of websites they use.
Step 3: Introduction to HTML	The teacher explains HTML as HyperText Markup Language and demonstrates how tags and elements are used to structure web content.	Students explain the meaning of HTML and identify opening and closing tags in sample code.
Step 4: HTML Structure and Tags	The teacher demonstrates the basic HTML document structure and explains the functions of the html, head, title, body, h1, p, a, and img elements.	Students copy the sample code and identify the purpose of selected HTML elements.
Step 5: Introduction to CSS	The teacher defines CSS and explains how it controls colours, fonts, backgrounds, borders, and text alignment. The teacher introduces inline, internal, and external CSS.	Students distinguish HTML from CSS and identify common CSS properties.
Step 6: Demonstration	The teacher types a simple HTML document containing a heading and paragraph, adds CSS styling, saves the file with an .html extension, and opens it in a browser.	Students observe the demonstration and explain how the code affects the displayed page.
Step 7: Practical Activity	The teacher guides students to create a simple web page showing a heading and two paragraphs. Students apply basic colours and font styling.	Students write the HTML code, add CSS, save their files, and view their results in a browser.
Step 8: Evaluation	The teacher asks questions about web design, HTML tags, the basic document structure, CSS properties, and the differences between HTML and CSS.	Students answer oral and written questions and demonstrate their understanding.
Step 9: Conclusion	The teacher summarizes the lesson, corrects students' mistakes, and gives an assignment on creating and styling a simple web page.	Students summarize the key points and record the assignment.

EVALUATION QUESTIONS

1. What is web design?
2. What is the full meaning of HTML?
3. State five HTML tags and explain their functions.
4. What is the purpose of the body element in HTML?
5. What is CSS, and state three properties used in styling web pages.
6. Differentiate between HTML and CSS.
7. Write a simple HTML document containing a heading and a paragraph.

ASSIGNMENT

1. Explain the meanings of HTML and CSS.
2. List five HTML tags and state the function of each.
3. Create a simple HTML page displaying your school's name and a short description of the school.
4. Apply CSS to change the heading colour, paragraph font size, and background colour.

TEACHER'S REFLECTION

After the lesson, the teacher should assess whether students can write the basic HTML structure, identify common HTML tags, and apply simple CSS styling. Record any difficulties encountered and provide additional practical guidance where necessary.