WEB TECHNOLOGIES
Download the Lessonotes Mobile Ghana app for faster lesson access on Android and iPhone.
Subject: Computing
Class: SHS 1
Term: 2nd Term
Week: 20
Grade code: 1.2.3.LI.2
Strand code: 2
Sub-strand code: 3
Content standard code: 1.2.3.CS.1
Indicator code: 1.2.3.LI.2
Theme: PROCEDURAL PROGRAMMING (COMPUTATIONAL THINKING)
Subtheme: WEB TECHNOLOGIES
This page supports the lesson note with a companion video and a short classroom-ready summary.
For class groups and homework, share this lesson page so learners also get the summary, objectives, and full lesson context.
In today's world, we use websites for everything – from checking our BECE results on the WAEC portal and reading news on MyJoyOnline, to shopping on Jumia or Tonaton. But have you ever wondered how these complex websites are created? Before a single line of code is written or a beautiful image is chosen, a plan must be made. This plan is like an architect's blueprint for a house. It ensures that the website is well-structured, easy to use, and meets its intended purpose. This lesson introduces you to the essential planning phase of website creation: developing a web outline plan using sitemaps and wireframes.
This topic involves three core ideas that build on each other: the Sitemap, the Wireframe, and the Web Outline Plan. Concept 1: What is a Website Map (Sitemap)?
A sitemap is a simple, hierarchical diagram that shows all the pages of a website and how they are related to each other. Think of it as the table of contents for a book. It helps the developer (and the user) understand the overall structure of the website. Purpose: To organize the content logically and ensure that no important pages are forgotten. How it looks: It's usually a tree-like diagram.
Example: Sitemap for a Basic School Website
Imagine we are planning a website for "Presec SHS, Legon". The sitemap might look like this: