W3c And Web Standards
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View W3c And Web Standards as PDF for free.
More details
- Words: 748
- Pages: 54
W3C 的網路標準 chientai chen 2008-06
Photo courtesy of L’enclume dining room
當您到這樣一家餐廳
Photos courtesy of (left to right): - Can Organic Farming Feed the World? - chenboon的厨房 - 备份 - 不是所有的米其林廚師都愛分子美食學
採購、大廚與侍者，誰最有機會得罪客戶？或者說，毀了一切的努力？
網路標準，理由？
Photo courtesy of e53
Photo courtesy of Novica
equal and simple to access the web for all
Photo courtesy of °Florian
Taiwan Beer v.s. 世界的啤酒
Photo courtesy of Tym
Photo courtesy of nswlearnscope
你不會是世界的角落！
World Wild Web Consortium, W3C?
Photo courtesy of w3c10
Born in 1994, now is 15
Tim-bernes Lee 提姆．伯納．李 • 如果你問我當代的人裡面，我最 佩服的人是誰，我會豪不猶豫的 告訴你「提姆．伯納．李」—網 際網路(World Wide Web) 的創始 人。 • 其實說他是「創始人」有些過 頭。 • 沒有人會否認，今天的網際網路 絕非產自一人之手，很多人默默 耕耘，前仆後繼，一點一滴的將 這片大網慢慢織成，提姆．伯 納．李也是其中之一而已，所不 同的是他在一個關鍵的時機，對 這片網作出了一個決定性的基礎 貢獻。 Photo courtesy of w3c10
Photo courtesy of quinn.anya
Goals of W3C...
Photo courtesy of law_keven Photo courtesy of Iquinn.anya
web for everyone
Photo courtesy of quinn.anya
Goals of W3C...
Photo courtesy of law_keven Photo courtesy of Iquinn.anya
web for everyone
web on everything
Photo courtesy of quinn.anya
Goals of W3C...
Photo courtesy of law_keven Photo courtesy of Iquinn.anya
web for everyone
web on everything
knowledge base + trust and confidence Photo courtesy of quinn.anya
Goals of W3C...
Photo courtesy of law_keven Photo courtesy of Iquinn.anya
W3C 網路標準有那些？
Photo courtesy of About w3c
The W3C technology stack
Photo courtesy of About w3c
The W3C technology stack
Photo courtesy of About w3c
The W3C technology stack
XHTML !? XHTML 就是符合 XML 要求的 HMTL 文件
名詞定義 組件 (element)：有人也稱之元素，它所指的就是一對標籤 (tag) ——起始標籤、 結束標籤，與他們所包住的內容，稱為一個元素。當然元素當中也有可能包含其 他元素。 例如：
宣告文件類型 • 為了使 XHTML 瀏覽器可以正確的解析文件語法並且顯示你的 XHTML 文件，你 必須告訴它你試用哪一個版本的 XML 來建立這份文件，你也必須說明用來定義 文件中使用之組件的 XHTML DTD 是哪一種。 • 宣告 XML 版本必須使用特殊的 XML 處理指令：
這麼做是告訴瀏覽器你用的是 1.0 版的 XML 以及 8-bit Unicode 字元集。 • 接下來你必須宣告標示語言的 DTD：
在這個敘述當中，宣告文件的基本組件為 html ，也就是在公用識別記號 (PUBLIC) 為 -//W3C//DTD XHTML 1.0 Transitional//EN 這份 DTD 當中所定義 的。
宣告名稱空間 • 根據 XML 規定，在 XHTML 中，至少必須於文件的 標籤裡使用 xmlns 屬性，定義整份文件所採用的基本名稱空間 ( name space )：
• 註：到目前這些東西都不需要默背。
一份最簡單的 XHTML 文件 ;如何使用 HTML 文件？ --文件的內容 -
HTML 與 XHTML • HTML 大部分與 XHTML 相容，但是最大的不同點在於 XHTML 必須完美無缺的 符合 XML 的標準。 • 因此，如果我們說我們希望建立一份與 HTML 和 XHTML 都相容的文件，這句 話的意思是：這份文件是一份符合 HTML 最新版本語法的文件也是一份符合 XML 標準語法的文件。 • 若是從程式的角度來看，當你把這份文件的副檔名取為 .html 時，它可以在瀏覽 器上正常顯示；當你將副檔名取為 .xml 時，它也可以是一份有效的 XML 文 件。 因此想寫一份完美的 XHTML 文件，你就必須注意到稍後提到的各種警告 訊息。
訊息1：正確地將組件寫成巢狀結構 想寫一份完美的 XHTML 文件，第一個要求是組件的巢狀結構必須正確。這跟 HTML 標準的規定並沒有什麼不同：只要根據你啟用的標籤組件的順序，反過頭 來一一關閉就可以。 注意 block level 與 inline level：
•
訊息2：結束標籤 任合包含其他標籤或內容的 HTML 標籤都會有一個對應的結束標籤。然 而，HTML 的特色之一就是，如果對應的結束標籤出現的位置可以由程序處理代 理程式﹙例如瀏覽器﹚所猜想的話，結束標籤就可以省略。所以通常省略 、、。但是對 XHTML 則是不一樣，所有的結束標籤必須一一寫出， 缺少結束標籤將會產生錯誤。 有時候，沒有正確的結束，很容易造成網頁跛腳。
訊息3：處理空標籤 在 HTML 標籤裡面有許多標籤從一開始就是單獨出現的，例如：
、![]()
這樣的標籤我們稱為空標籤 ( empty tag )。XHTML 中，每個標籤都必須有一個對應的結束標籤，於是：
的形式出現，這樣太麻煩了！ XHTML 用大於符號 ( > ) 之前加上斜線記號 ( / )來代表它的結束位置，也就 是
這樣，若是有屬性，則斜線記號必須在屬性之後出現，因此標示圖片的方式可以寫成：
這樣的方法似乎很聰明，但是以這種縮寫方式來表示空標籤，可能會讓 HTML 的瀏覽器無法了解。為了避免產生相容 性的問題，當你在 XHTML 使用空標籤時，可以在斜線記號之前加上空白字元來欺騙 HTML 瀏覽器。所以上面的例子 就要改為：
、（現在瀏覽器已經懂了，不用在這樣做了）。
訊息4：大小寫的差異 標籤與屬性的大小寫在 XML 與 XHTML 裡面是有分別的。XHTML DTD 將之前所 有的 HTML 標籤與屬性以小寫字母來定義，因此在 XHTML 裡面， 與 是 不同的。 為了達到相容性，這些標籤與屬性名稱都必須轉換為小寫，即使那些在 CSS 裡面 定義所使用的內容也不例外。
訊息5：所有屬性值要加引號 XHTML 還要求所有的屬性值，包括數字，都必須以雙引號括起來，為了相容性， 請記得： 將 改為
Photo courtesy of L’enclume dining room
當您到這樣一家餐廳
Photos courtesy of (left to right): - Can Organic Farming Feed the World? - chenboon的厨房 - 备份 - 不是所有的米其林廚師都愛分子美食學
採購、大廚與侍者，誰最有機會得罪客戶？或者說，毀了一切的努力？
網路標準，理由？
Photo courtesy of e53
Photo courtesy of Novica
equal and simple to access the web for all
Photo courtesy of °Florian
Taiwan Beer v.s. 世界的啤酒
Photo courtesy of Tym
Photo courtesy of nswlearnscope
你不會是世界的角落！
World Wild Web Consortium, W3C?
Photo courtesy of w3c10
Born in 1994, now is 15
Tim-bernes Lee 提姆．伯納．李 • 如果你問我當代的人裡面，我最 佩服的人是誰，我會豪不猶豫的 告訴你「提姆．伯納．李」—網 際網路(World Wide Web) 的創始 人。 • 其實說他是「創始人」有些過 頭。 • 沒有人會否認，今天的網際網路 絕非產自一人之手，很多人默默 耕耘，前仆後繼，一點一滴的將 這片大網慢慢織成，提姆．伯 納．李也是其中之一而已，所不 同的是他在一個關鍵的時機，對 這片網作出了一個決定性的基礎 貢獻。 Photo courtesy of w3c10
Photo courtesy of quinn.anya
Goals of W3C...
Photo courtesy of law_keven Photo courtesy of Iquinn.anya
web for everyone
Photo courtesy of quinn.anya
Goals of W3C...
Photo courtesy of law_keven Photo courtesy of Iquinn.anya
web for everyone
web on everything
Photo courtesy of quinn.anya
Goals of W3C...
Photo courtesy of law_keven Photo courtesy of Iquinn.anya
web for everyone
web on everything
knowledge base + trust and confidence Photo courtesy of quinn.anya
Goals of W3C...
Photo courtesy of law_keven Photo courtesy of Iquinn.anya
W3C 網路標準有那些？
Photo courtesy of About w3c
The W3C technology stack
Photo courtesy of About w3c
The W3C technology stack
Photo courtesy of About w3c
The W3C technology stack
XHTML !? XHTML 就是符合 XML 要求的 HMTL 文件
名詞定義 組件 (element)：有人也稱之元素，它所指的就是一對標籤 (tag) ——起始標籤、 結束標籤，與他們所包住的內容，稱為一個元素。當然元素當中也有可能包含其 他元素。 例如：
單獨的一個元素
段落標籤包住一個<em>強調標籤
我們可以稱裡面的元素叫子元素宣告文件類型 • 為了使 XHTML 瀏覽器可以正確的解析文件語法並且顯示你的 XHTML 文件，你 必須告訴它你試用哪一個版本的 XML 來建立這份文件，你也必須說明用來定義 文件中使用之組件的 XHTML DTD 是哪一種。 • 宣告 XML 版本必須使用特殊的 XML 處理指令：
這麼做是告訴瀏覽器你用的是 1.0 版的 XML 以及 8-bit Unicode 字元集。 • 接下來你必須宣告標示語言的 DTD：
在這個敘述當中，宣告文件的基本組件為 html ，也就是在公用識別記號 (PUBLIC) 為 -//W3C//DTD XHTML 1.0 Transitional//EN 這份 DTD 當中所定義 的。
宣告名稱空間 • 根據 XML 規定，在 XHTML 中，至少必須於文件的 標籤裡使用 xmlns 屬性，定義整份文件所採用的基本名稱空間 ( name space )：
• 註：到目前這些東西都不需要默背。
一份最簡單的 XHTML 文件 ;
HTML 與 XHTML • HTML 大部分與 XHTML 相容，但是最大的不同點在於 XHTML 必須完美無缺的 符合 XML 的標準。 • 因此，如果我們說我們希望建立一份與 HTML 和 XHTML 都相容的文件，這句 話的意思是：這份文件是一份符合 HTML 最新版本語法的文件也是一份符合 XML 標準語法的文件。 • 若是從程式的角度來看，當你把這份文件的副檔名取為 .html 時，它可以在瀏覽 器上正常顯示；當你將副檔名取為 .xml 時，它也可以是一份有效的 XML 文 件。 因此想寫一份完美的 XHTML 文件，你就必須注意到稍後提到的各種警告 訊息。
訊息1：正確地將組件寫成巢狀結構 想寫一份完美的 XHTML 文件，第一個要求是組件的巢狀結構必須正確。這跟 HTML 標準的規定並沒有什麼不同：只要根據你啟用的標籤組件的順序，反過頭 來一一關閉就可以。 注意 block level 與 inline level：
•
It’s an anchor
•It’s an anchor
訊息2：結束標籤 任合包含其他標籤或內容的 HTML 標籤都會有一個對應的結束標籤。然 而，HTML 的特色之一就是，如果對應的結束標籤出現的位置可以由程序處理代 理程式﹙例如瀏覽器﹚所猜想的話，結束標籤就可以省略。所以通常省略 、、。但是對 XHTML 則是不一樣，所有的結束標籤必須一一寫出， 缺少結束標籤將會產生錯誤。 有時候，沒有正確的結束，很容易造成網頁跛腳。
訊息3：處理空標籤 在 HTML 標籤裡面有許多標籤從一開始就是單獨出現的，例如：
、
的形式出現，這樣太麻煩了！ XHTML 用大於符號 ( > ) 之前加上斜線記號 ( / )來代表它的結束位置，也就 是
這樣，若是有屬性，則斜線記號必須在屬性之後出現，因此標示圖片的方式可以寫成：
這樣的方法似乎很聰明，但是以這種縮寫方式來表示空標籤，可能會讓 HTML 的瀏覽器無法了解。為了避免產生相容 性的問題，當你在 XHTML 使用空標籤時，可以在斜線記號之前加上空白字元來欺騙 HTML 瀏覽器。所以上面的例子 就要改為： 、
（現在瀏覽器已經懂了，不用在這樣做了）。訊息4：大小寫的差異 標籤與屬性的大小寫在 XML 與 XHTML 裡面是有分別的。XHTML DTD 將之前所 有的 HTML 標籤與屬性以小寫字母來定義，因此在 XHTML 裡面， 與 是 不同的。 為了達到相容性，這些標籤與屬性名稱都必須轉換為小寫，即使那些在 CSS 裡面 定義所使用的內容也不例外。
訊息5：所有屬性值要加引號 XHTML 還要求所有的屬性值，包括數字，都必須以雙引號括起來，為了相容性， 請記得： 將
| 是不允許 的， 也是不允許的。你必須改為： | 、。 訊息7：處理特殊字元 script 或 style sheet 最好在文件中以適當的外部連結參考他們，理由如下： 在 HTML 中，你可以將 script 或 style sheet 寫在註解 ( ) 裡面，以防止可能遇到不相容的情況。然而，XML 瀏覽器可能會將註解的部分所有的內容 直接從文件中移除，因此會將 script 或 style sheet 刪除。 為了在 XML 瀏覽器中將特殊字元適當的隱藏，你最好將你的 script 或 style sheet 放到 CDATA 區。這麼做將告訴 XML 瀏覽器，在其中的任何字元都是一般的字元，不具特殊的意義。例如： <script language="JavaScript"> 訊息8：id 與 name 屬性 在 XHTML id 幾乎已經取代 name。如果你在某些標籤一定要用 name 屬性的 話，請同時加上等效的 id 屬性。 Markup Validator http://validator.w3.org/ Markup Validator http://validator.w3.org/ HTML 5.0!? An example: |