完成個人介紹標題
修改檔案：index.html
完成後看見：頁面顯示姓名與職涯方向
個人介紹
小安｜前端學習者
我喜歡把生活中的問題整理成簡單畫面。
認識我
這是我準備網站作品時最常使用的工作桌。
我正在學什麼
請說明觀看這段內容的目的
CHAPTER 02 · PRACTICE WORKSPACE
HTML 結構、圖片路徑與第三方嵌入
完成含文字、圖片、觀看目的、外部連結與嵌入影片的個人介紹頁
02
Checkpoint 1
1/3
- 01Starter讀懂作品骨架
- 02Checkpoint 1加入第一項能力
- 03Checkpoint 2累積第二項能力
- 04Solution核對完整結果
TASK STATUS
三項任務目前狀態
修正圖片來源與替代文字
修改檔案：index.html
完成後看見：個人照片正常顯示且有可讀的 alt
嵌入影片並補上觀看目的與外部連結
修改檔案：index.html
完成後看見：影片可播放，旁邊有觀看目的與可開啟的外部連結
WORKSPACE
本階段實作區
已完成 TASK-01；先核對可見結果，再前往 TASK-02。
FOCUS TASK · TASK-02
現在只處理：修正圖片來源與替代文字
講解時展開：2 個小型比較
src vs alt｜顯示與替代證據
比較：src 決定圖片從哪裡載入，alt 在圖片無法顯示時提供可讀替代；兩者不能互相取代。
現在做：先把 #profile-photo 的 src 改成 images/workspace.svg，但暫時保持 alt 空白，儲存重整觀察圖片；再補上一句描述，最後把 src 暫時改回 images/missing-workspace.svg，觀察 alt 如何替代圖片，並還原正確 src。
看預期與證據
預期：正確 src 讓本機圖片顯示；圖片失效時，有意義的 alt 仍能提供可讀資訊；src 與 alt 各自負責不同結果。
證據：留下正常圖片、故意破圖但 alt 出現、恢復正常三個狀態的截圖或口述。
相對路徑 vs 檔案位置｜破圖要回頭查來源
比較：圖片顯示問題要同時對照 HTML 路徑與實際檔案位置，不能只換一個檔名碰運氣。
現在做：在 VS Code 檔案列表確認檔案實際位於 images/workspace.svg，從 index.html 所在位置寫出 images/workspace.svg；再故意改成 images/Workspace.svg 重整，比對大小寫錯誤的症狀後還原。
看預期與證據
預期：相對路徑必須從 index.html 所在資料夾出發，且資料夾、檔名、大小寫完全一致；改錯時會產生可重現的破圖。
證據：標出檔案實際位置、HTML src 與瀏覽器破圖／恢復結果三者的對應。
需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
- A｜觀察：在 Checkpoint 1 確認個人標題已完成，再檢查照片 src 仍指向佔位圖片且 alt 為空；找到本章提供的 images/workspace.svg 與一段準備描述。
- B｜預測：重新整理並觀察照片；若沒出現，打開 DevTools Console 檢查路徑錯誤。
- C｜實作：在 index.html 的 #profile-photo 完成「修正圖片來源與替代文字」，一次只處理本任務責任。
- D｜故障：若結果不一致，先依原操作重現，再檢查 #profile-photo 與 index.html，最後重跑原操作。
- E｜驗收：個人照片正常顯示且有可讀的 alt
完成條件：DONE-02：個人照片正常顯示且有可讀的 alt
CONTINUE
繼續完成 TASK-02
前往 Checkpoint 2，依要求完成「修正圖片來源與替代文字」。