Slides for "Web 101" talk

1. The more things change…
Christopher Gutteridge
University of Southampton

3. Three Letter
Acronym

4. Languages
&
Protocols

5. Language
For our purposes, a language is an agreed way to structure some
information.
Computers use lots of languages but the only one we care about today
is
• Hypertext Markup Language (HTML)
Other languages relevant to the Web include; CSS, PHP, JavaScript,
XML. But that’s too much for this talk!

6. Protocol
A protocol is how two parties communicate. For our purposes, it’s two
computers talking to each other.
Today we’ll briefly cover:
• Internet Protocol
• Transmission Control Protocol
• Domain Name System
• Hypertext Transfer Protocol

7. Hello
Thank-you, come again
Thank-you
Here is your apple and £4.50 change
Here is £5
Certainly, that will be 50p
Hello
I would like to purchase this apple

8. Bonjour
Merci, revenez nous voir
Je vous remercie
Voici votre pomme et 4,44 € de monnaie
Voici 5 €
Ce sera certainement 0,56 €
Bonjour
Je voudrais acheter cette pomme

10. Internet
Protocol

11. Internet Protocol (version 4)
Internet Protocol (IP) Addresses are just a big number to identify each
device on the Internet.
Version 4 addresses are usually written as four numbers, each from 0-
255 with dots between them.
152.78.71.1
4,294,967,296 addresses. Not enough for one per person.

12. Internet Protocol (version 5)
Was an experimental thing. Don’t worry about
it.

13. Internet Protocol (version 6)
Version 6 addresses are usually written as numbers and the letters A-F
with colons between the bits.
2001:db8:0:1234:0:567:8:1
340,300,000,000,000,000,000,000,000,000,000,000 addresses.
Should keep us going a while.

14. Internet Protocol Packets

15. At each step of it’s journey a computer looks at the address on the packet
and sends it to a connected comuter nearer the destination.
Like a real world sorting office.
• My laptop
• Wifi hub
• Imperial Router
• Imperial Firewall
• JaNET
• Soton Firewall
• Soton Router
• My server at Southampton
Packets do get lost sometimes. Or stuck in loops!

17. Domain Name
System

21. Transfer
Control
Protocol
(over Internet Protocol)

22. Transfer Control Protocol
Establishes two computers communicating with each other.
We start by sending a few postcards (packets) each way to agree to set
up the “TCP/IP connection”.
Then we start numbering each message to ensure the correct order.

26. Universal
Resource
Locator

27. http://www.meh.ac.uk/events/grad.html
Scheme
How to ask
Host
who to ask
Path
what to ask for

29. Hyper Text
Transfer
Protocol

30. The whole page you just asked for described in the
Hypertext Markup Language
It’s in HTML
200 OK
Could I have /events/grad.html from www.meh.ac.uk, please?
http://www.meh.ac.uk/events/grad.html
1. Use the Domain Name Service to find out the Internet Protocol address of
www.meh.ac.uk
2. Establish a Transfer Control Protocol connection to that Internet Protocol address
3. Use that connection to ask for the page we want:

32. Hyper Text
Markup
Language

33. HTML
<element> . . . .</element>
<element />
<element term1=”thing” term2=”stuff”>. . . .
</element>

34. HTML
<p>Everything inside a “p” element is a single
paragraph.</p>
<a href=“http://totl.net/”>This is a link to the
URL in the href attribute.</a>
<p>This is an example of a paragraph with <a
href=“https://vfringe.co.uk/”>one</a> or <a
href=“https://www.boomtownfair.co.uk/”>two</a>
links within it.</p>

35. <p>This is an example of a paragraph with <a
href=“https://vfringe.co.uk/”>one</a> or <a
href=“https://www.boomtownfair.co.uk/”>two</a>
links within it.</p>
p
“This is an example of a paragraph with “
a - linking to https://vfringe.co.uk/
“one”
“ or “
a - linking to https://www.boomtownfair.co.uk/
”two“
“ links within it.”