Websites and Web PagesActivities & Teaching Strategies
Active learning works for this topic because students need to see how websites are structured, not just hear about it. Clicking, tracing, and designing let them experience the connections between pages firsthand. This builds lasting understanding about how information is organized online.
Learning Objectives
- 1Identify the homepage, hyperlinks, and navigation elements on a given website.
- 2Explain how hyperlinks facilitate movement between different web pages.
- 3Compare the primary purpose of a website's homepage to that of its sub-pages.
- 4Design a simple navigation path for a website about our school, illustrating the connections between pages.
Want a complete lesson plan with these objectives? Generate a Mission →
Whole Class: Website Dissection
Project a simple website like your school homepage. Students label elements on shared worksheets: homepage, hyperlinks, navigation bar. Discuss as a class how clicking a link moves to a new page, then trace a path together from home to a sub-page.
Prepare & details
Explain how hyperlinks connect different web pages.
Facilitation Tip: During Website Dissection, model aloud how you trace a path from the homepage to a sub-page, naming each stop to make the structure visible for students.
Setup: Wall space or tables arranged around room perimeter
Materials: Large paper/poster boards, Markers, Sticky notes for feedback
Small Groups: Hyperlink Hunt
Provide tablets with child-safe sites. Groups follow teacher-set paths using hyperlinks, noting what each page shows and how navigation works. Groups report back one discovery, such as a menu leading to class pages.
Prepare & details
Compare the purpose of a homepage to other pages on a website.
Facilitation Tip: For the Hyperlink Hunt, provide a printed screenshot of a child-friendly site so students can annotate it directly with colored pencils or highlighters.
Setup: Wall space or tables arranged around room perimeter
Materials: Large paper/poster boards, Markers, Sticky notes for feedback
Pairs: Navigation Path Design
Pairs sketch a school website: homepage with links to 'About Us', 'Classes', 'Events'. Draw arrows for hyperlinks and label page purposes. Pairs present their path, explaining user flow from home to a specific page.
Prepare & details
Design a simple navigation path for a website about our school.
Facilitation Tip: When students design Navigation Paths, give them sticky notes to represent hyperlinks so they can physically move the notes to test different routes.
Setup: Wall space or tables arranged around room perimeter
Materials: Large paper/poster boards, Markers, Sticky notes for feedback
Individual: Homepage Mockup
Students draw their ideal school homepage with 4-5 navigation links to imagined pages. Label each link's destination and purpose. Share one feature with a partner for feedback on clarity.
Prepare & details
Explain how hyperlinks connect different web pages.
Facilitation Tip: Have students create Homepage Mockups with labeled sections so they practice explaining why certain elements belong on the homepage versus sub-pages.
Setup: Wall space or tables arranged around room perimeter
Materials: Large paper/poster boards, Markers, Sticky notes for feedback
Teaching This Topic
Teachers approach this topic by moving from concrete to abstract, starting with familiar sites and printed materials before moving to digital tools. Avoid assuming students intuitively understand hyperlinks; model and practice clicking different types of links together. Research shows that hands-on tracing and drawing help students internalize site structures more effectively than passive observation.
What to Expect
Successful learning looks like students correctly identifying homepages, hyperlinks, and navigation paths on simple websites. They should explain the purpose of each element in their own words and apply these ideas when designing their own mockup. Clear communication about site structure shows true comprehension.
These activities are a starting point. A full mission is the experience.
- Complete facilitation script with teacher dialogue
- Printable student materials, ready for class
- Differentiation strategies for every learner
Watch Out for These Misconceptions
Common MisconceptionDuring Website Dissection, watch for students who assume the homepage contains all the information. Redirect them by asking, 'Where would you find details about the school play if it’s not here on the homepage?'
What to Teach Instead
During Website Dissection, use the printed map analogy: point out that the homepage is like a city map showing landmarks and routes, while sub-pages are the detailed street views. Have students trace a path from the homepage icon to a specific sub-page and back.
Common MisconceptionDuring Hyperlink Hunt, watch for students who think hyperlinks only look like buttons or images. Redirect by saying, 'Look closely at the text links in the article. What happens when you click them?'
What to Teach Instead
During Hyperlink Hunt, give each small group a printed screenshot and colored markers. Ask them to circle every hyperlink they find, including underlined text, icons, and images, and label whether it’s a text link or image link.
Common MisconceptionDuring Homepage Mockup, watch for students who overload the homepage with too many details. Redirect by asking, 'Would you put every book in the library on the front door? What should visitors see first?'
What to Teach Instead
During Homepage Mockup, provide a template with clear sections for navigation, featured content, and a brief overview. Have students present their mockups in pairs and explain which elements belong on the homepage and which should go on sub-pages.
Assessment Ideas
After Website Dissection, provide students with a printed screenshot of a simple website. Ask them to circle the homepage, underline two hyperlinks, and draw an arrow showing where one hyperlink would lead. Then, ask, 'What is the job of the homepage?'
After Hyperlink Hunt, display a familiar child-friendly news website on the projector. Ask students to raise their hand and identify the homepage. Then, ask them to point out a link that would take them to a different page and explain what kind of content they expect to find there.
After Navigation Path Design, pose the question, 'Imagine you are designing a website for our school. What would be on the homepage, and what other pages would you link to from it? How would you make it easy for someone to find information about clubs or the school play?'
Extensions & Scaffolding
- Challenge early finishers to design a second homepage for a different audience (e.g., teachers, parents) and compare how the navigation changes.
- Scaffolding for struggling students: Provide a word bank of homepage elements (e.g., links, title, banner) and a partially completed mockup to fill in.
- Deeper exploration: Invite students to interview a family member about how they use a favorite website and report back on its structure.
Key Vocabulary
| Website | A collection of related web pages, images, videos, and other digital assets that are hosted on at least one web server and are typically accessible via the internet. |
| Web Page | A single document or resource within a website that can be displayed in a web browser. It contains information, text, images, and links. |
| Homepage | The main or introductory page of a website, usually serving as a central hub that provides an overview and links to other sections. |
| Hyperlink | A clickable element, often text or an image, that connects to another web page or resource when selected. |
| Navigation | The system of links and menus on a website that allows users to move between different pages and find information. |
Suggested Methodologies
More in Connecting the Dots: Networks and the Internet
What is a Computer Network?
An introduction to how devices in a school or home talk to each other through a central hub or router.
2 methodologies
Local Area Networks (LANs) in Action
Students explore practical examples of LANs, identifying components like routers, switches, and cables within their school environment.
2 methodologies
The Internet: A Global Network
Clarifying the distinction between the physical infrastructure of the internet and the software services like the web.
2 methodologies
Effective Search Strategies
Learning how search engines index the web and how to refine queries to find specific information.
2 methodologies
Staying Safe Online: Personal Information
Understanding the importance of keeping personal information private and identifying what information is safe to share online.
2 methodologies
Ready to teach Websites and Web Pages?
Generate a full mission with everything you need
Generate a Mission