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