The web

People use the two words as if they mean the same. They don't. The internet is the hardware: a worldwide network of networks. The World Wide Web is one service that runs on top of it: pages, joined by links.

A URL (Uniform Resource Locator) is the full address of one thing on the web: a page, an image, a video. Every part has a job. Read it left to right, like a postal address read from country down to flat number.

The web runs on one simple pattern: the browser (the client) sends a request; the web server sends back a response. The rules for these messages are called HTTP: HyperText Transfer Protocol.

GET /news HTTP/1.1
Host: www.bbc.co.uk
User-Agent: Firefox/131
Accept: text/html

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 48213

<!doctype html>
<html> …the page… </html>

1. The method says what you want. GET = "please send me this". POST = "here is some data", e.g. a form you filled in.

2. Headers are extra lines of information: which site (Host), which browser (User-Agent), what type of file comes back (Content-Type).

3. The status code is a 3-digit number at the top of every response. Its first digit tells you the kind of answer.

4. The body is the actual file: HTML, an image, a video chunk. A blank line separates it from the headers.

Plain HTTP sends everything as readable text. Anyone on the path (the café Wi-Fi, a router) could read or change it. HTTPS is HTTP sent inside an encrypted tunnel built with TLS (Transport Layer Security).

Every web page is built from three layers. Keeping them separate means you can change how a site looks without touching its content, and the other way round.

How the browser draws a page

HTML (HyperText Markup Language) labels each piece of content so the browser knows what it is. A label is a tag in angle brackets. Most come in pairs: an opening tag and a closing tag with a slash.

<h1>Hot Potato</h1>
<p>A party game for <strong>four</strong> players.</p>
<img src="potato.png" alt="A cartoon potato with a fuse">
<a href="https://example.com">Visit the site</a>
<ul>
  <li>Fast rounds</li>
  <li>Silly physics</li>
</ul>

A whole HTML page has a fixed skeleton. The head holds information about the page. The body holds what you actually see. The browser turns it into a family tree called the DOM (Document Object Model).

<!doctype html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <title>Hot Potato</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hot Potato</h1>
    <p>A <strong>party</strong> game.</p>
    <img src="potato.png" alt="A potato">
  </body>
</html>

1. <!doctype html> tells the browser "this is modern HTML". It's not a tag; it's a notice.

2. <html lang="en-GB"> is the root: everything else is inside it. lang tells screen readers which accent to use.

3. <head> is metadata: data about the page. The <title> shows in the browser tab and in search results. <link> loads the CSS file.

4. <body> is everything drawn on screen.

5. In the tree, an element inside another is its child. strong is a child of p, which is a child of body. JavaScript finds and changes elements by walking this tree.

CSS (Cascading Style Sheets) is a list of rules. Each rule says: "find these elements, and make them look like this". One CSS file can style every page of a website.

The box model

Every element is drawn as a rectangle with four layers, from the inside out.

To put a site on the web you need two things. Hosting: a web server, a computer that is always on and always connected, to keep your files and send them out. And a domain name, so people can find that server.

1. Register a domain through a registrar (a shop that sells names). You rent it, usually by the year. Nobody owns a name for ever.

2. Rent hosting: space on a web server in a data centre, from a hosting company or a cloud provider. Or run your own server, if it can stay on all the time.

3. Point the name at the server: add a DNS record that says "hotpotato.es → this IP address".

4. Upload your files (HTML, CSS, images). Now any browser in the world can request them.

How long does a page take to arrive?

A page's weight is the size of everything it needs: HTML, CSS, scripts, images, fonts. A typical home page today weighs about 2 to 3 MB, mostly images.

1. A 3 MB page on a 20 Mbps connection. File sizes are in bytes (big B), speeds in bits (small b).

2. Turn megabytes into megabits: 3 × 8 = 24 megabits. (8 bits in every byte.)

3. Each second, 20 megabits arrive. How many seconds for 24? 24 ÷ 20 = 1.2 seconds.

4. Make the page lighter: shrink the images to 1 MB in total. 1 × 8 = 8 megabits. 8 ÷ 20 = 0.4 seconds. Three times faster.

5. Real pages are a bit slower: each of the dozens of requests has a round-trip delay (latency) before data starts flowing.

A search engine can't read the whole web when you press Search: that would take years. It does the hard work in advance, in three stages. When you search, you search its index, not the live web.

PageRank: links are votes

Google's first big idea (Larry Page and Sergey Brin, 1998) was PageRank. A link from page X to page Y is a vote for Y. But votes aren't equal: a vote from a popular page counts more, and a page that links to many others splits its vote between them.

1. Give every page the same score to start: 1 ÷ (number of pages).

2. Each round, every page shares its score equally among the pages it links to.

3. A page's new score = a small fixed amount + 0.85 × (the shares it received). The 0.85 is the chance a surfer keeps clicking links instead of typing a new address.

4. Repeat until the scores stop changing. Pages with many links from high-scoring pages end up on top.

A good website works for everyone, including people who are blind, deaf, dyslexic, colour-blind or can't use a mouse. And it is honest about what it remembers about you.

Accessibility

Cookies

A cookie is a small piece of text a website asks your browser to keep, like basket=3items. Your browser sends it back with every request to that site. That's how a stateless protocol remembers you.

The mistakes almost everyone makes at first. Read the left side, then the right.

Quick questions first. Then endless practice: a wrong answer shows you the working, step by step.