Neural Sync Active

Web Fundamentals — How the Internet Works

Registry Synced

Web Fundamentals — How the Internet Works

942 words

5 min read

Reading compass

Now · 🎯 Learning Objectives

Web Fundamentals — How the Internet Works

🎯 Learning Objectives

Explain the client-server architecture of the web
Understand the HTTP request-response cycle
Identify parts of a URL (scheme, host, path, query)
Distinguish HTTP methods (GET, POST, PUT, DELETE)
Interpret HTTP status codes (200, 404, 500, etc.)

1. The Client-Server Architecture

1.1 Intuition: Restaurant Analogy

You (the client) go to a restaurant. You tell the waiter what you want (the request). The waiter goes to the kitchen (the server), which prepares your food and brings it back (the response). You never go into the kitchen directly. On the web:

Client: Your browser (Chrome, Firefox) — makes requests
Server: A computer hosting the website — processes requests and sends responses


pseudo
Browser (Client)  ──HTTP request──►  Web Server
                   ◄──HTTP response──

1.2 The Request-Response Cycle

When you type https://www.iitm.ac.in in your browser:

DNS lookup: Browser asks a DNS server "What's the IP address of www.iitm.ac.in?"
TCP connection: Browser opens a TCP connection to that IP (port 443 for HTTPS)
HTTP request: Browser sends an HTTP request (e.g., GET / HTTP/1.1)
Server processes: The server receives the request, processes it (runs code, queries database)
HTTP response: Server sends back an HTTP response (HTML page content)
Browser renders: Browser parses HTML, CSS, JS, and displays the page (Diagram)

2. HTTP Protocol Details

2.1 HTTP Methods

Method	Purpose	Body?	Idempotent?	Safe?
GET	Retrieve resource	No	Yes	Yes
POST	Submit data (create)	Yes	No	No
PUT	Update/replace resource	Yes	Yes	No
PATCH	Partial update	Yes	No	No
DELETE	Delete resource	Optional	Yes	No

Idempotent: Multiple identical requests produce the same result. Safe: Doesn't modify any resource (read-only).

2.2 HTTP Status Codes


pseudo
1xx: Informational (request received)
  101: Switching Protocols (WebSocket upgrade)
2xx: Success
  200: OK (standard success)
  201: Created (resource created)
  204: No Content (success, no body)
3xx: Redirection
  301: Moved Permanently (redirect)
  302: Found (temporary redirect)
  304: Not Modified (cached version)
4xx: Client Error
  400: Bad Request (malformed syntax)
  401: Unauthorized (not authenticated)
  403: Forbidden (no permission)
  404: Not Found (resource doesn't exist)
  405: Method Not Allowed
5xx: Server Error
  500: Internal Server Error
  502: Bad Gateway
  503: Service Unavailable

2.3 HTTP Request Format


pseudo
GET /path/page.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html
Cookie: session_id=abc123

2.4 HTTP Response Format


pseudo
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234
Set-Cookie: session_id=xyz789
<html>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

3. URLs — Uniform Resource Locators


pseudo
https://www.example.com:8080/path/to/page?name=Alice&age=25#section2
│      └────┬─────┘ └─┬┘ └─────┬──────┘ └─────┬──────┘ └───┬───┘
│          host      port      path         query      fragment
scheme

Component	Example	Description
Scheme	`https`	Protocol (http, https, ftp)
Host	`www.example.com`	Domain name
Port	`:8080`	Server port (default: 80 for HTTP, 443 for HTTPS)
Path	`/path/to/page`	Resource location on server
Query	`?name=Alice&age=25`	Key-value parameters (after `?`)
Fragment	`#section2`	Section within page (browser-only, not sent to server)

4. HTML Forms and HTTP Methods

When a user submits a form, the browser sends an HTTP request:


html
<!-- GET form: data in URL -->
<form method="GET" action="/search">
    <input name="q" type="text">
    <button type="submit">Search</button>
</form>
<!-- Browser sends: GET /search?q=java+programming HTTP/1.1 -->
<!-- POST form: data in body -->
<form method="POST" action="/login">
    <input name="username" type="text">
    <input name="password" type="password">
    <button type="submit">Login</button>
</form>
<!-- Browser sends: POST /login HTTP/1.1 -->
<!-- Body: username=alice&password=secret123 -->

5. Statelessness

HTTP is stateless — each request is independent. The server doesn't remember previous requests from the same client. This is why we need:

Cookies: Small data stored in the browser, sent with each request
Sessions: Server-side storage linked to a session ID (stored in a cookie)

6. Practice Questions

Q1: What happens when you type a URL and press Enter?

Answer: 1) Browser parses URL (scheme, host, path). 2) DNS lookup resolves hostname to IP. 3) TCP connection established (3-way handshake). 4) HTTP request sent. 5) Server processes request. 6) HTTP response received. 7) Browser renders HTML/CSS/JS. Q2: What's the difference between GET and POST?

Answer: GET: data in URL, limited size, no side effects (safe), can be cached/bookmarked. POST: data in body, unlimited size, can create/modify resources, not cached. Q3: What does status code 404 mean?

Answer: "Not Found" — the server cannot find the requested resource. This is a client error (4xx), meaning the URL is incorrect or the resource was deleted. Q4: What is the difference between 301 and 302 redirects?

Answer: 301 Moved Permanently: browser caches the new URL, search engines update their index. 302 Found: temporary redirect, browser uses the original URL next time. Q5: What makes HTTP stateless and how do we work around it?

Answer: Each HTTP request is independent; the server doesn't remember past requests. Workarounds: cookies (stored client-side), sessions (server-side storage), tokens (JWTs). Q6: What is the purpose of DNS?

Answer: The Domain Name System translates human-readable domain names (www.example.com) into machine-readable IP addresses (93.184.216.34). It's like the phonebook of the internet. Q7: What is HTTPS and how does it differ from HTTP?

Answer: HTTPS = HTTP + TLS/SSL encryption. Data is encrypted between client and server, preventing eavesdropping, tampering, and impersonation. The padlock icon in browsers indicates HTTPS. Q8: What does "Idempotent" mean in HTTP?

Answer: An idempotent method produces the same result regardless of how many times it's executed. GET, PUT, DELETE are idempotent. POST is NOT idempotent (submitting twice creates two resources).

📐 Key Concepts

Concept	Description
Client	Makes HTTP requests (browser)
Server	Processes requests, sends responses
HTTP	Application protocol for web communication
URL	Address identifying a web resource
GET	Retrieve data (safe, idempotent)
POST	Submit data (not safe, not idempotent)
Status codes	2xx success, 3xx redirect, 4xx client error, 5xx server error

🔗 Cross-References

Next: HTML Basics Join Discord Next1.2 HTML Basics