AGAMES 討論區 › 論壇 › 電腦數碼區 › 網絡應用 › HTML 4.0 語法教學（特別版）

查看: 2098|回復: 0

HTML 4.0 語法教學（特別版） [複製鏈接]

dlalden

七級帝王會員

☆Prince★}+}|電腦王子

Rank: 7 Rank: 7 Rank: 7

帖子: 3799
EXP: 6040 點
金幣: 4990 個
好友: 0
註冊時間: 2008-3-27

電梯直達

樓主

發表於 2008-10-27 19:14:11 |只看該作者 |倒序瀏覽

壹、網頁設計的基本概念
網頁設計並非只是簡單的字體大小設定、簡單鏈結設定或使用很多花俏的技巧這麼簡單而已，想要設計出一個好的網頁，應當要把握下列幾項要點：

確認網頁的主要目的。這個環節往往是最重要的一環，想一想，你希望來參觀你網頁的人能獲得怎樣的收穫或概念呢？
你期望到你的網頁會是哪些人？你想吸引怎樣的人來參觀？你的網頁設計是要設計給怎樣的團體來看？所以在設計網頁時，請用以使用者的角度來設計。
圖片的最佳化，避免浪費下載的頻寬。一個好的網站，其圖片都會壓縮過，因為每個網站都會有自己的頻寬限制，比如說，你申請的是ADSL，那麼你的下載只有512Bit，但是上載卻只有64Bit，所以你只能提供64Bit(大約8K左右)給眾多的使用者參觀，若圖形資料過於龐大，那你的網站就會慢的比撥接上網還慢喔！
確認設計的解析度環境。現在一般的使用者大都還都用800*600像素的解析度居多，所以在設計網頁時，就可以以800800*600像素的解析度為基礎。
確認是否要跨平台，並且在各種瀏覽器皆能顯示，尤其在兩大瀏覽器的相容性上。(現在Internet Explorer佔有市場約95%的使用者)
請確認設計網站時，各個網頁間的一致性。讓整體的感覺是一致的，這樣瀏覽它們會覺得是一體成形的。
提供一個網頁間良好的導覽流程。讓參觀的使用者可以很順暢的找尋到欲查閱的資訊。
使用字型標籤(font)或是CSS(Cascading Style Sheet)時，請使用各種平台都有提供的字型，不要使用唯有自己電腦才有的字型。因為使用者不會為了觀看你的網頁而去安裝字型的。(目前可以跨平台的字型大概有 Verdana, Arial,Helvetica, Courier New, Courier, Times New Roman)
請注意所使用的圖形及資料皆屬於自己所有，而不是連結或抄襲他人的。違反著作權法，是一見相當嚴重的侵害行為。
定期做好備份，以免一些不預期的事件發生。
若可以，也可以規劃一些策略來吸引客戶繼續光臨網站。

貳、HTML寫作注意事項
2.1 編輯工具：

記事本：因為編輯的是純文字。
Dreamweaver：專業的網頁編輯器。
FrontPage：微軟設計的網站編輯器。
Ultra Edit：工程師常用的軟體之一，易用於文字編輯和程式撰寫。

當然，市面上還有很多其他的小工具，在此就不再列舉..。
2.2 注意事項：

雖然HTML標籤不分大小寫，但為了日後方便搜尋修改，最好還是統一大小寫。
在儲存檔案的時候，若單純只是html語法而已，請儲存成.html或.htm(不支援長檔名系統所用)，另外若使用的是Unix系統，則檔名的大小寫會有差別。檔名最好不要有空白字元，可用"_"代替。
適時地在網頁文件內加入說明標籤(如 <!-這裡是個人的介紹開始-->)，讓網頁文件的架構較適合用於程式語法的套用以及日後的修改。
常用到的HTML標籤語法，儲存在自己專用的標籤列表。
如 <img src="X" width="X" height="X" border="0" alt="X">

參、第一次認識HTML
在HTML語法中是由標籤(tag)和屬性(attributes)所組成，而瀏覽器就可根據這些標籤及屬性，轉譯成網頁呈現瀏覽器中。
■ 標籤及屬性的介紹
3.1 標籤(tag)：
大致上可以分成兩種，一種是用來網頁識別用；另外一種是用來呈現網頁用。

例如：
網頁識別: <html>、<head>、<meta>、<title>、<body>；
呈現網頁: <p>、<table>、<a>、<img>.....等都是用來展現網頁的標籤。

每個標籤中都會用以"<",">"兩個符號刮起來，而且多數都會成對出現。例如你要將「Microsoft」弄成斜體，你只要在文字的前後加入<I>與</I>兩個標籤就可以(如<I>Microsoft</I>)，其中<I>是個起始標籤，</I>是個結束標籤，這樣瀏覽器就會知道你要把Microsoft設定成斜體了。
當然囉！也是有部分標籤不需要成對出現，例如，<br>是一個中斷字元的標籤(斷行標籤)，那你只要在想要斷行的地方，打入<br>這樣瀏覽器遇到此標籤，就會把文字往下一行開始列出。
3.2 屬性(attributes)：
每一個標籤都有著自己的屬性，除了HTML標籤的本身所能描述的特性以外，大部分的標籤還會搭配上屬性，以提供更多的相關資訊。舉例來說，我們要將一段文字設定成標題1的標籤，並且設定成紅色、置中對齊，所以我們除了用<H1>和</H1>來包住文字外，還要加上紅色屬性以及置中對齊的屬性才行。

例如：
<H1>過一個香草瀰漫的下午</H1>
......只有標籤<H1> <<Simple>>
<H1><font color="FF0000">過一個香草瀰漫的下午</font></H1>
......<H1>標籤加入紅色屬性 <<Simple>>
<H1 align="center"><font color="FF0000">過一個香草瀰漫的下午</font></H1>
......<H1>標籤加入紅色屬性和置中對齊 <<Simple>>

通常屬性都會有一個值(value)，每個value都會隨著屬性的不同會有不同的選擇範圍，例如水平線<hr>，其align的屬性就只有left, right, center三種可以選擇。
請注意，我們通常會在值的前後加入一個雙引號"，但是若值為英文字母、數字(0-9)、減號(-)、小數點(.)所組成，那麼雙引號可以省略。
在標籤的使用上，有一種用法叫做『巢狀標籤(nesting tag)』，也就是說，我們需要使用一個以上的標籤來表示同一個資料，銜接剛剛的範例，我們若要把文字在變成有斜體字，並設定成粗體字，則可以如下處理：

<H1 align="center"><font color="FF0000"><B><I>過一個香草瀰漫的下午</I></B></font></H1>
......這意思就是先讓文字變成粗體在變成斜體
<H1 align="center"><font color="FF0000"><I><B>過一個香草瀰漫的下午</B></I></font></H1>
......這意思就是先讓文字變成斜體在變成粗體
<<Simple>>

絕不可以寫成以下狀況

<H1 color="FF0000" align="center"><I><B>過一個香草瀰漫的下午</I></B></H1>
......這樣就不是對應式的標籤喔～這是錯誤寫法！

3.3 空白字元：
在HTML中的空白字元，瀏覽器在呈現網頁時都會忽略標籤之間的空白字元，所以在編輯上，您可以標籤的層次利用空白來表示，比較容易修改。

3.4 特殊字元：
在HTML中有蠻多的特殊字元是不可以直接由鍵盤來輸入該字元，必須依照HTML的特殊字元表來輸入才行。
例如：你要在網頁上表示一個幾度C的度，就要輸入°才行。

肆、細說HTML標籤
在HTML語法中，大致上可以分為： ( 節錄自『網站建置百寶箱』)

網頁架構：主要網頁主架構的介紹
分隔標籤：也就是所謂的水平線
排版標籤：針對標籤的屬性，可做適當的版面編排
字體標籤：教導您設定文字的字體。
文字標籤：教導您設定文字的顏色、行距、變化.....等等。
影像標籤：教導您如何在網頁中，植入圖像。
背景標籤：教導您如何設定背景顏色或是背景圖像。
連結標籤：教導您如何設定超連結，以及開視窗的條件。
表格標籤：教導您如何在網頁中運用表格。
序列標籤：教導您如何設定文字序列或圖形序列。
表單標籤：教導您如何製作可填寫用的表單。
框架標籤：可讓同一個視窗由多個網頁一起組成。
其他技巧：讓您的整個網頁背景可以讓您設定為圖片或是聲音。

