Making a simple web page

Ages 13 to 17 Read alone · about 60 minutes

Read together

A web page is a text file. HTML marks up the content with tags: headings, paragraphs, links and images. CSS controls how it looks: colours, fonts and layout. You can make a page with only a text editor and a browser, with no internet.

Good pages are accessible. Give images a short description (alt text) so people who cannot see them can understand. Use headings in order. Make text readable, with strong contrast.

This website is built the same way: plain HTML and CSS, with a little JavaScript, and no tracking.

Do it

1. Open a plain text editor and create a file named page.html. Type: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My page</title> </head> <body> <h1>About me</h1> <p>Hello!</p> </body> </html>. Save it and open the file in a browser.
2. Add a second heading with <h2>, a list with <ul> and <li>, and a link with <a href="...">. Reload the page to see each change.
3. Add style: in the head, write <style> body { font-family: serif; max-width: 40rem; margin: 2rem auto; } </style>. Change a colour. Check that the text is easy to read.
4. Add an image with <img src="photo.jpg" alt="A short description">. Why does alt text matter?

Talk about it

• What is the difference between HTML and CSS?
• Who benefits from alt text?

For the grown-up

Building a simple page at home teaches how the web works, and it can be done offline. If your teen wants to publish a page, discuss privacy first: do not include full names, addresses, schools or photos of other children.

Mark as done

← Previous lesson Next lesson →

Where this comes from

• World Wide Web Consortium (W3C), HTML Living Standard and Web Content Accessibility Guidelines (WCAG) 2.2, on text alternatives
• Mozilla Developer Network (MDN) Web Docs, “Learn web development”

Written with AI assistance and checked against the sources listed. Please read it before sharing it with a child.