專業 HTML 網頁設計

專業專業 HTMLHTML 網頁設網頁設計計

陳錦輝陳錦輝

HTML/DHTML/CSS/JavaScript

P303

22

第七章　超鏈結第七章　超鏈結 7.1 7.1 超鏈結介紹超鏈結介紹 7.27.2 < <a>a> 錨標籤所支援的協定錨標籤所支援的協定 7.3 7.3 鏈結至特定段落鏈結至特定段落 7.4 7.4 超鏈結的顏色設定超鏈結的顏色設定 7.5 7.5 路徑的深入探討路徑的深入探討 7.6 7.6 網頁網頁 DIYDIY

33

7.17.1 　超鏈結介紹　超鏈結介紹由於超鏈結所提供的功能有許多，因此在正式介由於超鏈結所提供的功能有許多，因此在正式介

紹如何製作『超鏈結』之前，先對超鏈結以及所紹如何製作『超鏈結』之前，先對超鏈結以及所需要的網路背景知識做一番介紹。需要的網路背景知識做一番介紹。

44

7.1.17.1.1 　什麼是超鏈結？　什麼是超鏈結？許多網頁上會出現附帶底線的文字，當滑鼠游標許多網頁上會出現附帶底線的文字，當滑鼠游標

移過去這些文字時，就會變成手指狀的游標移過去這些文字時，就會變成手指狀的游標 (icon7_01.tif)(icon7_01.tif) ，，這就是超鏈結。這就是超鏈結。

按下超鏈結之後，瀏覽器內容會更改為超鏈結的按下超鏈結之後，瀏覽器內容會更改為超鏈結的目標，這也就是超鏈結神奇之處。目標，這也就是超鏈結神奇之處。

而上述動作實際上是如何運作的呢？當使用者按而上述動作實際上是如何運作的呢？當使用者按下超鏈結時，瀏覽器便連上遠端或本地端電腦連下超鏈結時，瀏覽器便連上遠端或本地端電腦連結目標的結目標的 HTMLHTML 檔案，下載該檔案，下載該 HTMLHTML 檔案後加以檔案後加以解讀顯示於瀏覽器中，這是最普遍的一個超鏈結解讀顯示於瀏覽器中，這是最普遍的一個超鏈結應用，但超鏈結的服務並不只於此。應用，但超鏈結的服務並不只於此。

55

7.1.27.1.2 URLURL 位置表示法位置表示法 URL(Universal Resource Locator)URL(Universal Resource Locator) 是一種『位址是一種『位址

表示法』；中文可以譯為一致資源定位器，這個表示法』；中文可以譯為一致資源定位器，這個定位器的功能主要是告訴瀏覽器定位器的功能主要是告訴瀏覽器 (Client)(Client) ，，應該應該以哪一種服務去連結遠端的電腦以哪一種服務去連結遠端的電腦 (Server(Server 端端 )) 。。

由於由於 URLURL 所支援的協定有很多種，因此，不適合所支援的協定有很多種，因此，不適合只用只用 IPIP 位置或位置或 Domain NameDomain Name 來加以描述，它的來加以描述，它的格式如下：格式如下：

66

7.1.27.1.2 URLURL 位置表示法位置表示法通用的通用的 URLURL 格式：格式：

某些協定的某些協定的 URLURL 格式：格式：

URLURL 通用格式適用於各種協定，其中通用格式適用於各種協定，其中<<scheme_dependent_information>scheme_dependent_information> 為『欲連結為『欲連結該主機的資訊』，其細部格式必須依照該主機的資訊』，其細部格式必須依照<<scheme>scheme> 才能決定。各個術語的內涵說明如下：才能決定。各個術語的內涵說明如下：

<scheme>:<scheme_dependent_imformation>

<scheme>://<host:[port]>/<path>/<filename>

77

<<scheme>scheme> ：：機制或傳輸協定，例如：機制或傳輸協定，例如：

HTTPHTTP 、、 FTPFTP 、、 FILEFILE 、、 TELNETTELNET 、、等等皆是等等皆是 <<scheme>scheme> 的的一種。一種。

<<host:[port]>host:[port]> ：：其中其中 hosthost 為主機的名稱為主機的名稱 (domain name)(domain name) 或或 IPIP 位置位置 (IP (IP

address)address) ，， portport 為連接該伺服器的埠號，由於許多協定皆有為連接該伺服器的埠號，由於許多協定皆有預設的埠號，所以當伺服器並未更改預設埠號時，就不需要指預設的埠號，所以當伺服器並未更改預設埠號時，就不需要指定定 [[port]port] ，，此時只需要指定此時只需要指定 <<host>host> 即可。即可。