4.1 網頁架構

<HTML>
　<HEAD>
　　<TITLE>網頁製作教學</TITLE>
　　<Meta>
　</HEAD>
　<BODY>
　　BODY之間則為主要語法所在，也是網頁的主要呈現部分。
　</BODY>
</HTML>

【標籤解說】以上看到的就是一篇最簡單架構的網頁。沒錯，網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：抬頭（HEAD）、文件本體（BODY）。也就是各位在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
在抬頭的部份<HEAD></HEAD>中，有另一組標籤<TITLE></TITLE>。打在<TITLE></TITLE>這裡面的文字會出現在瀏覽器視窗最上頭藍色部份裡，當作一篇網頁的主題。
您可能會發現，為什麼我一直沒提到<HTML></HTML>這一組標籤，嗯！因為它可有可無。這一組標籤是告訴瀏覽器說：我是一份HTML文件喔！也就是說它是一個網頁的格式啦！通常都包在網頁的最上下兩端，將所有的原始碼都包起來。
4.2 分隔標籤

【文字上的分隔標籤】或許你已經發現這個問題了：天啊！我不是在記事本裡排版排得很漂亮，為何透過瀏覽器看起來一切都走了樣？對啊！別太訝異，在網頁的編排裡，並不像漢書或WORD一樣，只要拼命按Enter鍵或空白鍵，便能完成分段或分行，因為，HTML語言是不認識我們所謂的Enter鍵或空白鍵，所以不管您按了多少次的空白或Enter，瀏覽器都會當作沒看見啦！

使用方法：強制斷行標籤<br>、強制分段標籤<p>
標籤解說：我們在寫文章時，有時候在特定的地方會強迫斷行（<br>），或是在寫完某一段的時候便會分段（<p>），寫網頁也一樣，而且更需要斷行及分段的功能，以免整個網頁看起來亂糟糟的。

使用範例：

原始碼	呈現結果
這是一個斷行的範例<br>看出來了嗎？	這是一個斷行的範例看出來了嗎？
這是一個分段的範例<p>基本上他會比斷行還多空出一行	這是一個分段的範例基本上分段會比斷行還多空出一行

【分隔線標籤】

使用方法：上一段文字內容<hr>下一段文字內容
標籤解說：利用<hr>這個標籤便可產生一條橫分隔線。另外，其有些屬性分別說明如下：

使用範例：

一般用法	尚未加任何屬性。
原始碼	普通分隔線<hr>
呈現結果	普通分隔線

顏色屬性	用法：<hr color="顏色碼或顏色名稱">
原始碼	橘色分隔線<hr color="#ff8000">
呈現結果	橘色分隔線

寬度屬性	用法：<hr width="寬度">，其單位為px（像素），寬度亦可用百分比來作設定，如50%即意為寬度佔螢幕50%。
原始碼	寬度為240px的分隔線<hr width="240">
呈現結果	寬度為240px分隔線

厚度屬性	用法：<hr size="厚度">
原始碼	厚度為5的分隔線<hr size="5">
呈現結果	厚度為5分隔線

位置屬性	用法：<hr align="水平對齊位置">，其設定值有三個，也就是置左align="left"、置中align="center"、置右align="right"
原始碼	靠右的分隔線<hr align="right">
呈現結果	靠右的分隔線

陰影屬性	用法：<hr noshade>，無設定值，只要將 noshade 加入即可，通常會配合顏色設定，效果較佳。
原始碼	實心分隔線（無陰影）<hr noshade>
呈現結果	實心分隔線（無陰影）

4.3 排版標籤

【文字置左、置中、置右】

使用方法：老實說，剛剛我們學過的分段標籤<p>再加上一些簡單的屬性設定，就可以讓其整個文字段落置左、置中或置右了，就如下表所示：
原始碼呈現結果
<p align="left">文字靠左</p>
文字靠左
<p align="center">文字置中</p>
文字置中
<p align="right">文字靠右</p>
文字靠右
標籤解說：嗯！祕訣就在於「align=對齊位置」而已啦！align是分段標籤<p>的屬性之一，這個屬性將來會常常在不同標籤中看到，它的功能是專門在設定「水平對齊位置」，其常見的設定值有三個，也就是置左（align="left"）、置中（align="center"）、置右（align="right"）。

【置中標籤】

使用方法：<center>這是置中</center>
標籤解說：這個標籤是最常用到的標籤了，除了文字，對於圖片、表格，任何可以顯現在網頁上的東西都可以置中喔！
使用範例：
原始碼呈現結果
<center>這是最中間</center> 這是最中間

【向右縮排標籤】

使用方法：<blockquote>要縮排的文字</blockquote>
標籤解說：利用<blockquote></blockquote>這個標籤可以將其包起來的文字，全部往右縮排。而且加一組標籤，往右縮排一單位，加兩組標籤，往右縮排兩單位，依此類推。
使用範例：
原始碼呈現結果
<blockquote>縮排1單位</blockquote>
縮排1單位
<blockquote><blockquote>縮排2單位</blockquote></blockquote>
縮排2單位

【保存原始格式標籤】

使用方法：<pre>文字內容<pre>
標籤解說：利用<pre></pre>這個標籤可以將其包起來的文字排版、格式，原封不動的呈現出來。算是相當好用的標籤之一。
使用範例：
原始碼呈現結果
<pre>
文　字
　格　式
</pre> 文　字　格　式

4.4 字體標籤

【標題標籤】

使用方法：<h1>標題內容</h1>
標籤解說：標題的大小一共有六種，兩個標籤一組，也就是從<h1>到<h6>，<h1>最大，<h6>最小。使用標題標籤時，該標籤會將字體變成粗體字，並且會自成一行。
使用範例：

原始碼呈現結果
<h1>標題一</h1> 標題一
<h2>標題二</h2> 標題二
<h3>標題三</h3> 標題三
<h4>標題四</h4> 標題四
<h5>標題五</h5> 標題五
<h6>標題六</h6> 標題六

【設定字體大小標籤】

使用方法：<font size=3>文字內容</font>
標籤解說：標題的大小一共有七種，也就是<font size=1>（最小）到<font size=7>（最大），另外，還有一種寫法：<font size=+1>文字內容</font>，其意思就是說：比預設字大一級。當然也可以 font size=+2（比預設字大二級），或是 font size=-1（比預設字小一級），以一般而言，預設字體多為 3。

使用範例：

原始碼	呈現結果
<font size=1>字體一</font> 或是 <font size=-2>字體一</font>	字體一
<font size=2>字體二</font> 或是 <font size=-1>字體二</font>	字體二
<font size=3>字體三</font> 或是 <font size=+0>字體三</font>	字體三
<font size=4>字體四</font> 或是 <font size=+1>字體四</font>	字體四
<font size=5>字體五</font> 或是 <font size=+2>字體五</font>	字體五
<font size=6>字體六</font> 或是 <font size=+3>字體六</font>	字體六
<font size=6>字體七</font> 或是 <font size=+4>字體七</font>	字體七

【字型變化標籤】

使用方法：<b>文字</b>
標籤解說：在文字標籤裡，對於文字的格式也有相當多的變化，如粗體、斜體...等，此外，也定義了一些現成的格式供編者使用，如『強調』、『原始碼』...等，當然，這只是方便您參考用，並無強迫說遇到原始碼就要加上『原始碼』的標籤。

使用範例：

原始碼	呈現結果
<b>粗體</b>	粗體
<i>斜體</i>	斜體
<u>底線</u>	底線
<sup>上標</sup>	上標
<sub>下標</sub>	下標
<tt>打字機</tt>	打字機
<blink>閃爍</blink>（ie沒效果）	閃爍
<em>強調</em>	強調
<strong>加強</strong>	加強
<samp>範例</samp>	範例
<code>原始碼</code>	原始碼
<var>變數</var>	變數
<dfn>定義</dfn>	定義
<cite>引用</cite>	引用
<address>所在地址</address>	所在地址

【文字顏色設定】

使用方法：<font color="#fefecb">文字顏色</font>
標籤解說：文字也可以設定顏色喔！至於顏色有哪些....這....哪天我心血來潮再來做個色彩對應表吧！

