Session 38: Build a Web Page

At a glance: pupils plan a small website about their community (purpose, audience, pages and a sitemap), build and publish it to the Hub with Google Sites, and then write a tiny HTML page in Notepad and open it in a browser. · Time: 90 minutes (adjust the timings if your period is shorter) · Workbook pages: 6

Learning outcomes

By the end of the session, pupils can:

Plan a website by deciding its purpose, audience and pages, and draw a sitemap.
Build a Google Sites website with several pages, text, an allowed image, a map, a link and one theme, check it in phone preview and publish it safely to the Hub.
Explain what HTML tags do, and write a tiny web page with <h1>, <p>, <a> and <img> in Notepad and open it in a browser.

Before the session

Check that the Hub's learning accounts can use Google Sites (sites.google.com) and find out how publishing works for them. If the accounts belong to a Google Workspace organisation, the Publish settings can limit viewing to people in the organisation; if they are ordinary Google accounts, use Restricted and share with the Hub's mentor account instead. Decide this before the session and show pupils the exact choice.
Put a folder called Community Photos on each PC (or in a shared Drive folder) with 6–10 photos of local places and things: the market, a tree, the lorry station, food. No faces. Use photos you took yourself or that are free to reuse.
Put a folder called MyWebPage on each desktop with one picture named market.jpg in it, for the Notepad mission.
Check that Notepad and Chrome or Edge open on every PC, and that file name extensions are visible in File Explorer (View → Show → File name extensions) so pupils can see .html.
Test the Web Page Builder lab on the projector PC and a pupil PC; keep the offline pack on USB.
Build a sample site yourself to show at the start (it takes 10 minutes) and publish it the way pupils will.

Running order

Time	Activity	Workbook	What the mentor does
0–10 min	Typing warm-up	–	Pupils open the typing trainer and do today's 10-minute warm-up.
10–18 min	A website is a compound house	Page 1	Show your sample site. Pupils point out the gate (home page), rooms (pages), corridor (menu), doors (links) and address (URL).
18–28 min	Plan and the Sitemap Speed-Draw	Page 2	Teams have 3 minutes to draw a sitemap for a website about the Hub; best sitemap wins a point. Then each pupil fills in their own plan and you read the safety rules aloud.
28–33 min	Web Page Builder lab	Page 5	Demonstrate the block builder on the projector; pupils try it briefly in pairs (they return to the HTML missions later if time allows).
33–40 min	The Google Sites editor	Page 3	Demonstrate the six builder moves on the projector, quickly.
40–62 min	Mission 1: build and publish	Page 5	Pupils build their sites. Walk round checking the safety rules (no names, faces or phone numbers) before anyone publishes. Show the publish setting on the projector when the first pupils are ready.
62–75 min	HTML and the Tag Race	Page 4	Explain tags with Figure 38.3. Tag Race: show a tiny rendered page; teams race to write its HTML on paper, a point for the first correct answer. Then pupils do Mission 2 in Notepad.
75–82 min	Show-and-tell gallery walk	–	Pupils leave their published site open; everyone walks round and leaves one kind spoken comment. Team points for sites that meet every checklist item.
82–87 min	True or false and review questions	Page 6	Answer alone, then check together.
87–90 min	Self-assessment and sign-off	Page 6	Sign off using the evidence below.

Key ideas and how to explain them

A website is a compound house: home page = the gate and signboard; pages = rooms; the menu = the corridor; links = doors; the web address = the house's GhanaPost GPS address. A web page is one room; a website is the whole house.
Plan first: purpose (why), audience (who), pages (what). A sitemap is a quick drawing of the pages with the home page at the top, like the folder tree from Session 4.
Google Sites: a free builder with no code. Insert (text box, images, map, embed and more), Pages, Themes, Preview and Publish. Changes save to Drive automatically.
Design: the slide rules from Session 23 apply: short text, clear headings, contrast, one theme. Most people read on phones, so always check phone preview.
Safety when publishing: no personal details, no faces without consent, only pictures you may use (Session 27), and publish to the Hub only.
HTML: HyperText Markup Language. Tags in angle brackets describe each part of a page. Most come in pairs (<p> … </p>); <img> has no closing tag. href is where a link goes; src is the picture file; alt describes the picture.
Link to coding: HTML describes rather than decides (no loops or IFs), but the computer still does exactly what you type. A missing / is a bug: spot it, trace it, fix one thing (Session 37).

The 3D lab

Web Page Builder is a computer on a desk with a tray of four blocks: heading, paragraph, picture and link. It has three parts, one mission each:

