第 2 章 HTML、XML和XHTML實務

第2章 HTML、XML和XHTML實務 • 2-1 HTML的基礎 • 2-2 HTML標籤 • 2-3 XML與XSLT的基礎 • 2-4 建立XHTML文件

2-1 HTML的基礎 • 2-1-1 第一份HTML文件 • 2-1-2 HTML文件的基本架構 • 2-1-3 Meta標籤的使用

2-1-1 第一份HTML文件-說明1 • 「HTML」（HyperText Markup Language）標記語言屬於一種文件編排語言，其目的是編排文件的內容，以便顯示漂亮的文件內容，HTML使用SGML語法，「SGML」（Standard Generalized Markup Language）屬於一種功能強大的文件標示、管理和編排語言，早在1980年就已經公佈語言的草稿，在1986年成為ISO標準的文件描述語言。

2-1-1 第一份HTML文件-說明2 • Tim Berners-Lee在1991年建立HTML，在1993年HTML1.0版由Berners-Lee和Connolly完成，經過3.2版到目前的最新版HTML 4.0x版，HTML是一種文件的格式編排語言，並不像SGML允許定義如何標示文件的標籤，HTML只是使用SGML的慣用語法，也就是標籤和屬性，如下所示： • 「標籤」（Tag）：HTML標籤是一個字串符號，主要是標示需要套用編排格式的文字內容，在標籤內的文字是使用預設格式編排。 • 「屬性」（Attribute）：每一個標籤可以擁有一些屬性來定義文字內容的細部編排。

2-1-1 第一份HTML文件-範例 01: <html> 02: <head> 03: <title>Ch2_1_1.htm</title> 04: </head> 05: <body> 06: <b>From: </b>hueyan@ms2.hinet.net<br> 07: <b>To: </b>hueyan@tpts1.seed.net.tw<br> 08: <b>Subject: </b>測試郵件功能<br> 09: <p>這是第一封郵件</p> 10: </body> 11: </html>

2-1-1 第一份HTML文件-圖例

2-1-2 HTML文件的基本架構-架構 • HTML文件是一份文字檔案，內含網頁顯示的內容和標示編排的標籤指令。現在就讓我們來看看HTML文件標籤的基本架構，如下所示： <html> 標示著一份HTML網頁 <head> HTML網頁的基本定義 </head> <body> HTML網頁的內容 </body> </html> • 文件架構的HTML文件是包含於<html>和</html>標籤間的內容和定義，其中<head>和</head>標籤包圍的區塊定義HTML網頁的本身，例如：標題文字，實際的網頁內容則是定義在<body>和</body>標籤間，這才是網頁真正的內容。

2-1-2 HTML文件的基本架構-注意事項 • HTML標籤使用小於"<"和大於">"符號夾著指令，稱為標籤，每一個標籤都是成雙成對，例如：HTML文件是以<html>開頭，和</html>結尾，在上面的HTML架構可以看出標籤成雙配對的特性。 • HTML標籤並不分英文大小寫，例如：<head>、<HEAD>和<Head>都代表相同的標籤。 • HTML文件內容是一般文字檔案，不過Enter鍵的換行在網頁顯示時並沒有作用，瀏覽程式會自行調整版面，如果文件內容需要強迫換行，請使用<br>標籤。 • HTML文件的連續空白在瀏覽程式顯示時，會自動簡化成一個空白。 • HTML的註解文字是使用""為結尾所包括的文字內容，瀏覽程式在顯示時會忽略註解文字。

2-1-3 Meta標籤的使用-說明與設定編輯工具 • <meta>標籤是位在<head>區塊，可以用來定義HTML標籤所沒有定義的相關資訊，常用的應用如下所示：設定使用的編輯工具 • 在<meta>標籤設定HTML文件使用的編輯工具，此時的名稱name屬性為GENERATOR，content屬性為Microsoft NotePad，如下所示： <meta name="GENERATOR" content="Microsoft NotePad">

2-1-3 Meta標籤的使用-設定網頁使用的語系 設定網頁使用的語系 • 對於網頁來說，因為各國文字的內碼不同，為了讓瀏覽程式能夠顯示正確的網頁內容，在<meta>標籤可以設定使用的語系，使用http-equiv屬性傳送HTTP通訊協定的標頭，以繁體中文來說是big5，如下所示： <meta http-equiv="Content-Type" content="text/html; charset=big5">

2-1-3 Meta標籤的使用-自動更新網頁內容系 自動更新網頁內容 • http-equiv屬性另一個重要的功能是設定一段時間後，自動轉址到指定的URL網址，如下所示： <meta http-equiv="refresh" content="5;URL=showchatmsgs.jsp"> • 標籤使用refresh屬性值，在content屬性指定等待的秒數和網址，使用分號分隔，數字5表示5秒，如果需要馬上的轉向其值是0，url是指定的網址。 • <mata>標籤的目的是在等待5秒鐘後，自動轉址到showchatmsgs.jsp的JSP程式。

