Press → key to advance. Zoom in/out: Ctrl or Command + +/-.

HTML: HTTP

Step 1: The URL Breakdown

http://www.howstuffworks.com/web-server.html:

http the protocol
www.howstuffworks.com the server name
web-server.html the file name

Step 2: Server Name -> IP

The browser asks "name servers" to figure out what IP the server name corresponds to.

nslookup www.howstuffworks.com
a462.g.akamai.net 20  IN  A 213.254.17.94

IP Addresses

In IPv4, 32-bit numbers that uniquely address each machine on the internet:

216.27.61.137

In IPv6, the numbers are much longer (so there are more available addresses.):

2001:0db8:85a3:0000:0000:8a2e:0370:7334

Your "self" IP address is always:

127.0.0.1

Find out your IP online or by using ifconfig.

Step 3: Browser -> Server

The browser connects to the IP at port 80, the default port, and sends an HTTP request for the specified file.

Request:

GET /web-server.html HTTP/1.1
Host: www.howstuffworks.com

Response:

200
Content-Type: text/html
<doctype html>
<html>
  <head>
    <title>HowStuffWorks "How Web Servers Work" </title>
    …
</html>

HTTP Request

"HyperText Transfer Protocol"

The browser sends a request which contains:

  • A verb, like: GET, POST, PUT, DELETE.
  • A HTTP protocol version, like 1.1.
  • A path on the server, like: /web-server.html.
  • A host, like: www.howstuffworks.com
  • Additional optional headers with more information for the server.
  • Optional content, like when the request is from a form. 
GET /web-server.html HTTP/1.1
Host: www.howstuffworks.com

HTTP Response

The server sends a response which contains:

  • A status code, like: 200 (success), 404 (not found), and 403 (forbidden).
  • Optional headers, to give more information, like: Content-Length, Cache-Control.
  • Optional content, like HTML or JSON. 
200
Content-Type: text/html
<doctype html>
<html>
  <head>
    <title>HowStuffWorks "How Web Servers Work" </title>
    …
</html>

HTTP Status Cats