Before we dive into writing HTML, it's important to understand how the web actually works. When you type a website address into your browser and press Enter, a complex but fascinating process happens behind the scenes to display that webpage on your screen.
The Big Picture
The web works on a simple principle: request and response. Think of it like ordering food at a restaurant:
- You (the customer) ask the waiter for food
- The waiter takes your order to the kitchen
- The kitchen prepares your food
- The waiter brings the food back to you
On the web, your browser is you (the customer), the waiter is the internet, and the kitchen is the web server. Let's break this down step by step.
The Key Players
1. The Client (Your Browser)
A client is any device or program that requests information from a server. In web development, we usually mean your web browser—Chrome, Firefox, Safari, Edge, etc.
Your browser's job is to:
- Send requests to web servers
- Receive HTML, CSS, and JavaScript files
- Interpret and display those files as web pages
- Handle user interactions (clicks, form submissions, etc.)
2. The Server
A server is a powerful computer that stores website files and delivers them to clients when requested. Servers are always on and always connected to the internet, waiting to respond to requests.
When someone says "the website is down," it usually means the server isn't responding to requests properly.
3. The Internet
The internet is the massive network of connected computers that allows your browser and web servers to communicate. It's like the road system that connects your house to the restaurant.
What Happens When You Visit a Website
Let's walk through exactly what happens when you type www.example.com into your browser:
Step 1: You Enter a URL
A URL (Uniform Resource Locator) is the web address you type into your browser. For example: https://www.example.com/about.html
This URL contains several parts:
https://- The protocol (how to communicate)www.example.com- The domain name (the server's address)/about.html- The specific file you want
Step 2: DNS Lookup
Your browser needs to find the actual server, but servers don't use names like "example.com"—they use numbers called IP addresses (like 192.168.1.1).
Your browser contacts a DNS (Domain Name System) server, which is like a phone book for the internet. The DNS server looks up "example.com" and returns the IP address of the server that hosts that website.
Think of it this way:
DNS is like looking up "Pizza Hut" in a phone book to find their phone number (192.168.1.1). You know the name, but you need the number to contact them.
Step 3: HTTP Request
Now that your browser knows the server's IP address, it sends an HTTP request to that server. HTTP stands for HyperText Transfer Protocol—it's the language browsers and servers use to communicate.
The request basically says: "Hey server at 192.168.1.1, please send me the file called about.html"
GET /about.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Your Browser)
Accept: text/htmlStep 4: Server Processes Request
The web server receives your request and:
- Checks if the file exists
- Verifies you have permission to access it
- Retrieves the HTML file from storage
- Prepares to send it back to your browser
Step 5: HTTP Response
The server sends back an HTTP response containing:
- A status code (200 means success, 404 means not found, etc.)
- The HTML file you requested
- Additional information about the file
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234
<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
</head>
<body>
<h1>Welcome to our About page!</h1>
</body>
</html>Step 6: Browser Renders the Page
Your browser receives the HTML file and starts reading it from top to bottom. As it reads, it:
- Builds a structure of the page in memory
- Requests any additional files needed (images, CSS, JavaScript)
- Displays the content on your screen
- Applies styling and makes elements interactive
This entire process usually happens in less than a second!
HTTP vs HTTPS
You've probably noticed that some websites use http:// while others use https://. What's the difference?
HTTP (HyperText Transfer Protocol)
Regular HTTP sends data in plain text. Anyone intercepting the communication could read everything being sent back and forth.
HTTPS (HTTP Secure)
HTTPS adds a layer of security called SSL/TLS encryption. This scrambles the data so even if someone intercepts it, they can't read it. Modern websites should always use HTTPS, especially if they handle sensitive information like passwords or credit cards.
🔒 Security Tip:
Always look for the padlock icon in your browser's address bar. This indicates the site is using HTTPS and your connection is secure.
Client-Side vs Server-Side
In web development, you'll often hear these terms:
Client-Side
Client-side means code that runs in the user's browser. HTML is client-side—the browser interprets and displays it. JavaScript can also run client-side, making web pages interactive without needing to contact the server again.
Server-Side
Server-side means code that runs on the web server before sending anything to the browser. Languages like PHP, Python, and Node.js run on the server and can generate HTML dynamically based on database information, user login status, etc.
Static vs Dynamic Websites
Static Websites
A static website is made of fixed HTML files stored on a server. Every user who visits sees the same content. These are simple and fast but can't change based on user interaction.
When you're learning HTML, you'll create static websites—and that's perfectly fine! Many websites are static and work great.
Dynamic Websites
A dynamic website generates HTML on-the-fly based on various factors like who's logged in, what they're searching for, or what's in a database. Facebook, Twitter, and Gmail are dynamic—they show different content to different users.
Common HTTP Status Codes
When servers respond, they include a status code. Here are the most common ones:
- 200 OK: Success! The request worked perfectly
- 301 Moved Permanently: The page has moved to a new address
- 404 Not Found: The requested file doesn't exist
- 500 Internal Server Error: Something went wrong on the server
- 503 Service Unavailable: The server is temporarily down
Web Caching
To make websites load faster, browsers use caching. When you visit a website, your browser saves some files (like images and CSS) on your computer. The next time you visit, the browser uses these saved files instead of downloading them again.
This is why sometimes you need to "hard refresh" a page (Ctrl+F5 or Cmd+Shift+R) to see the latest version—you're telling the browser to ignore the cache and download everything fresh.
Browser Developer Tools
Every modern browser has built-in developer tools that let you see this request/response process happening. You can:
- View the HTML code of any webpage
- See all the files being requested
- Check HTTP status codes
- Monitor load times
- Debug problems
💡 Try This:
Right-click on any webpage and select "Inspect" or press F12. This opens the developer tools. Click the "Network" tab and refresh the page. You'll see every request your browser makes!
We'll use these tools throughout the tutorial series.
Key Takeaways
- The web works on a client-server model with request and response
- Your browser (client) requests files from web servers
- DNS translates domain names into IP addresses
- HTTP/HTTPS is the protocol browsers and servers use to communicate
- The entire process happens in milliseconds
- HTTPS is more secure than HTTP
- HTML runs client-side (in the browser)
- Browser caching helps websites load faster
What's Next?
Now that you understand how the web works and how HTML files get from servers to browsers, you're ready to set up your own development environment. In the next lesson, we'll get you set up with everything you need to start writing HTML code!