How Websites Work (HTTP)

1. What is HTTP?

When you want to visit a website, like YouTube or dev.to, HTTP is the process that helps load the videos, text, and images on your screen.

HTTP (HyperText Transfer Protocol) is simply a language (not programming language) that your computer and websites use to talk to each other. 🗨️

2. How Does HTTP Work?

HTTP follows a system called the client-server model:

• ↗️ Clients. These are the browsers you use—Chrome, Firefox, or Edge—that ask for information from websites.

• 🏪 Servers. Servers store all the information and respond to the browser's request.

Let me give you a metaphor, you ordered a pizza online. The client (your browser or YOU) places an order, and the server (the pizza shop) prepares and delivers the pizza.

3. The Request and Response Cycle

🈁 Here’s what happens step-by-step when you visit a website:

1. 🏁 Starting a Connection. Your browser first connects to the server, similar to dialing a phone number to start a conversation.

When a client requests a web page, it first establishes a TCP (Transmission Control Protocol) connection with the server.

TCP ensures a reliable data transfer between the client and server by managing data packets, error recovery, and sequencing.

2. 🙏 Sending a Request. Once the TCP connection is established, the client sends an HTTP request message via its socket interface.

This message contains a request line and several headers specifying details like the requested resource and client preferences.

3. 🚑 Getting a Response. The server finds the page and sends it back to your browser.

The server receives the request through its socket interface, retrieves the requested resource (e.g., an HTML file), and sends it back to the client encapsulated in an HTTP response message.

4. 💀 Closing the Connection. Once the information is sent, the connection is closed.

4. What Does an HTTP Message Look Like?

When your browser makes a request, it sends an HTTP Request Message.

👉 Here’s what request message includes:

GET /somedir/page.html HTTP/1.1
Host: www.organization.org
Connection: close
User-Agent: Mozilla/5.0
Accept-Language: en

• 🥱 Request Line. It asks for a webpage and tells the server what version of HTTP your browser uses.

For example, “GET/homepage.html HTTP/1.1” is like asking, “Can you give me the homepage, please?”🫡

• 🕵️‍♂️ Header Lines. These add extra details, such as your language preference.

Example: “Accept-Language: en” is like saying, “I’d prefer to read it in English.”

When the server responds, it sends an **HTTP Response Message:**

HTTP/1.1 200 OK
Connection: close
Date: Tue, 09 Aug 2011 15:44:04 GMT
Server: Apache/2.2.3 (CentOS)
Last-Modified: Tue, 09 Aug 2011 15:11:03 GMT
Content-Length: 6821
Content-Type: text/html
<data...data...data...>

• 🪖 Status Line. This tells if the request was successful or if there was an issue.

For example, "HTTP/1.1 200 OK" means, "Here's the webpage you asked for!"

• 🥘 Content. This is the actual page or data you asked for.

Example: If you asked for a webpage, this part contains the text, images, and videos.

5. Types of Connections

HTTP can use two kinds of connections:

1. 🐌 Non-Persistent Connections. Each request needs a new connection, which can be slow.

Imagine placing a separate order for each item in your pizza meal—one for the pizza, another for the drink, and so on. It would take longer.

2. 🎊 Persistent Connections. The connection stays open, so multiple requests can be sent at once.

Ordering everything you want from the pizza shop in one go is much faster! Isn't it? 😉

6. HTTP Status Codes

These codes let you know if your request was successful or if something went wrong:

• 200 OK: Everything is fine, and you get what you asked for.

• 404 Not Found: The page you wanted isn't there.

• 505 HTTP Version Not Supported: The server doesn’t understand the version of HTTP your browser is using.

📒 Here is the full HTTP Status Codes List in one PDF.

Conclusion 👏

HTTP is the essential process that makes it possible to browse the web smoothly.

So you now understand how it works, from sending requests to receiving responses, you can NOW better appreciate the complex yet fascinating system behind every click and webpage.