Build a page about your community with all four blocks: heading, paragraph, picture and link. Pupils type their own heading and paragraph (the lab refuses a phone number) and choose a picture and a link.
Open the HTML view and match each block to the tag it became: h1, p, img or a. The screen splits into the HTML (left) and the page (right), with colour marks joining each line to its block.
Edit the HTML: change some words, delete a closing tag to see the bug, then fix it. Deleting </h1> makes everything after it part of the heading; typing it back fixes it. A helper button can delete the tag for slow typists, but the fix must be typed.

On the projector, demonstrate adding a block and opening the HTML view. Ask: "Which tag made the big heading? What happens if you delete the closing tag?" This bridges Google Sites (blocks, no code) and Mission 2 (writing the tags yourself in Notepad). The lab only understands h1, h2, p, img, a, b, i and br, and draws the page itself, so nothing a pupil types can run as code. If time is short, pupils can finish part 3 after Mission 2.

Common mistakes and quick fixes

Pupils often…	Try this
Put their full name, school and phone number on the site	Point to the safety rules. Use a first name only, or a team name, and no contact details.
Copy pictures from Google Images	Use the Community Photos folder. "Would you take someone's goods from their stall without asking?"
Make 8 pages with one line each	Keep to the sitemap: 3 or 4 pages with real content.
Lose a page because it isn't in the menu	Pages tab: check the page isn't hidden (⋮ → Show in navigation).
Save the Notepad file as `my-page.html.txt`	Set Save as type to All files and check the file name extension in File Explorer. Rename it with F2 if needed (Session 5).
See the tags as text in the browser	The file is still `.txt`, or a `<` or `>` is missing. Check the name, then each tag.
Forget to save before refreshing	Ctrl + S in Notepad, then F5 in the browser: "save, then refresh".
See a broken picture icon	`market.jpg` must be in the same folder as the page, spelt exactly the same, including `.jpg`.

When things go wrong

No internet: Google Sites needs the internet. Pupils draw their sitemap and plan each page on paper, then do the whole HTML mission (Notepad and the browser work offline) and the Web Page Builder lab from the offline pack. Build in Google Sites next time.
Not enough PCs: pairs build one site together, taking turns to drive each page. Both names go on the checklist.
A PC freezes or the power goes: Google Sites saves automatically to Drive, so nothing is lost: sign in again and carry on. Notepad files are lost if unsaved, so teach "save early, save often".
Publishing is blocked or asks for something unexpected: don't let pupils change the publish settings to public. Leave the site unpublished and show it in Preview for the gallery walk; publish it later yourself.

Answer key

Plan your community site (Page 2): open task. Look for a clear purpose, a named audience, 3 or 4 pages that match the purpose, and no personal details.

Spot the bug (Page 4): the closing tag is missing its slash. It should be <p>Kelewele is the best snack</p>.

Builder's checklist (Page 5): every row ticked and checked by the mentor; the web address written down (personal accounts: sites.google.com/view/<name>, for example sites.google.com/view/our-bozoma-ama; school/Workspace accounts: sites.google.com/<domain>/<name>); the Notepad page opens in the browser and shows a heading, a paragraph, the market picture and a working link.

True or False (Page 6)

A website is a group of web pages joined by a menu and links, at one address: True.
It is fine to put a classmate's photo and phone number on your site: False.
Check how your site looks on a phone before publishing: True.
<a href="…"> makes a picture: False (it makes a link; <img> makes a picture).
A closing tag has a slash, like </p>: True.

Written Review Questions

Purpose (why the site exists), audience (who will read it) and pages (what pages it needs). A sitemap is a simple drawing of all the pages and how they connect, with the home page at the top.
<h1>Welcome</h1> and <p>Akwaaba to our town</p>.

Support and stretch

Needs more support: build a 2-page site (Home and one more) with a text box, a picture and a map. For HTML, give them the four lines on a card to copy, then ask them to change just the words between the tags.
Finished early: add a Google Form from Session 21 to a "Contact the club" page (no personal details collected), or add <h2> headings and a second paragraph to the HTML page. Ask them to work out what <ul> and <li> do by trying them.

Evidence for sign-off

The pupil shows a written plan, a Google Site with a home page and at least two more pages, an allowed image, a map, a working link and one theme, checked in phone preview and published to the Hub (or ready to publish), with no personal details. They show my-page.html opening in a browser with all four tags working, and get at least 4 of the 5 true-or-false statements right.

Safety and wellbeing

Websites can be seen by many people, so check every site before it is published: no full names, phone numbers, home addresses, school timetables, routes or faces. Publish only to the Hub, never to the public, unless the programme lead agrees. If a site is ever Public, also tick "Request public search engines to not display my site" in the Publish settings. Pupils use the Hub's learning accounts only. Photos of people need their consent and, for children, a parent's consent too; it is simpler to use places and things. Remind pupils that pictures found online usually belong to someone else. If a pupil wants to keep their site, they can, but they must not share the link outside the Hub without a parent's agreement.