How the Web Works

When you open a website, at least two computers talk to each other: yours and a computer somewhere else that stores the site. Programs on both sides follow agreed rules so that a phone in Kochi can read a page stored on a server in another country in under a second.

In this lesson you will follow what happens when you type a web address, take a URL apart, read a real HTTP request and response, and see how JSON lets programs swap data. This is the background you need before you learn to build websites.

Clients and servers

• A client is your device and the program on it that uses the web, usually a browser such as Chrome or Firefox, or an app.
• A server is a computer that stores websites or data and sends them to clients when asked.

Think of a restaurant. You (the client) ask the waiter for a dish. The kitchen (the server) prepares it and sends it out. You never go into the kitchen; you only see what comes to your table.

The internet is the worldwide network of connected computers. The web is one service that runs on it: pages and files fetched by browsers. Email and video calls also use the internet, but they are not "the web".

What happens when you type an address

Suppose you type www.example.com into your browser and press Enter:

1. DNS lookup. Computers find each other by number, called an IP address. The browser asks the DNS (Domain Name System), which works like a phone's contact list for the internet, for the IP address of www.example.com.
2. Request. The browser sends an HTTP request to that address, asking for the page.
3. Travel in packets. The data is split into small pieces called packets, which travel across the internet using the TCP/IP rules and are put back together at the other end.
4. Response. If all is well, the server replies with "200 OK" and sends the page's files.
5. Build the page. The browser reads the HTML, then requests the other files it mentions (CSS, JavaScript, images), and draws the page on your screen.

All of this usually takes less than a second.

The parts of a URL

A web address is called a URL (Uniform Resource Locator). Every part has a job:

Both languages have tools to split a URL into its parts. In Python:

from urllib.parse import urlparse, parse_qs

url = "https://www.example.com/books/search?city=Pune&page=2#results"
parts = urlparse(url)

print("Scheme:", parts.scheme)
print("Domain:", parts.netloc)
print("Path:", parts.path)
print("Query:", parts.query)
print("Fragment:", parts.fragment)
print(parse_qs(parts.query))

Scheme: https
Domain: www.example.com
Path: /books/search
Query: city=Pune&page=2
Fragment: results
{'city': ['Pune'], 'page': ['2']}

And in JavaScript, with the built-in URL object:

const url = new URL("https://www.example.com/books/search?city=Pune&page=2#results");

console.log("Domain:", url.hostname);
console.log("Path:", url.pathname);
console.log("City:", url.searchParams.get("city"));
console.log("Page:", url.searchParams.get("page"));

Domain: www.example.com
Path: /books/search
City: Pune
Page: 2

HTTP requests and responses

HTTP (HyperText Transfer Protocol) is the language browsers and servers use. A request is plain text. This one asks for a page:

GET /books/search?city=Pune HTTP/1.1
Host: www.example.com
Accept: text/html

The first word is the method. GET means "please give me this". POST means "here is some data", used when you submit a form, such as a login or an order. The server answers with a response that starts with a status code:

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8

<!DOCTYPE html>
<html lang="en">
...

Codes starting with 4 mean the request had a problem; codes starting with 5 mean the server had a problem.

JSON: how programs swap data

Web pages are for people. When programs talk to each other, for example a weather app asking a server for today's forecast, they usually send data in JSON (JavaScript Object Notation). JSON looks almost exactly like a JavaScript object or a Python dictionary:

{
  "city": "Jaipur",
  "temperature": 31,
  "rain": false,
  "next_days": [33, 34, 30]
}

JavaScript's fetch() sends a request and can read the JSON reply. This example asks a free practice server for a made-up user:

const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
console.log("Status:", response.status);

const user = await response.json();
console.log("Name:", user.name);
console.log("City:", user.address.city);

Status: 200
Name: Leanne Graham
City: Gwenborough

await means "wait for the answer to arrive before going on", because data from the network takes a moment. A server address that gives data instead of pages is called an API (Application Programming Interface). You will learn to use APIs in Fetch API and Working with Web APIs.

Front end and back end

A website has two halves, and different languages work on each:

A programmer who works on both halves is often called a full-stack developer.

Common mistakes

• Thinking the internet and the web are the same. The web is one service on the internet.
• Leaving out the scheme. In code, www.example.com on its own is not a full URL; write https://www.example.com.
• Reading 404 as "the internet is down". It only means that one page was not found on a server that is working.
• Treating JSON as a JavaScript object. JSON arrives as text and must be parsed, with response.json(), JSON.parse() or Python's json.loads().

Key points

• Clients (browsers and apps) request; servers respond.
• DNS turns a domain name into an IP address; data travels in packets using TCP/IP.
• A URL has a scheme, domain, path, query and fragment.
• HTTP requests use methods like GET and POST; responses carry status codes such as 200, 404 and 500.
• Programs swap data as JSON, often through APIs.
• The front end runs in the browser; the back end runs on the server and talks to the database.

from urllib.parse import urlparse, parse_qs

parts = urlparse("https://shop.example.in/search?q=cricket+bat&sort=price#top")
query = parse_qs(parts.query)

print("Domain:", parts.netloc)
print("Path:", parts.path)
print("Search:", query["q"][0])

Domain: shop.example.in
Path: /search
Search: cricket bat

const url = new URL("https://shop.example.in/search?q=cricket+bat&sort=price#top");

console.log("Domain:", url.hostname);
console.log("Path:", url.pathname);
console.log("Search:", url.searchParams.get("q"));

Domain: shop.example.in
Path: /search
Search: cricket bat