你好，未來網頁設計師！

歡迎來到精彩的網頁設計（Web Page Design）世界！本章將涵蓋最重要的「關鍵概念」——這些是你在開始編寫程式碼之前，必須掌握的基礎構件與規則。

如果一開始覺得有點棘手，不用擔心！ 我們會將複雜的概念拆解成簡單易懂的步驟。你可以把這一章想像成學習建築大師的基本工具——一旦掌握了這些工具，建設任何東西都難不倒你！

快速重溫：什麼是網頁？

網頁本質上是一個以特殊程式碼編寫的文件，網頁瀏覽器（如 Chrome 或 Safari）可以讀取這些程式碼並將其視覺化顯示出來。

1. 基礎：HTML 與標記語言

什麼是 HTML？

HTML 的全名是 HyperText Markup Language（超文字標記語言）。它是用來構建你所看到的幾乎每一個網頁之結構與內容的語言。

  • 超文字（HyperText）： 這代表文字是透過超連結（hyperlinks）相互連接的，讓你可以在不同頁面之間跳轉。
  • 標記（Markup）： 這點很關鍵！HTML 是一種標記語言，而不是程式語言。它不會命令電腦執行運算，而是告訴瀏覽器內容應該如何進行「結構化」與「標記」。
類比提示！

試想人體構造：

  • HTML 是骨骼（結構）： 它定義了頭部（標題）、軀幹（段落）和四肢（清單/圖片）的位置。
  • CSS（我們之後會學到）則是皮膚、頭髮和衣服（外觀）。

「標記」有什麼作用？

標記使用一種特殊的代碼，稱為標籤（tags），用來包圍並定義不同的內容片段。例如，將文字標記為標題、段落或清單項目。

快速重溫： HTML 提供結構。它為內容加上標籤，讓瀏覽器能分辨某個部分是標題還是普通文字。

2. 關鍵詞彙：標籤、元素與屬性

要流暢地使用網頁設計語言，你必須理解以下三個核心術語的區別：

標籤（Tags）

標籤是定義元素開頭與結尾的標記。標籤總是放在角括號（< 和 >）內。

  • 開始標籤（Opening Tag）： <p>（開始一個段落）
  • 結束標籤（Closing Tag）： </p>（結束一個段落，請注意那個斜線 /）

元素（Elements）

元素是一個完整的單位，包含開始標籤、內容以及結束標籤。

範例： <p>這是內容。</p>

上述整串內容就是一個段落元素。

你知道嗎？ 有些元素，例如圖片標籤（<img>）或換行標籤（<br>），不會包裹任何內容，因此不需要結束標籤。這些被稱為自閉合（self-closing）或空（void）元素。

屬性（Attributes）

屬性提供了關於元素的額外資訊。它們總是放在開始標籤內，絕對不會放在結束標籤內。寫法格式為：name="value"。

範例： 如果你想顯示一張圖片（<img>），你需要一個屬性來告訴瀏覽器去哪裡找到這個圖片檔案。

<img src="photo.jpg" alt="一隻貓的照片">

  • 名稱（name）是 src（來源），而值（value）是 "photo.jpg"。
  • 名稱（name）是 alt（替代文字），而值（value）是 "一隻貓的照片"。（這能幫助視障使用者和搜尋引擎理解內容。）
記憶小撇步：標籤三文治

元素就是整個三文治。標籤就是麵包。內容就是內餡。屬性則是貼在麵包（開始標籤）上的額外貼紙，用來提供特殊指令！

3. 黃金法則：關注點分離（結構與呈現）

在現代網頁設計中，我們會嚴格將頁面的「樣貌」與其「意義及結構」分開。這稱為關注點分離（separation of concerns）。

HTML：結構

HTML 的工作只是定義內容是什麼。

  • 「這是主標題 (H1)。」
  • 「這是一個連結 (A 標籤)。」
  • 「這是一個圖片 (IMG 標籤)。」

CSS：呈現

CSS (階層式樣式表) 控制結構看起來如何。

  • 「把 H1 設為藍色且置中。」
  • 「把連結設為粗體並移除底線。」
  • 「將圖片放在頁面的右側。」
