TECH CLUBBOZOMA INNOVATION HUB

Session 38 • Page 1

Learner Full Name:

School:

Assigned Workstation:

Class:

Session 38: Build a Web Page

Since Session 11 you have visited hundreds of web pages. Today you switch sides: you become a web builder. You will plan a small website about your community, build it with Google Sites, publish it for the Hub, and then peek behind the curtain at HTML, the language every web page is written in.

1. Plain Talk: A Website Is a Compound House

Think of a family compound house. At the front is the gate with a signboard: that is the home page, the first page visitors see. Inside are rooms: those are the other pages. A corridor joins all the rooms: that is the menu (navigation bar). The doors that take you from room to room, or out to another house, are links. And just as every house can have a GhanaPost GPS digital address, every website has a web address (URL) so people can find it.

Figure 38.0: The parts of a website. A site is a set of pages joined by a menu and links, found at one web address.

📄 Web page

One single page, like one room. For example, the "Food" page.

🏠 Website

A group of pages that belong together, with one name and one address, like the whole compound house.

Plan Before You Build: The Sitemap

Session 38 • Page 2

1. Three Planning Questions

No mason builds a house without a plan. Before you open Google Sites, answer three questions:

🎯 1. Purpose

Why does this site exist? "To tell visitors about the good things in our town."

👥 2. Audience

Who will read it? "Pupils at the Hub and visitors to our town." Write for them.

🗂️ 3. Pages

What rooms does the house need? Keep it small: 3 or 4 pages is plenty.

2. Draw a Sitemap

A sitemap is a quick drawing of all the pages and how they connect. It is like the family tree you drew for folders in Session 4: the home page is at the top.

Figure 38.1: A sitemap for "Our Bozoma". One home page at the top, four pages below it.

3. Your Turn: Plan Your Community Site

Planning question	My plan
Site name
Purpose
Audience
Pages (3 or 4)

🛡️ THE WEB BUILDER'S SAFETY RULES

