1 - Start ~4 mins
You already have a first web page with a heading, paragraphs and a list, and you have read the HTML tags each block wrote. Today you give that page real structure: subheadings, pictures, and a second page linked by a button. Still blocks only. Before you look at the HTML tab, try to name the tag yourself.
Open by pointing at a simple real page on the board (a school club page or a GAA club homepage works well) and ask: where does one section end and the next begin? Keep this under four minutes. Remind the class their earlier page should still be on the step; if it is missing, the builder starts them on a ready one-page shell with a heading, paragraphs and a list so nobody is stuck and they can still extend rather than restart.
2 - How a Page Gets Structure ~4 mins
A page that is only one long block of text is hard to scan. Structure breaks it into clear parts so a reader knows where they are.
- Subheadings mark the start of a new section, with paragraphs or other content under them.
- Images sit with the section they belong to, not floating at random.
- A second page, reached by a button, keeps related content from piling onto one screen. In the button block you set the target to that page's name so the button actually opens it.
Every one of those pieces is still a block. Each block still writes a real HTML tag. Your job today is to place the blocks, then name the tag before you open the HTML tab to check.
Keep this tight (about five minutes): name the three core pieces on the board (subheading, image, second page with button), show the diagram, then move straight into the builder. Do not mention list or divider here; introduce those live at machines during circulation in the next step.
Misconception to head off: students often think a second page means starting a brand-new project. Name it clearly: a second page lives in the same site and is reached by a button from the first, with the button target set to the second page's name.
Optional predict beat once the builder is open later: what tag do you think a subheading block will write?
3 - Hands-on: Give the Page Real Structure ~17 mins
Open the Web Page Builder. Your one-page site from earlier should be there; if it is missing, start from the Home page already in the builder (it has a heading, paragraphs and a list ready to extend).
Must do, Checkpoint 1: give Home real sections
- Add at least two subheadings on the Home page, each starting its own section, with a short bit of text or a picture under each one.
- Add at least one picture on the Home page that belongs with a section.
Must do, Checkpoint 2: add a second page and link to it
- Drag in another page block and give it a clear name (for example About or Fixtures). Then add a button on the Home page that opens it. In the button block, set the target to that exact page name so the button actually goes there. Example: if your second page is named About, the button target must say About, same spelling.
Test: open preview and click the button. If the second page does not open, check the target spelling matches the page name exactly.
Should do if you have time: add a short list under one subheading, and a divider between two sections.
After you add each content block (subheading, image, button, list, or divider), pause. Say the HTML tag you think it just wrote, then open the HTML tab and find that tag. Do not edit the code; this lesson is still blocks only.
Interactive activity
Before the lesson
Devices unlocked on the step. The builder is blocks-only (allowCodeEditing: false, level: pages). Earlier work should reload on the step; the start workspace is a fallback one-page shell that already has a heading, paragraphs and a list so recovery still feels like extending, not restarting.
Suggested timing
- First 3 minutes: everyone open, confirm they have a Home page with some content, recover anyone whose work is missing.
- Next 7 minutes: Checkpoint 1. Circulating build for two subheadings with content under each, plus one image in a section.
- Next 8 minutes: Checkpoint 2. Second page block, clear name, button on Home with target set to that exact name. Stop the class briefly for the test: click the button — does the second page open?
- Final 3 minutes: introduce list and divider only at machines that are ready; cold-call three students to name a tag they predicted correctly before looking.
Teaching tips
Run the predict-then-check beat out loud early: add one subheading on the board yourself, ask what tag will this write?, then reveal the HTML tab. Students who by now can name h2, img or a before looking are ready for the next lesson.
Look for: a button that does not actually link to the second page (target not set to the page name, or spelling mismatch); images dropped with no section around them; bare subheadings with nothing under them; a second page that is empty. Nudge those first. The exact-name button target is the most common stall: stand with the student, read the page name aloud, then watch them type it into the target.
Differentiation
If someone finishes both checkpoints early, ask them to add the list and divider, then a short section on the second page, predicting every new content-block tag before checking. If someone is stuck on the second page, stand with them and place the page block together, then let them set the button target and run the test alone.
4 - Your Turn: Structure Your Own Page ~9 mins
Now make the structure yours. Keep working in the same builder.
Must finish before you leave:
- Write or rewrite the subheadings and the text under them so the page is about something you care about (a club, a hobby, a local place, or the problem you investigated earlier). Give each section a clear job: one idea per subheading.
- Quick check only: your picture sits with the section it belongs to, and the button really opens the second page (target set to the second page's name). Fix only if something is broken; do not rebuild from scratch.
- Save or export your site using the method on the board (for example Export and save the file to your class folder). You will need this page again.
Should do if you have time:
- Add a short list under one subheading and a divider between two sections.
- Open the HTML tab and point to the tag that creates each piece of structure you used: the subheadings, the image, the link or button to the second page, and the list or divider if you added them.
Done looks like this: a Home page with at least two clear sections about your topic, one picture in the right place, a working link to a second page, and your site saved or exported.
This is independent application of the same skills, not a new build from scratch. Circulate and ask one question at each machine: which tag is doing the structuring here? Point at a subheading, a list, or the button and wait for the answer before they open the HTML tab.
Protect the must-finish path: personalised copy and the save or export. The button and picture check is a thirty-second verify, not a rebuild. Tag-naming in the HTML tab and list or divider are stretch; do not let weaker students lose the save chasing those.
If the HTML pane feels noisy, help them match one block at a time rather than reading the whole file. Common mix-up: treating the page name and the main heading as the same thing. They are not.
Write the exact save or export clicks on the board before this step; do not leave it verbal-only. Leave two minutes at the end of this step for the class save routine. Shared devices will not keep browser storage overnight.
5 - Make Sense ~3 mins
A structured page is easier to read because each section has a job, and a second page keeps related content from crowding the first. The blocks you placed wrote real HTML: subheadings, images and links are tags, not magic. If you could name the tag before you looked, you are reading the page the way a browser does.
Pull the class back for three minutes. Cold-call two quick wins: one student who predicted a tag correctly, one who fixed a button that did not link. Name the key idea once: structure is what turns a pile of content into a page people can scan.
Unlock the full learning experience
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.
This lesson is copyright of Coding Ireland 2017 - 2025. Unauthorised use, copying or distribution is not allowed.