pathpath ：：被連結檔案的路徑。被連結檔案的路徑。

filenamefilename ：：被連結檔案的完整檔名。被連結檔案的完整檔名。 (( 包含副檔名包含副檔名 ))

7.1.27.1.2 URLURL 位置表示法位置表示法

88

7.1.27.1.2 URLURL 位置表示法位置表示法以下幾個都是合法的以下幾個都是合法的 URLURL 表示法。表示法。

http://www.w3c.org/html4/index.htmhttp://www.w3c.org/html4/index.htm http://140.113.10.1/welcome.indexhttp://140.113.10.1/welcome.index telnet://140.113.23.3telnet://140.113.23.3 elnet://bbs.nctu.edu.twelnet://bbs.nctu.edu.tw ftp://ftp://ftp.nctu.edu.twftp.nctu.edu.tw ftp://140.113.23.100ftp://140.113.23.100 file:///C|/XHTML/ch06/ch6-01.htmfile:///C|/XHTML/ch06/ch6-01.htm mailto:[email protected]:[email protected] wais://www.edu.tw/SQLdb?w3-htmlwais://www.edu.tw/SQLdb?w3-html gopher://gopher.edu.twgopher://gopher.edu.tw news:/news://news.cis/nctu.edu.tw/tw.bbs.comp.book/news.cis/nctu.edu.tw/tw.bbs.comp.book

99

7.27.2 　　 <<a>a> 錨標籤所支援的協定錨標籤所支援的協定超鏈結是依靠超鏈結是依靠 <<a>a> 標籤標籤 (( 錨標籤錨標籤 )) 來製作的，底來製作的，底

下是下是 <<a>a> 的語法格式。的語法格式。

其中其中 hrefhref 屬性是最重要的一個屬性，用來設定鏈屬性是最重要的一個屬性，用來設定鏈結目標的結目標的 URLURL ，，而而 URLURL 根據各種不同的協定而根據各種不同的協定而有不同的格式。有不同的格式。

且在部分協定中又可以分為相對路徑與絕對路徑且在部分協定中又可以分為相對路徑與絕對路徑兩種設定方法。兩種設定方法。

1010

屬性說明：屬性說明： (1) href(1) href ：：用來指定鏈結對象，其中包含鏈結協定以及用來指定鏈結對象，其中包含鏈結協定以及

目標檔案。目標檔案。 (2) target(2) target ：：用來指定鏈結發生時，所產生的效果處，用來指定鏈結發生時，所產生的效果處，

例如：是否開新視窗等。例如：是否開新視窗等。 (( 詳見第詳見第 99章章 ))

7.27.2 　　 <<a>a> 錨標籤所支援的協定錨標籤所支援的協定

1111

7.2.17.2.1 hrefhref 屬性屬性 - HTTP- HTTP 協定協定 HTTP(HyperText Transfer Protocol)HTTP(HyperText Transfer Protocol) ；；超本文傳超本文傳

輸協定是輸協定是 WWWWWW 所使用的一種傳輸協定，其目標所使用的一種傳輸協定，其目標是一個檔案是一個檔案 (( 此檔案並不限於此檔案並不限於 HTMLHTML 檔檔 )) 。。

在在 <<a>a> 的的 hrefhref 屬性也是絕對路徑與相對路徑的方屬性也是絕對路徑與相對路徑的方法，只不過，此處的檔案並不限定為圖檔。法，只不過，此處的檔案並不限定為圖檔。

範例範例 7-17-1 ：：內容內容執行結果執行結果


1212

FILEFILE 協定的目標是一個檔案協定的目標是一個檔案 (( 此檔案並不限於此檔案並不限於HTMLHTML 檔檔 )) ，， FILEFILE 和和 HTTPHTTP 協定很像，只不過協定很像，只不過FILEFILE 的目標是本地端的檔案而非遠端伺服器的檔案。的目標是本地端的檔案而非遠端伺服器的檔案。

FILEFILE 同樣可以分為絕對路徑與相對路徑表示法。同樣可以分為絕對路徑與相對路徑表示法。



7.2.27.2.2 hrefhref 屬性屬性 - FILE- FILE 協定協定

1313

7.2.37.2.3 hrefhref 屬性屬性 - FTP- FTP 協定協定 FTP(File Transfer Protocol)FTP(File Transfer Protocol) ；；是一種檔案傳輸協是一種檔案傳輸協