使用範例：

原始碼	呈現結果
<font color="#ff0000">紅</font>	紅色的字喔！
<font color="#ff8000">橙</font>	橙色的字喔！
<font color="#ffff00">黃</font>	黃色的字喔！
<font color="#00ff00">綠</font>	綠色的字喔！
<font color="#0080ff">藍</font>	藍色的字喔！
<font color="#0000a0">靛</font>	靛色的字喔！
<font color="#8000ff">紫</font>	紫色的字喔！
<font color="#000000">黑</font>	黑色的字喔！
<font color="#c0c0c0">灰</font>	灰色的字喔！

4.5 文字標籤

【文字字型設定】

使用方法：<font face="字型名稱">文字</font>
標籤解說：網頁上也可以使用字型喔！唯一的一個限制是：對方也要有該字型！否則看到的仍然還是細明體。另外要說明的是，這個標籤並無法保證在每個瀏覽器上都能正常的顯現，不過這並沒有關係，看不到特殊的字型時，瀏覽器仍會以細明體來顯示，所以不用怕會一團亂！另外，如果您的網頁中有加上這一行敘述<meta http-equiv="content-type" c>（指定網頁的語言格式，以後我會解釋），那麼，netscape可以正確顯示出中文，但英文無反應。若沒有加該行，那麼英文會正確顯示，但中文卻仍是細明體。至於 ie 系列，均能正常顯示。
使用範例：

原始碼呈現結果
<font face="標楷體">標楷體</font> 標楷體
<font face="華康儷中黑">華康儷中黑</font> 華康儷中黑

【特殊字元】

使用方法：
標籤解說：很多特殊的符號是需要特別處理的，比如說" < "、" > "這兩個符號若想要呈現在網頁上是沒有辦法直接打" < "的，要呈現" < "必須輸入編碼表示法：「<」，常用的如下：
使用範例：

原始碼呈現結果
( 代表一個不斷行空白)
< <
> >
& &
" "

【設定文字內定值大小】

使用方法：<basefont size="1~7">
標籤解說：這個標籤可以改變文字大小的內定值，直接加在<body>標籤之後就行了。一般而言，若是沒有特別設定，文字大小內定值預定值為3。

4.6 影像標籤

【影像標籤】在使用影像標籤時有兩件事值得注意一下，一是檔名，二是路徑。首先要注意的就是，檔名是否正確以及大小寫是否一致！圖檔名稱不正確，任電腦再厲害也找不到您要的圖，檔名大小寫不一致，如Image.gif、image.gif、image.GIF在自己的電腦中看都能正確的顯示，但是一但傳到網路上去時，因為系統不一樣的關係（電腦伺服器的作業系統可比個人用電腦的作業系統嚴謹多了）就變成三個不一樣的檔案了，所以，可別忽略檔名大小寫不一致的影響。另外一個就是路徑問題了，這個問題也不難，我們在稍後會提到。我們先來看看影像的標籤如何寫。

使用方法：<img src="boy.gif" alt="本站特約模特兒" align=right border=0 hspace=2 vspace=2 height=56 width=32>
標籤解說：目前常見的網頁圖形格式有兩種就是gif及jpg兩種格式。gif格式只有256色，不過色彩比較鮮豔乾淨漂亮，適合電腦美工圖案。而jpg格式的圖案是全彩失真壓縮，比較適合一大堆顏色的圖片，如照片就較適合用jpg格式來呈現。

使用範例：

基本用法	用法：<img src="圖檔名稱、路徑"> 顯示圖片最基本的方法（就是不加任何屬性啦！）其中 boy.gif 就是圖檔的檔名。
原始碼	<img src="images/G-FASE4.GIF">嗨！我是本站的模特兒喔！
呈現結果	嗨！我是本站的模特兒喔！

長寬設定	用法：<img src="圖檔" height="高度" width="寬度"> 設圖片的大小，其實不用設也可以，但是有設更好，可以加快瀏覽速度，因為瀏覽器就不用在那邊花時間算您的圖片有多大啦！此外您也可以自己隨意設定圖片大小。
原始碼	<img src="images/G-FASE4.GIF" height=32 width=32>
呈現結果

加上說明	用法：<img src="圖檔" alt="說明文字"> 滑鼠一到圖上時，說明文字就會自動出現。此外，在圖片未顯示出來或顯示不出來時，也會以這一段字代替，讓使用者知道這個未顯示出來的圖片究竟是幹嘛用的。
原始碼	<img src="images/G-FASE4.GIF" alt="本站特約模特兒">移到圖上看看。
呈現結果	移到圖上看看。

圖片位置	用法：<img src="圖檔" align="位置"> 圖片位置設定！可以靠左放：align=left、靠上align=top、靠下align=bottom、垂直置中align=middle，其中靠左放可以造成『文繞圖』的效果。
原始碼	<img src="images/G-FASE4.GIF" align=right>嗨！我往右邊靠！
呈現結果	嗨！我往右邊靠！
原始碼	<img src="images/G-FASE4.GIF" align=left>嗨！我往左邊靠！
呈現結果	嗨！我往左邊靠！
原始碼	<img src="images/G-FASE4.GIF" align=top>文字對齊我頭頂！
呈現結果	文字對齊我頭頂！
原始碼	<img src="images/G-FASE4.GIF" align=bottom>文字對齊我腳底！
呈現結果	文字對齊我腳底！
原始碼	<img src="images/G-FASE4.GIF" align=middle>文字對齊我中間！
呈現結果	文字對齊我中間！
原始碼	<img src="images/G-FASE4.GIF" align=absmiddle>文字對齊我絕對中間！
呈現結果	文字對齊我絕對中間！

邊框設定	用法：<img src="圖檔" border="邊框粗細"> 設定邊框大小，通常都設成 0 感覺比較美觀啦！因為內定的框框實在是不怎麼漂亮....。尤其在連結時，設框框簡直是醜斃了...。
原始碼	<img src="images/G-FASE4.GIF" border="4">
呈現結果

左右間距	用法：<img src="圖檔" hspace="離左右物件的距離"> 離文字的水平距離，通常多少也設一點，以免靠文字太近，看起來才不會有太擠的感覺。
原始碼	左邊的字<img src="images/G-FASE4.GIF" hspace="15">右邊的字
呈現結果	左邊的字右邊的字

上下間距	用法：<img src="圖檔" vspace="離上下物件的距離"> 離文字的垂直距離，通常多少也設一點，以免靠文字太近，看起來才不會有太擠的感覺。
原始碼	上面的字<br><img src="images/G-FASE4.GIF" vspace="15"><br>下面的字
呈現結果	上面的字下面的字

由於此網頁有用css控制版面圖文，故在netscape下觀看，會稍有不正確。

【網頁影像重要觀念】

關於路徑：現在我們來談談圖片路徑的事，路徑不對，不管您的網頁名稱寫的多正確也沒用，因為瀏覽器無法尋著您的路徑去找到該有的圖片，所以，我們來看看該如何正確的使用路徑。有些人並不喜歡將網頁及圖通通放在同一個目錄下，比如說有人將圖檔全放在c:\images裡，而網頁檔放在c:\demo裡，這樣子的話，我們該如何正確的寫圖片的路徑呢？我將幾種常見的情形整理成下表：

html檔的位置	圖檔的位置	寫法	情形說明
c:\demo	c:\demo	<img src="tad.gif">	圖文均在同一目錄
c:\demo	c:\demo\images	<img src="images/tad.gif">	圖在網頁下一層目錄
c:\demo	c:\	<img src=" ../tad.gif">	圖在網頁上一層
c:\demo	c:\image	<img src=" image/tad.gif">	圖文在同一層但不同目錄

或許有人看到不明就理，我來說明一下，「../」是回到上一層目錄的意思。「images/」則是進入下一層目錄image之意，而「images/」的意思就是，回到上一層目錄，然後再進入目錄images中。以上我們使用的均為「相對路徑」的概念。

