Slides from a recent talk given at a Trinity Hall MCR McMenemy seminar.

1. { How the web works
Phil Ewels McMenemy Seminar }

2. Trinity Hall MCR

3. Trinity Hall Boat Club

4. TH June Event 2011

5. TH June Event 2012

6. Graduate Union

7. Hardware
How your computer fetches a web page

8. Hardware
• You type in a web address
• DNS routes you to server
• Server sends you files

9. Hardware
http://mcr.trinhall.cam.ac.uk
• You type in a web address
• DNS routes you to server
• Server sends you files
131.111.179.82

10. Hardware
• You type in a web address
• DNS routes you to server
• Server sends you files

11. Hardware

12. Hardware
Domain Name
Computer Hosting

13. Nuts and bolts
What a web page is made from

14. Nuts and bolts
• HTML
• CSS
• Images

15. Nuts and bolts
• HTML
• CSS
• Images

16. Nuts and bolts
• HTML
• CSS
• Images

17. Nuts and bolts
• HTML
• CSS
• Images

18. An Example
A glimpse of what this code looks like

19. An Example
HTML
CSS

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

21. An Example
<p>Look, a kitten!</p>
Look, a kitten!
p{
color: red;
background-color: blue;
}

22. An Example
<p>Look, a kitten!</p>
<img src=”kitten.jpg”>
Look, a kitten!
p{
color: red;
background-color: blue;
}

23. An Example
<p>Look, a kitten!</p>
<img src=”kitten.jpg”>
Look, a kitten!
p{
color: red;
background-color: blue;
}
img {
border: 10px dashed green;
}

24. Real Life Code
What HTML and CSS look like in the wild

25. Real Life Code
Using code inspectors to make code make sense

26. Real Life Code
Using code inspectors to make code make sense

27. Real Life Code
Using code inspectors to make code make sense

28. Databases
One template, many web pages

29. Databases
Title Description Date Time Location
MCR Cocktails Cocktails! 26/1/2013 19:00 MCR
Trinity Hall’s beloved weekly
Grad Hall 30/1/2013 19:00 Hall
event.
Date
Title Time Location
Description

30. Databases
Title Description Date Time Location
MCR Cocktails Cocktails! 26/1/2013 19:00 MCR
Trinity Hall’s beloved weekly
Grad Hall 30/1/2013 19:00 Hall
event.
McMenemy Phil gives a McMenemy Seminar 30/1/2013 18:30 LSR

31. Cookies
nom nom nom

32. Cookies

33. Cookies
Host Name Value
www.mcr.trinhall.cam.ac.uk MCR-cookies-OK 1

34. Cookies

35. COOKIES
USES THE LAW
• Save username • Revised May 2011
• Save items in basket • Need consent to store or
access stored content
• Save progress in a form
• Save authentication key
• Personalisation
• Tracking

36. Summary
one slide to rule them all

37. Summary
NUTS & BOLTS
HTML HELPERS
HARDWARE
CSS
Computer Databases
Images
Domain Name Server Templates
Web Host Server Cookies

38. Useful Links
• srcf.net
• Student Run Computing Facility Cambridge students
Free hosting and web address for
• wordpress.org
• Download Wordpress to run on your nice looking website
Free content management system - a own website
without having to know how to code!
• tallphil.co.uk
• Tutorial on how to use the above two to make a website