定，可以直接在瀏覽器網址列輸入『定，可以直接在瀏覽器網址列輸入『 ftp://ftp.nctuftp://ftp.nctu.edu.tw/.edu.tw/ 』，』，就會自動連往交通大學的檔案傳輸就會自動連往交通大學的檔案傳輸伺服器伺服器 (FTP Server)(FTP Server) ，，同樣地，也可以在同樣地，也可以在 <<a>a> 標標籤使用籤使用 hrefhref 指定指定 FTPFTP 協定。協定。


1414

7.2.47.2.4 hrefhref 屬性屬性 - MAILTO- MAILTO 協定協定可以自動開啟發送可以自動開啟發送 E-mailE-mail 的軟體，並且註明收信的軟體，並且註明收信人位址。人位址。


1515

7.2.57.2.5 hrefhref 屬性屬性 - TELNET- TELNET 協定協定許多網站的功能都必須透過許多網站的功能都必須透過 TELNETTELNET 遠端登錄協遠端登錄協

定來傳送，例如：定來傳送，例如： BBSBBS 、、 LinuxLinux 工作站的遠端登工作站的遠端登錄等等。錄等等。

可以透過可以透過 <<a>a> 標籤的標籤的 hrefhref 屬性來完成一個屬性來完成一個TELNETTELNET 協定的超鏈結，鏈結執行後，將會開啟協定的超鏈結，鏈結執行後，將會開啟預設的預設的 TELNETTELNET軟體，並且連結所記載的網站。軟體，並且連結所記載的網站。

範例：範例：內容內容執行結果執行結果

1616

7.2.67.2.6 hrefhref 屬性屬性 - NEWS- NEWS 協定協定 NewsNews 是是 USENETUSENET 的網路新聞討論群，常見的讀的網路新聞討論群，常見的讀

取取 NewsNews 軟體為軟體為 Outlook ExpressOutlook Express 或或 NetscapeNetscape ，，並且將討論區群組名稱設定於使用者的電腦中，並且將討論區群組名稱設定於使用者的電腦中，如果想要一次鏈結所有討論群的話，可以使用如果想要一次鏈結所有討論群的話，可以使用 <<a a href="news:*">...</a>href="news:*">...</a> 。。

可以自動開啟讀取可以自動開啟讀取 NewsNews 軟體，並登入該討論區軟體，並登入該討論區群組。群組。


1717

7.2.77.2.7 hrefhref 屬性屬性 - GOPHER- GOPHER 協協定定

GOPHERGOPHER 是比較早期常使用的一種資料查詢服務是比較早期常使用的一種資料查詢服務與協定，我們可以透過與協定，我們可以透過 hrefhref 屬性指定要登入哪一屬性指定要登入哪一個個 GOPHERGOPHER 伺服器做資料的搜尋，不過伺服器做資料的搜尋，不過GOPHERGOPHER 服務現在已經很少人使用了。服務現在已經很少人使用了。

可以連結至可以連結至 gophergopher 伺服器，以便查詢資料。伺服器，以便查詢資料。

範例：範例： <<a href="gopher://gopher.edu.tw/">a href="gopher://gopher.edu.tw/"> 這是這是 GOPHERGOPHER 協協

定範例定範例 </</a>a>

1818

7.2.87.2.8 hrefhref 屬性屬性 - WAIS- WAIS 協定協定 WAIS(Wide Area Information Search)WAIS(Wide Area Information Search) ；；廣域資廣域資

訊查詢協定，可以輸入正確的搜尋指令，將之送訊查詢協定，可以輸入正確的搜尋指令，將之送往往 WAISWAIS 伺服器以便搜尋資料。伺服器以便搜尋資料。

可以將搜尋指令送往可以將搜尋指令送往 WAISWAIS 伺服器去搜尋資料。伺服器去搜尋資料。

範例：範例： <<a href="wais://www.edu.tw/SQLdb?html-msql">a href="wais://www.edu.tw/SQLdb?html-msql">

這是這是 WAISWAIS 協定範例協定範例</</a>a>

1919

7.37.3 　鏈結至特定段落　鏈結至特定段落設定一些索引讓瀏覽者可以快速跳躍到網頁的某設定一些索引讓瀏覽者可以快速跳躍到網頁的某

一段，省掉許多尋找資料的時間，這是靠一段，省掉許多尋找資料的時間，這是靠 <<a>a> 標標籤來完成的功能。籤來完成的功能。