2-2 HTML標籤 • 2-2-1 HTML的標頭標籤 • 2-2-2 文字格式標籤 • 2-2-3 清單項目標籤 • 2-2-4 圖片和超連結標籤 • 2-2-5 網頁表格標籤 • 2-2-6 網頁表單標籤 • 2-2-7 框架頁標籤

2-2-1 HTML的標頭標籤 • 在HTML的<head>區塊屬於標頭標籤，我們可以使用下表的標籤來記錄一些網頁資訊，如下表所示：

2-2-2 文字格式標籤-說明1 • HTML網頁內容主要是文字內容，編排文字內容的各種格式效果標籤，如下表所示：

2-2-2 文字格式標籤-說明2

2-2-2 文字格式標籤-範例 • 在HTML文字格式標籤是用來設定不同文件內容的格式編排，位在標籤中的文字內容是需要編排效果的文字內容，如下所示： <b>JSP 2.0網頁製作徹底研究</b> <i>JSP 2.0網頁製作徹底研究</i> <u>JSP 2.0網頁製作徹底研究<u> • 上述文字內容分別使用粗體、斜體和底線文字效果。

2-2-3 清單項目標籤-說明 • HTML標籤提供多種清單編排，這是使用條列方式編排的文字內容，如下表所示：

2-2-3 清單項目標籤-範例 • 在清單項目標籤中最常使用的是<ol>和<ul>標籤，其中各項目是使用<li>標籤，如下所示： <ol> <li>Java Applet <li>JavaScript <li>VBScript <li>DHTML </ol>

2-2-4 圖片和超連結標籤-說明 • 在網頁插入圖片和使用超連結建立多媒體網頁內容的相關標籤，如下表所示：

2-2-4 圖片和超連結標籤-超連結語法 • 在HTML文件插入超連結是使用<a>標籤，其基本語法如下所示： <a href="protocol://domain/file#bookmark" target="frame_name"> … </a> • 上述標籤的屬性說明，如下表所示：

2-2-4 圖片和超連結標籤-圖片語法 • 在網頁插入圖片是使用<img>標籤，其基本語法如下所示： <img src="filename" width=value height=value align=left | right> • 上述標籤的屬性說明，如下表所示：

2-2-5 網頁表格標籤-說明 • 網頁表格標籤是由一組標籤所組成，以便在網頁建立表格的編排，如下表所示：

2-2-5 網頁表格標籤-語法 • 網頁表格的每一列是使用<tr>和<td>標籤組合出來，一組<tr></tr>標籤是表格的一列，每一列中使用一組<td></td>標籤建立一個儲存格，其基本語法如下所示： <table border=value> <tr> <td>........</td> ……. </tr> <tr> <td>.........</td> …….. </tr> …… …… </table>

2-2-6 網頁表單標籤-說明 • 網頁表單是Web應用程式的使用介面，其相關標籤如下表所示：

2-2-6 網頁表單標籤-架構 • 網頁表單是上述HTML標籤的組合，基本表單的架構如下所示： <form name="name" method="post | get" action="URL" enctype="MIME"> <input type=…> <textarea> …. </textarea> <select> <option> …. </option> </select> <input type="SUBMIT" …> </form> • 上述<form>標籤是一份表單，擁有欄位標籤<input>、<textarea>和<select>，<select>標籤擁有<option>標籤的選項，一頁<form>標籤的表單需要一個<input>標籤的按鈕欄位，如下所示： <input type="SUBMIT" name="Name" value="Caption">

2-2-7 框架頁標籤-說明 • 框架頁是一種瀏覽程式視窗的分割方法，其標籤如下表所示：

2-2-7 框架頁標籤-語法 • 在瀏覽程式建立視窗左右分割的框架，如果HTML文件為框架頁，原來的<body>區塊將以<frameset>標籤取代，其基本語法如下所示： <frameset cols="value,value,"> <frame> <frame> </frameset>

2-3 XML與XSLT的基礎 • 2-3-1 什麼是XML • 2-3-2 XML文件的組成元素 • 2-3-3 XSL的基礎 • 2-3-4 XSLT是如何運作

2-3-1 什麼是XML-說明 • 「XML」（eXtensible Markup Language）可擴展標示語言屬於一種標籤語言，XML 1.0版規格在1998年2月正式推出，XML的寫法十分類似HTML，繼承SGML自定標籤的優點，並且刪除一些SGML複雜的部分，在功能上能夠補足HTML標籤的不足，而擁有更多的擴充性。 • 不過XML並不是用來編排內容，而是用來描述資料，它並沒有如同HTML一般的預設標籤，事實上使用者需要自己定義描述資料所需的各種標籤。

