3-1 uri的類型epaper.gotop.com.tw/pdf/ael009100.pdf3-1 uri 的類型 按一下圖片超連結...
TRANSCRIPT
3-2
網頁程式設計
網頁上除了有琳瑯滿目的文字、圖形、聲音、視訊...，更有連結到其它網頁、檔案
或程式的超連結 (hyperlink)，您不妨將Web想像成一隻能不斷吐絲的蜘蛛，這隻蜘蛛
不僅會編織一張美麗的網，網住包羅萬象的資訊，更會藉著漂浮的絲連上其它蜘蛛
編織的另一張美麗的網，而這條漂浮的絲就是「超連結」，其特徵如下：
● 超連結又分成「文字超連結」與「圖片超連結」。
● 當您將指標移到超連結時，指標會變成手指形狀 。
● 當您按一下超連結時，可以開啟資料、圖片或連結至其它網頁。
3-1 URI的類型
按一下圖片超連結
開啟所連結的網頁
1
1
2
2
3-3
超連結 03
超連結的定址方式稱為URI (Universal Resource Identifier)，換句話說，URI指的是
Web上各種資源的位址，而我們平常聽到的URL (Universal Resource Locator) 則是
URI的子集。URI通常包含下列幾個部分：
通訊協定://伺服器名稱[:通訊埠編號]/資料夾[/資料夾2...]/文件名稱
例如：
http://www.lucky.com.tw:100/Books/index.htm
通訊協定 伺服器名稱 通訊埠編號 資料夾 文件名稱
● 通訊協定：這是用來指定URI所連結的網路服務，如下所示。
通訊協定 網路服務 實例
http:// 全球資訊網 http://www.lucky.com.tw
ftp:// 檔案傳輸 ftp://ftp.nctuccca.edu.tw
file:/// 存取本機磁碟檔案 file:///c:/games/chess.exe
mailto: 傳送電子郵件給使用者 mailto:[email protected]
news: 新聞群組 news:news.hinet.net
telnet:// 遠端登入 telnet://bbs.cc.ntu.edu.tw
● 伺服器名稱[:通訊埠編號]：伺服器名稱是提供服務的主機名稱，而冒號後面的通
訊埠編號用來指定要開啟哪個通訊埠，省略不寫的話，表示為預設值80。由於
電腦可能會同時擔任FTP、Web等伺服器，為了便於區分，每種伺服器會各自對
應一個通訊埠，例如FTP、Telnet、SMTP、Gopher、HTTP、POP、NNTP的通訊
埠編號為21、23、25、70、80、110、119。
● 資料夾：這是存放檔案的地方。
● 文件名稱：這是檔案的完整名稱，包括主檔名與副檔名。
3-4
網頁程式設計
3-1-1 絕對URIURI又分成「絕對URI」和「相對URI」兩種，絕對URI (Absolute URI) 包含通訊協
定、伺服器名稱、資料夾和文件名稱，通常連結至Internet的超連結都須指定絕對
URI，例如http://www.lucky.com.tw/Books/index.htm。
3-1-2 相對URI相對URI (Relative URI) 通常只包含資料夾和文件名稱，有時甚至連資料夾都可以省
略。當超連結所連結的文件和超連結所屬的文件位於相同伺服器或相同資料夾時，
就可以使用相對URI，而不必將URI的通訊協定、伺服器名稱全數寫出。
● 文件相對URI (Document-Relative URI)：以下圖的文件結構為例，假設Default.
htm有連結至email.htm和question.htm的超連結，則超連結的URI可以寫成Contact/
email.htm和Support/FAQ/question.htm，此處所使用的即是文件相對URI，由於這
些資料夾和文件均位於相同資料夾，故通訊協定和伺服器名稱可以省略。
3-5
超連結 03
請注意，若staff.htm有連結至email.htm的超連結，則其URI須指定為 ../Contact/
email.htm，".." 的意義是回到上一層資料夾；同理，若question.htm有連結至email.
htm的超連結，則其URI須指定為 ../../Contact/email.htm。
● 伺服器相對URI (Server-Relative URI)：伺服器相對URI是相對於伺服器的根目
錄，以下圖的文件結構為例，斜線 (/) 代表根目錄，當我們要表示任何檔案或資
料夾時，都必須從根目錄開始，例如question.htm的位置為 /Support/FAQ/question.
htm，最前面的斜線 (/) 代表的是伺服器的根目錄，不能省略。
同理，若Default.htm有連結至email.htm或question.htm的超連結，則其URI須指定
為 /Contact/email.htm 和 /Support/FAQ/question.htm，最前面的斜線 (/) 不能省略。
文件相對URI的優點是當我們將包含所有資料夾和文件的資料夾整個搬移到不同伺
服器或其它位置時，文件之間的超連結仍可正確連結，無須重新指定；而伺服器相
對URI的優點是當我們將所有資料夾和文件搬移到不同伺服器時，文件之間的超連
結仍可正確連結，無須重新指定。
3-6
網頁程式設計
3-2 建立超連結－<a> 標籤
<a>...</a> 標籤
標籤解說：這個標籤用來在HTML網頁中插入超連結。
屬性解說：
● accesskey="..."：指定超連結的存取按鍵。
● charset="..."：指定超連結的字元編碼方式。
● coords="x1,y1,x2,y2"：指定影像地圖的熱點座標。
● href="uri"：指定超連結所連結之文件的相對或絕對位置。
● hreflang="language-code"：指定href屬性值的語系。
● name="..."：指定書籤 (bookmark) 名稱。
● rel="..."：指定從目前文件到href屬性指定之文件的關聯，例如 <a rel="next"
href="nextpage.htm">
● rev="..."：指定從href屬性指定之文件到目前文件的關聯。
● shape="{rect,circle,poly}"：指定影像地圖的熱點形狀。
● tabindex="n"：指定超連結在網頁中的 [Tab] 鍵順序，n是1 ~ 999的整數，整數愈
小，順序就愈高，-1表示不允許以 [Tab] 鍵選取。
● target="..."：指定目標框架的名稱 (適用於框架網頁)。
● type="..."：指定內容類型 (content type)。
● 另外還有title、id、class、style、lang、dir、onclick、ondblclick、onmousedown、
onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、
onkeydown、onkeyup、onfocus、onblur等屬性。
3-7
超連結 03
現在，我們就以下圖為例，說明建立超連結的幾種情況：
● 連結位於相同資料夾的文件：假設要將staff.htm內的文字「FAQ」設定成連結至
question.htm的超連結，則可以使用文件相對URI來指定超連結的URI，例如 <a
href="question.htm">FAQ</a>。
● 連結位於不同資料夾的文件：假設要將about.htm內的文字「員工」設定成連結
至staff.htm的超連結，則可以使用文件相對URI來指定超連結的URI，例如 <a
href="Support\staff.htm">員工</a>。
● 連結Web上的文件：假設要將文字「Google」設定成連結至Google台灣的超連
結，則可以使用絕對URI來指定超連結的URI，例如 <a href="http://www.google.
com.tw">Google</a>。
提醒您，當您輸入URI時，請留意英文字母的大小寫，由於有不少Web伺服器使用
UNIX系統，而UNIX系統會區分檔案名稱的大小寫，一旦輸入錯誤，就會找不到
檔案。
3-8
網頁程式設計
依照如下提示製作網頁：
1. 新增一個名稱為Zoo的資料夾，接著在此資料夾內新增一個名稱為Hot的資料夾
及三個空白網頁，檔名為africa.htm、asia.htm、default.htm，最後在Hot資料夾內
新增三個空白網頁，檔名為kiwi.htm、koala.htm、penguin.htm。
2. 在default.htm輸入如下圖的內容，網頁的背景色彩為 "#ffffdd"，然後將「非洲動
物區」、「亞洲動物區」、「奇異鳥」、「無尾熊」、「企鵝」、「木柵動物
園」等文字分別連結至africa.htm、asia.htm、kiwi.htm、koala.htm、penguin.htm等
檔案和木柵動物園的網址http://www.zoo.gov.tw。<\Ch3\Zoo\default.htm>
註：當您將指標移到超連結時，指標會變成手指形狀，按一下即可開啟所連結的文
件。在您完成這個網頁後，記得要測試一下各個超連結能否連結至正確的檔案。
隨 堂 練 習
3-9
超連結 03
3-3 變更超連結文字色彩
在預設的情況下，尚未瀏覽的超連結文字為藍色，已經瀏覽的超連結文字為紫色，
如左下圖，若要自訂色彩，可以使用 <body> 標籤的link、vlink、alink屬性來指定尚
未瀏覽、已經瀏覽及被選取的超連結文字色彩，右下圖是我們在 <body> 標籤加上
link="navy" vlink="green" alink="red" 三個屬性的結果。事實上，除了使用這些屬性
之外，W3C更鼓勵網頁設計人員改用CSS自訂超連結文字色彩。
a d
b ec f
a
bc
d
e
f
已經瀏覽的超連結
尚未瀏覽的超連結
被選取的超連結
已經瀏覽的超連結
尚未瀏覽的超連結
被選取的超連結
3-10
網頁程式設計
3-4 定義文件之間的關聯－<link> 標籤
<link> 標籤可以用來定義目前文件與其它文件之間的關聯，常見的關聯如下：
● contents：內容
● index：索引
● glossary：名詞解釋
● copyright：版權宣告
● next：下一頁 (和rel= 一起使用)
● previous：上一頁 (和rev= 一起使用)
● start：第一個文件
● help：線上說明
● bookmark：書籤
● stylesheet：樣式表
● search：搜尋資源
● top：首頁
下面是一個例子。
<head>
<title>新網頁1</title>
<link type="text/html" rel="help" href="help.htm">
<link rev="previous" href="backpage.htm">
</head>
3-11
超連結 03
<link> 標籤
標籤解說：這個標籤用來定義目前文件與其它文件之間的關聯，它必須放在HTML
網頁的 <head>...</head> 區塊，而且沒有結束標籤。
屬性解說：
● charset="..."：指定正在建立關聯之文件的字元編碼方式。
● href="uri"：指定正在建立關聯之文件的相對或絕對位置。
● hreflang="language_code"：指定href屬性值的語系。
● media="{screen,print,projection,braille,speech,all}"：指定目的媒體類型，分別為螢
幕、印表機、投影機、點字機、聲音合成器及全部。
● name="..."：指定名稱給正在定義的關聯。
● rel="..."：定義目前文件與其它文件的關聯，例如 <link rel="search" href="search.
htm">
● rev="..."：定義目前文件與其它文件的反向關聯，例如 <link rev="previous"
href="backpage.htm">
● target="..."：指定目標框架的名稱 (適用於框架網頁)，例如 <link target="_blank"
rel="top" href="home.htm">。
● type="..."：指定內容類型 (content type)。
● 另外還有title、id、class、style、lang、dir、onclick、ondblclick、onmousedown、
onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、
onkeydown、onkeyup等屬性。
3-12
網頁程式設計
3-5 設定相對URI的路徑－<base>標籤
在HTML網頁中，無論是連結到圖片、檔案、程式或樣式表的超連結，都得靠URI
來指定路徑，而且為了方便起見，我們通常是將檔案放在相同資料夾，然後採用相
對URI來表示超連結的位置。
倘若有天我們將檔案搬移到其它資料夾，那麼相對URI是否要一一修正呢？其實不
用，只要使用 <base> 標籤指定相對URI的相對位置就可以了。
<base> 標籤的屬性如下：
● href="uri"：指定相對URI的絕對位置。
● target="..."：指定目標框架的名稱 (適用於框架網頁)。
下面是一個例子，由於使用 <base> 標籤指定位置，因此，對倒數第三行的相對URI
"../books/css.htm" 來說，其實際位置為 "http://www.lucky.com/books/css.htm"。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>新網頁1</title>
<base href="http://www.lucky.com/product/default.htm">
</head>
<body>
<a href="../books/css.htm">CSS語法介紹</a>
</body>
</html>
3-13
超連結 03
3-6 設定連結至E-mail地址的超連結
許多網頁會提供回信服務，瀏覽者只要點取網頁上的電子郵件地址、信箱之類的圖
示或文字，就可以啟動郵件編輯程式，而且收件人的地址會自動填寫上去。
當您設定連結至E-mail地址的超連結時，除了要使用 <a> 標籤的href屬
性指定收件人的E-mail地址，還要在E-mail地址前面加上mailto: 通訊
協定，例如 <a href="mailto:[email protected]">歡迎寫信給我們
</a>。如果您希望在瀏覽者將指標移到超連結時會出現提示文字，可
以在設定超連結的同時使用 <a> 標籤的title屬性來指定提示文字。
點取E-mail超連結 啟動郵件編輯程式並自動填入收件人 1 2
1
2
3-14
網頁程式設計
3-7 建立書籤
當網頁的內容超過一頁時，為了方便瀏覽者閱讀資料，您可以將網頁上的主題設定
成書籤 (bookmark)，日後瀏覽者只要點取書籤，便能跳到指定的主題。
在此，我們以 <\Ch3\台灣野鳥2.htm> 示範如何設定書籤，由於這個網頁的內容比較
長，瀏覽者可能得移動捲軸才能閱讀想看的資料，有點不方便，於是我們決定根
據網頁的內容，將網頁上方的項目清單「黑面琵鷺」、「赤腹鷹」、「八色鳥」
三個項目設定成書籤的起點，日後瀏覽者只要點取網頁上方的「黑面琵鷺」、「赤
腹鷹」、「八色鳥」等書籤的起點，就可以跳到相關的介紹文字，也就是書籤的
終點。
1
2
2
1
書籤的起點 (樣式和超連結相同)書籤的終點
3-15
超連結 03
書籤的建立有兩個部分，首先，我們必須在書籤的終點使用 <a>...</a> 標籤的name
屬性指定書籤的名稱，其次才是到書籤的起點使用 <a>...</a> 標籤的href屬性指定所
連結的書籤名稱。書籤的終點和起點設定完畢後，瀏覽者只要點取書籤的起點，就
可以跳到書籤的終點。在這個例子中，書籤的起點和終點位於相同檔案，故在指定
href的值時將檔名省略，若兩者不在相同檔案，就須指定檔名，例如 <a href="bird.
htm#八色鳥">。
<body background="birdback.gif">您可曾知道，在這片名為福爾摩莎的寶島上，不僅孕育了許多特有的鳥種，更是許多候
鳥過冬棲息的庇護所，如黑面琵鷺、小青足鵴、大白鷺、鷹斑鵴、蒼鷺、戴勝、灰鶺
鴒、高翹行、小環頸行鳥、燕行鳥、反嘴行鳥、中白鷺、金斑行鳥、赤腹鷹、中白鷺、
八色鳥、花嘴鴨等等，只要您肯用心留意，就可以看到這些美麗的天使。在這裡，我們
將為您介紹的候鳥有：
<ul> <li><a href="#黑面琵鷺">黑面琵鷺</a></li> <li><a href="#赤腹鷹">赤腹鷹</a></li> <li><a href="#八色鳥">八色鳥</a></li> </ul> <hr> <dl> <dt><font color="green"><b><i><a name="黑面琵鷺">黑面琵鷺</a></i> </b></font></dt> <dd>黑面琵鷺最早的棲息地是韓國及中國的北方沿海，但近年來它們覓著了 一個新的棲息地，那就是寶島台灣的曾文溪口沼澤地。</dd> <dt><font color="green"><b><i><a name="赤腹鷹">赤腹鷹</a></i> </b></font></dt> <dd>赤腹鷹的棲息地在墾丁、恆春一帶，只要一到每年的八、九月，赤腹鷹 就會成群結隊的到台灣過冬，愛鷹的人士可千萬不能錯過。</dd> <dt><font color="green"><b><i><a name="八色鳥">八色鳥</a></i> </b></font></dt> <dd>八色鳥在每年的夏天會從東南亞地區飛到台灣繁殖下一代，由於羽色艷 麗(八種色彩)，可以說是山林中的漂亮寶貝。</dd> </dl></body>
<\Ch3\台灣野鳥2.htm>
使用name屬性指定書籤名稱 使用href屬性指定所要連結的書籤名稱1
1
2
2
3-16
網頁程式設計
書籤的起點 書籤的終點
完成如下書籤網頁，日後瀏覽者只要點取書籤的起點 (例如「帝王企鵝」、「跳岩
企鵝」、「頰條企鵝」)，就可以跳到相關的介紹 (即書籤的終點)，其中藍色文字
為 #0202da，棕色文字為 #996633，跑馬燈背景色彩為 #ffcc00，跑馬燈文字色彩為
#ffffff，文字檔為 \Ch3\penguin.txt。<\Ch3\南極的精靈.htm>
隨 堂 練 習
b
a
a b
3-17
超連結 03
一、填充題
1. URI的類型有 ___________ 和 ___________ 兩種，通常連結至Internet上的網頁的超連結都須指定為 ___________。
2. 假設文件結構如下，請採用文件相對URI的方式來指定URI：
(a) 若tree.htm有連結至kiwi.htm的超連結，則其URI須指定為何？
(b) 若penguin.htm.htm有連結至koala.htm的超連結，則其URI須指定為何？
(c) 若contactus.htm有連結至tree.htm的超連結，則其URI須指定為何？
(d) 若asia.htm有連結至kiwi.htm的超連結，則其URI須指定為何？
3. 當我們要建立書籤時，可以使用 標籤的 和 ___________屬性來指定書籤的起點及終點。
4. 當我們要在超連結顯示提示文字時，可以使用 標籤的 ___________屬性。
學 習 評 量
3-18
網頁程式設計
二、實作題
1. 首先，在 \Ch3資料夾內新增一個名稱為「節目表.htm」的空白網頁；接著，在 <\Ch2\芭蕾舞團.htm> 的最下方加入「◎果陀劇場」、「◎戲園子」、「◎其它節目時間表」、「◎歡迎寫信給我們」等文字，間隔為
兩個空白字元；最後將這些文字連結至 http://www.godot. org.tw/、http://www.chineseopera.com/、節目表.htm及電子郵件地址 (例如[email protected])，再另存新檔為 <\Ch3\芭蕾舞團2.htm>。
5. 當我們要變更已經瀏覽和尚未瀏覽的超連結文字色彩時，可以使用 ___________ 標籤的 ___________ 和 ___________ 屬性。
6. 我們可以使用 ___________ 標籤來設定相對URI的路徑。
7. 若要定義目前文件與其它文件之間的關聯，可以使用 ___________ 標籤。
8. 若要設定連結至E-mail地址的超連結，必須在電子郵件地址之前加上 ___________ 通訊協定。
3-19
超連結 03
【提示】
◎<a href="http://www.godot.org.tw/">果陀劇場 </a>
◎<a href="http://www.chineseopera.com/">戲園子 </a>
◎<a href="節目表.htm">其它節目時間表 </a>
◎<a href="mailto:[email protected]">歡迎寫信給我們</a>
2. 在 <\Ch2\西洋音樂.htm> 的上方加入如下圖的文字及項目清單，然後將「巴哈」、「貝多芬」、「布拉姆斯」、「蕭邦」等項目設定成書籤的
起點，日後瀏覽者只要點取書籤的起點，就可以跳到相關的介紹 (即書籤的終點)，修改完成後另存新檔為 <\Ch3\西洋音樂2.htm>。
加入這些文字及項目清單 書籤的起點 書籤的終點
3
1
2
1 2 3