影像單位：或許您會常常看到px這個單位，沒錯，這是我們在製作最常用的一個單位了。這個單位完整的寫法是「pixels」，我們稱之為「像素」。像素，是螢幕上的一個小光點，然而這一小光點的大小，並非是固定的，舉個例子而言，螢幕本身十五吋，不會因為你的任何設定而變成十七吋。但是，其解析度是可以改變的，我們常見的解析度有以下幾種：「640 ×480」、「800 ×600」、「1024 ×768」。舉其中之一的640 ×480來說，其代表的就是在螢幕上有寬640個光點，高有480光點，若是我們將解析度調整為800 ×600其寬勢必要從640變成800個光點，也因此，該光點便會變小一點，所以，我們看起來就會覺得解析度調高後，螢幕內的東西，變得小小的，很精緻，那就是因為光點變小的原因。

影像格式：網頁用的圖檔目前只有gif格式（即副檔名為gif的圖檔，如：bg.gif）以及jpg格式（即副檔名為jpg的圖檔，如：bg.jpg）為一般的瀏覽器所接受。其他如bmp格式或是pcx格式都是無法在網頁上使用的，若非得要用，那就利用影像繪圖軟體來作格式的轉換吧！

圖檔範例	說明
	gif格式的圖形只能以256個顏色顯示，雖然其色彩較少，但顏色鮮豔亮麗，若是圖形顏色不多，用gif格式存檔會較漂亮。
	jpg格式的圖形是以全彩顯示，適合用在相片或是漸層顏色的圖片上，壓縮比例以75%為適中。

4.7 背景標籤

【背景標籤】說穿了，背景標籤只有<BODY>這個標籤，其餘的效果，只要加上一些簡單的屬性便可做到。

使用方法：<body bgcolor="#ffffff" background="bg.jpg">

標籤解說：這個標籤其實應該老早就要講了，畢竟它是構成網頁不可或缺的基本要素之一（哎哎哎...現在放馬後砲有什麼用！）。我們背景顏色或圖片的設定以及連結字體的顏色，通通都放在<body>這標籤裡面。我就其屬性來一一解說：

背景顏色	用法：<body bgcolor="顏色碼"> 設定背景顏色。有人會說：『我已經設定了背景圖片，那背景顏色還有用嗎？』當然有用！當使用者連結到貴站時，若背景圖案還沒傳輸完之前（有的背景圖蠻大的），就會先顯現背景顏色，您說，是不是比一片灰灰的好看多了呢！
原始碼	<html> <head> <title>這是標題</title> </head> <body bgcolor="#f9e6a2"> 這裡是本文區 </body> </html>
呈現結果	按下此處觀看結果

背景圖案	用法：<body background="圖檔名稱、路徑"> g設定背景圖案。圖檔可以是jpg或gif格式的圖檔，我建議：圖檔不要太大，否則網頁載入會蠻慢的。
原始碼	<html> <head> <title>這是標題</title> </head> <body background="bg.jpg"> 這裡是本文區 </body> </html>
呈現結果	按下此處觀看結果

【內文、連結文字顏色設定】

使用方法：<body text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000>

標籤解說：用字體標籤中的顏色屬性，可以設定文字的顏色，不過，卻沒有提到文字的顏色內定值該如何修改，這個<body>標籤中，便有設定內文、連結等文字的顏色內定值功能。用法如下：

內文顏色	用法：<body text="顏色碼"> 設定一般文字顏色，也就是說，若沒有特別去設定文字顏色的話，瀏覽器就會自動顯現您所設定的顏色。
原始碼	<html> <head> <title>這是標題</title> </head> <body text="#0906a2"> 這裡是本文區 </body> </html>
呈現結果	按下此處觀看結果

連結顏色	用法：<body link="顏色碼"> 設定「連結」的顏色。只要是有連結的地方就會出現你指定的顏色，當然，如果按下連結後，那又會變成另一個顏色了，這底下會說明。
原始碼	<html> <head> <title>這是標題</title> </head> <body link="#ff6600"> <a href="index.htm">連結文字</a> </body> </html>
呈現結果	按下此處觀看結果（設定連結為橘色）

連結時顏色	用法：<body alink="顏色碼"> 設定「按下連結」的顏色，也就是當您滑鼠按下那連結的瞬間所呈現的顏色。
原始碼	<html> <head> <title>這是標題</title> </head> <body alink="#0099ff"> <a href="index.htm">連結中文字</a> </body> </html>
呈現結果	按下此處觀看結果（滑鼠點下連結瞬間才會出現我們設定的淺藍色）

已連結顏色	用法：<body vlink="顏色碼"> 設定「按下鏈結後」的顏色，也就是如果該連結已經有被按過了，那麼就會呈現的顏色。如此的做法，是要讓使用者容易識別到底哪些連結有去過了，哪些沒去過。
原始碼	<html> <head> <title>這是標題</title> </head> <body vlink="red"> <a href="demo1-10-6.htm">連結文字</a> </body> </html>
呈現結果	按下此處觀看結果（設定已執行過的連結以紅色顯示）

4.8 連結標籤

【WWW連結標籤基本概念】

連結基本概念：一般而言，所謂連結就是，在網頁中有些字會有特別的顏色，而且字的底下會有條線，當游標移到那些字上時，會變成手指形狀，按下去，則會連到別的文章或網站，就像這樣（以上這段是給超級新手看的...）。扯到連結，最基本來看有『內部連結』及『外部連結』，所謂『內部連結』就是自己網站間網頁的連結，至於外部連結我們稍後再來討論。要了解內部連結，首先必須先了解一下這兩種東西，一個是『相對路徑』，一個是『絕對路徑』。現在假設一個情形：我們在自己的電腦裡設計網頁，所有網頁相關的檔案我們通通放在 c:\www 裡面，現在假設 c:\www 裡面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 這四個檔案。ok！現在我們想在 index.htm 裡面設一個連結，能夠按一下就連到 text1.htm，那我們該怎麼做呢？基本上，有兩中方式可以做到，在 index.htm 裡面加上下面任一敘述：
<a href="/c|/www/text1.htm"> 這就是『絕對路徑』
<a href="text1.htm"> 這就是『相對路徑』
瞧出什麼端倪了沒有？嗯嗯....沒錯，『絕對路徑』要給電腦一個非常詳盡的位置，讓電腦尋著這路徑去找到檔案。而『相對路徑』就簡單多啦！如果沒有特別指定，他就會直接在 index.htm 的所在目錄下找，也就是在 c:\www 底下去找text1.htm。如果說，今天我們將 c:\www 裡所有的檔案都上傳到網路上的網頁伺服器（總不能做好了只給自己看吧！），且該伺服器是別人的電腦，而非你自己架設的主機，那麼問題就來了！你猜，哪一種連結會出問題？呵呵...答案是『絕對路徑』，您猜對了嗎？為什麼說『絕對路徑』會出問題呢？因為，當您將檔案上傳到網路上時，您的整個網頁目錄架構一定會變，到時候，電腦可能找不到 c:\ （尤其是unix系列的主機）更可能找不到 www 這目錄（有些會規定要放在特定的目錄下才能顯示網頁），所以說，沒事的話，盡量用『相對路徑』來作連結吧！好寫又不容易出錯。另外一個情形是：為了整理方便，有些網友喜歡將圖檔通通放到同一個目錄下，如：c:\www\gif\ 底下放進了p1.gif 、 p2.gif兩個圖，而index.htm 、 text1.htm 依舊在 c:\www 底下。現在我們想在 index.htm 下設個連結到 p1.gif 這圖檔（連結不限於只能連html檔，圖檔、文字檔均可），那我們又該如何來使用『相對路徑』呢？他們又不在『同一個目錄』下...？
<a href="/c|/www/gif/p1.gif"> 這是『絕對路徑』的寫法
<a href="gif/p1.gif"> 這是『相對路徑』的寫法
如何？不難吧！（只是字有點多，看到腦子發脹）

總整理：很亂嗎？嗯...看看這表，或許會清楚些。

相對路徑表示方式	代表連結位置
<a href="text1.htm">	text1.htm在目前的目錄中（就例子而言，就是在c:\www中）
<a href="docs/text1.htm">	text1.htm在名為docs的次目錄中（就本例而言，就是在c:\www\docs中）
<a href="../text1.htm">	text1.htm在目前目錄的上一層目錄中（就本例而言，就是在c:\底下了）

【網頁內部的連結】