2-3-1 什麼是XML-範例 01: <?xml version="1.0" encoding="Big5"?> 02:  03: <booklist> 04: <book> 05: <code>F8920</code> 06: <title>ASP.NET網頁製作徹底研究</title> 07: <authorlist> 08: <author>陳會安</author> 09: </authorlist> 10: <price>650</price> 11: </book> 12: <book> 13: <code>F8934A</code> 14: <title>XML網頁製作徹底研究</title> 15: <authorlist> 16: <author>陳會安</author> 17: </authorlist> 18: <price>650</price> 19: </book> 20: </booklist>

2-3-1 什麼是XML-文件架構 • XML文件基本架構分為幾個部分，如下： • 文件宣告：第1列是XML文件宣告，定義XML文件的版本和使用的子碼集（即編碼），以此例為1.0版，使用中文Big5字碼。 • 根標籤：第3和20列是XML文件的根標籤<booklist>和結尾標籤</booklist>，這是樹狀結構的根元素。 • 子元素：在第4~19列是根元素的子元素book，而第5~10列和第13~18列為book元素的子元素code、title、authorlist和price。

2-3-1 什麼是XML-圖例

2-3-2 XML文件的組成元素-元素(說明) • XML文件基本上是由標籤和內容組成，一共六種組成的元素可以出現在XML文件。元素（Element） • XML文件是由元素組成，XML的元素和標籤並不同，其代表的意義，如下所示： • 「標籤」（Tag）：XML能夠自己定義標籤，一個標籤是標示文件的部分內容，例如：標籤<code>、<title>和<price>等，標籤分為開頭標籤<code>和結尾標籤</code>。 • 「元素」（Element）：XML元素是整個文件的主要架構，元素是標籤加上其中的文字內容，或是在元素內包含其它的元素，元素是一個完整的項目，包含標籤、屬性、開始標籤和結尾標籤內的文字內容和結尾標籤。

2-3-2 XML文件的組成元素-元素(範例) • XML元素需要由開始和結尾標籤構成，其中包含文字內容，例如：XML元素code，內含值F8920，如下所示： <code>F8920</code> • 此外XML元素允許包含其它的子元素，例如：在圖書book元素擁有code、title、authorlist和price子元素，如下所示： <book> <code>F8920</code> <title>ASP.NET網頁製作徹底研究</title> <authorlist> <author>陳會安</author> </authorlist> <price>650</price> </book>

2-3-2 XML文件的組成元素-屬性 屬性（Attribute） • 在開始標籤的標籤名稱後，可以替標籤新增屬性名稱，每一個屬性擁有屬性名稱和值，屬性值需要使用雙引號括起，如下所示： <book code="F8920"> • 上述<book>標籤擁有code屬性，其值為F8920。

2-3-2 XML文件的組成元素-實體參考(說明) 實體參考（Entity Reference） • XML標籤語言本身擁有一些保留符號，例如：標籤中的"<"符號，如果文件內容需要使用這些符號時，需要使用實體參考，在XML提供5個預先保留的實體參考，如下表所示：

2-3-2 XML文件的組成元素-實體參考(範例) • 每一個實體參考都是由"&"符號開始，以";"結束，例如：XML文件不可以擁有下列文件內容，如下所示： <order>書價 < 650</order> • 上述的標籤內容擁有"<"符號，此時就需要使用實體參考，如下所示： <order>書價 < 650</order>

2-3-2 XML文件的組成元素-註解 註解（Comment） • XML的註解文字和HTML一樣都是由""符號結尾，如下所示：

2-3-2 XML文件的組成元素-CDATA與PCDATA • CDATA區塊（CDATA Section）與PCDATA • 在XML文件的文字內容是PCDATA，在處理XML元素title時，標籤文字內容，如下所示： <title>JSP 2.0網頁製作徹底研究</title> • XML文件在剖析文件時不用處理CDATA區塊的內容，CDATA區塊是位在"<![CDATA["字串和"]]>"字串間的文字內容，如下所示： <script> <![CDATA[ function add(a, b) { return a+b } ]]> </script>

2-3-2 XML文件的組成元素-PI PI（Processing Instructions） • PI允許XML文件包含應用程式的指令，例如：在XML文件的開頭宣告就是一個PI，這些資訊是說明如何處理這份XML文件，如下所示： <?xml version="1.0" encoding="Big5"?> • 上述PI如同註解並不屬於XML文件的內容，PI的基本格式是以"<?name"字串開始，"?>"字串結束，如下所示： <?name pi_data?> • 上述name是「PI目標」（PI Target）名稱，其中xml和XML是保留給XML使用，這個名稱為PI識別字，應用程式可以依照此名稱處理所需的PI，而不處理其它的PI。