鏈結至某網頁的特殊段落位置可以分為兩種，一鏈結至某網頁的特殊段落位置可以分為兩種，一種是跳躍到本身網頁的某一段落，另一種則是跳種是跳躍到本身網頁的某一段落，另一種則是跳躍到另一個網頁的特殊段落。躍到另一個網頁的特殊段落。

無論是哪一種，都必須對於目標段落先做好標記，無論是哪一種，都必須對於目標段落先做好標記，如此一來瀏覽器才能正確地找到目標段落的位置。如此一來瀏覽器才能正確地找到目標段落的位置。

2020

7.3.7.3.11 　　 <a> - name<a> - name 與與 idid 屬性屬性要跳躍至某個網頁的某個特定段落位置，首先必要跳躍至某個網頁的某個特定段落位置，首先必

須先對於該位置記錄一個標記，也就是給該位置須先對於該位置記錄一個標記，也就是給該位置一個名字，如此一來，才能夠指定超鏈結跳躍至一個名字，如此一來，才能夠指定超鏈結跳躍至該位置處。該位置處。

指定特定位置的名字，必須使用指定特定位置的名字，必須使用 <<a>a> 標籤的標籤的namename 屬性。屬性。

範例範例 7-87-8 ：：內容執行結果內容執行結果


2121

7.3.37.3.3 不同網頁的特殊位置跳躍不同網頁的特殊位置跳躍在定義完畢特殊位置的標記名稱之後，就可以直在定義完畢特殊位置的標記名稱之後，就可以直

接透過接透過 <<a>a> 標籤來跳躍到指定的段落了。標籤來跳躍到指定的段落了。


2222

除了可以在同一網頁中，指定跳躍到某一特殊位除了可以在同一網頁中，指定跳躍到某一特殊位置之外，在不同的網頁中，一樣也可以完成特殊置之外，在不同的網頁中，一樣也可以完成特殊位置的跳躍位置的跳躍 (( 前提是必須特殊位置已經做好名稱前提是必須特殊位置已經做好名稱標記標記 )) 。。


7.3.37.3.3 不同網頁的特殊位置跳躍不同網頁的特殊位置跳躍

2323

7.47.4 　超鏈結的顏色設定　超鏈結的顏色設定在網頁中超鏈結的文字會以藍色或紫色的顏色出在網頁中超鏈結的文字會以藍色或紫色的顏色出

現，其中藍色代表未曾讀取過的超鏈結目標網頁，現，其中藍色代表未曾讀取過的超鏈結目標網頁，而紫色則是代表已經讀取過的超鏈結目標網頁。而紫色則是代表已經讀取過的超鏈結目標網頁。

除了預設的超鏈結顏色之外，也可以自由指定超除了預設的超鏈結顏色之外，也可以自由指定超鏈結的顏色，方法有兩種：第一種是由瀏覽者自鏈結的顏色，方法有兩種：第一種是由瀏覽者自行更改瀏覽器中的設定來改變超鏈結的顏色。第行更改瀏覽器中的設定來改變超鏈結的顏色。第二種則是由網頁設計者在二種則是由網頁設計者在 HTMLHTML 網頁中，設定網頁中，設定<<body>body> 的的 linklink 、、 vlinkvlink 、、 alinkalink 屬性。屬性。

2424

屬性屬性 linklink 功能：功能：設定超鏈結目標未曾被瀏覽時的超鏈結文字顏色。設定超鏈結目標未曾被瀏覽時的超鏈結文字顏色。 (( 預預

設為藍色設為藍色 ))

屬性屬性 vlinkvlink 功能：功能：設定超鏈結目標已被瀏覽時的超鏈結文字顏色。設定超鏈結目標已被瀏覽時的超鏈結文字顏色。 (( 預設預設

為紫色為紫色 ))

屬性屬性 alinkalink 功能：功能：設定超鏈結文字已被按下，但尚未放開滑鼠左鍵時的設定超鏈結文字已被按下，但尚未放開滑鼠左鍵時的

超鏈結文字顏色。超鏈結文字顏色。


7.47.4 　超鏈結的顏色設定　超鏈結的顏色設定

2525

7.57.5 　路徑的深入探討　路徑的深入探討事實上，對於瀏覽器而言，當它看見相對路徑時，事實上，對於瀏覽器而言，當它看見相對路徑時，

會與目前所在網頁的路徑前半部結合，形成一個會與目前所在網頁的路徑前半部結合，形成一個絕對路徑，然後再讀取實際的網頁。絕對路徑，然後再讀取實際的網頁。

例如：例如： (1) (1)

