SlideShare a Scribd company logo
1 of 31
Download to read offline
How Web Pages Work
and other ghost stories
Disclaimer
no 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 Format
Verb and info
Headers, one per line
[blank line]
Optional body
HTTP Verbs
GET
POST
The other guys: PUT / PATCH / DELETE / HEAD
HTTP Headers
Host - name of the website we’re talking to
User agent - browser version
Cache - remember this, not gonna answer again
Cookies - magic
HTTP GET Requests
GET / 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 Responses
HTTP/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 Requests
GET /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 Responses
HTTP/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 Codes
1xx - info
2xx - success
3xx - redirect
4xx - client error
5xx - server error
HTTP Post Request
HTTP Post Request
POST /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 Responses
HTTP/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;DR
DNS 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 learnins
You can watch this stuff IRL in your browser’s dev tools
Wikipedia’s HTTP page has some examples

More Related Content

What's hot

Javascript cross domain communication
Javascript cross domain communicationJavascript cross domain communication
Javascript cross domain communicationChenKuo Chen
 
An Introduction To World Wide Web
An Introduction To World Wide WebAn Introduction To World Wide Web
An Introduction To World Wide WebAbhishek Kharbanda
 
05 File Handling Upload Mysql
05 File Handling Upload Mysql05 File Handling Upload Mysql
05 File Handling Upload MysqlGeshan Manandhar
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technologyvikram singh
 

What's hot (8)

Javascript cross domain communication
Javascript cross domain communicationJavascript cross domain communication
Javascript cross domain communication
 
An Introduction To World Wide Web
An Introduction To World Wide WebAn Introduction To World Wide Web
An Introduction To World Wide Web
 
File formats
File formatsFile formats
File formats
 
05 File Handling Upload Mysql
05 File Handling Upload Mysql05 File Handling Upload Mysql
05 File Handling Upload Mysql
 
PHP TUTORIAL
PHP TUTORIALPHP TUTORIAL
PHP TUTORIAL
 
4 Basic PHP
4 Basic PHP4 Basic PHP
4 Basic PHP
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
 
slidesharenew1
slidesharenew1slidesharenew1
slidesharenew1
 

Similar to How Web Pages Work

World Wide Web (WWW) Technology
World Wide Web (WWW) TechnologyWorld Wide Web (WWW) Technology
World Wide Web (WWW) TechnologyKamyar Lajani
 
PHP Training: Module 1
PHP Training: Module 1PHP Training: Module 1
PHP Training: Module 1hussulinux
 
Under the Covers with the Web
Under the Covers with the WebUnder the Covers with the Web
Under the Covers with the WebTrevor Lohrbeer
 
HTTP: the Other ESB
HTTP: the Other ESBHTTP: the Other ESB
HTTP: the Other ESBRyan Riley
 
Introduction to the web
Introduction to the webIntroduction to the web
Introduction to the webSAMIR BHOGAYTA
 
Computer network (10)
Computer network (10)Computer network (10)
Computer network (10)NYversity
 
20190516 web security-basic
20190516 web security-basic20190516 web security-basic
20190516 web security-basicMksYi
 
Web Fundamentals
Web FundamentalsWeb Fundamentals
Web Fundamentalsarunv
 
Rawnet Lightning talk 'How the Internet Works'
Rawnet Lightning talk   'How the Internet Works'Rawnet Lightning talk   'How the Internet Works'
Rawnet Lightning talk 'How the Internet Works'Rawnet
 
introduction_to_web_technology.pdf
introduction_to_web_technology.pdfintroduction_to_web_technology.pdf
introduction_to_web_technology.pdfVishwanathBurkpalli
 
IBM dwLive, "Internet & HTTP - 잃어버린 패킷을 찾아서..."
IBM dwLive, "Internet & HTTP - 잃어버린 패킷을 찾아서..."IBM dwLive, "Internet & HTTP - 잃어버린 패킷을 찾아서..."
IBM dwLive, "Internet & HTTP - 잃어버린 패킷을 찾아서..."Dongwook Lee
 
Node js oc meetup 2 socket io intro
Node js oc meetup 2 socket io introNode js oc meetup 2 socket io intro
Node js oc meetup 2 socket io introeddify
 
HTTP Basic - PHP
HTTP Basic - PHPHTTP Basic - PHP
HTTP Basic - PHPSulaeman .
 
