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:
Step 2: DNS Lookup
Computers do not understand domain names. They understand IP addresses like:
93.184.216.34
When you enter a URL:
Now your browser knows where to send the request.
Step 3: Establishing A Connection
Your browser connects to the server using:
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:
Step 5: The Server Processes The Request
The server:
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:
Step 7: The Browser Renders The Page
The browser:
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
Dynamic Website
Example technologies:
What Happens When You Click A Link?
When you click a link:
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:
With HTTPS:
# 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!");
});