Today you start a site of your own.
First you decide what it is about and how many pages it needs. Then you build the shape: a banner on the home page, a second page, a menu so both pages are reachable, and a box on each page ready for what goes in later.
You are not filling the pages with lots of writing yet. You are making the frame a visitor will move around.
Open the lesson on the board before pupils arrive so the Web Page Builder interactive is ready. Each pupil needs a device (or one between two) and a scrap of paper with a pencil for a two-minute sketch.
This lesson revises blocks many pupils met in 5th Class (page, banner, menu, box). The new habit is planning the shape before the detail. Keep the sketch short: it is a plan, not an art lesson.
Do not raise allowCodeEditing. The HTML and CSS tabs stay readable and locked. Typing comes only in the final lesson of the module, on a throwaway practice page.
Before you touch a block, decide two things:
Stuck for an idea? Try Home + My Dog, Home + Training Days, or Home + Favourite Books.
On your scrap of paper, draw two rough boxes side by side. Write the page name at the top of each box. Under each name, jot one word for what will go there later.
You have about two minutes. Stick figures and scribbles are fine. This is a plan, not a poster.
When you build, follow this plan. Do not invent a different site on the screen.
Time the sketch tightly (about two minutes). Call out halfway: Just the page names and one word each. Stop decorating.
Circulate and nudge vague plans toward something a visitor could understand ("stuff I like" becomes "my GAA club" or "my dog"). Pairs may share one plan if they share a device.
The three example pairs are already in the pupil text. Point at them on the board only if someone is still stuck.
Open the interactive activity. You already have one page on the canvas.
From Page, click the page block (the big block your other blocks sit inside).
Change the page name to match Page 1 on your sketch. Type the name carefully.
Pick a background colour and a text colour you can read easily. Light background with dark text works well.
Look at the Your web page tab. You should see your empty page with the name you chose.
Model renaming the page on the board first, then let pupils go. Watch for unreadable colour pairs (yellow on white, light grey on white). Say: If you squint and cannot read it, change it.
The starter page is almost empty on purpose. Do not let pupils race ahead into banners yet; the next step covers that.
A banner is a coloured strip across the top of a page. It tells a visitor the name of the site in one glance.
From Layout, drag a banner block onto your first page. Drop it inside the page block, near the top.
Type the title of your whole site into the banner (not just the page name). Pick a colour that stands out from the page background.
Check the Your web page tab. The banner should sit across the top of the home page only. You do not need a banner on page 2.
Model: From Layout, drag a banner block. Stress the category name every time; pupils who hunt under Content will get stuck.
Common slip: typing the page name into the banner instead of the site title. Prompt: What would a visitor read first to know what this whole site is about?
Banner colour is set on the block itself. Do not send anyone to the CSS tab to recolour it.
Banner stays on the home page only in this lesson. That is intentional.
A site with one page is just a poster. Yours needs two pages so a visitor can move around.
From Page, drag a page block onto the workspace. Place it beside or below your first page, not inside it.
Click the new page block. Change its name to match Page 2 on your sketch.
Pick colours for this page too. They can match the first page or be a little different, as long as the text is easy to read.
If something looks wrong: you should see two separate page blocks side by side (or one above the other). If the new page vanished inside the first one, drag it back out so it sits on its own.
You now have two pages. A visitor still cannot jump between them yet. That is next.
Model dragging a second page from Page. The common mistake is dropping the new page inside the first page block. Show the difference on the board: two separate page blocks side by side.
If the workspace feels crowded, show pupils they can drag pages apart.
Do not introduce the menu until both pages exist and are named. A menu with only one page teaches the wrong idea.
You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.