為什麼這種分離很重要？
  1. 一致性： 如果你想讓一個擁有 100 個頁面的網站所有標題都變成綠色，你只需要更改一行 CSS，而不是 100 個獨立的 HTML 檔案。
  2. 效率： HTML 檔案越小，載入速度就越快，因為裡面沒有包含雜亂的樣式資訊。
  3. 無障礙性： 螢幕閱讀器與搜尋引擎可以輕易地理解純粹的結構，而不受呈現程式碼的干擾。
常見錯誤： 使用舊的 HTML 標籤（如已棄用的 <font> 標籤）來控制顏色或大小。在 9210 課程中，我們必須使用 CSS 來處理呈現，HTML 則僅用於定義結構。

4. 檔案路徑：絕對路徑與相對路徑

當你要連結到另一個頁面、圖片或樣式表時，你必須精確地告訴瀏覽器去哪裡找到那個檔案。這個位置位址稱為檔案路徑（file path）。主要有兩種類型：

絕對檔案路徑（Absolute File Paths）

絕對路徑給出了檔案的完整位址，從協議（例如 http:// 或 https://）開始。

  • 用於連結到網站外部的資源。
  • 範例： <a href="https://www.officialwebsite.com/index.html">
  • 類比： 使用完整的 GPS 座標。無論你從哪裡出發，它都能導航到正確位置。

相對檔案路徑（Relative File Paths）

相對路徑給出了相對於你當前查看檔案的位址。

  • 用於連結到網站內部的資源（內部連結）。
  • 它更短、更有效率，因為瀏覽器會自動補上位址的前半部分。
相對路徑如何運作（分步說明）：
  1. 連結到同一個資料夾中的檔案：
    範例： 從 page1.html 連結到 page2.html（在同一個資料夾中）：
    <a href="page2.html">前往第二頁</a>
  2. 連結到子資料夾中的檔案（下一層）：
    範例： 連結到一個名為 images 資料夾中的圖片：
    <img src="images/logo.png">
  3. 連結到父資料夾中的檔案（上一層）：
    使用 ../ 向上移動一層資料夾結構。
    範例： <a href="../index.html">回到首頁</a>
重點總結： 內部連結請務必使用相對路徑，這樣當你把整個網站搬遷到新的網頁主機時，所有的連結依然可以自動運作！

5. 瀏覽器的工作：渲染網頁

當你輸入 URL（網址）並按下 Enter 後會發生什麼事？瀏覽器會執行一個至關重要的過程，稱為渲染（rendering）。

分步解析：網頁渲染過程

  1. 請求： 你的瀏覽器向網頁伺服器發送請求，要求獲取 HTML 檔案（以及任何連結的資源，如 CSS 檔案或圖片）。
  2. 接收資料： 伺服器將原始的 HTML、CSS 和其他檔案傳回你的電腦。
  3. 解析 HTML： 瀏覽器逐行閱讀 HTML 程式碼（這稱為解析/parsing）。它會建立一個結構化的內部地圖，稱為文件物件模型 (DOM)。
  4. 應用樣式 (CSS)： 瀏覽器閱讀 CSS 檔案，並將樣式（顏色、字體、大小）應用到 HTML 定義的對應結構元素上。
  5. 渲染/繪製： 瀏覽器接著根據結合後的 HTML 結構與 CSS 樣式，精確計算每個元素在螢幕上的放置位置。這個最終的繪製過程就是渲染。

鼓勵一下： 理解這個過程有助於你進行除錯！如果你的頁面看起來不對勁，你就會知道不是 HTML 結構有誤（第 3 步），就是 CSS 規則沒能正確應用（第 4 步）。

章節總結：關鍵概念複習

HTML 是網頁的結構語言。
  • 元素（Elements）由標籤（Tags）（如 <p>）組成，並用於定義內容。
  • 屬性（Attributes）在開始標籤內提供額外資訊（例如 id="main"）。
  • 關注點分離意味著 HTML 處理結構（它是什麼），而 CSS 處理呈現（它看起來如何）。
  • 絕對路徑用於連結網站外部（完整 URL）。
  • 相對路徑用於連結網站內部（基於位置的更短位址）。
  • 瀏覽器會解析（parse） HTML 並渲染（render）最終顯示的頁面。