什麼是ＨＴＭＬ

　　HTML就是超文件標示語言（HyperText Markup Language）。主要是在瀏覽器中顯示一份文件的內容。它本身並非程式設計，只不過是標示(Mark-up)，用來強調及組織一般性的文字。HTML是由一些標記（tags）所構成，每個標記對瀏覽器下一個特定的指令，這些指令會告訴瀏覽器如何顯示文件的內容。

　　編輯HTML不需要多麼高級的軟體配備，你只要有『記事本』這項軟體就可以了。但記得，HTML文件的副檔名有些奇怪，你必須設定為 .htm 或是 .html 才行。例如： index.htm 是一個合法的HTML檔名，但 index.txt 就不是了。你可能聽過一些HTML的編輯程式如：HotDog、CutrHTML....等。對初學者而言，使用這些工具並不太好。雖然它們的設計目的是幫助你更容易使用 HTML 來工作。但不幸的是，其中有許多會將 HTML 的代碼隱覽起來，造成學習上的困難。那麼，編輯好的HTML檔要怎麼看呢?你要有瀏覽器，不論是 IE 或是NetScape 都行。利用瀏覽器中的『開啟檔案』的功能就可以看到你所編輯的HTML檔了。

　　HTML是由很多的文件標記( Document Tags )所組成，這些標記在你建立的每一個HTML文件都會用到。它們會對文件檔中不同的部份作不同的定義。大部分的標記都是成對的( 圍堵標記 Container Tags)，即包含『起始標記』和『結束標記』。如<HTML>表示網頁的開始，而</HTML>代表網頁的結束。起始標記和結束標記差別就在於前面的斜線符號而己。標記本身沒有大小寫的區分，不過建議是使用大寫字母，以便在文字編輯器中容易識別。

　　一個HTML的基本語法範例如下：

<HTML>

<HEAD>
<TITLE>我的第一個網頁</TITLE>
</HEAD>

<BODY>
空山不見人，但聞人語響；返景入深林，復照青苔上。
</BODY>

</HTML>

　　顯示結果

　　首先，我們必需讓Web瀏覽器知道這是一個HTML文件，我們必需加上起始標記：

<HTML>

　　注意：是<HTML>而不是HTML。所有的標記指令都包含了 < 和 > 兩個符號，這是 HTML 的標記規則，如果沒有包含括號，瀏覽器會把這些指令當作文字顯示在網頁中。所以，瀏覽器將 <HTML> 視為標記指令，但 HTML 則視為一般文字。

　　HTML的頁首是你輸入網頁標題(TITLE)的地方。輸入以下的文字，可以建立 HTML 的頁首標題，如下例：

<HEAD>
<TITLE>我的第一個網頁</TITLE>
</HEAD>

　　有了頁首後，你就要輸入文字、圖形等資料作為本文了。在</HEAD>標記後輸入以下文字可以插入本文部份：

　　在兩個標記之間，你可以輸入網頁的其它文字或圖形，如下例：

<BODY>
空山不見人，但聞人語響；返景入深林，復照青苔上。
</BODY>

　　最後，我們必需結束整個HTML文件，因此我們必需加上結束標記：

</HTML>

　　如此一來，它便是一個完整的Web文件了。

段落

　　在了解了基本的HTML標記後，我們就可以在網頁內輸入文字了。如先前所提的，你在網頁內輸入的文字必須在<BODY>及</BODY>間，往後所介紹的標記，除了特殊的語法外，都必須遵照此項規則，不再敘述。

　　為了使段落分明，你可以用段落標記<>來控制，標記如下：

>空山不見人，</P>
<

>但聞人語響；</P>
<

>返景入深林，</P>
<

>復照青苔上。</P>

　　顯示結果如下：

空山不見人，

但聞人語響；

返景入深林，

復照青苔上。

　　在技術上，<>是一個圍堵標記，但是在 HTML 中，並不需要 </P> 作結尾，這使得許多人誤以為 <> 是空標記，而把它拿來當作是段落間的一個空白行。這並非 <> 的設計目的。使用 <> 作為圍堵標記，可以使你的 HTML 文件在所有的瀏覽器中顯示最可信任的結果。 HTML 的設計精神是用 <> 來作段落區隔的。

　　在HTML的標記中，有些是可以加上屬性設定的。如段落標記<;P>也可以用來控制文字的對齊方式，如果我們加上ALIGN的屬性設定，則可控制段落中的文字向左(LEFT)、右(RIGHT)或是置中對齊(RIGHT)。範例如下：

<;P ALIGN=RIGHT>
這段文字會向右對齊</P>
<;P ALIGN=CENTER>
這段文字會向中對齊</P>
<;P ALIGN=LEFTt>
這段文字會向左對齊</P>

　　顯示結果如下：

這段文字會向右對齊

這段文字會向中對齊

這段文字會向左對齊

　　大部份所輸入的文字應該包含在圍堵標記中，如<;P>....</P>。一般情況下，瀏覽器會忽略文字之間的空白，或是 ENTER 。如以下的 HTML 碼：

<;P>
空山不見人，
但聞人語響；
返景入深林，
復照青苔上。
</P>

　　看起來很不錯，但在瀏覽器中呈現出來的結果是：

空山不見人，但聞人語響；返景入深林，復照青苔上。

　　不是我們所要的結果吧! 有時，上下文字之間並不希望有太大的間距，那麼段落標記就不太適合了，我們可以改用換行標記<BR>來分隔上下的文字，標記如下：

空山不見人，<BR>
但聞人語響；<BR>
返景入深林，<BR>
復照青苔上。<BR>

　　顯示結果如下：

空山不見人，
但聞人語響；
返景入深林，
復照青苔上。

　　利用一些分隔線<HR>將文件中的不同部份隔開，會使得版面清晰，你也可以用它來分隔文件主體和文件末的一些資訊。不同於<;P>，分隔線標記<HR>是一個空標記( Empty Tag )，這類標記只有一個起始標記，沒有結束的標記。因為它們的作用在於標記指令本身，而不會影響到其他的文字。語法如下：

鹿柴 <HR>
空山不見人，<BR>
但聞人語響；<BR>
返景入深林，<BR>
復照青苔上。<BR>

　　顯示結果如下：

鹿柴

空山不見人，
但聞人語響；
返景入深林，
復照青苔上。

　　如同<;P>標記，<HR>本身還有一些屬性的設定。如 WIDTH 屬性可以設定水平線的寬度，你可以用百分比來設定寬度，如 50% ，則水平線佔整個視窗寬度的一半；你也可以用絕對值來設定寬度，如200，則水平線的寬度為200像素。屬性 SIZE 則是設定水平線的高度，單位為像素。屬性 ALIGN 則是設定水平線的對齊，設定值請參考「段落」那一部份，一些設定的範例如下：

寬度為400像素的水平尺規：
<HR WIDTH=400>

寬度為瀏覽器一半的水平尺規：
<HR WIDTH=50%>

高度為15像素的水平尺規：
<HR SIZE=15>

靠左的水平尺規：
<HR WIDTH=50% ALIGN=LEFT>

靠右的水平尺規：
<HR WIDTH=50% ALIGN=RIGHT>

實心水平線：
<HR NOSHADE>

任何介於  之間的內容都會被忽略，也就是說，你無法在瀏覽器上看到這些內容。一般而言，說明標記( Comment Tag )是為你自已作的，你也可以在文件中利用說明標記來加入版權或是個人資訊。例如：

　　你可以利用<COMMENT>....</COMMENT>標記來表示，上面的語法可寫成：

<COMMENT>本文版權為『老師不在時』網站所有，未經許可，請勿複製 </COMMENT>

文字標題

　　我該如何改變字體的大小呢?第一種選擇，我們可以將文字設定為標題字。標籤的格式如<Hn>。n代表1至6的數字。n值愈小，則標題愈大，有效的運用標題，可以幫助你組織整個文件。範例如下：

<H1>落日照大旗</H1>
<H2>落日照大旗</H2>
<H3>落日照大旗</H3>
<H4>落日照大旗</H4>
<H5>落日照大旗</H5>
<H6>落日照大旗</H6>

顯示結果如下：

落日照大旗

　　屬性 ALIGN 在設定標題字的對齊方式，可用的值有 LEFT(靠左)、CENTER(置中)、RIGHT(靠右)。LEFT是預設值，不用設定，自然是靠左對齊的。例如：

<H1>落日照大旗</H1>
<H2>落日照大旗</H2>
<H3>落日照大旗</H3>
<H4 ALIGN=CENTER>落日照大旗</H4>
<H5 ALIGN=RIGHT>落日照大旗</H5>
<H6>落日照大旗</H6>

顯示結果如下：

落日照大旗

有效率的使用標題標記，可以讓你很快的在網頁中加入組織層次。看一下底下的範例：

<H1>李白詩選</H1>
<HR>
<H2>採蓮曲</H2>
<

>若耶溪旁採蓮女，笑隔荷花共人語。<BR>
日照新妝水底明，風飄香袂空中舉。<BR>
岸上誰家遊治郎，三三五五映垂楊。<BR>
紫騮嘶入落花去，見此踟躕空斷腸。
</P>
<H2>烏夜啼</H2>
<

>黃雲城邊烏欲棲，歸飛啞啞枝上啼。<BR>
機中織錦秦川女，碧紗如煙隔窗語。<BR>
停梭悵然憶遠人，獨宿孤房淚如雨。
</P>

顯示結果如下：

李白詩選

採蓮曲

若耶溪旁採蓮女，笑隔荷花共人語。
日照新妝水底明，風飄香袂空中舉。
岸上誰家遊治郎，三三五五映垂楊。
紫騮嘶入落花去，見此踟躕空斷腸。

烏夜啼

黃雲城邊烏欲棲，歸飛啞啞枝上啼。
機中織錦秦川女，碧紗如煙隔窗語。
停梭悵然憶遠人，獨宿孤房淚如雨。

字形字體

　　除了上述的標題字標記外，我們也可以利用文字標記<FONT SIZE=n>來改變字形的大小，n代表1到7的數字，數字愈大，則字體愈小。範例如下：

<FONT SIZE=1>落日照大旗</FONT><BR>
<FONT SIZE=2>落日照大旗</FONT><BR>
<FONT SIZE=3>落日照大旗</FONT><BR>
<FONT SIZE=4>落日照大旗</FONT><BR>
<FONT SIZE=5>落日照大旗</FONT><BR>
<FONT SIZE=6>落日照大旗</FONT><BR>
<FONT SIZE=7>落日照大旗</FONT><BR>

顯示結果如下：

落日照大旗
落日照大旗
落日照大旗
落日照大旗
落日照大旗
落日照大旗
落日照大旗

　　另一種型式的表式方式是在 N 值前加上符號；如果加上正號(+)代表比預期的字型大 N 級，如果加上負號(-)代表比預期的字型小 N 級，而所謂的預期是指3。範例如下：

<FONT SIZE=-2>落日照大旗</FONT><BR>
<FONT SIZE=-1>落日照大旗</FONT><BR>
<FONT>落日照大旗</FONT><BR>
<FONT SIZE=+1>落日照大旗</FONT><BR>
<FONT SIZE=+2>落日照大旗</FONT><BR>
<FONT SIZE=+3>落日照大旗</FONT><BR>
<FONT SIZE=+4>落日照大旗</FONT><BR>

顯示結果如下：

落日照大旗
落日照大旗
落日照大旗
落日照大旗
落日照大旗
落日照大旗
落日照大旗

　　你當然也可以改變預設字體的大小值，語法如：<BASEFONT SIZE=N>，其中的N值必須在1至7之間，因為HTML文件的字型大小是在1到7之間的。範例如下：

明月幾時有<BR>
<BASEFONT SIZE=5>
把酒問青天<BR>
<FONT SIZE=-2>不知天上宮闕</FONT><BR>
今夕是何年

顯示結果如下：

明月幾時有
把酒問青天
不知天上宮闕
今夕是何年

你可以很好色

　　除了改變字體大小外，標記<FONT>也提供COLOR屬性用來指定文字的顏色。指定的方式是在屬性COLOR後面加上色譜的組合#rrggbb，rr代表紅色系，gg代表綠色系，bb代表藍色系。數值可由00 ~ FF，00代表最弱的顏色效果，而FF代表最強的顏色效果，範例如下：

