how web pages work

How Web Pages Workand other ghost stories

Disclaimerno math

no programming

no problem

How do computers talk?

How do computers talk?

How do computers talk?

How do computers talk?

How do computers talk?

How do computers talk?

Great, so how do they become friends?Domain Name System

DNS translates domains into something computers understand

google.com means nothing

1.1.1.1 means something

Who do they talk to?

Who do they talk to?IP address gets traffic to the computer

Ports get the traffic to the application

ex. 1.1.1.1:80

ex. fakewebpage.com:8080

What do they talk about?Hyper Text Transfer Protocol (HTTP)

Transfers HTML (Hyper Text Markup Language)

Usually on port 80

HTTP FormatVerb and info

Headers, one per line

[blank line]

Optional body

HTTP VerbsGET

POST

The other guys: PUT / PATCH / DELETE / HEAD

HTTP HeadersHost - name of the website we’re talking to

User agent - browser version

Cache - remember this, not gonna answer again

Cookies - magic

HTTP GET RequestsGET / HTTP/1.1

Host: oneis.us

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X) Firefox/44.0

Accept: text/html,application/xml

Accept-Language: en-US,en,es-MX

Accept-Encoding: gzip, deflate

Cookie: _ga=GA1.2.229765080.1436819046

Request sent!Server gets request

Forwards it to the web server program

Web server gets the file requested

Sends response with requested file contents

HTTP ResponsesHTTP/1.1 200 OK

Content-Length: 1241

Date: Mon, 01 Feb 2016 17:54:16 GMT

Content-Type: text/html;charset=utf-8

Server: WEBrick/1.3.1 (Ruby/1.8.7/2014-01-28)

[HTML body that’s 1241 characters long]

HTML (and CSS and JS and images and…)

HTTP Get RequestsGET /users.php?page=2 HTTP/1.1

Host: oneis.us

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X) Firefox/44.0

Accept: text/html,application/xml

Accept-Language: en-US,en,es-MX

Accept-Encoding: gzip, deflate

Cookie: _ga=GA1.2.229765080.1436819046

HTTP ResponsesHTTP/1.1 404 Not Found

Content-Length: 28

Date: Mon, 01 Feb 2016 17:58:02 GMT

Content-Type: text/html;charset=utf-8

Server: WEBrick/1.3.1 (Ruby/1.8.7/2014-01-28)

Sorry, that code is unknown.

HTTP Status Codes1xx - info

2xx - success

3xx - redirect

4xx - client error

5xx - server error

HTTP Post Request

HTTP Post RequestPOST /api/set HTTP/1.1

Host: oneis.us

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X) Firefox/44.0

Accept: text/html,application/xml

Accept-Language: en-US,en,es-MX

api_key=lolidunno&submit=submit

HTTP ResponsesHTTP/1.1 302 Found

Location: https://oneis.us/goaway

Date: Mon, 01 Feb 2016 18:02:39 GMT

Server: WEBrick/1.3.1 (Ruby/1.8.7/2014-01-28)

So what the hell are JS and PHP?PHP runs “server side” (read: on the server)

Never sent to you, generates the HTML

JS runs “client side” (read: in your browser)

Included in HTTP response, manipulates HTML

JavaScript included in response

TL;DRDNS Lookup

Sends request

Server gets reads or runs requested file

Server sends response back

Browser draws response from HTML

Browser requests any other needed files, runs JS

TL;DR

What didn’t we cover?HTTPS

AJAX

Cookies

Caching

More learninsYou can watch this stuff IRL in your browser’s dev tools

Wikipedia’s HTTP page has some examples