IGCSE ICT (0417) 學習筆記：HTML 導航（網站製作）
你好！歡迎來到這份關於如何掌握網站製作（Website Authoring）實習考試中「導航（Navigation）」功能的必備指南。導航是任何網站的骨幹，它引導使用者接下來該往哪裡去。你可以把它想像成是為你的網站製作地圖和路標！
在 IGCSE ICT 實習試卷中，你需要證明自己能夠使用 HTML 建立功能完善的超連結（hyperlinks）和內部跳轉點（書籤/bookmarks）。別擔心，只要理解了基本標籤，這其實非常簡單！
1. 理解超連結與錨點（基礎知識）
超連結（Hyperlink）是指一個元素（通常是文字或圖片），點擊後會帶你前往另一個位置。這個位置可以是另一個頁面、不同的網站，甚至是同一頁面中的另一個特定位置。
用於導航的核心 HTML 標籤是錨點標籤（Anchor Tag）：<a>
錨點標籤 (<a>)
錨點標籤使用一個重要的屬性，稱為 href（Hypertext Reference，超文本引用）。此屬性指定了目標位址（destination）。
<a href="...">：這就是你點擊的實際連結。- 放置在開始和結束標籤之間的文字或圖片，就是使用者看見並點擊的內容。
範例：
<a href="homepage.html">回到首頁</a>
當使用者點擊文字「回到首頁」時，瀏覽器會跳轉至名為 "homepage.html" 的檔案。
什麼是錨點/書籤（Anchor/Bookmark）？
錨點或書籤是網頁中一個已命名的特定位置。如果你有一個很長的網頁，並希望放置一個「回到頂部」的按鈕，你就需要在頂部設定一個書籤。
- 書籤是使用 HTML 元素（如
<h1>或<p>標籤）上的id屬性來建立的。 - 單一頁面上的每一個
id都必須是唯一（unique）的。
比喻： 把超連結想像成你要寄出的信件，而書籤（ID）就是大樓上特定的信箱編號。
如何建立書籤（錨點目標）
在你想作為連結目標的元素上使用 id 屬性即可。
範例：建立一個名為 "section1" 的書籤：
<h4 id="section1">主題 1 開始</h4>
超連結：可點擊的元素（使用 <a href="...">）
書籤/錨點：目的地目標（使用 id="..."）
2. 不同類型的超連結（課程清單）
你必須能夠建立四種主要類型的連結。
2.1 連結到同一頁面的書籤
這用於內部跳轉（例如：從頁面底部跳回頂部）。href 屬性必須以 #（井號）開頭，緊接著目標的 id 名稱。
範例（連結到上面建立的書籤）：
<a href="#section1">跳轉至主題 1</a>
記憶小撇步： 如果你在 href 中看到 # 符號，代表連結會前往 #（同一個）頁面！
2.2 連結到本機儲存的其他網頁
這是網站製作任務中最常見的連結類型。你連結的是儲存在相同資料夾或目錄結構中的另一個 HTML 檔案。這使用的是相對檔案路徑（Relative File Path）。
範例：
<a href="products.html">查看我們的產品</a>
2.3 連結到外部網站 (URL)
這種連結會將使用者從你的網站帶到全球資訊網上的其他網站。這需要使用絕對檔案路徑（Absolute File Path）。
- 連結必須包含完整的通訊協定，通常是
http://或https://。
範例：
<a href="https://www.google.com">搜尋 Google</a>
2.4 連結到電子郵件地址 (Mailto)
在 href 中使用 mailto: 協定，會開啟使用者預設的電子郵件軟體，並自動填寫收件者地址。
範例：
<a href="mailto:manager@site.org">寄送查詢給我們</a>
2.5 將圖片作為超連結
除了點擊文字，你也可以點擊圖片來導航。做法很簡單，只需將 <img> 標籤放在 <a> 標籤內即可。
範例：
<a href="index.html"><img src="home_icon.jpg" alt="首頁" /></a>
提示： 請記得永遠要為圖片加上 alt 屬性！這對於無障礙網頁瀏覽非常重要，萬一圖片無法載入，它能提供說明文字。
3. 檔案路徑：絕對 vs. 相對
這是常見的混淆來源，但對於你的實作工作至關重要，特別是在提交檔案進行評分時。
3.1 相對檔案路徑（適用於本機檔案）
相對路徑是相對於目前位置的檔案位址。它假設瀏覽器已經知道你網站的根目錄在哪裡。
- 使用時機： 在網站內部的頁面之間建立連結（例如：從 index.html 到 about.html）。
- 為什麼要用？ 當考官將你的整個網站資料夾複製到他們的電腦時，相對連結依然有效，因為檔案彼此之間的「相對」位置保持不變。
- 範例：
href="products/summer.html"（進入 "products" 資料夾並尋找 "summer.html"）
3.2 絕對檔案路徑（適用於外部網站）
絕對路徑是完整位址，就像 GPS 座標一樣，從根目錄或網域名稱開始。
- 使用時機： 連結到你自己專案以外的網站（例如：Google、維基百科）。
- 關鍵特徵： 它總是以通訊協定開頭（
http://或https://）。 - 範例：
href="https://www.example.com/page.html"
切勿將絕對路徑用於儲存在你自己電腦上的本機檔案（例如：C:/Users/Student/Desktop/ICT/index.html）。當檔案被移動到考官的電腦時，這些連結就會失效！請務必堅持對本機連結使用相對路徑。
4. 控制連結目標（頁面開啟的位置）
有時候你不希望使用者完全離開目前的頁面；你可能希望連結的頁面在新的分頁開啟。我們可以透過 <a> 標籤內的 target 屬性來控制。
課程要求你了解如何在相同視窗、新視窗或指定名稱的視窗中開啟連結。
關鍵目標值（Target Values）：
1. 相同視窗（預設行為）
這是預設行為。連結的文件會取代目前瀏覽器視窗或分頁中的當前文件。
程式碼（通常不需要指定，但你可以寫）： target="_self"
2. 新視窗/分頁
這會強制連結的文件在一個全新的、未命名的瀏覽器視窗或分頁中開啟。這對於外部連結非常實用，這樣使用者就不會關閉或離開你的網站。
程式碼： target="_blank"
範例：
<a href="https://externalsite.com" target="_blank">訪問外部網站</a>
3. 指定名稱的視窗
當使用框架（frames，儘管現在較少見）或試題有特別要求時，會使用此方法。如果該名稱的視窗已存在，內容就會載入該處；若不存在，則會建立一個該名稱的新視窗。
程式碼： target="window_name"（其中 window_name 是你選擇的任何名稱，例如 info_popup 或 main_content）
範例：
<a href="data.html" target="info_frame">開啟數據表</a>
1. 超連結使用 <a href="...">。
2. 書籤使用 id="..."。
3. 網站內部的檔案請永遠使用 相對路徑。
4. 使用 target="_blank" 將連結在新分頁開啟。