<><FONT SIZE=1 COLOR="#FF0000">紅色</FONT>
<><FONT SIZE=2 COLOR="#FF8040">橙色</FONT>
<><FONT SIZE=3 COLOR="#FFFF00">黃色</FONT>
<><FONT SIZE=4 COLOR="#00FF40">綠色</FONT>
<><FONT SIZE=5 COLOR="#00FFFF">藍色</FONT>
<><FONT SIZE=6 COLOR="#0000FF">靛色</FONT>
<><FONT SIZE=7 COLOR="#FF00FF">紫色</FONT>

顯示結果如下：

紅色

橙色

黃色

綠色

藍色

靛色

紫色

　　標記<FONT>也提供FACE屬性可用來指定文字的字型，不過前提是使用者的電腦中也必須有相對應的字型才可以，如果沒有，瀏覽器便會以系統預定的字型來顯示指定的文字。範例如下：

<FONT SIZE=4 FACE="華康粗圓體, 標楷體, 細明體">
馬鳴風蕭蕭</FONT>
<FONT SIZE=4 FACE="華康粗圓體, 細明體,標楷體">
馬鳴風蕭蕭</FONT>

　　上述範例中，瀏覽器會先以華康粗圓體來顯示文件內容，如果使用者電腦中沒有該字體，則會以標楷體來顯示文件內容，依此類推。顯示結果如下：

馬鳴風蕭蕭
馬鳴風蕭蕭

文字效果

　　非隱藏式標記( Explicit Tags )標記也稱為實體標記( Physics Tags )，因為這些標記很清楚的告訴瀏覽器你所希望的文字的顯示面貌。基本的非隱藏式標記屬於圍標記，允許使用者將文字標記為粗體(bold)，斜體(italic)或加底線(underline)。加上一些簡單的文字標記可以讓你的文字更加多樣化，

這是<B>粗體字</B><BR>
這是<I>斜體字</I><BR>
這是<U>加底線</U>的字

顯示結果如下：

這是粗體字
這是斜體字
這是加底線的字

非隱藏式標記的另一個特性是可以和其他的圍堵標記一起使用，範例如下：
　

這是<B><I>粗體加斜體的效果</I></B>的字

顯示結果如下：

這是粗體加斜體的效果的字

　　隱藏式標記( Implicit Tags)又稱為邏輯標記( Logical Tags)，因為它們給予瀏覽器在顯示文字時的一些自由，這類標記如頁首標記(TITLE)，通常它們會與其他的標記並存，當然，這和所用的瀏覽器也有關係。常用的有：

標記	意義	一般用法
<EM>, </EM>	強調	斜體
<STRONG>, </STRONG>	特別強調	粗體
<TT>, </TT>	打字字體	類似打字效果

範例如下：

我所<EM>強調</EM>的是<STRONG>HTML很簡單</STRONG><BR>
大家都<TT>同意</TT>吧

顯示結果如下：

我所強調的是HTML很簡單
大家都同意吧

　　在早期的瀏覽器中是有分辨隱藏式和非隱藏式標記的必要性，使用隱藏式的標記會造成在不同的瀏覽器中產生不同的觀看效果，這應該是我們所不願意見到的。底下列出一些有關文字效果的一些標記：

標記	顯示結果
<SUP>上</SUP>標字	^上標字
<SUB>下</SUB>標字	_下標字
<CODE>程式行</CODE>	`程式行`
<KBO>鍵盤字</KBO>	鍵盤字
<SAMP>範例</SAMP>	`範例`
<VAR>變數</VAR>	`變數`
<CITE>傳記引述</CITE>	傳記引述
<BLOCKQUOTE>引述文字區塊</BLOCKQUOTE>	引述文字區塊
<DEF>術語定義</DEF>	術語定義
<ADDRESS>街道或E-mail</ADDRESS>	街道或E-mail
<STRIKE>刪除線</STRIKE>	~~刪除線~~
<BIG>大</BIG>一點	大一點
<SMALL>小</SMALL>一點	小一點
<BLINK>文字閃爍</BLINK>	文字閃爍

本文效果

　　以前曾提到過<BODY>這個標記，它是用來定義 HTML 文件的主體的。因此，適當的在 <BODY>內加上一些屬性設定，相當於在空白的舞台上搭起背景，可讓你的網頁更具看頭。

　　先前你自行練習的網頁背景是白色的，這也是預設的顏色，透過<BODY>的BGCOLOR屬性，我們可以指定網頁的背景顏色。範例如下：

<BODY BGCOLOR=AQUA>>
背景是水藍色的
</BODY>
<BODY BGCOLOR=#0000FF >
背景是藍色的
</BODY>

顯示結果顯示結果

　　在顏色值的設定方面，我們可以有兩種表示方式；一種是利用#RRGGBB的設定方式(參考文字設定部份)，一種是直接指定顏色的英文名稱，如下表。一些常見的色彩我們可以用顏色的英文名稱來指定顏色，如果無法記得英文名稱，就只好用色譜值(#rrggbb)來指定顏色了。

aqua 水藍色 black 黑色 blue 深藍色

yellow 黃色 gray 灰色 green 綠色

lime 萊姆色 maroon 粟色 navy 軍艦藍

olive 橄欖綠 purple 紫色 red 紅色

sliver 銀色 teal 藏青色 white 白色

　　網頁的預設文字的顏色是黑色的，不過你可以使用 TEXT 屬性更改網頁的文字顏色。範例如下：

<BODY BGCOLOR=#0000FF text="#FFFF00">
背景是藍色的，文字是黃色的
</body>

顯示結果

　　在顏色值的設定方面，你可以利用#RRGGBB的設定方式。

　　透過 BACKGROUND這個屬性，我們可以指定網頁的背景圖片，圖檔格式是ＧＩＦ或ＪＰＧ都可以，不過要記得指明圖片的路徑所在。範例如下，img代表路徑的名稱，b28.gif則是圖片的名稱：

<BODY BACKGROUND="img/b28.gif>
這是一個背景圖的設定範例
</BODY>

顯示結果

　　如果我們再加上BGPROPERTIES=FIXED的屬性設定，則可設定出浮水印的效果，觀看範例時請拉下捲軸，比較一下兩個範例的背景有何不同。範例如下：

<BODY BACKGROUND="img/b28.gif BGPROPERTIES=FIXED>
這是一個浮水印的設定範例
</BODY>

有浮水印效果　　沒有浮水印效果

　　要用大一點的背景圖或是小一點的背景圖呢?直覺上，一個50*50的背景圖的檔案大小當然比100*100 的的圖的檔案來得小，因此，為了加快下載速度，當然是使用50*50的圖檔了。一般情況下，這是正確的。但如果你所有的網頁都使用同一個背景圖的話，結果就不是這樣了。當你瀏覽過一個網頁後，該網頁的資訊會暫存在你電腦中的Cache中，圖檔當然是暫存在電中了。假設你的視窗是400*400，如果你使用 50*50的圖檔，電腦要將圖『填』64次才會佔滿視窗；如果你使用100*100，電腦只要填16次。如果多個網頁都使用同一個圖，這些時間是抵得上圖片下載時間的差異的。

　　打開你電腦的喇叭吧，讓我們在網頁中加入一些音樂。加入BGSOUND這個屬性，我們可以讓網頁跳出無聲的世界。範例如下：

<html>
<head>
<title>背景音樂設定</title>
<bgsound src="image/CANYON.MID" loop="-1">
</head>
<BODY>
記得打開喇叭喔！
</body>
</html>

顯示結果

　　在設定值中，SRC 後面接的是聲音檔的路徑檔名，LOOP 控制的是聲音的播放次數，-1 代表無限次播放，你也可以以 infinite 來代替。

　　很討厭的是，如果你是使用 NS 的瀏覽器，你是聽不到聲音的，上面的語法只能用在 IE 中。如果你要在 NS 中能聽到背景聲音，你必須將上面白色字的部份改成：

<EMBED SRC="image/CANYON.MID" VOLUME="95" AUTOSTART="TRUE" CONTROLS="SMALLCONSOLE" LOOP="TRUE" WIDTH="50" HEIGHT="15"></EMBED>

　　在藍色部分是檔名，大小寫不同可能會被視為是不同的檔名。 VOLUMN 設定的是聲音的大小，而AUTOSTART 設定為 TRUE會使得聲音檔在載入得立即播放，你也可以設定為 FALSE 。

　　有一個不太好記的屬性 CONTROLS ，是用來設定聲音播放面板的格式的，而 WIDTH 及 HEIGHT 則是設定面板的大小。LOOP 設定音效播放次數，TRUE 表示不停的放.

　　如果你希望設定的背景聲音，不管是在 IE 或是 NS 中都能播放，那你就必須將兩段語法一起加進你的網頁中了。

　　你有沒有注意到每次你做出來的網頁，文字和視窗的最左上角都有一點矩離。那就是瀏覽器的邊界設定了。文字還好，有時你要加上專屬於你的網頁的圖片，有那麼一點邊邊就不好看了。

　　TOPMARGIN可以設定元件跟視窗的上邊界，而LEFTMARGIN就是設定左邊界了。邊界的單位以像素為單位。範例如下：

<body bgcolor="#008080" text="#FFFF00"> <p><img border="0" src="image/html.gif" width="250" height="78"></p> <p>這是有邊界的網頁</p> </body>	<body bgcolor="#008080" topmargin="0" leftmargin="0"> <p><img border="0" src="image/html.gif"></p> <p>這是上邊，和左邊都設為0的網頁</p> </body>
顯示結果	顯示結果

　　先不用理會圖片是怎麼產生的，注意一下白色字的部份就可以了。

無序號清單（Unorder List )

　　當我們所要傳達的訊息是一條一條的說明時，這種就是所謂的清單資料。在短時間內傳送大量資訊最好的方法就是使用多層次的清單。清單讓你的文件看來更有層次、更有組織，使用者也可以很容易地找到他們所需要的資訊。常用的情況下，清單分為無順序的清單及有順序的清單。這個單元，我們介紹無序號的清單。

　　簡單的方式便是將主題分為幾個項目，基本上這些項目間並沒有什麼次序，但逐一的列出可使主題更為明顯。標記<UL>和</UL>可用來標示一段無順序的清單區域，<LH>可用來標示整個區域的標題，並不一定要存在，但如果你使用<LH>來為立清單標題，標題字並不會有特殊的字形變化。而<LI>則用來標每一個項目。對照範例如下：

<H3>中華職棒聯盟</H3>
<UL>
<LI>兄弟象
<LI>統一獅
<LI>興農牛
<LI>時報鷹
<LI>三商虎
<LI>味全龍
<LI>中信鯨
</UL>
<UL>
<LH>中華職棒聯盟
<LI>兄弟象
<LI>統一獅
<LI>興農牛
<LI>時報鷹
<LI>三商虎
<LI>味全龍
<LI>中信鯨
</LH>
</UL>

顯示結果如下：

中華職棒聯盟

兄弟象
統一獅
興農牛
時報鷹
三商虎
味全龍
中信鯨

中華職棒聯盟

兄弟象
統一獅
興農牛
時報鷹
三商虎
味全龍
中信鯨

　　請注意的是，這個範例除了表示列表的使用方式，及LH這個標記的效果外，這並不是一個良好的寫作方式。在HTML2.0的標準中，在多層次的清單中使用頁首標記(Hn)並不是一個好習慣，因為你可以只是用頁首標記來達到強調的效果，但頁首標記的設計目的是使網頁更有組織有系統，並非用來強調文字的。雖然大多數的瀏覽器可以正確的顯示，但此舉可能影響清單的美觀。如必要，考慮一下使用<FONT>這個標記吧。

　　實心圓形是<UL>標籤的內定符號，但<UL>標籤也有一些不同符號的設定：

　　TYPE=disc 　　符號為圓點，為內定值
　　TYPE=circle 　符號為空心圓點
　　TYPE=square　符號實心方塊

範例如下：

