CHAPTER 01 · PRACTICE WORKSPACE

網頁、檔案、瀏覽器與開發工具

能從正確資料夾開啟自己的第一個網頁，並提供可點擊的聯絡入口

01 Starter 0/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01本階段處理

改成自己的頁面標題

修改檔案：index.html

完成後看見：瀏覽器分頁與主標題顯示自己的作品名稱

TASK-02稍後處理

完成第一段自我介紹

修改檔案：index.html

完成後看見：頁面出現姓名與一句自我介紹

TASK-03稍後處理

寫下學習目標並加入聯絡入口

修改檔案：index.html

完成後看見：頁面出現學習目標，聯絡連結可實際點擊

WORKSPACE

本階段實作區

先確認作品目前能做什麼、還缺什麼，再從 TASK-01 開始修改。

FOCUS TASK · TASK-01

現在只處理：改成自己的頁面標題

修改：index.html

完成後：瀏覽器分頁與主標題顯示自己的作品名稱

講解時展開：2 個小型比較

title vs h1｜分頁與畫面各自負責

比較：<title> 影響瀏覽器分頁，h1 影響頁面內容；兩者不是同一個顯示位置。

現在做：先只改 <title>，不改 #page-title；儲存並重新整理後記錄分頁與頁面主標題的變化。接著還原或換回原值，只改 #page-title，再次儲存並重新整理比較。

看預期與證據

預期：只改 <title> 時只有瀏覽器分頁變化；只改 #page-title 時只有頁面最大的主標題變化。

證據：用兩組前後截圖或口述，指出每次只改一個位置後哪個畫面變化，並說明兩個位置的責任不同。

修改—儲存—重新整理｜確認變化真的出現

比較：編輯器裡的修改只有儲存並重新整理後，才算完成一次可驗收的畫面循環。

現在做：先在編輯器改 #page-title 的文字，但不要儲存就重新整理，記錄畫面是否改變；再儲存並重新整理，確認新標題出現。最後說出儲存與重新整理各自負責哪一步。

看預期與證據

預期：未儲存時瀏覽器仍保留舊內容；儲存後重新整理才看見新標題，且能分別說出儲存與重新整理的責任。

證據：記錄未儲存與儲存後兩次狀態，指出哪個證據證明檔案已寫入、哪個證據證明瀏覽器已重新讀取。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Starter 同時看瀏覽器分頁與頁面 h1，確認兩處仍是課程預設／待填作品名稱。
  2. B｜預測：重新整理頁面，先看瀏覽器分頁，再看頁面最大的主標題。
  3. C｜實作：在 index.html 的 <title> 與 #page-title 完成「改成自己的頁面標題」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 <title> 與 #page-title 與 index.html，最後重跑原操作。
  5. E｜驗收：瀏覽器分頁與主標題顯示自己的作品名稱

完成條件：DONE-01：瀏覽器分頁與主標題顯示自己的作品名稱

我的第一個網頁

請輸入作品名稱

請輸入姓名與自我介紹

我的學習目標

請輸入一個可展示的目標

聯絡入口尚未設定

CONTINUE

開始 TASK-01

前往 Checkpoint 1，依要求完成「改成自己的頁面標題」。

前往 Checkpoint 1：完成 TASK-01