第六章 鏈 結

HTML功能強大的地方就在於其連結到其他文件的能力,通常WWW瀏程式會將連結文字改變其顏色或加底線以顯示其特殊性(稱為超文字鏈結,或簡稱鏈結)。

在HTML中,唯一與鏈結有關的標籤記號是<a>,代表的是 "anchor"-錨的意思。

<a href="檔案名稱">在此鍵入被視為鏈結的文字</a>

範例如下:

<a href="base_01.htm">回到第一章</a>

執行結果:

回到第一章

這是鏈結到目前所顯示文件同一層目錄中的 "base_01.htm"檔,當然也可以用相對路徑的方式,鏈結到與現在顯示文件不同目錄下的檔案 ( ../ 這是回到上一層的意思),範例如下:

<a href="../class_01.htm">到線上資訊教室的認識電腦篇</a>

執行結果:

到線上資訊教室的認識電腦篇

這種寫法叫做 "相對路徑",不過你也可以用UNIX中 "絕對路徑" 的表示法告知某檔案存放位置的完整路徑。但一般來說,用 "相對路徑" 是比較好,因為鍵入的字較少,且當你要將一群檔案般移至其它目錄時,較不會影響檔案彼些間的連結性。不過若是要連結到並沒有完全相關的文件時,最好使用 "絕對路徑"。

 

除了文字的連結外,你也可以利用圖形來做超連結:

在原本放文字的地方,寫入<img>標籤語法,指定圖形檔即可。

走 ! 去 <a href="http://search.yam.org.tw/b5/yam/">
<img src="yam01.gif" border=1></a>蕃薯藤逛逛!!

執行結果:

走!去 蕃薯藤逛逛!!

 

另外, 還可以連結到其他 Internet 網路服務資源

範例如下:

e-mail 範例:
歡迎您的來信指教:<a href="mailto:ljanny@mail.isu.net.tw">ljanny@mail.isu.net.tw</a><p>

FTP 範例:
走! 到 <a href="ftp://ftp.ulead.com.tw">ftp.ulead.com.tw </a>看看有什麼好東西<p>

GOPHER 範例:
按<a href="gopher://gopher.seed.net.tw">這裡</a>就可以進入資策會SEEDNet 的 Gopher<p>

NEWS 範例:
<a href="news:bunny.ntu.edu.tw">台大計中的 News 討論群</a><p>

Telnet 範例:
<a href="telnet:bbs.seed.net.tw">Telnet 到 SEEDNet</a>

執行結果

 

站台內部的超連結

<a href=#錨的名稱>
<a name=錨的名稱>

方法:
1.先在預被連結的文章前面指定<a name="隨意取個名字"></a>
2.在目錄的地方指定<a href="#你隨意取的那個名字">目錄名稱</a>連結到你步驟一取的那個名字的地方。

範例如下:

生活無味嗎?來點笑料吧!
<a href="#light">用嘴包尿布</a> |
<a href="#nose">心理測驗</a> |
<a href="#fat">每天都是乾乾</a>

<a name="light"></a>用嘴包尿布
......
<a name="nose"></a>心理測驗
......
<a name="fat"></a>每天都是乾乾
......

執行結果


[ 上一章 | 教學區 | 下一章 ]