2-3 連結 (Links)

在說明連結之前，我們先要說明「絕對路徑」和「相對路徑」的差異。簡單的說，「相對路徑」就是相對於現在目錄的路徑表示法，因此「相對路徑」所指到的檔案或目錄，會隨著現在目錄的不同而改變。若一個路徑不屬於「相對路徑」，那就是「絕對路徑」，「絕對路徑」指的是一個絕對的位置，並不會隨著現在目錄的改變而改變。下面是有關於「絕對路徑」和「相對路徑」的比較和範例：

類別範例說明
絕對路徑file:///c:/windows/odbc.ini本機D槽上的一個 HTML 檔案
http://www.cs.nthu.edu.tw網路上一台 WWW Server 上的一個 HTML 檔案
/jang/courses/cs3431本機 WWW 根目錄下的一個目錄
相對路徑text.html表同一層目錄下的 text.html 檔案
./text.html表同一層目錄下的 text.html 檔案
image/text.gif表示 image 子目錄下的 text.gif 檔案
../index.html表示上一層目錄下的 index.html 檔案
../html40/cover.html表示上一層目錄下 html40 子目錄的 cover.html 檔案

通常我們用「.」代表現在目錄，而用「..」代表上一層目錄。

一般而言，除非有特殊需求，否則在 HTML 文件中，我們都盡量用相對路徑來表示網址。使用相對路徑的好處是：當我們將包含許多網頁的目錄轉移到另一個位置時，雖然絕對位置改變，但是在此目錄下的網頁相對位置並沒有改變，因此我們並不需要大幅修改網頁內的網址。

HTML 文件裡不可或缺的標籤就是 <a>， 因為有它的存在，使我們可以很迅速地連結到全世界各個地方的網頁。以下是一個簡單的範例：

Example（link01.htm）：

上述範例的原始檔如下：

原始檔（link01.htm）：（灰色區域按兩下即可拷貝）
<HTML>
<HEAD>    
	<TITLE> 基本連結 </TITLE>
</HEAD>
<BODY>
這是清華大學的<a href="http://www.nthu.edu.tw">首頁</a>（絕對網址）<br>
這是交通大學的<a href="http://www.nctu.edu.tw">首頁</a>（絕對網址）<br>
這是本教材的<a href="index.asp">範例首頁</a>（相對網址）
</BODY>
</HTML>

在上述範例中，我們可以使用 target 屬性，讓連結被點選時，網頁能夠開在新的視窗。在下面範例中，無論點選清大或交大的連結，都會開啟名為「new」的新視窗來顯示網頁：

Example（link02.htm）：

上述範例的原始檔如下：

原始檔（link02.htm）：（灰色區域按兩下即可拷貝）
<HTML>
<HEAD>    
	<TITLE> 基本連結 </TITLE>
</HEAD>
<BODY>
這是清華大學的<a target="new" href="http://www.nthu.edu.tw">首頁</a>（絕對網址）<br>
這是交通大學的<a target="new" href="http://www.nctu.edu.tw">首頁</a>（絕對網址）<br>
這是本教材的<a target="new" href="index.asp">範例首頁</a>（相對網址）
</BODY>
</HTML>

在上述範例中，若已有名為「new」的視窗存在，則網頁會呈現在此視窗內，而不再開新視窗。若要使每次點選都開新視窗，就可以使用 target="_blank"，讀者請自己試試看！

連結除了可以跳到其他網頁之外，也可以在一份長的網頁之中上下跳動，例如，如果我們在一個網頁的最後一列加上<A name="LastLine">，那麼當我們點選下述連結時，就會跳回本頁的頁尾，例如：

Example（link03.htm）：

上述範例的原始檔如下：

原始檔（link03.htm）：（灰色區域按兩下即可拷貝）
<HTML>
<HEAD>    
	<TITLE> 基本連結：如何跳到某一列 </TITLE>
</HEAD>
<BODY>
這個網頁很長，但是按下<a href="#LastLine">這個連結</a>，就可以跳到最後一列，請試試看！
<xmp>



















</xmp>
<A name="LastLine">
這是最後一列！
</BODY>
</HTML>

除了可以連結到網頁以外，我們也可以連結到其他檔案，例如可以連結到數位音樂檔（MP3 或 MIDI）、聲音檔（WAV）、影像檔（GIF 或 JPEG 或 PNG）、電影檔（AVI 或 MPEG）等，請見下述範例：

Example（link04.htm）：

上述範例的原始檔如下：

原始檔（link04.htm）：（灰色區域按兩下即可拷貝）
<HTML>
<HEAD>    
	<TITLE> 基本連結：如何連結到多媒體檔案 </TITLE>
</HEAD>
<BODY>
連結至 jpeg 圖檔：<a href="multimedia/annie.jpg">annie.jpg</a><br>
連結至 gif 圖檔：<a href="multimedia/jordan2.gif">jordan2.gif</a><br>
連結至 mp3 聲音檔：<a href="multimedia/國歌.mp3">國歌.mp3</a>, <a href="multimedia/dreamlover.mp3">dreamlover.mp3</a><br>
連結至 midi 音樂檔：<a href="multimedia/原來你什麼都不想要.mid">原來你什麼都不想要.mid</a><br>
連結至 wav 聲音檔：<a href="multimedia/welcome.wav">welcome.wav</a><br>
連結至 mpeg 電影檔：<a href="multimedia/Tiger Show.mpeg">Tiger Show.mpeg</a><br>
連結至 pps PowerPoint 檔：<a href="multimedia/Moon Festival.pps">Moon Festival.pps</a>
</BODY>
</HTML>

Hint
當這些多媒體檔案被送到用戶端時，用戶端會根據檔案類型而呼叫不同的應用程式來播放或呈現。

以下是試驗區，你可以直接填入 HTML 的內容，按「送出測試」後，即可在新網頁看到呈現的結果。

Example（htmlTestLink.htm）：

HTML 簡介與應用