{"version":1,"lectureId":"01M1A3F9BWY8VWPJA47WXGZEC4","attempt":0,"publication":{"slug":"how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser","title":"How the World Wide Web Was Born: Protocols, Hypertext, and the Browser","subject":"computer-science","summary":"The World Wide Web is not a network. The network was already there. This lecture follows one click all the way round the loop that was actually invented at CERN in nineteen eighty-nine: a URL that can name any document on any machine in one line of text, HTTP as the short fixed conversation that asks for it and answers, HTML as a format that ships a document's structure along with its words, and a rendering engine installed on every personal computer that turns that stream of characters into a laid out, clickable interface. Along the way it keeps the two layers apart: the Internet, which moves packets between addresses and has no idea what a document is, and the Web, which is three published agreements plus one program on your own desk.","metaDescription":"Follow one click round the Web: URLs name documents, HTTP fetches them, HTML carries structure, and your browser paints the result.","transcript":"In nineteen eighty-nine the cables were already there. Computers had been sending each other messages for twenty years. What was missing was not wire, and it was not speed. What was missing was an agreement about what to send. So start underneath the Web, with the thing it was built on top of. The Internet is machines, and links between machines, and very little else. Give one of them the address of another, and the network's whole job is to carry a bundle of bytes from this machine, through whatever sits in the middle, and on to that one at the far end. And it does not much care how. Cut one of those links and the same bytes arrive along the other path instead. Nothing in this picture knows what the bytes actually are. So there are two inventions here, and it is worth keeping them apart. The lower one moves packets between addresses, and by the late eighties it was already twenty years old. The Web is the upper one. It moves documents, and links between documents, and to exist at all it needed three new agreements and one new program. The picture I would keep in your head is this. The Internet is the road network. The Web is the postal system that runs on it: envelopes, addresses written the same way everywhere, and somebody at the door who can read a letter. So the Web needed four pieces, and I want all four named now, because everything after this is those four working together. The first is a way of naming a document, any document anywhere, in one line of text. The second is a protocol: a short fixed conversation for asking one machine for one of those documents, and getting it back. The third is a format for the document itself, so that a heading arrives labelled as a heading, and a link arrives labelled as a link. And the fourth is a program on your own machine that speaks the protocol, reads the format, and paints the result on your screen as something you can click. Four pieces, then, and one loop that ties them together: a name, a request, a reply, and a picture on the glass in front of you. Following that loop once, all the way round, is what the rest of this lecture does. A document is no use to anybody if there is no way to say where it is. So the first invention is a way of writing that down, and here is one. This is the address of the first web page there ever was. Read it in three parts. The front of it says which protocol to speak. The middle says which machine to ask. And all the rest says which document you want from that machine. That is all a URL is. One string, answering three questions at once: which protocol, which machine, which document. Set the three pieces out side by side. The first is the scheme, and in this address the scheme is HTTP. It settles which protocol the two machines are going to speak. The second is the host. It is a name, and it names one particular machine, in this case a computer sitting in a laboratory in Switzerland. And the third is the path. Everything after the host is the server's own private business: which of its documents you are asking for. Notice what the string does not contain. It does not say how to find that machine, and it does not say how to ask. Naming is one job. Doing is another. So how does a name become a machine? It gets looked up. The browser hands the name to a separate service, older than the Web, whose whole job is turning names into numbers. A name goes in. An address comes out. And an address, unlike a name, is the thing the Internet actually understands. With that number in hand, the network does what we already watched it do. It finds a route to one particular machine, and now there is somewhere to send a question. And notice what we have not done. We have found a machine. We have not asked it for anything, and the path is still sitting in our hand, unused. That is the next piece. We have found the machine. Now we have to ask it for something, and this is the piece that had to be invented from nothing. Not the wire. The words that go over it. The browser opens a connection to that machine and sends a request. A request is text, and it is almost embarrassingly short. One line saying what it wants: the word GET, then the path we were holding, then which version of the protocol it is speaking. And one line saying which host it thinks it is talking to, because a single machine can answer for many different names. The answer comes back the other way, and it has the same shape. A status line first: the protocol again, then a number, then a word. Two hundred means here it is. Then a line that says what kind of thing is coming. This one is text, in HTML. That single line is why the browser knows to draw the reply instead of saving it or playing it. And then, after a blank line, the document itself, poured down the wire as a stream of characters. That is HTTP. One question, one answer, and a note saying what the answer is made of. Three things about that exchange are worth pinning down. The first is that the client always speaks first. A server sits there and says nothing at all until it is asked. The second is that the reply describes itself. The same protocol carries a page, a picture or a sound file, and that one content type line is how the browser knows which it has been given. And the third is that once the answer is delivered, the exchange is finished. The server keeps nothing. Look: the whole conversation is gone, and nothing about you was left behind. So if you want a second document, you say the whole thing again from the beginning. A new request. The host line again. And the server treats you as a complete stranger. Same conversation, a different path, and a different document comes back down the wire. One question, one answer, written down once, and any two programs on Earth can have that conversation without ever having met. The reply arrived as a stream of characters. Here is what those characters actually looked like, and this is the third invention: a format that carries the shape of a document along with its words. The first line says something quite specific. It says: the words The Project are a heading. Not big text, not bold text. A heading. These two say: this run of words is a paragraph. The brackets are the labels, and whatever sits between them is the content. And this last one is the line the whole Web turns on. It says: these words are a link, and the thing they point at is that address there. That is HTML. A document with labels on its parts, saying what each piece is and saying nothing at all about how it should look. Those labels nest inside each other, so what they really describe is a tree. The whole document is one element with everything else inside it. The heading, the paragraph and the link are three children of the body, side by side, in the order they were written. And the words themselves hang underneath, as the content of each one. Now look at what is hanging off the link instead. Not a file on this machine. A URL, exactly the sort of string we spent the last few minutes taking apart. And that is the join. The naming scheme goes inside the document, which means a document can point at any other document, on any machine anywhere that answers. So take that one step further. Here is a document at CERN, and here is another on a different machine altogether, in a different country. A link from the first to the second is nothing but a URL sitting in the first one's markup. No agreement between the two owners. No central register. No permission asked. And it works in every direction, from any document to any other, which is why what grew out of this is called a web and not a library. One format, with other people's addresses allowed to live inside it. That is what hypertext means, and it is the reason this thing spread the way it did. So a stream of characters arrives on your own machine. Everything from here on happens locally, inside a program you installed once, and it happens in four stages. The first stage is parsing. Characters go in, and the tree we just drew comes out. That is the only stage in the whole engine that cares about angle brackets. The second stage is style. For every element in that tree the engine works out how it should look: how big, how heavy, what colour. The heading is set large and bold. The link goes blue and underlined. The third stage is the one that makes this a graphical interface rather than a printout. Layout. Given the width of your window, where does every one of those boxes actually go? The heading takes a band across the top. The paragraph takes as many lines as it needs at this width. The link takes a small box of its own. None of that was decided by the author: it was computed here, for your window. And the fourth stage is painting. Only now does anything appear on the glass: the boxes are filled in with actual letters, in the styles that were settled two stages ago. That is a rendering engine. Four stages, in a program on your own desk, and the same four stages for every document on the Web, whoever wrote it and whatever it says. Now the part that makes it feel alive. Those blue words are still an element in the tree, and the engine has not forgotten which box on the screen belongs to which element. So here is the whole loop, in five lines. It begins with a URL: either one you typed into the bar, or one that was sitting in a link you clicked. The name gets looked up, a request goes out over the Internet, and a reply comes back saying what it carries before it carries it. Your own machine parses it, styles it, lays it out, and paints it. Then you click something, which hands the engine another URL, and the loop starts again from the top. And now the thing that is easy to miss. No new program had to be written for that document. The browser was written once, and installed once, and it can display a page from a machine that was switched on this morning. That is why the protocol had to be published instead of sold, and why the format had to be dull, and textual, and boring. The agreement is the invention. The cables were already there. A name for anything. A conversation for fetching it. A format that carries its own structure. And a rendering engine on every desk. That is the World Wide Web.","watch":{"version":1,"scenes":[{"title":"Wires, and What Rides on Them","start":0,"end":134.1406458333333,"objects":{"card":"a Title that says \"Networks and the Web — How the World Wide Web Was Born: Protocols, Hypertext, and the Browser\"","client":"a Point [blue] labelled \"upright(\"a personal computer\")\" drawn in net (location=(1.2, 6.3), marker_radius=0.2)","head_layers":"a Heading that says \"Two Different Inventions\"","head_pieces":"a Heading that says \"What the Web Added\"","head_wires":"a Heading that says \"The Cables Were Already There\"","layers":"a Table [text] that says \"Layer Moves Has to know Internet packets of bytes addresses, routes Web documents, links URLs, HTTP, HTML\" (rows=(('Layer', 'Moves', 'Has to know'), ('Internet', 'packets of by…, header=True)","link_1":"a Line [gray] drawn in net (start=(1.2, 6.3), end=(3.4, 4.9))","link_2":"a Line [gray] drawn in net (start=(3.4, 4.9), end=(5.8, 6.6))","link_3":"a Line [gray] drawn in net (start=(3.4, 4.9), end=(5.2, 2.6))","link_4":"a Line [gray] drawn in net (start=(5.8, 6.6), end=(8.6, 4.2))","link_5":"a Line [gray] drawn in net (start=(5.2, 2.6), end=(8.6, 4.2))","net":"a Figure (x_range=(0.0, 10.0), y_range=(0.0, 8.0))","packet":"a Point [yellow] labelled \"upright(\"bytes\")\" drawn in net (location=(<VariableNumber px = 1.2>, <VariableNumber py = 6.3>), marker_radius=0.15)","piece_1":"a Text [text] that says \"1. A URL: one line of text that names a document.\"","piece_2":"a Text [text] that says \"2. HTTP: a fixed way to ask for it, and to answer.\"","piece_3":"a Text [text] that says \"3. HTML: a format that carries the document's structure.\"","piece_4":"a Text [text] that says \"4. A browser: the program on your desk that speaks all three.\"","px":"a VariableNumber (initial_value=1.2)","py":"a VariableNumber (initial_value=6.3)","r1":"a Point [gray] labelled \"R_1\" drawn in net (location=(3.4, 4.9), marker_radius=0.14)","r2":"a Point [gray] labelled \"R_2\" drawn in net (location=(5.8, 6.6), marker_radius=0.14)","r3":"a Point [gray] labelled \"R_3\" drawn in net (location=(5.2, 2.6), marker_radius=0.14)","server":"a Point [green] labelled \"upright(\"another computer\")\" drawn in net (location=(8.6, 4.2), marker_radius=0.2)"},"beats":[{"start":0,"say":"In nineteen eighty-nine the cables were already there. Computers had been sending each other messages for twenty years. What was missing was not wire, and it was not speed. What was missing was an agreement about what to send.","live":[],"does":[[0,"card is shown on the screen, written out."],[1.213440796473628,"card: enter:write-left-to-right."],[13.4675,"card is hidden from the screen — left the board."]]},{"start":14.667499999999999,"say":"So start underneath the Web, with the thing it was built on top of. The Internet is machines, and links between machines, and very little else.","live":null,"does":[[14.667499999999999,"head_wires is shown on the screen, written out."],[15.596,"net is shown on the screen, written out."],[20.066,"client is shown on the screen, written out."],[20.699020134228185,"server is shown on the screen, written out."],[21.192,"r1 is shown on the screen, written out."],[21.307196548418023,"r2 is shown on the screen, written out."],[21.42239309683605,"r3 is shown on the screen, written out."],[21.459,"link_1 is shown on the screen, written out."],[21.534071907957813,"link_2 is shown on the screen, written out."],[21.609143815915626,"link_3 is shown on the screen, written out."],[21.684215723873443,"link_4 is shown on the screen, written out."],[21.759287631831253,"link_5 is shown on the screen, written out."]]},{"start":24.3695,"say":"Give one of them the address of another, and the network's whole job is to carry a bundle of bytes from this machine, through whatever sits in the middle, and on to that one at the far end.","live":["net","head_wires","client","server","r1","r2","r3","link_1","link_2","link_3","link_4","link_5"],"does":[[25.483999999999995,"packet is shown on the screen, written out."],[27.944999999999997,"packet is redrawn as the numbers it depends on change."],[27.944999999999997,"px ticks to 3.4."],[27.944999999999997,"py ticks to 4.9."],[31.311999999999998,"packet is redrawn as the numbers it depends on change."],[31.311999999999998,"px ticks to 5.8."],[31.311999999999998,"py ticks to 6.6."],[33.135,"packet is redrawn as the numbers it depends on change."],[33.135,"px ticks to 8.6."],[33.135,"py ticks to 4.2."]]},{"start":34.617,"say":"And it does not much care how. Cut one of those links and the same bytes arrive along the other path instead. Nothing in this picture knows what the bytes actually are.","live":["net","head_wires","client","server","r1","r2","r3","link_1","link_2","link_3","link_4","link_5","packet"],"does":[[38.982,"The segment (3.4, 4.9) to (5.2, 2.6) in net is lit up."],[39.864999999999995,"The segment (5.2, 2.6) to (8.6, 4.2) in net is lit up."],[42.766999999999996,"packet is indicated — a transient flash."],[44.427499999999995,"net moves to a new place on the board."],[44.427499999999995,"head_wires is hidden from the screen — left the board."],[44.427499999999995,"net: retire a lit segment (unemphasize_line)."],[44.427499999999995,"net: retire a lit segment (unemphasize_line)."]]},{"start":45.027499999999996,"say":"So there are two inventions here, and it is worth keeping them apart. The lower one moves packets between addresses, and by the late eighties it was already twenty years old.","live":["net","client","server","r1","r2","r3","link_1","link_2","link_3","link_4","link_5","packet"],"does":[[45.027499999999996,"head_layers is shown on the screen, written out."],[45.90999999999999,"layers is shown on the screen, written out."],[49.89199999999999,"layers is shown on the screen, written out."]]},{"start":55.50749999999999,"say":"The Web is the upper one. It moves documents, and links between documents, and to exist at all it needed three new agreements and one new program.","live":["net","client","server","r1","r2","r3","link_1","link_2","link_3","link_4","link_5","packet","head_layers"],"does":[[56.58699999999999,"layers is shown on the screen, written out."],[58.09599999999999,"layers (the \"row=3\" part) is emphasized."],[63.74999999999999,"layers (the \"row=3\" part) is no longer emphasized."]]},{"start":65.279,"say":"The picture I would keep in your head is this. The Internet is the road network. The Web is the postal system that runs on it: envelopes, addresses written the same way everywhere, and somebody at the door who can read a letter.","live":null,"does":[[69.07499999999999,"layers (the \"row=2\" part) is indicated — a transient flash."],[70.94399999999999,"layers (the \"row=3\" part) is indicated — a transient flash."],[78.8275,"head_layers is hidden from the screen — left the board."],[78.8275,"layers is hidden from the screen — left the board."]]},{"start":79.4275,"say":"So the Web needed four pieces, and I want all four named now, because everything after this is those four working together. The first is a way of naming a document, any document anywhere, in one line of text.","live":["net","client","server","r1","r2","r3","link_1","link_2","link_3","link_4","link_5","packet"],"does":[[79.4275,"head_pieces is shown on the screen, written out."],[87.949,"piece_1 is shown on the screen, written out."],[90.14399999999999,"server is indicated — a transient flash."]]},{"start":92.9615,"say":"The second is a protocol: a short fixed conversation for asking one machine for one of those documents, and getting it back.","live":["net","client","server","r1","r2","r3","link_1","link_2","link_3","link_4","link_5","packet","piece_1","head_pieces"],"does":[[93.994,"piece_2 is shown on the screen, written out."],[96.01500000000001,"The segment (1.2, 6.3) to (3.4, 4.9) in net is lit up."],[100.3565,"net: retire a lit segment (unemphasize_line)."]]},{"start":100.9565,"say":"The third is a format for the document itself, so that a heading arrives labelled as a heading, and a link arrives labelled as a link.","live":["net","client","server","r1","r2","r3","link_1","link_2","link_3","link_4","link_5","packet","piece_1","piece_2","head_pieces"],"does":[[102.095,"piece_3 is shown on the screen, written out."],[102.861,"packet is indicated — a transient flash."]]},{"start":109.521,"say":"And the fourth is a program on your own machine that speaks the protocol, reads the format, and paints the result on your screen as something you can click.","live":["net","client","server","r1","r2","r3","link_1","link_2","link_3","link_4","link_5","packet","piece_1","piece_2","piece_3","head_pieces"],"does":[[110.636,"piece_4 is shown on the screen, written out."],[111.18199999999999,"client is indicated — a transient flash."]]},{"start":118.353,"say":"Four pieces, then, and one loop that ties them together: a name, a request, a reply, and a picture on the glass in front of you. Following that loop once, all the way round, is what the rest of this lecture does.","live":["net","client","server","r1","r2","r3","link_1","link_2","link_3","link_4","link_5","packet","piece_1","piece_2","piece_3","piece_4","head_pieces"],"does":[[124.64599999999999,"packet is redrawn as the numbers it depends on change."],[124.64599999999999,"px ticks to 1.2."],[124.64599999999999,"py ticks to 6.3."],[125.70199999999998,"packet is indicated — a transient flash."],[133.09897916666668,"head_pieces is hidden from the screen — left the board."],[133.09897916666668,"net is hidden from the screen — left the board."],[133.09897916666668,"client is hidden from the screen — net left the board."],[133.09897916666668,"server is hidden from the screen — net left the board."],[133.09897916666668,"r1 is hidden from the screen — net left the board."],[133.09897916666668,"r2 is hidden from the screen — net left the board."],[133.09897916666668,"r3 is hidden from the screen — net left the board."],[133.09897916666668,"link_1 is hidden from the screen — net left the board."],[133.09897916666668,"link_2 is hidden from the screen — net left the board."],[133.09897916666668,"link_3 is hidden from the screen — net left the board."],[133.09897916666668,"link_4 is hidden from the screen — net left the board."],[133.09897916666668,"link_5 is hidden from the screen — net left the board."],[133.09897916666668,"packet is hidden from the screen — net left the board."],[133.09897916666668,"piece_1 is hidden from the screen — left the board."],[133.09897916666668,"piece_2 is hidden from the screen — left the board."],[133.09897916666668,"piece_3 is hidden from the screen — left the board."],[133.09897916666668,"piece_4 is hidden from the screen — left the board."]]}]},{"title":"One Name for Every Document","start":134.1406458333333,"end":251.38170833333334,"objects":{"defn_url":"a Panel that says \"A URL is one string that answers three questions: which protocol to speak, which machine to ask, and which document to ask it for.\"","find":"a Figure (x_range=(0.0, 10.0), y_range=(0.0, 8.0))","head_find":"a Heading that says \"From a Name to a Machine\"","head_name":"a Heading that says \"One Line of Text\"","head_pieces":"a Heading that says \"Three Questions, One String\"","host_chip":"a Math [yellow] that says \"$upright(\"info.cern.ch\")$\" drawn in find","lookup":"a Vector [gray] labelled \"upright(\"look up\")\" drawn in find (start=(5.0, 6.3), end=(5.0, 5.3))","machine":"a Point [blue] labelled \"upright(\"one particular machine\")\" drawn in find (location=(5.0, 2.3), marker_radius=0.22)","number_chip":"a Math [yellow] that says \"$upright(\"128.141.201.74\")$\" drawn in find","parts":"a Table [text] that says \"Piece Here What it settles scheme http which protocol to speak host info.cern.ch which machine answers path /hypertext/theproject.html which document there\" (rows=(('Piece', 'Here', 'What it settles'), ('scheme', 'http', 'whic…, header=True)","path_chip":"a Math [green] that says \"$upright(\"/hypertext/theproject.html\")$\" drawn in find","path_note":"a Tex [text] that says \"The path has not been used yet.\"","route":"a Vector [gray] labelled \"upright(\"route to\")\" drawn in find (start=(5.0, 4.1), end=(5.0, 3.1))","url":"a Math [text] that says \"$upright(\"http\")upright(\"://\")upright(\"info.cern.ch\")upright(\"/hypertext/theproject.html\")$\""},"beats":[{"start":134.1406458333333,"say":"A document is no use to anybody if there is no way to say where it is. So the first invention is a way of writing that down, and here is one. This is the address of the first web page there ever was.","live":[],"does":[[134.1406458333333,"head_name is shown on the screen, written out."],[141.6056458333333,"url is shown on the screen, written out."]]},{"start":146.9891458333333,"say":"Read it in three parts. The front of it says which protocol to speak. The middle says which machine to ask. And all the rest says which document you want from that machine.","live":["url","head_name"],"does":[[149.3226458333333,"url (the \"upright(\"http\")\" part) is emphasized."],[151.9926458333333,"url (the \"upright(\"http\")\" part) is no longer emphasized."],[151.9926458333333,"url (the \"upright(\"info.cern.ch\")\" part) is emphasized."],[154.75564583333332,"url (the \"upright(\"/hypertext/theproject.html\")\" part) is emphasized."],[154.75564583333332,"url (the \"upright(\"info.cern.ch\")\" part) is no longer emphasized."],[157.5421458333333,"url (the \"upright(\"/hypertext/theproject.html\")\" part) is no longer emphasized."]]},{"start":158.1421458333333,"say":"That is all a URL is. One string, answering three questions at once: which protocol, which machine, which document.","live":null,"does":[[161.20764583333332,"defn_url is shown on the screen, written out."],[167.7091458333333,"url moves to a new place on the board."],[167.7091458333333,"defn_url is hidden from the screen — left the board."],[167.7091458333333,"head_name is hidden from the screen — left the board."]]},{"start":168.3091458333333,"say":"Set the three pieces out side by side. The first is the scheme, and in this address the scheme is HTTP. It settles which protocol the two machines are going to speak.","live":["url"],"does":[[168.3091458333333,"head_pieces is shown on the screen, written out."],[169.19164583333333,"parts is shown on the screen, written out."],[171.80364583333332,"parts is shown on the screen, written out."],[173.9746458333333,"url (the \"upright(\"http\")\" part) is indicated — a transient flash."]]},{"start":179.5206458333333,"say":"The second is the host. It is a name, and it names one particular machine, in this case a computer sitting in a laboratory in Switzerland.","live":["url","head_pieces"],"does":[[181.06464583333332,"parts is shown on the screen, written out."],[184.6756458333333,"url (the \"upright(\"info.cern.ch\")\" part) is indicated — a transient flash."]]},{"start":188.9906458333333,"say":"And the third is the path. Everything after the host is the server's own private business: which of its documents you are asking for.","live":null,"does":[[190.44164583333333,"parts is shown on the screen, written out."],[195.88664583333332,"url (the \"upright(\"/hypertext/theproject.html\")\" part) is indicated — a transient flash."]]},{"start":198.2981458333333,"say":"Notice what the string does not contain. It does not say how to find that machine, and it does not say how to ask. Naming is one job. Doing is another.","live":null,"does":[[201.9786458333333,"parts (the \"column=3\" part) is emphasized."],[207.1216458333333,"parts (the \"column=3\" part) is no longer emphasized."],[207.9806458333333,"head_pieces is hidden from the screen — left the board."],[207.9806458333333,"parts is hidden from the screen — left the board."],[207.9806458333333,"url is hidden from the screen — left the board."]]},{"start":208.5806458333333,"say":"So how does a name become a machine? It gets looked up. The browser hands the name to a separate service, older than the Web, whose whole job is turning names into numbers.","live":[],"does":[[208.5806458333333,"head_find is shown on the screen, written out."],[212.5866458333333,"find is shown on the screen, written out."],[214.1426458333333,"host_chip is shown on the screen, written out."],[217.92664583333328,"lookup is shown on the screen, written out."]]},{"start":220.1756458333333,"say":"A name goes in. An address comes out. And an address, unlike a name, is the thing the Internet actually understands.","live":["find","head_find","host_chip","lookup"],"does":[[222.1146458333333,"number_chip is shown on the screen, written out."],[228.0936458333333,"number_chip is indicated — a transient flash."]]},{"start":229.8781458333333,"say":"With that number in hand, the network does what we already watched it do. It finds a route to one particular machine, and now there is somewhere to send a question.","live":["find","head_find","host_chip","lookup","number_chip"],"does":[[235.0676458333333,"route is shown on the screen, written out."],[236.2406458333333,"machine is shown on the screen, written out."]]},{"start":240.0101458333333,"say":"And notice what we have not done. We have found a machine. We have not asked it for anything, and the path is still sitting in our hand, unused. That is the next piece.","live":["find","head_find","host_chip","lookup","number_chip","route","machine"],"does":[[243.1096458333333,"machine is indicated — a transient flash."],[245.9306458333333,"path_chip is shown on the screen, written out."],[247.6606458333333,"path_note is shown on the screen, written out."],[250.34004166666665,"find is hidden from the screen — left the board."],[250.34004166666665,"host_chip is hidden from the screen — find left the board."],[250.34004166666665,"lookup is hidden from the screen — find left the board."],[250.34004166666665,"number_chip is hidden from the screen — find left the board."],[250.34004166666665,"route is hidden from the screen — find left the board."],[250.34004166666665,"machine is hidden from the screen — find left the board."],[250.34004166666665,"path_chip is hidden from the screen — find left the board."],[250.34004166666665,"head_find is hidden from the screen — left the board."],[250.34004166666665,"path_note is hidden from the screen — left the board."]]}]},{"title":"The Conversation: HTTP","start":251.38170833333334,"end":386.7746041666667,"objects":{"client":"a Point [blue] labelled \"upright(\"browser\")\" drawn in wire (location=(1.4, 4.0), marker_radius=0.22)","head_ask":"a Heading that says \"Ask, and Be Answered\"","head_rules":"a Heading that says \"Three Rules of the Exchange\"","req_arrow":"a Vector [yellow] labelled \"upright(\"request\")\" drawn in wire (start=(2.2, 5.4), end=(7.8, 5.4))","req_host":"a Math [text] that says \"$upright(\"Host: info.cern.ch\")$\" drawn in wire","req_line":"a Math [text] that says \"$upright(\"GET /hypertext/theproject.html HTTP/1.1\")$\" drawn in wire","res_arrow":"a Vector [green] labelled \"upright(\"reply\")\" drawn in wire (start=(7.8, 2.6), end=(2.2, 2.6))","res_body":"a Math [text] that says \"$upright(\"<html> ... </html>\")$\" drawn in wire","res_status":"a Math [text] that says \"$upright(\"HTTP/1.1 200 OK\")$\" drawn in wire","res_type":"a Math [text] that says \"$upright(\"Content-Type: text/html\")$\" drawn in wire","rule_1":"a Text [text] that says \"1. The client always speaks first.\"","rule_2":"a Text [text] that says \"2. The reply says what kind of thing it carries.\"","rule_3":"a Text [text] that says \"3. Once it is delivered, the exchange is over.\"","server":"a Point [green] labelled \"upright(\"server\")\" drawn in wire (location=(8.6, 4.0), marker_radius=0.22)","wire":"a Figure (x_range=(0.0, 10.0), y_range=(0.0, 8.0))"},"beats":[{"start":251.38170833333334,"say":"We have found the machine. Now we have to ask it for something, and this is the piece that had to be invented from nothing. Not the wire. The words that go over it.","live":[],"does":[[251.38170833333334,"head_ask is shown on the screen, written out."],[252.18270833333332,"wire is shown on the screen, written out."],[253.90070833333334,"client is shown on the screen, written out."],[254.2227128651607,"server is shown on the screen, written out."]]},{"start":261.13620833333334,"say":"The browser opens a connection to that machine and sends a request. A request is text, and it is almost embarrassingly short.","live":["wire","head_ask","client","server"],"does":[[263.68470833333333,"req_arrow is shown on the screen, written out."],[268.30470833333334,"req_line is shown on the screen, written out."]]},{"start":269.6827083333333,"say":"One line saying what it wants: the word GET, then the path we were holding, then which version of the protocol it is speaking.","live":["wire","head_ask","client","server","req_arrow","req_line"],"does":[[272.42270833333333,"req_line (the \"GET\" part) is indicated — a transient flash."],[274.1757083333333,"req_line (the \"/hypertext/theproject.html\" part) is indicated — a transient flash."],[275.1397083333333,"req_line (the \"HTTP/1.1\" part) is indicated — a transient flash."]]},{"start":277.6782083333333,"say":"And one line saying which host it thinks it is talking to, because a single machine can answer for many different names.","live":null,"does":[[279.21070833333334,"req_host is shown on the screen, written out."]]},{"start":284.84970833333335,"say":"The answer comes back the other way, and it has the same shape. A status line first: the protocol again, then a number, then a word. Two hundred means here it is.","live":["wire","head_ask","client","server","req_arrow","req_line","req_host"],"does":[[285.37170833333334,"res_arrow is shown on the screen, written out."],[289.00570833333336,"res_status is shown on the screen, written out."],[292.07070833333336,"res_status (the \"200\" part) is indicated — a transient flash."]]},{"start":296.76970833333337,"say":"Then a line that says what kind of thing is coming. This one is text, in HTML. That single line is why the browser knows to draw the reply instead of saving it or playing it.","live":["wire","head_ask","client","server","req_arrow","req_line","req_host","res_arrow","res_status"],"does":[[297.1177083333333,"res_type is shown on the screen, written out."],[301.49470833333334,"res_type (the \"text/html\" part) is indicated — a transient flash."]]},{"start":308.6542083333334,"say":"And then, after a blank line, the document itself, poured down the wire as a stream of characters.","live":["wire","head_ask","client","server","req_arrow","req_line","req_host","res_arrow","res_status","res_type"],"does":[[311.5457083333333,"res_body is shown on the screen, written out."]]},{"start":316.3252083333333,"say":"That is HTTP. One question, one answer, and a note saying what the answer is made of.","live":["wire","head_ask","client","server","req_arrow","req_line","req_host","res_arrow","res_status","res_type","res_body"],"does":[[318.73970833333334,"req_arrow is indicated — a transient flash."],[319.78470833333336,"res_arrow is indicated — a transient flash."],[322.83870833333333,"wire moves to a new place on the board."],[322.83870833333333,"head_ask is hidden from the screen — left the board."]]},{"start":324.0387083333333,"say":"Three things about that exchange are worth pinning down. The first is that the client always speaks first. A server sits there and says nothing at all until it is asked.","live":["wire","client","server","req_arrow","req_line","req_host","res_arrow","res_status","res_type","res_body"],"does":[[324.0387083333333,"head_rules is shown on the screen, written out."],[328.84570833333333,"rule_1 is shown on the screen, written out."],[333.94170833333334,"client is indicated — a transient flash."]]},{"start":335.4597083333333,"say":"The second is that the reply describes itself. The same protocol carries a page, a picture or a sound file, and that one content type line is how the browser knows which it has been given.","live":["wire","client","server","req_arrow","req_line","req_host","res_arrow","res_status","res_type","res_body","rule_1","head_rules"],"does":[[337.38670833333333,"rule_2 is shown on the screen, written out."],[343.9457083333333,"res_type is indicated — a transient flash."]]},{"start":347.9882083333333,"say":"And the third is that once the answer is delivered, the exchange is finished. The server keeps nothing. Look: the whole conversation is gone, and nothing about you was left behind.","live":["wire","client","server","req_arrow","req_line","req_host","res_arrow","res_status","res_type","res_body","rule_1","rule_2","head_rules"],"does":[[351.2917083333333,"rule_3 is shown on the screen, written out."],[356.2727083333333,"req_line is hidden from the screen."],[356.2727083333333,"req_host is hidden from the screen."],[356.2727083333333,"req_arrow is hidden from the screen."],[356.2727083333333,"res_status is hidden from the screen."],[356.2727083333333,"res_type is hidden from the screen."],[356.2727083333333,"res_body is hidden from the screen."],[356.2727083333333,"res_arrow is hidden from the screen."]]},{"start":359.75170833333334,"say":"So if you want a second document, you say the whole thing again from the beginning. A new request. The host line again. And the server treats you as a complete stranger.","live":["wire","client","server","rule_1","rule_2","rule_3","head_rules"],"does":[[362.9447083333333,"req_arrow is shown on the screen, written out."],[364.99970833333333,"req_line is shown on the screen, written out."],[365.97470833333335,"req_host is shown on the screen, written out."]]},{"start":370.97470833333335,"say":"Same conversation, a different path, and a different document comes back down the wire.","live":["wire","client","server","req_arrow","req_line","req_host","rule_1","rule_2","rule_3","head_rules"],"does":[[373.20370833333334,"req_line becomes \"$upright(\"GET /hypertext/whatis.html HTTP/1.1\")$\"."],[375.0847083333333,"res_arrow is shown on the screen, written out."],[375.2320657378336,"res_status is shown on the screen, written out."],[375.5430618655154,"res_type is shown on the screen, written out."],[375.968770547423,"res_body is shown on the screen, written out."]]},{"start":377.36870833333336,"say":"One question, one answer, written down once, and any two programs on Earth can have that conversation without ever having met.","live":["wire","client","server","req_arrow","req_line","req_host","res_arrow","res_status","res_type","res_body","rule_1","rule_2","rule_3","head_rules"],"does":[[378.1227083333333,"req_arrow is indicated — a transient flash."],[379.13370833333335,"res_arrow is indicated — a transient flash."],[385.7329375,"head_rules is hidden from the screen — left the board."],[385.7329375,"rule_1 is hidden from the screen — left the board."],[385.7329375,"rule_2 is hidden from the screen — left the board."],[385.7329375,"rule_3 is hidden from the screen — left the board."],[385.7329375,"wire is hidden from the screen — left the board."],[385.7329375,"client is hidden from the screen — wire left the board."],[385.7329375,"server is hidden from the screen — wire left the board."],[385.7329375,"req_arrow is hidden from the screen — wire left the board."],[385.7329375,"req_line is hidden from the screen — wire left the board."],[385.7329375,"req_host is hidden from the screen — wire left the board."],[385.7329375,"res_arrow is hidden from the screen — wire left the board."],[385.7329375,"res_status is hidden from the screen — wire left the board."],[385.7329375,"res_type is hidden from the screen — wire left the board."],[385.7329375,"res_body is hidden from the screen — wire left the board."]]}]},{"title":"The Document: HTML","start":386.7746041666667,"end":521.4368541666666,"objects":{"d_cern":"a Point [blue] labelled \"upright(\"cern.ch\")\" drawn in webgraph (location=(2.2, 6.3), marker_radius=0.2)","d_home":"a Point [green] labelled \"upright(\"your own page\")\" drawn in webgraph (location=(2.6, 2.4), marker_radius=0.2)","d_nist":"a Point [blue] labelled \"upright(\"nist.gov\")\" drawn in webgraph (location=(7.8, 6.5), marker_radius=0.2)","d_slac":"a Point [blue] labelled \"upright(\"slac.edu\")\" drawn in webgraph (location=(7.2, 2.3), marker_radius=0.2)","defn_html":"a Panel that says \"HTML puts labels on a document's parts: this is a heading, this is a paragraph, this is a link to another document. It says what each piece is, not how it should look.\"","e_ba":"a Line [gray] drawn in tree (start=(5.0, 5.9), end=(7.7, 4.4))","e_bh":"a Line [gray] drawn in tree (start=(5.0, 5.9), end=(2.3, 4.4))","e_bp":"a Line [gray] drawn in tree (start=(5.0, 5.9), end=(5.0, 4.4))","e_hb":"a Line [gray] drawn in tree (start=(5.0, 7.2), end=(5.0, 5.9))","e_ta":"a Line [gray] drawn in tree (start=(7.7, 4.4), end=(7.7, 2.9), dashed=True)","e_th":"a Line [gray] drawn in tree (start=(2.3, 4.4), end=(2.3, 2.9), dashed=True)","e_tp":"a Line [gray] drawn in tree (start=(5.0, 4.4), end=(5.0, 2.9), dashed=True)","head_links":"a Heading that says \"A Link Is a URL in a Document\"","head_markup":"a Heading that says \"Tags Are Not Decoration\"","head_tree":"a Heading that says \"What the Tags Mean\"","href_chip":"a Math [yellow] that says \"$upright(\"href = whatis.html\")$\" drawn in tree","lbl_many":"a Tex [text] that says \"between documents\"","lbl_one":"a Tex [text] that says \"inside one document\"","link_cn":"a CurvedArrow [yellow] drawn in webgraph (start=(2.2, 6.3), end=(7.8, 6.5), bend=0.3)","link_hc":"a CurvedArrow [yellow] drawn in webgraph (start=(2.6, 2.4), end=(2.2, 6.3), bend=0.3)","link_ns":"a CurvedArrow [yellow] drawn in webgraph (start=(7.8, 6.5), end=(7.2, 2.3), bend=0.3)","link_sh":"a CurvedArrow [yellow] drawn in webgraph (start=(7.2, 2.3), end=(2.6, 2.4), bend=0.3)","n_a":"a Point [yellow] labelled \"upright(\"a\")\" drawn in tree (location=(7.7, 4.4), marker_radius=0.16)","n_body":"a Point [blue] labelled \"upright(\"body\")\" drawn in tree (location=(5.0, 5.9), marker_radius=0.16)","n_h1":"a Point [green] labelled \"upright(\"h1\")\" drawn in tree (location=(2.3, 4.4), marker_radius=0.16)","n_html":"a Point [blue] labelled \"upright(\"html\")\" drawn in tree (location=(5.0, 7.2), marker_radius=0.16)","n_p":"a Point [green] labelled \"upright(\"p\")\" drawn in tree (location=(5.0, 4.4), marker_radius=0.16)","src_1":"a Math [text] that says \"$upright(\"<h1>\")upright(\"The Project</h1>\")$\"","src_2":"a Math [text] that says \"$upright(\"<p>\")upright(\"Links can be made to any\")$\"","src_3":"a Math [text] that says \"$upright(\"information, anywhere.</p>\")$\"","src_4":"a Math [text] that says \"$upright(\"<a \")upright(\"href=whatis.html\")upright(\">What is it?</a>\")$\"","t_a":"a Point [gray] labelled \"upright(\"What is it?\")\" drawn in tree (location=(7.7, 2.9), show_marker=False)","t_h1":"a Point [gray] labelled \"upright(\"The Project\")\" drawn in tree (location=(2.3, 2.9), show_marker=False)","t_p":"a Point [gray] labelled \"upright(\"a paragraph\")\" drawn in tree (location=(5.0, 2.9), show_marker=False)","tree":"a Figure (x_range=(0.0, 10.0), y_range=(0.0, 8.0))","webgraph":"a Figure (x_range=(0.0, 10.0), y_range=(0.0, 8.0))"},"beats":[{"start":386.7746041666667,"say":"The reply arrived as a stream of characters. Here is what those characters actually looked like, and this is the third invention: a format that carries the shape of a document along with its words.","live":[],"does":[[386.7746041666667,"head_markup is shown on the screen, written out."],[391.81360416666666,"src_1 is shown on the screen, written out."]]},{"start":399.87860416666666,"say":"The first line says something quite specific. It says: the words The Project are a heading. Not big text, not bold text. A heading.","live":["src_1","head_markup"],"does":[[405.67160416666667,"src_1 (the \"upright(\"<h1>\")\" part) is indicated — a transient flash."]]},{"start":411.2986041666667,"say":"These two say: this run of words is a paragraph. The brackets are the labels, and whatever sits between them is the content.","live":null,"does":[[411.9256041666667,"src_2 is shown on the screen, written out."],[412.52875710784315,"src_3 is shown on the screen, written out."],[413.9926041666667,"src_2 (the \"upright(\"<p>\")\" part) is indicated — a transient flash."]]},{"start":420.12410416666665,"say":"And this last one is the line the whole Web turns on. It says: these words are a link, and the thing they point at is that address there.","live":["src_1","src_2","src_3","head_markup"],"does":[[420.7456041666667,"src_4 is shown on the screen, written out."],[427.39760416666667,"src_4 (the \"upright(\"href=whatis.html\")\" part) is indicated — a transient flash."]]},{"start":429.0776041666667,"say":"That is HTML. A document with labels on its parts, saying what each piece is and saying nothing at all about how it should look.","live":["src_1","src_2","src_3","src_4","head_markup"],"does":[[432.0966041666667,"defn_html is shown on the screen, written out."],[437.6226041666667,"src_1 moves to a new place on the board."],[437.6226041666667,"src_2 moves to a new place on the board."],[437.6226041666667,"src_3 moves to a new place on the board."],[437.6226041666667,"src_4 moves to a new place on the board."],[437.6226041666667,"defn_html is hidden from the screen — left the board."],[437.6226041666667,"head_markup is hidden from the screen — left the board."]]},{"start":438.22260416666666,"say":"Those labels nest inside each other, so what they really describe is a tree. The whole document is one element with everything else inside it.","live":["src_1","src_2","src_3","src_4"],"does":[[438.22260416666666,"head_tree is shown on the screen, written out."],[442.0656041666667,"tree is shown on the screen, written out."],[444.56160416666665,"n_html is shown on the screen, written out."],[444.8722486272025,"n_body is shown on the screen, written out."],[445.43610077650146,"e_hb is shown on the screen, written out."]]},{"start":447.4141041666667,"say":"The heading, the paragraph and the link are three children of the body, side by side, in the order they were written.","live":["src_1","src_2","src_3","src_4","tree","head_tree","n_html","n_body","e_hb"],"does":[[447.9016041666667,"n_h1 is shown on the screen, written out."],[447.9016041666667,"e_bh is shown on the screen, written out."],[448.5866041666667,"n_p is shown on the screen, written out."],[448.5866041666667,"e_bp is shown on the screen, written out."],[449.6666041666667,"n_a is shown on the screen, written out."],[449.6666041666667,"e_ba is shown on the screen, written out."]]},{"start":455.0961041666667,"say":"And the words themselves hang underneath, as the content of each one.","live":["src_1","src_2","src_3","src_4","tree","head_tree","n_html","n_body","e_hb","n_h1","e_bh","n_p","e_bp","n_a","e_ba"],"does":[[455.73460416666666,"t_h1 is shown on the screen, written out."],[455.9652310176045,"t_p is shown on the screen, written out."],[456.4546943578181,"t_a is shown on the screen, written out."],[457.99860416666667,"e_th is shown on the screen, written out."],[458.10376828315236,"e_tp is shown on the screen, written out."],[458.3140965161237,"e_ta is shown on the screen, written out."]]},{"start":460.2816041666667,"say":"Now look at what is hanging off the link instead. Not a file on this machine. A URL, exactly the sort of string we spent the last few minutes taking apart.","live":["src_1","src_2","src_3","src_4","tree","head_tree","n_html","n_body","e_hb","n_h1","e_bh","n_p","e_bp","n_a","e_ba","t_h1","t_p","t_a","e_th","e_tp","e_ta"],"does":[[462.25560416666667,"n_a is indicated — a transient flash."],[466.53960416666666,"href_chip is shown on the screen, written out."]]},{"start":471.37710416666664,"say":"And that is the join. The naming scheme goes inside the document, which means a document can point at any other document, on any machine anywhere that answers.","live":["src_1","src_2","src_3","src_4","tree","head_tree","n_html","n_body","e_hb","n_h1","e_bh","n_p","e_bp","n_a","e_ba","t_h1","t_p","t_a","e_th","e_tp","e_ta","href_chip"],"does":[[473.37360416666667,"href_chip is indicated — a transient flash."],[481.3971041666667,"tree moves to a new place on the board."],[481.3971041666667,"head_tree is hidden from the screen — left the board."],[481.3971041666667,"src_1 is hidden from the screen — left the board."],[481.3971041666667,"src_2 is hidden from the screen — left the board."],[481.3971041666667,"src_3 is hidden from the screen — left the board."],[481.3971041666667,"src_4 is hidden from the screen — left the board."]]},{"start":481.99710416666665,"say":"So take that one step further. Here is a document at CERN, and here is another on a different machine altogether, in a different country.","live":["tree","n_html","n_body","e_hb","n_h1","e_bh","n_p","e_bp","n_a","e_ba","t_h1","t_p","t_a","e_th","e_tp","e_ta","href_chip"],"does":[[481.99710416666665,"head_links is shown on the screen, written out."],[481.99710416666665,"lbl_one is shown on the screen, written out."],[481.99710416666665,"lbl_many is shown on the screen, written out."],[485.21260416666667,"webgraph is shown on the screen, written out."],[485.8166041666667,"d_cern is shown on the screen, written out."],[487.6856041666667,"d_nist is shown on the screen, written out."]]},{"start":491.30410416666666,"say":"A link from the first to the second is nothing but a URL sitting in the first one's markup. No agreement between the two owners. No central register. No permission asked.","live":["tree","n_html","n_body","e_hb","n_h1","e_bh","n_p","e_bp","n_a","e_ba","t_h1","t_p","t_a","e_th","e_tp","e_ta","href_chip","lbl_one","lbl_many","webgraph","head_links","d_cern","d_nist"],"does":[[491.87360416666667,"link_cn is shown on the screen, written out."]]},{"start":502.5391041666667,"say":"And it works in every direction, from any document to any other, which is why what grew out of this is called a web and not a library.","live":["tree","n_html","n_body","e_hb","n_h1","e_bh","n_p","e_bp","n_a","e_ba","t_h1","t_p","t_a","e_th","e_tp","e_ta","href_chip","lbl_one","lbl_many","webgraph","head_links","d_cern","d_nist","link_cn"],"does":[[503.8516041666667,"d_slac is shown on the screen, written out."],[504.14108488538545,"d_home is shown on the screen, written out."],[505.6976041666667,"link_ns is shown on the screen, written out."],[506.0737394261911,"link_sh is shown on the screen, written out."],[506.82144133533626,"link_hc is shown on the screen, written out."]]},{"start":511.3941041666667,"say":"One format, with other people's addresses allowed to live inside it. That is what hypertext means, and it is the reason this thing spread the way it did.","live":["tree","n_html","n_body","e_hb","n_h1","e_bh","n_p","e_bp","n_a","e_ba","t_h1","t_p","t_a","e_th","e_tp","e_ta","href_chip","lbl_one","lbl_many","webgraph","head_links","d_cern","d_nist","link_cn","d_slac","d_home","link_ns","link_sh","link_hc"],"does":[[514.4246041666667,"href_chip is indicated — a transient flash."],[516.2236041666667,"link_cn is indicated — a transient flash."],[520.3951875,"head_links is hidden from the screen — left the board."],[520.3951875,"lbl_many is hidden from the screen — left the board."],[520.3951875,"lbl_one is hidden from the screen — left the board."],[520.3951875,"tree is hidden from the screen — left the board."],[520.3951875,"n_html is hidden from the screen — tree left the board."],[520.3951875,"n_body is hidden from the screen — tree left the board."],[520.3951875,"e_hb is hidden from the screen — tree left the board."],[520.3951875,"n_h1 is hidden from the screen — tree left the board."],[520.3951875,"e_bh is hidden from the screen — tree left the board."],[520.3951875,"n_p is hidden from the screen — tree left the board."],[520.3951875,"e_bp is hidden from the screen — tree left the board."],[520.3951875,"n_a is hidden from the screen — tree left the board."],[520.3951875,"e_ba is hidden from the screen — tree left the board."],[520.3951875,"t_h1 is hidden from the screen — tree left the board."],[520.3951875,"t_p is hidden from the screen — tree left the board."],[520.3951875,"t_a is hidden from the screen — tree left the board."],[520.3951875,"e_th is hidden from the screen — tree left the board."],[520.3951875,"e_tp is hidden from the screen — tree left the board."],[520.3951875,"e_ta is hidden from the screen — tree left the board."],[520.3951875,"href_chip is hidden from the screen — tree left the board."],[520.3951875,"webgraph is hidden from the screen — left the board."],[520.3951875,"d_cern is hidden from the screen — webgraph left the board."],[520.3951875,"d_nist is hidden from the screen — webgraph left the board."],[520.3951875,"link_cn is hidden from the screen — webgraph left the board."],[520.3951875,"d_slac is hidden from the screen — webgraph left the board."],[520.3951875,"d_home is hidden from the screen — webgraph left the board."],[520.3951875,"link_ns is hidden from the screen — webgraph left the board."],[520.3951875,"link_sh is hidden from the screen — webgraph left the board."],[520.3951875,"link_hc is hidden from the screen — webgraph left the board."]]}]},{"title":"The Browser: A Rendering Engine on Every Desk","start":521.4368541666666,"end":685.3032083333333,"objects":{"addr_chip":"a Math [gray] that says \"$upright(\"http://info.cern.ch/hypertext/theproject.html\")$\" drawn in page","box_a":"a Polygon [yellow] drawn in page (vertices=((1.2, 2.6), (3.6, 2.6), (3.6, 3.3), (1.2, 3.3)), filled=False, dashed=True)","box_h":"a Polygon [yellow] drawn in page (vertices=((1.2, 5.35), (8.8, 5.35), (8.8, 6.15), (1.2, 6.15)), filled=False, dashed=True)","box_p":"a Polygon [yellow] drawn in page (vertices=((1.2, 3.6), (8.8, 3.6), (8.8, 5.0), (1.2, 5.0)), filled=False, dashed=True)","chrome":"a Line [gray] drawn in page (start=(0.6, 6.6), end=(9.4, 6.6))","claim":"a Tex [text] that says \"One protocol. One document format. One program, already installed.\"","engine":"a Table [text] that says \"Stage Takes Produces parse characters a tree of elements style the tree sizes, weights, colours layout styled tree boxes, with positions paint boxes pixels on your screen\" (rows=(('Stage', 'Takes', 'Produces'), ('parse', 'characters', 'a tre…, header=True)","head_click":"a Heading that says \"The Loop That Closes\"","head_engine":"a Heading that says \"From Characters to Pixels\"","head_text":"a Math [text] that says \"$upright(\"The Project\")$\" drawn in page","head_why":"a Heading that says \"Why This Architecture Won\"","link_rule":"a Line [blue] drawn in page (start=(1.4, 2.75), end=(3.2, 2.75))","link_text":"a Math [blue] that says \"$upright(\"What is it?\")$\" drawn in page","p_line_1":"a Math [text] that says \"$upright(\"Links can be made to any\")$\" drawn in page","p_line_2":"a Math [text] that says \"$upright(\"information, anywhere.\")$\" drawn in page","page":"a Figure (x_range=(0.0, 10.0), y_range=(0.0, 8.0))","step_1":"a Text [text] that says \"1. A URL, from the bar at the top or from a link.\"","step_2":"a Text [text] that says \"2. A request, over the cables, to the machine that name points at.\"","step_3":"a Text [text] that says \"3. A reply, saying what it carries, and then the document.\"","step_4":"a Text [text] that says \"4. Parse, style, layout, paint, on your own machine.\"","step_5":"a Text [text] that says \"5. A click, which produces another URL. Back to line one.\"","style_chip":"a Math [green] that says \"$upright(\"h1: large and bold. a: blue, underlined.\")$\" drawn in page","why_note":"a Panel that says \"The Web is not a network and not a program. It is three published agreements, a URL, HTTP and HTML, and one piece of software on every machine that keeps them.\"","window":"a Polygon [gray] drawn in page (vertices=((0.6, 0.6), (9.4, 0.6), (9.4, 7.4), (0.6, 7.4)), filled=False)"},"beats":[{"start":521.4368541666666,"say":"So a stream of characters arrives on your own machine. Everything from here on happens locally, inside a program you installed once, and it happens in four stages.","live":[],"does":[[521.4368541666666,"head_engine is shown on the screen, written out."],[523.5038541666667,"page is shown on the screen, written out."],[525.8488541666667,"window is shown on the screen, written out."],[526.1648287270857,"chrome is shown on the screen, written out."],[527.1138541666667,"addr_chip is shown on the screen, written out."],[529.4938541666667,"page moves to a new place on the board."],[529.4938541666667,"engine is shown on the screen, written out."]]},{"start":531.1273541666667,"say":"The first stage is parsing. Characters go in, and the tree we just drew comes out. That is the only stage in the whole engine that cares about angle brackets.","live":["page","head_engine","window","chrome","addr_chip"],"does":[[532.0798541666667,"engine is shown on the screen, written out."],[534.3778541666667,"engine (the \"row=2\" part) is indicated — a transient flash."]]},{"start":541.3753541666666,"say":"The second stage is style. For every element in that tree the engine works out how it should look: how big, how heavy, what colour. The heading is set large and bold. The link goes blue and underlined.","live":null,"does":[[542.8498541666667,"engine is shown on the screen, written out."],[551.7548541666666,"style_chip is shown on the screen, written out."]]},{"start":555.9893541666667,"say":"The third stage is the one that makes this a graphical interface rather than a printout. Layout. Given the width of your window, where does every one of those boxes actually go?","live":["page","head_engine","window","chrome","addr_chip","style_chip"],"does":[[561.7828541666667,"engine is shown on the screen, written out."],[563.2448541666666,"box_h is shown on the screen, written out."],[563.4657149654258,"box_p is shown on the screen, written out."],[563.965425706023,"box_a is shown on the screen, written out."]]},{"start":567.9433541666666,"say":"The heading takes a band across the top. The paragraph takes as many lines as it needs at this width. The link takes a small box of its own. None of that was decided by the author: it was computed here, for your window.","live":["page","head_engine","window","chrome","addr_chip","style_chip","box_h","box_p","box_a"],"does":[[569.1618541666667,"box_h is indicated — a transient flash."],[572.2738541666666,"box_p is indicated — a transient flash."],[575.0018541666667,"box_a is indicated — a transient flash."]]},{"start":582.1963541666667,"say":"And the fourth stage is painting. Only now does anything appear on the glass: the boxes are filled in with actual letters, in the styles that were settled two stages ago.","live":null,"does":[[583.6828541666666,"engine is shown on the screen, written out."],[586.3298541666667,"style_chip is hidden from the screen."],[586.3298541666667,"box_h is hidden from the screen."],[586.3298541666667,"box_p is hidden from the screen."],[586.3298541666667,"box_a is hidden from the screen."],[590.0908541666666,"head_text is shown on the screen, written out."],[590.3757583039018,"p_line_1 is shown on the screen, written out."],[590.9019641565758,"p_line_2 is shown on the screen, written out."],[591.1128541666667,"link_text is shown on the screen, written out."],[591.3416101130412,"link_rule is shown on the screen, written out."]]},{"start":594.1858541666667,"say":"That is a rendering engine. Four stages, in a program on your own desk, and the same four stages for every document on the Web, whoever wrote it and whatever it says.","live":["page","head_engine","window","chrome","addr_chip","head_text","p_line_1","p_line_2","link_text","link_rule"],"does":[[596.6938541666666,"engine (the \"column=1\" part) is indicated — a transient flash."],[605.7028541666666,"page moves to a new place on the board."],[605.7028541666666,"engine is hidden from the screen — left the board."],[605.7028541666666,"head_engine is hidden from the screen — left the board."]]},{"start":606.9028541666667,"say":"Now the part that makes it feel alive. Those blue words are still an element in the tree, and the engine has not forgotten which box on the screen belongs to which element.","live":["page","window","chrome","addr_chip","head_text","p_line_1","p_line_2","link_text","link_rule"],"does":[[606.9028541666667,"head_click is shown on the screen, written out."],[610.1658541666667,"link_text is indicated — a transient flash."],[614.1468541666667,"box_a is shown on the screen, written out."]]},{"start":617.2548541666666,"say":"So here is the whole loop, in five lines. It begins with a URL: either one you typed into the bar, or one that was sitting in a link you clicked.","live":["page","window","chrome","addr_chip","box_a","head_text","p_line_1","p_line_2","link_text","link_rule","head_click"],"does":[[621.2018541666666,"step_1 is shown on the screen, written out."],[623.5938541666667,"addr_chip is indicated — a transient flash."]]},{"start":627.0383541666666,"say":"The name gets looked up, a request goes out over the Internet, and a reply comes back saying what it carries before it carries it.","live":["page","window","chrome","addr_chip","box_a","head_text","p_line_1","p_line_2","link_text","link_rule","step_1","head_click"],"does":[[629.0588541666666,"step_2 is shown on the screen, written out."],[631.3918541666667,"step_3 is shown on the screen, written out."]]},{"start":635.3708541666666,"say":"Your own machine parses it, styles it, lays it out, and paints it. Then you click something, which hands the engine another URL, and the loop starts again from the top.","live":["page","window","chrome","addr_chip","box_a","head_text","p_line_1","p_line_2","link_text","link_rule","step_1","step_2","step_3","head_click"],"does":[[636.4158541666667,"step_4 is shown on the screen, written out."],[640.6418541666667,"step_5 is shown on the screen, written out."],[640.9318541666667,"link_text is indicated — a transient flash."],[646.2148541666667,"page moves to a new place on the board."],[646.2148541666667,"head_click is hidden from the screen — left the board."],[646.2148541666667,"step_1 is hidden from the screen — left the board."],[646.2148541666667,"step_2 is hidden from the screen — left the board."],[646.2148541666667,"step_3 is hidden from the screen — left the board."],[646.2148541666667,"step_4 is hidden from the screen — left the board."],[646.2148541666667,"step_5 is hidden from the screen — left the board."]]},{"start":646.8148541666667,"say":"And now the thing that is easy to miss. No new program had to be written for that document. The browser was written once, and installed once, and it can display a page from a machine that was switched on this morning.","live":["page","window","chrome","addr_chip","box_a","head_text","p_line_1","p_line_2","link_text","link_rule"],"does":[[646.8148541666667,"head_why is shown on the screen, written out."],[654.0708541666667,"claim is shown on the screen, written out."]]},{"start":660.4988541666667,"say":"That is why the protocol had to be published instead of sold, and why the format had to be dull, and textual, and boring. The agreement is the invention. The cables were already there.","live":["page","window","chrome","addr_chip","box_a","head_text","p_line_1","p_line_2","link_text","link_rule","claim","head_why"],"does":[[662.2868541666667,"why_note is shown on the screen, written out."],[669.6008541666666,"A box is drawn around claim."]]},{"start":672.9053541666667,"say":"A name for anything. A conversation for fetching it. A format that carries its own structure. And a rendering engine on every desk. That is the World Wide Web.","live":["page","window","chrome","addr_chip","box_a","head_text","p_line_1","p_line_2","link_text","link_rule","claim","why_note","head_why"],"does":[[673.2188541666667,"addr_chip is indicated — a transient flash."],[680.7888541666666,"link_text is indicated — a transient flash."],[684.2615416666667,"claim is hidden from the screen — left the board."],[684.2615416666667,"head_why is hidden from the screen — left the board."],[684.2615416666667,"page is hidden from the screen — left the board."],[684.2615416666667,"window is hidden from the screen — page left the board."],[684.2615416666667,"chrome is hidden from the screen — page left the board."],[684.2615416666667,"addr_chip is hidden from the screen — page left the board."],[684.2615416666667,"box_a is hidden from the screen — page left the board."],[684.2615416666667,"head_text is hidden from the screen — page left the board."],[684.2615416666667,"p_line_1 is hidden from the screen — page left the board."],[684.2615416666667,"p_line_2 is hidden from the screen — page left the board."],[684.2615416666667,"link_text is hidden from the screen — page left the board."],[684.2615416666667,"link_rule is hidden from the screen — page left the board."],[684.2615416666667,"why_note is hidden from the screen — left the board."]]}]}]},"durationSeconds":685,"chapters":[{"title":"Wires, and What Rides on Them","startSeconds":0,"narration":"In nineteen eighty-nine the cables were already there. Computers had been sending each other messages for twenty years. What was missing was not wire, and it was not speed. What was missing was an agreement about what to send. So start underneath the Web, with the thing it was built on top of. The Internet is machines, and links between machines, and very little else. Give one of them the address of another, and the network's whole job is to carry a bundle of bytes from this machine, through whatever sits in the middle, and on to that one at the far end. And it does not much care how. Cut one of those links and the same bytes arrive along the other path instead. Nothing in this picture knows what the bytes actually are. So there are two inventions here, and it is worth keeping them apart. The lower one moves packets between addresses, and by the late eighties it was already twenty years old. The Web is the upper one. It moves documents, and links between documents, and to exist at all it needed three new agreements and one new program. The picture I would keep in your head is this. The Internet is the road network. The Web is the postal system that runs on it: envelopes, addresses written the same way everywhere, and somebody at the door who can read a letter. So the Web needed four pieces, and I want all four named now, because everything after this is those four working together. The first is a way of naming a document, any document anywhere, in one line of text. The second is a protocol: a short fixed conversation for asking one machine for one of those documents, and getting it back. The third is a format for the document itself, so that a heading arrives labelled as a heading, and a link arrives labelled as a link. And the fourth is a program on your own machine that speaks the protocol, reads the format, and paints the result on your screen as something you can click. Four pieces, then, and one loop that ties them together: a name, a request, a reply, and a picture on the glass in front of you. Following that loop once, all the way round, is what the rest of this lecture does."},{"title":"One Name for Every Document","startSeconds":134.1406458333333,"narration":"A document is no use to anybody if there is no way to say where it is. So the first invention is a way of writing that down, and here is one. This is the address of the first web page there ever was. Read it in three parts. The front of it says which protocol to speak. The middle says which machine to ask. And all the rest says which document you want from that machine. That is all a URL is. One string, answering three questions at once: which protocol, which machine, which document. Set the three pieces out side by side. The first is the scheme, and in this address the scheme is HTTP. It settles which protocol the two machines are going to speak. The second is the host. It is a name, and it names one particular machine, in this case a computer sitting in a laboratory in Switzerland. And the third is the path. Everything after the host is the server's own private business: which of its documents you are asking for. Notice what the string does not contain. It does not say how to find that machine, and it does not say how to ask. Naming is one job. Doing is another. So how does a name become a machine? It gets looked up. The browser hands the name to a separate service, older than the Web, whose whole job is turning names into numbers. A name goes in. An address comes out. And an address, unlike a name, is the thing the Internet actually understands. With that number in hand, the network does what we already watched it do. It finds a route to one particular machine, and now there is somewhere to send a question. And notice what we have not done. We have found a machine. We have not asked it for anything, and the path is still sitting in our hand, unused. That is the next piece."},{"title":"The Conversation: HTTP","startSeconds":251.38170833333334,"narration":"We have found the machine. Now we have to ask it for something, and this is the piece that had to be invented from nothing. Not the wire. The words that go over it. The browser opens a connection to that machine and sends a request. A request is text, and it is almost embarrassingly short. One line saying what it wants: the word GET, then the path we were holding, then which version of the protocol it is speaking. And one line saying which host it thinks it is talking to, because a single machine can answer for many different names. The answer comes back the other way, and it has the same shape. A status line first: the protocol again, then a number, then a word. Two hundred means here it is. Then a line that says what kind of thing is coming. This one is text, in HTML. That single line is why the browser knows to draw the reply instead of saving it or playing it. And then, after a blank line, the document itself, poured down the wire as a stream of characters. That is HTTP. One question, one answer, and a note saying what the answer is made of. Three things about that exchange are worth pinning down. The first is that the client always speaks first. A server sits there and says nothing at all until it is asked. The second is that the reply describes itself. The same protocol carries a page, a picture or a sound file, and that one content type line is how the browser knows which it has been given. And the third is that once the answer is delivered, the exchange is finished. The server keeps nothing. Look: the whole conversation is gone, and nothing about you was left behind. So if you want a second document, you say the whole thing again from the beginning. A new request. The host line again. And the server treats you as a complete stranger. Same conversation, a different path, and a different document comes back down the wire. One question, one answer, written down once, and any two programs on Earth can have that conversation without ever having met."},{"title":"The Document: HTML","startSeconds":386.7746041666667,"narration":"The reply arrived as a stream of characters. Here is what those characters actually looked like, and this is the third invention: a format that carries the shape of a document along with its words. The first line says something quite specific. It says: the words The Project are a heading. Not big text, not bold text. A heading. These two say: this run of words is a paragraph. The brackets are the labels, and whatever sits between them is the content. And this last one is the line the whole Web turns on. It says: these words are a link, and the thing they point at is that address there. That is HTML. A document with labels on its parts, saying what each piece is and saying nothing at all about how it should look. Those labels nest inside each other, so what they really describe is a tree. The whole document is one element with everything else inside it. The heading, the paragraph and the link are three children of the body, side by side, in the order they were written. And the words themselves hang underneath, as the content of each one. Now look at what is hanging off the link instead. Not a file on this machine. A URL, exactly the sort of string we spent the last few minutes taking apart. And that is the join. The naming scheme goes inside the document, which means a document can point at any other document, on any machine anywhere that answers. So take that one step further. Here is a document at CERN, and here is another on a different machine altogether, in a different country. A link from the first to the second is nothing but a URL sitting in the first one's markup. No agreement between the two owners. No central register. No permission asked. And it works in every direction, from any document to any other, which is why what grew out of this is called a web and not a library. One format, with other people's addresses allowed to live inside it. That is what hypertext means, and it is the reason this thing spread the way it did."},{"title":"The Browser: A Rendering Engine on Every Desk","startSeconds":521.4368541666666,"narration":"So a stream of characters arrives on your own machine. Everything from here on happens locally, inside a program you installed once, and it happens in four stages. The first stage is parsing. Characters go in, and the tree we just drew comes out. That is the only stage in the whole engine that cares about angle brackets. The second stage is style. For every element in that tree the engine works out how it should look: how big, how heavy, what colour. The heading is set large and bold. The link goes blue and underlined. The third stage is the one that makes this a graphical interface rather than a printout. Layout. Given the width of your window, where does every one of those boxes actually go? The heading takes a band across the top. The paragraph takes as many lines as it needs at this width. The link takes a small box of its own. None of that was decided by the author: it was computed here, for your window. And the fourth stage is painting. Only now does anything appear on the glass: the boxes are filled in with actual letters, in the styles that were settled two stages ago. That is a rendering engine. Four stages, in a program on your own desk, and the same four stages for every document on the Web, whoever wrote it and whatever it says. Now the part that makes it feel alive. Those blue words are still an element in the tree, and the engine has not forgotten which box on the screen belongs to which element. So here is the whole loop, in five lines. It begins with a URL: either one you typed into the bar, or one that was sitting in a link you clicked. The name gets looked up, a request goes out over the Internet, and a reply comes back saying what it carries before it carries it. Your own machine parses it, styles it, lays it out, and paints it. Then you click something, which hands the engine another URL, and the loop starts again from the top. And now the thing that is easy to miss. No new program had to be written for that document. The browser was written once, and installed once, and it can display a page from a machine that was switched on this morning. That is why the protocol had to be published instead of sold, and why the format had to be dull, and textual, and boring. The agreement is the invention. The cables were already there. A name for anything. A conversation for fetching it. A format that carries its own structure. And a rendering engine on every desk. That is the World Wide Web."}]}}