HTML網頁設計 Chapter 16 16-1 建置網站的流程 16-2 從事網頁設計相關的程式語言 16-3 認識HTML語法 16-1 建置網站的流程 16-2 從事網頁設計相關的程式語言 16-3 認識HTML語法 16-4 編輯HTML網頁 16-5 HTML網頁的整體架構 16-6 事件處理程式 16-7 資料編輯與格式化 16-8 超連結 16-9 圖片 16-10 表格
16-1 建置網站的流程 建置網站的流程大致上可以分成四個階段： 階段一：蒐集資料與規劃網站架構 階段二：網頁製作與測試 16-1 建置網站的流程 P.16-2 建置網站的流程大致上可以分成四個階段： 階段一：蒐集資料與規劃網站架構 除了要釐清網站所要傳遞的資訊有哪些之外，還要確定網站的宗旨及主要的訴求對象，然後將網站的內容規劃成階層式架構，也就是規劃出組成網站的網頁及。 階段二：網頁製作與測試 要著手製作階段一所規劃的網頁，常見的網頁編輯軟體分成兩種， 其一是純文字編輯軟體，其二是所視即所得網頁編輯軟體，待網頁製作完畢後，還要在電腦上測試各個元件能否正確運作。
階段三：將網站上傳至Web伺服器並加以推廣 P.16-3 階段三：將網站上傳至Web伺服器並加以推廣 在將網頁上傳到Internet後，還要將它公諸於世，其中最快速的方式就是到Yahoo!奇摩、Google、蕃薯藤等搜尋網站進行登錄。申請網頁空間，常見的方式如下： 租用專線 (或固定IP制ADSL)：如果您的預算充足，可以向ISP租用專線，讓您的電腦24小時上網並架設成Web伺服器。 租用網頁空間或虛擬主機：如果您的預算較少，可以向ISP租用商用網頁空間或虛擬主機。 申請免費網頁空間：如果您沒有預算，可以向智邦生活館、GEOCITIES、藍色小舖、章魚網等網站或HiNet、SeedNet、So-net等ISP(限其用戶) 申請免費網頁空間。 階段四：網站的更新與維護 您的責任可不是將網站上傳到Internet就結束了，既然建置了這個網站，就必須負起維護與更新的責任，才能留住訪客的心。
16-2 從事網頁設計相關的程式語言 從事網頁設計相關的程式語言很多，比較常見的有下列幾種： 16-2 從事網頁設計相關的程式語言 P.16-4 從事網頁設計相關的程式語言很多，比較常見的有下列幾種： HTML (Hyper Text Markup Language)：主要的用途是撰寫網頁，由「標籤」(tag)與「屬性」(attribute)所組成，瀏覽器只要看到HTML標籤與屬性，就能解譯成網頁。 CSS (Cascading Style Sheets)：主要的用途是定義網頁資料的編排、顯示、格式化及特殊效果，雖然HTML提供的標籤可以將資料格式化，但變化有限，而CSS正好彌補了這個不足。 網頁的HTML原始檔 網頁的實際瀏覽結果
從事網頁設計相關的程式語言很多，比較常見的有下列幾種： XHTML(eXtensible HTML)：這是W3C依照XML 1.0形式將HTML 4重新制定的一種標記語言，未來可望取代HTML，成為網頁製作的標準語言。由於XHTML就是將HTML 4依照XML 1.0形式重新制定，因此，HTML 4的元素與屬性均能沿用，只是要留意一些來自XML1.0的語法規則。 XML、XSL(eXtensible Markup Language、eXtensible Style Language) ：主要的用途是在Internet傳送或處理資料，提供跨平台、跨程式的資料交換格式，其中XML用來描述文件的內容，XSL用來描述文件的樣式。 DHTML(Dynamic HTML)：這項技術能夠在網頁下載完畢後插入、刪除或取代網頁的某些HTML原始碼，而瀏覽器會自動根據更新過的HTML原始碼顯示新的網頁內容，無須從伺服器重新下載整個網頁，如此便能大量減少瀏覽器存取伺服器的次數。 VRML(Virtual Reality Modeling Language)：主要的用途是描述物體的三度空間資訊，讓網頁的瀏覽者可以看到3D物體。 P.16-5
ActiveX Control：這是Microsoft為了迎戰Java Applet所推出的控制項，功能強大。 Java Applet：這是使用Java撰寫出來的小程式，無法單獨執行，必須嵌入網頁，然後透過支援Java的瀏覽器協助其執行，目前有很多網站提供現成的Java Applet讓瀏覽者下載。由於Java Applet通常來自網路上的其它電腦，為了安全起見，Java Applet的能力一般都會受到限制。 ActiveX Control：這是Microsoft為了迎戰Java Applet所推出的控制項，功能強大。 P.16-6 網頁上的水中倒影是Java Applet特效 Windows Media Player控制項
P.16-7 瀏覽器端Scripts(描述語言)：HTML、XHTML、XML、VRML或CSS所撰寫的網頁都是屬於靜態網頁，無法顯示動態效果，有人會希望當瀏覽者點取網頁的元件時，元件的外觀會改變，凡此種種都必須透過程式才辦得到，而且為了不影響傳輸速率，程式還得愈小愈好。此類需求可以透過瀏覽器端Scripts來完成，這是一段散佈在HTML原始碼內的小程式，由瀏覽器負責執行。 伺服器端Scripts：雖然瀏覽器端Scripts已經能夠完成許多工作，但有些工作還是得在伺服器端執行Scripts才能完成，由於在伺服器端執行Scripts必須擁有特殊權限，而且會增加伺服器端的負擔，因此，如有可能的話，網頁的設計者應盡量以瀏覽器端Scripts或DHTML取代伺服器端Scripts。
常見的伺服器端Scripts有下列幾種： 瀏覽器端Scripts (描述語言)：HTML、XHTML、XML、VRML或CSS所撰寫的網頁都是屬於靜態網頁，無法顯示動態效果，有人會希望當瀏覽者點取網頁的元件時，元件的外觀會改變，凡此種種都必須透過程式才辦得到，而且為了不影響傳輸速率，程式還得愈小愈好。此類需求可以透過瀏覽器端Scripts來完成，這是一段散佈在HTML原始碼內的小程式，由瀏覽器負責執行。 常見的伺服器端Scripts有下列幾種： CGI(Common Gateway Interface)：CGI是在伺服器端程式之間傳送訊息的標準介面，而CGI程式則是符合CGI標準介面的Scripts。 JSP(JavaServer Pages)：是建立動態網頁的技術，JSP網頁是在伺服器執行，然後將結果轉換成HTML文件傳送給瀏覽器，瀏覽器再將之解譯為網頁。 PHP(PHP)：屬於開放原始碼，具有完全免費、穩定、快速、跨平台、容易學習、物件導向等優點。 ASP(Active Server Pages)：ASP程式是在Microsoft IIS、PWS 等We b 伺服器執行的Scripts。 P.16-7
16-3 認識HTML語法 標籤(tag)：HTML標籤可以分成兩種，第一種用來識別網頁上的元件或描述元件的樣式，第二種用來指向其它資源。 P.16-8 標籤(tag)：HTML標籤可以分成兩種，第一種用來識別網頁上的元件或描述元件的樣式，第二種用來指向其它資源。 屬性(attribute)：除了HTML標籤本身所能描述的特性之外，大部分標籤還會搭配屬性，以提供更多資訊。
值(value)：通常屬性會有一個值，而且這個值必須從預先定義好的範圍內選取，不能自行定義。 P.16-9 巢狀標籤：有時我們可能需要使用一個以上的標籤來表示網頁的資料。 <H1>Happy<I>Birthday</I></H1> <H1>Happy<I>Birthday</H1></I> 順序正確 順序不正確 空白字元：HTML瀏覽器會忽略標籤之間多餘的空白字元或Enter鍵。 特殊字元：HTML文件中有一些特殊字元，例如小於 (<)、大於 (>)、雙引號 (“)、& 和空白字元，必須要分別輸入 <、>；、"、&、 。
16-4 編輯HTML網頁 P.16-10 使用記事本編輯HTML網頁，但必須將副檔名改為 .htm。 HTML網頁編輯完畢後，您可以使用下列任一方法進行瀏覽： 在HTML網頁的檔案圖示按兩下，即可啟動預設的瀏覽器進行瀏覽。 在瀏覽器的網址列輸入HTML網頁的路徑，然後按 [Enter] 鍵。 另外要提醒您，如果您在瀏覽過網頁後，想修改HTML網頁，可以在瀏覽器選取 [網頁] \ [檢視原始檔]，系統就會啟動記事本並載入HTML網頁的原始檔。
16-5 HTML網頁的整體架構 HTML文件的整體架構可以分成三個部分－HTML版本宣告、標題宣告、文件主體 ，下面是一個例子： P.16-11 HTML文件的整體架構可以分成三個部分－HTML版本宣告、標題宣告、文件主體 ，下面是一個例子： <!DOCTYPE> 標籤：用來宣告HTML網頁的版本訊息。 <HTML>...</HTML> 標籤：用來識別HTML網頁，如果HTML網頁已經有<!DOCTYPE> 標籤，那麼 <HTML> 標籤可以省略不寫。 <HEAD>...</HEAD> 標籤：包含網頁相關資訊。 <TITLE>...</TITLE> 標籤：用來設定網頁標題，該標題會顯示在瀏覽器的標題列。 <BODY>...</BODY> 標籤：用來設定網頁主體。
<BODY>...</BODY> 標籤的重要屬性 P.16-12 <BODY>...</BODY> 標籤的重要屬性
16-6 事件處理程式 P.16-13 事件處理程序 (event handler) 指的是將瀏覽者的動作 (例如按下滑鼠或按鍵) 和Script程式連結，例如：
P.16-13
16-7 資料編輯與格式化 16-7-1 設定標題格式 <HTML> <HEAD> P.16-14 16-7-1 設定標題格式 <HTML> <HEAD> <TITLE>示範標題格式網頁</TITLE> </HEAD> <BODY> <H1 ALIGN="LEFT">這是向左對齊的標題 1</H1> <H2 ALIGN="CENTER">這是置中的標題 2</H2> <H3 ALIGN="RIGHT">這是向右對齊的標題 3</H3> <H4>這是標題 4 (Heading 4)</H4> <H5>這是標題 5 (Heading 5)</H5> <H6>這是標題 6 (Heading 6)</H6> </BODY> </HTML>
16-7-2 設定段落格式 <HTML> <HEAD> P.16-15 <HTML> <HEAD> <TITLE>使用段落標籤的網頁</TITLE> </HEAD> <BODY> <P>天命之謂性，率性之謂道，修道之謂教。</P> <P>道也者，不可須臾離也；可離，非道也。</P> <P>是故，君子戒慎乎其所不賭，恐懼乎其所不聞。</P> <P>莫見乎隱，莫顯乎微，故君子慎其獨也。</P> </BODY> </HTML>
16-7-3 預先格式化段落 <HTML> P.16-16 <HTML> <HEAD><TITLE>示範預先格式化網頁</TITLE></HEAD> <BODY> <PRE> #include <studio.h> void main() { printf("Hello World!\n") } </PRE> </BODY> </HTML>
16-7-4 註解 <HTML> <BODY> <!--這是註解不會顯示在瀏覽器畫面上--> P.16-16 <HTML> <BODY> <!--這是註解不會顯示在瀏覽器畫面上--> </BODY> </HTML>
16-7-5 常見的文字格式 P.16-17 HTML提供的文字格式標籤
P.16-17
16-7-6 水平線 範例 <HR> 標籤的重要屬性： 水平線向左對齊、置中或向右對齊： P.16-18 <HR> 標籤的重要屬性： 水平線向左對齊、置中或向右對齊： ALIGN = "{LEFT, CENTER, RIGHT}" 水平線顏色：COLOR = "#RRGGBB" 或 "..." 水平線高度：SIZE = "n" 水平線寬度：WIDTH = "n“ 範例 <HR COLOR="Green" ALIGN="LEFT" WIDTH="50%“ SIZE="5">
16-7-7 文字字型、色彩與大小 <HTML> <BODY> <P>聽風在唱</P> 16-7-7 文字字型、色彩與大小 P.16-18 <HTML> <BODY> <P>聽風在唱</P> <P><FONT SIZE="1" COLOR="Green" FACE="華康細圓體">聽風在唱</FONT></P> <P><FONT SIZE="2" COLOR="Purple" FACE="華康行書體">聽風在唱</FONT></P> <P><FONT SIZE="3" COLOR="Red" FACE="華康流線體">聽風在唱</FONT></P> <P><FONT SIZE="4" COLOR="Navy" FACE="華康娃娃體">聽風在唱</FONT></P> <P><FONT SIZE="5" COLOR="Teal" FACE="華康彩帶體">聽風在唱</FONT></P> <P><FONT SIZE="6" COLOR="Blue" FACE="華康布丁體">聽風在唱</FONT></P> <P><FONT SIZE="7" COLOR="Olive" FACE="華康古印體">聽風在唱</FONT></P> </BODY> </HTML>
16-7-8 項目符號與編號清單 <HTML> <BODY> <UL TYPE="CIRCLE"> 16-7-8 項目符號與編號清單 P.16-19 <HTML> <BODY> <UL TYPE="CIRCLE"> <LI><FONT COLOR="#800000" FACE="華康行書體">射雕英雄傳</FONT></LI> <LI><FONT COLOR="#800000" FACE="華康行書體">神雕俠侶</FONT></LI> <LI><FONT COLOR="#800000" FACE="華康行書體">倚天屠龍記</FONT></LI> <LI><FONT COLOR="#800000" FACE="華康行書體">碧血劍</FONT></LI> </UL> </HTML> </BODY>
<HTML> <HEAD> <TITLE>示範編號清單的網頁</TITLE> </HEAD> <BODY> <OL TYPE="A"> <LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體">玩具總動員</FONT></LI> <LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體">蟲蟲危機</FONT></LI> <LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體">花木蘭</FONT></LI> <LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體">泰山</FONT></LI> <LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體">小美人魚</FONT></LI> <LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體">鐘樓怪人</FONT></LI> </OL> </BODY> </HTML> P.16-20
16-8 超連結 P.16-21 16-8-1 建立超連結 連結位於相同資料夾的文件：假設要將staff.htm內的文字「常見問題集」設定成連結至question.htm的超連結，那麼可以採用文件相對URL來設定超連結的URL。 例如： <A HREF="question.htm">常見問題集</A> 連結位於不同資料夾的文件：假設要將about.htm內的文字「員工」設定成連結至staff.htm的超連結，那麼可以採用文件相對URL來設定超連結的URL。 例如 ：<A HREF="Support\staff.htm">員工</A> 連結Web上的文件：假設要將文字「HiNet」設定成連結至HiNet的超連結，那麼必須採用絕對URL。 例如：<A HREF="http://tw.yahoo.com/">雅虎奇摩</A>
P.16-22 16-8-2 設定連結至E-MAIL地址的超連結 當您設定連結至E-mail地址的超連結時，除了要使用 <A>…</A> 標籤的HREF屬性設定收件人的電子郵件地址，還要在電子郵件地址前面加上mailto: 通訊協定。 例如： <A HREF="mailto:jeanchen@mail.ht.net.tw">歡迎寫信給我們</A>
16-9 圖片 16-9-1 插入圖片 我們可以使用 <IMG> 標籤在網頁上插入圖片，其屬性如下： 設定圖片的對齊方式： P.16-23 16-9-1 插入圖片 我們可以使用 <IMG> 標籤在網頁上插入圖片，其屬性如下： 設定圖片的對齊方式： ALIGN = "{LEFT, RIGHT, TOP, MIDDLE,BOTTOM} " 設定圖片的替代顯示文字：ALT = "... " 設定圖片的框線粗細(n 為像素數)：BORDER = "n" 當圖片為影像時，可以設定播放控制項 (僅適用於IE)：CONTROLS 設定動態影像的相對或絕對位置 (僅適用於IE)：DYNSRC = "URL" 設定圖片的高度 (n 為像素數)：HEIGHT = "n" 設定圖片的水平間距 (n 為像素數)：HSPACE = "n" 設定圖片為伺服器端影像地圖：ISMAP 設定圖片的說明文字：LONGDESC = "... " 設定低解析度圖片的相對或絕對位置：LOWSRC = "URL"
P.16-23 設定視訊檔案的播放次數(n 為次數，僅適用於IE)： LOOP = "{n, INFINITE} " 設定圖片的名稱，以供scripts、applets或書籤使用：NAME = "... " 設定圖片的相對或絕對位置：SRC = "URL" 設定讓動態影像開始播放的事件(僅適用於IE)： START = "{FILEOPEN, MOUSEOVER} " 設定影像地圖所在的檔案位置及名稱：USEMAP = "URL" 設定VRML物件的相對或絕對位置：VRML = "... " 設定圖片的垂直間距(n為像素數)：VSPACE = "n" 設定圖片的寬度(n為像素數)：WIDTH = "n" 這個標籤亦接受CLASS、ID、STYLE、TITLE、LANG、DIR、onClick、onDblClick、onMouseDown、onMouseUp、onMouseOver、onMouseMove、onMouseOut、onKeyUp、onKeyPress等屬性。
16-9-2 設定圖片的高度、寬度與框線 <HTML> <HEAD> 16-9-2 設定圖片的高度、寬度與框線 P.16-24 <HTML> <HEAD> <TITLE>設定圖片的高度、寬度及框線</TITLE> </HEAD> <BODY> <IMG SRC="mulan4.gif"> <IMG SRC="mulan4.gif" HEIGHT="136" WIDTH="120"> <IMG SRC="mulan4.gif" BORDER="3"> </BODY> </HTML>
16-9-3 設定圖片的對齊方式 <BODY> <P><IMG SRC="mulan1.jpg"> 16-9-3 設定圖片的對齊方式 P.16-25 <BODY> <P><IMG SRC="mulan1.jpg"> <FONT COLOR="Maroon" FACE="華康古印體" SIZE="5">迪士尼最新動畫鉅獻 <IMG SRC="mulan2.jpg"></FONT></P> <P><FONT FACE="華康行書體" SIZE="5" COLOR="Maroon">Mulan－花木蘭</FONT></P> <P><FONT FACE="華康楷書體W3">唧唧復唧唧，木蘭當戶織，不聞機杼聲，唯聞女 嘆息。問女何所思？問女何所憶？女亦無所思，女亦無所憶......”這首耳熟能響的木 蘭詩，相信您我都背頌過，而今迪士尼將這個中國民間故事搬上動畫的舞台，就讓 我們一起來回味一下吧！</FONT></P> </BODY>
在插入第一張圖片的敘述中加上ALIGN = “LEFT” 屬性 P.16-25~16-26 在插入第一張圖片的敘述中加上ALIGN = “LEFT” 屬性 在插入第一張圖片的敘述中加上ALIGN = "RIGHT" 屬性
在插入第一張圖片的敘述中加上ALIGN = “TOP” 屬性 在插入第一張圖片的敘述中加上ALIGN = "BOTTOM" 屬性 在插入第一張圖片的敘述中加上ALIGN = "MIDDLE" 屬性
16-10 表格 16-10-1 插入表格 插入表格通常會用到下列四個標籤: P.16-27 16-10-1 插入表格 插入表格通常會用到下列四個標籤: <TABLE>...</TABLE>標籤：在網頁上標示一個表格，如果要設定表格的對齊方式 (靠左、靠右、置中)、寬度、背景圖片、背景色彩、框線大小、框線色彩、欄數、儲存格墊充、儲存格間距、外框線顯示方式、內框線顯示方式，可以分別使用ALIGN = "{LEFT, RIGHT, CENTER}"、WIDTH= "n "、BACKGROUND = "URL "、BGCOLOR = "#RRGGBB "、BORDER= "n "、BORDERCOLOR = "#RRGGBB "、COLS = "n "、CELLPADDING ="n "、CELLSPACING = "n "、FRAME = {"VOID, BORDER, ABOVE, BELOW,HSIDES, LHS, RHS, VSIDES, BOX}"、RULES = {"NONE, GROUPS, ROWS,COLS, ALL"} 等屬性。 <TR>...</TR>標籤：在表格中標示一列，結束標籤 </TR> 可以省略不寫。如果要設定某一列儲存格的水平對齊方式 (靠左、靠右、置中、左右對齊、對齊指定的字元)、垂直對齊方式 (靠上、中央、靠下、基線)、背景色彩、框線色彩、取消文字換行，可以分別使用ALIGN =“{LEFT, RIGHT, CENTER, JUSTIFY, CHAR}”、VALIGN = “{TOP, MIDDLE,BOTTOM, BASELINE}”、BGCOLOR = “#RRGGBB ”、BORDERCOLOR =“#RRGGBB ”、NOWRAP等屬性。
P.16-27 <TD>...</TD> 標籤：在一列中標示一儲存格，結束標籤 </TD> 可以省略不寫。如果要設定某個儲存格的寬度、水平對齊方式 (靠左、靠右、置中、左右對齊、對齊指定的字元)、垂直對齊方式 (靠上、中央、靠下、基線)、背景圖片、背景色彩、框線色彩、取消文字換行、由幾欄合併而成、由幾列合併而成，可以分別使用WIDTH = "n "、ALIGN = "{LEFT, RIGHT, CENTER,JUSTIFY, CHAR}“、VALIGN = ”{TOP, MIDDLE, BOTTOM, BASELINE}“、BACKGROUND = "URL "、BGCOLOR = "#RRGGBB "、BORDERCOLOR ="#RRGGBB "、NOWRAP、COLSPAN = "n "、ROWSPAN = "n " 屬性。 <TH>...</TH> 標籤：在一列中標示一標題儲存格，結束標籤 </TH> 可以省略不寫。<TH>⋯</TH> 標籤的屬性和 <TD>⋯</TD> 標籤相同，但 <TH>⋯</TH> 標籤內的文字會置中並加上粗體。
16-10-2 設定表格的對齊方式 P.16-30 <TABLE>標籤的ALIGN屬性提供了LEFT(靠左)、CENTER(置中)、RIGHT(靠右)三種對齊方式。
16-10-3 設定儲存格的對齊方式 P.16-31 <TABLE BORDER="1" WIDTH="100%"> <TR> <TD><IMG SRC="03.gif"></TD> <TD ALIGN="LEFT">向左對齊</TD> <TD ALIGN="CENTER">水平置中</TD> <TD ALIGN="RIGHT">向右對齊</TD> </TR> <TD><IMG SRC="04.gif"></TD> <TD VALIGN="TOP">靠上對齊</TD> <TD VALIGN="MIDDLE">垂直置中</TD> <TD VALIGN="BOTTOM">靠下對齊</TD> <TD><IMG SRC="05.gif"></TD> <TD ALIGN="RIGHT" VALIGN="TOP">靠右上對齊</TD> <TD ALIGN="CENTER" VALIGN="MIDDLE">水平垂直置中</TD> <TD ALIGN="RIGHT" VALIGN="BOTTOM">靠右下對齊</TD> </TABLE>
P.16-32 16-10-4 設定表格的背景色彩與背景圖片 我們可以使用<TABLE>標籤的BGCOLOR、BACKGROUND屬性設定表格的背景色彩與背景圖片，例如<TABLE BORDER=“1” BGCOLOR=“#FFEED2”> 是將表格的背景色彩設定為 #FFEED2，<TABLE BORDER=“1” BACKGROUND=“bg.gif”> 是將表格的背景圖片設定為bg.gif。
P.16-32 16-10-5 設定儲存格的背景圖片與背景色彩 如果要設定某一列儲存格、某一個儲存格或標題儲存格的背景圖片與背景色彩，可以分別使用 <TR>、<TD>、<TH> 標籤的BACKGROUND和BGCOLOR屬性 將每一列儲存格設定不同背景色彩並取消表格框線 將每一列儲存格設定不同背景色彩
本章摘要 建置網站的流程分為「蒐集資料與規劃網站架構」、「網頁製作與測試」、「網站上傳與推廣」、「網站更新與維護」等四個階段。 P.16-35 建置網站的流程分為「蒐集資料與規劃網站架構」、「網頁製作與測試」、「網站上傳與推廣」、「網站更新與維護」等四個階段。 從事網頁設計相關的程式語言包括H TML、XML、X S L、C S S、X H TML、VRML、DHTML、Java Applet、ActiveX Control、瀏覽器端Scripts (JavaScript、VBScript)、伺服器端Scripts (CGI、PHP、JSP、ASP/ASP.NET)。 HTML語法是由「標籤」與「屬性」所組成，其中標籤又分成兩種，第一種用來識別網頁上的元件或描述元件的樣式，第二種用來指向其它資源。 HTML網頁的整體架構有「HTML版本宣告」、「標題宣告」、「網頁主體」等三個部分。
<!-- --> 標籤用來在網頁上插入註解，而且註解不會顯示在瀏覽器。 <HR> 標籤用來在網頁上插入水平線。 P.16-35 HTML提供六種層次的標題格式 <H1>...</H1>、<H2>...</H2>、<H3>...</H3>、<H4>...</H4>、<H5>...</H5>、<H6>...</H6> (字體最小)。 HTML提供數種段落格式標籤，例如 <P>…</P>、<PRE>...</PRE>、<BR>、<ADDRESS>...</ADDRESS>、<BLOCKQUOTE>...</BLOCKQUOTE>。 <!-- --> 標籤用來在網頁上插入註解，而且註解不會顯示在瀏覽器。 <HR> 標籤用來在網頁上插入水平線。 <FONT>...</FONT> 標籤用來設定網頁上的文字字型、大小與色彩。 <UL>...</UL> 標籤用來設定項目符號，<OL>...</OL> 標籤用來設定編號清單，<LI>…</LI> 標籤用來設定個別的項目資料。
<A>...</A> 標籤用來在網頁上插入超連結。 <IMG> 標籤用來在網頁上插入圖片。 P.16-35 <A>...</A> 標籤用來在網頁上插入超連結。 <IMG> 標籤用來在網頁上插入圖片。 製作一個簡單的表格通常會用到 < T A B L E > . . . < / T A B L E > 、< T R > . . . < / T R > 、<TD>...</TD>、<TH>...</TH> 等標籤。
學習評量 一、選擇題 1. 下列何者不是網頁編輯軟體？ A. Dreamweaver B. SharePoint Designer C. GoLive D. Illustrator 3. 下列何者可以用來描述文件的樣式？ A. XSL B. XML C. XHTML D. CHTML 5. 下列何者相當於是微軟版的Java Applet？ A. ASP.NET B. ActiveX Control C. VBScript D. DHTML 7. <BODY> 標籤的哪個屬性可以用來設定超連結文字被選取時的色彩？ A. ALINK B. LINK C. VLINK D. BGCOLOR
A. <TR> B. <HR> C. <ABBR> D. <BR> P.16-36 9. 下列哪個標籤可以插入水平線？ A. <TR> B. <HR> C. <ABBR> D. <BR> 11. 下列何者可以用來設定標題儲存格？ A. <TABLE> 標籤 B. <TR> 標籤 C. <TD> 標籤 D. <TH> 標籤