Three jobs in one page
A café has a lunch menu page with a list of dishes, a box to find one and a button for a dark theme. Somebody has to say what is on the page, somebody how it looks and somebody what it does when you press a button. On the web those are three languages, each with its own job.
By the end of this lesson
Note
I can say what HTML, CSS and JavaScript each do in a web page, and check a page with a short script.
Key words
- HTML: the language that says what is on a page: headings, lists, links, forms.
- Element: one part of a page, written as a tag such as
h2orli. - CSS: the language that says how elements look.
- Selector: the part of a CSS rule that says which elements it is for.
- Declaration: one setting in a rule, such as
margin: 1rem. - Box model: every element is a box of content, padding, border and margin.
- DOM: the page as the browser holds it, which JavaScript can read and change.
- Event: something that happens on the page, such as a click.
Starter: what you already know
Note
Answer in your head. 1. What do you click to go from one web page to another? 2. Name two things about text on a page that you could change, such as its colour. 3. What do you expect to happen when you press a button on a page? Answers: a link; its size, its font or its colour; something changes or a message appears.
Before you start
Note
Press Start the lab on the bar at the top of this lesson and wait until it says it is running. There is one container, jupyter, and the terminal reaches its Python with docker exec jupyter, which runs one command inside it. It has two links. JupyterLab, the first, is the editor, port 8888. Preview, the second, is the page itself, port 8000. Each Run button below types its command into your lab's terminal, one after another in the same session. To watch them, or to type your own, press Open terminal on the bar.
A page is a few plain files
ls site lists the three files of the page: index.html for what is on it, style.css for how it looks and app.js for what it does. The second command prints their sizes: 1373, 1125 and 1093 bytes, 3591 in all. That is a whole page. Open Preview to see it, and JupyterLab to read the files.
docker exec jupyter ls siteShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
docker exec jupyter python3 steps/sizes.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
HTML gives a page its structure
The script reads index.html the way a browser starts to, tag by tag. It counts 36 tags in all. a and li appear five times each and section three times. The second script prints only the headings, which is the outline of the page: one h1, Lunch menu, and under it three h2 headings. Headings are not for making text big. They are how the page says what it is about, and what a screen reader jumps between.
docker exec jupyter python3 steps/tags.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
docker exec jupyter python3 steps/outline.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
Check
Tip
How many h2 headings does the page have, and which is the h1? Answer: three, and the h1 is Lunch menu.
CSS rules say how it looks, and the box model is how they size it
A CSS rule is a selector and declarations in braces. The script finds 17 rules and 39 declarations, and the setting used most is padding, six times. Every element is a box: its content, then padding inside, then a border, then margin outside. The rule for .dish sets padding, margin-bottom, border and border-radius, which is why each dish is a bordered card with space round it. When two rules reach one element, the more specific selector wins, and between equals the later one. That is the cascade. body.dark is more specific than body, so a dark page swaps the colours. Change a value in style.css, save, reload the Preview, and run the script again.
docker exec jupyter python3 steps/css.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
JavaScript reacts to events by changing the DOM
The script reads app.js for what it defines and what it waits for. It has two functions, filterDishes and toggleTheme, and three listeners: submit and input on the search box and click on the theme button. When one of those events happens, the function changes the DOM, which is the page the browser holds. Try it in the Preview: type tom in the box and the list shrinks to the two dishes that contain those letters, then press Dark theme. There is no library and no network call, only what the browser already has.
docker exec jupyter python3 steps/js.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
Checking a page is part of making it
A page that looks right can still be broken. The first script lists every link and whether it goes somewhere: three links stay on the page and each finds its target, one goes to a file here and one to another site. The second asks the Preview's own server for the page, as a browser does, and prints status 200, the title Lunch menu, and that style.css comes back as text/css. A status of 404 would mean a file the page asks for is missing.
docker exec jupyter python3 steps/links.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
docker exec jupyter python3 steps/serve.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
A common mistake
Warning
Many people think the Preview changes as soon as they type. It does not. It shows the saved files, so press save in the editor and then reload the Preview. If the page looks unchanged, check both. The browser may also keep an old copy of a file, so a hard reload sometimes helps.
The same checks in a notebook
Open JupyterLab from the bar and double-click start.ipynb. Its cells read the same files in Python: they count the tags, list the CSS rules and ask the Preview for the page. Click a cell and press Shift and Enter to run it. The last cell is where your own change goes: edit style.css, save, and count the rules again.
Exit check
Tip
Answer without looking back. 1. Which language says what is on a page, which says how it looks and which says what it does? 2. What are the four layers of the box model, from the inside? 3. What does the cascade decide? 4. Why does the Preview not change when you only type in the editor? Answers: HTML, CSS, JavaScript; content, padding, border, margin; which rule wins when two reach one element; the Preview shows the saved files, so save and reload.
For teachers
Tip
This lesson is a small example of a lesson worked in a lab: the steps and the Run buttons are the lesson, and the lab is each student's own copy. The lab is one service, JupyterLab with a live preview of a small page, and nothing here marks itself: the student hands in their own version of the three files in site, downloaded from JupyterLab, and a sentence on one change and what it did. Key learning points: 1. HTML is structure, CSS is style, JavaScript is behaviour. 2. Every element is a box and the cascade decides which rule wins. 3. A page is checked, not only looked at. Common mistake: expecting the Preview to change before the file is saved. Equipment: the lab and a browser. Tip: ask students to predict what a change will do before they reload. The page and the scripts are written from fixed text, so every copy gives the same numbers. Copy it into your own module and change it, or build one from scratch with the Lab menu in the lesson builder.