超連結 03 URI (Universal Resource Identifier) URI Web URL (Universal Resource Locator) URI URI :// [: ]/ [/ 2...]/

Size: px

Start display at page:

Download "超連結 03 URI (Universal Resource Identifier) URI Web URL (Universal Resource Locator) URI URI :// [: ]/ [/ 2...]/"

馔臧
5 years ago
Views:

1 網頁程式設計 3-1 URI 的類型... 超連結 (hyperlink) Web 按一下圖片超連結開啟所連結的網頁 2 3-2

2 超連結 03 URI (Universal Resource Identifier) URI Web URL (Universal Resource Locator) URI URI :// [: ]/ [/ 2...]/ 通訊協定 URI 通訊協定網路服務實例全球資訊網 ftp:// 檔案傳輸 ftp://ftp.nctuccca.edu.tw file:/// 存取本機磁碟檔案 file:///c:/games/chess.exe mailto: 傳送電子郵件給使用者 news: 新聞群組 news:news.hinet.net telnet:// 遠端登入 telnet://bbs.cc.ntu.edu.tw 伺服器名稱 [: 通訊埠編號 ] 80 FTP Web FTP Telnet SMTP Gopher HTTP POP NNTP 資料夾文件名稱 3-3

網頁程式設計 3-1-1 絕對 URI URI URI URI 絕對 URI (Absolute URI) Internet URI http://www.lucky.com.tw/books/index.

3 網頁程式設計絕對 URI URI URI URI 絕對 URI (Absolute URI) Internet URI 相對 URI 相對 URI (Relative URI) URI URI 文件相對 URI (Document-Relative URI) Default. htm .htm question.htm URI Contact/ .htm Support/FAQ/question.htm URI 3-4

4 超連結 03 staff.htm .htm URI../Contact/ .htm ".." question.htm . htm URI../../Contact/ .htm 伺服器相對 URI (Server-Relative URI) URI (/) question.htm /Support/FAQ/question. htm (/) Default.htm .htm question.htm URI /Contact/ .htm /Support/FAQ/question.htm (/) URI URI 3-5

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 ~ [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

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=" com.tw">google</a> URI Web UNIX UNIX 3-7

$htm asia.htm kiwi.htm koala.htm penguin.htm http://www.zoo.gov.tw <\Ch3\Zoo\default.htm> 3-8$

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 <\Ch3\Zoo\default.htm> 3-8

超連結 03 3-3 變更超連結文字色彩 <body> link vlink alink <body> link="navy" vlink="green"

8 超連結變更超連結文字色彩 <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

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

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

11 網頁程式設計 3-5 設定相對 URI 的路徑 -<base> 標籤 HTML URI URI URI <base> URI <base> href="uri" URI target="..." ( ) <base> URI "../books/css.htm" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title> 1</title> <base href=" </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

12 超連結設定連結至地址的超連結點取超連結 2 啟動郵件編輯程式並自動填入收件人 <a> href mailto: <a href="mailto:jeanchen@mail.lucky.net.tw"> </a> <a> title 3-13

$網頁程式設計 3-7 建立書籤書籤 (bookmark) <\Ch3\ 2.$

13 網頁程式設計 3-7 建立書籤書籤 (bookmark) <\Ch3\ 2.htm> 書籤的起點 ( 樣式和超連結相同 ) 2 書籤的終點 3-14

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

$\Ch3\penguin.txt <\Ch3\.$

15 網頁程式設計隨堂練習 ( ) ( ) #0202da # #ffcc00 #ffffff \Ch3\penguin.txt <\Ch3\.htm> a b a 書籤的起點 b 書籤的終點 3-16

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

$網頁程式設計 5. 6. URI 7. 8. E-mail 二實作題 1. \Ch3.htm <\Ch2\.htm> http://www.godot. org.$

17 網頁程式設計 URI 二實作題 1. \Ch3.htm <\Ch2\.htm> org.tw/ ( jean@mail.lucky. net.tw) <\Ch3\ 2.htm> 3-18

$htm"> </a> <a href="mailto:jeanchen@mail.ht.net.tw"> </a> 2. <\Ch2\.htm> ( ) <\Ch3\ 2.$

18 超連結 03 <a href=" </a> <a href=" </a> <a href=".htm"> </a> <a </a> 2. <\Ch2\.htm> ( ) <\Ch3\ 2.htm> 加入這些文字及項目清單 2 書籤的起點 3 書籤的終點 3-19

關於本書 Part 3 CSS XHTML Ajax Part 4 HTML 5 API JavaScript HTML 5 API Canvas API ( ) Video/Audio API ( ) Drag and Drop API ( ) Geolocation API ( ) Part 5

關於本書 Part 3 CSS XHTML Ajax Part 4 HTML 5 API JavaScript HTML 5 API Canvas API ( ) Video/Audio API ( ) Drag and Drop API ( ) Geolocation API ( ) Part 5 網頁程式設計 HTML JavaScript CSS HTML JavaScript CSS HTML 5 JavaScript JavaScript HTML 5 API CSS CSS Part 1 HTML HTML 5 API HTML 5 Apple QuickTime Adobe Flash RealPlayer Ajax XMLHttpRequest HTML 4.01 HTML 5