建立自己的第一頁
分頁與頁面主標題都顯示自己的作品名稱。
CHAPTER 01 · 180 MINUTES
先認得檔案，才不會在電腦裡迷路
從正確資料夾找到
index.html，完成個人標題、自我介紹與學習目標，並能證明瀏覽器開的是自己剛修改的那一份。
3個明確任務
2個接回點
1個可開啟頁面
LEARNING GOALS
本章結束時，你能做出什麼
說出工具分工
能指出資料夾、HTML、編輯器、瀏覽器與路徑各自負責什麼。
按證據排錯
畫面沒更新時，先檢查儲存、目前分頁與檔案位置。
進場檢核與作品接力
可觀察目標：瀏覽器分頁與主標題顯示自己的作品名稱；頁面出現姓名與一句自我介紹；頁面出現學習目標，聯絡連結可實際點擊。
- 能辨識資料夾、檔案、編輯器與瀏覽器的基本分工：指出目前教材資料夾、要修改的檔案與用來查看成果的瀏覽器。 需要補強時從這裡接回
- 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
- 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件與預期可見結果。 需要補強時從這裡接回
輸入：本機 Starter 專案與個人化內容素材
本章輸出：能從正確資料夾開啟自己的第一個網頁，並提供可點擊的聯絡入口
產物類型：mainline；後續用途：第 02 章
PROBLEM & ANALOGY
明明改了，為什麼畫面沒有變？
資料夾像專案的房子，檔名像門牌，編輯器像工作台，瀏覽器像把成品端給客人的服務員，路徑則像外送地址。地址錯了，內容改對也送不到眼前。
本章要解決：忘記儲存、開錯分頁、改到 solution
或把檔名存成 index.html.txt。
合回共同作品：本章完成頁就是作品集的第一塊地基；下一章沿用它加入語意結構與媒體。
把名詞對回畫面
- 資料夾
- VS Code 左側檔案列表中的專案位置。
index.html- 本章要修改的網頁檔案。
- 編輯器
- 中間輸入與修改文字的區域。
- 瀏覽器
- 讀取檔案並顯示網頁結果的視窗。
- 網址列
- 用來確認瀏覽器目前開的是哪一份檔案。
SCOPE
今天的學習邊界
能自己完成
建立資料夾、辨認
index.html、修改文字、儲存、重新整理與比對路徑。
看得懂即可
編輯器、瀏覽器、開發者工具和本機路徑的用途。
刻意延後
CSS、JavaScript 與命令列，先不增加工具焦慮。
CORE IDEAS
三個核心觀念
- 編輯器負責修改與儲存，瀏覽器負責讀取與顯示，兩者不會替對方完成工作。
-
<title>控制分頁名稱，#page-title控制頁面主標題，兩個位置要分開驗證。 - 每次只做「改一處 → 儲存 → 重新整理 → 確認」的小循環，才能知道是哪一步生效。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：先不儲存就重新整理，再故意切到另一個同名檔案，觀察「內容沒變」其實是流程與路徑不一致。
- 看分頁或編輯器是否仍有未儲存標記。
- 比對編輯器麵包屑與瀏覽器網址列的資料夾路徑。
-
確認沒有開到
solution/，檔名也不是index.html.txt。 - 最後才檢查文字是否改在正確元素，修好後重跑原操作。
改了，但畫面沒有變
先查：是否已儲存、是否重新整理、是否開到另一個分頁。
頁面找不到
先查：檔名、資料夾路徑與副檔名是否正確；不要把 index.html 存成 index.html.txt。
只有一個地方改變
先查：分頁標題與頁面主標題本來就是兩個不同位置，要分開驗證。
PRACTICE CONTRACT
Starter 到 Solution 是同一份骨架
開始前先確認這四件事
- 我開啟的是 Starter，不是 Solution。
- VS Code 開啟的是資料夾，不是只開單一檔案。
- 我知道目前要修改的是
index.html。 - 完成修改後，我會回到瀏覽器重新整理。
改成自己的頁面標題
位置：<title> 與
#page-title
結果：分頁與主標題顯示作品名稱。
完成第一段自我介紹
位置：#intro
結果：頁面出現姓名與一句介紹。
寫下學習目標並加入聯絡入口
位置：#goal 與 #contact-link
結果：出現自己的學習目標，聯絡入口可以實際點擊。
提醒：不需要新增 HTML 結構，只修改既有文字與連結。
EVIDENCE
成果證據與檢核
提交一張同時看見成果與網址列的截圖，再用 30 秒指出檔案在哪個資料夾、用什麼修改、用什麼查看。
30 秒說法可以直接照這個句型練習：
我的檔案在 ______ 資料夾；我用 ______ 修改；我用 ______ 查看；畫面沒有更新時，我會先檢查 ______。
截圖至少要看見自己的作品名稱、自我介紹、學習目標、聯絡入口與瀏覽器網址列；不需要截 Solution 程式碼。
公開資料提醒：若不想公開私人信箱，可以使用測試信箱或個人網站；不要在公開截圖中放電話、住址或其他私人資料。
下一章：替同一個頁面的文字、圖片與影片貼上正確 HTML 標籤。