2-3-2 XML文件的組成元素-DTD DTD（Document Type Declarations） • DTD是XML文件的驗證指令，檢查XML文件的元素是否符合標籤的定義，這是SGML預設的文件驗證方式，也被XML採用，在XML文件除元素外，就是檢查XML元素的DTD指令。

2-3-3 XSL的基礎-說明 • XML文件本身只是以標籤來定義不同的資料，如果需要顯示XML元素的資料，如同一個文字檔案的資料庫，查詢資料表的記錄建立所需的報表，我們需要一種機制來描述XML元素如何被顯示，這種語言稱為樣式語言，「XSL」（eXtensible Style Language）就是配合XML的樣式語言。

2-3-3 XSL的基礎-功能說明 • XSL和XML文件一樣源於SGML的「DSSSL」（Document Style Semantics and Specification Language），XSL的功能十分強大，屬於一種真正的Script語言，在功能上主要分為兩個部分，如下所示： • 轉換XML文件：將XML文件架構轉換成另一個XML架構的文件，或非XML文件，例如：HTML文件。 • 格式化XML文件：格式化元素內容的樣式，以便顯示出XML文件。

2-3-4 XSLT是如何運作-說明 • XSLT內容本身也是一份XML文件，XSLT工作是將來源的XML元素轉換成XSLT元素，XSLT並不是在顯示XML元素內容，只是將XML元素轉換成其它文件的格式，所以通常並不稱它為樣式，而稱為XSLT Script語言。 • 在作法上「XSLT處理器」（XSLT Processor）是將XML文件依照XSLT Script的程式碼產生轉換結果，這種程式碼和JavaScript或VBScript不同，屬於一種「範本驅動」（Template-driven）的Script語言。

2-3-4 XSLT是如何運作-圖例說明 • XSLT文件依元素的用途定義許多對應元素的範本，當XSLT處理器在XML文件發現符合條件的元素，就使用範本定義的內容，可能是一些HTML標籤，加上XML元素取出的內容，在過濾掉XML文件不需要的部分來產生轉換結果，輸出的結果文件可能是另一份完全不同架構的XML、HTML或XHTML檔案，如下圖所示：

2-4 建立XHTML文件 • 2-4-1 XHTML文件基礎 • 2-4-2 XHTML文件架構 • 2-4-3 XHTML文件的DTD • 2-4-4 XHTML就是良好格式的HTML

2-4-1 XHTML文件基礎 • 「XHTML」（eXtensible HyperText Markup Language）規格是在2000年1月才正式通過，雖然規格比XML 1.0版還晚制定，事實上它就是一份標準的XML文件。 • XHTML目前最新版本為2.0，不過XHTML仍然是使用HTML 4.0版標籤，它是W3C制定用來取代HTML 4.0版的下一個世代HTML。 • XHTML文件比HTML文件的標籤要求更加嚴格，必須遵循XML文件的撰寫規則，其注意事項，如下所示： • 不可以省略結尾標籤。 • 標籤和屬性都是使用小寫的英文字，例如：<p>、<body>等。 • 屬性值需要使用雙引號括起來。 • name屬性使用id屬性取代。

2-4-2 XHTML文件架構-說明 • XHTML文件架構和HTML文件十分相似，只是在文件開頭使用XML和DOCTYPE的宣告，其副檔名為【.xhtml】，或是和XML文件一樣使用【.xml】。 • 編輯XHTML文件可以使用Windows記事本或XML編輯工具，不過因為使用W3C網址的DTD，所以一定需要建立Internet連線，否則無法下載XHTML的DTD來驗證文件內容。

2-4-2 XHTML文件架構-範例 01: <?xml version="1.0" encoding="Big5"?> 02: <!DOCTYPE html 03: PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 04: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 05: <html xmlns="http://www.w3.org/1999/xhtml"> 06: <head> 07: <title>這是一個測試網頁</title> 08: </head> 09: <body> 10: <p>歡迎進入我的網頁</p> 11: </body> 12: </html>

2-4-2 XHTML文件架構-範例說明 • XML文件：在第1列宣告此為XML文件，如下所示： <?xml version="1.0" encoding="Big5"?> • DOCTYPE：第2~4列是DTD宣告，指出此文件為XHTML 1.0版和使用的DTD，如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • HTML文件：第5~12列是一個HTML文件，在<html>標籤指定名稱空間http://www.w3.org/1999/xhtml，這是使用XML 1.0版的寫法，如下所示： <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>這是一個測試網頁</title></head> <body><p>歡迎進入我的網頁</p></body> </html>

第 2 章 HTML、XML和XHTML實務