Topic 1 · 1 of 43

Introduction to Internet and Web Technologies

All in one: every word of the chapter, side by side

What this example compares

On the road: device vs router vs ISP vs server
The rules of the road: packet vs IP vs TCP (TCP/IP)
Internet vs Web: the road vs one kind of traffic, beside email, streaming, games and WhatsApp
Three inventions: HTML vs HTTP vs URL, and the timeline from ARPANET (1969) to the living standard
Who asks, who answers: browser (client) vs web server, HTTP request vs response
Plain or locked: http:// vs https:// (TLS)
The server sends text: text shown vs obeyed, hidden (a comment) vs secret (Ctrl+U, DevTools)
The parts of a URL: protocol vs domain vs path vs query string; full vs relative
Three languages, three jobs: HTML (structure) vs CSS (presentation) vs JavaScript (behaviour)
Markup vs programming: 2 + 3 shows text; JavaScript calculates; HyperText
The skeleton: <head> vs <body>, <h1> vs , <meta charset>, <title>
Who writes the rules: W3C vs WHATWG vs IETF vs ECMA, and your tools MDN and the validator
What happens when you click: click, request, process, response, render — and the wrong orders

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see thirteen panels of labelled boxes. Panel 3 shows five services, only the Web marked YES, all sitting on one dark “Internet” bar. Panel 4 has a second row: the timeline from 1969 to today. In panel 7 the first box shows the letters Build. while the second shows Build. in bold, and the comment box shows only “Only this shows.” Panel 8 colours the four parts of the URL. Panel 9 shows the same words and button three times: plain, then green, and only the third Join button changes to “Joined!” when clicked. In panel 10 the HTML box shows the characters 2 + 3, and the button shows 5 when clicked. Panel 11 shows a big bold “Web Lab” heading beside the same words as a plain paragraph. There is no Console panel: the page prints nothing.

Quick check: in panel 7, why does deleting two comment marks make the “answer key” appear?

Because the answer key was already in the text the server sent; the comment only told the browser not to draw it. That is why nothing sent to a browser is secret: anyone can read it with Ctrl+U (View Source) or DevTools, so real secrets must stay on the server.