Download - How Web Pages Work
![Page 1: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/1.jpg)
How Web Pages Workand other ghost stories
![Page 2: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/2.jpg)
Disclaimerno math
no programming
no problem
![Page 3: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/3.jpg)
How do computers talk?
![Page 4: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/4.jpg)
How do computers talk?
![Page 5: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/5.jpg)
How do computers talk?
![Page 6: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/6.jpg)
How do computers talk?
![Page 7: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/7.jpg)
How do computers talk?
![Page 8: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/8.jpg)
How do computers talk?
![Page 9: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/9.jpg)
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
![Page 10: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/10.jpg)
Who do they talk to?
![Page 11: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/11.jpg)
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
![Page 12: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/12.jpg)
What do they talk about?Hyper Text Transfer Protocol (HTTP)
Transfers HTML (Hyper Text Markup Language)
Usually on port 80
![Page 13: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/13.jpg)
HTTP FormatVerb and info
Headers, one per line
[blank line]
Optional body
![Page 14: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/14.jpg)
HTTP VerbsGET
POST
The other guys: PUT / PATCH / DELETE / HEAD
![Page 15: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/15.jpg)
HTTP HeadersHost - name of the website we’re talking to
User agent - browser version
Cache - remember this, not gonna answer again
Cookies - magic
![Page 16: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/16.jpg)
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
![Page 17: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/17.jpg)
Request sent!Server gets request
Forwards it to the web server program
Web server gets the file requested
Sends response with requested file contents
![Page 18: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/18.jpg)
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]
![Page 19: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/19.jpg)
HTML (and CSS and JS and images and…)
![Page 20: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/20.jpg)
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
![Page 21: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/21.jpg)
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.
![Page 22: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/22.jpg)
HTTP Status Codes1xx - info
2xx - success
3xx - redirect
4xx - client error
5xx - server error
![Page 23: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/23.jpg)
HTTP Post Request
![Page 24: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/24.jpg)
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
![Page 25: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/25.jpg)
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)
![Page 26: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/26.jpg)
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
![Page 27: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/27.jpg)
JavaScript included in response
![Page 28: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/28.jpg)
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
![Page 29: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/29.jpg)
TL;DR
![Page 30: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/30.jpg)
What didn’t we cover?HTTPS
AJAX
Cookies
Caching
![Page 31: How Web Pages Work](https://reader031.vdocuments.us/reader031/viewer/2022021921/58f9b3af1a28ab22578b45cf/html5/thumbnails/31.jpg)
More learninsYou can watch this stuff IRL in your browser’s dev tools
Wikipedia’s HTTP page has some examples