<H3>中華職棒聯盟</H3>
<UL TYPE=disc>
<LI>兄弟象
<LI>統一獅
<LI>興農牛
<LI>三商虎
<LI>味全龍
<LI>中信鯨
</UL>

<H3中華職棒聯盟</H3>
<UL TYPE=circle>
<LI>兄弟象
<LI>統一獅
<LI>興農牛
<LI>三商虎
<LI>味全龍
<LI>中信鯨
</UL>

<H3>中華職棒聯盟</H3>
<UL TYPE=square>
<LI>兄弟象
<LI>統一獅
<LI>興農牛
<LI>三商虎
<LI>味全龍
<LI>中信鯨
</UL>

顯示結果如下：

中華職棒聯盟

兄弟象
統一獅
興農牛
三商虎
味全龍
中信鯨

中華職棒聯盟

兄弟象
統一獅
興農牛
三商虎
味全龍
中信鯨

中華職棒聯盟

兄弟象
統一獅
興農牛
三商虎
味全龍
中信鯨

　　你可以根據你自已的需要，來混合使用上述的三個符號，你不必使用多個<UL>，因為這樣會形成多個清單區域。你只要在<LI>標記後面加上符號的形式就可以了。範例如下：

<H3>中華職棒聯盟</H3>
<UL TYPE=disc>
<LI>兄弟象
<LI>統一獅
<LI>興農牛
<LI>三商虎
<LI TYPE=circle>味全龍
<LI TYPE=square>中信鯨
</UL>

顯示結果如下：

中華職棒聯盟

兄弟象
統一獅
興農牛
三商虎
味全龍
中信鯨

目錄(Directory)、定義(Definition)及選單(Menu)

　　這三個清單方式是不屬於順序和非順序清單的，這三種清單方式交替的使用順序和非順序清單方式，並沒有固定的方式。「目錄」及「選單」基本上都是簡單的清單；「定義」在所有的清單中是比較獨特的一個，因為在清單結構中提供二層的列項目；一個作項目定義，另一個作為自身的定義。

　　使用<DIR>標記可以建立目錄清單。理論上，<DIR>標記的限制比較多一些；它是設計來顯示HTML頁的檔案及目錄結構的；技術上，它不支援HTML內部標記，雖然大部份的瀏覽器會將它顯示出來。使用範例如下：

目錄清單
<DIR>
<LI>兄弟象
<LI>統一獅
<LI>興農牛
<LI>時報鷹
<LI>三商虎
<LI>味全龍
<LI>中信鯨
</DIR>

顯示結果：

目錄清單

兄弟象

統一獅

興農牛

時報鷹

三商虎

味全龍

中信鯨

　　使用<MENU>標記可以建立選單清單。範例如下：

選單清單
<MENU>
<LI>兄弟象
<LI>統一獅
<LI>興農牛
<LI>時報鷹
<LI>三商虎
<LI>味全龍
<LI>中信鯨
</MENU>

顯示結果如下：

選單清單

兄弟象

統一獅

興農牛

時報鷹

三商虎

味全龍

中信鯨

　　它是用來作二層的項目清單，這個清單方式在許多場合是很有用的，而且它的一個好處是，前後一致不用符號或是數字。定義清單使用了 <DL> 及二個空標記： <DT>定義條目；<DD>定義項目。範例如下：

定義清單
<DL>
<DT>日間班
<DD>六個月
<DD>六個月
<DT>夜間班
<DD>八週
<DD>十週
</DL>

顯示結果：

定義清單

日間班: 六個月; 六個月
夜間班: 八週; 十週

目錄(Directory)、定義(Definition)及選單(Menu)

目錄清單
<DIR>
<LI>兄弟象
<LI>統一獅
<LI>興農牛
<LI>時報鷹
<LI>三商虎
<LI>味全龍
<LI>中信鯨
</DIR>

顯示結果：

目錄清單

兄弟象

統一獅

興農牛

時報鷹

三商虎

味全龍

中信鯨

　　使用<MENU>標記可以建立選單清單。範例如下：

選單清單
<MENU>
<LI>兄弟象
<LI>統一獅
<LI>興農牛
<LI>時報鷹
<LI>三商虎
<LI>味全龍
<LI>中信鯨
</MENU>

顯示結果如下：

選單清單

兄弟象

統一獅

興農牛

時報鷹

三商虎

味全龍

中信鯨

定義清單
<DL>
<DT>日間班
<DD>六個月
<DD>六個月
<DT>夜間班
<DD>八週
<DD>十週
</DL>

顯示結果：

定義清單

日間班: 六個月; 六個月
夜間班: 八週; 十週

超連結

　　超連結是HTML文件中非常重要的一項功能，藉此我們可以將一些相關的文件連結起來，使它們能夠彼此參考。另外，我們也可以利用超連結的功能連上其他網址上的網頁，而達到網網相連的目的。產生超文字鏈結及超媒體鏈結的基本標記是 <A> (anchor tag)，這是一個圍堵標記，要用 </A>作為結束，基本語法如下：

<A HREF ="URL">連結的文字</A>

　　注意 HREF ，雖然幾乎在每一個你所用的 <A> 標記都會用到它，但它只是 <A> 標記的一個簡單屬性，它用來指定連結的目的地的。範例如下：

<A HREF="marquee.htm">跑馬燈教學</A>

執行結果：

跑馬燈教學

　　很明顯的是，『跑馬燈教學』這幾個字在網頁上顯示的是加了底線，並以不同的顏色表現出來，表示按下這個句子就能啟動超文字連結。

　　有沒有注意到上一個範例中，『跑馬燈教學』這個檔案是出現在現行的視窗中 ? 有時，這並不是我們希望文件出現的位置。但沒關系，我們可以利用TARGET這個屬性來設定連結的目標。

基本上，TARGET的值有四個基本的設定：

_SELF：瀏覽噞會使用同一個頁框來顯示超連結所設定的網頁。此為預設值。

_TOP：瀏覽器會清除所有的頁框，然後使用整個瀏覽器來顯示超連結所設定的網頁。

_BLANK：瀏覽器會開啟另一個新的瀏覽器視窗來顯示超連結所設定的網頁。

_PARENT：瀏覽器會使用前一個畫面的頁框來顯示超連結所設定的網頁；如果沒有前一個畫面，則使用整頁顯示內容。

　　一個簡單的範例範例如下，這次我們把網頁開在一個新視窗中：

<A HREF="marquee.htm" TARGET=_blank>跑馬燈教學</A>

按一下底下的連結吧：

跑馬燈教學

　　如果你對頁框還沒有概念，你可以先大致看一下頁框的教學範例。

不同通訊協定的連結

　　再看一次超連結的語法：

<A HREF="URL">連結的文字</A>

　　URL(Universal Resource Locators)是一種位址的表示法，可以包含以何種協定進行連線。要連結那一個網址，連線的埠號，及檔案的路徑和名稱。URL可以用下列的式子來定義：

　　其中 <scheme> ，你也可以稱之為機制，表示某種傳輸協定，如 HTTP、FTP、或是 Gopher等等，而 <scheme_dependent_information> 中便是欲連結主機的資訊。整個配合 <A> 及 </A> 超連結標記，就成為：

<A HREF="<scheme>://Host_Name.Domain_Name:port/path/file name>連結的文字</A>

　　解釋一下：Host_Name是遠端主 (Server) 的名稱，而 Domain_Name 則是這台機器的名稱，例如：ccsun1.cc.nctu.edu.tru，其中 ccsun1 為 Host_Name，cc.nctu.edu.tru為 Domain_Name。port是指Server那裏提供 WWW 服務的埠號，一般是 80，大部份情況下，可省略不寫。

　　看了上一段的英文字，我想大家頭痛了，事實上沒那麼難啦 ! 就是我們可以利用不同的通訊協定來指明各種的網路服務。例如：http可連至其他的Web伺服器，mailto啟動系統預的郵件編輯器來傳遞電子信件，telnet可用來登錄遠端的伺服器，而ftp可用來做檔案傳輸的服務。範例如下：

連結至WWW站：
<A HREF="HTTP://www.seed.net.tw">
資策會SeedNet</A>
連結至FTP站：
<A HREF="Ftp://home.kimo.com.twt">
奇摩站Ftp主機</A>
連結至News站：
<A HREF="News://news.ncu.edu.tw">
中央大學News站</A>
連結至Telnet站：
<A HREF="Telnet://bbs.mgt.ncu.edu.tw">中央大學龍貓BBS站</A>
連結至E-Mail：
以上若有任何意見請寄信至
<A HREF="Mailto:alex_cheng@ms9.url.com.tw">我的電子信箱</A>

以下是顯示的結果：

連結至WWW站：資策會SeedNet
連結至FTP站：奇摩站Ftp主機
連結至News站：中央大學News站
連結至Telnet站：中央大學龍貓BBS站
連結至E-Mail：若有任何意見請寄信至我的電子信箱

　　有沒有注意到 mailto 這個通訊協定，少了 // 是不是 ? 不是打錯，它就是要這樣用。還有一些屬於 mailto 這個通訊協定的設定也在這裏一併說明了。

　　如果你已經按了上面 E-Mail 連結的範例，當開啟郵件軟體時，收件人的 Address 已經填上了，我們還可以加上一些範例，例如：

Subject：加上主旨。

CC：副本收件人。

　　如果你要加上以上的項目，你必需用『?』來做連結，如果你有同一個項目中還有多個細項，你必需用『&』來連結，例如以下的語法都是合法的。

例一：<A HREF="Mailto:alex_cheng@ms9.url.com.tw?Subject=讀者回函">我的電子信箱</A>

例二：<A HREF="Mailto:alex_cheng@ms9.url.com.tw?Subject=讀者回函&CC=ufjl1300@ms9.hinet.net">我的電子信箱</A>

例三：<A HREF="Mailto:alex_cheng@ms9.url.com.tw?Subject=讀者回函& CC=ufjl1300@ms9.hinet.net&CC=awayschool@kimo.com">我的電子信箱</A& gt;

這是例三的顯示結果：我的電子信箱

　　有一個很特殊的通訊協定，file，用於在本機上的超連結，不同於其他的通訊協定，這個協定會直接連結到使用者的電腦裏的檔案。例如下面的語法：

　　你可以試一下是不是會開啟小畫家，如果不會，那就是你電腦中沒有這個檔案了。你要用這個語法，那你就保証別人的電腦中有著和你電腦中相同的檔案了。否則就會出現連結錯誤的訊息了。

　　看到上述密密麻麻的斜線; 反斜線了吧 ! 頭是不是又昏了，這是我們下一個重點：路徑的表示。

路徑設定

　　在目前這個網站中，如果我建立這麼一個連結：

<A HREF="marquee.htm">跑馬燈教學</A>，或是
<A HREF="http://home.kimo.com.tw/awaycheck/html/link/marquee.htm>跑馬燈教學</A>

　　利用這兩種方法，我都可以建立同樣的超連結。先在這裏分清楚，前者是『相對路徑』的寫法，後者是『絕對路徑』的寫法。

　　在超連結的設定中，相對路徑指的是我所要連結的檔案和目前的檔案所存放在網站之間的位置相對關係。這個用法只能用在存放於同一個網站內的檔案之間，相互連結。例如：你就不可能利用同樣的寫法來連結我的檔案。絕對路徑比較簡單，它直接標明了檔案在網路上的位置，你也可以直接利用絕對路徑的方式直接連結到我的檔案中。那麼何時使用相對路徑，何時使用絕對路徑呢 ? 一般我們使用的通則是：同一個網站內的檔案，我們大多使用相對路徑，不同網站內的檔案，我們一定會使用絕對路徑。

　　在編寫HTML文件時，每個連結如果你都使用絕對路徑來填入URL(通常是可怕的一大串)，尤其是當一個HTML檔提供了很多很多的連結時，這些URLs會龐大到簡直是個大災難，讓一份小小的文件淹沒在URLs中。作者也會被這些URLs搞得不知道原來的文件到底長得什麼樣，只看到無止盡的 URLURLURLURLURL，然後文件的File Size也因這些URLs而暴增。更可怕的是，有朝一日一但你換了個帳號，或是在你的帳號底下有些的目錄要更動，很多或所有文件的URLs都要從頭改過，豈不恐怖？相對位址可以幫我們解決這個問題。

