Website Design, Components, Types and Examples of Websites for SS 1

Class: SS 1
Term: First Term
Week: 3
Age: 15 years
Duration: 60 minutes
Subject: Digital Technologies
Curriculum Theme: Web Development and Management
Focal competence: identifying and classifying different types of websites
Key competencies/values: Communication; Problem Solving
Skills:

• define website design
• explain components of a website

Previous Lesson: Web Development, Types, Core Technologies HTML, CSS and JavaScript
Topic: Website Design
Subject Matter: Meaning of website design, Components of websites, Types and examples of websites

Specific Objectives

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

Cognitive Domain

• define website design;
• explain components of a website;
• state the difference between webpages and websites.

Reference Materials

The following resources were used in planning this lesson:

• 2025 New Revised Senior Secondary Education Curriculum (SSEC)
• Relevant State Unified Scheme of Work
• The HeadTeacher Scheme of work For The New Revised Senior Secondary Education Curriculum (SSEC)

Instructional Materials

The teacher will teach this lesson with the aid of:

• Computers
• Mobile phone Internet Access
• Whiteboard and markers
• Projector (optional)

Rationale for the Lesson

This lesson provides students with foundational knowledge of website design, which is essential in today’s digital world. Understanding how websites are built and categorised helps students navigate the internet effectively and lays the groundwork for potential future careers in web development or digital literacy. It also enhances their problem-solving and communication skills.

Prerequisite/Previous Knowledge

Students should have basic knowledge of what the internet is and how to access websites.

Lesson Content/Board Summary

Website Design, Components, Types and Examples of Websites

Meaning of Website Design

Website design refers to the process of planning, conceptualising, and arranging content online. It involves creating the visual appearance, layout, and user experience of a website. This process includes elements like graphic design, user interface (UI) design, user experience (UX) design, and content creation, all aimed at making a website functional and appealing to visitors.

Components of Websites

A website is made up of several interconnected components that work together to deliver content and functionality to users. These components include:

1. Webpages: These are individual documents or pages that make up a website. Each webpage typically contains text, images, videos, and other multimedia elements, and is identified by a unique URL (Uniform Resource Locator).
2. Domain Name: This is the unique address that identifies a website on the internet, e.g., “google.com” or “nerdc.gov.ng”. It acts like a street address for a house, allowing users to find a specific website.
3. Web Hosting: This is the service that stores all the files (webpages, images, code, etc.) of a website on a special computer called a web server. When someone types a domain name into their browser, the web server delivers the website files to their computer.
4. Web Server: A web server is a computer program or a physical computer that stores website files and delivers them to users’ web browsers upon request. It is always connected to the internet and configured to handle website requests.
5. Development Technologies: These are the programming languages and tools used to build websites. Common examples include:
   1. HTML (HyperText Markup Language): Used for structuring the content of a webpage (e.g., headings, paragraphs, images).
   2. CSS (Cascading Style Sheets): Used for styling the appearance of a webpage (e.g., colours, fonts, layout).
   3. JS (JavaScript): Used for adding interactive and dynamic features to a webpage (e.g., animations, form validation).

Difference Between Webpages and Websites

While often used interchangeably, webpages and websites have distinct meanings:

1. Website: A collection of related webpages, multimedia content, and other files that are hosted on a web server and accessible via a domain name. It is a complete online presence, like a digital book.
2. Webpage: A single document or page within a website, identified by a unique URL. It is a specific chapter or page within the digital book (website).

In simple terms, a website is a collection of webpages, just as a book is a collection of pages.

Types and Examples of Websites

Websites can be classified into various types based on their purpose and functionality:

1. Informational Websites: These websites primarily provide information to visitors. They often include articles, news, educational content, or company details.
   1. Example: NERDC (Nigerian Educational Research and Development Council) website (nerdc.gov.ng) – provides information on educational curricula and research.
2. E-commerce Websites: These websites allow users to buy and sell products or services online. They feature product listings, shopping carts, and secure payment gateways.
   1. Example: Konga (konga.com) – an online retail store where customers can purchase various goods.
3. Entertainment Websites: These websites are designed to entertain users through various forms of media such as videos, games, music, or interactive content.
   1. Example: Netflix (netflix.com) – a streaming service offering a wide variety of movies and TV shows.

Teaching Methods/Instructional Techniques

Discussion, Explanation, Question and Answer, Guided Practice, Group Work, Demonstration

Instructional Procedures

Step 1: Introduction

Time: 5 minutes

Teaching Skill: Questioning/Activating Prior Knowledge

Teacher’s Activity: The teacher greets the students and asks them questions about their daily use of the internet. Questions like, “What websites do you visit frequently?” or “What do you think makes a website good?”

