網頁運用技巧【07】

第七篇
網頁鏈結種類研討

適合程度： 初學者 一般程度 進階者 以上均宜
※這些事您應該知道※
網路中使用最多的就是網頁，他靠鏈結 (LINK) 這個最大功臣，我們才能網網相連、天涯若比鄰。
其實鏈結 的HTML 語法最簡單，他只使用一個英文字【A】，也就是 Anchor (錨定的意圖)。
在自己電腦裡面，他靠相對路徑來互動；在網路上，他藉由 URL (絕對路徑)來相連。
URL (Uniform Resource Location) 是統一資源定位器，加上各主機都擁有獨立的位址 (IP)，那就好辦了。
IP (Internet Protocol) 是網際網路通訊協定，彼此有了共同溝通語言，為了好記我們使用易記的 DNS。
DNS (Domain Name System) 是網域名稱系統，也就像我們家的地址一樣，全世界只有一個。
HTTP (HyperText Transfer protocol) 超文字傳輸協定，瀏覽器與遠端網路伺服器溝通時所使用的協定。
ISP (Internet service provider) 網路服務提供者，我們就是藉瀏覽器並靠他連到世界各地。
URL 鏈結的方式有很多種類，其中我們常用的就是 HTTP，他的語法如下：
     HTTP://HostName/Port/Path/FileName 也就是
     HTTP://主機名稱/埠號/路徑/檔名；埠號一般 = 80，大多省略不用。
如果您想瞭解更多資訊，請到初學者園地的【網際網路基本觀念】各篇研習。

壹、鏈結基本語法：
文字外部位址連結：<A HREF="要連結的 URL">文字</A>
舉例：<A HREF="http://www.webpage.idv.tw/maillist/">網頁研習室【電子報】</A>
圖片外部位址連結：<A HREF="要連結的 URL"><IMG SRC="圖片"></A>
範例：
內部文字或圖片連結：<A HREF="要連結的路徑/檔案名稱">文字或圖片語法</A>
這是根據自己電腦的實際路徑才能測試。
舉例：<A HREF="test/test.htm">測試網頁</A>，請按 測試網頁
文件特定位置連結：
指定他要到何處：<A HREF="#錨的名稱">說明圖文<A> 或 <A HREF="檔名#錨的名稱">說明圖文<A>
告訴他我在這裡：<A NAME="錨的名稱">。
看了以上這些介紹，您應該對超鏈結有些基本看法。

貳、認識路徑：
絕對路徑：<a href="http://www.webpage.idv.tw/maillist/">文字或圖片語法</A>
就是必須要有完整的 URL 路徑名稱。
範例：請按 網頁研習室【電子報】
因為使用 URL 絕對路徑，所以您必需連線才能鏈結。
相對路徑：<a href="../../cd/cd.htm">文字或圖片語法</A>
指目前您所使用電腦的內部路徑，也就是站在現在的位置看該檔案所在的位置。
範例：我要購買【教學 CD 片】
請注意 URL 列上的位址，並與現有的位址比對一下。
路徑關聯：
在同一層內表示法：<a href="cd.htm">
在上一層的表示法：<a href="../cd.htm">
在上兩層的表示法：<a href="../../cd.htm">
在下一層的表示法：<a href="cd/cd.htm">
在下兩層的表示法：<a href="file/cd/cd.htm">
預設基礎路徑：
<HEAD>
<BASE   HREF="伺服器與目錄位址">【必須放在 HEAD 標籤內】
</HEAD>
舉例：<BASE   HREF="http://www.webpage.idv.tw/maillist/web/10/">
此意指本頁內所有需要 Link 的位置，都會自動指向 http://www.webpage.idv.tw/maillist/web/10/。
也就是在連線狀況下，您不用到我的網站上，Browser就會自動到
http://www.webpage.idv.tw/maillist/(主機下)/web/10/ 的子目錄找到須要的檔案 。
回頭去查看我寄給您的部份電子報，打開檢視原始檔，就在網頁最上面。
預設基礎路徑，只能用於外部線上鏈結(如發送電子報)。
他的好處就是，您不用在每個網頁的 Link 處，加入完整的 URL。
看了這篇介紹，您是否已經搞清楚，甚麼是絕對路徑、相對路徑、預設基礎路徑？

參、鏈結的特殊用法：
電子信箱：打開信箱這也是屬於超鏈結的一種。 【請看範例】
下載資料：下載資料或打開外掛 (Plug-In) 軟體也是屬於超鏈結的一種 。 【請看範例】
影像地圖：
這也是屬於超鏈結的一種，我之前在編輯工具解說的【MapEdit 索引地圖編輯器】裡，已有詳盡介紹。
微軟 (IE) 專用快速鍵 (AccessKey)：<A HREF="URL" ACCESSKEY="鍵盤上的英文字母">
當然，NetScape 是無福消受的；讓您不使用滑鼠也您遨遊網路。 【請看範例】
用 JavaScript 代替 HTML：
JavaScript 也能執行超鏈結任務，在【實用 Script 程式】各篇中，有許多詳細說明，您可以好好研究他。【請看範例】
看了這篇介紹後，您是否覺得：要學的東西還不少呢？。

肆、容易犯錯的超鏈結範例：
不經意，您有可能犯了這些錯誤，甚至找了很久，還未發現哦【請看實例】

伍、其他事項：
index.htm 副檔名 3 個字元適用於 16 位元軟體，index.html 副檔名 4 個字元者可用於 32 位元軟體。
一般首頁檔名設定是依據各主機不同，以優先順序來排列，常見的有：
    index.htm(l)、default.htm(l)〈用於 NT 主機〉、home.htm(l)、welcome.htm(l)
被鏈結的文字，會有三種顏色變化，一般是可由使用者電腦內瀏覽器之設定來決定：為了達到編輯的效果，您可在
<Body 後加入 LINK=#800000 (可 Link 的顏色) VLINK=#800080 (被 Link 過的顏色) ALINK=#FF00FF (按下 Link 時的顏色)>。
這篇文章，發了我一整天時間來作，為了就是希望網友能一次就搞懂。
如果您因此受益，我的辛苦就沒白費，這裡很多資料是您買書都看不到的，請多笑納。

如何完整取得所有資料：
如果您想完整取得電子報內所有檔案資料，我們提供燒錄光碟片給您 Go 。
凡加入教學或教材會員者，均可獲得以下乙份完整的資料光碟。
詳細內容：語法教學、第一電子報、第二電子報、第三期電子報、網頁圖窟。

結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。