SlideShare a Scribd company logo
1 of 26
Download to read offline
How web sites work



 An epic story of how rugbyheaven.com.au
delivers important news to my screen every
                   morning
Covering

•  What is a website and where does it live?

•  How does our browser find a given website?

•  How does our browser display a given website?

•  What is a database and how does it work?
What is the Internet?

•  The internet is like our office computer network but on a
   global scale

•  There are literally millions of computers in this networked
   together

•  Simply put the internet is an international network of
   computers.
What is the World Wide Web?

•  The www exists on the internet

•  It’s a lose term to define the part of the internet that
   everyone can see and use
What is a website?

•  According to the wikipedia a website is a collection of
   related web pages, images, videos or other digital assets
   that are addressed with a common domain name

•  Let’s be serious though, we all know what a website is.
   We’ve all been to google.com, wikipedia.org or of course
   rugbyheaven.com.au
Do websites actually exist in cyberspace?

•  No!!!

•  Websites live in specific locations on web servers
How do we find what we’re looking for?

•  With all these computers and all this information available
   on the www wouldn’t it be great if there was a uniformed
   way of locating all the resources we’re looking for…

•  Introducing the uniformed resource locator or URL for
   short

•  http://www.rugbyheaven.com.au/news/200909.html
How does a URL map to a web page?

