A page that exists存在的網頁
Follow the dot all the way. How many times does a message leave your computer before the page appears?
跟著光點走完全程。網頁出現之前,有幾則訊息從你的電腦送出去?
How Computers Work · Unit 4 · Lesson 13 · 電腦概論 單元四 第十三課
Opening a web page is a conversation between two computers. Follow it in 3D: your computer asks an address book for a number, sends a request to a server far away, and gets back a few lines of text, which the browser draws as a page. Then edit a page’s text yourself, take a web address apart, and decide who is asking and who is answering.
打開一個網頁,是兩台電腦之間的一段對話。在 3D 裡跟著走一趟:你的電腦先向地址簿問一個數字,再向遠方的伺服器送出請求,拿回幾行文字,瀏覽器把它畫成頁面。接著自己改一改網頁的文字、把一個網址拆開來看,再分辨誰在問、誰在答。
A web page does not live on your computer. Your browser asks another computer, called a server, to send it. The server sends back a file of text, and the browser turns that text into the page you see. Before it can ask, the browser has to turn the site’s name into a number, and it does that by asking the DNS.
網頁並不放在你的電腦裡。你的瀏覽器向另一台叫做伺服器的電腦提出請求,請它把網頁送過來。伺服器送回一份文字檔,瀏覽器再把這份文字變成你看到的頁面。提出請求之前,瀏覽器得先把網站的名字換成一個數字,這件事要去問 DNS。
3D Model · 3D 模型
On the left is your computer, with a web browser. On the right is a server, a computer that stores web pages. At the back is the DNS, the address book that turns names into numbers. Choose an address and press Go, then follow the glowing dot. The list on the right fills in what is being sent at each stop. Try all four addresses: two pages that exist, one page that does not, and one name that does not exist at all.
左邊是你的電腦,上面有瀏覽器。右邊是伺服器,一台存放網頁的電腦。後面是 DNS,把名字換成數字的地址簿。選一個網址,按「前往」,跟著光點走。右邊的清單會填上每一站送的是什麼。四個網址都試試:兩個存在的網頁、一個不存在的網頁,還有一個根本不存在的名字。
Drag to turn · 拖曳旋轉
This 3D model needs WebGL, which this browser does not support. The addresses and the six stops below still work, and so do the reading and the games.
這個瀏覽器不支援 WebGL,無法顯示 3D 模型;下面的網址和六站清單照樣能用,課文和小遊戲也都能用。
A teaching model. The names, numbers, and pages here are made up for the example: example.com is a name set aside for use in examples, and the numbers come from ranges reserved for documentation, so none of them is a real site’s address. A real page usually needs many trips, one for each picture and each file. The data travels in small chunks called packets, through many machines along the way. The DNS is not one book but many servers. And today most of this conversation is kept secret from anyone in between, which is the subject of the next lesson.
這是教學用的示意模型。這裡的名字、數字和網頁都是為了舉例編的:example.com 是保留給舉例用的名字,那些數字出自保留給文件使用的區段,所以它們都不是任何真實網站的地址。真的網頁通常要來回很多趟,每張圖、每個檔案各一趟。資料會切成一小塊一小塊的「封包」,途中經過很多台機器。DNS 也不是一本簿子,而是很多台伺服器。還有,今天這段對話大多會對中途的人保密——那是下一課的主題。
Model and code are drawn and programmed by My Culture Connect. Every step of the four trips is tested in tools/computers/test/web.test.mjs.
模型與程式由人師教育協會自行繪製、撰寫;四趟路程的每一步都有自動測試(tools/computers/test/web.test.mjs)。
Reading · 英文閱讀
You type an address, press Enter, and a page appears. It feels as if the page were already inside your computer. It is not. It is stored on another computer, perhaps in another country, and your computer has to ask for it. Opening a web page is a short conversation between two machines.
The two machines have names. Yours is the client: your computer or phone, and the web browser on it. The other is a server: a computer that stores web pages and sends them out when asked. The client asks. The server answers. That is the pattern of the whole web.
First there is a small problem. You typed a name, such as example.com, but computers find each other by number. So the browser asks the Domain Name System, or DNS. It works like an address book: give it a name, and it gives back a number called an IP address, which looks something like 192.0.2.10. Now the browser knows where to send its question.
Next, the browser sends the server a request. It is a short message that says, in effect, “please send me this page.” The server answers with a code and, if all is well, the page. The code 200 means OK. The code 404 means “not found”: the server is there, but it has no page at that address.
And what is the page? It is a file of text, written in a language called HTML. Tags in the text say what each piece is: this is a heading, that is a paragraph. The browser reads the text and draws the page from it. If the page has pictures, the browser asks for each of them in the same way, one request after another.
The web is not the same thing as the internet. The internet is the worldwide network that connects the computers, and the web is one of the services that run on it. Email and instant messaging are others. Each time you tap a link, the same conversation happens again: a name, a number, a request, an answer, and a page drawn from text.
Questions · 閱讀理解
Which computer is the client and which is the server? What does each one do?
Why does the browser ask the DNS before it asks the server?
What does a server send back, and what does the browser do with it?
Words & Phrases · 生字及片語
Quick Check · 小測驗
1. Where is a web page stored before you open it?
2. What does the DNS do?
3. What does the code 404 mean?
4. What is a web page made of when it leaves the server?
5. According to the reading, how are the web and the internet related?
Try It in the Model · 在模型裡試試
Use “One stop at a time” to go slowly, or tap any row in the list to jump to that stop.
想慢慢看就用「一站一站走」,也可以點清單裡的任何一站直接跳過去。
Follow the dot all the way. How many times does a message leave your computer before the page appears?
跟著光點走完全程。網頁出現之前,有幾則訊息從你的電腦送出去?
Compare with the first trip. Which stop shows exactly the same thing, and which one changes?
和第一趟比一比。哪一站的內容一模一樣?哪一站不一樣?
The server is found, and it replies. So what exactly could not be found?
伺服器找到了,它也回話了。那到底是什麼找不到?
This time the dot never reaches a server. Why not?
這一次,光點根本沒有到達任何伺服器。為什麼?
Try It · 自己試試
On the left is the kind of file a server sends: plain text with tags. On the right is what a browser draws from it. Change the words between the tags. Then change the color, or add another line of your own.
左邊是伺服器送來的那種檔案:帶著標籤的純文字。右邊是瀏覽器照著它畫出來的樣子。改一改標籤中間的字,再改改顏色,或自己多加一行。
What the browser draws · 瀏覽器畫出來的樣子
This little browser understands only two tags, <h1> for a heading and <p> for a paragraph, and one setting, color, with these values: black, red, green, blue, orange, purple, teal, and brown. Real HTML has many more tags, and real pages set colors in a separate language called CSS. Nothing you type here is sent anywhere.這個小瀏覽器只懂兩種標籤:<h1> 是標題、<p> 是一段話;只懂一個設定 color,可以用的值是 black、red、green、blue、orange、purple、teal、brown。真的 HTML 有多得多的標籤,真的網頁則用另一種叫 CSS 的語言來設定顏色。你在這裡打的東西不會送到任何地方。
See Why · 看看為什麼
A web address is called a URL. It looks like one long word, but it has parts, and each part is used at a different stop on the trip. Choose an address, then tap each colored part.
網址的正式名稱是 URL。它看起來像一個很長的字,其實分成幾個部分,每一部分在路程的不同站派上用場。選一個網址,再點一點每個彩色的部分。
Choose an address · 選一個網址
protocol · 協定 domain name · 網域名稱 path · 路徑
Real addresses can have more parts than these three. The second address is the real address of this course.真的網址還可以有這三段以外的部分。第二個網址是這門課真正的網址。
Game · 小遊戲
Eight jobs from the trip. Each one is done by the client (your computer and its browser), by the server, or by the DNS. Decide which.
路程中的八件事。每一件不是用戶端(你的電腦和瀏覽器)做的,就是伺服器或 DNS 做的。分分看。
Right on the first try · 第一次就答對 0 / 0
Stories Behind the Web · 全球資訊網的故事
Four short stories about asking and answering.
關於「發問和回答」的四個小故事。
1989
According to Britannica, the development of the World Wide Web was begun in 1989 by Tim Berners-Lee and his colleagues at CERN, an international scientific organization based in Geneva, Switzerland. They created a protocol called HTTP, which standardized communication between servers and clients, and their text-based web browser was made available for general release in January 1992. The request in this lesson’s model, “GET /pets,” is written in that protocol.
根據大英百科,全球資訊網的開發始於 1989 年,由提姆・柏內茲-李(Tim Berners-Lee)和他在 CERN 的同事著手進行;CERN 是設在瑞士日內瓦的國際科學組織。他們訂出一套叫 HTTP 的協定,把伺服器和用戶端之間的溝通方式統一起來;他們那個只有文字的瀏覽器,在 1992 年 1 月開放給大眾使用。這一課模型裡的請求「GET /pets」,就是照這套協定寫的。
1993
The first browsers showed text. Britannica says the web gained rapid acceptance with a browser called Mosaic, developed by Marc Andreessen and others at the University of Illinois and released in September 1993. Mosaic let people use the same point-and-click actions they already knew from personal computers. By the middle of the 1990s the World Wide Web had millions of active users.
最早的瀏覽器顯示的是文字。大英百科說,全球資訊網迅速被大家接受,靠的是一個叫 Mosaic 的瀏覽器;它由馬克・安德森(Marc Andreessen)等人在伊利諾大學開發,1993 年 9 月發布。Mosaic 讓人用在個人電腦上早已熟悉的「用滑鼠點一下」來操作。到了 1990 年代中期,全球資訊網已經有幾百萬名活躍的使用者。
192.0.2.10
Every address in this lesson’s model was chosen on purpose so that it belongs to no real site. The organization that looks after internet names keeps example.com and example.org for use as examples in documents. And an internet standard sets aside three blocks of numbers, beginning 192.0.2, 198.51.100, and 203.0.113, for use in documentation. So a textbook can print an address without pointing its readers at somebody’s real computer.
這一課模型裡的每一個地址都是特意挑的,好讓它不屬於任何真實的網站。管理網際網路名稱的機構保留了 example.com 和 example.org,專門給文件舉例用。另外有一份網際網路標準,保留了三個區段的數字(開頭是 192.0.2、198.51.100、203.0.113)給文件使用。這樣一來,課本印出一個地址,就不會把讀者引到某個人真正的電腦上。
404
Mozilla’s reference explains that 404 means the server cannot find what was asked for, and that links leading to a 404 are often called broken or dead links. While this lesson was being written, we asked CERN’s website for a page that turned out not to exist. CERN’s “page not found” page answered with a small joke: “Talking of web servers, this is a picture of the world’s first web server,” Tim Berners-Lee’s machine at CERN.
Mozilla 的參考文件說,404 表示伺服器找不到被要求的東西,而通往 404 的連結常被稱為壞掉的連結或死連結。寫這一課的時候,我們向 CERN 的網站要了一個後來發現不存在的網頁。CERN 的「找不到網頁」頁面用一個小玩笑回答:「說到網頁伺服器,這是世界上第一台網頁伺服器的照片」——柏內茲-李在 CERN 用的那一台機器。
Myth vs. Fact · 常見迷思
✗ Myth · 迷思The web and the internet are the same thing.全球資訊網和網際網路是同一件事。
✓ Fact · 事實The internet is the worldwide network of computers. The web is one service that runs on it; Britannica calls it the leading information retrieval service of the internet.網際網路是全世界電腦連成的網路。全球資訊網是在它上面運作的一種服務;大英百科稱它是網際網路上最主要的資訊檢索服務。
✗ Myth · 迷思A web page is a picture that the server sends.網頁是伺服器送來的一張圖。
✓ Fact · 事實The server sends text, written in HTML. The browser on your computer draws the page from that text.伺服器送來的是用 HTML 寫的文字。網頁是你電腦上的瀏覽器照著那份文字畫出來的。
✗ Myth · 迷思404 means the internet is not working.404 表示網路壞了。
✓ Fact · 事實It means the opposite: your request reached the server and the server replied. It just has no page at that address.恰恰相反:你的請求到了伺服器,伺服器也回話了,只是那個位置沒有網頁。
✗ Myth · 迷思The name you type is the server’s address.你打的名字就是伺服器的地址。
✓ Fact · 事實The name is for people. The real address is a number, and the DNS looks it up for the browser.名字是給人看的。真正的地址是一個數字,由 DNS 替瀏覽器查出來。
Remember It · 記憶口訣
That is the whole web.
整個全球資訊網就是這樣。
The DNS is the address book.
DNS 是地址簿。
Two answers a server can give.
伺服器的兩種回答。
The browser does the drawing.
畫的是瀏覽器。
Before You Start · 動手之前
Classroom Activity 1 · 課堂活動一
You need · 準備材料
Steps · 步驟
Count the trips: two round trips for one page. Then put a picture on a page, kept in a separate folder, and count again. In Taiwan’s junior high Information Technology curriculum, this lesson matches the topic “System platforms”: 資 S-IV-3, concepts of network technology, and 資 S-IV-4, concepts of network services, whose notes name the World Wide Web as an internet service.
數一數走了幾趟:一個網頁要來回兩趟。接著在網頁裡放一張圖(圖放在另一個資料夾),再數一次。對照十二年國教國中「資訊科技」的學習內容,這一課對應「系統平台」主題:資 S-IV-3 網路技術的概念與介紹、資 S-IV-4 網路服務的概念與介紹(附錄的說明把全球資訊網列為網際網路服務之一)。
Classroom Activity 2 · 課堂活動二
You need · 準備材料
Steps · 步驟
Other browsers have a similar command, and the name differs a little from one to another. The real page is much longer than the model’s, with many more kinds of tags, but it is the same kind of thing: text. And the last step should give you a real 404.
其他瀏覽器也有類似的指令,名稱各家略有不同。真的網頁比模型裡的長得多,標籤的種類也多得多,但它是同一種東西:文字。最後一步,你應該會拿到一個真正的 404。
Go Further · 延伸閱讀
Sources · 資料出處
Facts on this page were checked against these sources (October 2026); the model’s names, numbers, and pages are made up for the example, and every step is tested · 本頁的事實依下列資料查證(2026 年 10 月);模型裡的名字、數字和網頁都是為了舉例編的,每一步都有測試