　　現在你所看的檔案的名稱是 link.htm，是放在：

http://home.kimo.com.tw/awaycheck/html/link/link2.htm(絕對位址)

　　如果我要連結『跑馬燈教學』這個檔案，它是放在：

http://home.kimo.com.tw/awaycheck/html/link/marquee.htm(絕對位址)

　　是放在同一個目錄中的檔案，如果我們要連結跑馬燈這個檔案，我們只要寫：

<A HREF="marquee.htm">跑馬燈教學</A>就可以了 !

　　不要乎略了一個事實是，你現在正在看這個網頁，也就是說你已經進到 http://home.kimo.com.tw/awaycheck/html/link/ 這個目錄中了，你要看『跑馬燈教學』這個檔案，難道你還要電腦重新找一次 http://home.kimo.com.tw/awaycheck/html/link/ 嗎?例如：你已經在台大了，你要問路，你應該會問『公館』在那裏(相對路徑)，而不是問『台灣的台北的公館』在那裏(絕對路徑)吧 !

　　這次我要連結一個檔案-範例一(ex1.htm)，它是放在(絕對位址)

http://home.kimo.com.tw/awaycheck/html/link/example/ex1.htm(絕對位址)

　　這次，如果你要用相對位址的方式來連結，你要怎麼做呢?對了，是：

<A HREF="example/ex1.htm">前往範例一</A>

　　很簡單吧!『範例一』比目前的檔案『深』了一層，要連結它，你就把『深』了的路徑寫上去；如果你還連結『更深』層的檔案，你就看它『怎麼深』，你就『怎麼寫』吧 !

　　往下層目錄連結沒問題了，那麼往上層呢 ? 假定我有一個檔案-範例二(ex2.htm)，它是放在：

http://home.kimo.com.tw/awaycheck/html/ex2.htm(絕對位址)

　　這次，如果你要用相對位址的方式來連結，你要怎麼做呢?你不能說沒學過，是：

<A HREF="../ex2.htm">前往範例二</A>

　　『..』這個符號代表的是『上一層』的目錄。如果你要再上一層呢?例如有個檔案-範例三(ex3.htm)，它是放在：

http://home.kimo.com.tw/awaycheck/ex3.htm(絕對位址)

　　這次，如果你要用相對位址的方式來連結的話，你要這麼寫：

<A HREF="../../ex3.htm">前往範例三</A>

　　唉 ! 往上幾層，你就點幾下就好了。

　　又有一個情況，假定有一個檔案-範例四(ex4.htm)，它是放在：

http://home.kimo.com.tw/awaycheck/html/list/ex4.htm(絕對位址)

　　再重新看一次，你現在看的檔案是放在：

http://home.kimo.com.tw/awaycheck/html/link/link2.htm(絕對位址)

　　很麻煩吧!其實了解了上一個的寫法就不會麻煩了，應該是：

<A HREF="../list/ex3.htm">前往範例四</A>

　　希望你都能了解，而且，最好能真的了解 !

　　<BASE>標記可以在包含超連的文件內，將絕對位址變成相對位址，當你的網頁在同一個網站的許多子目錄下都需被連結時，這個標記就相當有用了，例如首頁。這個標記的格式如下：

　　如果你曾經學過DOS，你把它想像成它的功能就如同 path 這個指令的功能，就更容易理解了。請注意，<BASE>只能用在<HEAD>標記之間。

　　如果你的首頁的網址是 http://www.hi.com.tw/index.htm，你有一個檔案是放在 http://www.hi.com.tw/abc/123/sample.htm。那麼你要從sample.htm中連結到首頁，你應該加上：

　　如果子目錄太多，檔案也多，這就不好了。你可以將sample.htm改寫成：

　　如果一來，瀏覽噞就會在伺服器的主目錄下找尋 index.htm 而不管目前文件是存在那個目錄下了。如果你計畫要建立一個大型的 Web 站，你可能就會考慮在你的 HTML 範本檔案內加入 <BASE> 了。

相對於上面的範例，連結到不同電腦中的檔案就簡單多了。例如：

<A HREF="http://www.kimo.com.tw">奇摩站</A>

<A HREF="http://www.hinet.net">中華電信</A>

就直接把絕對位置放上去就可以了。

內部連結 (Section Link)

　　當HTML文件內容很長時，我們可在文件的前方建立索引以方便使用者查詢，這時我們可以藉由內部連結的方式讓使用者快速地前往相關的部份。底下有現成的範例，先連連看：

詞　　　選

李白：菩薩蠻　 晏幾道：鷓鴣天　 溫庭筠：南歌子

　　要建立內部連結，首先你必需在連結的目的地先建立名稱標記，再利用<A>來連結這些標記。

　　名稱標記是這樣建立的：利用標記<A>的<NAME>屬性用以建立一個可供識別的名稱標籤。如：

<A NAME=LI></a>菩薩蠻
。。。。。

<A NAME=EN></a>鷓鴣天
。。。。

<A NAME=WN></a>南歌子
。。。

　　建立好名稱標記後，我們再利用#加名稱標籤來達到內部連結的目的。範例如下：

　　這是同一個檔案中有內部連結的範例，如果我要從別的檔案中連到這個檔案，而且直接看到溫庭筠的南歌子呢？我可以這麼表示：

　　檔案名稱再加上標籤名稱就行了。

　　還有一些事情是需要再說明的。只有實際超連結文字才用“#“符號，NAME的設定中是不需要的。同時，NAME對大小寫是敏感的( case-sensitive ) ，假如 HREF 呼叫 WN，而 NAME 是 wn，這個連結可能沒辦法運作。

菩薩蠻

平林漠漠煙如織　寒山一帶傷心碧
暝色入高樓　有人樓上愁
玉階空儜立　宿鳥歸飛急
何處是歸程　長亭更長亭

此首望遠懷人之詞，寓情于境界之中。一起寫平林寒山境界，蒼茫悲壯梁元帝賦雲 ﹕ 「登樓一望，唯見遠樹含煙。平原如此，不知道路幾千。」此詞境界似之。然其寫日暮景色，更覺淒黯。此兩句，白內而外。「瞑色」兩句，自外而內。煙如織、傷心碧，皆瞑色也。兩句折到樓與人，逼出「愁」字，喚醒全篇。所以覺寒山傷心者，以愁之故；所以愁者，則以人不歸耳。下片，點明「歸」字。「空」字，亦從「愁」字來。烏歸飛急，寫出空間動態，寫出鳥之心情。鳥歸人不歸，故雲此首望遠懷人之詞，寓情于境界之中。一起寫平林寒山境界，蒼茫悲壯。粱元帝賦雲「空佇立」。「何處」兩句，自相呼應，仍以境界結束。但見歸程，不見歸人，語意含蓄不盡。

鷓鴣天

彩袖殷勤捧玉鐘　當年拚卻醉顏紅
舞低楊柳樓心月　歌盡桃花扇影風
從別後　憶相逢　幾回魂夢與君同
今宵剩把銀釭照　猶恐相逢是夢中

此首為別後相逢之詞。上片，追溯當年之樂。「彩袖」一句，可見當年之濃情密意。拚醉一句，可見當年之豪情。換頭，「從別後」三句，言別後相憶之深，常縈魂夢。「今宵」兩句，始歸到今日相逢。老杜雲 ﹕ 「夜闌更秉燭，相對如夢寐」，小晏用之，然有「剩把」與「猶恐」四字呼應，則驚喜儼然，變質直為宛轉空靈矣。上言夢似只，今言真似夢，文心曲折微妙。

南歌子

倭墮低梳髻　連娟細掃眉
終日兩相思　為君憔悴盡　百花時

此首寫相用純用拙重之筆。起兩句，寫貌 ﹕ 「終日」句，寫情。「為男」句，承上「相思」，透進一層，低回欲絕。

南歌子

懶拂鴛鴦枕　休縫翡翠裙
羅帳罷爐薰　近來心更切　為思君

此首，起三句三層。「近來」句，又深一層。「為思君」句總束，振起全詞以上所謂「懶」、「休」、「龍」者，皆恩君之故也。

超連結的其他設定

屬性	LINK=#rrggbb	設定未連結過的文字顏色
	VLINK=#RRGGBB	設定已連結過的文字顏色
	ALINK=#RRGGBB	指標按在可連結文字上的顏色

　　上述這些標記是放在 <BODY> 中的，連結顏色的設定會影響整個網頁。例如以下的範例：

<HTML>
<HEAD>
<TITLE>超連結及其他</TITLE>
</HEAD>
<BODY link="#008000" vlink="#FF00FF" alink="#808000">
<A HREF="http://www.kimo.com.tw">奇摩站</A>
</BODY>
</HTML>

顯示結果：奇摩站

　　看吧 ! 連結文字的顏色不同了吧 ! 不過不太好使用這項設定。

　　這個標記是放在<HEDA>之間的，用來將目前文件與其他 URL 作連結。大多數的情況下， <LINK> 標記不會在使用者的瀏覽器中建立一個超連結。它的格式如下：

　　<LINK>最常用來建立 Web 站上其他文件的使用者定義結構。以 REL 屬性為例，它定義 HREF="URL" 正目前文件之的關係；而 REV 則定義了目前文件與 HREF 的 URL 之間的關係，如：

<LINK HREF="http://www.hi.com.tw/index.htm" REL="PARENT"
<LINK HREF="http://www.hi.com.tw/product.htm" REV="CHILD"

　　這些定義在網站上少用，反而是在公司的內部中，一些比較有組織的文件才用到。

　　你大概會經常使用到<LINK>標記： REV="MADE" 說明網頁是誰建立的。一般我們可以這樣用：

<HEAD>
<LNK HREF="mailto:alex_cheng@ma9.url.com.tw" REV="MADE" REL="AUTHOR">
</HEAD>

　　這樣並不會真的產生一個mailto:的連結。你還是要在本文區中放一個 mailto: anchor 的標記。

　　同樣的，這個標記也是用左 <HEAD> 標記中的，這個標記可以讓某些伺服器找尋網頁內的關鍵字。假如你的 Web 伺服器提供這樣的找尋功能，使用者的瀏覽器也支援這些這些找尋功能，那麼載入網頁時，使用者就就會看到一個簡單的找尋方塊了。我是申請奇摩站的免費空間，並使用 IE 5，這樣的組合可以使用這項功能。

<ISINDEX>的語法如下：

<HEAD>
<ISINDEX>
</HEAD>

插入圖片

　　雖然圖片的主要功能是用來裝飾網頁，但少了圖片的網頁就如同少了裝潢的店面，即使貨品齊全，也很難吸引人潮。在網頁上，如果你要加上圖片，有兩種圖片的格式是為大部份的瀏覽器所接受的；GIF 和 JREG。GIF是是 Web 瀏覽器上比較受歡迎的圖形類別，但是， JPEG 有逐漸受歡迎及廣泛被使用的趨勢。

　　所有的圖形瀏覽器都支援 GIF 檔案，即瀏覽哈不需要額外檢視程式便可檢視 GIF 檔； GIF是壓縮的圖形，但它們的圖形清晰度似乎優於 JPEG，用色較少 (256色或少於256色)的圖形，使用 GIF 的效果較佳。GIF 雖然是壓縮檔，卻比 JPEG 檔大一些，不過，當二者檔案大小相同時， GIF 的壓縮及繪圖速度都比 JPEG 來得快。 GIF 的另一個問題是它包含了一些有版權的元件，使得它較不能成為交換的公開標準。

　　受歡迎程度緊跟在 GIF 之後的是 JPEG格式。JPEG 圖形可以在大多數新的圖形瀏覽器內檢視，不必使用任何輔助程式。在圖形顏色多的情況下，JPEG 比 GIF 有較好的清晰度；除此之外， JPEG 的檔案也比較小，而且它的壓縮規格在公開的領域內。另一方面， JPEG 比起 GIF，它的高度壓縮導致圖形品質較差， JPEG所需的解壓縮時間也比 GIF 長一些，因此，雖 JPEG檔案較小、所需的傳送時較短，但解壓縮的時間過長往往抵消了這項優點。