使用方法：
- 先在欲連結處作記號：<a name="here1">這裡是你想連結的點</a>
- 設定連結：<a href="#here1">連結</a>
標籤解說：有時候，當某頁的內容很多時，我們可以利用網頁的內部連結，來使使用者快速的找到資料。其原理不過是：在欲連結處做個記號（網頁的任何地方都可以喔！），然後，連結時就尋這記號，就可以快速找到資料。很簡單吧！

使用範例：

範例	第一步驟	第二步驟
www連結標籤基本概念	<a name="m1">欲連結的位置</a>	<a href="#m1">www連結標籤基本概念</a>
網頁內部的連結	<a name="m2">欲連結的位置</a>	<a href="#m2">網頁內部的連結</a>
網頁外部的連結	<a name="m3">欲連結的位置</a>	<a href="#m3">網頁外部的連結</a>

【網頁外部的連結】

標籤解說：連結到外面去，可以擴充您網站的實用性及充實性，也正因這功能，才造就了www五彩繽紛的世界。由於網路上的服務五花八門，所以不同的服務有不同的連結方法，我將之整理在下表。

使用範例：

網站連結	好站	<a href="http://sunspot-design.com">好站</a>
電子郵件連結	寫情書給我	<a href="mailto:tad@ms1.url.com.tw">寫情書給我</a>
ftp連結	下載檔案	<a href="ftp://ftp.ntu.edu.tw">下載檔案</a>
news連結	seednet news服務	<a href="news:news.seed.net.tw">seednet news服務</a>
gopher連結	seednet gopher服務	<a href="gopher://gopher.seed.net.tw/">seednet gopher服務</a>
bbs連結	seednet gopher服務	<a href="telnet://bbs.seed.net.tw/">seednet bbs服務</a>

【連結標籤的參數】

使用方法：在連結後面加入 target=_參數
標籤解說：連結的參數並不多，常見的大概就屬 target 這參數了，target 的意思是『目標』，也就是網頁連結的指向目標，這參數在框窗（frame）裡尤為重要！
使用範例：
- target=框窗名稱：
  這在『框架標籤』中也有提到，而且也只有在框架（框窗 or frame）中才用得到。正常而言，框窗有各自的名稱，因此，我們可以利用此標籤，來指定連結的內容顯示到哪一個框窗中。
- target=_blank：
  將連結的畫面內容，開在新的瀏覽視窗中。
- target=_parent：
  將連結的畫面內容，當成文件的上一個畫面。
- target=_self：
  將連結的畫面內容，顯示在目前的視窗中。
- target=_top：
  這個參數可以解決新連結的畫面內容，被舊框窗包圍的困擾，使用這參數，會將整個畫面重新顯示成連結的畫面內容。

4.9 表格標籤

【網頁中的表格觀念】舉個例子來說，如果今天我們要做一個3欄2列的表格，在WORD中，只要設定表格為3欄、2列就完成了，不過，在網頁中做一個3欄2列的表格，可是要分成好幾個步驟的，第一個步驟，利用<TABLE></TABLE>標籤告訴電腦我要做一個表格；第二個步驟，利用一組<TR></TR>標籤先做一個橫列，然後在橫列中利用三組<TD></TD>標籤再分出三欄；第三個步驟，重複第二個步驟，再做一橫列然後再分三欄，如此才能得到一個3欄2列的表格。聽不太懂嗎？沒關係，以下咱們就來慢慢的看個仔細：

首先我們來看一個最簡單的表格：
原始碼呈現結果
<TABLE BORDER=1>
<TR><TD>1</TD></TR>
</TABLE>

1
利用<TABLE>這個標籤來告訴電腦，這是一個表格，至於 BORDER=1 這參數是設定此表格的框線粗細為 1。一組<TR></TR>是設定一橫列的開始。一組<TD></TD>則是設定一個欄位。當然，文字就是要擺在這裡面。
現在我們再來增加二個格子：
原始碼呈現結果
<TABLE BORDER=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>

1 2 3
看見沒有，<TR></TR>沒有增加，<TD></TD>卻增加了二組。那如果我要再加上一列呢？很簡單，就像這樣：
原始碼呈現結果
<TABLE BORDER=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>

1 2 3
4 5 6

【合併表格欄位】

並非所有的表格都是規規矩矩的只有幾欄、幾列而已，有時候，我們還會希望能夠「合併欄位」，讓表格更美觀、更實用一點，而談到「合併欄位」，我們就必須知道，合併的方向有兩種：一種是上下合併（也就是橫列間的合併），一種是左右合併（也就是直欄間的合併），這兩種合併方式各有不同的屬性設定方法。
左右欄位合併：基本上，您的表格已經學會囉！接下來，咱們就來看看，如何將 1、2、3 格通通合併變成一大格：
原始碼呈現結果
<TABLE BORDER=1>
<TR><TD COLSPAN=3>1</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>

1
4 5 6
您應該會發現，怎麼2、3都消失了？只剩下1，而且該欄的<TD>標籤還多了一個陌生的臉孔COLSPAN="3"，沒錯，這就是「左右欄位合併」的屬性，COLSPAN="3"的意思就是「這個欄位左右橫跨了3個欄位」，也正因如此，本來的兩個<TD>都可以省掉了，因為都被併掉了嘛！
上下欄位合併：學會了左右合併！接下來，咱們就來看看，如何上下合併，將 1、4格通通合併變成一大格：
原始碼呈現結果
<TABLE BORDER=1>
<TR><TD ROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>5</TD><TD>6</TD></TR>
</TABLE>

1 2 3
5 6
有了上一次的經驗後，我們就知道，要合併欄位就一定有些欄位會被「犧牲」掉（也就是那些被合併的欄位啦！），這次我們要「上下合併」，我們將1與4合併成一個欄位，那麼被犧牲的是哪一個欄位呢？沒錯就是下面那一個倒楣的4，我們看看上圖，果然4已經刪掉了，而在1的<TD>標籤中則多了個生面孔ROWSPAN，這就是「上下欄位合併」的屬性，ROWSPAN=2的意思就是「這個欄位上下連跨了2個欄位」，其結果如下：

【表格欄位對齊位置設定】

我可以自己設定表格的大小嗎？當然可以，您可以自由設定表格的「寬」及「高」喔！我們來製作一個寬100、高60的表格，做法如下：
原始碼呈現結果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD>1</TD></TR>
</TABLE>
1
哎呀！怎麼 1 老是在表格的左邊呢？可以弄到中間嗎？當然可以，只要在<TD>加入 ALIGN=CENTER 這參數即可：
原始碼呈現結果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD ALIGN=CENTER>1</TD></TR>
</TABLE>
1
此外，利用 ALIGN=RIGHT可以讓表格中物件置右、利用 ALIGN=LEFT可以讓表格中物件置左（預設值），至於為什麼要加在<TD>中呢？因為，<TD>是一個欄位的意思，我們要指定在這欄位中的東西要置中或置左置右，就必須將ALIGN加在<TD>中。
既然可以置中，那麼也可以控制表格內文字靠上方、靠下方嗎？可以的，只要利用 VALIGN=TOP 這種屬性即可讓表格內物件靠上方對齊。
原始碼呈現結果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD ALIGN=CENTER VALIGN=TOP>1</TD></TR>
</TABLE>
1
利用VALIGN=MIDDLE可以讓表格中物件垂直置中（預設值），VALIGN=BOTTOM可以H讓表格中物件靠下方。

【表格背景、底色設定】

那麼表格可以設定底色嗎？可以的不但表格可以，您也可以指定某欄或某列的顏色，方法和加背景顏色一樣，利用BGCOLOR="顏色碼"就行了。底下是指定整格表格背景顏色的方法：
原始碼呈現結果
<TABLE BORDER="1" BGCOLOR=#FFCC33>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
將BGCOLOR="顏色碼"加在<TR>中，可以指定「一列」的背景顏色：
原始碼呈現結果
<TABLE BORDER="1" >
<TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
將BGCOLOR="顏色碼"加在<TD>中，可以指定「一欄」的背景顏色：
原始碼呈現結果
<TABLE BORDER="1" >
<TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
表格除了可以設定底色外，也可以用圖片來作背景嗎？當然可以，方法一樣簡單，只要將BACKGROUND="圖片名稱"加到表格中就行了。和表格背景顏色一樣，不但表格可以設定背景圖片，您也可以指定某欄或某列的背景圖片：
原始碼呈現結果
<TABLE BORDER="1" BGCOLOR=#FFCC33>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
將BACKGROUND="圖片名稱"加在<TD>中，可以指定「一欄」的背景顏色：
原始碼呈現結果
<TABLE BORDER="1">
<TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4

