You type an address. Your browser finds the right computer, asks it for a page, gets back a text file, and draws it. Everything on this page is one of those four steps, zoomed in.
Fourteen stops, in the order it really happens. Each has a short explanation and something to try. Read one stop at a time.
The internet is the network: cables, routers, Wi-Fi, and the rules for moving data between any two computers on Earth. The web is one thing that runs on it: pages, written in HTML, linked together, fetched with HTTP. Email, video calls, games and app updates all use the internet without being the web.
When the Wi-Fi light is on but nothing loads, the local network is fine and the internet link is down. When a page says 404, the internet worked perfectly and the web server simply has no such page. Knowing which layer failed is half of fixing it.
A URL (uniform resource locator) is the full address of one thing on the web. It has parts, and each part answers a different question: which rules, which computer, which page, with what details.
Read a domain name from the right. uk is the country code. co.uk is "companies in the UK". bbc.co.uk is the BBC's name inside that. www is a subdomain, a label the BBC chose for its web server; many sites no longer use it. Spain's code is .es; .com, .org and .net belong to no country.
Computers find each other by IP address, a number like 151.101.0.81. People remember names. DNS (the domain name system) is the phone book that turns one into the other, and nobody holds the whole book: it is split between thousands of servers and cached everywhere.
All six steps take about 50 milliseconds the first time.
DNS answers come with a time-to-live. That is why a website that moves to a new address can take "up to 24 hours" to work for everyone: old answers are still sitting in caches until they expire.
If an attacker poisons a resolver's cache with a wrong answer, you type the right name and land on a fake site. That is pharming, and it is why HTTPS checks the certificate matches the name, not just the address.
Nothing travels as one piece. The request, and later the page, are cut into packets of about 1,500 bytes. Each carries the sender's and receiver's IP addresses and a sequence number. Routers pass each one along, hop by hop, choosing a route each time. They can arrive out of order or get lost; TCP puts them in order and asks again for the missing ones.
Once connected, the browser sends a request: plain text, a few lines. The server replies with a response: a status line, some headers, and the page. HTTP (hypertext transfer protocol) is nothing more than the agreed shape of those two messages.
This toy holds a pretend website with four addresses. Ask for one and see exactly what goes each way.
| Code | Means | What you see |
|---|---|---|
| 200 | OK | The page. |
| 301 | Moved permanently | The browser quietly asks the new address instead. Search engines update their index. |
| 403 | Forbidden | The server knows the page but you may not have it. |
| 404 | Not found | The internet worked; the server has no such page. |
| 500 | Server error | Something broke on their side. Nothing you did. |
GET asks for a page and carries any details in the URL (?q=cats). POST sends data in the body of the request: a login form, a comment, an upload. That is why pressing Back after a POST asks "resubmit the form?": the browser would be sending the data again.
Plain HTTP is a postcard: every router on the way can read it. HTTPS puts the same conversation inside an encrypted envelope (TLS) and checks that the server is who it claims to be. The padlock means those two things, and only those two things.
The response body is a text file written in HTML. Tags label each piece of content: this is a heading, this is a paragraph, this is a link to there, this is a picture called that. The browser reads the labels and builds a tree, the DOM. HTML is not a programming language: it describes, it does not compute.
Elements nest like boxes in boxes. Close the inner one before the outer one. Every image needs alt text: it is what a screen reader says, and what shows if the file is missing.
Delete the closing </strong> in the toy and watch the bold spread to everything after it. A missing closing tag is the number-one HTML bug.
CSS (cascading style sheets) is a list of rules. Each rule picks some elements (the selector) and sets properties: colour, size, spacing. The browser matches every rule to the tree. One stylesheet can restyle a thousand pages, which is the point of keeping looks out of the HTML.
Try: body { background: #FFF3D4; } or h1 { text-align: center; } or li { list-style: square; }
From the inside out: content, padding (space inside the border), border, margin (space outside). Drag the sliders and watch the total width.
External: <link rel="stylesheet" href="styles.css"> in the head, one file for every page (best). Internal: a <style> block in the head, for one page. Inline: style="…" on one element. If they disagree, inline wins, then internal, then external. The ICT exam asks exactly this.
The third language is the only one the browser can run as a program. JavaScript waits for events (a click, a key, a timer, data arriving) and changes the tree: new text, new elements, new styles. Every button on this page is JavaScript doing that.
<button id="go">Click me</button>
<p id="out">Not clicked yet</p>
<script>
const button = document.getElementById("go");
const out = document.getElementById("out");
let count = 0;
button.addEventListener("click", function () {
count = count + 1;
out.textContent = "Clicked " + count + " times";
});
</script>Not clicked yet
Typing here runs: h1.textContent = input.value, and the preview in stop 7 changes as you type.
HTML is what is on the page. CSS is how it looks. JavaScript is what it does. Python never runs in the browser: when a site "uses Python", the Python runs on the server and sends back ordinary HTML.
Between "file received" and "page on screen" the browser does six jobs, always in the same order. Knowing them explains why some pages flicker, why a slow script freezes everything, and what "layout" means when a developer says it.
JavaScript runs on the same thread that lays out and paints. A script that takes two seconds stops the page responding for two seconds. Good pages do heavy work in small pieces, or in a background worker.
HTTP has no memory: every request is a stranger. So after you log in, the server sends a cookie, a small text note with a random session ID, and your browser sends it back with every later request. The server looks the ID up and knows it is you. Close the tab, the cookie is still there; delete cookies, and you are a stranger again.
(nothing yet)
GET /inbox HTTP/1.1 Host: mail.example.com (no cookie: the server sees a stranger)
You are not logged in.
A computer that is always on, running web server software (nginx, Apache) that waits for requests and sends files back. It could be a Raspberry Pi on a desk or one of ten thousand machines in a data centre. Hosting companies rent you space on theirs.
Rented by the year from a registrar. You then point it at your server's IP address in DNS. Nobody owns .com; a registry runs each top-level domain and registrars sell names under it.
Big sites copy their files to thousands of servers around the world. DNS sends each visitor to the nearest copy, so the image comes from Madrid rather than Seattle. Faster, and no single server to overload.
A static site is files on disk, the same for everyone: fast, cheap, safe. A dynamic site builds each page when asked, often with Python, PHP or Node.js, from a database: your feed, your basket, your inbox.
Google does not search the web when you press Enter. It searched it already, continuously, and you search its index.
The <title> and <h1> carry the most weight in the index, which is why a page about binary should say "binary" in both, and why clickbait titles exist.
Top of the results is not the same as true. Adverts sit above results and are labelled. Judge a page by who wrote it, when, and whether you can check it elsewhere.
0 of 10 answered