w3c and web standards
DESCRIPTION
在工研院資訊中心的簡報。資訊中心負責工研院內部網路、員工作頁平台的規劃與建置。TRANSCRIPT
![Page 1: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/1.jpg)
W3C 的網路標準
chientai chen2008-06
![Page 2: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/2.jpg)
當您到這樣一家餐廳
Photo courtesy of L’enclume dining room
![Page 3: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/3.jpg)
採購、大廚與侍者,誰最有機會得罪客戶?或者說,毀了一切的努力?
Photos courtesy of (left to right):- Can Organic Farming Feed the World?- chenboon的厨房 - 备份-不是所有的米其林廚師都愛分子美食學
![Page 4: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/4.jpg)
網路標準,理由?
![Page 5: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/5.jpg)
equal and simple to access the web for allPhoto courtesy of e53 Photo courtesy of Novica
![Page 6: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/6.jpg)
Taiwan Beer v.s. 世界的啤酒Photo courtesy of °Florian Photo courtesy of Tym
![Page 7: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/7.jpg)
你不會是世界的角落!
Photo courtesy of nswlearnscope
![Page 8: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/8.jpg)
World Wild Web Consortium, W3C?
![Page 9: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/9.jpg)
Born in 1994, now is 15
Photo courtesy of w3c10
![Page 10: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/10.jpg)
Tim-bernes Lee提姆.伯納.李
• 如果你問我當代的人裡面,我最佩服的人是誰,我會豪不猶豫的告訴你「提姆.伯納.李」—網際網路(World Wide Web) 的創始人。
• 其實說他是「創始人」有些過頭。
• 沒有人會否認,今天的網際網路絕非產自一人之手,很多人默默耕耘,前仆後繼,一點一滴的將這片大網慢慢織成,提姆.伯納.李也是其中之一而已,所不同的是他在一個關鍵的時機,對這片網作出了一個決定性的基礎貢獻。
Photo courtesy of w3c10
![Page 11: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/11.jpg)
Goals of W3C...Photo courtesy of quinn.anya Photo courtesy of law_keven
Photo courtesy of Iquinn.anya
![Page 12: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/12.jpg)
Goals of W3C...Photo courtesy of quinn.anya Photo courtesy of law_keven
Photo courtesy of Iquinn.anya
web for everyone
![Page 13: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/13.jpg)
Goals of W3C...Photo courtesy of quinn.anya Photo courtesy of law_keven
Photo courtesy of Iquinn.anya
web on everything
web for everyone
![Page 14: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/14.jpg)
Goals of W3C...Photo courtesy of quinn.anya Photo courtesy of law_keven
Photo courtesy of Iquinn.anya
web on everything
web for everyone
knowledge base +
trust and confidence
![Page 15: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/15.jpg)
W3C 網路標準有那些?
![Page 16: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/16.jpg)
The W3C technology stack
Photo courtesy of About w3c
![Page 17: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/17.jpg)
The W3C technology stack
Photo courtesy of About w3c
![Page 18: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/18.jpg)
The W3C technology stack
Photo courtesy of About w3c
![Page 19: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/19.jpg)
XHTML !?
XHTML 就是符合 XML 要求的 HMTL 文件
![Page 20: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/20.jpg)
名詞定義
組件 (element):有人也稱之元素,它所指的就是一對標籤 (tag) ——起始標籤、結束標籤,與他們所包住的內容,稱為一個元素。當然元素當中也有可能包含其他元素。
例如: <h4>單獨的一個元素</h4>
段落標籤<p>包住一個<em>強調標籤</em></p>我們可以稱裡面的元素叫子元素
![Page 21: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/21.jpg)
宣告文件類型
• 為了使 XHTML 瀏覽器可以正確的解析文件語法並且顯示你的 XHTML 文件,你必須告訴它你試用哪一個版本的 XML 來建立這份文件,你也必須說明用來定義文件中使用之組件的 XHTML DTD 是哪一種。
• 宣告 XML 版本必須使用特殊的 XML 處理指令: <?xml version="1.0" encoding="UTF-8"?> 這麼做是告訴瀏覽器你用的是 1.0 版的 XML 以及 8-bit Unicode 字元集。
• 接下來你必須宣告標示語言的 DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org.tw/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 在這個敘述當中,宣告文件的基本組件為 html ,也就是在公用識別記號 (PUBLIC) 為 -//W3C//DTD XHTML 1.0 Transitional//EN 這份 DTD 當中所定義的。
![Page 22: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/22.jpg)
宣告名稱空間
• 根據 XML 規定,在 XHTML 中,至少必須於文件的 <html> 標籤裡使用 xmlns 屬性,定義整份文件所採用的基本名稱空間 ( name space ):
<html xmlns="http://www.w3.org/1999/xhtml">
• 註:到目前這些東西都不需要默背。
![Page 23: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/23.jpg)
一份最簡單的 XHTML 文件
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org.tw/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="zh-hant" lang="zh-hant">
<head>
<title>如何使用 HTML 文件?</title>
</head>
<body>
--文件的內容 --
</body>
</html>
![Page 24: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/24.jpg)
HTML 與 XHTML
• HTML 大部分與 XHTML 相容,但是最大的不同點在於 XHTML 必須完美無缺的符合 XML 的標準。
• 因此,如果我們說我們希望建立一份與 HTML 和 XHTML 都相容的文件,這句話的意思是:這份文件是一份符合 HTML 最新版本語法的文件也是一份符合 XML 標準語法的文件。
• 若是從程式的角度來看,當你把這份文件的副檔名取為 .html 時,它可以在瀏覽器上正常顯示;當你將副檔名取為 .xml 時,它也可以是一份有效的 XML 文件。 因此想寫一份完美的 XHTML 文件,你就必須注意到稍後提到的各種警告訊息。
![Page 25: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/25.jpg)
訊息1:正確地將組件寫成巢狀結構
想寫一份完美的 XHTML 文件,第一個要求是組件的巢狀結構必須正確。這跟 HTML 標準的規定並沒有什麼不同:只要根據你啟用的標籤組件的順序,反過頭來一一關閉就可以。
注意 block level 與 inline level:• <h3><a href=”#”>It’s an anchor</a></h3>• <a href=”#”><h3>It’s an anchor</h3></a>
![Page 26: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/26.jpg)
訊息2:結束標籤
任合包含其他標籤或內容的 HTML 標籤都會有一個對應的結束標籤。然而,HTML 的特色之一就是,如果對應的結束標籤出現的位置可以由程序處理代理程式﹙例如瀏覽器﹚所猜想的話,結束標籤就可以省略。所以通常省略 </li>、</td>、</tr>。但是對 XHTML 則是不一樣,所有的結束標籤必須一一寫出,缺少結束標籤將會產生錯誤。
有時候,沒有正確的結束,很容易造成網頁跛腳。
![Page 27: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/27.jpg)
訊息3:處理空標籤
在 HTML 標籤裡面有許多標籤從一開始就是單獨出現的,例如:<br>、<img> 這樣的標籤我們稱為空標籤 ( empty tag )。XHTML 中,每個標籤都必須有一個對應的結束標籤,於是: <br></br> 的形式出現,這樣太麻煩了! XHTML 用大於符號 ( > ) 之前加上斜線記號 ( / )來代表它的結束位置,也就是 <br/> 這樣,若是有屬性,則斜線記號必須在屬性之後出現,因此標示圖片的方式可以寫成: <img src="itri_icon.gif"/>
這樣的方法似乎很聰明,但是以這種縮寫方式來表示空標籤,可能會讓 HTML 的瀏覽器無法了解。為了避免產生相容性的問題,當你在 XHTML 使用空標籤時,可以在斜線記號之前加上空白字元來欺騙 HTML 瀏覽器。所以上面的例子就要改為: <br />、<img src="itri_icon.gif" />(現在瀏覽器已經懂了,不用在這樣做了)。
![Page 28: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/28.jpg)
訊息4:大小寫的差異
標籤與屬性的大小寫在 XML 與 XHTML 裡面是有分別的。XHTML DTD 將之前所有的 HTML 標籤與屬性以小寫字母來定義,因此在 XHTML 裡面,<a> 與 <A> 是不同的。
為了達到相容性,這些標籤與屬性名稱都必須轉換為小寫,即使那些在 CSS 裡面定義所使用的內容也不例外。
![Page 29: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/29.jpg)
訊息5:所有屬性值要加引號
XHTML 還要求所有的屬性值,包括數字,都必須以雙引號括起來,為了相容性,請記得: 將 <table rows=3> 改為 <table rows="3">
![Page 30: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/30.jpg)
訊息6:明確的屬性值
在 XHTML 裡面所有的屬性都要有一個屬性值,所以 <td nowrap> 是不允許的,<input type="checkbox" checked> 也是不允許的。你必須改為:<td nowrap="nowrap">、<input type="checkbox" checked="checked">。
![Page 31: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/31.jpg)
訊息7:處理特殊字元
script 或 style sheet 最好在文件中以適當的外部連結參考他們,理由如下: 在 HTML 中,你可以將 script 或 style sheet 寫在註解 ( <!-- --> ) 裡面,以防止可能遇到不相容的情況。然而,XML 瀏覽器可能會將註解的部分所有的內容直接從文件中移除,因此會將 script 或 style sheet 刪除。
為了在 XML 瀏覽器中將特殊字元適當的隱藏,你最好將你的 script 或 style sheet 放到 CDATA 區。這麼做將告訴 XML 瀏覽器,在其中的任何字元都是一般的字元,不具特殊的意義。例如:<script language="JavaScript"><![CDATAJavaScript goes here...]]></script>
![Page 32: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/32.jpg)
訊息8:id 與 name 屬性
在 XHTML id 幾乎已經取代 name。如果你在某些標籤一定要用 name 屬性的話,請同時加上等效的 id 屬性。
![Page 35: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/35.jpg)
An example:
<video> Defines a video
“<video src="http://www.ananova.com/about/vap_windows_check.wmv">your browser does not support the video tag</video>”
HTML 5.0!?
![Page 36: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/36.jpg)
The W3C HTML working group and the WHATWG are working on the same specification, with the same editor.
![Page 37: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/37.jpg)
Cascading Style Sheet, CSS
(X)HTML: 負責超文件的語義與架構CSS: 負責呈現與風格
![Page 38: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/38.jpg)
Cascading Style Sheet
串接式 (Cascading)?
• 一個格式化表單是一些合乎正確語法規定的集合,而串接式瀏覽器允許多個格式化表單,可以同時在同一文件中
支配它
規則(Rules)
• 規則::=選擇器 { 宣告 }/ rule::=selector {declaration}
• 宣告::=屬性名稱:屬性值 / declaration::=property name:value
• 例子:
– body {color:#aa0000;}
![Page 39: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/39.jpg)
記住這個公式
![Page 40: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/40.jpg)
CSS Validator http://jigsaw.w3.org/css-validator/validator.html.en
![Page 41: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/41.jpg)
CSS Validator http://jigsaw.w3.org/css-validator/validator.html.en
![Page 42: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/42.jpg)
Web Accessibility Initiative (WAI)
http://isch400.itri.org.tw/wiki/index.php/The_Guidelines_of_Web_accessibilityhttp://isch400.itri.org.tw/wiki/index.php/Web_Accessibility
有問題,可以請教李婉真 18184(我的分機 18084,攻研書坊 18085)。
![Page 43: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/43.jpg)
W3C Web Accessibility initiative
![Page 44: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/44.jpg)
Conformance Logos
![Page 45: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/45.jpg)
如何檢測:台灣網路無障礙空間 http://www.webguide.nat.gov.tw
![Page 46: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/46.jpg)
【第一優先等級】
【A+等級】具有定位點(:::)(原名網頁導盲磚)搭配鍵盤快速鍵(Accesskey)、網站導覽(Sitemap)功能及網頁瀏覽工具具有使用鍵盤設計
【第二優先等級】【第三優先等級】
優先等級
![Page 47: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/47.jpg)
使用網路標準的優點
![Page 48: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/48.jpg)
駭客與畫家 / code as a kind of art work
![Page 49: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/49.jpg)
為什麼駭客反對著作權和專利?
- 如果你給駭客一個鎖,他第一個想到的念頭是如何打開它。- 更深的原因是︰他們看到越來越多的侵略性行為用於保護「智慧財產權」,這對他們工作需要的知識自由來說是一種威脅。而且,他們是對的。
如果駭客有國定假日,那一定是四月一日。
良好的壞習慣
![Page 50: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/50.jpg)
不可說的禁忌
隱藏是流行的本質,不然它不會起作用。對某個被流行抓住的人而言,流行看來像是應該要做的正確事情。當你是水時,你會如何看待波浪?永保懷疑,這是唯一的防護。
衛納(Norbert Wiener,1894-1964,美國數學家)說過,如果你與奴隸相比,你就成了奴隸。
誰說在工研院,一定要這樣、那樣....
![Page 51: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/51.jpg)
你們應該是藝術家
這聽起來很弔詭,但是一幅偉大的繪畫,一定比它原本的設計更美好。... 同樣的,偉大的軟體也需要對美感的狂熱奉獻。如果仔細的檢視優秀的軟體,你會發現一些沒有人想了解的小地方都如此美麗。
駭客要和畫家一樣有同理心,才能創作偉大的作品。同理心不必然代表自我犧牲,這是完全不同的。
程式應該是為了讓人們閱讀而編寫,只是剛好能給機器執行而已。
![Page 52: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/52.jpg)
Bravo! Welcome to the world. ITRI sharing 3.0
![Page 53: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/53.jpg)
• World Wide Web http://www.w3.org/• Web standard project http://www.webstandards.org/• Web standard group http://webstandardsgroup.org/standards/• Web standard checklist of maxdesign http://www.maxdesign.com.au/presentation/
checklist.htm• HTML 5 reference http://www.w3schools.com/tags/html5.asp• A preview of HTML 5 http://www.alistapart.com/articles/previewofhtml5
References | 參考資料
![Page 54: W3C and Web Standards](https://reader034.vdocuments.site/reader034/viewer/2022042607/5571f2eb49795947648d4069/html5/thumbnails/54.jpg)
Thanks