【表格框線設定】

如何設定表格粗細？只要利用BORDER="粗細值"就行了。
原始碼呈現結果
<TABLE BORDER=5>
<TR><TD>1</TD></TR>
</TABLE>

1
如何設定表格顏色？只要利用BORDERCOLOR="顏色碼"就行了。
原始碼呈現結果
<TABLE BORDER="5" BORDERCOLOR="#0080FF">
<TR><TD>1</TD></TR>
</TABLE>

1
另外，我們也可以設定表格的陰影、亮面顏色，讓表格看起來更有立體感喔！只要利用 BORDERCOLORLIGHT="#顏色碼"（亮面設定） BORDERCOLORDARK="顏色碼"（暗面設定）就行了。
原始碼呈現結果
<TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97">
<TR><TD>1</TD></TR>
</TABLE>

1

【表格欄距設定】

我們可以利用CELLPADDING屬性自由設定表格內文距離格線的距離，這個屬性很好用，保持適當的距離，看起來比較舒服。一般而言內定值為2，不過我建議設定為4比較漂亮。
原始碼呈現結果
<TABLE BORDER="1" CELLPADDING="10">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>

1 2
我們可以利用CELLSPACING屬性設定表格欄位格線之間的距離。一般而言內定值為2，不過我通常習慣設為 0 。
原始碼呈現結果
<TABLE BORDER="1" CELLSPACING="5">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>

1 2

4.10 序列標籤

【無序標籤】

序列標籤基本上可分為兩種，一種是「無序條列」，一種是「有序條列」。所謂「無序條列」當然就是意指各條列間並無順序關係，純粹只是利用條列式方法來呈現資料而已，此種無序標籤，在各條列前面均有一符號以示區隔。至於「有序條列」就是指各條列之間是有順序的，從1、2、3…一直延伸下去。
我們先來看看「無序列表標籤」如何使用：
原始碼呈現結果
<UL>
<LI>姓名：傑克昇
<LI>生日：1974/11/21
<LI>星座：天蠍座
</UL>
姓名：傑克昇
生日：1974/11/21
星座：天蠍座
其中<UL>標籤即為「無序列表標籤」，每增加一列內容，就必須加一個<LI>。
前面的符號一定是要圓形的嗎？不，我們可以加入TYPE="形狀名稱"屬性來改變其符號形狀，一共有三個選擇：DISK（實心圓）、SQUARE（小正方形）、CIRCLE（空心圓）三種（由於本頁使用CSS故僅於Netscape看得出效果。）：
原始碼呈現結果
<UL TYPE="CIRCLE">
<LI>姓名：傑克昇
<LI>生日：1974/11/21
<LI>星座：天蠍座
</UL>
姓名：傑克昇凱
生日：1974/11/21
星座：天蠍座

【有序標籤】

接下來，我們來看看「有序列表標籤」如何使用：
原始碼呈現結果
<OL>
<LI>姓名：傑克昇
<LI>生日：1974/11/21
<LI>星座：天蠍座
</OL>
姓名：傑克昇
生日：1974/11/21
星座：天蠍座
其中<OL>標籤即為「有序列表標籤」，每增加一列內容，就必須加一個<LI>。
和無序列表標籤一樣，我們也可以選擇不同的符號來顯示順序，一樣是用TYPE屬性來作更改，一更有五種符號：1（數字）、A（大寫英文字母）、a（小寫英文字母）、I（大寫羅馬字母）、i（小寫羅馬字母）等五種：
原始碼呈現結果
<OL TYPE="A">
<LI>姓名：傑克昇
<LI>生日：1974/11/21
<LI>星座：天蠍座
</OL>
姓名：傑克昇
生日：1974/11/21
星座：天蠍座
另外，我們亦可指定序列起始的數目，其方法如下：
原始碼呈現結果
<OL START="8">
<LI>姓名：傑克昇
<LI>生日：1974/11/21
<LI>星座：天蠍座
</OL>
姓名：傑克昇
生日：1974/11/21
星座：天蠍座

【定義列表標籤】

接下來我們要說明的這個標籤，是「定義列表標籤」也是屬於序列標籤之一。我們先來舉個例子，我們常常會在文章中看見這樣的格式：

CSS（Cascading style sheet）

CSS是由W3C於1996年12月所公佈的一項新技術，什麼叫做Cascading style sheet？簡單說來他是一種具有階層性的形式設定，能夠讓網頁設計者在設計網頁時，對於網頁上的任何物件均有更佳的操控性…

網頁裡也有可以做到這種效果的標籤喔！現在要來跟各位說的就是這個標籤。咱們先來看看這標籤的用法：

我們先來看看「定義列表標籤」如何使用：
原始碼呈現結果
<DL>
<DT>小標題
<DD>標題的內容說明
</DL> 小標題標題的內容說明

4.11 表單標籤

【表單的用途】對於一般的網頁設計初學者而言，表單功能其實並不常用，因為表單通常必須配合著CGI、JAVA Script程式或是ASP程式來運作，不然表單單獨存在的意義並不大。不過，一旦有機會將表單運用到網頁中時，您的網頁將擺脫單向呈現，而開始邁入和使用者互動的階段喔！本單元純粹以介紹各式表單為主，至於一些CGI或ASP觀念在此我就不提出了，因為提供零碎的觀念，倒不如去看看專門介紹CGI的書籍來的妥當。

【各種輸入類型】

文字輸入列：每個表單之所以會有不同的類型，原因就在於TYPE="表單類型"設定的不同而已，我們就先來看看第一個類型：文字輸入列。文字輸入列的形態就是TYPE="TEXT，其使用方法如下：
呈現結果姓名：
原始碼 <FORM>
姓名：<INPUT TYPE="TEXT" NAME="NAME" SIZE="20">
</FORM>
其有下列可設定之屬性：
- NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
- SIZE="數值"，是設定此一欄位顯現的寬度。
- VALUE="預設內容"，是設定此一欄位的預設內容。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- MAXLENGTH="數值"，是設定此一欄位可設定輸入的最大長度。
單選核取表單：利用TYPE="RADIO"就會產生單選核取表單，單選核取表單通常是好幾個選項一起擺出來供使用者點選，一次只能從中選一個，故為單選核取表單。
呈現結果性別：男女
原始碼 <FORM>
性別：
男 <INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY">
女 <INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL">
</FORM>
其有下列可設定之屬性：
- NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
- VALUE="內容"，是設定此一欄位的內容、值或是意義。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- CHECKED，是設定此一欄位為預設選取值。
複選核取表單：利用TYPE=" CHECKBOX "就會產生複選核取表單，複選核取表單通常是好幾個選項一起擺出來供使用者點選，一次可以同時選好幾個，故為複選核取表單。
呈現結果喜好：電影看書
原始碼 <FORM>
喜好：
<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">電影
<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看書
</FORM>
其有下列可設定之屬性：
- NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
- VALUE="內容"，是設定此一欄位的內容、值或是意義。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- CHECKED，是設定此一欄位為預設選取值。
密碼表單：利用TYPE=" PASSWORD "就會產生一個密碼表單，密碼表單和文字輸入表單長得幾乎一樣，差別就在於密碼表單在輸入時全部會以星號來取代輸入的文字，以防他人偷窺。
呈現結果請輸入密碼：
原始碼 <FORM>
請輸入密碼：<INPUT TYPE="PASSWORD" NAME="INPUT">
</FORM>
其有下列可設定之屬性：
- NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
- SIZE="數值"，是設定此一欄位顯現的寬度。
- VALUE="預設內容"，是設定此一欄位的預設內容，不過呈現出來仍是星號。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- MAXLENGTH="數值"，是設定此一欄位可設定輸入的最大長度。
送出按鈕：通常我們表單填完之後，都會有一個送出按鈕以及清除重寫的按鈕，分別是利用TYPE=" SUBMIT "及TYPE=" RESET "來產生，相當的簡單易用。
呈現結果
原始碼 <FORM>
<INPUT TYPE="SUBMIT" VALUE="送出資料">
<INPUT TYPE="RESET" VALUE="重新填寫">
</FORM>
其有下列可設定之屬性：
- NAME="名稱"，是設定此一按鈕的名稱。
- VALUE="文字"，是設定此一按鈕上要呈現的文字，若是沒有設定，瀏覽器也會自動替您加上「送出查詢」、「重設」等字樣。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
按鈕元件：表單中或是JAVA SCRIPT常會用到按鈕來作一些效果，因此，我們可以利用TYPE=" BUTTON "來產生一個按鈕，相當簡單。
呈現結果請按下按鈕：
原始碼 <FORM>
請按下按鈕：<INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意">
</FORM>
其有下列可設定之屬性：
- NAME="名稱"，是設定此一按鈕的名稱。
- VALUE="文字"，是設定此一按鈕上要呈現的文字。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
隱藏欄位：表單中有時有些東西因為某些因素，不想讓使用者看到，但因程式需要卻又不得不存在，此時，我們就可以利用TYPE=" HIDDEN "來產生一個隱藏的欄位。
呈現結果隱藏欄位：
原始碼 <FORM>
隱藏欄位：<INPUT TYPE="HIDDEN" NAME="NOSEE" VALUE="看不到">
</FORM>
其有下列可設定之屬性：
- NAME="名稱"，是設定此一欄位的名稱。
- VALUE="文字"，是設定此一欄位的值、文字或意義。