目前所在的網頁為『目前所在的網頁為『 http://127.0.0.1/HTML/ch07/pagehttp://127.0.0.1/HTML/ch07/page1.htm1.htm 』。』。

(2) (2) 超鏈結目標為『超鏈結目標為『 page2.htmpage2.htm 』。』。

2626

7.57.5 　路徑的深入探討　路徑的深入探討 Step1Step1 ：：瀏覽器會先將前半部路徑取出，也就是瀏覽器會先將前半部路徑取出，也就是

『『 http://127.0.0.1/HTML/ch07/http://127.0.0.1/HTML/ch07/ 』，』，這個路徑稱為基本這個路徑稱為基本路徑。路徑。 ((請注意最後一個『請注意最後一個『 // 』不可省略』不可省略 ))

Step2Step2 ：：瀏覽器會將相對路徑表示的超鏈結目標取出，瀏覽器會將相對路徑表示的超鏈結目標取出，也就是『也就是『 page2.htmpage2.htm 』。』。

Step3Step3 ：：當滑鼠游標移至超鏈結文字上方時，瀏覽器會當滑鼠游標移至超鏈結文字上方時，瀏覽器會將兩者結合，形成『將兩者結合，形成『 http://127.0.0.1/HTML/ch07/http://127.0.0.1/HTML/ch07/page2.htmpage2.htm 』』完整的絕對路徑，並顯示於瀏覽器下方的完整的絕對路徑，並顯示於瀏覽器下方的狀態列中。狀態列中。

2727

7.57.5 　路徑的深入探討　路徑的深入探討 Step4Step4 ：：當按下超鏈結時，當按下超鏈結時，

瀏覽器讀取『瀏覽器讀取『 http://127.0.0.1/HTML/ch07/http://127.0.0.1/HTML/ch07/page2.htmpage2.htm 』。』。

在在以上範例中得知，當使用相對路徑表示超鏈結以上範例中得知，當使用相對路徑表示超鏈結目標時，瀏覽器實際上是將基本路徑與相對路徑目標時，瀏覽器實際上是將基本路徑與相對路徑結合，產生完整的絕對路徑，然後再讀取目標網結合，產生完整的絕對路徑，然後再讀取目標網頁，而基本路徑是由目前網頁所在位址決定的。頁，而基本路徑是由目前網頁所在位址決定的。

基本路徑可以自由指定的，只要透過基本路徑可以自由指定的，只要透過 <<base>base> 標標籤就可以重新指定基本路徑了。籤就可以重新指定基本路徑了。

2828

<<base>base> 為獨立標籤，功能為設定基本路徑。為獨立標籤，功能為設定基本路徑。


7.5.17.5.1 設定基本路徑設定基本路徑 (<base>)(<base>)

2929

7.5.27.5.2 　基本路徑與相對路徑的計算規則　基本路徑與相對路徑的計算規則最簡單的絕對路徑計算方式，就是『基本路徑』最簡單的絕對路徑計算方式，就是『基本路徑』

++ 『相對路徑』，但是有時候相對路徑若記載了『相對路徑』，但是有時候相對路徑若記載了父目錄『父目錄『 ../../ 』時，就必須把『基本路徑』的最後』時，就必須把『基本路徑』的最後一層去除，再與相對路徑做結合，並且每出現一一層去除，再與相對路徑做結合，並且每出現一層父目錄『層父目錄『 ../../ 』就必須把『基本路徑』去除一層。』就必須把『基本路徑』去除一層。例如：例如：

基本路徑為『基本路徑為『 http://127.0.0.1/HTML/ch07/files/allfile/http://127.0.0.1/HTML/ch07/files/allfile/ 』』相對路徑設為『相對路徑設為『 .. /../../.. /../../PIC/bg1.jpgPIC/bg1.jpg 』』則經由計算之後的完整絕對路徑為『則經由計算之後的完整絕對路徑為『 http://127.0.0.1/HTML/http://127.0.0.1/HTML/

PIC/bg1.jpgPIC/bg1.jpg 』。』。


3030

7.67.6 　網頁　網頁 DIYDIY

請翻閱至請翻閱至 18.718.7 節，在節，在 DIYDIY 網頁中加入超鏈結，如網頁中加入超鏈結，如此一來，網頁就可以與其他的網頁相連，真正應此一來，網頁就可以與其他的網頁相連，真正應用了用了 HTMLHTML 網頁互連的特性。網頁互連的特性。

3131

本章習題本章習題

專業 HTML 網頁設計

Documents