# How the World Wide Web Was Born: Protocols, Hypertext, and the Browser > 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. - Canonical watch page: [How the World Wide Web Was Born: Protocols, Hypertext, and the Browser](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser) - Publisher: [Academa, Inc.](https://academa.ai) - Subject: Computer Science - Published: 2026-08-30T20:13:11.561Z - Updated: 2026-08-30T20:13:11.561Z - Duration: PT685S (11 minutes 25 seconds) - Chapters: 5 - Views: 0 - Language: en-US - Access: Free - Video stream: [HLS content](https://academa.ai/media/l/01M1A3F9BWY8VWPJA47WXGZEC4/0/dark/master.m3u8) - Audiovisual record: [Semantic JSON](https://academa.ai/media/l/01M1A3F9BWY8VWPJA47WXGZEC4/0/semantic.json) - Thumbnail: [Image](https://academa.ai/media/l/01M1A3F9BWY8VWPJA47WXGZEC4/0/dark/poster.jpg) ## Description Follow one click round the Web: URLs name documents, HTTP fetches them, HTML carries structure, and your browser paints the result. ## Chapters - [00:00–02:14.141 · Wires, and What Rides on Them](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=0) - [02:14.141–04:11.382 · One Name for Every Document](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=134.1406458333333) - [04:11.382–06:26.775 · The Conversation: HTTP](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=251.38170833333334) - [06:26.775–08:41.437 · The Document: HTML](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=386.7746041666667) - [08:41.437–11:25 · The Browser: A Rendering Engine on Every Desk](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=521.4368541666666) ## Transcript ### [00:00 · Wires, and What Rides on Them](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=0) 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. ### [02:14.141 · One Name for Every Document](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=134.1406458333333) 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. ### [04:11.382 · The Conversation: HTTP](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=251.38170833333334) 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. ### [06:26.775 · The Document: HTML](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=386.7746041666667) 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. ### [08:41.437 · The Browser: A Rendering Engine on Every Desk](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=521.4368541666666) 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. ## About Academa, Inc. Academa makes technical knowledge easier to understand through visual lectures and lets learners request new lecture videos on the topics they need. ## Complete audiovisual record Immutable source: [semantic.json](https://academa.ai/media/l/01M1A3F9BWY8VWPJA47WXGZEC4/0/semantic.json) Record version: 1. Render attempt: 0. ### How to read this timeline Each scene owns its object identifiers. A beat's board is the complete board when listed, empty when marked empty, and unchanged from the nearest earlier listed board in the same scene when marked unchanged. Action times are absolute positions in the published video. ### Scene 1: [Wires, and What Rides on Them](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=0) Span: 00:00–02:14.141 (0s–134.1406458333333s). #### 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=(\, \), 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 ##### [00:00](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=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. Board: Empty. Actions: - [00:00](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=0): card is shown on the screen, written out. - [00:1.213](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=1.213440796473628): card: enter:write-left-to-right. - [00:13.467](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=13.4675): card is hidden from the screen — left the board. ##### [00:14.667](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=14.667499999999999) Narration: 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. Board: Unchanged from the preceding beat in this scene. Actions: - [00:14.667](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=14.667499999999999): head\_wires is shown on the screen, written out. - [00:15.596](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=15.596): net is shown on the screen, written out. - [00:20.066](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=20.066): client is shown on the screen, written out. - [00:20.699](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=20.699020134228185): server is shown on the screen, written out. - [00:21.192](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=21.192): r1 is shown on the screen, written out. - [00:21.307](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=21.307196548418023): r2 is shown on the screen, written out. - [00:21.422](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=21.42239309683605): r3 is shown on the screen, written out. - [00:21.459](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=21.459): link\_1 is shown on the screen, written out. - [00:21.534](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=21.534071907957813): link\_2 is shown on the screen, written out. - [00:21.609](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=21.609143815915626): link\_3 is shown on the screen, written out. - [00:21.684](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=21.684215723873443): link\_4 is shown on the screen, written out. - [00:21.759](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=21.759287631831253): link\_5 is shown on the screen, written out. ##### [00:24.369](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=24.3695) Narration: 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. Board: net — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_wires — a Heading that says "The Cables Were Already There"; client — a Point \[blue\] labelled "upright("a personal computer")" drawn in net (location=(1.2, 6.3), marker\_radius=0.2); server — a Point \[green\] labelled "upright("another computer")" drawn in net (location=(8.6, 4.2), marker\_radius=0.2); 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); 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)) Actions: - [00:25.484](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=25.483999999999995): packet is shown on the screen, written out. - [00:27.945](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=27.944999999999997): packet is redrawn as the numbers it depends on change. - [00:27.945](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=27.944999999999997): px ticks to 3.4. - [00:27.945](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=27.944999999999997): py ticks to 4.9. - [00:31.312](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=31.311999999999998): packet is redrawn as the numbers it depends on change. - [00:31.312](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=31.311999999999998): px ticks to 5.8. - [00:31.312](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=31.311999999999998): py ticks to 6.6. - [00:33.135](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=33.135): packet is redrawn as the numbers it depends on change. - [00:33.135](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=33.135): px ticks to 8.6. - [00:33.135](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=33.135): py ticks to 4.2. ##### [00:34.617](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=34.617) Narration: 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. Board: net — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_wires — a Heading that says "The Cables Were Already There"; client — a Point \[blue\] labelled "upright("a personal computer")" drawn in net (location=(1.2, 6.3), marker\_radius=0.2); server — a Point \[green\] labelled "upright("another computer")" drawn in net (location=(8.6, 4.2), marker\_radius=0.2); 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); 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)); packet — a Point \[yellow\] labelled "upright("bytes")" drawn in net (location=(\, \), marker\_radius=0.15) Actions: - [00:38.982](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=38.982): The segment (3.4, 4.9) to (5.2, 2.6) in net is lit up. - [00:39.865](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=39.864999999999995): The segment (5.2, 2.6) to (8.6, 4.2) in net is lit up. - [00:42.767](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=42.766999999999996): packet is indicated — a transient flash. - [00:44.427](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=44.427499999999995): net moves to a new place on the board. - [00:44.427](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=44.427499999999995): head\_wires is hidden from the screen — left the board. - [00:44.427](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=44.427499999999995): net: retire a lit segment (unemphasize\_line). - [00:44.427](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=44.427499999999995): net: retire a lit segment (unemphasize\_line). ##### [00:45.027](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=45.027499999999996) Narration: 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. Board: net — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); client — a Point \[blue\] labelled "upright("a personal computer")" drawn in net (location=(1.2, 6.3), marker\_radius=0.2); server — a Point \[green\] labelled "upright("another computer")" drawn in net (location=(8.6, 4.2), marker\_radius=0.2); 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); 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)); packet — a Point \[yellow\] labelled "upright("bytes")" drawn in net (location=(\, \), marker\_radius=0.15) Actions: - [00:45.027](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=45.027499999999996): head\_layers is shown on the screen, written out. - [00:45.91](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=45.90999999999999): layers is shown on the screen, written out. - [00:49.892](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=49.89199999999999): layers is shown on the screen, written out. ##### [00:55.507](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=55.50749999999999) Narration: 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. Board: net — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); client — a Point \[blue\] labelled "upright("a personal computer")" drawn in net (location=(1.2, 6.3), marker\_radius=0.2); server — a Point \[green\] labelled "upright("another computer")" drawn in net (location=(8.6, 4.2), marker\_radius=0.2); 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); 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)); packet — a Point \[yellow\] labelled "upright("bytes")" drawn in net (location=(\, \), marker\_radius=0.15); head\_layers — a Heading that says "Two Different Inventions" Actions: - [00:56.587](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=56.58699999999999): layers is shown on the screen, written out. - [00:58.096](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=58.09599999999999): layers (the "row=3" part) is emphasized. - [01:3.75](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=63.74999999999999): layers (the "row=3" part) is no longer emphasized. ##### [01:5.279](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=65.279) Narration: 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. Board: Unchanged from the preceding beat in this scene. Actions: - [01:9.075](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=69.07499999999999): layers (the "row=2" part) is indicated — a transient flash. - [01:10.944](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=70.94399999999999): layers (the "row=3" part) is indicated — a transient flash. - [01:18.828](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=78.8275): head\_layers is hidden from the screen — left the board. - [01:18.828](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=78.8275): layers is hidden from the screen — left the board. ##### [01:19.427](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=79.4275) Narration: 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. Board: net — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); client — a Point \[blue\] labelled "upright("a personal computer")" drawn in net (location=(1.2, 6.3), marker\_radius=0.2); server — a Point \[green\] labelled "upright("another computer")" drawn in net (location=(8.6, 4.2), marker\_radius=0.2); 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); 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)); packet — a Point \[yellow\] labelled "upright("bytes")" drawn in net (location=(\, \), marker\_radius=0.15) Actions: - [01:19.427](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=79.4275): head\_pieces is shown on the screen, written out. - [01:27.949](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=87.949): piece\_1 is shown on the screen, written out. - [01:30.144](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=90.14399999999999): server is indicated — a transient flash. ##### [01:32.962](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=92.9615) Narration: The second is a protocol: a short fixed conversation for asking one machine for one of those documents, and getting it back. Board: net — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); client — a Point \[blue\] labelled "upright("a personal computer")" drawn in net (location=(1.2, 6.3), marker\_radius=0.2); server — a Point \[green\] labelled "upright("another computer")" drawn in net (location=(8.6, 4.2), marker\_radius=0.2); 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); 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)); packet — a Point \[yellow\] labelled "upright("bytes")" drawn in net (location=(\, \), marker\_radius=0.15); piece\_1 — a Text \[text\] that says "1. A URL: one line of text that names a document."; head\_pieces — a Heading that says "What the Web Added" Actions: - [01:33.994](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=93.994): piece\_2 is shown on the screen, written out. - [01:36.015](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=96.01500000000001): The segment (1.2, 6.3) to (3.4, 4.9) in net is lit up. - [01:40.356](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=100.3565): net: retire a lit segment (unemphasize\_line). ##### [01:40.957](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=100.9565) Narration: 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. Board: net — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); client — a Point \[blue\] labelled "upright("a personal computer")" drawn in net (location=(1.2, 6.3), marker\_radius=0.2); server — a Point \[green\] labelled "upright("another computer")" drawn in net (location=(8.6, 4.2), marker\_radius=0.2); 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); 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)); packet — a Point \[yellow\] labelled "upright("bytes")" drawn in net (location=(\, \), 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."; head\_pieces — a Heading that says "What the Web Added" Actions: - [01:42.095](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=102.095): piece\_3 is shown on the screen, written out. - [01:42.861](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=102.861): packet is indicated — a transient flash. ##### [01:49.521](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=109.521) Narration: 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. Board: net — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); client — a Point \[blue\] labelled "upright("a personal computer")" drawn in net (location=(1.2, 6.3), marker\_radius=0.2); server — a Point \[green\] labelled "upright("another computer")" drawn in net (location=(8.6, 4.2), marker\_radius=0.2); 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); 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)); packet — a Point \[yellow\] labelled "upright("bytes")" drawn in net (location=(\, \), 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."; head\_pieces — a Heading that says "What the Web Added" Actions: - [01:50.636](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=110.636): piece\_4 is shown on the screen, written out. - [01:51.182](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=111.18199999999999): client is indicated — a transient flash. ##### [01:58.353](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=118.353) Narration: 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. Board: net — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); client — a Point \[blue\] labelled "upright("a personal computer")" drawn in net (location=(1.2, 6.3), marker\_radius=0.2); server — a Point \[green\] labelled "upright("another computer")" drawn in net (location=(8.6, 4.2), marker\_radius=0.2); 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); 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)); packet — a Point \[yellow\] labelled "upright("bytes")" drawn in net (location=(\, \), 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."; head\_pieces — a Heading that says "What the Web Added" Actions: - [02:4.646](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=124.64599999999999): packet is redrawn as the numbers it depends on change. - [02:4.646](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=124.64599999999999): px ticks to 1.2. - [02:4.646](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=124.64599999999999): py ticks to 6.3. - [02:5.702](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=125.70199999999998): packet is indicated — a transient flash. - [02:13.099](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=133.09897916666668): head\_pieces is hidden from the screen — left the board. - [02:13.099](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=133.09897916666668): net is hidden from the screen — left the board. - [02:13.099](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=133.09897916666668): client is hidden from the screen — net left the board. - [02:13.099](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=133.09897916666668): server is hidden from the screen — net left the board. - [02:13.099](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=133.09897916666668): r1 is hidden from the screen — net left the board. - [02:13.099](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=133.09897916666668): r2 is hidden from the screen — net left the board. - [02:13.099](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=133.09897916666668): r3 is hidden from the screen — net left the board. - [02:13.099](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=133.09897916666668): link\_1 is hidden from the screen — net left the board. - [02:13.099](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=133.09897916666668): link\_2 is hidden from the screen — net left the board. - [02:13.099](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=133.09897916666668): link\_3 is hidden from the screen — net left the board. - [02:13.099](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=133.09897916666668): link\_4 is hidden from the screen — net left the board. - [02:13.099](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=133.09897916666668): link\_5 is hidden from the screen — net left the board. - [02:13.099](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=133.09897916666668): packet is hidden from the screen — net left the board. - [02:13.099](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=133.09897916666668): piece\_1 is hidden from the screen — left the board. - [02:13.099](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=133.09897916666668): piece\_2 is hidden from the screen — left the board. - [02:13.099](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=133.09897916666668): piece\_3 is hidden from the screen — left the board. - [02:13.099](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=133.09897916666668): piece\_4 is hidden from the screen — left the board. ### Scene 2: [One Name for Every Document](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=134.1406458333333) Span: 02:14.141–04:11.382 (134.1406458333333s–251.38170833333334s). #### 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 ##### [02:14.141](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=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. Board: Empty. Actions: - [02:14.141](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=134.1406458333333): head\_name is shown on the screen, written out. - [02:21.606](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=141.6056458333333): url is shown on the screen, written out. ##### [02:26.989](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=146.9891458333333) Narration: 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. Board: url — a Math \[text\] that says "$upright("http")upright("://")upright("info.cern.ch")upright("/hypertext/theproject.html")$"; head\_name — a Heading that says "One Line of Text" Actions: - [02:29.323](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=149.3226458333333): url (the "upright("http")" part) is emphasized. - [02:31.993](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=151.9926458333333): url (the "upright("http")" part) is no longer emphasized. - [02:31.993](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=151.9926458333333): url (the "upright("info.cern.ch")" part) is emphasized. - [02:34.756](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=154.75564583333332): url (the "upright("/hypertext/theproject.html")" part) is emphasized. - [02:34.756](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=154.75564583333332): url (the "upright("info.cern.ch")" part) is no longer emphasized. - [02:37.542](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=157.5421458333333): url (the "upright("/hypertext/theproject.html")" part) is no longer emphasized. ##### [02:38.142](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=158.1421458333333) Narration: That is all a URL is. One string, answering three questions at once: which protocol, which machine, which document. Board: Unchanged from the preceding beat in this scene. Actions: - [02:41.208](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=161.20764583333332): defn\_url is shown on the screen, written out. - [02:47.709](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=167.7091458333333): url moves to a new place on the board. - [02:47.709](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=167.7091458333333): defn\_url is hidden from the screen — left the board. - [02:47.709](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=167.7091458333333): head\_name is hidden from the screen — left the board. ##### [02:48.309](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=168.3091458333333) Narration: 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. Board: url — a Math \[text\] that says "$upright("http")upright("://")upright("info.cern.ch")upright("/hypertext/theproject.html")$" Actions: - [02:48.309](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=168.3091458333333): head\_pieces is shown on the screen, written out. - [02:49.192](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=169.19164583333333): parts is shown on the screen, written out. - [02:51.804](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=171.80364583333332): parts is shown on the screen, written out. - [02:53.975](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=173.9746458333333): url (the "upright("http")" part) is indicated — a transient flash. ##### [02:59.521](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=179.5206458333333) Narration: 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. Board: url — a Math \[text\] that says "$upright("http")upright("://")upright("info.cern.ch")upright("/hypertext/theproject.html")$"; head\_pieces — a Heading that says "Three Questions, One String" Actions: - [03:1.065](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=181.06464583333332): parts is shown on the screen, written out. - [03:4.676](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=184.6756458333333): url (the "upright("info.cern.ch")" part) is indicated — a transient flash. ##### [03:8.991](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=188.9906458333333) Narration: 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. Board: Unchanged from the preceding beat in this scene. Actions: - [03:10.442](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=190.44164583333333): parts is shown on the screen, written out. - [03:15.887](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=195.88664583333332): url (the "upright("/hypertext/theproject.html")" part) is indicated — a transient flash. ##### [03:18.298](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=198.2981458333333) Narration: 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. Board: Unchanged from the preceding beat in this scene. Actions: - [03:21.979](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=201.9786458333333): parts (the "column=3" part) is emphasized. - [03:27.122](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=207.1216458333333): parts (the "column=3" part) is no longer emphasized. - [03:27.981](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=207.9806458333333): head\_pieces is hidden from the screen — left the board. - [03:27.981](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=207.9806458333333): parts is hidden from the screen — left the board. - [03:27.981](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=207.9806458333333): url is hidden from the screen — left the board. ##### [03:28.581](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=208.5806458333333) Narration: 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. Board: Empty. Actions: - [03:28.581](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=208.5806458333333): head\_find is shown on the screen, written out. - [03:32.587](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=212.5866458333333): find is shown on the screen, written out. - [03:34.143](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=214.1426458333333): host\_chip is shown on the screen, written out. - [03:37.927](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=217.92664583333328): lookup is shown on the screen, written out. ##### [03:40.176](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=220.1756458333333) Narration: A name goes in. An address comes out. And an address, unlike a name, is the thing the Internet actually understands. Board: 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"; 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)) Actions: - [03:42.115](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=222.1146458333333): number\_chip is shown on the screen, written out. - [03:48.094](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=228.0936458333333): number\_chip is indicated — a transient flash. ##### [03:49.878](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=229.8781458333333) Narration: 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. Board: 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"; 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)); number\_chip — a Math \[yellow\] that says "$upright("128.141.201.74")$" drawn in find Actions: - [03:55.068](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=235.0676458333333): route is shown on the screen, written out. - [03:56.241](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=236.2406458333333): machine is shown on the screen, written out. ##### [04:0.01](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=240.0101458333333) Narration: 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. Board: 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"; 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)); number\_chip — a Math \[yellow\] that says "$upright("128.141.201.74")$" drawn in find; route — a Vector \[gray\] labelled "upright("route to")" drawn in find (start=(5.0, 4.1), end=(5.0, 3.1)); machine — a Point \[blue\] labelled "upright("one particular machine")" drawn in find (location=(5.0, 2.3), marker\_radius=0.22) Actions: - [04:3.11](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=243.1096458333333): machine is indicated — a transient flash. - [04:5.931](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=245.9306458333333): path\_chip is shown on the screen, written out. - [04:7.661](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=247.6606458333333): path\_note is shown on the screen, written out. - [04:10.34](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=250.34004166666665): find is hidden from the screen — left the board. - [04:10.34](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=250.34004166666665): host\_chip is hidden from the screen — find left the board. - [04:10.34](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=250.34004166666665): lookup is hidden from the screen — find left the board. - [04:10.34](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=250.34004166666665): number\_chip is hidden from the screen — find left the board. - [04:10.34](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=250.34004166666665): route is hidden from the screen — find left the board. - [04:10.34](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=250.34004166666665): machine is hidden from the screen — find left the board. - [04:10.34](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=250.34004166666665): path\_chip is hidden from the screen — find left the board. - [04:10.34](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=250.34004166666665): head\_find is hidden from the screen — left the board. - [04:10.34](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=250.34004166666665): path\_note is hidden from the screen — left the board. ### Scene 3: [The Conversation: HTTP](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=251.38170833333334) Span: 04:11.382–06:26.775 (251.38170833333334s–386.7746041666667s). #### 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("\ ... \")$" 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 ##### [04:11.382](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=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. Board: Empty. Actions: - [04:11.382](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=251.38170833333334): head\_ask is shown on the screen, written out. - [04:12.183](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=252.18270833333332): wire is shown on the screen, written out. - [04:13.901](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=253.90070833333334): client is shown on the screen, written out. - [04:14.223](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=254.2227128651607): server is shown on the screen, written out. ##### [04:21.136](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=261.13620833333334) Narration: The browser opens a connection to that machine and sends a request. A request is text, and it is almost embarrassingly short. Board: wire — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_ask — a Heading that says "Ask, and Be Answered"; client — a Point \[blue\] labelled "upright("browser")" drawn in wire (location=(1.4, 4.0), marker\_radius=0.22); server — a Point \[green\] labelled "upright("server")" drawn in wire (location=(8.6, 4.0), marker\_radius=0.22) Actions: - [04:23.685](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=263.68470833333333): req\_arrow is shown on the screen, written out. - [04:28.305](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=268.30470833333334): req\_line is shown on the screen, written out. ##### [04:29.683](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=269.6827083333333) Narration: One line saying what it wants: the word GET, then the path we were holding, then which version of the protocol it is speaking. Board: wire — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_ask — a Heading that says "Ask, and Be Answered"; client — a Point \[blue\] labelled "upright("browser")" drawn in wire (location=(1.4, 4.0), marker\_radius=0.22); server — a Point \[green\] labelled "upright("server")" drawn in wire (location=(8.6, 4.0), marker\_radius=0.22); req\_arrow — a Vector \[yellow\] labelled "upright("request")" drawn in wire (start=(2.2, 5.4), end=(7.8, 5.4)); req\_line — a Math \[text\] that says "$upright("GET /hypertext/theproject.html HTTP/1.1")$" drawn in wire Actions: - [04:32.423](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=272.42270833333333): req\_line (the "GET" part) is indicated — a transient flash. - [04:34.176](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=274.1757083333333): req\_line (the "/hypertext/theproject.html" part) is indicated — a transient flash. - [04:35.14](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=275.1397083333333): req\_line (the "HTTP/1.1" part) is indicated — a transient flash. ##### [04:37.678](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=277.6782083333333) Narration: And one line saying which host it thinks it is talking to, because a single machine can answer for many different names. Board: Unchanged from the preceding beat in this scene. Actions: - [04:39.211](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=279.21070833333334): req\_host is shown on the screen, written out. ##### [04:44.85](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=284.84970833333335) Narration: 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. Board: wire — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_ask — a Heading that says "Ask, and Be Answered"; client — a Point \[blue\] labelled "upright("browser")" drawn in wire (location=(1.4, 4.0), marker\_radius=0.22); server — a Point \[green\] labelled "upright("server")" drawn in wire (location=(8.6, 4.0), marker\_radius=0.22); req\_arrow — a Vector \[yellow\] labelled "upright("request")" drawn in wire (start=(2.2, 5.4), end=(7.8, 5.4)); req\_line — a Math \[text\] that says "$upright("GET /hypertext/theproject.html HTTP/1.1")$" drawn in wire; req\_host — a Math \[text\] that says "$upright("Host: info.cern.ch")$" drawn in wire Actions: - [04:45.372](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=285.37170833333334): res\_arrow is shown on the screen, written out. - [04:49.006](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=289.00570833333336): res\_status is shown on the screen, written out. - [04:52.071](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=292.07070833333336): res\_status (the "200" part) is indicated — a transient flash. ##### [04:56.77](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=296.76970833333337) Narration: 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. Board: wire — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_ask — a Heading that says "Ask, and Be Answered"; client — a Point \[blue\] labelled "upright("browser")" drawn in wire (location=(1.4, 4.0), marker\_radius=0.22); server — a Point \[green\] labelled "upright("server")" drawn in wire (location=(8.6, 4.0), marker\_radius=0.22); req\_arrow — a Vector \[yellow\] labelled "upright("request")" drawn in wire (start=(2.2, 5.4), end=(7.8, 5.4)); req\_line — a Math \[text\] that says "$upright("GET /hypertext/theproject.html HTTP/1.1")$" drawn in wire; req\_host — a Math \[text\] that says "$upright("Host: info.cern.ch")$" 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\_status — a Math \[text\] that says "$upright("HTTP/1.1 200 OK")$" drawn in wire Actions: - [04:57.118](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=297.1177083333333): res\_type is shown on the screen, written out. - [05:1.495](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=301.49470833333334): res\_type (the "text/html" part) is indicated — a transient flash. ##### [05:8.654](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=308.6542083333334) Narration: And then, after a blank line, the document itself, poured down the wire as a stream of characters. Board: wire — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_ask — a Heading that says "Ask, and Be Answered"; client — a Point \[blue\] labelled "upright("browser")" drawn in wire (location=(1.4, 4.0), marker\_radius=0.22); server — a Point \[green\] labelled "upright("server")" drawn in wire (location=(8.6, 4.0), marker\_radius=0.22); req\_arrow — a Vector \[yellow\] labelled "upright("request")" drawn in wire (start=(2.2, 5.4), end=(7.8, 5.4)); req\_line — a Math \[text\] that says "$upright("GET /hypertext/theproject.html HTTP/1.1")$" drawn in wire; req\_host — a Math \[text\] that says "$upright("Host: info.cern.ch")$" 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\_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 Actions: - [05:11.546](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=311.5457083333333): res\_body is shown on the screen, written out. ##### [05:16.325](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=316.3252083333333) Narration: That is HTTP. One question, one answer, and a note saying what the answer is made of. Board: wire — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_ask — a Heading that says "Ask, and Be Answered"; client — a Point \[blue\] labelled "upright("browser")" drawn in wire (location=(1.4, 4.0), marker\_radius=0.22); server — a Point \[green\] labelled "upright("server")" drawn in wire (location=(8.6, 4.0), marker\_radius=0.22); req\_arrow — a Vector \[yellow\] labelled "upright("request")" drawn in wire (start=(2.2, 5.4), end=(7.8, 5.4)); req\_line — a Math \[text\] that says "$upright("GET /hypertext/theproject.html HTTP/1.1")$" drawn in wire; req\_host — a Math \[text\] that says "$upright("Host: info.cern.ch")$" 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\_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; res\_body — a Math \[text\] that says "$upright("\ ... \")$" drawn in wire Actions: - [05:18.74](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=318.73970833333334): req\_arrow is indicated — a transient flash. - [05:19.785](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=319.78470833333336): res\_arrow is indicated — a transient flash. - [05:22.839](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=322.83870833333333): wire moves to a new place on the board. - [05:22.839](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=322.83870833333333): head\_ask is hidden from the screen — left the board. ##### [05:24.039](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=324.0387083333333) Narration: 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. Board: wire — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); client — a Point \[blue\] labelled "upright("browser")" drawn in wire (location=(1.4, 4.0), marker\_radius=0.22); server — a Point \[green\] labelled "upright("server")" drawn in wire (location=(8.6, 4.0), marker\_radius=0.22); req\_arrow — a Vector \[yellow\] labelled "upright("request")" drawn in wire (start=(2.2, 5.4), end=(7.8, 5.4)); req\_line — a Math \[text\] that says "$upright("GET /hypertext/theproject.html HTTP/1.1")$" drawn in wire; req\_host — a Math \[text\] that says "$upright("Host: info.cern.ch")$" 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\_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; res\_body — a Math \[text\] that says "$upright("\ ... \")$" drawn in wire Actions: - [05:24.039](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=324.0387083333333): head\_rules is shown on the screen, written out. - [05:28.846](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=328.84570833333333): rule\_1 is shown on the screen, written out. - [05:33.942](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=333.94170833333334): client is indicated — a transient flash. ##### [05:35.46](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=335.4597083333333) Narration: 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. Board: wire — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); client — a Point \[blue\] labelled "upright("browser")" drawn in wire (location=(1.4, 4.0), marker\_radius=0.22); server — a Point \[green\] labelled "upright("server")" drawn in wire (location=(8.6, 4.0), marker\_radius=0.22); req\_arrow — a Vector \[yellow\] labelled "upright("request")" drawn in wire (start=(2.2, 5.4), end=(7.8, 5.4)); req\_line — a Math \[text\] that says "$upright("GET /hypertext/theproject.html HTTP/1.1")$" drawn in wire; req\_host — a Math \[text\] that says "$upright("Host: info.cern.ch")$" 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\_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; res\_body — a Math \[text\] that says "$upright("\ ... \")$" drawn in wire; rule\_1 — a Text \[text\] that says "1. The client always speaks first."; head\_rules — a Heading that says "Three Rules of the Exchange" Actions: - [05:37.387](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=337.38670833333333): rule\_2 is shown on the screen, written out. - [05:43.946](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=343.9457083333333): res\_type is indicated — a transient flash. ##### [05:47.988](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=347.9882083333333) Narration: 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. Board: wire — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); client — a Point \[blue\] labelled "upright("browser")" drawn in wire (location=(1.4, 4.0), marker\_radius=0.22); server — a Point \[green\] labelled "upright("server")" drawn in wire (location=(8.6, 4.0), marker\_radius=0.22); req\_arrow — a Vector \[yellow\] labelled "upright("request")" drawn in wire (start=(2.2, 5.4), end=(7.8, 5.4)); req\_line — a Math \[text\] that says "$upright("GET /hypertext/theproject.html HTTP/1.1")$" drawn in wire; req\_host — a Math \[text\] that says "$upright("Host: info.cern.ch")$" 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\_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; res\_body — a Math \[text\] that says "$upright("\ ... \")$" 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."; head\_rules — a Heading that says "Three Rules of the Exchange" Actions: - [05:51.292](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=351.2917083333333): rule\_3 is shown on the screen, written out. - [05:56.273](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=356.2727083333333): req\_line is hidden from the screen. - [05:56.273](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=356.2727083333333): req\_host is hidden from the screen. - [05:56.273](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=356.2727083333333): req\_arrow is hidden from the screen. - [05:56.273](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=356.2727083333333): res\_status is hidden from the screen. - [05:56.273](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=356.2727083333333): res\_type is hidden from the screen. - [05:56.273](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=356.2727083333333): res\_body is hidden from the screen. - [05:56.273](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=356.2727083333333): res\_arrow is hidden from the screen. ##### [05:59.752](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=359.75170833333334) Narration: 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. Board: wire — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); client — a Point \[blue\] labelled "upright("browser")" drawn in wire (location=(1.4, 4.0), marker\_radius=0.22); server — a Point \[green\] labelled "upright("server")" drawn in wire (location=(8.6, 4.0), marker\_radius=0.22); 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."; head\_rules — a Heading that says "Three Rules of the Exchange" Actions: - [06:2.945](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=362.9447083333333): req\_arrow is shown on the screen, written out. - [06:05](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=364.99970833333333): req\_line is shown on the screen, written out. - [06:5.975](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=365.97470833333335): req\_host is shown on the screen, written out. ##### [06:10.975](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=370.97470833333335) Narration: Same conversation, a different path, and a different document comes back down the wire. Board: wire — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); client — a Point \[blue\] labelled "upright("browser")" drawn in wire (location=(1.4, 4.0), marker\_radius=0.22); server — a Point \[green\] labelled "upright("server")" drawn in wire (location=(8.6, 4.0), marker\_radius=0.22); req\_arrow — a Vector \[yellow\] labelled "upright("request")" drawn in wire (start=(2.2, 5.4), end=(7.8, 5.4)); req\_line — a Math \[text\] that says "$upright("GET /hypertext/theproject.html HTTP/1.1")$" drawn in wire; req\_host — a Math \[text\] that says "$upright("Host: info.cern.ch")$" 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."; head\_rules — a Heading that says "Three Rules of the Exchange" Actions: - [06:13.204](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=373.20370833333334): req\_line becomes "$upright("GET /hypertext/whatis.html HTTP/1.1")$". - [06:15.085](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=375.0847083333333): res\_arrow is shown on the screen, written out. - [06:15.232](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=375.2320657378336): res\_status is shown on the screen, written out. - [06:15.543](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=375.5430618655154): res\_type is shown on the screen, written out. - [06:15.969](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=375.968770547423): res\_body is shown on the screen, written out. ##### [06:17.369](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=377.36870833333336) Narration: One question, one answer, written down once, and any two programs on Earth can have that conversation without ever having met. Board: wire — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); client — a Point \[blue\] labelled "upright("browser")" drawn in wire (location=(1.4, 4.0), marker\_radius=0.22); server — a Point \[green\] labelled "upright("server")" drawn in wire (location=(8.6, 4.0), marker\_radius=0.22); req\_arrow — a Vector \[yellow\] labelled "upright("request")" drawn in wire (start=(2.2, 5.4), end=(7.8, 5.4)); req\_line — a Math \[text\] that says "$upright("GET /hypertext/theproject.html HTTP/1.1")$" drawn in wire; req\_host — a Math \[text\] that says "$upright("Host: info.cern.ch")$" 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\_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; res\_body — a Math \[text\] that says "$upright("\ ... \")$" 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."; head\_rules — a Heading that says "Three Rules of the Exchange" Actions: - [06:18.123](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=378.1227083333333): req\_arrow is indicated — a transient flash. - [06:19.134](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=379.13370833333335): res\_arrow is indicated — a transient flash. - [06:25.733](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=385.7329375): head\_rules is hidden from the screen — left the board. - [06:25.733](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=385.7329375): rule\_1 is hidden from the screen — left the board. - [06:25.733](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=385.7329375): rule\_2 is hidden from the screen — left the board. - [06:25.733](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=385.7329375): rule\_3 is hidden from the screen — left the board. - [06:25.733](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=385.7329375): wire is hidden from the screen — left the board. - [06:25.733](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=385.7329375): client is hidden from the screen — wire left the board. - [06:25.733](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=385.7329375): server is hidden from the screen — wire left the board. - [06:25.733](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=385.7329375): req\_arrow is hidden from the screen — wire left the board. - [06:25.733](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=385.7329375): req\_line is hidden from the screen — wire left the board. - [06:25.733](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=385.7329375): req\_host is hidden from the screen — wire left the board. - [06:25.733](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=385.7329375): res\_arrow is hidden from the screen — wire left the board. - [06:25.733](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=385.7329375): res\_status is hidden from the screen — wire left the board. - [06:25.733](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=385.7329375): res\_type is hidden from the screen — wire left the board. - [06:25.733](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=385.7329375): res\_body is hidden from the screen — wire left the board. ### Scene 4: [The Document: HTML](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=386.7746041666667) Span: 06:26.775–08:41.437 (386.7746041666667s–521.4368541666666s). #### 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("\")upright("The Project\")$" - src\_2: a Math \[text\] that says "$upright("\")upright("Links can be made to any")$" - src\_3: a Math \[text\] that says "$upright("information, anywhere.\")$" - src\_4: a Math \[text\] that says "$upright("\What is it?\")$" - 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 ##### [06:26.775](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=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. Board: Empty. Actions: - [06:26.775](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=386.7746041666667): head\_markup is shown on the screen, written out. - [06:31.814](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=391.81360416666666): src\_1 is shown on the screen, written out. ##### [06:39.879](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=399.87860416666666) Narration: The first line says something quite specific. It says: the words The Project are a heading. Not big text, not bold text. A heading. Board: src\_1 — a Math \[text\] that says "$upright("\")upright("The Project\")$"; head\_markup — a Heading that says "Tags Are Not Decoration" Actions: - [06:45.672](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=405.67160416666667): src\_1 (the "upright("\")" part) is indicated — a transient flash. ##### [06:51.299](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=411.2986041666667) Narration: These two say: this run of words is a paragraph. The brackets are the labels, and whatever sits between them is the content. Board: Unchanged from the preceding beat in this scene. Actions: - [06:51.926](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=411.9256041666667): src\_2 is shown on the screen, written out. - [06:52.529](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=412.52875710784315): src\_3 is shown on the screen, written out. - [06:53.993](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=413.9926041666667): src\_2 (the "upright("\")" part) is indicated — a transient flash. ##### [07:0.124](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=420.12410416666665) Narration: 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. Board: src\_1 — a Math \[text\] that says "$upright("\")upright("The Project\")$"; src\_2 — a Math \[text\] that says "$upright("\")upright("Links can be made to any")$"; src\_3 — a Math \[text\] that says "$upright("information, anywhere.\")$"; head\_markup — a Heading that says "Tags Are Not Decoration" Actions: - [07:0.746](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=420.7456041666667): src\_4 is shown on the screen, written out. - [07:7.398](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=427.39760416666667): src\_4 (the "upright("href=whatis.html")" part) is indicated — a transient flash. ##### [07:9.078](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=429.0776041666667) Narration: 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. Board: src\_1 — a Math \[text\] that says "$upright("\")upright("The Project\")$"; src\_2 — a Math \[text\] that says "$upright("\")upright("Links can be made to any")$"; src\_3 — a Math \[text\] that says "$upright("information, anywhere.\")$"; src\_4 — a Math \[text\] that says "$upright("\What is it?\")$"; head\_markup — a Heading that says "Tags Are Not Decoration" Actions: - [07:12.097](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=432.0966041666667): defn\_html is shown on the screen, written out. - [07:17.623](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=437.6226041666667): src\_1 moves to a new place on the board. - [07:17.623](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=437.6226041666667): src\_2 moves to a new place on the board. - [07:17.623](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=437.6226041666667): src\_3 moves to a new place on the board. - [07:17.623](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=437.6226041666667): src\_4 moves to a new place on the board. - [07:17.623](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=437.6226041666667): defn\_html is hidden from the screen — left the board. - [07:17.623](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=437.6226041666667): head\_markup is hidden from the screen — left the board. ##### [07:18.223](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=438.22260416666666) Narration: 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. Board: src\_1 — a Math \[text\] that says "$upright("\")upright("The Project\")$"; src\_2 — a Math \[text\] that says "$upright("\")upright("Links can be made to any")$"; src\_3 — a Math \[text\] that says "$upright("information, anywhere.\")$"; src\_4 — a Math \[text\] that says "$upright("\What is it?\")$" Actions: - [07:18.223](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=438.22260416666666): head\_tree is shown on the screen, written out. - [07:22.066](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=442.0656041666667): tree is shown on the screen, written out. - [07:24.562](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=444.56160416666665): n\_html is shown on the screen, written out. - [07:24.872](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=444.8722486272025): n\_body is shown on the screen, written out. - [07:25.436](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=445.43610077650146): e\_hb is shown on the screen, written out. ##### [07:27.414](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=447.4141041666667) Narration: The heading, the paragraph and the link are three children of the body, side by side, in the order they were written. Board: src\_1 — a Math \[text\] that says "$upright("\")upright("The Project\")$"; src\_2 — a Math \[text\] that says "$upright("\")upright("Links can be made to any")$"; src\_3 — a Math \[text\] that says "$upright("information, anywhere.\")$"; src\_4 — a Math \[text\] that says "$upright("\What is it?\")$"; tree — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_tree — a Heading that says "What the Tags Mean"; n\_html — a Point \[blue\] labelled "upright("html")" drawn in tree (location=(5.0, 7.2), marker\_radius=0.16); n\_body — a Point \[blue\] labelled "upright("body")" drawn in tree (location=(5.0, 5.9), marker\_radius=0.16); e\_hb — a Line \[gray\] drawn in tree (start=(5.0, 7.2), end=(5.0, 5.9)) Actions: - [07:27.902](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=447.9016041666667): n\_h1 is shown on the screen, written out. - [07:27.902](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=447.9016041666667): e\_bh is shown on the screen, written out. - [07:28.587](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=448.5866041666667): n\_p is shown on the screen, written out. - [07:28.587](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=448.5866041666667): e\_bp is shown on the screen, written out. - [07:29.667](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=449.6666041666667): n\_a is shown on the screen, written out. - [07:29.667](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=449.6666041666667): e\_ba is shown on the screen, written out. ##### [07:35.096](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=455.0961041666667) Narration: And the words themselves hang underneath, as the content of each one. Board: src\_1 — a Math \[text\] that says "$upright("\")upright("The Project\")$"; src\_2 — a Math \[text\] that says "$upright("\")upright("Links can be made to any")$"; src\_3 — a Math \[text\] that says "$upright("information, anywhere.\")$"; src\_4 — a Math \[text\] that says "$upright("\What is it?\")$"; tree — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_tree — a Heading that says "What the Tags Mean"; n\_html — a Point \[blue\] labelled "upright("html")" drawn in tree (location=(5.0, 7.2), marker\_radius=0.16); n\_body — a Point \[blue\] labelled "upright("body")" drawn in tree (location=(5.0, 5.9), marker\_radius=0.16); e\_hb — a Line \[gray\] drawn in tree (start=(5.0, 7.2), end=(5.0, 5.9)); n\_h1 — a Point \[green\] labelled "upright("h1")" drawn in tree (location=(2.3, 4.4), marker\_radius=0.16); e\_bh — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(2.3, 4.4)); n\_p — a Point \[green\] labelled "upright("p")" drawn in tree (location=(5.0, 4.4), marker\_radius=0.16); e\_bp — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(5.0, 4.4)); n\_a — a Point \[yellow\] labelled "upright("a")" drawn in tree (location=(7.7, 4.4), marker\_radius=0.16); e\_ba — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(7.7, 4.4)) Actions: - [07:35.735](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=455.73460416666666): t\_h1 is shown on the screen, written out. - [07:35.965](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=455.9652310176045): t\_p is shown on the screen, written out. - [07:36.455](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=456.4546943578181): t\_a is shown on the screen, written out. - [07:37.999](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=457.99860416666667): e\_th is shown on the screen, written out. - [07:38.104](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=458.10376828315236): e\_tp is shown on the screen, written out. - [07:38.314](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=458.3140965161237): e\_ta is shown on the screen, written out. ##### [07:40.282](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=460.2816041666667) Narration: 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. Board: src\_1 — a Math \[text\] that says "$upright("\")upright("The Project\")$"; src\_2 — a Math \[text\] that says "$upright("\")upright("Links can be made to any")$"; src\_3 — a Math \[text\] that says "$upright("information, anywhere.\")$"; src\_4 — a Math \[text\] that says "$upright("\What is it?\")$"; tree — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_tree — a Heading that says "What the Tags Mean"; n\_html — a Point \[blue\] labelled "upright("html")" drawn in tree (location=(5.0, 7.2), marker\_radius=0.16); n\_body — a Point \[blue\] labelled "upright("body")" drawn in tree (location=(5.0, 5.9), marker\_radius=0.16); e\_hb — a Line \[gray\] drawn in tree (start=(5.0, 7.2), end=(5.0, 5.9)); n\_h1 — a Point \[green\] labelled "upright("h1")" drawn in tree (location=(2.3, 4.4), marker\_radius=0.16); e\_bh — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(2.3, 4.4)); n\_p — a Point \[green\] labelled "upright("p")" drawn in tree (location=(5.0, 4.4), marker\_radius=0.16); e\_bp — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(5.0, 4.4)); n\_a — a Point \[yellow\] labelled "upright("a")" drawn in tree (location=(7.7, 4.4), marker\_radius=0.16); e\_ba — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(7.7, 4.4)); 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); t\_a — a Point \[gray\] labelled "upright("What is it?")" drawn in tree (location=(7.7, 2.9), show\_marker=False); 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); e\_ta — a Line \[gray\] drawn in tree (start=(7.7, 4.4), end=(7.7, 2.9), dashed=True) Actions: - [07:42.256](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=462.25560416666667): n\_a is indicated — a transient flash. - [07:46.54](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=466.53960416666666): href\_chip is shown on the screen, written out. ##### [07:51.377](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=471.37710416666664) Narration: 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. Board: src\_1 — a Math \[text\] that says "$upright("\")upright("The Project\")$"; src\_2 — a Math \[text\] that says "$upright("\")upright("Links can be made to any")$"; src\_3 — a Math \[text\] that says "$upright("information, anywhere.\")$"; src\_4 — a Math \[text\] that says "$upright("\What is it?\")$"; tree — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_tree — a Heading that says "What the Tags Mean"; n\_html — a Point \[blue\] labelled "upright("html")" drawn in tree (location=(5.0, 7.2), marker\_radius=0.16); n\_body — a Point \[blue\] labelled "upright("body")" drawn in tree (location=(5.0, 5.9), marker\_radius=0.16); e\_hb — a Line \[gray\] drawn in tree (start=(5.0, 7.2), end=(5.0, 5.9)); n\_h1 — a Point \[green\] labelled "upright("h1")" drawn in tree (location=(2.3, 4.4), marker\_radius=0.16); e\_bh — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(2.3, 4.4)); n\_p — a Point \[green\] labelled "upright("p")" drawn in tree (location=(5.0, 4.4), marker\_radius=0.16); e\_bp — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(5.0, 4.4)); n\_a — a Point \[yellow\] labelled "upright("a")" drawn in tree (location=(7.7, 4.4), marker\_radius=0.16); e\_ba — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(7.7, 4.4)); 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); t\_a — a Point \[gray\] labelled "upright("What is it?")" drawn in tree (location=(7.7, 2.9), show\_marker=False); 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); e\_ta — a Line \[gray\] drawn in tree (start=(7.7, 4.4), end=(7.7, 2.9), dashed=True); href\_chip — a Math \[yellow\] that says "$upright("href = whatis.html")$" drawn in tree Actions: - [07:53.374](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=473.37360416666667): href\_chip is indicated — a transient flash. - [08:1.397](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=481.3971041666667): tree moves to a new place on the board. - [08:1.397](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=481.3971041666667): head\_tree is hidden from the screen — left the board. - [08:1.397](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=481.3971041666667): src\_1 is hidden from the screen — left the board. - [08:1.397](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=481.3971041666667): src\_2 is hidden from the screen — left the board. - [08:1.397](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=481.3971041666667): src\_3 is hidden from the screen — left the board. - [08:1.397](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=481.3971041666667): src\_4 is hidden from the screen — left the board. ##### [08:1.997](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=481.99710416666665) Narration: 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. Board: tree — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); n\_html — a Point \[blue\] labelled "upright("html")" drawn in tree (location=(5.0, 7.2), marker\_radius=0.16); n\_body — a Point \[blue\] labelled "upright("body")" drawn in tree (location=(5.0, 5.9), marker\_radius=0.16); e\_hb — a Line \[gray\] drawn in tree (start=(5.0, 7.2), end=(5.0, 5.9)); n\_h1 — a Point \[green\] labelled "upright("h1")" drawn in tree (location=(2.3, 4.4), marker\_radius=0.16); e\_bh — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(2.3, 4.4)); n\_p — a Point \[green\] labelled "upright("p")" drawn in tree (location=(5.0, 4.4), marker\_radius=0.16); e\_bp — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(5.0, 4.4)); n\_a — a Point \[yellow\] labelled "upright("a")" drawn in tree (location=(7.7, 4.4), marker\_radius=0.16); e\_ba — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(7.7, 4.4)); 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); t\_a — a Point \[gray\] labelled "upright("What is it?")" drawn in tree (location=(7.7, 2.9), show\_marker=False); 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); e\_ta — a Line \[gray\] drawn in tree (start=(7.7, 4.4), end=(7.7, 2.9), dashed=True); href\_chip — a Math \[yellow\] that says "$upright("href = whatis.html")$" drawn in tree Actions: - [08:1.997](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=481.99710416666665): head\_links is shown on the screen, written out. - [08:1.997](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=481.99710416666665): lbl\_one is shown on the screen, written out. - [08:1.997](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=481.99710416666665): lbl\_many is shown on the screen, written out. - [08:5.213](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=485.21260416666667): webgraph is shown on the screen, written out. - [08:5.817](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=485.8166041666667): d\_cern is shown on the screen, written out. - [08:7.686](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=487.6856041666667): d\_nist is shown on the screen, written out. ##### [08:11.304](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=491.30410416666666) Narration: 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. Board: tree — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); n\_html — a Point \[blue\] labelled "upright("html")" drawn in tree (location=(5.0, 7.2), marker\_radius=0.16); n\_body — a Point \[blue\] labelled "upright("body")" drawn in tree (location=(5.0, 5.9), marker\_radius=0.16); e\_hb — a Line \[gray\] drawn in tree (start=(5.0, 7.2), end=(5.0, 5.9)); n\_h1 — a Point \[green\] labelled "upright("h1")" drawn in tree (location=(2.3, 4.4), marker\_radius=0.16); e\_bh — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(2.3, 4.4)); n\_p — a Point \[green\] labelled "upright("p")" drawn in tree (location=(5.0, 4.4), marker\_radius=0.16); e\_bp — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(5.0, 4.4)); n\_a — a Point \[yellow\] labelled "upright("a")" drawn in tree (location=(7.7, 4.4), marker\_radius=0.16); e\_ba — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(7.7, 4.4)); 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); t\_a — a Point \[gray\] labelled "upright("What is it?")" drawn in tree (location=(7.7, 2.9), show\_marker=False); 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); e\_ta — a Line \[gray\] drawn in tree (start=(7.7, 4.4), end=(7.7, 2.9), dashed=True); href\_chip — a Math \[yellow\] that says "$upright("href = whatis.html")$" drawn in tree; lbl\_one — a Tex \[text\] that says "inside one document"; lbl\_many — a Tex \[text\] that says "between documents"; webgraph — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_links — a Heading that says "A Link Is a URL in a Document"; d\_cern — a Point \[blue\] labelled "upright("cern.ch")" drawn in webgraph (location=(2.2, 6.3), 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) Actions: - [08:11.874](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=491.87360416666667): link\_cn is shown on the screen, written out. ##### [08:22.539](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=502.5391041666667) Narration: 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. Board: tree — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); n\_html — a Point \[blue\] labelled "upright("html")" drawn in tree (location=(5.0, 7.2), marker\_radius=0.16); n\_body — a Point \[blue\] labelled "upright("body")" drawn in tree (location=(5.0, 5.9), marker\_radius=0.16); e\_hb — a Line \[gray\] drawn in tree (start=(5.0, 7.2), end=(5.0, 5.9)); n\_h1 — a Point \[green\] labelled "upright("h1")" drawn in tree (location=(2.3, 4.4), marker\_radius=0.16); e\_bh — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(2.3, 4.4)); n\_p — a Point \[green\] labelled "upright("p")" drawn in tree (location=(5.0, 4.4), marker\_radius=0.16); e\_bp — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(5.0, 4.4)); n\_a — a Point \[yellow\] labelled "upright("a")" drawn in tree (location=(7.7, 4.4), marker\_radius=0.16); e\_ba — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(7.7, 4.4)); 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); t\_a — a Point \[gray\] labelled "upright("What is it?")" drawn in tree (location=(7.7, 2.9), show\_marker=False); 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); e\_ta — a Line \[gray\] drawn in tree (start=(7.7, 4.4), end=(7.7, 2.9), dashed=True); href\_chip — a Math \[yellow\] that says "$upright("href = whatis.html")$" drawn in tree; lbl\_one — a Tex \[text\] that says "inside one document"; lbl\_many — a Tex \[text\] that says "between documents"; webgraph — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_links — a Heading that says "A Link Is a URL in a Document"; d\_cern — a Point \[blue\] labelled "upright("cern.ch")" drawn in webgraph (location=(2.2, 6.3), 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); link\_cn — a CurvedArrow \[yellow\] drawn in webgraph (start=(2.2, 6.3), end=(7.8, 6.5), bend=0.3) Actions: - [08:23.852](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=503.8516041666667): d\_slac is shown on the screen, written out. - [08:24.141](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=504.14108488538545): d\_home is shown on the screen, written out. - [08:25.698](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=505.6976041666667): link\_ns is shown on the screen, written out. - [08:26.074](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=506.0737394261911): link\_sh is shown on the screen, written out. - [08:26.821](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=506.82144133533626): link\_hc is shown on the screen, written out. ##### [08:31.394](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=511.3941041666667) Narration: 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. Board: tree — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); n\_html — a Point \[blue\] labelled "upright("html")" drawn in tree (location=(5.0, 7.2), marker\_radius=0.16); n\_body — a Point \[blue\] labelled "upright("body")" drawn in tree (location=(5.0, 5.9), marker\_radius=0.16); e\_hb — a Line \[gray\] drawn in tree (start=(5.0, 7.2), end=(5.0, 5.9)); n\_h1 — a Point \[green\] labelled "upright("h1")" drawn in tree (location=(2.3, 4.4), marker\_radius=0.16); e\_bh — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(2.3, 4.4)); n\_p — a Point \[green\] labelled "upright("p")" drawn in tree (location=(5.0, 4.4), marker\_radius=0.16); e\_bp — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(5.0, 4.4)); n\_a — a Point \[yellow\] labelled "upright("a")" drawn in tree (location=(7.7, 4.4), marker\_radius=0.16); e\_ba — a Line \[gray\] drawn in tree (start=(5.0, 5.9), end=(7.7, 4.4)); 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); t\_a — a Point \[gray\] labelled "upright("What is it?")" drawn in tree (location=(7.7, 2.9), show\_marker=False); 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); e\_ta — a Line \[gray\] drawn in tree (start=(7.7, 4.4), end=(7.7, 2.9), dashed=True); href\_chip — a Math \[yellow\] that says "$upright("href = whatis.html")$" drawn in tree; lbl\_one — a Tex \[text\] that says "inside one document"; lbl\_many — a Tex \[text\] that says "between documents"; webgraph — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_links — a Heading that says "A Link Is a URL in a Document"; d\_cern — a Point \[blue\] labelled "upright("cern.ch")" drawn in webgraph (location=(2.2, 6.3), 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); link\_cn — a CurvedArrow \[yellow\] drawn in webgraph (start=(2.2, 6.3), end=(7.8, 6.5), bend=0.3); d\_slac — a Point \[blue\] labelled "upright("slac.edu")" drawn in webgraph (location=(7.2, 2.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); 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); link\_hc — a CurvedArrow \[yellow\] drawn in webgraph (start=(2.6, 2.4), end=(2.2, 6.3), bend=0.3) Actions: - [08:34.425](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=514.4246041666667): href\_chip is indicated — a transient flash. - [08:36.224](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=516.2236041666667): link\_cn is indicated — a transient flash. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): head\_links is hidden from the screen — left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): lbl\_many is hidden from the screen — left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): lbl\_one is hidden from the screen — left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): tree is hidden from the screen — left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): n\_html is hidden from the screen — tree left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): n\_body is hidden from the screen — tree left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): e\_hb is hidden from the screen — tree left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): n\_h1 is hidden from the screen — tree left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): e\_bh is hidden from the screen — tree left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): n\_p is hidden from the screen — tree left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): e\_bp is hidden from the screen — tree left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): n\_a is hidden from the screen — tree left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): e\_ba is hidden from the screen — tree left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): t\_h1 is hidden from the screen — tree left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): t\_p is hidden from the screen — tree left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): t\_a is hidden from the screen — tree left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): e\_th is hidden from the screen — tree left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): e\_tp is hidden from the screen — tree left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): e\_ta is hidden from the screen — tree left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): href\_chip is hidden from the screen — tree left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): webgraph is hidden from the screen — left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): d\_cern is hidden from the screen — webgraph left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): d\_nist is hidden from the screen — webgraph left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): link\_cn is hidden from the screen — webgraph left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): d\_slac is hidden from the screen — webgraph left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): d\_home is hidden from the screen — webgraph left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): link\_ns is hidden from the screen — webgraph left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): link\_sh is hidden from the screen — webgraph left the board. - [08:40.395](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=520.3951875): link\_hc is hidden from the screen — webgraph left the board. ### Scene 5: [The Browser: A Rendering Engine on Every Desk](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=521.4368541666666) Span: 08:41.437–11:25.303 (521.4368541666666s–685.3032083333333s). #### 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 ##### [08:41.437](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=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. Board: Empty. Actions: - [08:41.437](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=521.4368541666666): head\_engine is shown on the screen, written out. - [08:43.504](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=523.5038541666667): page is shown on the screen, written out. - [08:45.849](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=525.8488541666667): window is shown on the screen, written out. - [08:46.165](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=526.1648287270857): chrome is shown on the screen, written out. - [08:47.114](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=527.1138541666667): addr\_chip is shown on the screen, written out. - [08:49.494](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=529.4938541666667): page moves to a new place on the board. - [08:49.494](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=529.4938541666667): engine is shown on the screen, written out. ##### [08:51.127](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=531.1273541666667) Narration: 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. Board: page — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_engine — a Heading that says "From Characters to Pixels"; 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); chrome — a Line \[gray\] drawn in page (start=(0.6, 6.6), end=(9.4, 6.6)); addr\_chip — a Math \[gray\] that says "$upright("http://info.cern.ch/hypertext/theproject.html")$" drawn in page Actions: - [08:52.08](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=532.0798541666667): engine is shown on the screen, written out. - [08:54.378](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=534.3778541666667): engine (the "row=2" part) is indicated — a transient flash. ##### [09:1.375](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=541.3753541666666) Narration: 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. Board: Unchanged from the preceding beat in this scene. Actions: - [09:2.85](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=542.8498541666667): engine is shown on the screen, written out. - [09:11.755](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=551.7548541666666): style\_chip is shown on the screen, written out. ##### [09:15.989](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=555.9893541666667) Narration: 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? Board: page — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_engine — a Heading that says "From Characters to Pixels"; 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); chrome — a Line \[gray\] drawn in page (start=(0.6, 6.6), end=(9.4, 6.6)); addr\_chip — a Math \[gray\] that says "$upright("http://info.cern.ch/hypertext/theproject.html")$" drawn in page; style\_chip — a Math \[green\] that says "$upright("h1: large and bold. a: blue, underlined.")$" drawn in page Actions: - [09:21.783](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=561.7828541666667): engine is shown on the screen, written out. - [09:23.245](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=563.2448541666666): box\_h is shown on the screen, written out. - [09:23.466](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=563.4657149654258): box\_p is shown on the screen, written out. - [09:23.965](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=563.965425706023): box\_a is shown on the screen, written out. ##### [09:27.943](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=567.9433541666666) Narration: 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. Board: page — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_engine — a Heading that says "From Characters to Pixels"; 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); chrome — a Line \[gray\] drawn in page (start=(0.6, 6.6), end=(9.4, 6.6)); addr\_chip — a Math \[gray\] that says "$upright("http://info.cern.ch/hypertext/theproject.html")$" drawn in page; style\_chip — a Math \[green\] that says "$upright("h1: large and bold. a: blue, underlined.")$" drawn in page; 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); 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) Actions: - [09:29.162](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=569.1618541666667): box\_h is indicated — a transient flash. - [09:32.274](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=572.2738541666666): box\_p is indicated — a transient flash. - [09:35.002](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=575.0018541666667): box\_a is indicated — a transient flash. ##### [09:42.196](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=582.1963541666667) Narration: 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. Board: Unchanged from the preceding beat in this scene. Actions: - [09:43.683](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=583.6828541666666): engine is shown on the screen, written out. - [09:46.33](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=586.3298541666667): style\_chip is hidden from the screen. - [09:46.33](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=586.3298541666667): box\_h is hidden from the screen. - [09:46.33](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=586.3298541666667): box\_p is hidden from the screen. - [09:46.33](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=586.3298541666667): box\_a is hidden from the screen. - [09:50.091](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=590.0908541666666): head\_text is shown on the screen, written out. - [09:50.376](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=590.3757583039018): p\_line\_1 is shown on the screen, written out. - [09:50.902](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=590.9019641565758): p\_line\_2 is shown on the screen, written out. - [09:51.113](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=591.1128541666667): link\_text is shown on the screen, written out. - [09:51.342](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=591.3416101130412): link\_rule is shown on the screen, written out. ##### [09:54.186](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=594.1858541666667) Narration: 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. Board: page — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); head\_engine — a Heading that says "From Characters to Pixels"; 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); chrome — a Line \[gray\] drawn in page (start=(0.6, 6.6), end=(9.4, 6.6)); addr\_chip — a Math \[gray\] that says "$upright("http://info.cern.ch/hypertext/theproject.html")$" drawn in page; head\_text — a Math \[text\] that says "$upright("The Project")$" 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; link\_text — a Math \[blue\] that says "$upright("What is it?")$" drawn in page; link\_rule — a Line \[blue\] drawn in page (start=(1.4, 2.75), end=(3.2, 2.75)) Actions: - [09:56.694](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=596.6938541666666): engine (the "column=1" part) is indicated — a transient flash. - [10:5.703](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=605.7028541666666): page moves to a new place on the board. - [10:5.703](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=605.7028541666666): engine is hidden from the screen — left the board. - [10:5.703](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=605.7028541666666): head\_engine is hidden from the screen — left the board. ##### [10:6.903](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=606.9028541666667) Narration: 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. Board: page — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); 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); chrome — a Line \[gray\] drawn in page (start=(0.6, 6.6), end=(9.4, 6.6)); addr\_chip — a Math \[gray\] that says "$upright("http://info.cern.ch/hypertext/theproject.html")$" drawn in page; head\_text — a Math \[text\] that says "$upright("The Project")$" 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; link\_text — a Math \[blue\] that says "$upright("What is it?")$" drawn in page; link\_rule — a Line \[blue\] drawn in page (start=(1.4, 2.75), end=(3.2, 2.75)) Actions: - [10:6.903](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=606.9028541666667): head\_click is shown on the screen, written out. - [10:10.166](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=610.1658541666667): link\_text is indicated — a transient flash. - [10:14.147](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=614.1468541666667): box\_a is shown on the screen, written out. ##### [10:17.255](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=617.2548541666666) Narration: 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. Board: page — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); 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); chrome — a Line \[gray\] drawn in page (start=(0.6, 6.6), end=(9.4, 6.6)); 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); head\_text — a Math \[text\] that says "$upright("The Project")$" 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; link\_text — a Math \[blue\] that says "$upright("What is it?")$" drawn in page; link\_rule — a Line \[blue\] drawn in page (start=(1.4, 2.75), end=(3.2, 2.75)); head\_click — a Heading that says "The Loop That Closes" Actions: - [10:21.202](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=621.2018541666666): step\_1 is shown on the screen, written out. - [10:23.594](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=623.5938541666667): addr\_chip is indicated — a transient flash. ##### [10:27.038](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=627.0383541666666) Narration: 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. Board: page — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); 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); chrome — a Line \[gray\] drawn in page (start=(0.6, 6.6), end=(9.4, 6.6)); 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); head\_text — a Math \[text\] that says "$upright("The Project")$" 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; link\_text — a Math \[blue\] that says "$upright("What is it?")$" drawn in page; link\_rule — a Line \[blue\] drawn in page (start=(1.4, 2.75), end=(3.2, 2.75)); step\_1 — a Text \[text\] that says "1. A URL, from the bar at the top or from a link."; head\_click — a Heading that says "The Loop That Closes" Actions: - [10:29.059](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=629.0588541666666): step\_2 is shown on the screen, written out. - [10:31.392](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=631.3918541666667): step\_3 is shown on the screen, written out. ##### [10:35.371](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=635.3708541666666) Narration: 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. Board: page — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); 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); chrome — a Line \[gray\] drawn in page (start=(0.6, 6.6), end=(9.4, 6.6)); 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); head\_text — a Math \[text\] that says "$upright("The Project")$" 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; link\_text — a Math \[blue\] that says "$upright("What is it?")$" drawn in page; link\_rule — a Line \[blue\] drawn in page (start=(1.4, 2.75), end=(3.2, 2.75)); 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."; head\_click — a Heading that says "The Loop That Closes" Actions: - [10:36.416](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=636.4158541666667): step\_4 is shown on the screen, written out. - [10:40.642](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=640.6418541666667): step\_5 is shown on the screen, written out. - [10:40.932](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=640.9318541666667): link\_text is indicated — a transient flash. - [10:46.215](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=646.2148541666667): page moves to a new place on the board. - [10:46.215](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=646.2148541666667): head\_click is hidden from the screen — left the board. - [10:46.215](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=646.2148541666667): step\_1 is hidden from the screen — left the board. - [10:46.215](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=646.2148541666667): step\_2 is hidden from the screen — left the board. - [10:46.215](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=646.2148541666667): step\_3 is hidden from the screen — left the board. - [10:46.215](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=646.2148541666667): step\_4 is hidden from the screen — left the board. - [10:46.215](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=646.2148541666667): step\_5 is hidden from the screen — left the board. ##### [10:46.815](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=646.8148541666667) Narration: 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. Board: page — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); 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); chrome — a Line \[gray\] drawn in page (start=(0.6, 6.6), end=(9.4, 6.6)); 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); head\_text — a Math \[text\] that says "$upright("The Project")$" 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; link\_text — a Math \[blue\] that says "$upright("What is it?")$" drawn in page; link\_rule — a Line \[blue\] drawn in page (start=(1.4, 2.75), end=(3.2, 2.75)) Actions: - [10:46.815](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=646.8148541666667): head\_why is shown on the screen, written out. - [10:54.071](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=654.0708541666667): claim is shown on the screen, written out. ##### [11:0.499](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=660.4988541666667) Narration: 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. Board: page — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); 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); chrome — a Line \[gray\] drawn in page (start=(0.6, 6.6), end=(9.4, 6.6)); 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); head\_text — a Math \[text\] that says "$upright("The Project")$" 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; link\_text — a Math \[blue\] that says "$upright("What is it?")$" drawn in page; link\_rule — a Line \[blue\] drawn in page (start=(1.4, 2.75), end=(3.2, 2.75)); claim — a Tex \[text\] that says "One protocol. One document format. One program, already installed."; head\_why — a Heading that says "Why This Architecture Won" Actions: - [11:2.287](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=662.2868541666667): why\_note is shown on the screen, written out. - [11:9.601](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=669.6008541666666): A box is drawn around claim. ##### [11:12.905](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=672.9053541666667) Narration: 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. Board: page — a Figure (x\_range=(0.0, 10.0), y\_range=(0.0, 8.0)); 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); chrome — a Line \[gray\] drawn in page (start=(0.6, 6.6), end=(9.4, 6.6)); 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); head\_text — a Math \[text\] that says "$upright("The Project")$" 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; link\_text — a Math \[blue\] that says "$upright("What is it?")$" drawn in page; link\_rule — a Line \[blue\] drawn in page (start=(1.4, 2.75), end=(3.2, 2.75)); claim — a Tex \[text\] that says "One protocol. One document format. One program, already installed."; 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."; head\_why — a Heading that says "Why This Architecture Won" Actions: - [11:13.219](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=673.2188541666667): addr\_chip is indicated — a transient flash. - [11:20.789](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=680.7888541666666): link\_text is indicated — a transient flash. - [11:24.262](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=684.2615416666667): claim is hidden from the screen — left the board. - [11:24.262](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=684.2615416666667): head\_why is hidden from the screen — left the board. - [11:24.262](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=684.2615416666667): page is hidden from the screen — left the board. - [11:24.262](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=684.2615416666667): window is hidden from the screen — page left the board. - [11:24.262](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=684.2615416666667): chrome is hidden from the screen — page left the board. - [11:24.262](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=684.2615416666667): addr\_chip is hidden from the screen — page left the board. - [11:24.262](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=684.2615416666667): box\_a is hidden from the screen — page left the board. - [11:24.262](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=684.2615416666667): head\_text is hidden from the screen — page left the board. - [11:24.262](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=684.2615416666667): p\_line\_1 is hidden from the screen — page left the board. - [11:24.262](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=684.2615416666667): p\_line\_2 is hidden from the screen — page left the board. - [11:24.262](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=684.2615416666667): link\_text is hidden from the screen — page left the board. - [11:24.262](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=684.2615416666667): link\_rule is hidden from the screen — page left the board. - [11:24.262](https://academa.ai/@sina/lectures/how-the-world-wide-web-was-born-protocols-hypertext-and-the-browser?t=684.2615416666667): why\_note is hidden from the screen — left the board.