Students find out that a link is words plus an address in an href attribute, and that only the words show on the page.
Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.
Predict and Run 10 min · Investigate 8 min · Modify 8 min · Mix it up 4 min · Make 10 min
Read the unit primer "Lists, links and pictures in 5 minutes" first, then do the Make task yourself in the playground (about 5 minutes).
An attribute is extra information about a tag, written inside the opening tag as name="value". href is the attribute that holds a link's address. The surprise for students is that the address does not show: only the words between <a> and </a> do. Links to example.com open a real placeholder page, so students can test a click.
On the slides at these points. Students can do the whole lesson on their own; these are for the room. In the deck, the Run, Modify and Make slides have the live playground in them (the tutorial link is the backup), and the notes above are in each slide's speaker notes.
Look at the code with your partner. Say what the page will show, and then what a click will do. Hold up 1, 2, 3 or 4 fingers for the option you chose.
Count the votes before anyone runs it. Ask one pair that picked an address option why. The idea to land: the address is information for the browser, not text for the reader.
Swap pages with a partner. Click each of their links, and say which words you clicked and where each one took you.
Listen for students who say they clicked the address. Ask which part of the tag holds it.
Putting the attribute in the right place. Ask which part of the tag is the opening one, rather than fixing the line.
| What you will see | A question to ask | The fix |
|---|---|---|
| The address shows on the page next to the words. | Is the href inside the opening tag, before the first >? | Move href="..." between a and the first >, so the tag reads <a href="...">. |
| The words are not a different colour and nothing clicks. | Does the link have both its <a href="..."> and its </a>? | Add the missing opening tag with href, or the closing </a>, around the words. |
| Everything after the link is clickable. | Where does the link end? | Add </a> straight after the words that should click. |
One possible solution for each task. Other correct programs are fine.
<h1>Sports day</h1>
<p>Read the <a href="https://example.com/join">club rules</a> before you join.</p>
<p>Ask your house captain for the timetable.</p>
<h1>Sports day</h1>
<p>Read the <a href="https://example.com/join">rulebook</a> before you join.</p>
<p>Ask your house captain for the timetable.</p>
<h1>Sports day</h1>
<p>Read the <a href="https://example.com/join">rulebook</a> before you join.</p>
<p>Ask your house captain for the <a href="https://example.com/timetable">timetable</a>.</p>
<h1>My top 5 books</h1>
<ol>
<li><a href="https://example.com/hobbit">The Hobbit</a></li>
<li>Wonder</li>
<li><a href="https://example.com/holes">Holes</a></li>
<li>Matilda</li>
<li>Hatchet</li>
</ol>
Stretch: Make a link to one of your own other pages in the playground, or a whole sentence into a link, and test where it ends.
Support: Give students the Modify starter and do the first task together, then link one item in the Make list.
In <a href="https://example.com/rules">club rules</a>, which part do people see on the page, and which part says where the link goes?
They see club rules. The href attribute, inside the opening tag, says where it goes.
Next lesson adds pictures, which are another tag with attributes: a name for the file and words for people who cannot see it. Class idea: show a real school page and hover over links to see the address in the browser's status bar.