　　1996年春天，W3C公佈了一份有關新格式的工作標準--PNG，可能會取代 GIF 及 JPEG 。? PNG格式透過真實顏色(true color) 深度提供高壓縮圖形，可以用來傳送非常清晰、活潑的圖形，它使用公開領域壓縮方式，以避免上述 GIF 的再授權問題。雖然以往它的傳輸時間較長，但已經改進很多了，我們可以期待有更多的瀏覽器支援 PNG 格式。

　　HTML提供了<IMG>這個標記用來在網頁上置入圖片。而SRC屬性標明了圖片的所在位置。範例如下：

這是我的最愛！<BR>
<IMG SRC="img/miche.jpg" ALT="我的最愛的圖片">
<IMG SRC="img/michelll.jpg" ALT="我的最愛的圖片">
<IMG SRC="img/michelll.jpg">

　　顯示情形如下：

這是我的最愛！
我的最愛的圖片

　　其中ALT屬性出現於當圖片的檔名或是路徑錯誤時，所顯示的代替文字，如上圖中。或是圖片的說明文字，把滑鼠移到上面左圖上，看看會不會有文字出現。強烈建你使用 ALT 這個屬性，在使用者的瀏覽器無法支援圖形介面時，他們仍能了解圖片的大致內容。至少，在網路傳輸速度過慢時，使用者可以先大致了解圖片的內容，以決定是否繼續等待傳輸。

屬性設定

　　除了 ALT 這個屬性外，圖片常有其他相關的屬性。先列出它完整的屬性值：

屬性	說明	範例
ALIGN	ALIGN="left" 將影像對齊視窗左邊界，其後的文字將沿著影像的右邊自動換行顯示。如右上圖。 ALIGN="right" 將影像對齊視窗右邊界，其後的文字將沿著影像的左邊自動換行顯示。如右圖中。 ALIGN="top" 沿著行中最頂端對齊。如右圖下。 ALIGN="texttop" 沿著行中文字最高處對齊。通常與上一個屬性相同，但非完全一樣。 ALIGN="middle" 沿著目前行的基準線對齊影像中間。 ALIGN="bottom" 沿著目前行的基準線對齊影像底部。	空山不見人，但聞人語響；返景入深林，復照青苔上。　空山不見人，但聞人語響；返景入深林，復照青苔上。　空山不見人，但聞人語響；返景入深林，復照青苔上。
ALT	在非圖形環境下，因無法顯示圖形的替代文字。	<IMG SRC=warning" ALT="注意">
SRC	指定圖形的位址及名稱。	<IMG SRC=warning" ALT="注意">
BORDER	設定圖像的外框寬度。單像以像素決定。 <IMG SRC="miche33.jpg" BORDER=5>
LOWSRC	顯示低解析度的影像。如果設定此屬性，瀏覽器會先顯示這個圖檔，等SRC的檔案下載完成後，再顯示SRC的圖檔。	<IMG SRC="miche33.jpg" LOWSRC="miche33_low.jpg">
WIDTH HEIGHT	設定圖檔的寬度、及高度。單位可以像素決定，如WIDTH=80，或以百分比決定，如WIDTH=20%，圖形的高度會佔視窗的20%。 <IMG SRC="miche33.jpg" WIDTH=90 HEIGHT=90>
VSPACE HSPACE	指定影像與前後文字或左右文字之間的距離。設定的單位以像素為主。例如： <IMG SRC="miche33.jpg" HSPACE=10 VSPACE=10>	空山不見人，但聞人語響；返景入深林，復照青苔上。空山不見人，但聞人語響；返景入深林，復照青苔上。

連結設定

　　我們曾經提過利用文字來設定超連結，語法如：

　　同樣的，我們也可以利用圖片來做超連結的設定。方法只不過將連結文字變為插入圖片的標記就可以了。範例如下：

<CENTER>
想看清楚我嗎?按我一下吧!<BR>
<A HREF="img/MICHE4.JPG" TARGET=_blank>
<IMG SRC="img/miche4.jpg" WIDTH=50 HEIGHT=70>
</A>
</CENTER>

按一下圖片吧

想看清楚我嗎?按我一下吧!

　　如果你是要連結 HTML 檔的話，就把 HREF=XXX.htm改成就可以了。

　　我們先前做的連結是一張圖片只能連結到一個檔案中，如果你要在圖片上的不同區域中連結到不同的檔案，那你就要使用影像地圖的技巧了。

　　如果要定義影像地圖的映射區域，你要利用 <AREA> 這個標記來描述影像的不同區域所連結的物件，而沒有定義到的區域則視為沒有連結。

　　對於上面的一張圖形，如果我們要寫一個 HTML 檔來顯示圖形並定義其映射區域，我們以 <MAP>這個標記來代表整張圖，以 <AREA> 代表圖中的連結方塊，我們要這麼寫：

<MAP NAME="pic_map">
<AREA SHAP="rect" COORDS="6, 6, 46, 46" HREF="1.htm">
<AREA SHAP="rect" COORDS="80, 20, 100, 100" HREF="2.htm">
</MAP>

<IMG SRC="pic.gif" USEMAP="#pic_map">

　　如此，這張圖形的兩個紅色的區域就會連到不同的網頁中了。我們來看一下有關於 <AREA> 這個標記的語法：

<AREA SHAPE ="rect"
　　　COORDS="X, Y..."
　　　HREF="file_name"
　　　TARGET="name"
　　　NOHREF>

SHAPE：指定在圖形上可以點取的形狀，rect是定義為四方形，可設定為 circle，代表圓形，或 poly ，代表多邊形。

COORDS：利用這個屬性，我們可以指定連結區域的座標值，以像素為單位。分別指定區域的左上角及右下角的座標。

HREF：設定連結的位址。

TARGET：設定連結檔案出現的位置，可參考『超連結』單元的設定值。

NOHREF：設定按下某一個區域並沒有任何動作。　　

表格

　　表格在HTML文件中是相當實用的一種技巧，我們可以利用它來組織版面及圖形，更可以利用它來控制網頁的版面。表格以<TABLE>為起始標記，以</TABLE>為結束標記，基本標記如下：

表格的基本標記：

<TABLE>	產生表格
<TABLE BORDER>	產生有框線的表格
<CAPTION>	表格標題
<TH>	定義欄位標題
<TR>	定義橫列
<TD>	定義橫列中的資料

表格的起始標記：

　　這樣一來，你就可以在<TABLE>和</TABLE>之間設計表格了。

<TR>定義列

　　表格設計時，每一組『<TR>和</TR>』出現一次，相當於可建立一列表格。

<TD>定義行

　　設計時，同一列中每一組『<TD>和</TD>』出現一次，相當於可建立一行表格。一般是將『<TD>和</TD>』放在『<TR>和</TR>』之內，混合使用。

　　如果不太能了解，沒關係，先看一個範例：

顯示結果：

第一格

第二格

　　這....?這是表格嗎? 這當然是表格，但是一個沒框線的表格，可別小看它喔，在網頁排版時很有用處，但目前不是我們要的。但我們可以再加上<BORDER>這個屬性。一般格式是：

　　n代表表格邊線厚度，單位是像素，若不註明，預設值是0。我們再改一下上一個範例：

顯示結果：

第一格

第二格

　　再看一個比較複雜的範例：

顯示結果：

第一格	第二格
第三格	第四格

　　看起來很複雜，其實不難，希望大家都學會這個單元。不要貪圖方便直擴使用一些網頁編輯軟體來製作表格，畢竟總有一天，你還是會自已修改原始碼的。

　　標記<CAPTION>是用來設定表格標題，你可以設定標題放在表格之上(ALIGN=TOP)，或是放在表格之下(ALIGN=BOTTOM)，範例如下：

標題在上
第一格	第二格
第三格	第四格

標題在下
第一格	第二格
第三格	第四格

　　標記<TH>可以用來定義標題儲存格，所不同的是<TH>所定義的儲存格資料是置中，及有粗體的特性。一般<TH>所定義的儲存格是放在最上一列，或是最左欄。範例如下：

標題一	標題二
第一格	第二格
第三格	第四格

標題一	第一格	第二格
標題二	第三格	第四格

屬性設定

　　利用WIDTH和HEIGHT這兩個屬性，我們可以用來設定表格的寬度及高度。你可以絕對值的設定方式來設定，例如：

　　代表設定一個寬度為300像素的表格，而

　　這種表示設定一個寬度為目前視窗寬度一半的表格，且會隨視窗的寬度不同，適時的改變表格的寬度。HEIGHT的設定也是如此。範例如下：

第一格	第二格
第三格	第四格

第一格	第二格
第三格	第四格

　　WIDTH和HEIGHT這兩個屬性可以放在<TABLE>，<TR>，<TD>這些標記中，分別設定整個表格，欄，和個別儲存格的寬度或是高度。提供一些範例，大家可以自行體會一下。

第一格

第二格

設定寬度為200像素的表格

第一格	第二格
第三格	第四格

設定第一格的寬度為100像素的表格，這樣的設定會影響整欄

第一格	第二格
第三格	第四格

設定第一列的高度為100像素的表格，這樣的設定會影響整欄

第一格	第二格
第三格	第四格

設定寬度為200像素的表格，同時設定第一格的寬度佔整個表格的40%

　　這個屬性我們提過很多次了。ALIGN屬代表格的對齊方式，可設定為靠左(LEFT)、靠右(RIGHT)、或置中對齊(CENTER)。這個屬性也可以放在<TABLE>，<TR>，<TD>這些標記中，分別設定整個表格，欄，和個別儲存格的對齊方式。略看一下範例就可以了：

第一格

第二格

第一格	第二格
第三格	第四格

建立一個200像素寬的表格，並將表格置中對齊，同時將第一列內的文字靠右對齊

第一格	第二格	第三格
第四格	第五格	第五格

建立一個230像素寬的表格，並將表格置中對齊，同時將第一列內的文字靠右對齊，但第三格靠左對齊

　　和ALIGN屬性相同，但會將表格內的文字做垂直的位置的修改，你可以設定為靠上(TOP)、靠中(MIDDLE)、或靠下對齊(BOTTOM)。這個屬性也可以放在<TABLE>，<TR>，<TD>這些標記中，分別設定整個表格，欄，和個別儲存格的垂直對齊方式。預設為靠中對齊。略看一下範例就可以了：

第一格	第二格
第四格	第五格

設定垂直對齊的範例。

第一格	第二格
第四格	第五格

設定垂直及文平的對齊的範例。

列的對齊方式可以在<TR>標記中指定，而<COL>這個標記則可以指定直欄的對齊方式，範例如下：

第一格	第二格
第四格	第五格

設定第一欄的水平及垂直對齊方式

第一格	第二格	第三格
第四格	第五格	第六格

一次設定兩欄的水平及垂直對齊方式

第一格	第二格	第三格
第四格	第五格	第六格

你也可以用SPAN的屬性來一次設定兩欄的水平及垂直對齊方式，顯示結果同上

再談屬性

　　這個屬性設定表格內框線的寬度，單位為像素，預設值為1。範例如下：

有框線寬度的表格

第一格	第二格	第三格
第四格	第五格	第六格

無框線寬度的表格

第一格	第二格	第三格
第四格	第五格	第六格

　　這個屬性是設定表格中儲存格內資料與儲存格邊框間的距離，單位為像素，預設值為1。範例如下：

有CELLPADDING的表格

第一格第二格第三格

第四格第五格第六格

無CELLPADDING的表格

第一格	第二格	第三格
第四格	第五格	第六格

　　屬性BGCOLOR可用來設定表格的背景顏色，值要以#rrggbb或顏色代號來設定，可參考本文效果來設定。該注意的是，如果我們將屬性BGCOLOR 置於<TABLE>中，則設定整個表格的顏色，如果置於<TR>標記中，則設定整列的顏色；將BGCOLOR置於<TD>中則是設定單一儲存格的顏色。範例如下：

第一格	第二格	第三格
第四格	第五格	第六格

將表格整體顏色設定為灰色

第一格	第二格	第三格
第四格	第五格	第六格

將表格整體顏色設定為灰色，第一列設定為藍色

第一格	第二格	第三格
第四格	第五格	第六格