【大量文字輸入元件】

有時候我們會希望讓使用者輸入比較大量的文字，此時，文字輸入列就顯得不敷使用，因此我們就可以利用<TEXTAREA></TEXTAREA>來產生一個可以輸入大量文字的元件，夾在兩個標籤中的文字會出現在框框中，可作為預設文字。
呈現結果請輸入您的意見：

原始碼 <FORM>
請輸入您的意見：<BR>
<TEXTAREA NAME="TALK" COLS="20" ROWS="3"></TEXTAREA>
</FORM>
其有下列可設定之屬性：
- NAME="名稱"，是設定此一欄位的名稱。
- WRAP="設定值"，是設定此一欄位的換行模式。設定值有三種：OFF（輸入文字不會自動換行）、VIRTUAL（輸入文字在螢幕上會自動換行，不過若是使用者沒有自行按下ENTER換行，送出資料時，也視為沒有換行）、PHYSICAL（輸入文字會自動換行，送出資料時，會將螢幕上的自動換行，視為換行效果送出）。
- COLS="數值"，是設定此一欄位的行數（橫向字數）。
- ROWS="數值"，是設定此一欄位的列數（垂直字數）。

【下拉式選單】

下拉式選單令整個網頁看起來有很專業的感覺，我們只要利用<SELECT NAME="名稱">便可以產生一個下拉式選單，另外，還需要配合<OPTION>標籤來產生選項，這樣才算完整喔！

呈現結果	您喜歡看書嗎？：
原始碼	<FORM> 您喜歡看書嗎？： <SELECT NAME="LIKE"> <OPTION VALUE="非常喜歡">非常喜歡 <OPTION VALUE="還算喜歡">還算喜歡 <OPTION VALUE="不太喜歡">不太喜歡 <OPTION VALUE="非常討厭">非常討厭 </SELECT> </FORM>

其有下列可設定之屬性：

SIZE="數值"，是設定此一欄位的大小，預設值為1，若是您的選項有四個，然後您將SIZE設成4，那麼，下拉式選單便會變成選項方塊，將四個選項一起呈現在方塊中。
MULTIPLE，是設定此一欄位為複選，可以一次選好幾個選項。

4.12 框架標籤

【框架的基本概念】

首先，各位先看看右手邊這張圖，我將利用這張圖來作解說，這樣子，講起來可能會清楚一點。 OK！我們可以看見，右邊的這個視窗，一共分為 1 、 2 、 3 三個框架，每一個框架，各有其顯示的內容分別是a.htm、b.htm、c.htm三個檔案。然而左下角的那個 index.htm 是做什麼用的呢？
原來，左下角的這個檔案 index.htm，就是要告訴電腦，我們要將畫面分割成這樣，也就是說，所有Frame的標籤，其實都只擺在 index.htm 這個檔案裡。（當然，不是檔名一定要叫做 index.htm 取其他檔名也是可以的。）
這樣明白了嗎？總之，您要分割幾個框框，就一定會有幾個對應的html檔案（假如您要分割100個框框，就要有100個html檔就對了。），另外，還會多一個檔案是來告訴電腦要如何分割的。（也就是例中的 index.htm 檔啦！）

【開始分割】

別急、別急，分割視窗可是一門學問，要分割也是要一步一步來的。看看剛剛那例子，想像畫面是一個蛋糕，你要怎麼割，才能割成那樣呢？
原始碼呈現結果
<HTML>
<HEAD>
<TITLE>框窗實作</TITLE>
</HEAD>
</HTML>
各位會發現，奇怪，在上面的語法中，怎麼都沒見到<BODY></BODY>熟悉的身影？呵呵...沒錯，它已經被待會兒要加進去的<FRAMESET></FRAMESET>標籤給取代了！也就是說，如果我們要分割畫面，就要先用<FRAMESET>標籤告訴電腦說：『喂！我要開始分割了！』此時，<BODY>是派不上用場的，所以躲到一旁涼快去了！
現在開始動手割割看囉！我們先將畫面分成左右兩邊（左邊就是框窗 1 了，右邊就暫定為 2 等一下還要分割呢！），如下圖：
原始碼呈現結果
<HTML>
<HEAD>
<TITLE>框窗實作</TITLE>
</HEAD>
<FRAMESET COLS="120,*" >
　<FRAME SRC="a.htm" NAME="1">
　<FRAME SRC="b.htm" NAME="2">
</FRAMESET>
</HTML>
在<FRAMESET>中，我們要告訴電腦到底是要左右分（COLS）？還是上下分（ROWS）。一開始我們是左右分，所以我們寫成<FRAMESET COLS="120,*" >。COLS="120,*" 就是說，左邊那一欄強制定為 120點，右邊則隨視窗大小而變。除了直接寫點數外，我們亦可用百分比來表示，例如COLS="20%,80%"也是可以的。

然後，再將右邊的框窗再割成上下兩個畫面（也就是框窗 2 和 3 了）。如下圖：

原始碼

呈現結果

看見了沒？原本的<FRAME SRC="b.htm" NAME="2">（在第 3 點的語法中）被另一組<FRAMESET ROWS="100,*" >所取代了！所以要注意喔！第二組<FRAMESET ROWS="100,*" >是被第一組<FRAMESET COLS="120,*" >所包圍起來的喔！（亂七八糟了對不對？）
呵呵...不知不覺就大功告成了，其實只要將最後完成的那些語法存成 index.htm，然後再準備三個檔 a.htm 、b.htm 、c.htm那麼就完工囉！當然，這是一個最陽春的分割法，我會再將一些進階的標籤在底下一一說明。

【其他標籤參數說明】

COLS="120,*"
就是垂直切割畫面啦！你可以一次切成左右兩個畫面，當然也可以切成三個，很簡單只要寫成 COLS="30,*,50" （數字隨便您自己調整啦！），依此類推，四個以上當然就是四組數字啦！
ROWS="120,*"
就是橫向切割畫面，也就是將畫面上下分開，切法同上。
frameborder=0
設定框架的邊框，其值只有 0 和 1 ， 0 就是不要邊框， 1 就是要顯示邊框。邊框是無法調整粗細的。
framespacing=5
表示框架與框架間的保留空白的距離，以免看起來太擠。

[td][/td]

