Today you type real HTML yourself.
You will work on a small practice page, not the site you finished. That site stays safe.
You will change tags, write a new tag, put one tag inside another, and fix a tag when it breaks.
This is the only lesson in the primary programme where pupils type code. It is last on purpose.
They work on a throwaway practice page supplied by this lesson. Their finished site is never opened, so nothing they built can be lost.
Say up front: typing is one-way. From the first keystroke in the HTML tab, the code drives the page and the blocks stop. The interactive shows a notice when that happens. Treat the notice as the teaching moment, not a problem.
Warn before anyone uses go back to blocks: it discards what they typed, with no confirmation.
Work on the practice page carries forward from step to step within this lesson. Pupils do not reopen or reload between steps; the page is simply there.
Until today, blocks wrote the HTML for you. You read it in the HTML tab.
Today you type in that tab yourself.
A tag is a short code marker. Most tags come in pairs: one to open and one to close. The closing tag has a slash, like this:
<p>These words show on the page.</p>
The words between the tags are what the visitor sees.
Two important warnings.
1. This lesson opens a small practice page only. It is not your finished site.
2. Leave go back to blocks alone unless your teacher says otherwise. That button throws away what you typed.
Keep this beat spoken and short. Write one pair of tags on the board, for example <p>hello</p>, and point to the opening tag, the words in the middle, and the closing tag with its slash.
Do not teach the words selector, property, stylesheet or attribute. Tag is enough.
Run the two warnings as a quick call-and-response before anyone opens the interactive: Practice page only? (class answers) and Leave go back to blocks alone? (class answers). Check faces before you move on.
Leave these three sample lines on the board for the whole second half of the lesson so pupils can glance back: <h1>My heading</h1> · <p>A sentence.</p> · <p>A <strong>word</strong> inside.</p>. The same three lines also sit in the pupil copy for Your turn, so solo learners still have a model if the board is bare.
Open the interactive activity.
You should see a small practice page called Practice, with a heading, two sentences and a picture.
This is not your finished site. It is a page just for today's typing.
Click the HTML tab.
Find these parts in the code:
<h1> and </h1> around the heading<p> and </p> around the sentences<img (that is the picture)Do not type anything yet. Just read and point to each part on your screen.
Model on the IWB first: open the interactive, show the practice page preview, then switch to the HTML tab and point to h1, the two p tags and the picture line that starts with <img.
If a pupil is still on their old site, they are in the wrong lesson save. Have them open this lesson fresh so the practice start workspace loads.
Once the practice page is open, work carries forward across the later steps in this lesson. Pupils stay on the same page; they do not need to reopen it.
Nobody should type in this beat. Reading first makes the later beats safer.
If anyone asks why the picture line has no closing tag, say: some tags stand alone. The picture tag is one of those. Today we only type tags that come in pairs.
Stay on the HTML tab.
Find the heading line. It looks like this:
<h1>My Favourite Pet</h1>
Click between <h1> and </h1>.
Delete the old words and type a new heading of your own. Keep the tags. Only change the words in the middle.
Before you open the Your web page tab, pause. What do you think will change on the page?
Now open Your web page. Was your prediction right?
Next, change the words inside one of the <p>...</p> tags the same way.
Check the page again.
If a notice appears about the code now driving the page, that is meant to happen. You are typing real HTML.
The moment a pupil types the first character, the interactive switches so code is the source and the blocks stop driving the page. A notice says so. Name it calmly: That notice means you are in charge of the code now.
Hold the room for the predict pause before anyone clicks the preview tab. Take two quick voices: What do you think will change? Then let them check.
Common snag: a pupil deletes a tag by mistake while editing the words. If the page looks wrong, help them put the opening and closing tags back around the text.
Remind the room once: leave go back to blocks alone, or the typing will be thrown away.
Stay on the HTML tab.
Click at the end of the last paragraph line. Press Enter to make a new empty line.
Type this whole tag yourself, carefully:
<p>I am typing this tag myself.</p>
Check every character: opening tag, your sentence, closing tag with a slash.
Tip: to type < and >, hold Shift and press the comma or full-stop key. Check you have both angle brackets, and a / in the closing tag.
If typing the whole line feels hard, copy the example above, paste it onto your new line, then change the words in the middle to your own sentence.
Open the Your web page tab. Your new sentence should show on the page.
If it does not, compare your line to the example and fix any missing piece.
Model typing the full line slowly on the IWB, saying each part: open, words, close with a slash. Show Shift + comma for < and Shift + full stop for > once on the board keyboard if anyone stalls.
Point out the paste-then-edit path for anyone who finds full typing slow: copy the sample, paste, then edit only the middle words. That still counts.
Typos are the lesson. Missing <, a forgotten slash, or odd characters are all useful. Ask which part of the pair is wrong? rather than fixing it for them straight away.
Pupils who finish early can add a second new paragraph the same way.
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.