Behind the Screen: How Web Pages Actually Work

Think about the last time you typed a web address and pressed Enter. Within a fraction of a second, a fully designed page appeared on your screen — text, images, colours, buttons and all. But where did it come from? Your computer did not already have it. Something happened between you pressing Enter and the page appearing. In this lesson, you are going to trace that invisible journey, step by step, and discover the technology that makes it possible every single time.

**Step 1 — You type a URL.** A URL (Uniform Resource Locator) is the address of a web page, for example https://www.example.com. Every URL points to a specific file stored on a computer somewhere in the world. **Step 2 — DNS looks up the address.** Your browser cannot travel to 'www.example.com' directly. It first contacts a DNS (Domain Name System) server — think of it as the internet's phone book. DNS converts the human-readable name into an IP address: a numerical label such as 93.184.216.34 that identifies the exact server holding the page. **Step 3 — Your browser sends an HTTP request.** Now your browser sends a request to that server using HTTP (HyperText Transfer Protocol). HTTP is the agreed language — the set of rules — that browsers and servers use to ask for and send web pages. Modern sites use the secure version, HTTPS, which encrypts the data so nobody can read it in transit. **Step 4 — The web server responds.** A web server is a computer (or a network of computers) whose job is to store web files and send them out when requested. It receives your HTTP request, finds the right file, and sends back an HTTP response containing the page's code. **Step 5 — HTML gives the page its structure.** HTML (HyperText Markup Language) is the code that defines the content and structure of a page. HTML uses tags — short labels inside angle brackets — to tell the browser what each piece of content is. For example, `<h1>` marks a main heading, `<p>` marks a paragraph, and `<img>` places an image. Without HTML, the browser would have no idea what is a title and what is a caption. **Step 6 — CSS styles the page.** CSS (Cascading Style Sheets) is a separate set of instructions that controls how the HTML looks: colours, fonts, sizes, spacing, and layout. HTML says 'this is a heading'; CSS says 'make that heading blue, 32 pixels tall, and centred'. Separating structure (HTML) from style (CSS) makes pages easier to update — you can redesign the look of an entire site by editing one CSS file. **Step 7 — The browser renders the page.** The browser reads the HTML and CSS, calculates how everything should look on screen, and paints the page in front of you. This process is called rendering. It happens in milliseconds.