How the Web Works

By the end of this lesson you will be able to:

1. Explain in one sentence what happens when you type a URL into a browser.
2. Name four parts of a web address (URL): protocol, domain, path, query.
3. Tell the difference between a client and a server — and which one asks, which one answers.
4. Open the browser's Network tab and read one HTTP request.

Pull out your phone. Open google.com. Don't scroll. Look at the bar at the top — the strip with the website address.

That strip of characters is called a URL. Today we unwrap it.

Talk together (or think quietly)

• Where did this Google page come from?
• Did your phone make the page — or did it fetch the page from somewhere else?
• If Google's website lives on another computer somewhere in the world, how on earth did your phone find it?

The web is, at its heart, a conversation between two computers:

What happens when you type a URL

Let's trace a single trip. Your browser is asking for https://www.advaslearning.com/courses:

1. Browser asks DNS: “What's the address of www.advaslearning.com?”
2. DNS replies: “That site lives at 76.76.21.21.” DNS is the internet's phone book.
3. Browser sends an HTTP request: “GET /courses, please.” The request travels across the internet to 76.76.21.21.
4. Server sends an HTTP response: the HTML for the courses page, plus a status code — usually 200(= “here you go”).
5. Browser reads the HTML: it sees the page needs CSS, JavaScript and images. It asks the server for each of those too — separate little conversations.
6. Browser renders: it stitches the HTML, CSS, JS and images into the page you see.

Anatomy of a URL

Every URL has named parts. Take this one:

https://www.advaslearning.com/courses?ref=email

Four words you'll use every day

• HTTP — the rules of the conversation. The browser speaks HTTP; the server speaks HTTP.
• HTTPS — HTTP, but encrypted so nobody on the way can read your messages. Always use it.
• HTML — the format the server sends back. It's the page itself, in text form. You'll write some next lesson.
• DNS — the phone book that turns a name like advaslearning.com into an IP address like 76.76.21.21.

Let's actually watch a browser have this conversation. Every modern browser ships with a tool that shows you everything that happens during a page load. It's called DevTools.

Step 1 — Open DevTools

Open Chrome or Edge. Visit en.wikipedia.org/wiki/Malaysia. Now press F12 — or right-click anywhere and pick Inspect.

A panel opens. Click the tab labelled Network.

Step 2 — Watch the conversation

Press Ctrl+R (or Cmd+R on a Mac) to reload the page. The Network tab fills up with rows.

Every row is one request.You should see something like 60–100 rows on a typical Wikipedia page. That's how many little conversations your browser just had to show you one article.

Step 3 — Read the first request

The very first row is usually the request for the HTML itself. Click on it. A side panel opens with the request details. Look for:

• Request URL — the address your browser asked for.
• Request Method — almost always GET (= “give me”).
• Status Code — usually 200 (= “here you go”).

Step 4 — What are all those other rows?

Look at the filter buttons across the top of the Network tab: All · Doc · CSS · JS · Img · Media · Font · Other. Click each:

• Doc — the one HTML file the server sent first. Usually just 1.
• CSS — the stylesheets that make it look nice. Usually 3–10.
• JS — the JavaScript files that make it interactive. Often the biggest count.
• Img — every image on the page.

That's the conversation in action. The browser asked for the HTML first, then noticed it needed all those other files, and went and got each one. Modern browsers run many of these requests in parallel — which is why pages load fast even on slow connections.

Three tasks, working from your own browser. Open DevTools (F12), pick the Network tab, then reload the page each time.

1. Task 1 — Count the files

   Visit any website you actually use — try shopee.com.my, kfc.com.my, or your school's site. Reload with the Network tab open.

   How many requests does the page make in total? Write the number down.

2. Task 2 — Find three different status codes

   In the Network tab, the Status column shows numbers like 200, 301, 304 and 404. Find at least three different codes on a single page.

   Look up what each one means on MDN's HTTP status codes. MDN is the developer's dictionary — bookmark it now.

3. Task 3 — Read the source

   Right-click any page and pick View page source. A new tab opens with the raw HTML the server sent. It looks like a wall of text — that's fine. Find these three things:

   • The <title> tag — what does the page's title say?
   • One <link rel="stylesheet"> tag — that's the address of a CSS file.
   • One <script> tag — that's the address of a JavaScript file.

Below is a long URL. Your job is to identify every part. Write your answers down before you reveal mine.

https://www.bbc.co.uk/news/world-asia-65432109?utm_source=email&ref=daily#main

Find:

1. The protocol
2. The domain
3. The path
4. The query (everything after ? but before #)
5. The fragment — the bit after #. Tells the browser to scroll to a specific spot on the page.

• The web is two computers talking — a client (your browser) and a server.
• The client asks (HTTP request); the server answers (HTTP response).
• A URL is an address. It has a protocol, a domain, a path, and optionally a query and fragment.
• DNS is the internet's phone book — turns a domain into an IP address.
• The browser asks for HTML first, then everything that HTML references (CSS, JS, images).
• DevTools → Network is the X-ray that lets you see every request a page makes.