Quick and short explanation of how the internet works

1. Web Technologies
101
Developer: Edd Parris | edd@nixonmcinnes.co.uk | 01273 764016 | @empika

2. Highlights
Overview
Part 1: How does the Internet work?
A basic overview of what happens when you look at a page
on the Internet.
Part 2: Let's set up a web server.
Part 3: The anatomy of a web page.
Part 4: Some other cool things.

3. Part 1: How does the Internet work?
Let's walk through the steps of what
happens when we look at a website in a
browser.
I like to think that the whole thing is a bit
like ordering food in a restaurant.

4. Part 1: How does the Internet work?
A fancy restaurant The Internets
You choose a restaurant to eat at. A website to look at.
You look at a menu and choose a dish. Choose which webpage you want to see.
You then ask the waiter for it for that item.
Click a link or enter an address in your
browser.
The waiter then goes to the kitchen and asks Your browser contacts the server and asks
the chef to cook it for you. for the page.
The chef cooks your food. The server fetches or creates the page.
Once ready, the waiter returns to your table The server returns your page and your
and delivers your chosen food. browser displays it.

5. Part 1: How does the Internet work?
When you enter the address of a
website to look at, firstly a DNS look up
is made.
DNS stands for 'Domain Name System'
and is like a giant telephone directory
for the internet.
Much like peoples names, we can
easily remember Google.co.uk or
Channel4.com, but it is a lot harder to
remember a telephone number or the
Internet equivalent, an Internet Protocol
address (IP address).
For example, 74.125.230.114
Find out more: http://j.mp/wt-101-dns

6. Part 1: How does the Internet work?
Once your computer has the IP
address, it can then go out into the
Internet and contact the server,
requesting the page that you are asking
for.

7. Part 1: How does the Internet work?
So we ask the server for a specific
page.
The server then responds with our
page, or if the page we asked for
doesn't exist we will be told that so.
Either way, our browser will then
display the results.

8. Part 1: How does the Internet work?
Let's recap...
You choose a restaurant to eat at. A website to look at.
You look at a menu and choose an item. Choose which webpage you want to see.
You then ask the waiter for it for that item.
Click a link or enter an address in your
browser.
The waiter then goes to the kitchen and Your browser contacts the server and
asks the chef to cook it for you. asks for the page.
The chef cooks your food. The server fetches or creates the page.
Once ready, the waiter returns to your The server returns your page and your
table and delivers your chosen food. browser displays it.

9. Part 2: Let's set up a web server

10. Part 2: Let's set up a web server
Imagine a kitchen in a restaurant. It's full of fridges, ovens, hobs, chefs and
ingredients. All the different elements are used to cook tasty food, which is
then sent on its way to the customer.
A server is a bit like a kitchen, there are various components used to
construct a webpage and deliver it to the user.

11. Part 2: Let's set up a web server
First we need a server.
(Find out more: http://j.mp/wt-101-server)
Next we need a domain name and IP
address.
And then we need some files to put on
our server for people to look at.

12. Part 3: The anatomy of a web page
No we have a server set up, let's see what an actual web page is made of and
how to make one.
Webpages are constructed from 3 basic building blocks, these are:
CSS
HTML Javascript
(Cascading Style Sheets)

13. Part 3: The anatomy of a web page
So what do these things do?
HTML:
Creates page structure
Displays Images
Displays text and links
Loads the CSS and Javascript files
CSS:
Controls the layout of the page along with the HTML
Controls the look and feel
Colors
Fonts
Decoration (borders, underline, etc)
Javascript:
Added interactivity
Send and receive extra data without reloading the page

14. Part 3: The anatomy of a web page

15. Part 3: The anatomy of a web page
Lets have a look at all of this in practice.
Get the files here: https://github.com/empika/Web-tech-101-files

16. Part 4: Some other cool things
Here is a list of a million other interesting things we could talk about or you
could investigate yourselves:
History of the Internet/web
Tim Berners-Lee
Security and Privacy Mobile
Scalability Cloud computing
Internationalization Netbooks and thin clients
API's Semantic web
AJAX The web of things
HTML 5 Message queues
CSS 3 IPv6
Server side technologies
Data push and realtime data
Browser advancement

17. Thank you for your time!
Thank you very much.
I have been Edward Parris.
This has been the Internet.
I hope you enjoyed the presentation.