將表格整體顏色設定為灰色，第一列設定為藍色，第三格設定為紅色

　　背景顏色是如此設定，那麼文字顏色呢?你要用<FONT COLOR=#rrggbb>這個標記來設定了。

　　利用這個屬性，我們可以設定表格的背景圖片，如果我們將屬性BBACKGROUND 置於<TABLE>中，則設定整個表格的，如果置於<TR>標記中，則設定整列的背景圖片；置於<TD>中則是設定單一儲存格的背景圖片。

第一格	第二格	第三格
第四格	第五格	第六格

　　如果你同時設定背景顏色及背景圖片，那會如何顯示呢? 那麼你的表格會只看到圖片，而不會顯示顏色。

　　有三個屬性可以用來設定邊框的顏色：

BORDERCOLOR	設定邊框顏色	#rrggbb
BORDERCOLORDARK	設定亮框線的顏色	#rrggbb
BORDERCOLORLIGHT	設定暗框線的顏色	#rrggbb

　　這些屬性也是很容易設定，看一下範例：

第一格	第二格	第三格
第四格	第五格	第六格

設定邊框顏色為紅亮的表格

第一格	第二格	第三格
第四格	第五格	第六格

亮框為藍色，暗框為綠色的表格

三談屬性

　　再談下去就沒完沒了，就在這個單元中把表格做個結束吧。

　　首先登場的是 ROWSPAN 這個屬性，它用於向下延申合併垂直儲存格；和這個屬性類似的是 COLSPAN ，它用於向右延伸合併水平儲存格。它們主要是用於合併儲存格的。例如：

<TD COLSPAN=2> 合併 2 個水平儲存格
<TD ROWSPAN=2> 合併2個垂直儲存格

　　先看一些簡單的範例：

<TABLE BORDER=1>
<TR><TD COLSPAN=2>合併水平兩格</TD><TD>第三格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD><TD>第六格</TD></TR>
</TABLE>

合併水平兩格		第三格
第四格	第五格	第六格

<TABLE BORDER=1>
<TR><TD ROWSPAN=2>合併垂直兩格</TD><TD>第三格</TD></TR>
<TR><TD>第六格</TD></TR>
</TABLE>

合併垂直兩格	第三格
	第六格

　　如果你都了解了，自已做一個功課表試試看，有問題再看底下的解答，功課表如下：
　

我們班的月考成續單
姓名	各科成績			名次
姓名	國文	英文	數學	名次
趙一	86	88	90	1
錢二	84	85	92	2
孫三	66	89	94	3

參考HTML碼：

<TABLE BORDER WIDTH= 70% HEIGHT=50%>
<CAPTION>我們班的月考成續單</CAPTION>
<TR><TH ROWSPAN=2>姓名<TH COLSPAN=3>各科成績<TH ROWSPAN=2>名次
<TR><TH>國文<TH>英文<TH>數學
<TR align="center"><TD>趙一<TD>86 <TD>88 <TD>90 <TD>1
<TR align="center"><TD>錢二<TD>84 <TD>85 <TD>92 <TD>2
<TR align="center"><TD>孫三<TD>66 <TD>89 <TD>94 <TD>3
</TABLE>

　　這三個標記一定要放在表格<TABLE>這個標記中才會有作用，你可以用這三個標記分別來指明表格的標頭(THEAD)、主體區域(TBODY)、與註腳(TFOOT)。整個完整的順序，你可以這樣表示：

<TABLE BORDER>
<THEAD>
<TR><TD COLSPAN=5 ALIGN=CENTER>我們班的月考成續單
</THEAD>

<TBODY>
<TR><TH ROWSPAN=2>姓名<TH COLSPAN=3>各科成績<TH ROWSPAN=2>名次
<TR><TH>國文<TH>英文<TH>數學
<TR align="center"><TD>趙一<TD>86 <TD>88 <TD>90 <TD>1
<TR align="center"><TD>錢二<TD>84 <TD>85 <TD>92 <TD>2
<TR align="center"><TD>孫三<TD>66 <TD>89 <TD>94 <TD>3
</TBODY>

<TFOOT>
<TR><TD COLSPAN=5>導師：Alex
</TFOOT>
</TABLE>

顯示結果：

姓名	各科成績			名次
我們班的月考成續單
姓名	國文	英文	數學	名次
趙一	86	88	90	1
錢二	84	85	92	2
孫三	66	89	94	3
導師：Alex

　　看起來有加標記跟沒加標記是結果是一樣的，但至少在你維護 HTML 碼時，你比較容易分辨你的表格資料。

頁框屬性

　　先看一個會出現頁框會出現捲軸的範例：ex3.htm

　　不論你是否將視窗極大化，左邊的頁框部份會出現垂直捲軸，有些情況下，我們大概不會希望頁框出現捲軸，你可以使用SCROLLING這個屬性來設定捲軸。它的設定如下：

SCROLLING="NO"

　　你有一些值可以設定：

YES：一定會出現捲軸
NO：不會出現捲軸
AUTO：為預設值，當文件大小超過視窗時，自動產生捲軸

　　所以，我們可以修改一下頁框組的內容：

<html>

<head>
<title>頁框範例一</title>
</head>

<frameset cols="30%,70%">
<frame src="left1.htm" scrolling="no">
<frame src="right1.htm">
</frameset>

</html>

　　更新後的捲軸範例：ex3_1.htm

　　還是先看一個範列，這次出現的問題是，你可以在頁框線上拖曳，並改變頁框的大小：ex3.htm

　　大概不會有人希望自已的網頁是如此設計的吧! 你可以使用NORESIZE這個屬性來改變這個設定，它不用設定參數值。因為頁框的邊界是共用的，所以你只要設定一個頁框，其餘邊界相連的頁框就不用再設定了。修改後的內容為：

<html>

<head>
<title>頁框範例一</title>
</head>

<frameset cols="30%,70%">
<frame src="left1.htm" scrolling="no" NORESIZE>
<frame src="right.htm">
</frameset>

</html>

　　修改後的新範例，你不能再拖曳邊界了：ex3_1_2.htm

　　你可以再重新看一下ex3_1_2.htm的內容，這次注意一下，左邊視窗視中的圖片和文字是有一些距離的。如果你的頁框是要放上你網站的代表圖，你應該是不希望它和邊界出現空白，參改一下底下的屬性。

MARGINHEIGHT	設定文件顯示上下邊界的寬度，單位為像素，預設值由瀏覽器決定
MARGINWIDTH	設定文件顯示左右邊界的寬度，單位為像素，預設值由瀏覽器決定

　　那麼我們再修改一下上一個範例，將左邊頁框的邊界都設定為0：

<html>

<head>
<title>頁框範例一</title>
</head>

<frameset cols="30%,70%">
<frame src="left1.htm" scrolling="no" NORESIZE marginwidth="0" marginheight="0">
<frame src="right.htm">
</frameset>

</html>

　　新的範例顯示結果：ex3_1_3.htm

　　上一個範例中，你應看到兩個頁框間有一條分隔線，我們可以利用FRAMEBORDER這個屬性來更改它，你可以設定：

FRAMEBORDER="yes"或是FRAMEBORDER="1"來顯示框線
FRAMEBORDER="no"或是FRAMEBORDER="0"來隱藏框線

　　現在，我們要將框線隱藏起來了：

<html>

<head>
<title>頁框範例一</title>
</head>

<frameset cols="30%,70%" frameborder="0">
<frame src="left1.htm" scrolling="no" NORESIZE marginwidth="0" marginheight="0" >
<frame src="right.htm">
</frameset>

</html>

　　隱藏邊框的範例：ex3_1_4.htm

　　這個屬性可以用來設定框線與內容的空白距離，單位為像素，範例如下：

<html>

<head>
<title>頁框範例一</title>
</head>

<frameset cols="30%,70%" frameborder="1" framespacing="20">
<frame src="left1.htm" scrolling="no" NORESIZE marginwidth="0" marginheight="0">
<frame src="right.htm">
</frameset>

</html>

　　顯示結果：ex3_1_5.htm，很難看是吧 ! 沒關係，把 FRAMEBODER 的值改為 0，就不會那麼難看了。

連結設定

　　除了將適當的網頁放於適當的位置外，頁框最迷人的地方就是你可以利用超連結的功能將連結的網頁放於你希望出現的框頁中。為了達到這項功能，我們必須將框架命名，語法如下：範例

<html>

<head>
<title>連結範例一</title>
</head>

<frameset COLS="30%,70%">
<frame src="link_left.htm" name="left">
<frame src="link_right.htm name="right">
</frameset>

</html>

　　上面的語法值得注意的是：name=left這個語法，設定頁框的名稱為left。名稱可自行設定，如同右半部頁框的名稱為right一般。除了在做超連結設定時，你可以利用 NAME 來指定連結網頁出現的視窗之外，NAME的設定幾乎是不需要的。

　　設定好名稱之後，我們就可以將名稱當做是連結的目的地了。範例

　　底下是 left.htm 這個檔案的內容：

　　注意到<a href....>中的target=RIGHT部份，這部份指明連結的網頁出現的地方，在上一個範例中我們指明頁框右方的名稱為RIGHT，所以，連結的網頁自然出現在頁面的右方了。如果不太明暸，再看一下範例檔，互相對照，就容易懂了。

　　在target的設定中有些保留字是無法自行設定為目的地的，例如：

保留字	目的地
_blank	在新視窗顯示
_parent	在上層視窗顯示
_top	在目前整個視窗顯示
_self	在本身的框架中顯示

　　以上的四個保留字是不用設定，而可以直接使用的。最後，我必須說明的是：在目前網路上有相當大的比例都使用了頁框這個功能 (雖然專業的網站少用這個功能)，它提供了讓我們更靈活操控視窗的功能。

巢狀頁框

　　這種頁框只是框架的另一種組合吧了，也就是在一個視窗中，出現上下、左右頁框並存的情形，底下的四個檔案，是我們用來放在頁框組內的 HTML 檔：

上邊範例檔：top.htm
左下範例檔：left.htm
右下範例檔：right.htm
頁框範例檔：ex4.htm

　　在上一個完成的頁框組中，你可以把它想像成，我們先將視窗分割成上下的頁框組，再將下半部的頁框分割成左右的頁框組，所以你的 HTML 文件可以這麼表示：ex4.htm網頁原始檔內容：

　　如果你了解上面的範例，那麼這個範例應該是沒問題的。如範例二，一個單純的上下分割的頁框語法應該如下：

<frameset rows="30%,70%">
<frame src="top.htm">
<frame src="bottom.htm">
</frameset>

　　一個frameset就做一次視窗分割，最少應該有兩個網頁來源<frame src=xxx>。但我們又將底下的頁框又再分割為左右的視窗，所以<frame src="bottom.htm">又被取代為：

<frameset cols="30%,*">
<frame src="left.htm">
<frame src="right.htm">
</frameset>

　　好了，看一下底下的範例，應該很容易了解了。

左邊的範例檔：left.htm
右上的範例檔：top.htm
右下的範例檔：bottom.htm
頁框的範例檔：ex5.htm

<html>

<head>
<title>頁框範例五</title>
</head>

<frameset cols="30%,*">
<frame src="left.htm">
<frameset rows="20%,*">
<frame src="top.htm">
<frame src="bottom.htm">
</frameset>
</frameset>

</html>

　　完成這個單元之前，你不妨自行練習一個範例：參考範例如下：

表單

　　表單是一個在網頁中常被用來和使用者溝通的工具。ＨＴＭＬ中所有的表單內容都是放在</FORM>。。。</FORM>之中，例如：加入文字輸入欄位、輸入圓鈕或按鈕等等。表單的標記格式如：

　　這個標記是用來宣告表單元素的，其中的四個屬性介紹如下：

　　Action：設定這個FORM元素的處理動作，N1普通為處理這個表單的CGI程式。如：

<FORM Action="http://www.vtc.gov.tw/cgi-bin/test.exe"......

　　上述資料表示 Client 端的瀏覽器將資料傳送出去後，是由 Server 端的test.exe程式來處理。

