Skip to main content

Course Progress

Loading...

Servers, Browsers, HTTP

Duration: 45 minutes
Module 1: Web Development Basics

Learning Objectives

  • Master the concepts in this lesson
  • Apply knowledge through practice
  • Build practical skills
  • Prepare for next topics

The Internet vs. The Web

Before diving into how the web works, let's clarify an important distinction:

The Internet

The Internet is the global network of interconnected computers that communicate using standardized protocols. Think of it as the roads, highways, and infrastructure that allow information to travel.

The World Wide Web

The Web is a service that runs on the Internet infrastructure. It's a system of interlinked hypertext documents (web pages) accessed via the Internet. Think of it as the vehicles, shops, and destinations that exist on those roads.

The Library Analogy

Understanding the web is like understanding how a library works:

  • The Internet is like the building, shelves, and organization system of the library
  • The Web is like the collection of books within the library
  • Web Servers are like librarians who fetch books when requested
  • Browsers are like your eyes and brain that read and interpret the books
  • HTTP is like the language and process you use to ask the librarian for a book

Key Components of the Web

Client Side Browser Chrome, Firefox, Safari Internet Server Side Web Server Application Server Database HTTP Request HTTP Response

Web Browsers

A web browser is a software application that enables users to access and view websites. Think of it as your window to the web.

What Browsers Do:

  • Request web pages from servers using HTTP
  • Receive and process HTML, CSS, and JavaScript files
  • Render the web page on your screen
  • Execute JavaScript to add interactivity
  • Manage cookies, local storage, and security

Common Browsers:

  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Microsoft Edge
  • Opera
Analogy: The Browser as an Interpreter

Imagine you're visiting a foreign country where you don't speak the language. The browser is like your translator who:

  • Knows how to ask for information (HTTP requests)
  • Understands the response (HTML, CSS, JS)
  • Translates it into something you can understand (rendered webpage)

Web Servers

A web server is a computer that hosts websites and serves web pages to browsers upon request.

What Servers Do:

  • Store website files (HTML, CSS, JS, images, etc.)
  • Process incoming HTTP requests
  • Run server-side code (like PHP)
  • Communicate with databases
  • Generate dynamic content
  • Send HTTP responses back to browsers

Common Web Server Software:

  • Apache HTTP Server
  • Nginx
  • Microsoft IIS
  • LiteSpeed
Analogy: The Server as a Restaurant Kitchen

If a website were a restaurant:

  • The web server is the kitchen
  • The chef (server-side code) prepares meals (web pages)
  • The recipes (databases) provide information for creating meals
  • The waitstaff (HTTP) takes orders and delivers food

HTTP: The Language of the Web

HTTP (Hypertext Transfer Protocol) is the foundation of data communication on the World Wide Web. It's a protocol that defines how messages are formatted and transmitted between web browsers and servers.

The HTTP Request/Response Cycle

                        sequenceDiagram
                            participant B as Browser
                            participant S as Server
                            
                            B->>S: 1. HTTP Request (GET /index.html)
                            Note over B,S: Request includes method, URL, headers
                            S->>S: 2. Process Request
                            Note over S: Server finds or generates the requested resource
                            S->>B: 3. HTTP Response (200 OK)
                            Note over B,S: Response includes status code, headers, content
                            B->>B: 4. Render Content
                            Note over B: Browser processes HTML, requests additional resources
                            
                            B->>S: 5. Additional Requests (CSS, JS, images)
                            S->>B: 6. Additional Responses
                            B->>B: 7. Complete Page Render

Real-World Example: Ordering Coffee

Think of HTTP like ordering at a coffee shop:

  1. Customer (Browser): "May I have a latte, please?" (HTTP Request)
  2. Barista (Server): Takes your order, processes it
  3. Barista: "Here's your latte." (HTTP Response)
  4. Customer: Receives and enjoys the coffee (Renders the content)

HTTP Request Methods

HTTP defines several request methods that indicate the desired action to be performed on the identified resource:

