How the web worksPhil Ewels McMenemy Seminar{ }

Trinity Hall MCR

Trinity Hall Boat Club

TH June Event 2011

TH June Event 2012

Graduate Union

HardwareHow your computer fetches a web page

Hardware

• You type in a web address

• DNS routes you to server

• Server sends you files

Hardware

• You type in a web address

• DNS routes you to server

• Server sends you files

http://mcr.trinhall.cam.ac.uk

131.111.179.82

Hardware

• You type in a web address

• DNS routes you to server

• Server sends you files

Hardware

Hardware

Computer

Domain Name

Hosting

Nuts and boltsWhat a web page is made from

Nuts and bolts

• HTML

• CSS

• Images

Nuts and bolts

• HTML

• CSS

• Images

Nuts and bolts

• HTML

• CSS

• Images

Nuts and bolts

• HTML

• CSS

• Images

An ExampleA glimpse of what this code looks like

An Example

HTML

CSS

An Example<p>Look, a kitten!</p>

Look, a kitten!

An Example<p>Look, a kitten!</p>

Look, a kitten!Look, a kitten!p { color: red; background-color: blue;}

An Example<p>Look, a kitten!</p>

<img src=”kitten.jpg”>Look, a kitten!

p { color: red; background-color: blue;}

An Example<p>Look, a kitten!</p>

p { color: red; background-color: blue;}

<img src=”kitten.jpg”>Look, a kitten!

img { border: 10px dashed green;}

Real Life CodeWhat HTML and CSS look like in the wild

Real Life CodeUsing code inspectors to make code make sense

Real Life CodeUsing code inspectors to make code make sense

Real Life CodeUsing code inspectors to make code make sense

DatabasesOne template, many web pages

DatabasesTitle Description Date Time Location

MCR Cocktails Cocktails! 26/1/2013 19:00 MCR

Grad HallTrinity Hall’s beloved weekly event.

30/1/2013 19:00 Hall

Date

Title Time LocationDescription

DatabasesTitle Description Date Time Location

MCR Cocktails Cocktails! 26/1/2013 19:00 MCR

Grad HallTrinity Hall’s beloved weekly event.

30/1/2013 19:00 Hall

McMenemyPhil gives a McMenemy Seminar

30/1/2013 18:30 LSR

Cookiesnom nom nom

Cookies

Cookies

Host Name Value

www.mcr.trinhall.cam.ac.uk

MCR-cookies-OK 1

Cookies

• Save username

• Save items in basket

• Save progress in a form

• Save authentication key

• Personalisation

• Tracking

USES THE LAW

• Revised May 2011

• Need consent to store or access stored content

COOKIES

Summaryone slide to rule them all

Summary

Computer

Domain Name Server

Web Host Server

HARDWARE HTML

CSS

Images

NUTS & BOLTS

Databases

Templates

Cookies

HELPERS

Useful Links• srcf.net

• Student Run Computing FacilityFree hosting and web address for Cambridge students

• wordpress.org• Download Wordpress to run on your own websiteFree content management system - a nice looking website without having to know how to code!

• tallphil.co.uk• Tutorial on how to use the above two to make a website