SlideShare a Scribd company logo
1 of 12
Download to read offline
Web 101
How does a website work?
2 machines communicating
You, at home, on your laptop… Somewhere in Ireland, in a Datacenter…
How do they communicate?
🤔
HTTP
Base protocol of the Web (!= Internet)
HYPER TEXT TRANSFER PROTOCOL
• A protocol to transfer resources (== files)
• System of request / response
• Between a client and a server
HTTP
When a user…
• Clicks on a link, or
• Types a url in the address bar, or
• Submits a form…
The client sends…
An HTTP request to the server
HTTP request
with URL
GET https://lewagon.com
The server receives…
…the HTTP request
If the content asked is static
(GET http://lewagon.com)
The server fetches the
HTML file
And sends it back to the
client in the HTTP response
The server receives…
…the HTTP request
If the content asked is dynamic
(GET http://facebook.com/zuck is a different HTML
than http://facebook.com/boris.paillard)
The server builds the
HTML file
using server language (php/Ruby/
Python…) and SQL queries to Database
And sends it back to the
client in the HTTP response
Ruby
SQL
DB
HTTP request
with URL
GET https://lewagon.com
The browser processes…
…the HTML file to display the web page
HTTP response
with HTML file
Flow Recap.
• When a user clicks on a link / types a URL / submits a form
• The client sends (via a browser) an HTTP request to a server
• The server builds an HTML file (which is just text)
• The server sends it back to the client in an HTTP response
• The client processes the HTML file to display the web page
On a website…
Thank you

More Related Content

What's hot

What's hot (20)

HTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginnersHTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginners
 
Bootstrap 5 basic
Bootstrap 5 basicBootstrap 5 basic
Bootstrap 5 basic
 
Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for Developers
 
Html 5
Html 5Html 5
Html 5
 
Initiation html css
Initiation html cssInitiation html css
Initiation html css
 
PHP Tutorials
PHP TutorialsPHP Tutorials
PHP Tutorials
 
Object Oriented Javascript
Object Oriented JavascriptObject Oriented Javascript
Object Oriented Javascript
 
Puppeteer - A web scraping & UI Testing Tool
Puppeteer - A web scraping & UI Testing ToolPuppeteer - A web scraping & UI Testing Tool
Puppeteer - A web scraping & UI Testing Tool
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
Html
HtmlHtml
Html
 
Formation html5 css3 java script
Formation html5 css3 java scriptFormation html5 css3 java script
Formation html5 css3 java script
 
HTML CSS JS in Nut shell
HTML  CSS JS in Nut shellHTML  CSS JS in Nut shell
HTML CSS JS in Nut shell
 
Angular 8
Angular 8 Angular 8
Angular 8
 
Html ppt
Html pptHtml ppt
Html ppt
 
Web design - Working with forms in HTML
Web design - Working with forms in HTMLWeb design - Working with forms in HTML
Web design - Working with forms in HTML
 
CSS
CSSCSS
CSS
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
CSS Dasar #4 : Font Styling
CSS Dasar #4 : Font StylingCSS Dasar #4 : Font Styling
CSS Dasar #4 : Font Styling
 

Viewers also liked

Le Wagon - Product Specs 101
Le Wagon - Product Specs 101Le Wagon - Product Specs 101
Le Wagon - Product Specs 101Boris Paillard
 
Techical Workflow for a Startup
Techical Workflow for a StartupTechical Workflow for a Startup
Techical Workflow for a StartupSébastien Saunier
 
Le Wagon - Bootcamp in Ruby on Rails, HTML, CSS and JavaScript
Le Wagon - Bootcamp in Ruby on Rails, HTML, CSS and JavaScriptLe Wagon - Bootcamp in Ruby on Rails, HTML, CSS and JavaScript
Le Wagon - Bootcamp in Ruby on Rails, HTML, CSS and JavaScriptBoris Paillard
 
Le wagon Aix-Marseille - sketch
Le wagon Aix-Marseille  -   sketchLe wagon Aix-Marseille  -   sketch
Le wagon Aix-Marseille - sketchLouis Chavane
 
Le Wagon's Product Design Sprint
Le Wagon's Product Design SprintLe Wagon's Product Design Sprint
Le Wagon's Product Design SprintBoris Paillard
 
Building Layouts with CSS
Building Layouts with CSSBuilding Layouts with CSS
Building Layouts with CSSBoris Paillard
 
Le Wagon On Demand - Behind the scenes
Le Wagon On Demand - Behind the scenesLe Wagon On Demand - Behind the scenes
Le Wagon On Demand - Behind the scenesSébastien Saunier
 
Le wagon UI & design crash course
Le wagon UI & design crash courseLe wagon UI & design crash course
Le wagon UI & design crash courseMathieu Le Roux
 
Le Wagon Brasil - Launching a Tech Product
Le Wagon Brasil - Launching a Tech ProductLe Wagon Brasil - Launching a Tech Product
Le Wagon Brasil - Launching a Tech ProductMathieu Le Roux
 
Le Wagon - Technical entrepreneurship
Le Wagon - Technical entrepreneurshipLe Wagon - Technical entrepreneurship
Le Wagon - Technical entrepreneurshipBoris Paillard
 
Le wagon - JavaScript for beginners
Le wagon - JavaScript for beginnersLe wagon - JavaScript for beginners
Le wagon - JavaScript for beginnersEdward_Schults
 

Viewers also liked (14)

How Le Wagon uses Trello
How Le Wagon uses TrelloHow Le Wagon uses Trello
How Le Wagon uses Trello
 
Le Wagon - React 101
Le Wagon - React 101Le Wagon - React 101
Le Wagon - React 101
 
Le Wagon - Product Specs 101
Le Wagon - Product Specs 101Le Wagon - Product Specs 101
Le Wagon - Product Specs 101
 
Techical Workflow for a Startup
Techical Workflow for a StartupTechical Workflow for a Startup
Techical Workflow for a Startup
 
Le Wagon - Bootcamp in Ruby on Rails, HTML, CSS and JavaScript
Le Wagon - Bootcamp in Ruby on Rails, HTML, CSS and JavaScriptLe Wagon - Bootcamp in Ruby on Rails, HTML, CSS and JavaScript
Le Wagon - Bootcamp in Ruby on Rails, HTML, CSS and JavaScript
 
Le wagon Aix-Marseille - sketch
Le wagon Aix-Marseille  -   sketchLe wagon Aix-Marseille  -   sketch
Le wagon Aix-Marseille - sketch
 
Le Wagon's Product Design Sprint
Le Wagon's Product Design SprintLe Wagon's Product Design Sprint
Le Wagon's Product Design Sprint
 
Building Layouts with CSS
Building Layouts with CSSBuilding Layouts with CSS
Building Layouts with CSS
 
Le Wagon On Demand - Behind the scenes
Le Wagon On Demand - Behind the scenesLe Wagon On Demand - Behind the scenes
Le Wagon On Demand - Behind the scenes
 
Le wagon UI & design crash course
Le wagon UI & design crash courseLe wagon UI & design crash course
Le wagon UI & design crash course
 
Le Wagon Brasil - Launching a Tech Product
Le Wagon Brasil - Launching a Tech ProductLe Wagon Brasil - Launching a Tech Product
Le Wagon Brasil - Launching a Tech Product
 
Le Wagon - Technical entrepreneurship
Le Wagon - Technical entrepreneurshipLe Wagon - Technical entrepreneurship
Le Wagon - Technical entrepreneurship
 
Le wagon - JavaScript for beginners
Le wagon - JavaScript for beginnersLe wagon - JavaScript for beginners
Le wagon - JavaScript for beginners
 
Git & GitHub for Beginners
Git & GitHub for BeginnersGit & GitHub for Beginners
Git & GitHub for Beginners
 

Similar to Le Wagon - Web 101

Understanding the Web through HTTP
Understanding the Web through HTTPUnderstanding the Web through HTTP
Understanding the Web through HTTPOlivia Brundage
 
application of http.pptx
application of http.pptxapplication of http.pptx
application of http.pptxssuseraf60311
 
11 - ftp & web.ppt
11 - ftp & web.ppt11 - ftp & web.ppt
11 - ftp & web.pptssuserf7cd2b
 
Interactive web. O rly?
Interactive web. O rly?Interactive web. O rly?
Interactive web. O rly?timbc
 
HyperText Transfer Protocol (HTTP)
HyperText Transfer Protocol (HTTP)HyperText Transfer Protocol (HTTP)
HyperText Transfer Protocol (HTTP)Gurjot Singh
 
0_Leksion_Web_Servers (1).pdf
0_Leksion_Web_Servers (1).pdf0_Leksion_Web_Servers (1).pdf
0_Leksion_Web_Servers (1).pdfZani10
 
Hypertexttransferprotocolhttp 131012171813-phpapp02
Hypertexttransferprotocolhttp 131012171813-phpapp02Hypertexttransferprotocolhttp 131012171813-phpapp02
Hypertexttransferprotocolhttp 131012171813-phpapp02Nidhitransport
 
Web Application Technologies
Web Application TechnologiesWeb Application Technologies
Web Application TechnologiesSehan Lee
 
Web-01-HTTP.pptx
Web-01-HTTP.pptxWeb-01-HTTP.pptx
Web-01-HTTP.pptxAliZaib71
 
Web Services 2009
Web Services 2009Web Services 2009
Web Services 2009Cathie101
 
Web Services 2009
Web Services 2009Web Services 2009
Web Services 2009Cathie101
 
Http request&response session 1 - by Vignesh.N
Http request&response session 1 - by Vignesh.NHttp request&response session 1 - by Vignesh.N
Http request&response session 1 - by Vignesh.NNavaneethan Naveen
 

Similar to Le Wagon - Web 101 (20)

Understanding the Web through HTTP
Understanding the Web through HTTPUnderstanding the Web through HTTP
Understanding the Web through HTTP
 
HTTP
HTTPHTTP
HTTP
 
application of http.pptx
application of http.pptxapplication of http.pptx
application of http.pptx
 
11 - ftp & web.ppt
11 - ftp & web.ppt11 - ftp & web.ppt
11 - ftp & web.ppt
 
Interactive web. O rly?
Interactive web. O rly?Interactive web. O rly?
Interactive web. O rly?
 
HyperText Transfer Protocol (HTTP)
HyperText Transfer Protocol (HTTP)HyperText Transfer Protocol (HTTP)
HyperText Transfer Protocol (HTTP)
 
Compute rNetwork.pptx
Compute rNetwork.pptxCompute rNetwork.pptx
Compute rNetwork.pptx
 
0_Leksion_Web_Servers (1).pdf
0_Leksion_Web_Servers (1).pdf0_Leksion_Web_Servers (1).pdf
0_Leksion_Web_Servers (1).pdf
 
Http protocol
Http protocolHttp protocol
Http protocol
 
The HTTP and Web
The HTTP and Web The HTTP and Web
The HTTP and Web
 
Hypertexttransferprotocolhttp 131012171813-phpapp02
Hypertexttransferprotocolhttp 131012171813-phpapp02Hypertexttransferprotocolhttp 131012171813-phpapp02
Hypertexttransferprotocolhttp 131012171813-phpapp02
 
IP UNIT 1.pptx
IP UNIT 1.pptxIP UNIT 1.pptx
IP UNIT 1.pptx
 
Web Application Technologies
Web Application TechnologiesWeb Application Technologies
Web Application Technologies
 
Web-01-HTTP.pptx
Web-01-HTTP.pptxWeb-01-HTTP.pptx
Web-01-HTTP.pptx
 
Http_Protocol.pptx
Http_Protocol.pptxHttp_Protocol.pptx
Http_Protocol.pptx
 
Http
HttpHttp
Http
 
Browser
BrowserBrowser
Browser
 
Web Services 2009
Web Services 2009Web Services 2009
Web Services 2009
 
Web Services 2009
Web Services 2009Web Services 2009
Web Services 2009
 
Http request&response session 1 - by Vignesh.N
Http request&response session 1 - by Vignesh.NHttp request&response session 1 - by Vignesh.N
Http request&response session 1 - by Vignesh.N
 

Recently uploaded

Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
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
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 

Recently uploaded (20)

Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
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
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 

Le Wagon - Web 101

  • 2. How does a website work? 2 machines communicating You, at home, on your laptop… Somewhere in Ireland, in a Datacenter…
  • 3. How do they communicate? 🤔
  • 4. HTTP Base protocol of the Web (!= Internet) HYPER TEXT TRANSFER PROTOCOL
  • 5. • A protocol to transfer resources (== files) • System of request / response • Between a client and a server HTTP
  • 6. When a user… • Clicks on a link, or • Types a url in the address bar, or • Submits a form…
  • 7. The client sends… An HTTP request to the server HTTP request with URL GET https://lewagon.com
  • 8. The server receives… …the HTTP request If the content asked is static (GET http://lewagon.com) The server fetches the HTML file And sends it back to the client in the HTTP response
  • 9. The server receives… …the HTTP request If the content asked is dynamic (GET http://facebook.com/zuck is a different HTML than http://facebook.com/boris.paillard) The server builds the HTML file using server language (php/Ruby/ Python…) and SQL queries to Database And sends it back to the client in the HTTP response Ruby SQL DB
  • 10. HTTP request with URL GET https://lewagon.com The browser processes… …the HTML file to display the web page HTTP response with HTML file
  • 11. Flow Recap. • When a user clicks on a link / types a URL / submits a form • The client sends (via a browser) an HTTP request to a server • The server builds an HTML file (which is just text) • The server sends it back to the client in an HTTP response • The client processes the HTML file to display the web page On a website…