Download presentation
Presentation is loading. Please wait.
1
第2章 HTML、XML和XHTML實務 2-1 HTML的基礎 2-2 HTML標籤 2-3 XML與XSLT的基礎
2
2-1 HTML的基礎 2-1-1 第一份HTML文件 2-1-2 HTML文件的基本架構 2-1-3 Meta標籤的使用
3
2-1-1 第一份HTML文件-說明1 「HTML」（HyperText Markup Language）標記語言屬於一種文件編排語言，其目的是編排文件的內容，以便顯示漂亮的文件內容，HTML使用SGML語法，「SGML」（Standard Generalized Markup Language）屬於一種功能強大的文件標示、管理和編排語言，早在1980年就已經公佈語言的草稿，在1986年成為ISO標準的文件描述語言。
4
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）：每一個標籤可以擁有一些屬性來定義文字內容的細部編排。
5
2-1-1 第一份HTML文件-範例 01: <html> 02: <head>
03: <title>Ch2_1_1.htm</title> 04: </head> 05: <body> 06: <b>From: 07: <b>To: 08: <b>Subject: </b>測試郵件功能<br> 09: <p>這是第一封郵件</p> 10: </body> 11: </html>
6
2-1-1 第一份HTML文件-圖例
7
2-1-2 HTML文件的基本架構-架構 HTML文件是一份文字檔案，內含網頁顯示的內容和標示編排的標籤指令。現在就讓我們來看看HTML文件標籤的基本架構，如下所示： <html> 標示著一份HTML網頁 <head> HTML網頁的基本定義 </head> <body> HTML網頁的內容 </body> </html> 文件架構的HTML文件是包含於<html>和</html>標籤間的內容和定義，其中<head>和</head>標籤包圍的區塊定義HTML網頁的本身，例如：標題文字，實際的網頁內容則是定義在<body>和</body>標籤間，這才是網頁真正的內容。
8
2-1-2 HTML文件的基本架構-注意事項 HTML標籤使用小於"<"和大於">"符號夾著指令，稱為標籤，每一個標籤都是成雙成對，例如：HTML文件是以<html>開頭，和</html>結尾，在上面的HTML架構可以看出標籤成雙配對的特性。 HTML標籤並不分英文大小寫，例如：<head>、<HEAD>和<Head>都代表相同的標籤。 HTML文件內容是一般文字檔案，不過Enter鍵的換行在網頁顯示時並沒有作用，瀏覽程式會自行調整版面，如果文件內容需要強迫換行，請使用<br>標籤。 HTML文件的連續空白在瀏覽程式顯示時，會自動簡化成一個空白。 HTML的註解文字是使用"<!--"字串開始和"-->"為結尾所包括的文字內容，瀏覽程式在顯示時會忽略註解文字。
9
2-1-3 Meta標籤的使用-說明與設定編輯工具
<meta>標籤是位在<head>區塊，可以用來定義HTML標籤所沒有定義的相關資訊，常用的應用如下所示： 設定使用的編輯工具 在<meta>標籤設定HTML文件使用的編輯工具，此時的名稱name屬性為GENERATOR，content屬性為Microsoft NotePad，如下所示： <meta name="GENERATOR" content="Microsoft NotePad">
10
2-1-3 Meta標籤的使用-設定網頁使用的語系
<meta http-equiv="Content-Type" content="text/html; charset=big5">
11
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程式。
12
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 框架頁標籤
13
2-2-1 HTML的標頭標籤 在HTML的<head>區塊屬於標頭標籤，我們可以使用下表的標籤來記錄一些網頁資訊，如下表所示：
14
2-2-2 文字格式標籤-說明1 HTML網頁內容主要是文字內容，編排文字內容的各種格式效果標籤，如下表所示：
15
2-2-2 文字格式標籤-說明2
16
2-2-2 文字格式標籤-範例 在HTML文字格式標籤是用來設定不同文件內容的格式編排，位在標籤中的文字內容是需要編排效果的文字內容，如下所示： <b>JSP 2.0網頁製作徹底研究</b> <i>JSP 2.0網頁製作徹底研究</i> <u>JSP 2.0網頁製作徹底研究<u> 上述文字內容分別使用粗體、斜體和底線文字效果。
17
2-2-3 清單項目標籤-說明 HTML標籤提供多種清單編排，這是使用條列方式編排的文字內容，如下表所示：
18
2-2-3 清單項目標籤-範例 在清單項目標籤中最常使用的是<ol>和<ul>標籤，其中各項目是使用<li>標籤，如下所示： <ol> <li>Java Applet <li>JavaScript <li>VBScript <li>DHTML </ol>
19
2-2-4 圖片和超連結標籤-說明 在網頁插入圖片和使用超連結建立多媒體網頁內容的相關標籤，如下表所示：
20
2-2-4 圖片和超連結標籤-超連結語法 在HTML文件插入超連結是使用<a>標籤，其基本語法如下所示：
<a href="protocol://domain/file#bookmark" target="frame_name"> … </a> 上述標籤的屬性說明，如下表所示：
21
2-2-4 圖片和超連結標籤-圖片語法 在網頁插入圖片是使用<img>標籤，其基本語法如下所示：
<img src="filename" width=value height=value align=left | right> 上述標籤的屬性說明，如下表所示：
22
2-2-5 網頁表格標籤-說明 網頁表格標籤是由一組標籤所組成，以便在網頁建立表格的編排，如下表所示：
23
2-2-5 網頁表格標籤-語法 網頁表格的每一列是使用<tr>和<td>標籤組合出來，一組<tr></tr>標籤是表格的一列，每一列中使用一組<td></td>標籤建立一個儲存格，其基本語法如下所示： <table border=value> <tr> <td> </td> ……. </tr> <td> </td> …….. …… </table>
24
2-2-6 網頁表單標籤-說明 網頁表單是Web應用程式的使用介面，其相關標籤如下表所示：
25
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">
26
2-2-7 框架頁標籤-說明 框架頁是一種瀏覽程式視窗的分割方法，其標籤如下表所示：
27
2-2-7 框架頁標籤-語法 在瀏覽程式建立視窗左右分割的框架，如果HTML文件為框架頁，原來的<body>區塊將以<frameset>標籤取代，其基本語法如下所示： <frameset cols="value,value,"> <frame> </frameset>
28
2-3 XML與XSLT的基礎 2-3-1 什麼是XML 2-3-2 XML文件的組成元素 2-3-3 XSL的基礎
29
2-3-1 什麼是XML-說明 「XML」（eXtensible Markup Language）可擴展標示語言屬於一種標籤語言，XML 1.0版規格在1998年2月正式推出，XML的寫法十分類似HTML，繼承SGML自定標籤的優點，並且刪除一些SGML複雜的部分，在功能上能夠補足HTML標籤的不足，而擁有更多的擴充性。 不過XML並不是用來編排內容，而是用來描述資料，它並沒有如同HTML一般的預設標籤，事實上使用者需要自己定義描述資料所需的各種標籤。
30
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>
31
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。
32
2-3-1 什麼是XML-圖例
33
2-3-2 XML文件的組成元素-元素(說明) XML文件基本上是由標籤和內容組成，一共六種組成的元素可以出現在XML文件。
元素（Element） XML文件是由元素組成，XML的元素和標籤並不同，其代表的意義，如下所示： 「標籤」（Tag）：XML能夠自己定義標籤，一個標籤是標示文件的部分內容，例如：標籤<code>、<title>和<price>等，標籤分為開頭標籤<code>和結尾標籤</code>。 「元素」（Element）：XML元素是整個文件的主要架構，元素是標籤加上其中的文字內容，或是在元素內包含其它的元素，元素是一個完整的項目，包含標籤、屬性、開始標籤和結尾標籤內的文字內容和結尾標籤。
34
2-3-2 XML文件的組成元素-元素(範例) XML元素需要由開始和結尾標籤構成，其中包含文字內容，例如：XML元素code，內含值F8920，如下所示： <code>F8920</code> 此外XML元素允許包含其它的子元素，例如：在圖書book元素擁有code、title、authorlist和price子元素，如下所示： <book> <title>ASP.NET網頁製作徹底研究</title> <authorlist> <author>陳會安</author> </authorlist> <price>650</price> </book>
35
2-3-2 XML文件的組成元素-屬性 屬性（Attribute）
在開始標籤的標籤名稱後，可以替標籤新增屬性名稱，每一個屬性擁有屬性名稱和值，屬性值需要使用雙引號括起，如下所示： <book code="F8920"> 上述<book>標籤擁有code屬性，其值為F8920。
36
2-3-2 XML文件的組成元素-實體參考(說明)
實體參考（Entity Reference） XML標籤語言本身擁有一些保留符號，例如：標籤中的"<"符號，如果文件內容需要使用這些符號時，需要使用實體參考，在XML提供5個預先保留的實體參考，如下表所示：
37
2-3-2 XML文件的組成元素-實體參考(範例)
<order>書價 < 650</order> 上述的標籤內容擁有"<"符號，此時就需要使用實體參考，如下所示：
38
2-3-2 XML文件的組成元素-註解 註解（Comment）
XML的註解文字和HTML一樣都是由"<!--"符號開始和"-->"符號結尾，如下所示： <!--網頁製作徹底研究系列-->
39
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>
40
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。
41
2-3-2 XML文件的組成元素-DTD DTD（Document Type Declarations）
DTD是XML文件的驗證指令，檢查XML文件的元素是否符合標籤的定義，這是SGML預設的文件驗證方式，也被XML採用，在XML文件除元素外，就是檢查XML元素的DTD指令。
42
2-3-3 XSL的基礎-說明 XML文件本身只是以標籤來定義不同的資料，如果需要顯示XML元素的資料，如同一個文字檔案的資料庫，查詢資料表的記錄建立所需的報表，我們需要一種機制來描述XML元素如何被顯示，這種語言稱為樣式語言，「XSL」（eXtensible Style Language）就是配合XML的樣式語言。
43
2-3-3 XSL的基礎-功能說明 XSL和XML文件一樣源於SGML的「DSSSL」（Document Style Semantics and Specification Language），XSL的功能十分強大，屬於一種真正的Script語言，在功能上主要分為兩個部分，如下所示： 轉換XML文件：將XML文件架構轉換成另一個XML架構的文件，或非XML文件，例如：HTML文件。 格式化XML文件：格式化元素內容的樣式，以便顯示出XML文件。
44
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語言。
45
2-3-4 XSLT是如何運作-圖例說明 XSLT文件依元素的用途定義許多對應元素的範本，當XSLT處理器在XML文件發現符合條件的元素，就使用範本定義的內容，可能是一些HTML標籤，加上XML元素取出的內容，在過濾掉XML文件不需要的部分來產生轉換結果，輸出的結果文件可能是另一份完全不同架構的XML、HTML或XHTML檔案，如下圖所示：
46
2-4 建立XHTML文件 2-4-1 XHTML文件基礎 2-4-2 XHTML文件架構 2-4-3 XHTML文件的DTD
2-4-4 XHTML就是良好格式的HTML
47
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屬性取代。
48
2-4-2 XHTML文件架構-說明 XHTML文件架構和HTML文件十分相似，只是在文件開頭使用XML和DOCTYPE的宣告，其副檔名為【.xhtml】，或是和XML文件一樣使用【.xml】。 編輯XHTML文件可以使用Windows記事本或XML編輯工具，不過因為使用W3C網址的DTD，所以一定需要建立Internet連線，否則無法下載XHTML的DTD來驗證文件內容。
49
2-4-2 XHTML文件架構-範例 01: <?xml version="1.0" encoding="Big5"?>
02: <!DOCTYPE html 03: PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 04: " 05: <html xmlns=" 06: <head> 07: <title>這是一個測試網頁</title> 08: </head> 09: <body> 10: <p>歡迎進入我的網頁</p> 11: </body> 12: </html>
50
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" " HTML文件：第5~12列是一個HTML文件，在<html>標籤指定名稱空間 1.0版的寫法，如下所示： <html xmlns=" <head><title>這是一個測試網頁</title></head> <body><p>歡迎進入我的網頁</p></body> </html>
51
2-4-2 XHTML文件架構-圖例1
52
2-4-2 XHTML文件架構-圖例2 如果需要顯示成HTML文件內容，請刪除第1列的<?xml … >宣告，例如：相同內容的Ch2_4.xhtml，如下圖所示：
53
2-4-3 XHTML文件的DTD-說明 在XHTML開頭的DOCTYPE宣告部分，最後1個參數指明使用的DTD，因為XHTML也支援DTD驗證，目前XHTML支援3種HTML 4.0 DTD，那就是Strict、Transitional和Frameset。
54
2-4-3 XHTML文件的DTD-Strict DTD
XHTML使用HTML標籤和CSS，請使用Strict DTD，此時的宣告如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
55
2-4-3 XHTML文件的DTD-Transitional DTD
如果是不支援CSS的瀏覽程式，請使用Transitional DTD，此時的宣告如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
56
2-4-3 XHTML文件的DTD-Frameset DTD
如果XHTML使用框架頁，請使用Frameset DTD，此時的宣告如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "
57
2-4-4 XHTML就是良好格式的HTML-1 標籤和屬性名稱都需要小寫
XHTML文件的標籤和屬性都需要小寫的英文字，例如：XHTML就一定需要小寫的標籤，如下所示： <head> <title>這是一個測試網頁</title> </head> <body> <p>歡迎進入我的網頁</p> </body>
58
2-4-4 XHTML就是良好格式的HTML-2 XHTML文件需要根元素
XHTML文件一定需要<html>標籤作為文件的根元素，例如：XHTML就一定需要是完整的HTML文件，如下所示： <html> <head><title>這是一個測試網頁</title> </head> <body><p>歡迎進入我的網頁</p></body> </html> 在HTML就算沒有<html>標籤也一樣可以在瀏覽程式正確顯示，但是XHTML不可以，一定需要一個<html>根元素。
59
2-4-4 XHTML就是良好格式的HTML-3 標籤需要結尾標籤 XHTML一定需要擁有「結尾標籤」（End-Tag），如下所示：
<p>這是一個測試</p> 上述開頭的<p>標籤，一定需要撰寫</p>，因為XHTML標籤一定是成雙成對的，如果標籤是葉節點，例如：<br>、<hr>、<input>和<img>，這種標籤需要使用"/＞"符號替代結尾標籤，其寫法如下所示： <img src="sample.jpg" width="20" height="30" /> 上述標籤使用"<"和"/>"符號標示一個良好格式的標籤。
60
2-4-4 XHTML就是良好格式的HTML-4 巢狀標籤不能重疊 XHTML的標籤不能重疊，例如：HTML可以使用下面的程式碼，如下所示：
<B>陳會安<I>您好</B>嗎</I> 上述<B>和<I>標籤是重疊的，在瀏覽程式只會顯示不正確的結果，但是XHTML的標籤不允許重疊，如下所示： <b>陳會安<i>您好</i>嗎</b>
61
2-4-4 XHTML就是良好格式的HTML-5 屬性值需要使用雙引號 標籤的屬性值需要使用雙引號，如下所示： 屬性一定需要擁有屬性值
<img src="sample.jpg" width="20" height="30" /> 屬性一定需要擁有屬性值 在HTML文件的標籤，有些屬性並不需要設定屬性值，只需加上屬性名稱即可，但是在XHTML就一定需要指明屬性名稱，例如：XHTML的寫法，如下所示： <option selected="selected"> <input type="radio" checked="checked">
62
2-4-4 XHTML就是良好格式的HTML-6 Script程式碼需要使用CDATA
在XHTML的Script程式碼中，因為"<"和"&"可能被視為標籤的一部分，為了避免Script程式碼或其它元素中有此符號，此時需要在Script程式碼使用CDATA，如下所示： <script> <![CDATA[ …….. ]]> </script>
Similar presentations
