Explaining how the Internet and the World Wide Web work

Question

I have been having trouble finding a good resource (ideally a video) or analogy that helps me to explain how the Internet and the World Wide Web work.

It does not need to be too in-depth. Only enough to cover how web pages are made available to the end user, and how HTTP requests work on the surface. Preferably, something that isn't over 10 minutes long and that the student can understand without prior knowledge of Web Development.

This is for a first lecture at an "Introduction to the Web" course, where students with zero experience in coding are introduced to HTML, CSS, JavaScript, and usability/accessibility topics. Explaining how the Web works in a concise yet effective manner that sticks has been my biggest challenge so far.

Any suggestions?

---

Update:

For the first lecture, I ended up using a combination of all suggestions. I used Code.org's videos, but they turned to be a bit too lengthy for the attention spans of my students, so in the next opportunity, I will address this a bit differently.

I will not go in depth into how the Internet works and how the data is transferred, but I will use the buses/highways analogy more superficially or even as an add-on explanation instead. I may go into what the DNS is, but that's about it.

In a Front-End Web Development course that only goes as far as using JavaScript with JQuery, potentially touching on a little bit of what is AJAX, the extra details are unnecessary, so rather than focusing on how the Internet works, I can focus on how Web sites work, or more specifically, what happens behind the scenes from the moment you type in "www.google.com" in the web browser, until the web page is rendered and ready to consume.

The most important bit for my students, perhaps, is to be aware that every asset on a page involves a new request, something more that must be downloaded. And that every element in your HTML document must be "translated" and drawn by the browser. Thus, it is all these assets that must be gathered, and the number of elements to draw onto the browser tab or window, that we need to take into account when developing these pages, because the more of them we have, the longer it takes for the browser to load or update the page.

Answer 1

An analogy which I find useful is buses.

One side (server) puts information on a bus and sends the bus to the other side (client\user end). The buses are loaded with data which is a sequence of 1 and 0¹. Each sequence has a passenger before it, and that passenger is used to identify what sort of data was loaded onto the bus.

This passenger says whether the data is for creating an HTML file or a CSS stylesheet etc. Now this bus is loaded with everything the server needs to pass to the client, so the bus departs.

Assuming there's a connection, the bus will reach the desired client, because the driver knows the way. This is important to explain, because that's a way to explain how ip addresses and ports work. The client is the final stop and the address of a stop is the ip for that stop.

When the bus gets to the client, the passengers leave the bus and you can explain here that each message (passenger) knows the order they should be in (like a passenger's id or something similar. This is just to avoid going to deep into synchronization etc.).

The data is then arranged into order and by using the information in the header and the client knows how to parse it (just like a person waiting for someone to get off at a specific stop knows how to greet the person).

and yet

This is the kind of explanation one gives to complete novices. It might have inaccuracies or things that are out of date.

Another thing about this analogy is that the bus can be used to explain a protocol if you say that the amount of data is limited, and that the buses have indices but this might be too confusing for people who are completely new to all of this.

Secondly:

Now that the students have an idea of how information is transmitted between two computers, you can go into explaining that the internet is almost the same, but on a much bigger scale.

You can explain the various headers that exist in HTTP with this list.

Eventually, the every bus that arrives at the client is sent back with a response saying "I arrived at the client..." and the response includes details on the time it took or other things which the client might send to the server.

---

¹Because the students are new to this, you can simply keep it at that, without explaining why those specific numbers or why this is they way it's been done.

Answer 2

One analogy I use in my intro class is transportation. The Internet is the roads, bridges, and highways. The World Wide Web is the cars and trucks that travel along these routes, carrying cargo to/from different places.

Answer 3

Since you mentioned that ideally you were looking for a video, a few years ago I used to show a video to my students: The Good Warriors of the Net - IP for Peace . It is a bit old, but the main concepts are there.

Another that I used to show my students was: How the Internet Works in 5 Minutes

Grab the popcorns! :)

Answer 4

I gave the following EDRi paper to my students, and they found it very clear. I also had them write a 2 page essay explaining how the internet works, and that also helped them digest the paper.

https://edri.org/files/2012EDRiPapers/how_the_internet_works.pdf

Answer 5

The videos on the code.org YouTube channel are some of the most helpful I've found.

For example: How The Internet Works playlist