1 把 HTML 當成一種新語言：它在做甚麼？
重點
- 超文本標示語言（HTML）用來描述網頁內容的結構與語義（例如：這是標題、這是一段文字、這是一個清單）。
- 瀏覽器會「閱讀」HTML，將標籤轉換成畫面；標籤不是用來上色或改字體大小，而是用來表達內容的角色。
- 一般網頁製作常見分工：HTML（結構）＋ CSS（外觀）＋ JavaScript（互動）。
- 寫 HTML 時，要先想清楚：這頁想讓讀者最先看到甚麼、內容應該如何分段與分層。
定義
超文本標示語言（HTML）是一種用「標籤（tag）」標示內容結構的語言。它的主要目標是令內容有清晰的層次與意義，例如：標題、段落、清單、表格、超連結等。
你可以把 HTML 想成「為內容貼標籤」：貼對標籤，讀者和電腦都更容易理解內容。
原理／運作
- 瀏覽器讀取 HTML 原始碼，辨認各種標籤（例如
<h1>、<p>、<a>）。 - 標籤會形成「父子層次」：例如段落內可以包含強調文字；清單包含多個項目。
- 瀏覽器把這些結構轉換成畫面；外觀（顏色、字體、位置）通常交由 CSS 處理。
同一份 HTML，就算換了 CSS 外觀，內容結構仍然保持。
例子
<h1>表示「這是一頁的最主要標題」。<p>表示「這是一段完整句意的文字」。<li>表示「這是清單中的一個項目」。
重點不是「看起來多大」，而是「它在內容中扮演甚麼角色」。
比較
- HTML：內容結構與語義（例如：標題、段落、表格、超連結）。
- CSS：外觀與版面（例如：顏色、字體、邊距、排列）。
- JavaScript：互動與行為（例如：按鈕點擊後顯示訊息、資料即時更新）。
考試或作業寫法：先寫清楚「誰負責甚麼」，再舉例。
常見錯誤
- 只用
<br>強行換行來「排版」，不分段落；結果可讀性差，亦不利日後修改。 - 用標題標籤只是為了「變大字」，忽略內容層次，令整頁結構混亂。
- 把「內容」與「外觀」混在一起：例如把所有文字都用粗體代替真正的標題層級。
修正策略：先用正確標籤建立結構，再用 CSS 調整外觀。
中等程度介紹
初學 HTML 時，最重要的想法是：你不是在「畫」一張網頁，而是在「描述」一份內容。當你用標籤把內容分成標題、段落、清單等， 瀏覽器才能把它組織成一個有層次的頁面。這個層次不單是給人看，也方便電腦理解，例如搜尋引擎、輔助工具、以及日後你自己維護頁面。
另一個常見觀念是分工。HTML 主要負責「這是甚麼內容」；CSS 主要負責「內容看起來怎樣」；JavaScript 則令頁面「會互動」。 在本單元，我們先專注把 HTML 的基本語法寫好，令你能用最少標籤表達清晰的內容結構。
練習：在模擬器寫出你的第一段 HTML（1–3）
練習 1：加入主標題與段落
- 在
<body>內加入<h1>與<p>（依照程式內 TODO）。 - 完成後，預覽應該看到一個標題與一段文字。
練習 2：用 <strong> 與 <em> 表達語義
- 在指定的段落中，把「結構」用
<strong>包住。 - 把「互動」用
<em>包住。
練習 3：把資訊整理成無序清單
- 依照 TODO，把三項資料改寫成
<ul>與<li>。 - 完成後，預覽應該看到三個圓點項目。
2 HTML 文件結構：<head> 與 <body> 的分工
重點
- 一份完整 HTML 文件通常包括：
<!doctype html>、<html>、<head>、<body>。 <head>主要放「設定與資訊」：例如字符編碼<meta charset="utf-8">、頁面標題<title>、以及給不同裝置的顯示設定。<body>放「讀者真正看到的內容」：例如標題、段落、清單、圖片、表格、超連結。- 寫對結構能避免亂碼、避免標題顯示錯誤，亦方便日後加入 CSS 或其他功能。
定義
「文件結構」是指一份 HTML 由外到內如何排列：先宣告文件類型，再用 <html> 包住整份文件，並把「設定」放在 <head>，把「內容」放在 <body>。
一句記法：head 放設定，body 放內容。
原理／運作
- 字符編碼（charset）：告訴瀏覽器用甚麼方式解讀文字。常見用
utf-8，可避免中文變成亂碼。 - 頁面標題（title）：顯示在瀏覽器分頁上，也常用作加入書籤時的名稱。
- viewport：令手機或不同闊度螢幕能較合理地顯示內容（尤其是沒有 CSS 時）。
例子
在入門階段，你可以把以下三項視為「常見基本設定」：
<meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>…</title>
比較
- <title>：瀏覽器分頁標題（不一定顯示在內容中）。
- <h1>：頁面內容的最主要標題（讀者在頁面上看見）。
- <head>：文件設定、資訊、連結外部資源。
- <body>：網頁內容本體。
常見錯誤
- 把
<h1>、<p>等內容寫進<head>，令結構混亂。 - 漏寫
utf-8，導致中文顯示為亂碼。 - 把
<title>當成頁內標題，結果頁面內看不到主標題。
中等程度介紹
一個網頁不是只有「內容」；它還需要一些「設定」令瀏覽器知道應該如何處理文字與畫面。這些設定通常放在 <head>，
例如字符編碼（避免亂碼）、頁面標題（分頁顯示）、以及 viewport（令手機顯示更合理）。
相反，讀者真正閱讀的內容應該放在 <body>。當你把內容與設定分開，日後你加入 CSS、加入互動功能，或把網站上載到萬維網，
都會更容易管理，而且較少出現「明明寫了，卻看不到」或「顯示亂碼」等問題。
練習：文件骨架與 head 設定（4–6）
練習 4：補上 <meta charset> 與 <title>
- 依照 TODO，在
<head>內加入字符編碼與頁面標題。 - 完成後，分頁標題應該顯示「文件結構練習」。
練習 5：加入 viewport
- 依照 TODO，在
<head>內加入 viewport 設定。 - 完成後，嘗試把瀏覽器視窗收窄，觀察顯示效果。
練習 6：分清 head 與 body（把放錯位置的內容修正）
- 把放進
<head>的<h1>移到<body>。 - 把
<h1>的內容按 TODO 改成指定文字。
3 元素、屬性與巢狀：HTML 語法的基本規則
重點
- 元素（element）通常由開始標籤、內容、結束標籤組成，例如
<p>…</p>；也有「空元素」例如<img>。 - 屬性（attribute）寫在開始標籤內，格式一般是
名稱="值"，用來提供額外資訊（例如id、class、src、href）。 - 巢狀（nesting）要正確：標籤不能交錯關閉，必須先關內層，再關外層。
- 原始碼越清晰、縮排越一致，越容易找錯與維護。
定義
- 元素（element）：一個完整的內容單位，例如段落、標題、清單、表格。
- 標籤（tag）：元素的語法外殼；多數元素有開始與結束標籤。
- 屬性（attribute）：加在開始標籤內，用來補充資訊或設定，例如
id、class、src。
原理／運作
HTML 內容有層次：外層元素可以包含內層元素。當你把元素「包住」另一個元素時，瀏覽器會用這個層次理解內容。
- 正確巢狀：先關內層，再關外層（好像括號配對）。
- 錯誤巢狀：交錯關閉會令瀏覽器難以判斷結構，亦會導致顯示怪異。
找錯技巧：由最內層開始檢查每個開始標籤是否有對應結束標籤。
例子
- 在超連結指定位置：
<a href="…" >…</a> - 在圖片指定來源：
<img src="…" alt="…" /> - 為元素命名：
id="intro"（同一頁面內應唯一） - 為多個元素分組：
class="note"（可重覆使用）
比較
- id：像「身份證號碼」，同一頁面內通常只用一次；常用於頁內跳轉（
#id）或精準選取。 - class：像「群組標籤」，可以多人同用；常用於套用同一風格或同一類行為。
常見錯誤
- 標籤交錯：例如先開
<p>再開<strong>，卻先關</p>。 - 屬性值漏引號：容易令瀏覽器誤解後面的內容。
- 路徑（src / href）寫錯：尤其是相對路徑最常見；一個
../寫少或寫多都會找不到檔案。
中等程度介紹
HTML 的語法看似由很多括號組成，其實規則很一致：用標籤把內容分成一個個元素，並用巢狀關係表達「誰包含誰」。 當你能穩定寫對開始與結束標籤，並保持縮排整齊，你就能讀懂大部分入門網頁的結構。
屬性則是為元素補充資訊，例如超連結的目的地、圖片的來源、或元素的識別名稱。這些資訊對瀏覽器、對日後加入 CSS、甚至對無障礙閱讀都很重要。 因此，寫 HTML 不只是把內容顯示出來，更是把內容的「附加資訊」寫清楚。
練習：修正巢狀、加入屬性、建立表格（7–10）
練習 7：修正巢狀錯誤
- 修正程式內的巢狀錯誤，令
<p>與<strong>的開始／結束標籤配對正確。 - 完成後，預覽應該正常顯示整句文字，而且「元素」兩字會被強調。
練習 8：加入 id 與 class 屬性
- 把指定段落加入
id="intro"。 - 新增一個段落，加入
class="note"（依照 TODO）。
練習 9：加入圖片並設定 alt
- 依照 TODO 加入一個
<img>元素。 - 設定
src為指定路徑，並寫一段有意義的alt。
練習 10：建立表格
- 依照 TODO 建立
<table>。 - 必須包含一行表頭（
<th>）與兩行資料（<td>）。
4 文字與語義：讓網頁內容有清晰層次
重點
- 標題標籤（
<h1>至<h6>）用來表示內容層級；一般一頁只會有一個最主要的<h1>。 - 段落用
<p>：每段應表達一個完整意思，令閱讀更流暢。 <strong>表示「重要」；<em>表示「語氣重點」；它們不只是外觀。- 內容要以讀者角度安排：先總覽，再細節；善用小標題與清單。
定義
「語義化」是指你用合適的標籤表達文字的角色，例如：標題是標題、段落是段落、重要字句用 <strong> 表示重要。
語義化令網頁更易讀、更易找重點，也更易維護。
原理／運作
- 讀者掃視網頁時，會先看標題；標題層級令內容有「大綱」。
- 同一主題下的小標題（例如
<h2>）可以把內容分塊，減少「一大段字」的壓力。 - 段落（
<p>）把句意分開，讓資訊更易吸收。
例子
- h1：一頁的主題，例如「校園開放日」。
- h2：主題下的分段，例如「活動簡介」「時間表」「聯絡」。
- p：解釋與描述文字。
- strong：重要資訊，例如「日期」「截止時間」。
- em：提示語氣或需要讀者留意的語句。
比較
- 用標題表示層級：清晰、有一致結構，方便讀者快速找到想看的部分。
- 只用大字或粗體：外觀可能相似，但層次不清，日後改版或加入導覽會更困難。
常見錯誤
- 標題層級跳躍（例如
<h1>後直接用<h4>），令結構不自然。 - 長文只用
<br>強行換行，不用<p>分段，導致內容難讀。 - 把
<strong>當成「加粗工具」，每句都粗體，結果重點反而消失。
中等程度介紹
設計一個易讀的網頁，關鍵是把內容分層：先用主標題告訴讀者「這頁講甚麼」，再用小標題把內容分成幾個部分，最後用段落與清單解釋細節。 當內容層次清楚，讀者就能用最短時間找到需要的資訊。
另外，<strong> 與 <em> 是用來表達文字的重要程度與語氣重點，並非單純的外觀效果。
若你習慣用正確標籤表達語義，日後即使改用不同 CSS 風格，重點仍會保留，亦更容易建立一致的版面。
練習：標題層級、段落與強調（11–13）
練習 11：把文字改寫成標題與段落
- 依照 TODO，用
<h1>、<h2>、<p>表達指定內容。
練習 12：把重要資訊與提醒語氣標示出來
- 新增一段段落，並用
<strong>與<em>包住指定字句。
練習 13：用段落分段（不要用 br 當分段）
- 依照 TODO，用兩個段落寫出兩句內容。
- 要求：不要用
<br>來「分段」。
5 超連結與劃一資源定位（URL）：把頁面連成網站
重點
- 超連結用
<a>建立，目的地寫在href屬性內。 - 劃一資源定位（URL）用來描述資源位置；常見包括協定（例如
https）、網域、路徑等部分。 - 連結可分為：外部連結（完整 URL）、相對路徑連結（同一網站內）、以及頁內連結（
#id）。 - 做網站時，導覽應該清楚：讓讀者知道「我現在在哪裡」「可以去到哪裡」。
定義
- 超連結：讓讀者由一個頁面跳到另一個頁面或資源的機制。
- 劃一資源定位（URL）：用來指出資源位置的描述方式，例如某個網頁、圖片或檔案。
原理／運作
- 瀏覽器讀到
<a href="…">，知道目的地位置。 - 如果目的地是網頁資源，瀏覽器會向伺服器發出請求（常見會用到 超文本傳輸協定（HTTP） 或 HTTPS）。
- 伺服器回傳內容後，瀏覽器再把新頁面顯示出來。
例子
- 外部連結：
href="https://…" - 相對路徑：
href="images/photo.jpg"或href="../index.html" - 頁內連結：
href="#contact"（配合某元素的id="contact"）
比較
- 外部 URL：完整寫法，任何地方都能指向同一資源。
- 相對路徑：以目前檔案位置為基準，適合同一網站內部連結（搬走資料夾可能需要調整）。
- #fragment：用來跳到同一頁面的某個位置（常用於「回到頁首」「目錄跳轉」）。
常見錯誤
- 相對路徑的
../寫錯，導致找不到頁面或圖片。 - 寫了
href="#contact"，但頁面內沒有任何元素的id="contact"。 - 把連結文字寫得太含糊（例如「按這裡」），讀者不清楚會去到哪裡。
中等程度介紹
網站之所以「像網站」，是因為頁面之間能互相連結。超連結不只是方便跳頁，它也影響讀者對網站結構的理解： 如果導覽清晰，讀者會知道每一頁的用途，並能快速返回需要的位置。
在語法上，超連結的核心只有兩件事：目的地（href）與可點擊的文字。難點往往在路徑：
你需要分清外部 URL 與相對路徑，並在頁內跳轉時記得配對 id。只要把這三種連結練熟，你就能把多個頁面組成一個網站。
練習：超連結、URL 與相對路徑（14–16）
練習 14：建立外部超連結
- 依照 TODO，加入一個指向萬維網聯盟（W3C）的超連結。
練習 15：頁內連結（#fragment）
- 加入「跳到聯絡資料」連結（
href="#contact"）。 - 為指定小標題加入
id="contact"。 - 在最底加入「回到頁首」連結（
href="#top"）。
練習 16：相對路徑連結到本網站頁面
- 依照 TODO，用
<nav>建立兩個連結（CCH1、CCH2）。 - 重點：確保
href的相對路徑正確。
6 圖片、清單、表格與上載：讓內容變成可發佈的網頁
重點
- 圖片用
<img>，必須提供有意義的alt；src路徑要正確。 - 清單（
<ul>／<ol>）適合表達多項資訊；表格（<table>）適合表達有「欄與列」的資料。 - 建立網站時，要管理檔案結構：例如把圖片放在固定資料夾，檔名避免空格與怪字元。
- 上載到萬維網（WWW）前，先在本機測試連結與圖片是否正常，避免「上載後全部斷鏈」。
定義
把網頁「上載到萬維網」是指把你的 HTML 檔案與資源（圖片等）放到一台可被公眾存取的網頁伺服器上，讓別人能用 URL 透過瀏覽器瀏覽。
原理／運作
- 瀏覽器顯示網頁時，會按
src／href去找檔案。 - 如果你用相對路徑，路徑是以「目前這份 HTML 的位置」作基準計算。
- 上載後，伺服器的資料夾結構若與你本機不同，連結就會失效。
因此，建立網站時要保持資料夾結構一致，並盡量使用清晰的路徑。
例子
- index.html：常用作首頁。
- images/：放圖片。
- pages/：放其他內容頁（可選）。
檔名建議：全小寫、用連字號 - 分隔（例如 open-day.html）。
比較
- 本機預覽：你在自己的電腦打開檔案；路徑可能「碰巧」有效。
- 上載後：別人由伺服器下載你的 HTML；所有路徑都必須對應伺服器上的真實位置。
常見錯誤
- 忘記把圖片檔一起上載，或把圖片放錯資料夾。
- 連結寫了
photo.JPG，但檔名其實是photo.jpg（部分伺服器會分大小寫）。 - 檔名含空格或中文特殊符號，導致網址難處理。
- 漏寫
alt，令圖片無法顯示時讀者完全不知道內容。
中等程度介紹
當你能用 HTML 寫出標題、段落、清單與表格後，你已經可以做出「內容清晰」的網頁。下一步是把內容變得更完整：加入圖片、整理時間表、加上導覽連結， 令讀者能在不同部分之間快速切換。
若你希望把作品發佈到萬維網，最常見的問題其實不是語法，而是檔案管理：圖片放在哪裡？連結路徑是否正確？上載時是否漏了某個檔案？ 因此，從一開始就養成「整齊資料夾」與「清晰路徑」的習慣，會大大減少上載後的錯誤。
練習：圖片、清單、表格與綜合頁面（17–20）
練習 17：加入圖片（含 alt）與說明段落
- 加入指定圖片（依照 TODO），並寫一段合適的替代文字
alt。 - 在圖片下方加入一段說明文字。
練習 18：同一頁同時使用清單與表格
- 用無序清單列出三項物品。
- 建立時間表表格（至少兩行資料）。
練習 19：綜合製作一頁「活動資訊」
- 依照 TODO 完成：頁內導覽（
<nav>）、三個章節（intro/schedule/contact）、圖片、表格，以及回到頁首連結。 - 建議：完成一個 TODO 就立即預覽一次，逐步修正。
練習 20：獨立完成「學習資源頁」（最難）
- 按程式內要求，自行完成整頁內容（主標題、導覽、章節、圖片、表格、清單與回到頁首連結）。
- 你可以自行決定每個章節的文字內容，但必須符合要求的結構。
- 頁面是否有清晰主標題（h1）與小標題（h2）？
- 是否每個超連結都能說明目的地？相對路徑是否計算正確？
- 圖片是否有
alt？上載時是否記得連同圖片檔一起上載？ - 表格是否真的需要用表格？（表格應用於有欄列的資料。）