網頁程式設計 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 <article> <section> <nav> <header> <footer> <video> <audio> <canvas> Part 2 JavaScript JavaScript Scripts Opera Chrome Safari FireFox Internet Explorer PC Android ios JavaScript JavaScript JavaScript JavaScript HTML window JavaScript document element 2
關於本書 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 A HTML B HTML PDF HTML JavaScript HTML JavaScript bgcolor="#rrggbb" rrggbb RGB [] function function_name([parameterlist]) [parameterlist] return; return value; return PowerPoint http://www.gotop.com.tw/ (02)2788-2408 (04)2452-7051 (06)270-8568 (07)384-7699 3
4 Chapter 4-1 URI 4-2 <a> 4-3 URI <base> 4-4 <link> 4-5
04 網頁程式設計 4-1 URI (hyperlink) URI (Universal Resource Identifier) URI Web URL (Universal Resource Locator) URI URI :// [: ]/ [/ 2...]/ http://www.lucky.com.tw/books/index.html URI http:// http://www.lucky.com.tw ftp:// ftp://ftp.lucky.com.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 HTTP 80 4-2
超連結 備註 Web Web (client-server module) (client) (server) Web Web Web (URI) Web Web Web HTML HTML Web HTML HTML Web (URI) Web Request Header ( ) Web HTML HTML Response Header ( ) Request Header Response Header HTTP Header 4-3
04 網頁程式設計 4-1-1 URI URI URI URI URI (Absolute URI) URI http://www.lucky.com.tw/books/index.html 4-1-2 URI URI (Relative URI) URI URI URI URI (Document-Relative URI) default.html email.html question.html URI Contact/email.html Support/FAQ/question.html URI 4-4
超連結 staff.html email.html URI../Contact/email.html ".." question.html email.html URI../../ Contact/email.html URI (Server-Relative URI) URI (/) question.html /Support/FAQ/question.html (/) default.html email.html question.html URI /Contact/email.html /Support/FAQ/question.html (/) URI URI 4-5
04 網頁程式設計 4-2 <a> <a> ( ) HTML 5 charset="..." coords="x1,y1,x2,y2" href="uri" hreflang="language-code" href name="..." (bookmark) rel="..." href <a rel="next" href="nextpage.html"> rev="..." href <a rev="pre" href="backpage.html"> shape="{rect,circle,poly}" target="..." type="content-type" media="{screen,print,projection,braille,speech,tv,handheld,all}" ( ) ( ) all 2-2-1 2-2-2 HTML 4.01 media HTML 5 href target rel media hreflang type 4-6
超連結 staff.html FAQ question.html URI URI <a href="question.html">faq</a> URI ( UNIX) about.html staff.html URI URI <a href="support\staff.html"> </a> Web Google Google URI URI <a href="http://www.google.com.tw/">google</a> 4-7
04 網頁程式設計 隨堂 練習 1. Zoo Zoo Hot africa.html asia.html default.html Hot kiwi.html koala.html penguin.html 2. default.html africa.html asia.html kiwi.html koala.html penguin.html http://www.zoo.gov.tw/ <ul type="circle"> <li><a href="africa.html"> </a></li> <li><a href="asia.html"> </a></li> <li><a href="hot\kiwi.html"> </a></li> <li><a href="hot\koala.html"> </a></li> <li><a href="hot\penguin.html"> </a></li> </ul> <a href="http://www.zoo.gov.tw/"> </a> 4-8
超連結 4-2-1 <body> link vlink alink <body bgcolor="#ffffdd" alink="green"> <p>...</p> <ul type="circle"> <li><a href="africa.html"> </a></li> <li><a href="asia.html"> </a></li> <li><a href="hot\kiwi.html"> </a></li> <li><a href="hot\koala.html"> </a></li> <li><a href="hot\penguin.html"> </a></li> </ul> <a href="http://www.zoo.gov.tw/"> </a> </body> link vlink alink HTML 4.01 Deprecated ( ) HTML 5 CSS 4-9
04 網頁程式設計 4-2-2 <a> href <!doctype html> <html> <head> <meta charset="utf-8"> <title> </title> </head> <body> <a href="poem.rar"> poem.rar</a> </body> </html> <\Ch04\download.html> 1 4-10
超連結 2 3 4 1 2 [ ] / [ ] 3 4 [ ] Web <input type="file"> 8-2-10 4-11
04 網頁程式設計 4-2-3 E-mail E-mail E-mail E-mail <a> href E-mail E-mail mailto: <a href="mailto:jeanchen@mail.lucky.net.tw"> </a> 1 2 1 E-mail 2 E-mail <a> title <a href="http://www.zoo.gov.tw/" title="taipei Zoo"> </a> 4-12
超連結 4-3 URI <base> HTML URI URI URI <base> URI <base> <head> href="uri" URI target="..." <head> <base> URI URI "../books/html5.html" "http://www.lucky.com/books/html5.html" <!doctype html> <html> <head> <meta charset="utf-8"> <title> </title> <base href="http://www.lucky.com/product/default.html"> </head> <body> <a href="../books/html5.html">html5 </a> </body> </html> <\Ch04\relative.html> 4-13
04 網頁程式設計 4-4 <link> <link> stylesheet CSS appendix alternate author contents index glossary copyright next ( rel= ) pre ( rev= ) start: help bookmark stylesheet CSS search top <link> <head> HTML 5 href target rel media hreflang type 4-14
超連結 charset="..." href="uri" hreflang="language-code" href media="{screen,print,projection,braille,speech,tv,handheld,all}" all name="..." rel="..." <link rel="search" href="search.html"> rev="..." <link rev="prev" href="backpage.html"> target="..." type="content-type" 2-2-1 2-2-2 <!doctype html> <html> <head> <meta charset="utf-8"> <title> </title> <link type="text/html" rel="help" href="help.html"> <link rel="top" href="http://www.lucky.com.tw/"> <link rev="pre" href="backpage.html"> <link type="text/css" rel="stylesheet" href="h1.css"> </head> </html> <\Ch04\link.html> 4-15
04 網頁程式設計 4-5 (bookmark) a b a ( ) b 4-16
超連結 <a> name <a> href href <a href="bird.html# "> <body> <p> </p> <ul> 2 <li><a href="# "> </a></li> <li><a href="# "> </a></li> <li><a href="# "> </a></li> </ul> <hr> <dl> 1 <dt><b><i><a name=" "> </a></i></b></dt> <dd> </dd> <dt><b><i><a name=" "> </a></i></b></dt> <dd> </dd> <dt><b><i><a name=" "> </a></i></b></dt> <dd> ( ) </dd> </dl> </body> <\Ch04\bookmark.html> 1 name 2 href 4-17
1. URI 2. URI URI (a) tree.html kiwi.html URI (b) penguin.html koala.html URI (c) contactus.html tree.html URI (d) asia.html kiwi.html URI 3. 4. 5. URI
6. 7. 8. E-mail 1. \Ch04 show.html <\Ch03\ex3-3.html> http://www.godot.org.tw/ show.html E-mail ( jeanchen@mail.lucky.com.tw) <\Ch04\ex4-1.html> <a href="http://www.godot.org.tw/"> </a> <a href=".htm"> </a> <a href="mailto:jeanchen@mail.lucky.com.tw"> </a>
2. <\Ch03\ex3-2.html> <\Ch04\ex4-2.html> 1 2 3 1 2 3