•  Domain names are part of a URL
     (http://www.rugbyheaven.com.au/news/200909.html)


•  DNS servers map domain names to physical machines
Finally our browser has found our site

•  Now our computer can open a dialogue between the browser and the
   web server using the request-response model
Finally a web page

•  This is what we expect to see on our screen
How does it happen?

•  A request is made to the server
   for a single specific file (in this
   case index.html)



•  A response is sent back to the
   browser in the form of HTML
HTML

•  Our browser reads the HTML
   and renders it to our screens

•  Why doesn’t it look anything like
   the web site I know and love??
HTML is very simple

•  Yes that kind of simple

•  BUT it does do a couple of
   things very well
HTML has friends

•  HTML is very good at displaying
   text / data and linking to other
   resources

•  Links to other resources can be
   overt or covert

•  This page has been improved
   slightly by including cascading
   style sheets
HTML and Images

•  It’s still not quite right

•  The Browser now needs to
   request all the Images from the
   server too
We request this
It starts like this
Trasforms into this
And finally blossoms into this
Statistics

•  In the example we just saw there were 64 files downloaded
   to the browser, they were combinations of css, js, jpg, gif
   and swf’s… And it all happened so quickly

•  A little closer to home, on the PhotoChains homepage
   there are more than 130 separate files downloaded!!!
So who builds this?

•  Basically everything we’ve seen so far is built by Keong or
   a bunch of people like him

•  And if web sites / pages never changed I’d be out of a job
A little bit of jargon

•  Server side code versus client side code
So what does server side code do?

•  Web pages are not all static, in fact most these days are
   dynamic

•  Servers run pieces of code to deliver different and more
   specific responses to the browser

•  Server side rarely lives alone though, it’s usually coupled
   with one or more databases (or databi if you want to
   impress)
What is a Database?

•  Think of Dom’s rolodex, it stores specific information

•  The databases we use allow us create our own structure
Finally

•  We now know what a website is and where it physically
   lives

•  We also know how our computer finds that website

•  And finally we know how a webpage gets displayed in our
   browser

•  We know what a database is and a bit about how it works
Honourable techies

•  Thanks for listening, you can all be honourable techies for
   the day… Because deep down I all know you want to be

More Related Content

What's hot

What's hot (16)

Child Theming WordPress - Chris Aprea - WordCamp Sydney 2012
Child Theming WordPress - Chris Aprea - WordCamp Sydney 2012Child Theming WordPress - Chris Aprea - WordCamp Sydney 2012
Child Theming WordPress - Chris Aprea - WordCamp Sydney 2012
 
Static Site Generation with Hugo and Markdown
Static Site Generation with Hugo and MarkdownStatic Site Generation with Hugo and Markdown
Static Site Generation with Hugo and Markdown
 
Sharing is Caring - Web Development Resources
Sharing is Caring - Web Development ResourcesSharing is Caring - Web Development Resources
Sharing is Caring - Web Development Resources
 
Solving Common Client Requets with jQuery Presentation (v2)
Solving Common Client Requets with jQuery Presentation (v2)Solving Common Client Requets with jQuery Presentation (v2)
Solving Common Client Requets with jQuery Presentation (v2)
 
Web typography
Web typographyWeb typography
Web typography
 
State of the Web
State of the WebState of the Web
State of the Web
 
Building Ebooks that Last - Teresa Elsey (Bridge International Academies) - e...
Building Ebooks that Last - Teresa Elsey (Bridge International Academies) - e...Building Ebooks that Last - Teresa Elsey (Bridge International Academies) - e...
Building Ebooks that Last - Teresa Elsey (Bridge International Academies) - e...
 
E Books
E BooksE Books
E Books
 
3.6.16 - How Platforms Work - Casey West
3.6.16 - How Platforms Work - Casey West3.6.16 - How Platforms Work - Casey West
3.6.16 - How Platforms Work - Casey West
 
HTML / CSS / JS Web basics
HTML / CSS / JS Web basicsHTML / CSS / JS Web basics
HTML / CSS / JS Web basics
 
Wikis
WikisWikis
Wikis
 
Wikis Pp
Wikis PpWikis Pp
Wikis Pp
 
Geek basics
Geek basicsGeek basics
Geek basics
 
Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
 
Expert guide for PHP
Expert guide for PHPExpert guide for PHP
Expert guide for PHP
 
OOCSS presentation
OOCSS presentationOOCSS presentation
OOCSS presentation
 

Viewers also liked (7)

The Role Of Digital Marketing
The Role Of Digital MarketingThe Role Of Digital Marketing
The Role Of Digital Marketing
 
What Is A Blog?
What Is A Blog?What Is A Blog?
What Is A Blog?
 
Blog Presentation
Blog PresentationBlog Presentation
Blog Presentation
 
Blogging ppt
Blogging pptBlogging ppt
Blogging ppt
 
Blog ppt
Blog pptBlog ppt
Blog ppt
 
Search Engine Powerpoint
Search Engine PowerpointSearch Engine Powerpoint
Search Engine Powerpoint
 
Importance of digital marketing
Importance of digital marketingImportance of digital marketing
Importance of digital marketing
 

Similar to Introduction to web (techie side)

The things we found in your website
The things we found in your websiteThe things we found in your website
The things we found in your website
hernanibf
 
Lesson 102 23 aug13-1430-ay
Lesson 102 23 aug13-1430-ayLesson 102 23 aug13-1430-ay
Lesson 102 23 aug13-1430-ay
Codecademy Ren
 

Similar to Introduction to web (techie side) (20)

Linked Data: The Real Web 2.0 (from 2008)
Linked Data: The Real Web 2.0 (from 2008)Linked Data: The Real Web 2.0 (from 2008)
Linked Data: The Real Web 2.0 (from 2008)
 
How does the Internet Work?
How does the Internet Work?How does the Internet Work?
How does the Internet Work?
 
How Does the Internet Work? (Wix she codes; branch)
How Does the Internet Work? (Wix she codes; branch)How Does the Internet Work? (Wix she codes; branch)
How Does the Internet Work? (Wix she codes; branch)
 
BD Conf: Visit speed - Page speed is only the beginning
BD Conf: Visit speed - Page speed is only the beginningBD Conf: Visit speed - Page speed is only the beginning
BD Conf: Visit speed - Page speed is only the beginning
 
How does the Internet Work?
How does the Internet Work?How does the Internet Work?
How does the Internet Work?
 
LecWeek2 lecture-whatiswebdesign-part2
LecWeek2 lecture-whatiswebdesign-part2LecWeek2 lecture-whatiswebdesign-part2
LecWeek2 lecture-whatiswebdesign-part2
 
Wp 3hr-course
Wp 3hr-courseWp 3hr-course
Wp 3hr-course
 
Week01 jan19
Week01 jan19Week01 jan19
Week01 jan19
 
eMusic: WordPress in the Enterprise
eMusic: WordPress in the EnterpriseeMusic: WordPress in the Enterprise
eMusic: WordPress in the Enterprise
 
WORKSHOP ON OWN WEBSITE LAUNCHING On March, 11th Sunday 2018 Morning 10 A.M ...
WORKSHOP ON OWN WEBSITE LAUNCHING  On March, 11th Sunday 2018 Morning 10 A.M ...WORKSHOP ON OWN WEBSITE LAUNCHING  On March, 11th Sunday 2018 Morning 10 A.M ...
WORKSHOP ON OWN WEBSITE LAUNCHING On March, 11th Sunday 2018 Morning 10 A.M ...
 
The things we found in your website
The things we found in your websiteThe things we found in your website
The things we found in your website
 
Joyent circa 2006 (Scale with Rails)
Joyent circa 2006 (Scale with Rails)Joyent circa 2006 (Scale with Rails)
Joyent circa 2006 (Scale with Rails)
 
Lesson 102 23 aug13-1430-ay
Lesson 102 23 aug13-1430-ayLesson 102 23 aug13-1430-ay
Lesson 102 23 aug13-1430-ay
 
world wide web
world wide webworld wide web
world wide web
 
Web design - How the Web works?
Web design - How the Web works?Web design - How the Web works?
Web design - How the Web works?
 
Introduction to web sites design
Introduction to  web sites designIntroduction to  web sites design
Introduction to web sites design
 
USG Rock Eagle 2017 - PWP at 1000 Days
USG Rock Eagle 2017 - PWP at 1000 DaysUSG Rock Eagle 2017 - PWP at 1000 Days
USG Rock Eagle 2017 - PWP at 1000 Days
 
My website is live now what?
My website is live now what?My website is live now what?
My website is live now what?
 
JSON all the way
JSON all the wayJSON all the way
JSON all the way
 
Web tips
Web tipsWeb tips
Web tips
 

More from Dominique Hind

How to create Ad Campaign in LinkedIn
How to create Ad Campaign in LinkedInHow to create Ad Campaign in LinkedIn
How to create Ad Campaign in LinkedIn
Dominique Hind
 
Qantas Customer Satisfaction Survey - 2010
Qantas Customer Satisfaction Survey - 2010Qantas Customer Satisfaction Survey - 2010
Qantas Customer Satisfaction Survey - 2010
Dominique Hind
 

More from Dominique Hind (20)

How to create Ad Campaign in LinkedIn
How to create Ad Campaign in LinkedInHow to create Ad Campaign in LinkedIn
How to create Ad Campaign in LinkedIn
 
Digital - Where to next? An API future
Digital - Where to next? An API futureDigital - Where to next? An API future
Digital - Where to next? An API future
 
NZ Digital Download - 2 April 2011
NZ Digital Download - 2 April 2011NZ Digital Download - 2 April 2011
NZ Digital Download - 2 April 2011
 
Digital isn't everything, it's part of the pie
Digital isn't everything, it's part of the pieDigital isn't everything, it's part of the pie
Digital isn't everything, it's part of the pie
 
TCC Presentation - Digital 101 (Sydney, AU)
TCC Presentation - Digital 101 (Sydney, AU)TCC Presentation - Digital 101 (Sydney, AU)
TCC Presentation - Digital 101 (Sydney, AU)
 
Qantas Customer Satisfaction Survey - 2010
Qantas Customer Satisfaction Survey - 2010Qantas Customer Satisfaction Survey - 2010
Qantas Customer Satisfaction Survey - 2010
 
Digital Introduction - AU Market
Digital Introduction - AU MarketDigital Introduction - AU Market
Digital Introduction - AU Market
 
Google Shopping (Beta - Digital Camera Journey
Google Shopping (Beta - Digital Camera JourneyGoogle Shopping (Beta - Digital Camera Journey
Google Shopping (Beta - Digital Camera Journey
 
Search Introduction - Updated
Search Introduction - UpdatedSearch Introduction - Updated
Search Introduction - Updated
 
CRM Introduction
CRM IntroductionCRM Introduction
CRM Introduction
 
Five characters of social marketing - update
Five characters of social marketing - updateFive characters of social marketing - update
Five characters of social marketing - update
 
What is a landing page?
What is a landing page?What is a landing page?
What is a landing page?
 
New Media presentation
New Media presentationNew Media presentation
New Media presentation
 
Search Overview - LB Digital Download
Search Overview - LB Digital DownloadSearch Overview - LB Digital Download
Search Overview - LB Digital Download
 
Apple Email Marketing - Review
Apple Email Marketing - ReviewApple Email Marketing - Review
Apple Email Marketing - Review
 
Obama Campaign Summary
Obama Campaign SummaryObama Campaign Summary
Obama Campaign Summary
 
Search Marketing 101
Search Marketing 101Search Marketing 101
Search Marketing 101
 
Digital Marketing 101 - Interactive Training
Digital Marketing 101 - Interactive TrainingDigital Marketing 101 - Interactive Training
Digital Marketing 101 - Interactive Training
 
Dell Ideastorm - Community involvement
Dell Ideastorm - Community involvementDell Ideastorm - Community involvement
Dell Ideastorm - Community involvement
 
Social Marketing - 5 Characters Types
Social Marketing - 5 Characters TypesSocial Marketing - 5 Characters Types
Social Marketing - 5 Characters Types
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Recently uploaded (20)

DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 

Introduction to web (techie side)

  • 1. How web sites work An epic story of how rugbyheaven.com.au delivers important news to my screen every morning
  • 2. Covering •  What is a website and where does it live? •  How does our browser find a given website? •  How does our browser display a given website? •  What is a database and how does it work?
  • 3. What is the Internet? •  The internet is like our office computer network but on a global scale •  There are literally millions of computers in this networked together •  Simply put the internet is an international network of computers.
  • 4. What is the World Wide Web? •  The www exists on the internet •  It’s a lose term to define the part of the internet that everyone can see and use
  • 5. What is a website? •  According to the wikipedia a website is a collection of related web pages, images, videos or other digital assets that are addressed with a common domain name •  Let’s be serious though, we all know what a website is. We’ve all been to google.com, wikipedia.org or of course rugbyheaven.com.au
  • 6. Do websites actually exist in cyberspace? •  No!!! •  Websites live in specific locations on web servers
  • 7. How do we find what we’re looking for? •  With all these computers and all this information available on the www wouldn’t it be great if there was a uniformed way of locating all the resources we’re looking for… •  Introducing the uniformed resource locator or URL for short •  http://www.rugbyheaven.com.au/news/200909.html
  • 8. How does a URL map to a web page? •  Domain names are part of a URL  (http://www.rugbyheaven.com.au/news/200909.html) •  DNS servers map domain names to physical machines
  • 9. Finally our browser has found our site •  Now our computer can open a dialogue between the browser and the web server using the request-response model
  • 10. Finally a web page •  This is what we expect to see on our screen
  • 11. How does it happen? •  A request is made to the server for a single specific file (in this case index.html) •  A response is sent back to the browser in the form of HTML
  • 12. HTML •  Our browser reads the HTML and renders it to our screens •  Why doesn’t it look anything like the web site I know and love??
  • 13. HTML is very simple •  Yes that kind of simple •  BUT it does do a couple of things very well
  • 14. HTML has friends •  HTML is very good at displaying text / data and linking to other resources •  Links to other resources can be overt or covert •  This page has been improved slightly by including cascading style sheets
  • 15. HTML and Images •  It’s still not quite right •  The Browser now needs to request all the Images from the server too
  • 19. And finally blossoms into this
  • 20. Statistics •  In the example we just saw there were 64 files downloaded to the browser, they were combinations of css, js, jpg, gif and swf’s… And it all happened so quickly •  A little closer to home, on the PhotoChains homepage there are more than 130 separate files downloaded!!!
  • 21. So who builds this? •  Basically everything we’ve seen so far is built by Keong or a bunch of people like him •  And if web sites / pages never changed I’d be out of a job
  • 22. A little bit of jargon •  Server side code versus client side code
  • 23. So what does server side code do? •  Web pages are not all static, in fact most these days are dynamic •  Servers run pieces of code to deliver different and more specific responses to the browser •  Server side rarely lives alone though, it’s usually coupled with one or more databases (or databi if you want to impress)
  • 24. What is a Database? •  Think of Dom’s rolodex, it stores specific information •  The databases we use allow us create our own structure
  • 25. Finally •  We now know what a website is and where it physically lives •  We also know how our computer finds that website •  And finally we know how a webpage gets displayed in our browser •  We know what a database is and a bit about how it works
  • 26. Honourable techies •  Thanks for listening, you can all be honourable techies for the day… Because deep down I all know you want to be