WEBVTT 00:00:00.035 --> 00:00:03.170 In nineteen eighty-nine the cables were already there. 00:00:03.367 --> 00:00:06.874 Computers had been sending each other messages for twenty years. 00:00:07.070 --> 00:00:10.427 What was missing was not wire, and it was not speed. 00:00:10.623 --> 00:00:13.619 What was missing was an agreement about what to send. 00:00:15.016 --> 00:00:19.149 So start underneath the Web, with the thing it was built on top of. 00:00:19.346 --> 00:00:23.921 The Internet is machines, and links between machines, and very little else. 00:00:24.718 --> 00:00:26.492 Give one of them the address of another, 00:00:26.575 --> 00:00:30.161 and the network's whole job is to carry a bundle of bytes from this machine, 00:00:30.244 --> 00:00:34.262 through whatever sits in the middle, and on to that one at the far end. 00:00:34.872 --> 00:00:36.868 And it does not much care how. 00:00:36.951 --> 00:00:41.166 Cut one of those links and the same bytes arrive along the other path instead. 00:00:41.269 --> 00:00:44.579 Nothing in this picture knows what the bytes actually are. 00:00:45.376 --> 00:00:49.614 So there are two inventions here, and it is worth keeping them apart. 00:00:49.718 --> 00:00:51.968 The lower one moves packets between addresses, 00:00:52.051 --> 00:00:55.059 and by the late eighties it was already twenty years old. 00:00:55.856 --> 00:01:00.463 The Web is the upper one. It moves documents, and links between documents, 00:01:00.546 --> 00:01:04.831 and to exist at all it needed three new agreements and one new program. 00:01:05.627 --> 00:01:08.008 The picture I would keep in your head is this. 00:01:08.112 --> 00:01:10.188 The Internet is the road network. 00:01:10.271 --> 00:01:15.496 The Web is the postal system that runs on it: envelopes, addresses written the same 00:01:15.496 --> 00:01:18.979 way everywhere, and somebody at the door who can read a letter. 00:01:19.776 --> 00:01:23.478 So the Web needed four pieces, and I want all four named now, 00:01:23.561 --> 00:01:26.766 because everything after this is those four working together. 00:01:26.870 --> 00:01:30.781 The first is a way of naming a document, any document anywhere, 00:01:30.864 --> 00:01:32.606 in one line of text. 00:01:33.217 --> 00:01:35.107 The second is a protocol: 00:01:35.190 --> 00:01:39.113 a short fixed conversation for asking one machine for one of those documents, 00:01:39.196 --> 00:01:40.601 and getting it back. 00:01:41.212 --> 00:01:45.972 The third is a format for the document itself, so that a heading arrives labelled 00:01:45.972 --> 00:01:49.119 as a heading, and a link arrives labelled as a link. 00:01:49.823 --> 00:01:53.351 And the fourth is a program on your own machine that speaks the protocol, 00:01:53.434 --> 00:01:57.905 reads the format, and paints the result on your screen as something you can click. 00:01:58.701 --> 00:02:02.336 Four pieces, then, and one loop that ties them together: 00:02:02.440 --> 00:02:07.607 a name, a request, a reply, and a picture on the glass in front of you. 00:02:08.059 --> 00:02:09.543 Following that loop once, 00:02:09.626 --> 00:02:13.133 all the way round, is what the rest of this lecture does. 00:02:14.187 --> 00:02:18.484 A document is no use to anybody if there is no way to say where it is. 00:02:18.681 --> 00:02:22.756 So the first invention is a way of writing that down, and here is one. 00:02:22.860 --> 00:02:26.541 This is the address of the first web page there ever was. 00:02:27.338 --> 00:02:29.065 Read it in three parts. 00:02:29.149 --> 00:02:31.723 The front of it says which protocol to speak. 00:02:31.807 --> 00:02:34.208 The middle says which machine to ask. 00:02:34.292 --> 00:02:37.741 And all the rest says which document you want from that machine. 00:02:38.444 --> 00:02:40.744 That is all a URL is. 00:02:40.941 --> 00:02:44.331 One string, answering three questions at once: 00:02:44.528 --> 00:02:47.908 which protocol, which machine, which document. 00:02:48.611 --> 00:02:51.000 Set the three pieces out side by side. 00:02:51.084 --> 00:02:55.458 The first is the scheme, and in this address the scheme is HTTP. 00:02:55.542 --> 00:02:59.073 It settles which protocol the two machines are going to speak. 00:02:59.869 --> 00:03:02.076 The second is the host. 00:03:02.180 --> 00:03:05.140 It is a name, and it names one particular machine, 00:03:05.140 --> 00:03:08.543 in this case a computer sitting in a laboratory in Switzerland. 00:03:09.339 --> 00:03:11.418 And the third is the path. 00:03:11.615 --> 00:03:15.316 Everything after the host is the server's own private business: 00:03:15.400 --> 00:03:17.897 which of its documents you are asking for. 00:03:18.600 --> 00:03:20.966 Notice what the string does not contain. 00:03:21.050 --> 00:03:24.975 It does not say how to find that machine, and it does not say how to ask. 00:03:25.172 --> 00:03:28.133 Naming is one job. Doing is another. 00:03:28.929 --> 00:03:31.589 So how does a name become a machine? 00:03:32.203 --> 00:03:35.803 It gets looked up. The browser hands the name to a separate service, 00:03:35.803 --> 00:03:39.728 older than the Web, whose whole job is turning names into numbers. 00:03:40.524 --> 00:03:41.857 A name goes in. 00:03:41.941 --> 00:03:43.509 An address comes out. 00:03:43.706 --> 00:03:46.292 And an address, unlike a name, 00:03:46.376 --> 00:03:49.430 is the thing the Internet actually understands. 00:03:50.227 --> 00:03:54.415 With that number in hand, the network does what we already watched it do. 00:03:54.499 --> 00:03:58.040 It finds a route to one particular machine, and now there is somewhere 00:03:58.040 --> 00:03:59.504 to send a question. 00:04:00.417 --> 00:04:02.713 And notice what we have not done. 00:04:02.797 --> 00:04:04.315 We have found a machine. 00:04:04.399 --> 00:04:08.657 We have not asked it for anything, and the path is still sitting in our hand, unused. 00:04:08.741 --> 00:04:10.332 That is the next piece. 00:04:11.428 --> 00:04:13.136 We have found the machine. 00:04:13.332 --> 00:04:14.909 Now we have to ask it for something, 00:04:14.993 --> 00:04:18.961 and this is the piece that had to be invented from nothing. Not the wire. 00:04:19.045 --> 00:04:20.845 The words that go over it. 00:04:21.328 --> 00:04:25.017 The browser opens a connection to that machine and sends a request. 00:04:25.101 --> 00:04:29.235 A request is text, and it is almost embarrassingly short. 00:04:30.031 --> 00:04:33.105 One line saying what it wants: the word GET, 00:04:33.189 --> 00:04:37.439 then the path we were holding, then which version of the protocol it is speaking. 00:04:37.818 --> 00:04:41.089 And one line saying which host it thinks it is talking to, 00:04:41.173 --> 00:04:44.402 because a single machine can answer for many different names. 00:04:45.198 --> 00:04:48.775 The answer comes back the other way, and it has the same shape. 00:04:48.878 --> 00:04:53.930 A status line first: the protocol again, then a number, then a word. 00:04:54.033 --> 00:04:56.322 Two hundred means here it is. 00:04:57.118 --> 00:04:59.902 Then a line that says what kind of thing is coming. 00:04:59.986 --> 00:05:02.912 This one is text, in HTML. 00:05:03.109 --> 00:05:05.001 That single line is why the browser knows 00:05:05.001 --> 00:05:08.299 to draw the reply instead of saving it or playing it. 00:05:08.910 --> 00:05:11.311 And then, after a blank line, 00:05:11.395 --> 00:05:15.819 the document itself, poured down the wire as a stream of characters. 00:05:16.732 --> 00:05:18.389 That is HTTP. 00:05:18.473 --> 00:05:22.991 One question, one answer, and a note saying what the answer is made of. 00:05:24.387 --> 00:05:27.569 Three things about that exchange are worth pinning down. 00:05:27.673 --> 00:05:31.006 The first is that the client always speaks first. 00:05:31.318 --> 00:05:34.884 A server sits there and says nothing at all until it is asked. 00:05:35.936 --> 00:05:38.967 The second is that the reply describes itself. 00:05:39.163 --> 00:05:43.189 The same protocol carries a page, a picture or a sound file, 00:05:43.273 --> 00:05:47.697 and that one content type line is how the browser knows which it has been given. 00:05:48.180 --> 00:05:52.291 And the third is that once the answer is delivered, the exchange is finished. 00:05:52.488 --> 00:05:54.276 The server keeps nothing. 00:05:54.380 --> 00:05:59.304 Look: the whole conversation is gone, and nothing about you was left behind. 00:06:00.100 --> 00:06:04.501 So if you want a second document, you say the whole thing again from the beginning. 00:06:04.698 --> 00:06:07.311 A new request. The host line again. 00:06:07.507 --> 00:06:10.469 And the server treats you as a complete stranger. 00:06:11.381 --> 00:06:12.644 Same conversation, 00:06:12.728 --> 00:06:16.793 a different path, and a different document comes back down the wire. 00:06:17.845 --> 00:06:21.012 One question, one answer, written down once, 00:06:21.096 --> 00:06:25.706 and any two programs on Earth can have that conversation without ever having met. 00:06:26.833 --> 00:06:29.818 The reply arrived as a stream of characters. 00:06:30.014 --> 00:06:32.740 Here is what those characters actually looked like, 00:06:32.824 --> 00:06:34.996 and this is the third invention: 00:06:35.099 --> 00:06:39.431 a format that carries the shape of a document along with its words. 00:06:40.227 --> 00:06:42.999 The first line says something quite specific. 00:06:43.083 --> 00:06:46.602 It says: the words The Project are a heading. 00:06:46.798 --> 00:06:49.388 Not big text, not bold text. 00:06:49.701 --> 00:06:50.851 A heading. 00:06:51.647 --> 00:06:55.128 These two say: this run of words is a paragraph. 00:06:55.212 --> 00:06:59.833 The brackets are the labels, and whatever sits between them is the content. 00:07:00.316 --> 00:07:03.228 And this last one is the line the whole Web turns on. 00:07:03.312 --> 00:07:08.630 It says: these words are a link, and the thing they point at is that address there. 00:07:09.426 --> 00:07:13.499 That is HTML. A document with labels on its parts, 00:07:13.583 --> 00:07:17.775 saying what each piece is and saying nothing at all about how it should look. 00:07:18.571 --> 00:07:22.995 Those labels nest inside each other, so what they really describe is a tree. 00:07:23.192 --> 00:07:27.013 The whole document is one element with everything else inside it. 00:07:27.716 --> 00:07:31.707 The heading, the paragraph and the link are three children of the body, 00:07:31.791 --> 00:07:34.648 side by side, in the order they were written. 00:07:35.445 --> 00:07:39.706 And the words themselves hang underneath, as the content of each one. 00:07:40.758 --> 00:07:43.569 Now look at what is hanging off the link instead. 00:07:44.183 --> 00:07:46.123 Not a file on this machine. 00:07:46.319 --> 00:07:51.115 A URL, exactly the sort of string we spent the last few minutes taking apart. 00:07:51.540 --> 00:07:53.082 And that is the join. 00:07:53.166 --> 00:07:57.183 The naming scheme goes inside the document, which means a document can point 00:07:57.183 --> 00:08:01.491 at any other document, on any machine anywhere that answers. 00:08:02.404 --> 00:08:04.610 So take that one step further. 00:08:04.807 --> 00:08:09.181 Here is a document at CERN, and here is another on a different machine altogether, 00:08:09.265 --> 00:08:10.798 in a different country. 00:08:11.711 --> 00:08:12.768 A link from the first 00:08:12.768 --> 00:08:16.840 to the second is nothing but a URL sitting in the first one's markup. 00:08:16.924 --> 00:08:22.184 No agreement between the two owners. No central register. No permission asked. 00:08:22.795 --> 00:08:26.589 And it works in every direction, from any document to any other, 00:08:26.673 --> 00:08:30.946 which is why what grew out of this is called a web and not a library. 00:08:31.743 --> 00:08:35.551 One format, with other people's addresses allowed to live inside it. 00:08:35.748 --> 00:08:37.440 That is what hypertext means, 00:08:37.524 --> 00:08:40.393 and it is the reason this thing spread the way it did. 00:08:41.483 --> 00:08:44.419 So a stream of characters arrives on your own machine. 00:08:44.502 --> 00:08:48.668 Everything from here on happens locally, inside a program you installed once, 00:08:48.751 --> 00:08:50.865 and it happens in four stages. 00:08:51.290 --> 00:08:56.481 The first stage is parsing. Characters go in, and the tree we just drew comes out. 00:08:56.677 --> 00:09:00.869 That is the only stage in the whole engine that cares about angle brackets. 00:09:01.782 --> 00:09:03.905 The second stage is style. 00:09:03.988 --> 00:09:07.643 For every element in that tree the engine works out how it should look: 00:09:07.726 --> 00:09:10.665 how big, how heavy, what colour. 00:09:10.861 --> 00:09:13.100 The heading is set large and bold. 00:09:13.183 --> 00:09:15.669 The link goes blue and underlined. 00:09:16.210 --> 00:09:17.603 The third stage is the one 00:09:17.603 --> 00:09:21.168 that makes this a graphical interface rather than a printout. 00:09:21.783 --> 00:09:24.672 Layout. Given the width of your window, 00:09:24.755 --> 00:09:27.495 where does every one of those boxes actually go? 00:09:28.292 --> 00:09:30.847 The heading takes a band across the top. 00:09:30.950 --> 00:09:34.141 The paragraph takes as many lines as it needs at this width. 00:09:34.224 --> 00:09:36.837 The link takes a small box of its own. 00:09:37.150 --> 00:09:41.748 None of that was decided by the author: it was computed here, for your window. 00:09:42.545 --> 00:09:44.786 And the fourth stage is painting. 00:09:45.099 --> 00:09:47.933 Only now does anything appear on the glass: 00:09:48.129 --> 00:09:50.751 the boxes are filled in with actual letters, 00:09:50.834 --> 00:09:53.680 in the styles that were settled two stages ago. 00:09:54.592 --> 00:09:56.497 That is a rendering engine. 00:09:56.694 --> 00:10:01.802 Four stages, in a program on your own desk, and the same four stages for every 00:10:01.802 --> 00:10:05.727 document on the Web, whoever wrote it and whatever it says. 00:10:07.379 --> 00:10:09.792 Now the part that makes it feel alive. 00:10:09.875 --> 00:10:12.393 Those blue words are still an element in the tree, 00:10:12.476 --> 00:10:16.807 and the engine has not forgotten which box on the screen belongs to which element. 00:10:17.603 --> 00:10:20.295 So here is the whole loop, in five lines. 00:10:20.378 --> 00:10:22.280 It begins with a URL: 00:10:22.363 --> 00:10:26.590 either one you typed into the bar, or one that was sitting in a link you clicked. 00:10:27.387 --> 00:10:31.042 The name gets looked up, a request goes out over the Internet, 00:10:31.125 --> 00:10:35.016 and a reply comes back saying what it carries before it carries it. 00:10:35.626 --> 00:10:40.062 Your own machine parses it, styles it, lays it out, and paints it. 00:10:40.259 --> 00:10:41.476 Then you click something, 00:10:41.559 --> 00:10:46.309 which hands the engine another URL, and the loop starts again from the top. 00:10:47.221 --> 00:10:49.858 And now the thing that is easy to miss. 00:10:49.961 --> 00:10:52.830 No new program had to be written for that document. 00:10:53.026 --> 00:10:56.067 The browser was written once, and installed once, 00:10:56.150 --> 00:11:00.051 and it can display a page from a machine that was switched on this morning. 00:11:00.847 --> 00:11:03.007 That is why the protocol had to be published instead 00:11:03.007 --> 00:11:08.406 of sold, and why the format had to be dull, and textual, and boring. 00:11:08.603 --> 00:11:10.505 The agreement is the invention. 00:11:10.588 --> 00:11:12.643 The cables were already there. 00:11:13.068 --> 00:11:14.553 A name for anything. 00:11:14.636 --> 00:11:16.596 A conversation for fetching it. 00:11:16.679 --> 00:11:19.139 A format that carries its own structure. 00:11:19.222 --> 00:11:21.681 And a rendering engine on every desk. 00:11:21.764 --> 00:11:24.284 That is the World Wide Web.