How The Web Works
The Web is something we use every day, but many beginners do not clearly understand what happens behind the scenes when they type a website address into a browser.
The Difference Between The Internet And The Web
Many people think they are the same, but they are different.
Internet
The Internet is the global network of connected computers. It is the infrastructure — the cables, routers, and servers that allow devices to communicate.
Web
The Web (World Wide Web) is a service that runs on the Internet. It allows us to access websites using browsers.
The Internet is the road system.
The Web is one of the services that uses those roads.
Basic Components Of The Web
To understand how the web works, you must know the main components:
Client
The client is your device (computer, phone, tablet). It uses a browser like Chrome or Firefox.
Server
A server is a computer that stores websites and sends them to users when requested.
Browser
A browser is software that retrieves, interprets, and displays web content.
Protocol
A protocol is a set of rules for communication. The web uses HTTP or HTTPS.
DNS
The Domain Name System translates human-friendly names (like example.com) into IP addresses.
Step 1: You Enter A URL
A URL (Uniform Resource Locator) looks like this:
https://www.example.com/index.html
This URL has several parts:
- https → Protocol
- www.example.com → Domain name
- /index.html → Specific resource on the server
Step 2: DNS Lookup
Computers do not understand domain names. They understand IP addresses like:
93.184.216.34
When you enter a URL:
- Your browser asks the DNS server:
- "What is the IP address of www.example.com?"
- The DNS server responds with the correct IP address.
Now your browser knows where to send the request.
Step 3: Establishing A Connection
Your browser connects to the server using:
- HTTP (HyperText Transfer Protocol)
- HTTPS (HTTP Secure)
HTTPS is encrypted using TLS, which protects your data.
The connection is usually established over TCP (Transmission Control Protocol).
Step 4: Sending An HTTP Request
After connection, your browser sends an HTTP request.
Example of a simple HTTP GET request:
GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 Accept: text/html
Explanation:
- GET → Request method
- /index.html → Resource requested
- Host → Domain name
- User-Agent → Information about the browser
- Accept → Type of content expected
Step 5: The Server Processes The Request
The server:
- Receives the request.
- Finds the requested file.
- Runs server-side code if necessary (like PHP, Python, Node.js).
- Prepares a response.
Step 6: The Server Sends An HTTP Response
Example of an HTTP response:
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1256
<html>
<head>
<title>Example Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Explanation:
- 200 OK → Status code (success)
- Content-Type → Type of data returned
- Content-Length → Size of data
- HTML → The webpage content
Step 7: The Browser Renders The Page
The browser:
- Reads the HTML.
- Requests additional files (CSS, JavaScript, images).
- Builds the DOM (Document Object Model).
- Applies styles.
- Executes JavaScript.
- Displays the final page.
What Is HTML?
HTML (HyperText Markup Language) defines the structure of web pages.
Simple HTML example:
<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <h1>Welcome</h1> <p>This is a webpage.</p> </body> </html>
HTML defines structure, not design.
What Is CSS?
CSS (Cascading Style Sheets) controls appearance.
Example:
body {
background-color: lightblue;
}
h1 {
color: darkblue;
}
CSS makes pages look visually appealing.
What Is JavaScript?
JavaScript adds interactivity.
Example:
document.querySelector("h1").addEventListener("click", function() {
alert("You clicked the heading!");
});
JavaScript allows dynamic behavior.
Static Vs Dynamic Websites
Static Website
- Sends fixed HTML files.
- Content does not change unless manually updated.
Dynamic Website
- Content is generated by server-side programs.
- Uses databases.
- Changes based on user interaction.
Example technologies:
- PHP
- Python (Django, Flask)
- Node.js
What Happens When You Click A Link?
When you click a link:
- Browser sends a new HTTP request.
- Server responds.
- Browser re-renders page or updates part of it.
Modern websites often use AJAX or APIs to update content without reloading the entire page.
What Is HTTPS And Why It Matters
HTTPS encrypts data between browser and server.
Without HTTPS:
- Passwords can be intercepted.
- Data can be modified in transit.
With HTTPS:
- Data is encrypted.
- Identity of server is verified using certificates.
# Example URL
https://www.example.com/index.html
# Example IP address
93.184.216.34
# Example HTTP GET request
GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html
# Example HTTP response
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1256
<html>
<head>
<title>Example Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
# Example HTML
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a webpage.</p>
</body>
</html>
# Example CSS
body {
background-color: lightblue;
}
h1 {
color: darkblue;
}
# Example JavaScript
document.querySelector("h1").addEventListener("click", function() {
alert("You clicked the heading!");
});