CHAPTER 01 · PRACTICE WORKSPACE

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

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

03 Checkpoint 2 2/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-02；先核對可見結果，再前往 TASK-03。

FOCUS TASK · TASK-03

現在只處理：寫下學習目標並加入聯絡入口

修改：index.html

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

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

學習目標 vs 聯絡入口｜內容與行動

比較：學習目標提供內容，聯絡連結提供下一步行動；兩者都要有清楚的 HTML 責任。

現在做：先只改 #goal 的文字，不改 #contact-link 的 href；儲存並重新整理後確認學習目標變成自己的可驗收目標，再指出聯絡入口仍未具備可點擊條件。

看預期與證據

預期：學習目標的內容可以獨立完成並被看見；聯絡入口的文字仍在，但沒有有效 href 時不應宣稱已完成可點擊行為。

證據：用截圖或口述分別指出 #goal 的內容證據與 #contact-link 尚未可操作的證據，說明內容與行動是兩種責任。

mailto vs HTTPS｜可點擊不等於有 href

比較：連結是否能操作，取決於有效 href 與目標格式，不是只看文字像不像連結。

現在做：在 #contact-link 先測試 mailto:student@example.com，儲存並重新整理後點擊；再改成 https://example.com 重跑，最後保留自己選定的有效聯絡目標。

看預期與證據

預期：兩種有效 href 都能讓同一段連結文字產生可操作行為，但 mailto 與 HTTPS 會觸發不同目的；文字本身不是可點擊證據。

證據：記下兩次實驗的 href 與實際行為，最後截圖或口述保留的聯絡目標，證明連結格式與行為相符。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Checkpoint 2 確認標題與介紹已完成，接著找到仍是待填文字的學習目標與沒有 href 的聯絡入口。
  2. B｜預測：重新整理後確認學習目標已出現，再點擊聯絡連結，確認瀏覽器辨識 mailto 或開啟 HTTPS 頁面。
  3. C｜實作：在 index.html 的 #goal 與 #contact-link 完成「寫下學習目標並加入聯絡入口」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 #goal 與 #contact-link 與 index.html，最後重跑原操作。
  5. E｜驗收：頁面出現學習目標，聯絡連結可實際點擊

完成條件：DONE-03：頁面出現學習目標，聯絡連結可實際點擊

我的第一個網頁

小安的第一個網頁

我是小安，正在學習把想法做成網頁。

我的學習目標

請輸入一個可展示的目標

聯絡入口尚未設定

CONTINUE

繼續完成 TASK-03

前往 Solution，依要求完成「寫下學習目標並加入聯絡入口」。

前往 Solution：完成 TASK-03