6-1 　認識超連結

6-1　認識超連結 • 將不同的網頁、網站相連 • 圖片、動畫等檔案，也透過超連結的方式呈現 • <a href="…">…</a> • Anchor 錨 • URL(Universal Resource Locator)

URL位置表示法 • 通用的URL格式： • <scheme>:<scheme_dependent_imformation> • 特定通訊協定的URL格式： • <scheme>://<host:[port]>/<path>/<filename> • <scheme>： • 機制或傳輸協定，例如：HTTP、FTP、FILE、TELNET

URL位置表示法 • <host:[port]>： • host為主機的名稱(domain name)或IP位置(IP address) • port為連接該伺服器的埠號 • 使用該通訊協定的 well-known port 時，不必標示埠號 • Well known ports • http = 80 • ftp = 21

URL位置表示法 • path • 被連結檔案的路徑 • 在 Linux (UNIX) 系統上，目錄名稱的英文字母大小寫是不同的 • filename • 被連結檔案的完整檔名 • 在 Linux (UNIX) 系統上，檔案名稱的英文字母大小寫是不同的

URL位置表示法 • 以下幾個都是合法的URL表示法。 • http://www.w3c.org/html4/index.htm • http://140.113.10.1/welcome.index • telnet://140.113.23.3 • elnet://bbs.nctu.edu.tw • ftp://ftp.nctu.edu.tw • ftp://140.113.23.100 • file:///C|/XHTML/ch06/ch6-01.htm • mailto:jhchen@cis.nctu.edu.tw • wais://www.edu.tw/SQLdb?w3-html • gopher://gopher.edu.tw • news://news.cis/nctu.edu.tw/tw.bbs.comp.book

超連結的對象 • 超連結的對象 • 網站 • 檔案 • 圖片 • 電子郵件

超連結的絕對路徑與相對路徑 • 絕對路徑 • 包含主機名稱、路徑、文件名稱 • http://courses.ywdeng.idv.tw/chit/2007/web/index.html • 相對路徑 • 從目前位置起算的文件位置 • 兩點 .. 表示上一層目錄，一點 . 表示目前目錄 • <a href=“../pet/dog.html”>

超連結的絕對路徑與相對路徑（續） http://a.b.c 絕對 http://a.b.c/pet/dog.html 相對 ../pet/dog.html images pet dog.html 目前位置 http://a.b.c/work/index.html cat.html work Index.html p1 w.html 絕對 http://a.b.c/work/p1/w.html 相對 ./p1/w.html <a href="../pet/dog.html">My Dog</a> <a href="p1/w.html">My Project1 Work</a>

超連結的種類 • 超連結隨著設定對象的不同，主要可分為三種 • 內部超連結 • 網頁內部的文字或物件 • 外部超連結 • 書籤 • 電子郵件超連

6-2　網頁超連結的設定 • 認識超連結的種類後，底下就來看看要如何利用HTML程式在網頁中建立各種不同的超連結，要在HTML文件建立超文字連結是使用<A>標籤。首先先來看看要如何建立外部超連結。

建立外部超連結 • <a href="超連結網址" title="提示文字" target="目標視窗">顯示文字</a> • href：指定鏈結對象的 URL • target：指定鏈結發生時，所產生的效果處 • _blank 開新視窗 • _top 最頂層視窗 • _self 目前視窗 • _parent 上一層視窗

鏈結至特定段落 • 設定錨點 • <a name="sec1"> • 跳到錨點處 • <a href="#sec1">第一段</a> • 範例內容執行結果 • 範例內容執行結果

建立 E-mail 的連結 • href="mailto:ywdeng@cc.chit.edu.tw" • 自動設定E-mail主旨與內文： • mailto:a@b.com?subject=主旨&body=內文 • 範例內容執行結果

6-3　超連結文字的變化 • <BODY>標籤屬性 • Link：指定尚未瀏覽的超連結文字色彩。 • Vlink：已經瀏覽過的超連結文字色彩。 • Alink：目前正被選取的超連結文字色彩。 • 範例執行結果

替超連結加上說明文字 • <a href=… title=… • 當滑鼠游標移到超連結時，會出現說明文字

點選超連結文字時變更游標的形狀 • 透過STYLE這個屬性設定游標形狀 • Crosshair • Default • Help • Move • Text • wait • 範例

超連結設定與#符號 • 當你在設定超連結時，有時不確定超連結的檔案或是網址，這時可以先用『#』符號代替超連結的對象，即使是輸入#符號，也會變更為超連結的狀態。

設定基本路徑(<base>) • <base>為獨立標籤，功能為設定基本路徑。 • 範例執行結果

6-1 認識超連結