SRC="a.htm"
設定此框架中要顯示的網頁名稱，每個框架一定要對應一個網頁，否則就會產生錯誤，這裡就是要您填入對應網頁的名稱。（如果該網頁在不同目錄，記得路徑要寫清楚）
NAME="1"
設定這個框架的名稱，這樣才能指定框架來作連結，所以一定要設定喔！當然名稱隨你高興取名。
frameborder=0
設定框架的邊框，其值只有 0 和 1 ， 0 就是不要邊框， 1 就是要顯示邊框。邊框是無法調整粗細的。
scrolling="no"
設定是否要顯示捲軸，YES是要顯示捲軸，NO是無論如何都不要顯示，AUTO是視情況顯示。
noresize
設定不讓使用者可以改變這個框框的大小，如果沒有設定這個參數，使用者可以很容易的拉動框架，改變其大小。
marginhight=2
表示框架高度部份邊緣所保留的空間。
marginwidth=2
表示框架寬度部份邊緣所保留的空間。

【相關用法】

◆ <noframe>

使用方法：<noframe>請換有支援Frame功能的瀏覽器</noframe>
標籤解說：有些瀏覽器較為老舊，無法顯示Frame的功能，因此，就要使用此標籤，讓這些網友知道，該換換瀏覽器了。或者，你也可以在這標籤中，擺上沒有Frame語法的網頁標籤，那麼，沒有支援Frame功能的瀏覽器，便會自動顯示沒有Frame語法的網頁。

◆ target=框窗名稱

使用方法：<A HREF="d1-1.htm" target=3>顯示內容</A>
標籤解說：常常有一個情況是，我想在框窗 1 的地方按下連結，但是希望他的內容出現在框窗 3 中（請參照上面那個圖），那應該如何寫呢？就像上面加個 target=框窗名稱就行啦！

◆ target=_top

使用方法：<A HREF="http://www.kimo.com" target=_top>奇摩站</A>
標籤解說：有時候，在框窗裡會連結到別的站，卻發現，新連結的這個站，竟然被框窗包住了，不但難看，而且可能會吃上官司說！所以，這時候你必需加入 target=_top這個參數，那麼，這個新連到的網站，就會重新佔據整個螢幕啦！

4.13 其他技巧
■ 網頁配色及背景音樂

首先是網頁的底色，通常是白白的，要怎麼做變化呢？可以做自己的背景圖片。
要注意一點，如果背景和文字顏色一樣～或者顏色相近，天啊～那誰知道你在寫什麼呀？最好文字與背景顏色有對比，像敝人當初，網頁背景是黑的，字是白的紅的，就可以很明顯的突顯出文字。如果圖片中有文字，也要盡量淡化，否則影響內容就不好囉！
內容的東西顏色要配的適宜（除非你想要有奇怪的風格），不然像背景大紅大紅，太刺眼了，有人會想去嗎？剩下的就讓您自己配配看吧！
然後是音樂，有人喜歡用bgsound標籤
<bgsound src="music.mid">
可是用NetScape看就沒有聲音了最好用embed標籤 <embed src="music.mid">
這樣就可以正常播放了唷～

■ 首頁應有的特質及重要性

About Open Page：打開browser看到網站的第一個部份，有人稱之為Open Page(通常是首頁的一半或三分之一)，這個部份應該包含網站的主功能(亦即使用者上這個網站最希望或者最可能做的事)，ex. 一進入Allproducts.com即可看到「Key word search」及「Search by category」，應該儘量避免讓使用者還要使用mouse上下左右拉才能看到他(她)所想要的功能或資訊，有時資訊太多，在不得已的情況下，頁面可以往下沿申，但切忌右左劃面過大，不符一般人的使用習慣，也會造成列印上的困擾。
主題明確：Open Page應包含公司Logo、網站主題(最好是一段簡短的Slogan，讓使用者一看就知道這個網站主要功能或架站目的,ex. Allproducts.com上的The world's best products directory for volume buyers)
Navigation：讓使用者很明確了解他(她)目前在網站的什麼地方(或功能)，首頁上應該有主要功能的連結，各個icon如果可能的話，儘可能加上一些純文字的說明及link；至於icon或者link的擺放亦應有其相對應的邏輯，如與整個網站或大架構較為相關的，放在較外層，與目前執行的功能或頁面較為相關的link應該放在內層；另外，最好能在首頁上提供Site Map的連結，讓使用者可以很快了解網站的架構；所有的link應該把握 intuitive , obvious , fast的原則。
Color or image：對於顏色的採用，應該考慮到該網站的特性及與其它相關網站的區別，特別是首頁的顏色配置，應該讓使用者感覺很舒服、沒有壓迫感，但又不失其專業性，但切忌過度追求美感而犧牲其功能性，就公司目前的網站設計理念，應該是功能性的考量優於純美術的考量，首頁的設計最好設定在60k以內，而且不要用太多層的table。
Meta tag：該部份不會出現在前端的頁面上，但網站規劃時應該將該部份一併考量，做為網站登錄時使用，網站上線時務必將相關資料加入。
其它：首頁上應該有service account 及聯絡資料

■ Meta Tag 的簡介

一般常用的格式如下：

<Title>All Products Online</title>
這雖說不是meta的一部份，但是也不可忽略，總長度不要超過85個Character (約10個字)。
<meta http-quive="content-type" c>
說明網站的格式及編碼方式，另外這個功能也可以拿來說明網站的名稱。
<meta name="keyword" c>
剷明整個網站的關鍵字，關鍵字間用逗點隔開，總長度最好不要超過1000個Character (約44個字)。
<meta name="description" c>
剷明整個網站為何吸引人的地方，可用逗點隔開，總長度最好不要超過200個Character (約15個字)，若文章真的太長，可以切割成兩個部分，較不重要的部分置入下一個Description。
<meta name="robots" c>
此功能是要給搜尋引擎使用的，是要用來告訴Spider哪些網頁是要去擷取的或不用去擷取的，一般都設定成All(內定值)。

伍、認識CSS階層樣式表
【CSS是什麼碗糕？】
要講CSS之前，先要概略知道HTML 4.0這個東西。HTML 4.0大家或多或少有有聽說過吧！有人亦稱之為Dynamic HTML（動態語言）。我在這裡簡單的介紹一下這東西，Dynamic HTML實際上包含了三大要素，那就是「傳統的HTML」、「Script語言」以及「CSS」，換言之，您要完全操作Dynamic HTML語言，那麼以上三項要素您都要相當熟捻才行。
「傳統的HTML」，也就是所謂的HTML3.2，在上一個系列的教學文章已經涵蓋其大部分，若是您還不太熟，建議您Ｋ完後再來看這一系列文章比較好一點。至於，「Script語言」則是指JavaScript或是VBScript語言，這部份若是想學好，那又要花一番工夫了！等到這一系列寫到一個段落後，我們再來謝謝這方面的文章吧！而剩下的「CSS」就是這一系列文章要說明的玩意兒啦！
CSS是「Cascading Style Sheets」的縮寫，Cascading是串接、連接之意；Style則是風格、款式之意；Sheets則是一頁紙、表的意思。所以呢，要以中文來解釋CSS的話呢，您可以稱之為「串接樣式表」。很奇怪的一串名詞對不對，其實，當您CSS用習慣後，您會發現它會這樣被稱呼還蠻貼切的。
【CSS能做什麼？】
CSS能做什麼？可做的事可多著，不過，以最簡單的方式來比喻其功能的話，我們可以說它是網頁的美容師，凡是網頁上看得到的文字、圖片、表格、表單都有它發揮的空間，文字方面，您可以利用CSS來隨意設定字體大小（不再像HTML最大只能到size=7而已），設定行距、間距、去除連結底線…等。
您也可以利用CSS將圖片或文字精準的定位在網頁上的某一個地方，更可以更改表單、表格的框線、顏色…等，您甚至可以更改滑鼠形狀或是做出類似簡報的轉場效果。這些只是我隨便舉幾個效果而已，實際上，若是要認真講解，是可以寫成一本書的。所以，今天主題不再介紹CSS，若是看完這篇介紹後，還覺得意猶未盡的人，可以自行去買相關的書籍來閱讀喔！但是，我個人真的覺得，懂得使用CSS，真的會讓您再製作網頁上如虎添翼的，所以建議一定要瞭解。

陸、開始設計一個網站
各位同學，這就是要給你們的作業喔！(必定要交喔～因為會佔您的學期總成績25%！)
請好好利用以上的方法，製作一個屬於自己專屬的網站，網站的主題是『網頁履歷表』，格式不設限，不侷定你們的創造力，把自己的色彩表達出來，但是至少要有以下的幾項內容喔～