　　Method：設定資料傳送的方式，你有兩種選擇，第一種是「GET」，處理方式為將表單內的資料加在URL之後，再將資料傳送出去，而Server 在接到資料後，會把資料存在QUERY-STRING 這個環境變數中，供 CGI 程式使用，這種方法雖然簡單，但缺點是資料不能超過 512 Bytes。第二種方法是「POST」，當使用者填完資料後，瀏覽器會將資料變成一個封包 (Packet) ，送到 Action 所指定的 URL 之下，如此一來，使突破了 512 Bytes的限制。

　　EncType：設定將要送出的資料進行編碼的的方式。

　　Name：給予這個表單一個名稱，將來在程式應用(如JavaScript的設計時)才能指定特定的表單元件。

　　大多數的表單輸入欄位可用標籤<INPUT TYPE="欄位格式" NAME="欄位名稱 VALUE="初始值" ALIGN="對齊方式">來表示，它宣告了一個接受輸入的標記，使用瀏覽器可以接受使用者所欲傳送出的資料，範例如下：

<FORM METHOD="POST" ACTION="Mailto:xxx@vv.bb.nn.mm" >
請輸入你的名字：
<INPUT TYPE="text" NAME="username"><br>
請輸入你的密碼：
<INPUT TYPE="password" NAME="password"><br>
<INPUT TYPE="submit" NAME="Submit_Button" VALUE="送出">
<INPUT TYPE="reset" NAME="Reset_Button" VALUE="重設">
</FORM>

顯示結果如下：

上述的範例解釋如下：

　　標籤<FORM>中的ACTION屬性可以設計此表單的處理程式，一般格式如下： ACTION="http://www.vtc.gov.tw/cgi-bin/manag.asp"，上例以電子郵件來處理處例表單。屬性METHOD設定表單資料傳遞的方式，有GET及POST兩種方式。

　　標籤<INPUT TYPE=text NAME=username SIZE=10 MAXLENGTH=20>會在表單中出現一個文字輸入欄位，讓使用者輸入文字或是數字，而標籤的名稱(NAME)為name，文字欄位的顯示長度(SIZE)為10個字元寬，最多(MAXLENGTH)可輸入20個字元。

　　標籤<INPUT TYPE=passowrd NAME=password SIZE=10 MAXLENGTH=20>同樣會在表單中出現一個文字輸入欄位，讓使用者輸入文字或是數字，但輸入文字後，畫面顯示為＊。標籤的名稱為password，文字欄位的顯示長度為10個字元寬，最多可輸入20個字元。

　　標籤<TYPE="SUBMIT" NAME="Submit_Button" VALUE="送出">顯示一個提送表單(SUBMIT)的按鈕，按鈕的名稱為"按鈕"，顯示在按鈕上的文字為送出。

　　標籤<TYPE="RESET" NAME="Reset_Button" VALUE="重設">顯示一個重新設定(RESET)表單資料的按鈕，按鈕的名稱為"按鈕"，顯示在按鈕上的文字為重設。

　　這是一個可以利用電子郵件送出訊息的表單，你可以將 ACTION 部份的 E-mail 改成你的信箱來測試，一定要測試，否則你不了解下面的內容。

　　如果你設計了如同以上的表單，當你利用 OutLook來接收信件時，你會收到一封主旨為『從 Microsoft Internet Explorer 公告表格』的信件，但它存成附件的形式，你可以用記事本來開啟，如果使用者輸入英文，That's OK，但如果是輸入中文，你會看到如以下的亂碼：

username=%BEG%B3%D5%A4%B8&password=sdfsdfsd&Submit_Bottom=%B0e%A5X

你可以將上面的表單的語法改成：<FORM METHOD="POST" enctype="text/plain" ACTION="Mailto:xxx@vv.bb.nn.mm?subject=網友來函" > 就可以直接在OutLook中直接看到信件的內容了。

核取方塊(Checked Box)

　　選項鈕適用於單選的項目，當我們希望在表單中產生一個能讓使用者複選的問卷時，我們可以利用核取方塊。基本的語法如下：

範例如下：

<FORM>
請選擇你喜歡的球類運動：
<BR><INPUT TYPE="checkbox" NAME="SPORT" VALUE=volleyball>排球
<BR><INPUT TYPE="checkbox" NAME="SPORT" VALUE=basketball>藍球
<BR><INPUT TYPE="checkbox" NAME="SPORT" VALUE=tennis>網球
<BR><INPUT TYPE="checkbox" NAME="SPORT" VALUE=table_tennis>桌球
<BR><INPUT TYPE="checkbox" NAME="SPORT" VALUE=baseball CHECKED>棒球
<>
<INPUT TYPE="submit" NAME="Submit_Bottom" VALUE="送出">
<INPUT TYPE="reset" NAME="Reset_Bottom" VALUE="重設">
</FORM>

顯示結果如下：

　　底下是利用OutLook接收的結果。

SPORT=basketball
SPORT=tennis
SPORT=baseball
Submit_Bottom=送出

　　第一：我們利用不同的NAME屬性來設定不同的選項群組，但同個群中的名稱都必需是相同的。

　　第二：CHECKED屬性的設定代表在該選項中，某個項目是已經預選的內容，如：棒球。

　　第三：VALUE設定當使用者選了某個項目之後，傳送回來的結果。

下拉式選單

　　下拉式選單是當使用點選下拉箭頭時，才會顯示出可供選擇的項目，如同核取方塊一般，下拉選單也可以有多重選擇。語法如下：

<SELECT NAME="xx" SIZE="value" MULTIPLE>
<OPTION VALUE="xxx" SELECTED>XXX
<OPTION VALUE="yyy">YYY
</SELECT>

　　範例如下：

<FORM>
請選擇你最喜歡的顏色：
<SELECT NAME="COLOR" SIZE=5 MULTIPLE>
<OPTION SELECTED>red
<OPTION>blue
<OPTION>green
<OPTION>black
<OPTION>white
</SELECT><

>
請選擇你最喜歡的汽車：
<SELECT NAME="CAR">
<OPTION VALUE="Benz" SELECTED>賓士
<OPTION VALUE="Ford">福特
<OPTION VALUE="Civic">喜美
</SELECT><

>
<INPUT TYPE="submit" NAME="Submit_Bottom" VALUE="送出">
<INPUT TYPE="reset" NAME="Reset_Bottom" VALUE="重設">
</FORM>

顯示結果如下：

　　底下是利用OutLook接收的結果。

COLOR=red
COLOR=green
COLOR=white
CAR=Ford
Submit_Bottom=送出

　　第一：我們利用不同的NAME屬性來設定不同的選項群組。下拉選單有兩種形式，設定 MULTIPLE 屬性則可設定捲軸式的選單，你可以利用CTRL加上點選的方式來多重選取。設定 SIZE 屬性則可設定顯示的項目數。

　　第二：<OPTION>設定選項，其中VALUE設定選擇後傳回的內容，若不設定，則傳回的內容為選項的名稱。

　　第三：CHECKED屬性的設定代表在該選項中，某個項目是內定值。

文字區域

　　如果我們要建立一個一列以上的文字輸入欄，我們可以利用標籤<TEXTAREA>來完成。基本語法如下：

　　範例如下：

<FORM>
請輸入你的意見：<BR>
<TEXTAREA NAME="COMMENT" ROWS=5 COLS=30>
我的意見為：
</TEXTAREA><>
<INPUT TYPE="submit" NAME="Submit_Bottom" VALUE="送出">
<INPUT TYPE="reset" NAME="Reset_Bottom" VALUE="重設">
</FORM>

　　顯示結果如下：

　　標籤<TEXTAREA>中，ROWS代表要顯示的列數，而COLS則代表要顯示出的行數（字元數），在<TEXTAREA>....</TEXTAREA>區段中出現的中文字『我的意見為：』則是預先顯示的文字。

　　在表單的第一個單元中，我們有介紹過按鈕有兩個通用的屬性：

<INPUT TYPE="Submit".......>
<INPUT TYPE="Reset"..........>

　　這兩種表示法分別建立一個傳送資料，及重新設定資料的按鈕，表單已經為這兩種形式的按鈕建立的處理的程式，一般是不需要我們去操心的。還有另一種形式的按鈕，我們可以自行去建立所需要的內容，範例如下：

　　顯示結果：

　　目前這個按鈕並沒有什麼做用，但你可以配合JavaScript或是VBScript來給予它新的生命，我們再重新改寫這個按鈕：

　　顯示結果：

　　目前不用去理會onClick是怎麼回事，知道有這種功能就行了，如果將來有興趣，你可以去翻閱JavaScript或是VBScript的書籍，裏面都會有很詳盡的介紹的。

跑馬燈

　　跑馬燈是一種動態的文字效果，可使文字隨時間依一定的規則變化移動。利用<MARQUEE>標籤，並加上一些文字就可以了。範例如下：

<MARQUEE DIRECTION=LEFT >
這段文字跑馬燈，反覆不停地由右至左捲動
</MARQUEE><>

看到底下的捲動文字了嗎?

這段文字跑馬燈，反覆不停地由右至左捲動

　　標記<MARQUEE>的BEHAVIOR屬性可以控制跑馬燈的捲動效果。SCROLL的效果使文字由最右方一個接一個字的出現，然後再逐一消失，它是預定的顯示方式。SLIDE效果使文字捲進來後碰到邊界後，就停下來，不再移動了。ALTERNATE效果使文字在限定的範圍內左右二邊交替移動。LOOP則可控制跑馬燈捲動的次數。範例如下：

<MARQUEE BEHAVIOR=SCROLL LOOP=3>
我只重覆3次喔!</MARQUEE><>
<MARQUEE BEHAVIOR=SLIDE>我是滑動的方式，你只能看一次喔!</MARQUEE><>
<MARQUEE BEHAVIOR=ALTERNATE>我會"倒彈"</MARQUEE><>

顯示結果：

我只重覆3次喔!

我是滑動的方式，你只能看一次喔!

我會"倒彈"

　　標記<MARQUEE>的DIRECTION屬性可以控制跑馬燈的捲動方向。LEFT代表向左捲動，RIGHT代表向右捲動。BGCOLOR屬性可以改變跑馬燈的背景顏色。文字的顏色呢?那當然是以<FONT COLOR=#rrbbgg>來設定了。範例如下：

<MARQUEE DIRECTION=LEFT>我往左跑</MARQUEE><>
<MARQUEE DIRECTION=RIGHT>我往右跑</MARQUEE><>
<MARQUEE BGCOLOR=YELLOW>我有黃色的背景</MARQUEE><>
<FONT COLOR=#ffff00><MARQUEE BGCOLOR=#0000ff>我有藍色的背景，黃色的字</MARQUEE><></FONT>

顯示結果如下：

我往左跑

我往右跑

我有黃色的背景

我有藍色的背景，黃色的字

　　標記<MARQUEE>的WIDTH屬性可以改變跑馬燈的寬度，而HEIGHT則可以改變高度。利用ALIGN這個屬性，我們可以控制跑馬燈文字靠上對齊(TOP)，靠中對齊(MIDDLE)，或靠下(BOTTOM)。SCROLLAMOUNT代表跑馬燈中文字每次移動的距離(單位是像素)，而SCROLLDELAY則代每次移動間相隔的時間(單位是千分之一秒)。範例如下：

<MARQUEE ALIGN=TOP BGCOLOR=#FFFF00 HEIGHT=40 WIDTH=50%>這是一段背景為黃色而且在上方的文字跑馬燈</MARQUEE><>
<MARQUEE SCROLLAMOUNT=100>我跳得很遠喔!</MARQUEE><>
<MARQUEE SCROLLDELAY=500>慢慢來，不用急!</MARQUEE><P>

顯示結果如下：

這是一段背景為黃色而且在上方的文字跑馬燈

我跳得很遠喔!

慢慢來，不用急!

IFRAME

　　<Frame>這個標籤是無法和<BODY>標籤共用的，針對此一缺點，IE提出了Inline Frame的概念。IE可以讓您在<BODY>標籤中加入分割視窗(Frame)，此時的分割視窗就好像<IMG>標籤所加入的圖片一般，所以稱為Inline Frame。

　請使用 Internet Explorer 否則您看不到 inline frame 的效果