Web Server-Side Programming Techniques
Web Server-Side Programming TechniquesWeb Server-Side Programming Techniques
Web Server-Side Programming Techniquesguest8899ec02
 

Similar to How Web Pages Work (20)

HTTP
HTTPHTTP
HTTP
 
World Wide Web (WWW) Technology
World Wide Web (WWW) TechnologyWorld Wide Web (WWW) Technology
World Wide Web (WWW) Technology
 
PHP Training: Module 1
PHP Training: Module 1PHP Training: Module 1
PHP Training: Module 1
 
Under the Covers with the Web
Under the Covers with the WebUnder the Covers with the Web
Under the Covers with the Web
 
HTTP: the Other ESB
HTTP: the Other ESBHTTP: the Other ESB
HTTP: the Other ESB
 
Introduction to the web
Introduction to the webIntroduction to the web
Introduction to the web
 
Computer network (10)
Computer network (10)Computer network (10)
Computer network (10)
 
Starting With Php
Starting With PhpStarting With Php
Starting With Php
 
Spider Course Day 1
Spider Course Day 1Spider Course Day 1
Spider Course Day 1
 
Introduction to HTTP
Introduction to HTTPIntroduction to HTTP
Introduction to HTTP
 
20190516 web security-basic
20190516 web security-basic20190516 web security-basic
20190516 web security-basic
 
Webtechnologies
Webtechnologies Webtechnologies
Webtechnologies
 
Web Fundamentals
Web FundamentalsWeb Fundamentals
Web Fundamentals
 
Rawnet Lightning talk 'How the Internet Works'
Rawnet Lightning talk   'How the Internet Works'Rawnet Lightning talk   'How the Internet Works'
Rawnet Lightning talk 'How the Internet Works'
 
introduction_to_web_technology.pdf
introduction_to_web_technology.pdfintroduction_to_web_technology.pdf
introduction_to_web_technology.pdf
 
IBM dwLive, "Internet & HTTP - 잃어버린 패킷을 찾아서..."
IBM dwLive, "Internet & HTTP - 잃어버린 패킷을 찾아서..."IBM dwLive, "Internet & HTTP - 잃어버린 패킷을 찾아서..."
IBM dwLive, "Internet & HTTP - 잃어버린 패킷을 찾아서..."
 
Node js oc meetup 2 socket io intro
Node js oc meetup 2 socket io introNode js oc meetup 2 socket io intro
Node js oc meetup 2 socket io intro
 
HTTP Basic - PHP
HTTP Basic - PHPHTTP Basic - PHP
HTTP Basic - PHP
 
Howthe internet
Howthe internetHowthe internet
Howthe internet
 
Web Server-Side Programming Techniques
Web Server-Side Programming TechniquesWeb Server-Side Programming Techniques
Web Server-Side Programming Techniques
 

Recently uploaded

The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 

Recently uploaded (20)

The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 

How Web Pages Work

  • 1. How Web Pages Work and other ghost stories
  • 9. 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
  • 10. Who do they talk to?
  • 11. 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
  • 12. What do they talk about? Hyper Text Transfer Protocol (HTTP) Transfers HTML (Hyper Text Markup Language) Usually on port 80
  • 13. HTTP Format Verb and info Headers, one per line [blank line] Optional body
  • 14. HTTP Verbs GET POST The other guys: PUT / PATCH / DELETE / HEAD
  • 15. HTTP Headers Host - name of the website we’re talking to User agent - browser version Cache - remember this, not gonna answer again Cookies - magic
  • 16. HTTP GET Requests GET / 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
  • 17. Request sent! Server gets request Forwards it to the web server program Web server gets the file requested Sends response with requested file contents
  • 18. HTTP Responses HTTP/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]
  • 19. HTML (and CSS and JS and images and…)
  • 20. HTTP Get Requests GET /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
  • 21. HTTP Responses HTTP/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.
  • 22. HTTP Status Codes 1xx - info 2xx - success 3xx - redirect 4xx - client error 5xx - server error
  • 24. HTTP Post Request POST /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
  • 25. HTTP Responses HTTP/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)
  • 26. 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
  • 28. TL;DR DNS 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
  • 29. TL;DR
  • 30. What didn’t we cover? HTTPS AJAX Cookies Caching
  • 31. More learnins You can watch this stuff IRL in your browser’s dev tools Wikipedia’s HTTP page has some examples