組出語意結構
能用標題、段落與區塊說清楚每段內容的責任。
CHAPTER 02 · 180 MINUTES
HTML 是替內容貼上正確標籤
沿用第一堂的個人頁，完成姓名與方向、可讀替代文字的照片，以及能在頁面內播放的嵌入影片。
3個明確任務
2個接回點
1個完整介紹頁
LEARNING GOALS
本章結束時，你能做出什麼
正確載入圖片
會從目前檔案走相對路徑，並寫出有意義的 alt。
嵌入第三方內容
能辨認一般觀看網址和 iframe embed 網址。
進場檢核與作品接力
- 具備第 01 章成果：能從正確資料夾開啟自己的第一個網頁，並提供可點擊的聯絡入口：不看答案，展示或口述第 01 章成果，並說出一項可見證據。 需要補強時從這裡接回
- 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
- 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件與預期可見結果。 需要補強時從這裡接回
輸入：第 01 章產物：能從正確資料夾開啟自己的第一個網頁，並提供可點擊的聯絡入口
本章輸出：完成含文字、圖片、觀看目的、外部連結與嵌入影片的個人介紹頁
產物類型：mainline；後續用途：第 03 章
PROBLEM & ANALOGY
有內容，為什麼仍擠成一團或顯示破圖？
搬家紙箱要貼「書籍」「衣物」標籤；HTML 標籤也告訴瀏覽器盒子裡是什麼。圖片路徑則像從目前房間走到照片櫃的導航。
本章要解決：內容缺少結構、圖片路徑找不到、alt 無法替代畫面，以及一般影片網址不能直接當 embed 網址。
接住上一章：沿用已能找到與開啟的個人頁，不另建無關作品。
把名詞對回畫面與程式
- 標籤
- 決定內容是標題、段落、區塊或媒體，不是用來改顏色。
- src
- 圖片或 iframe 要載入的資源位置；路徑錯就會載不到。
- alt
- 圖片失效或讀屏時提供的文字，不要只寫「圖片」。
- iframe
- 把外部頁面或影片嵌入目前頁面的容器。
- embed URL
- 影片來源提供給 iframe 的嵌入網址，不等於一般觀看網址。
SCOPE
今天的學習邊界
能自己完成
標題層級、img 的 src/alt、相對路徑與 iframe 的 embed
src。
看得懂即可
header、main、section 和
iframe 的用途。
刻意延後
CSS 排版、下載影片、影音 API 與複雜 iframe 安全策略。
CORE IDEAS
三個核心觀念
- 標籤不是裝飾，它說明內容在頁面上的角色與層級。
-
相對路徑從目前
index.html所在位置出發，資料夾或檔名改變時路徑也要跟著改。 - 圖片即使看得到仍需要能替代畫面的 alt；影片則要使用來源提供的嵌入碼。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：改錯圖片檔名大小寫，再刪掉 src 的結尾引號，觀察破圖與後續屬性被吃掉的差異。
- 確認元素真的有
src，引號和結束標籤完整。 - 從
index.html所在資料夾走一次相對路徑。 - 逐字比對資料夾、檔名、大小寫與副檔名。
- 把資源 URL 單獨開啟；影片再確認用的是「嵌入」網址。
照片是破圖
先查：先查檔名、大小寫、副檔名與 src 相對路徑；再單獨開資源 URL。
影片區是空白
先查：先確認 iframe 的 src 是 embed 網址，再看瀏覽器是否阻擋嵌入。
頁面結構怪怪的
先查：檢查標籤是否成對、引號是否完整，避免後面的屬性被誤吃。
PRACTICE CONTRACT
Starter 到 Solution 是同一份骨架
開始前先確認這四件事
- 我開的是 Starter，且目前修改的是 index.html。
- 我已先找到標題、圖片、影片在畫面上的位置。
- 圖片檔案存在，檔名大小寫與副檔名完全一致。
- 每次只改一項，儲存後重新整理再看結果。
完成個人介紹標題
檔案：index.html
位置：#profile-title
結果：頁面顯示姓名與職涯方向
修正圖片來源與替代文字
檔案：index.html
位置：#profile-photo
結果：個人照片正常顯示且有可讀的 alt
嵌入影片並補上觀看目的與外部連結
檔案：index.html
位置：#intro-video、#media-purpose、#media-source
結果：影片可播放，旁邊有觀看目的與可開啟的外部連結
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
我在 ______ 使用 ______ 標籤；圖片從 ______ 路徑載入，alt 是 ______；影片使用 ______ embed 網址。
alt 必須描述照片內容；外部影片請確認來源允許嵌入，不要在公開作品放私人資料。
截圖完整介紹頁，並用一句話說明 alt 如何在圖片失效時替代畫面。
下一章：替相同內容加入背景、文字顏色與標題尺寸，不改變 HTML 責任。