網頁連結教學第一課：超連結基礎

1

什麼是超連結？

超連結就像「任意門」！🚪

你有看過哆啦A夢嗎？他有一個神奇的「任意門」，
打開門就可以瞬間到達另一個地方！

網頁上的超連結（Hyperlink）就像任意門一樣神奇！
只要點一下，就可以：

🚀 跳到另一個網頁
🚀 跳到同一頁的其他地方
🚀 甚至跳到 YouTube、維基百科等網站！

📄

網頁 A

首頁
index.html

→

🔗

超連結

點一下
就傳送！

→

📄

網頁 B

教學頁
tutorial.html

2

超連結怎麼寫？認識 <a> 標籤

a 就是 Anchor（錨）的意思 ⚓

在 HTML 裡面，超連結要用 <a> 標籤來寫。

「a」是英文 Anchor（錨） 的縮寫。
就像船的錨可以「連接」船和海底一樣，
<a> 標籤可以「連接」不同的網頁！

<a href= "網址" > 顯示的文字 </a>

a 標籤

href 屬性

要去哪裡

使用者看到的文字

index.html

              <!-- 超連結的基本寫法 -->

              <a
                href="https://www.google.com">前往 Google</a>

              <!-- 連到自己做的其他網頁 -->
              <a
                href="about.html">關於我們</a>

              <!-- 在新視窗開啟連結 -->
              <a
                href="https://www.youtube.com"
                target="_blank">前往 YouTube（新視窗）</a>
            

👇 實際效果（可以點點看！）

前往 Google | 前往 YouTube

3

href 是什麼？（最重要的屬性！）

href = Hypertext Reference（超文本參考）

href 是超連結最重要的屬性！

它告訴瀏覽器：「點擊之後要去哪裡」

就像你在手機導航輸入「目的地」一樣，
href 就是告訴瀏覽器「我要去的地方」！

🏠 內部連結（相對路徑）

連到「自己網站」的其他頁面

就像在同一棟大樓裡面走來走去

href="about.html"
href="pages/contact.html"

🌐 外部連結（絕對路徑）

連到「別人網站」

要寫完整網址，像坐車去別的城市

href="https://www.google.com"
href="https://zh.wikipedia.org"

4

檔案要怎麼放？（資料夾結構）

所有檔案要放在同一個資料夾！📁

當你的網站有很多頁面時，
這些 HTML 檔案通常要放在同一個資料夾裡面。

這樣用相對路徑連結時，瀏覽器才找得到！

📂 網站資料夾結構範例

📁 我的網站/
    📄 index.html ← 首頁（入口）
    📄 about.html ← 關於我們
    📄 contact.html ← 聯絡我們
    📄 tutorial.html ← 教學頁面
    📄 style.css ← 樣式檔案
    📁 images/ ← 圖片資料夾
        🖼️ logo.png
        🖼️ banner.jpg

index.html 裡面的連結

              <!-- 從 index.html 連到同資料夾的其他頁面 -->

              <a
              href="about.html">關於我們</a>
              <a
              href="contact.html">聯絡我們</a>
              <a
              href="tutorial.html">教學專區</a>

              <!-- 連到 images 資料夾裡的圖片 -->
              <img
              src="images/logo.png">
            

5

target="_blank" 是什麼？

要在「同一個視窗」還是「新視窗」開啟？

有時候我們希望點連結後，開一個新的分頁，
原本的網頁還留著，這時候就要用 target="_blank"！

🏠 不加 target → 在「同一個視窗」開啟（離開目前頁面）
🆕 加 target="_blank" → 開「新視窗/新分頁」（保留目前頁面）

target 屬性用法

              <!-- 同一個視窗開啟（預設行為）-->
              <a
              href="about.html">關於我們</a>

              <!-- 新視窗開啟（適合外部連結）-->
              <a
                href="https://www.google.com"
                target="_blank">前往 Google</a>
            

小測驗時間！

🎯 第一題：哪一個是正確的超連結寫法？

🎯 第二題：要連到「別人的網站」，href 應該寫什麼？

🎯 第三題：想要「開新視窗」，要加什麼屬性？

今天學到的重點

超連結就像「任意門」，點一下就能跳到別的地方
超連結用 <a> 標籤來寫，a 是 Anchor（錨）的意思
href 屬性告訴瀏覽器「要去哪裡」
內部連結（相對路徑）：連到自己網站的頁面，只要寫檔案名稱
外部連結（絕對路徑）：連到別人網站，要寫完整網址（https://...）
target="_blank" 可以讓連結在新視窗開啟
網站的檔案要放在同一個資料夾，連結才會正常運作