網頁程式設計 3-1 URI 的類型... 超連結 (hyperlink) Web 1 1 2 按一下圖片超連結開啟所連結的網頁 2 3-2
超連結 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:jean@mail.lucky.com.tw 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-3
網頁程式設計 3-1-1 絕對 URI URI 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-4
超連結 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-5
網頁程式設計 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-6
超連結 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-7
網頁程式設計 隨堂練習 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-8
超連結 03 3-3 變更超連結文字色彩 <body> link vlink alink <body> link="navy" vlink="green" alink="red" W3C CSS a c b d e f a 已經瀏覽的超連結 b 尚未瀏覽的超連結 c 被選取的超連結 d 已經瀏覽的超連結 e 尚未瀏覽的超連結 f 被選取的超連結 3-9
網頁程式設計 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-10
超連結 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-11
網頁程式設計 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-12
超連結 03 3-6 設定連結至 E-mail 地址的超連結 2 1 1 點取 E-mail 超連結 2 啟動郵件編輯程式並自動填入收件人 E-mail <a> href E-mail E-mail mailto: <a href="mailto:jeanchen@mail.lucky.net.tw"> </a> <a> title 3-13
網頁程式設計 3-7 建立書籤 書籤 (bookmark) <\Ch3\ 2.htm> 1 2 1 書籤的起點 ( 樣式和超連結相同 ) 2 書籤的終點 3-14
超連結 03 <a>...</a> name <a>...</a> href href <a href="bird. htm# "> <body background="birdback.gif"> <ul> 2 <li><a href="# "> </a></li> <li><a href="# "> </a></li> <li><a href="# "> </a></li> </ul> <hr> <dl> 1 <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> 1 使用 name 屬性指定書籤名稱 2 使用 href 屬性指定所要連結的書籤名稱 3-15
網頁程式設計 隨堂練習 ( ) ( ) #0202da #996633 #ffcc00 #ffffff \Ch3\penguin.txt <\Ch3\.htm> a b a 書籤的起點 b 書籤的終點 3-16
超連結 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-17
網頁程式設計 5. 6. URI 7. 8. E-mail 二 實作題 1. \Ch3.htm <\Ch2\.htm> http://www.godot. org.tw/ http:// www.chineseopera.com/.htm ( jean@mail.lucky. net.tw) <\Ch3\ 2.htm> 3-18
超連結 03 <a href="http://www.godot.org.tw/"> </a> <a href="http://www.chineseopera.com/"> </a> <a href=".htm"> </a> <a href="mailto:jeanchen@mail.ht.net.tw"> </a> 2. <\Ch2\.htm> ( ) <\Ch3\ 2.htm> 1 2 3 1 加入這些文字及項目清單 2 書籤的起點 3 書籤的終點 3-19