Pupils’ Activity: Pupils respond to the teacher’s questions, sharing their experiences with websites.

Learning Point: Internet usage reflection

Step 2: Meaning of Website Design

Time: 10 minutes

Teaching Skill: Group Discussion/Explanation

Teacher’s Activity: The teacher guides students to participate in a group discussion on the meaning of website design, as per Activity 1. After discussions, the teacher consolidates their ideas and provides a clear definition.

Pupils’ Activity: Pupils discuss in groups and present their understanding of website design. They listen attentively to the teacher’s explanation.

Learning Point: Website design definition

Step 3: Components of Websites

Time: 15 minutes

Teaching Skill: Explanation/Demonstration

Teacher’s Activity: The teacher explains each component of a website: webpages, domain name, web hosting, web server, and development technologies (HTML, CSS, JS). The teacher may use a simple analogy or diagram to illustrate how these components work together.

Pupils’ Activity: Pupils listen, ask questions for clarification, and take notes on the components of a website.

Learning Point: Website components identified

Step 4: Difference Between Webpages and Websites

Time: 5 minutes

Teaching Skill: Explanation/Comparison

Teacher’s Activity: The teacher clearly explains the difference between a webpage and a website, using simple examples to make the distinction concrete.

Pupils’ Activity: Pupils listen and grasp the distinction between webpages and websites.

Learning Point: Webpage vs website distinction

Step 5: Types of Websites

Time: 5 minutes

Teaching Skill: Explanation/Classification

Teacher’s Activity: The teacher introduces the different types of websites, such as informational, e-commerce, and entertainment, explaining the primary purpose of each type.

Pupils’ Activity: Pupils listen and understand the classification of websites.

Learning Point: Website types introduced

Step 6: Examples of Websites

Time: 5 minutes

Teaching Skill: Guided Practice/Demonstration

Teacher’s Activity: The teacher guides students to search the internet for different types of websites using their computers or mobile phones, as per Activity 2. The teacher specifically highlights the examples mentioned in the content scope: NERDC (informational), Konga (e-commerce), and Netflix (entertainment).

Pupils’ Activity: Pupils actively search for and identify examples of different website types, discussing their findings.

Learning Point: Website examples discussed

Step 7: Evaluation/Review

Time: 5 minutes

Teaching Skill: Questioning/Assessment

Teacher’s Activity: The teacher evaluates the learning by asking the following questions:

1. What is website design?
2. Mention three components of a website.
3. Differentiate between a webpage and a website.
4. Give two examples of an e-commerce website.

Pupils’ Activity: Pupils answer orally and in writing.

Learning Point: Website design understanding assessed

Step 8: Note-Taking

Time: 10 minutes

Teaching Skill: Guided Writing

Teacher’s Activity: The teacher guides pupils/students to copy the essential Board Summary notes on website design, components, and types into their notebooks.

Pupils’ Activity: Pupils/students copy the notes carefully into their notebooks.

Learning Point: Website concepts recorded

Step 9: Conclusion

Time: 5 minutes

Teaching Skill: Reinforcement

Teacher’s Activity: The teacher summarises the key points of the lesson, reiterating the importance of understanding website design in the digital age and encourages students to explore more about web development.

Pupils’ Activity: Pupils listen to the summary and ask any final questions.

Learning Point: Lesson concepts reinforced

Continuous Assessment/Further Study

Type: Homework/Further Reading

Instruction: Answer the following questions in your notebook or research further on the topics:

1. Research and list two other examples for each type of website discussed (informational, e-commerce, entertainment).
2. Explain in your own words why a domain name and web hosting are crucial for a website to be accessible online.
3. Find out what a “responsive website design” means and why it is important.

Lesson Keywords

• Website Design – The process of creating the visual appearance and functionality of a website.
• Webpage – A single document or page within a website.
• Website – A collection of related webpages and content accessible via a domain name.
• Domain Name – The unique address of a website on the internet.
• Web Hosting – The service that stores website files on a server.
• Web Server – A computer that delivers website files to users.
• HTML – HyperText Markup Language, used for structuring web content.
• CSS – Cascading Style Sheets, used for styling web content.
• JavaScript (JS) – Used for adding interactivity to websites.
• E-commerce Website – A website for buying and selling products online.
• Informational Website – A website primarily providing information.
• Entertainment Website – A website designed for user entertainment.

Differentiation

For students who grasp concepts quickly, encourage them to research basic functions of HTML tags or explore more complex website types like social media or educational platforms. For students needing more support, provide simplified definitions and focus on identifying the main components and types of websites through visual aids and repeated examples.

Suggested Lesson Videos

For further understanding, students can search on YouTube for:

• what is website design for beginners
• components of a website explained
• types of websites with examples