1. No personal details: no full names, phone numbers, house addresses, your school timetable or your route home (Session 33's P.I.I. shield).
2. No faces without consent: use photos of places and things, not people, unless you have their (and a parent's) permission.
3. Only pictures you may use: your own photos, or ones your mentor gives you (Session 27). Never copy any picture from Google Images.
4. Publish to the Hub only, not the whole world, unless your mentor says otherwise.

Building with Google Sites

Session 38 • Page 3

1. The Google Sites Editor

Google Sites is a free website builder. You don't write any code: you click, type and drag, like making a slide in Session 23. Go to sites.google.com and sign in with the Hub's learning account.

Figure 38.2: The Google Sites editor: your page on the left, the Insert, Pages and Themes tabs on the right, and Preview (👁) and Publish at the top. It may look slightly different.

2. The Six Builder Moves

Move	How to do it
1. Start a site	Click Blank site (+). Type the site name top-left (for example Our Bozoma) and click the big title on the page to change it.
2. Add content	Insert tab → Text box, Images (Upload) or Map (search for a place, then Select). Drag blocks to move them.
3. Add a link	Select some words, press Ctrl + K (or the 🔗 button), paste or choose the address and click Apply.
4. Add pages	Pages tab → + at the bottom → New page → type its name → Done. It appears in the menu by itself.
5. Choose a theme	Themes tab → pick one theme and one colour for the whole site. Every page then matches.
6. Preview and publish	Click Preview 👁 and use the phone, tablet and computer buttons to check every size. Then Publish (see Page 5).

💡 GOOD WEB DESIGN = GOOD SLIDE DESIGN

Use the same rules you learnt for slides in Session 23: short text, big clear headings, strong contrast, one theme and colour scheme, and pictures that help the words. Most people will read your site on a phone, so always check the phone preview.

Behind the Curtain: A First Look at HTML

Session 38 • Page 4

1. What Is HTML?

Google Sites writes the code for you, but every web page in the world is really made of HTML (HyperText Markup Language). HTML uses tags in angle brackets to tell the browser what each piece of the page is: a heading, a paragraph, a picture or a link.

Figure 38.3: An HTML element. Most tags come in pairs: an opening tag and a closing tag with a slash.

2. Four Tags to Start With

Tag	What it makes
`<h1>…</h1>`	The main heading. (`<h2>` is a smaller heading, like the Heading styles in Session 17.)
`<p>…</p>`	A paragraph of text.
`<a href="…">…</a>`	A link. `href` holds the address it goes to; the words between the tags are what you click.
`<img src="…" alt="…">`	A picture. `src` is the picture file; `alt` describes it for people who can't see it. No closing tag.

Figure 38.4: The browser reads the tags (left) and draws the page (right). The tags themselves stay hidden.

🔗 HTML AND YOUR SCRATCH CODE

HTML describes a page; it has no loops or IF blocks like your Scratch games in Sessions 36–37. But the same law applies: the computer does exactly what you write. A missing / or > is a bug. Debug it like a coder: spot it, trace it, fix one thing.

Spot the bug: <p>Kelewele is the best snack<p> What is wrong?

Guided Hands-On Lab: Build & Publish

Session 38 • Page 5

Warm up in the Web Page Builder 3D lab on your session page: build a page about your community from blocks, then peek at the HTML behind it and change it. Then build the real thing.

1. Mission 1: Your Community Site in Google Sites

1

At sites.google.com, click Blank site (+). Give the site your planned name, and type a welcome title and two or three sentences on the home page.

2

Pages tab → add 2 or 3 pages from your sitemap. On each, add a heading and a short text box.

3

Insert → Images and add one allowed picture (places, not faces): Upload it from the Community Photos folder on the PC, or Select image → Drive if your mentor shared it there. On the map page, Insert → Map, search for a place in your town and click Select.

4

Add one link (for example to scratch.mit.edu, or from the home page to another page of your own site). Pick a theme. Click Preview 👁 and check the phone view.

5

Click Publish. Type a web address (for example our-bozoma-ama). Under Who can view my site, keep it to people in the Hub's organisation, as your mentor shows you. Click Publish, then open the link to check it works.

2. Mission 2: Write a Tiny Page in Notepad

6

Open Notepad. Type the four lines from Figure 38.4, using your own town and words. Then File → Save as, choose the MyWebPage folder on the desktop (it already holds market.jpg), set Save as type to All files and name it my-page.html.

7

In File Explorer, double-click my-page.html: it opens in the browser. Change a word in Notepad, press Ctrl + S, then press F5 in the browser to see your change.

Builder's checklist	Done	Notes
Home page + at least 2 more pages in the menu
An allowed image, a map and a working link
One theme; checked in phone preview; no personal details
Published to the Hub. My web address:
my-page.html opens in the browser with h1, p, img and a

Session 38 Review & Verification

Session 38 • Page 6

1. True or False?

Statement	True	False
A website is a group of web pages joined by a menu and links, found at one web address.
It is fine to put a classmate's photo and phone number on your community website.
You should check how your site looks on a phone before you publish it.
In HTML, `<a href="…">` makes a picture.
A closing tag has a slash, like `</p>`.

2. Written Review Questions

Question 1: What three questions should you answer before you build a website, and what is a sitemap?

Question 2: Write the HTML for a heading that says Welcome and a paragraph that says Akwaaba to our town.

3. Self-Assessment & Mentor Sign-Off

Tick the column that reflects your confidence at the end of Session 38:

Web Building Competency	With Help	Almost Alone	All By Myself!
1. I can plan a website: purpose, audience, pages and a sitemap.
2. I can build pages in Google Sites with text, images, a map, links and a theme.
3. I can preview a site on a phone and publish it safely to the Hub.
4. I can write a tiny HTML page with h1, p, a and img and open it in a browser.

Mentor Signature: _____________________________

Date Completed: ____________________