Students predict that a downloaded page loses its pictures, download a page and its files into one folder and open it from their computer, match paths to where they look, sort what is safe to publish, find a path from one computer, fix three paths, and publish their own 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.
SlidesDownload Present from the browser, or export to PowerPoint or PDF.
WorksheetDownload Print the student copy; the Teacher edition has the answers.
Students will be able to
I can download a page and every file it uses into one folder.
I can make every path in a page relative, so it works online.
I can publish a page and check it from another device.
Timing
Predict and Run 15 min · Investigate 10 min · Modify 5 min · Make (publish) 25 min
Before class
A website is a folder: index.html (the name hosts show first) and the files it uses, side by side. The playground's Download button saves the page as index.html, wrapped in a full HTML page if the student's code has no <!DOCTYPE>, and lists the files it uses from beside it (pictures, bootstrap.min.css, vue.js, weather.json), each with its own download link. Opening index.html by double-clicking tests nearly everything; a page that uses fetch needs a host (browsers block fetch from a file on the computer).
Publishing is teacher-led, because every host needs an account. Choose one before the lesson and check your school's rules on accounts, age and what students may publish:
GitHub Pages: free, needs a GitHub account (13 or older); upload the folder to a repository and turn on Pages. Good for students who go on to code.
Netlify Drop: drag the folder onto app.netlify.com/drop; a free account keeps the site online.
Your school's own website or learning platform, if it can host a folder of files; often the simplest for younger students, with no new accounts.
No accounts at all: students can still finish (the publish step is a "typical" step); the downloaded folder on a USB stick or shared drive is a working site.
Privacy: the sort task covers what stays off a public page. Check that no page names a student or the school, and that photos follow the school's consent rules.
Running the lesson
Predict: have everyone download only index.html first and open it, before the Run step, so the broken picture is their own.
Run: check each student's folder: index.html plus every listed file, all side by side.
Investigate: for the sort, ask "could a stranger use this to find you?"
Modify: point at the preview: the broken pictures are what Sam's visitors would see.
Make: publish together with the host you chose; open each address on another device.
The hard part (on purpose)
Things work on the student's computer and not online, and they can't see why. Ask "where is this file, and where does the path look?" before checking anything for them.
When students get stuck
What you will see
A question to ask
The fix
Pictures are broken when index.html is opened from the computer.
Is the picture file in the same folder as index.html, with exactly the same name?
Download it into that folder; names must match, capitals included.
A Bootstrap or Vue page looks plain or does nothing once downloaded.
Is bootstrap.min.css (or vue.js) in the folder?
Download the library from the list the Download button shows.
The fetch lesson's page says Loading for ever on the computer.
Was it opened by double-clicking?
fetch needs a host: test it once it is published.
Answers to the checks
Predict: You download only index.html and open it from your Downloads folder. What do you see? The page, with a broken picture. src="trophy.svg" means "beside this page", and trophy.svg is not beside it in Downloads. Put it in the same folder.
Where does it look?: Where does each path look for its file? trophy.svg → C. beside the page, in the same folder; images/trophy.svg → D. in a folder called images, beside the page; C:/Users/ada/Desktop/trophy.svg → B. on Ada's computer only; https://example.com/trophy.svg → A. on another website Relative paths travel with the folder: the page finds its files wherever the folder goes. Paths on one computer break everywhere else.
Safe to publish?: Which of these are fine on a public page for a school club, and which stay off it? The club's name and meeting day → Fine to publish; Pictures you drew yourself → Fine to publish; Your full name and your school's address → Keep it off; Photos of classmates → Keep it off; Your email address or phone number → Keep it off Anything online can be copied and kept. Leave out what identifies a person, and ask before using anyone's photo; your school will have its own rules too.
Spot the bug: On Ada's computer both pictures show. Online, the trophy is a broken picture and the medal is fine. Click the line that is wrong. line 2 C:/Users/ada/Desktop/ is a folder on Ada's computer, not on the web. Put trophy.svg in the site's folder and write src="trophy.svg".
Where this leads: You change your page after it is online. What do you do? Change the files in the folder, and publish the folder again The host shows whatever files you last gave it. Change, test on your computer, publish again.
Solutions
One possible solution for each task. Other correct programs are fine.
Modify
<linkrel="stylesheet"href="bootstrap.min.css"><divclass="container mt-3"><h1>Art show</h1><imgsrc="star.svg"alt="A star"width="60"><imgsrc="medal.svg"alt="A medal for the best painting"width="60"><pclass="lead">Year 8 paintings in the hall, Thursday after school.</p></div>
publish your page
Open task: any program that does what the step asks.
Stretch and support
Stretch: Make a second page (about.html) and link the two with relative links. Add the page's language and a description in the head. Run Lighthouse on the published page.
Support: Prepare one folder for the class (the run page and its pictures) so everyone publishes the same site first, then their own.
Exit ticket
Why does src="C:/Users/ada/Desktop/trophy.svg" break online, and what should it be?
It points at a folder on Ada's computer, which the web can't reach; put trophy.svg beside the page and write src="trophy.svg".
What each step is for
Predict: Students think the page is one file; predicting a broken picture makes "a site is a folder" concrete before they download anything.
Investigate: A relative path is read from where the page is; anything that points at one computer, or at nothing, breaks online.
Modify: Making a page ready to publish is making every path relative to the page.
publish your page: Goals only: the student's own checked page, as a folder, online at an address.
Where it leads
Web apps with Flask: sites that run code on a server, for logins and shared data. Class idea: a shared class gallery page linking every student's published page.