Method Purpose Real-world Analogy
GET Request data from a resource Reading a book from a shelf
POST Submit data to be processed Mailing a letter at the post office
PUT Update an existing resource Replacing a book on a shelf
DELETE Remove a resource Removing a book from a shelf
PATCH Partially update a resource Updating a page in a book

HTTP Status Codes

Status codes are issued by the server in response to a client's request and indicate the outcome of the request:

Code Range Category Examples Real-world Analogy
100-199 Informational 100 Continue "I'm listening, go on..."
200-299 Successful 200 OK, 201 Created "Here's what you asked for!"
300-399 Redirection 301 Moved Permanently, 302 Found "What you want is actually over there."
400-499 Client Error 404 Not Found, 403 Forbidden "You asked for something impossible or wrong."
500-599 Server Error 500 Internal Server Error "It's not you, it's me. I have a problem."

What an HTTP Request Looks Like

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0
Accept: text/html,application/xhtml+xml
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive

What an HTTP Response Looks Like

HTTP/1.1 200 OK
Date: Mon, 16 Apr 2025 18:32:22 GMT
Server: Apache/2.4.52 (Ubuntu)
Content-Type: text/html; charset=UTF-8
Content-Length: 1024

<!DOCTYPE html>
<html>
<head>
    <title>Example Website</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <!-- Rest of the HTML page -->
</body>
</html>

Complete Lifecycle of a Web Request

What Happens When You Type www.example.com in Your Browser?

                        graph TD
                            A[Enter URL] --> B[DNS Lookup]
                            B --> C[Establish TCP Connection]
                            C --> D[Send HTTP Request]
                            D --> E[Server Processes Request]
                            E --> F[Server Generates Response]
                            F --> G[Browser Receives Response]
                            G --> H[Browser Parses HTML]
                            H --> I[Browser Requests Additional Resources]
                            I --> J[Browser Renders Page]
                            
                            style A fill:#f8f9fa,stroke:#343a40
                            style B fill:#e9ecef,stroke:#343a40
                            style C fill:#dee2e6,stroke:#343a40
                            style D fill:#ced4da,stroke:#343a40
                            style E fill:#adb5bd,stroke:#343a40
                            style F fill:#6c757d,stroke:#343a40
                            style G fill:#495057,stroke:#343a40
                            style H fill:#343a40,stroke:#212529,color:#fff
                            style I fill:#212529,stroke:#000,color:#fff
                            style J fill:#000,stroke:#000,color:#fff

  1. DNS Lookup

    The browser needs to find the server's IP address:

    • Browser checks its cache for the domain name
    • If not found, it asks the operating system
    • If still not found, it queries a DNS server
    • The DNS server returns the IP address (e.g., 93.184.216.34)

    Analogy: Looking up a phone number in a phone book to call someone.

  2. Establish TCP Connection

    Before sending data, the browser creates a reliable connection:

    • The browser initiates a TCP connection using a "three-way handshake"
    • This ensures both the browser and server are ready to communicate

    Analogy: Making sure the phone line is connected before starting to talk.

  3. Send HTTP Request

    The browser sends an HTTP request to the server:

    • Request method (usually GET for viewing pages)
    • The path ("/index.html" or just "/")
    • HTTP version
    • Headers with additional information

    Analogy: Asking a librarian for a specific book by title.

  4. Server Processing

    The server receives and processes the request:

    • Web server software (Apache, Nginx) receives the request
    • It determines what resource is being requested
    • For static content, it retrieves the file
    • For dynamic content, it runs server-side code (PHP, Python, etc.)
    • The code might interact with a database

    Analogy: The librarian finding the book, or if it's a custom request, compiling information from multiple sources.

  5. HTTP Response

    The server sends back an HTTP response:

    • Status code (e.g., 200 OK, 404 Not Found)
    • Response headers
    • The actual content (HTML, JSON, image, etc.)

    Analogy: The librarian handing you the book or telling you it's not available.

  6. Browser Processing

    The browser processes the response:

    • Parses the HTML document
    • Discovers linked resources (CSS, JavaScript, images)
    • Sends additional HTTP requests for those resources
    • Constructs the DOM (Document Object Model)
    • Applies CSS styling
    • Executes JavaScript

    Analogy: Reading the book, looking at its pictures, and following any references to other materials.

  7. Rendering

    The browser displays the complete web page:

    • Combines the HTML structure with CSS styling
    • Renders the visible elements on the screen
    • Continues to run JavaScript as needed

    Analogy: Comprehending the book and forming a mental image of its contents.

