超連結的應用

Written by Wanding on 12 August 2020

超連結除了可以用來建立網站的結構，將網站的各個網頁串連起來，更可以串連網路上其他網站的資料，讓我們的網頁內容更加豐富。如何把這些內容做連結呢？我們必須使用<a href>超連結標籤。

在HTML文件中，若要連結到網路上的其他資源，必須先知道資源所在的URL(Uniform Resource Locator)，然後使用<a>標籤去標註對方的URL。只要使用者在連結文字按一下，就會顯示對方的網頁。

超連結的寫法

<a href="連結的URL"> 說明的文字 </a>

例如HTML文件裡這樣寫 <a href="https://www.google.com">Google搜尋頁面</a>，瀏覽器顯示如下
Google搜尋頁面
當你使用滑鼠進行點擊，就會連結到Google畫面，可以試試看。

相對路徑與絕對路徑

相對路徑是指同一個網站裡，檔案在同一檔案夾但是不同名，或是在不同的檔案夾的不同檔名。彼此間定義出一個相對應的位置，稱為相對路徑，相對路徑可以把網站的網址省略。

絕對路徑是指不同的網站，每個檔案一定會有網址和檔名，稱為絕對路徑。

相對路徑的超連結寫法

<a href="abc.html">    --連結到同一層同一資料夾的abc.html
<a href="../abc.html">   --連結到上一層資料夾中的abc.html
<a href="dir/abc.html">   --連結到dir資料夾中的abc.html
<a href="../dir/abc.html">  --連結到上一層中dir資料夾中的abc.html

絕對路徑的超連結寫法

<a href="https://www.youtube.com">  --連結到Youtube首頁

單一文件內的各段落連結點

若要設計單一網頁 (檔名為travel.html)，但因為內容豐富，所以全部內容分成A、B、C、D等四個段落。我們為了讓網頁使用上更友善，則在頁頂某個位置建立了分別為A、B、C、D四個超連結按鈕。

A、B、C、D四個超連結按鈕則分別連到A、B、C、D等四個個別的段落。這樣子的安排，可以讓使用者想看哪段內容就按那個按鈕。那麼，我們必須先在各個段落的開頭建立錨點，然後才能設定超連結。

建立錨點標籤<a id>

<a id="A">

<a id="B">

<a id="C">

<a id="D">

建立指向文件內錨點的超連結(以B為例)

<a href="travel.html#B> B </a>

圖片加上超連結

<a href="文件URL"><img src="圖片檔的URL"></a>

例如：

<a href="/html/paragraph"><img src="/img/html/paragraph.jpg" width="330px"></a>

瀏覽器顯示如下：

只要把滑鼠移到圖片區域，就會出現連結手的符號，點擊後就連到"網頁的文字段落"這篇文章。

回目錄頁

超連結的應用