　　看到上面的效果了嗎？您可以利用捲動軸看一下，是真的喔！現在讓我們看一下原始碼吧！
　

<IFRAME SRC="http://www.hinet.net">
請使用 Internet Explorer 否則您看不到 inline frame 的效果
</IFRAME>

　　您可以在<IFRAME>標籤加上SRC這個屬性，屬性後接上要顯示網頁名稱或是網址，如：SRC="http://www.hinet.net"。<IFRAME>...</IFRAME>組中加上的說明文字可以讓不支援此標籤組的瀏覽器也能看到相關的說明文字。

屬性	說明	範例	原始碼
ALIGN	嵌入視窗與文字的對齊方式，有Left, Right, Top, Middle, Bottom	範例	<IFRAME SRC="http://www.hinet.net" ALIGN=right> 請使用 Internet Explorer 否則您看不到 inline frame 的效果 </IFRAME>
FRAMEBORDER	設定嵌入視窗是否顯示邊框，預設值為１；設定為０則不顯示邊框	範例	<IFRAME SRC="http://www.hinet.net" frameborder=0> 請使用 Internet Explorer 否則您看不到 inline frame 的效果 </IFRAME>
HEIGHT	設定嵌入視窗的高度	範例	<IFRAME SRC="http://www.hinet.net" height=300 width=400> 請使用 Internet Explorer 否則您看不到 inline frame 的效果 </IFRAME>
WIDTH	設定嵌入視窗的寬度	範例
MARGINHEIGHT	設定嵌入視窗顯示內容與上下邊界的距離	範例	<IFRAME SRC="http://www.hinet.net" marginheight=30 marginweight=30> 請使用 Internet Explorer 否則您看不到 inline frame 的效果 </IFRAME>
MARGINWIDTH	設定嵌入視窗顯示內容與左右邊界的距離	範例
SCROLLING	設定嵌入視窗是否顯示捲軸，有YES, NO, AUTU(預設值)三種	範例	<IFRAME SRC="http://www.hinet.net" scrolling=no> 請使用 Internet Explorer 否則您看不到 inline frame 的效果 </IFRAME>
NAME	設定嵌入視窗的名稱，加上超連結功能時可以和 TARGET 配合使用，範例如下：
中華電信　奇摩站　蕃著藤請使用 Internet Explorer 否則您看不到 inline frame 的效果

原始碼如下：

請使用 Internet Explorer 否則您看不到 inline frame 的效果

</IFRAME>

搜尋引擎的製作

　　一般而言，各大搜尋引擎大都是利用表單製作介面，因此，我們只要在我們的網頁上設定相同的表單，將表單內容傳送到別的網站上的cgi主機上，大致上，我們都能得到正確的搜尋結果。

以奇摩站為例，底下是原始檔：

　　白色字是主要的程式碼，action標籤後面接的是搜尋引擎的網址，整個表單是利用get的方式傳送資料。
　　文字方塊的名稱query，這相當重要，必須和奇摩站中，搜尋引擎的名稱相同才行。至於圖片的來源照上面的網址寫就行了。

以蕃薯藤為例：

　　蕃薯藤搜尋引擎的圖形是由六個小圖形所組成的，所以你要出現上面一般的圖形就必需將六個小圖形複製到你的目錄中才行。底下我們看一下簡化版的蕃薯藤搜尋引擎做法。

　這個範例還是利用表單來傳送資料，action標籤後面接的是搜尋引擎的網址，整個表單是利用get的方式傳送資料。
　　文字方塊的名稱k，這相當重要，必須和蕃薯藤站中，搜尋引擎的名稱相同才行。這次我們利用submit這個按來提送資料。

　以NOVA為例：

如果你希望一次就能出現多個搜尋引擎供使用者選擇，那麼借助NOVA的幫助是一個不錯的決定，底下是原始碼：

<form action="http://www.nova.net.tw/cgi-bin/novasearch.pl"
method="POST" target="resource window">
<div align="center"><center><table border="1" cellspacing="1"
width="450">
<tr>
<td bgcolor="#0282FF"><a name="SH"><font
color="#FFFFFF" size="3">NOVA 搜尋器 V3.14</font></a></td>
</tr>
<tr>
<td bgcolor="#C8C8C8"><font color="#000000" size="3">搜
尋引擎：</font><font color="#000000"><select
name="service" size="1">
<option value="nova">中文： NOVA 站內資料速查 </option>
<option selected value="kimo">中文： KIMO 奇摩站搜尋 </option>
<option value="gais">中文： GAIS 網路資源搜尋 </option>
<option value="whatsite">中文：哇塞中文搜尋 </option>
<option value="csie">中文：台灣蕃薯藤 yam </option>
<option value="hinet">中文：中華電信 HiNet </option>
<option value="seed">中文：資策會 SEEDNet 台灣商業網 </option>
<option value="phecda">中文：怪獸搜尋 </option>
<option value="yahoo">英文：YAHOO </option>
<option value="excite">英文：Excite </option>
<option value="altavista-e">英文：AltaVista </option>
<option value="infoseek">英文：infoseek </option>
<option value="lycos">英文：Lycos </option>
<option value="jyahoo">日文：YAHOO </option>
<option value="ftps-tw">檔案-台灣： FTP Search 檔案搜尋 </option>
<option value="gaisftp">檔案-台灣： GAIS 檔案搜尋 </option>
<option value="astalavista">破解-綜合：AltaVista </option>
</select> </font></td>
</tr>
<tr>
<td bgcolor="#C8C8C8"><font color="#000000" size="3">搜
尋字串：</font><input type="text" size="20"
maxlength="35" name="query"> <input type="submit"
value="開始"> <input type="reset" value="清除"></td>
</tr>
</table>
</center></div>
</form>

NOVA 搜尋器 V3.14

搜尋引擎：

搜尋字串：

網頁宣傳

　　在您完成了一個網站之後，除非您是要自已欣賞，大概您會希望有多一點人來觀賞您的網站。如果您忘了為它作宣傳，因該是不會有人知道你網站的存在。網站宣傳又是另一個新的挑戰，不要以為漂亮、實用的網頁一定訪客最多，事實上有很多熱門的網站都其貌不揚，只是他們善於宣傳罷了。

　　宣傳網站的方法很多，例如：ICQ 連鎖訊息，朋友連結，發表於新聞組，登錄留言板等等。這些都很容易，但因不關HTML的語法，所以在這裏省略了。這裏所介紹會是一些較難掌握的方法。當然是免費的，但盡可能所有方法都嘗試。

　　登錄搜找引擎是您免費宣傳網站的最好方法。在網路上的搜尋引擎，按登錄方式分為兩類：
第一類需要你於登錄時填入詳細的資料；
第二類則只需填入電子郵件位址及網址，或只需要網址。

　　第一類雖然填入的資料頗多但較易掌握，只要正確填寫便可以，那些搜尋引擎會記錄你所填入的資料，當被瀏覽者成功搜索時所顯示的也是那些資料，所以畫面十分整齊。

作法：

　　通常會先把中英文的關鍵字（Keyword）及描述（Description）先以文字檔儲存，方便逐一登錄尋找引擎，或日後之用。填寫中文搜尋引擎的網站名稱時嘗試中英夾雜，如 ICQ Garden 國際 ICQ 交友會，若該尋找引擎以字母排列後按筆劃，那末你可得到較前的排位。

　　第二類屬 Meta Search Engine，它會按你填入的網址立即檢查你的網頁，搜索可記錄的資料并存到它的伺服器中，當被瀏覽者成功搜索時顯示的便是那些被自動記下的資料，通常雜亂無章，所以登錄第二種尋找引擎你需要細讀接下去的篇章。

Title 標記：
　　此標記夾著的標題不但會被顯示為搜索結果的， title 也是被搜索的依據，所以包括一些 Keyword 是明智的，如：

<TITLE>音樂天堂 - Midi collection</TITLE> (較好)
<TITLE>音樂天堂</TITLE> (次之)
<TITLE>Software, Midi, MP3, Real Audio</TITLE> (較好)
<TITLE>Software collection</TITLE> (次之)

Meta 標記：
　　Meta 標記是放在 HTML 文件的開頭部分即 <HEAD> 與 </HEAD> 之間，它的功能之一便是向尋找引擎介紹你的網頁，這一節只介紹三種 Meta 標記 description, keywords 及 robots。

原始碼：

<HEAD>
<TITLE>enPal Garden - Free Penfriendship Service<TITLE>
<META name="description" content="Free international penfriendship service, bringing people together.">
<META name="keywords" content="email pal, email friend, friendship, meet, romance, love, chat, search people">
</HEAD>

你的網頁記錄於尋找引擎會顯示如下：
PenPal Garden - Free Penfriendship Service
Free international penfriendship service, bringing people together.

Description
　　是該網頁的描述。你通常已預備好長及短兩種吧，這處用的是短的那種，大約 2 至 3 句，不要超過100 個字元。

Keywords
　　是令你的記錄被成功搜索的關鍵字，尋找引擎只會搜索 Title 及 Keywords 中的文字，每頁具適當而不同的 Title, Description, Keywords 是應該的。

　　關鍵字以逗號隔開，最好長至超過 255，而重要的要放在前端。於 Keywords 中的關鍵字一般不要重複多於 5 次，若次數太多的話尋找引擎會冊除你的登錄。

　　關鍵字可適當使用一些 2 至 3 字的詞組，如 webpage creation 比 webpage, creation 好，因為瀏覽者就算不理智地輸入一個字以搜索，你的記錄也不見得會放在幾十萬個結果的前端，若他輸入 webpage creation 去查詢的話，你的網頁被成功瀏覽的機會就較大，亦表示你的網頁正迎合他的興趣。

Robots
　　如 <META name="robots" content="NOINDEX"> 表示吩咐尋找引擎不要記錄該一頁。不必設為 content="AUTO" 了，那是內定值。有些尋找引擎不支援 robots，有意修改或刪除記錄，那末要使用 robots.txt 了。

動態連結(Refresh)

　　動態連結標記<META>分為兩個部分，一是「http-equiv = "refresh"」，是指定動態連結至別的檔案或網址；另一是「content = "秒數 ; URL = 檔案名稱或網址"，是指實際連結的檔案。先看一下實際的範例，每 3 秒鐘會轉換另一個網頁。

　　這個標記是屬性檔頭宣告 <HEAD> 及 </HEAD> 之間的標記，就像主題標記一樣，範例的原始內容如下：

<body>
<h1 align="center">這是第<font color="#0000FF">一</font>個網頁</h1>
<h1 align="center">3 秒後切到第<font color="#0000FF">二</font>個網頁</h1>
</body>
</html>

　　另一個動態文件排列的標記格式為：

　　動態連結標記<META>分為兩個部分，一是「http-equiv = "content-type"」，另一是「content = "text/html; charset=big5"，其中「CHARSET = BIG5」是指中文的動態排列用 big5 碼來做。這個標記是屬性檔頭宣告 <HEAD> 及 </HEAD> 之間的標記。這個標記的主要目的在讓 HTML 的本文能自動依瀏覽器的寬度自動換列。

代號	效果	代號	效果
0	方形向中央收縮	12	溶解效果
1	方形向四方散開	13	垂直關門效果
2	圓形向中央收縮	14	垂直開門效果
3	圓形向四方散開	15	淡入效果
4	向上方擦去	16	淡出效果
5	向下方擦去	17	往左下擦去
6	向右邊擦去	18	往左上擦去
7	向左邊擦去	19	往右下擦去
8	垂直百葉窗	20	往右上擦去
9	文平百葉窗	21	水平隨機切換
10	水平方格右滑	22	垂直隨機切換
11	垂直方格下落	23	隨機切換

<BODY BGCOLOR=AQUA>> 背景是水藍色的 </BODY>	<BODY BGCOLOR=#0000FF > 背景是藍色的 </BODY>
顯示結果	顯示結果

aqua	水藍色	black	黑色	blue	深藍色
yellow	黃色	gray	灰色	green	綠色
lime	萊姆色	maroon	粟色	navy	軍艦藍
olive	橄欖綠	purple	紫色	red	紅色
sliver	銀色	teal	藏青色	white	白色

落日照大旗