HTTPS: Secure Communication

HTTPS (HTTP Secure) is an extension of HTTP that uses encryption for secure communication:

HTTP (Insecure)

  • Data is sent in plain text
  • Anyone can intercept and read the data
  • No verification of server identity
  • Starts with http:// in the URL

HTTPS (Secure)

  • Data is encrypted using TLS/SSL
  • Even if intercepted, data can't be read
  • Verifies server identity with certificates
  • Starts with https:// in the URL
  • Shows a padlock icon in the browser

The Mail Analogy

Think of sending information over the web like sending mail:

  • HTTP is like sending a postcard - anyone who handles it can read its contents
  • HTTPS is like sending a letter in a locked box where only the recipient has the key

Why HTTPS Is Important

  • Privacy: Protects sensitive information like passwords and credit card numbers
  • Integrity: Ensures data isn't modified in transit
  • Authentication: Verifies you're connected to the legitimate website
  • SEO: Google gives ranking preference to HTTPS sites
  • Browser Compatibility: Modern browsers may block or warn about insecure content

Practical Demonstration

Using Browser Developer Tools to Observe HTTP

How to Access Developer Tools:

  • Chrome/Edge: Press F12 or Ctrl+Shift+I (Cmd+Option+I on Mac)
  • Firefox: Press F12 or Ctrl+Shift+I (Cmd+Option+I on Mac)
  • Safari: Enable Developer menu in Preferences > Advanced, then Safari > Develop > Show Web Inspector

Observing Network Requests:

  1. Open Developer Tools
  2. Go to the "Network" tab
  3. Visit a website (or refresh the current page)
  4. Watch as requests appear in the network panel
  5. Click on any request to see details:
    • Headers (request and response)
    • Preview of the content
    • Timing information

Let's Try It Together

In class, we'll visit different types of websites and observe:

  • How many requests are made for a single page
  • Different types of content being loaded (HTML, CSS, JS, images)
  • The order of requests
  • How long each request takes
  • The differences between HTTP and HTTPS connections

Looking Ahead: How This Connects to PHP and WordPress

PHP's Role in the Web Stack

PHP runs on the web server and dynamically generates HTML before it's sent to the browser:

  • When a browser requests a PHP page, the server doesn't just send the file
  • Instead, it runs the PHP code, which can:
    • Process form data
    • Interact with databases
    • Generate dynamic HTML
    • Handle user sessions
  • The resulting HTML (not the PHP code) is sent to the browser

WordPress and HTTP

WordPress is built on PHP and uses HTTP extensively:

  • WordPress themes and plugins provide dynamic content via PHP
  • The WordPress REST API uses HTTP requests to exchange data
  • WordPress admin actions (like saving a post) use HTTP POST requests
  • WordPress interacts with external services via HTTP

Docker's Relationship to Web Servers

Docker allows you to package a web server environment:

  • Create consistent development and production environments
  • Run multiple isolated web servers on one machine
  • Include all dependencies (PHP, MySQL, etc.)
  • Simplify deployment and scaling

Quick Knowledge Check

Question 1:

What happens first when you type a URL in your browser?

  1. The browser sends an HTTP request
  2. The server processes the request
  3. A DNS lookup is performed
  4. A TCP connection is established

Answer: c) A DNS lookup is performed to find the server's IP address

Question 2:

Which HTTP status code indicates a successful request?

  1. 404
  2. 500
  3. 302
  4. 200

Answer: d) 200 (OK)

Question 3:

Which HTTP method would you use to submit a form with user information?

  1. GET
  2. POST
  3. PUT
  4. DELETE

Answer: b) POST

Additional Resources

Recommended Reading

Useful Tools

  • WebPageTest - Test website performance and see HTTP requests
  • httpbin - Simple HTTP request & response service for testing
  • Postman - Tool for testing HTTP requests