HTML 的顏色表示可分兩種：

　　●　以命名方式定義常用的顏色，如 RED。
　　●　以 RGB 值表示，如 #FF0000 表示 red。

　　命名方式涵括的色種不多亦不甚方便，較少采用，以下介紹 RGB 值的原理：

　　眾所皆知顏色是由 “red” “green” “blue” 三原色組合而成的，在 HTML 中對於彩度的定義是 采十六進位的，對於三原色 HTML 分別給予兩個十六進位去定義，也就是每個原色可有 256 種彩度，故此三原色可混合成一千六佰多萬的顏色。

　　例如
　　白色的組成是 red=ff, green=ff, blue=ff, RGB 值即為 ffffff
　　紅色的組成是 red=ff, green=00, blue=00, RGB 值即為 ff0000
　　綠色的組成是 red=00, green=ff, blue=00, RGB 值即為 00ff00
　　藍色的組成是 red=00, green=00, blue=ff, RGB 值即為 0000ff
　　黑色的組成是 red=00, green=00, blue=00, RGB 值即為 000000

　　於應用時常在每個 RGB 值之前加上符號 # 以示分別，但不加亦可。

　　■ HTML 基本架構：

選按不同顏色按鍵以測試前景顏色效果 (只適合 Internet Explorer)             選按不同顏色按鍵以測試背景顏色效果             或輸入一個 RGB 顏色碼或名稱

　　■ 16 常用顏色表：

Color	Value	Name		Color	Value	Name
	#00FFFF	aqua			#808080	gray
	#000080	navy			#C0C0C0	silver
	#000000	black			#008000	green
	#808000	olive			#008080	teal
	#0000FF	blue			#00FF00	lime
	#800080	purple			#FFFF00	yellow
	#FF00FF	fuchsia			#800000	maroon
	#FF0000	red			#FFFFFF	white

　■ 其它常用顏色表：

Color	Value	Name		Color	Value	Name
	#F0F8FF	aliceblue			#A00000	antiquewith
	#7FFFD4	aquamarine			#F0FFFF	azure
	#F5F5DC	beige			#FFE4C4	bisque
	#000000	black			#FFEBCD	blanchedalmond
	#0000FF	blue			#8A2BE2	blueviolet
	#A52A2A	brown			#DEB887	burlywood
	#5F9EA0	cadetblue			#7FFF00	chartreuse
	#D2691E	chocolate			#FF7F50	coral
	#C0F000	cornfloewrblue			#FFF8DC	cornsilk
	#00FFFF	cyan			#00008B	darkblue
	#008B8B	darkcyan			#B8860B	darkgoldenrod
	#A9A9A9	darkgray			#006400	darkgreen
	#DA0000	darkhaki			#8B008B	darkmagenta
	#556B2F	darkolivegreen			#DA000E	darkorenge
	#9932CC	darkorchid			#8B0000	darkred
	#E9967A	darksalmon			#8FBC8F	darkseagreen
	#483D8B	darkslateblue			#2F4F4F	darkslategray
	#00CED1	darkturquoise			#9400D3	darkviolet
	#FF1493	deeppink			#00BFFF	deepskyblue
	#696969	dimgray			#1E90FF	dodgerblue
	#B22222	firebrick			#FFFAF0	floralwhite
	#228B22	forestgreen			#DCDCDC	gainsboro
	#00000E	gostwhite			#FFD700	gold
	#00E00D	golenrod			#808080	gray
	#008000	green			#ADFF2F	greenyellow
	#F0FFF0	honeydew			#FF69B4	hotpink
	#CD5C5C	indianred			#FFFFF0	ivory
	#F0E68C	khaki			#E6E6FA	lavender
	#FFF0F5	lavenderblush			#7CFC00	lawngreen
	#FFFACD	lemonchiffon			#ADD8E6	lightblue
	#F08080	lightcoral			#E0FFFF	lightcyan
	#0000E0	lightgodenrod			#0000E0	lightgodenrodyellow
	#0000A0	lightgray			#90EE90	lightgreen
	#FFB6C1	lightpink			#FFA07A	lightsalmon
	#20B2AA	lightseagreen			#87CEFA	lightskyblue
	#0000EB	lightslateblue			#778899	lightslategray
	#B0C4DE	lightsteelblue			#FFFFE0	lightyellow
	#32CD32	limegreen			#FAF0E6	linen
	#FF00FF	magenta			#800000	maroon
	#66CDAA	mediumaquamarine			#0000CD	mediumblue
	#BA55D3	mediumorchid			#ED0000	mediumpurpul
	#3CB371	mediumseagreen			#7B68EE	mediumslateblue
	#00FA9A	mediumspringgreen			#48D1CC	mediumturquoise
	#C71585	mediumvioletred			#191970	midnightblue
	#F5FFFA	mintcream			#FFE4E1	mistyrose
	#FFE4B5	moccasin			#FFDEAD	navajowhite
	#000080	navy			#A0B0E0	navyblue
	#FDF5E6	oldlace			#6B8E23	olivedrab
	#FFA500	orange			#0E0EED	orengered
	#DA70D6	orchid			#A00D00	palegodenrod
	#98FB98	palegreen			#AFEEEE	paleturquoise
	#DB7093	palevioletred			#FFEFD5	papayawhip
	#FFDAB9	peachpuff			#CD853F	peru
	#FFC0CB	pink			#DDA0DD	plum
	#B0E0E6	powderblue			#800080	purple
	#FF0000	red			#BC8F8F	rosybrown
	#4169E1	royalblue			#8B4513	saddlebrown
	#FA8072	salmon			#F4A460	sandybrown
	#2E8B57	seagreen			#FFF5EE	seashell
	#A0522D	sienna			#87CEEB	skyblue
	#6A5ACD	slateblue			#708090	slategray
	#FFFAFA	snow			#00FF7F	springgreen
	#4682B4	steelblue			#D2B48C	tan
	#D8BFD8	thistle			#FF6347	tomato
	#40E0D0	turquoise			#EE82EE	violet
	#00E0ED	violetred			#F5DEB3	wheat
	#000E00	hite			#F5F5F5	whitesmoke
	#FFFF00	yellow

　　其他標記

　　<MARQUEE>
　　<BLINK>
　　<ISINDEX>
　　<META>
　　<LINK> 
 
　　■ <MARQUEE>：

　　<MARQUEE> 只適用於 IE ，譯為「跑馬燈」如 Status Bar 的那種，意指走動或卷動的 文字，其參數設定狻多。我先舉些例子，然後再列出各參數。
　
　　例子一： 

　　<marquee behavior=”SCROLL” direction=”LEFT” bgcolor=”#0000FF” height=”30″ width=”150″ hspace=”0″ vspace=”0″ loop=”INFINITE” scrollamount=”30″ scrolldelay=”500″>Hello</marquee>

　　●　behavior=”SCROLL”
　　決定文字的卷動方式，可選值為：
　　SCROLL 一般卷動，是內定值。
　　SLIDE 如幻燈片，一格格的，效果是文字一接觸左邊便全部消失。
　　ALTERNATE 文字向左右兩邊撞來撞去。

　　●　direction=”LEFT”
　　設定文字的卷動方向，LEFT 表示向左，是內定值，RIGHT 表示向右。

　　●　bgcolor=”#0000FF”
　　設定文字卷動范圍的背景顏色。

　　●　height=”30″ width=”150″
　　>設定文字卷動范圍，可采用相對或絕對，如 30% 或 30 等，單位為像素。

　　●　hspace=”0″ vspace=”0″
　　設定文字的水平及垂直空白位置。

　　●　loop=”INFINITE”
　　設定文字卷動次數，其值可以是正整數或 INFINITE，INFINITE 是內定值，表示無 限次。

　　●　scrollamount=”30″
　　每「格」文字之間的間隔，單位是像素。

　　●　scrolldelay=”500″
　　文字卷動的停頓時間，單位是毫秒。

　　■ <BLINK> ：
 
　　<BLINK> 是令文字閃爍，只適用於 NC，用法直接，沒有參數�？纯蠢颖阒�

　　例子：

原始碼	<blink>我是天上星，閃又閃</blink>
顯示結果	我是天上星，閃又閃

　　■ <ISINDEX> ：
 
　　<ISINDEX> 可讓某些 Web Server 找尋網頁內的關鍵字，假如你的 Web Server 提供這樣的 找尋功能，使用者的瀏覽器也支援這些找尋功能，那堋，載入網頁時就會看到一個簡單的 找尋方塊。其用法直接，沒有參數，本來是要放於 <HEAD> 標記內的，但把它放在 <BODY> 標記內亦不見有問題，請記住，3W 以反對此標記。

　　例子：

原始碼	<isindex>
顯示結果	可以搜索該索引。請鍵入要搜索的關鍵字:

　　■ <META> ：
 
　　<META> 是放於 <HEAD> 與 </HEAD>之間的標記，功用與變化等對，所以我公式化地介紹。

　　●　<meta name=”Description” content=”This is Chris’s Home Page”>
　　該網頁的描述，作用於尋找引擎的登錄

　　●　<meta name=”Keywords” content=”Chris, Web, Music, photo”>
　　該網頁的關鍵字，作用於尋找引擎的登錄

　　●　<meta http-equiv=”Expires” content=”Tue, 09 Dec 1997 00:00:00 GMT”>
　　<meta http-equiv=”Pragma” content=”no-cache”>
　　以上行功能相同，都是要瀏覽器重新載入該頁，不要使用快取檔案，當然可以修 改該 Expire 時間。

　　●　<meta http-equiv=”Content-Type” content=”text/html; charset=big5″>
　　<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
　　設定這是 HTML 文件及其編碼語系，中文網頁請使用 big5 那行，或者不設編碼亦 可，純英文網頁建議使用 iso-8859-1。

　　●　<meta name=”GENERATOR” content=”Mozilla/4.04 [en] (Win95; I) [Netscape]”>
　　<meta name=”GENERATOR” content=”Microsoft FrontPage 3.0″>
　　這只表示該網頁由甚堋編輯器寫成。

　　●　<meta http-equiv=”refresh” content=”10; url=http://www.hkiwc.com”>
　　這一行較為實用，能於預定秒數內自動轉到指定的網址。原始碼中 10 表示 10秒。
 
　　■ <LINK> ：
 
　　<LINK> 用來將目前文件與其它 URL 作連結，但不會有連結按鈕，用於 <HEAD> 標記間， 格式如下：
　　<link href=”URL” rel=”relationship”>
　　<link href=”URL” rev=”relationship”>

　　其用法我們會於 Style Sheet 一節詳細介紹。

　　只要你認識了 HTML 標記，你便會知道特殊字符的用處。

HTML 原始碼	顯示結果	描述
<	<	小於號或顯示標記
>	>	大於號或顯示標記
&	&	可用於顯示其它特殊字符
“	“	引號
®	®	己注冊
©	©	版權
™	™	商標
		半方大的空白
		全方大的空白
		不斷行的空白

　　■ ISO Latin-1 特殊字符 ：

HTML 原始碼	顯示結果	描述
Æ	Æ	Uppercase AE diphthing
Á	Á	Uppercase A, acute accent
Â	Â	Uppercase A, circumflex accent
À	À	Uppercase A, grave accent
Å	Å	Uppercase A, ring
Ã	Ã	Uppercase A, tilde
Ä	Ä	Uppercase A, dieresis or umlaut mark
Ç	Ç	Uppercase C, cedilla
Ð	Ð	Uppercase Eth, Icelandic
É	É	Uppercase E, acute accent
Ê	Ê	Uppercase E, circumflex accent
È	È	Uppercase E, grave accent
Ë	Ë	Uppercase E, dieresis or umlaut mark
Í	Í	Uppercase I, acute accent
Î	Î	Uppercase I, circumflex accent
Ì	Ì	Uppercase I, grave accent
Ï	Ï	Uppercase I, dieresis or umlaut mark
Ñ	Ñ	Uppercase N, tilde
Ó	Ó	Uppercase O, acute accent
Ô	Ô	Uppercase O, circumflex accent
Ò	Ò	Uppercase O, grave accent
Ø	Ø	Uppercase O, slash
Õ	Õ	Uppercase O, tilde
Ö	Ö	Uppercase O, dieresis or umlaut mark
Þ	Þ	Uppercase THORN, Icelandic
Ú	Ú	Uppercase U, acute accent
Û	Û	Uppercase U, circumflex accent
Ù	Ù	Uppercase u, grave accent
Ü	Ü	Uppercase U, dieresis or umlaut mark
Ý	Ý	Uppercase Y, acute accent
æ	æ	Lowercase ae diphthing
á	á	Lowercase a, acute accent
â	â	Lowercase a, circumflex accent
à	à	Lowercase a, grave accent
å	å	Lowercase a, ring
ã	ã	Lowercase a, tilde
ä	ä	Lowercase a, dieresis or umlaut mark
ç	ç	Lowercase c, cedilla
ð	ð	Lowercase eth, Icelandic
é	é	Lowercase e, acute accent
ê	ê	Lowercase e, circumflex accent
è	è	Lowercase e, grave accent
ë	ë	Lowercase e, dieresis or umlaut mark
í	í	Lowercase i, acute accent
î	î	Lowercase i, circumflex accent
ì	ì	Lowercase i, grave accent
ï	ï	Lowercase i, dieresis or umlaut mark
ñ	ñ	Lowercase n, tilde
ó	ó	Lowercase o, acute accent
ô	ô	Lowercase o, circumflex accent
ò	ò	Lowercase o, grave accent
ø	ø	Lowercase o, slash
õ	õ	Lowercase o, tilde
ö	ö	Lowercase o, dieresis or umlaut mark
ß	ß	Lowercase sharp s, German (sz ligature)
þ	þ	Lowercase thorn, Icelandic
ú	ú	Lowercase u, acute accent
û	û	Lowercase u, circumflex accent
ù	ù	Lowercase u, grave accent
ü	ü	Lowercase u, dieresis or umlaut mark
ý	ý	Lowercase y, acute accent
ÿ	ÿ	Lowercase y, dieresis or umlaut mark

　　<BGSOUND>
　　<EMBED> 
　　
　　■ <BGSOUND>：

　　<BGSOUND> 是用以插入背景音樂，但只適用於 IE，其參數設定不多。如下
　　<BGSOUND src=”your.mid” autostart=true loop=infinite>

　　●　src=”your.mid”
　　設定 midi 檔案及路徑，可以是相對或絕對。
　　●　autostart=true
　　是否在音樂檔傳完之後，就自動播放音樂。true 是，false 否 (內定值)。
　　●　loop=infinite
　　是否自動反覆播放。LOOP=2 表示重復兩次，Infinite 表示重復多次。
 
　　■ <EMBED>：

　　<EMBED> 是用以插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及 新版的 IE 都支援。其參數設定狻多。如下

　　<EMBED src=”your.mid” autostart=”true” loop=”true” hidden=”true”>

　　●　src=”your.mid”
　　設定 midi 檔案及路徑，可以是相對或絕對。

　　●　autostart=true
　　是否在音樂檔傳完之後，就自動播放音樂。true 是，false 否 (內定值)。
 
　　●　loop=”true”
　　是否自動反覆播放。LOOP=2 表示重復兩次，true 是， false 否。

　　●　HIDDEN=”true”
　　是否完全隱藏控制畫面，true 為是，no 為否 (內定)。

　　●　STARTTIME=”分:秒”
　　設定歌曲開始播放的時間。如 STARTTIME=”00:30″ 表示從第30秒處開始播放。
 
　　●　VOLUME=”0-100″
　　設定量的大小，數值是0到100之間。內定則為使用者系統本身之設定。
 
　　●　WIDTH=”整數” 和 HIGH=”整數”
　　設定控制畫面的寬度和高度。(若 HIDDEN=”no”)

　　●　ALIGN=”center”
　　設定控制畫面和旁邊文字的對　方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom。
 
　　●　CONTROLS=”smallconsole”
　　設定控制畫面的外貌。預設值是 console。
　　console 一般正常的面板 　　
　　smallconsole 較小的面板 　　
　　playbutton 只顯示播放按鈕 　　
　　pausecutton 只顯示暫停按鈕 　　
　　stopbutton 只顯示停止按鈕 　　
　　volumelever 只顯示音量調整鈕 

　　<FRAMESET> <FRAME>
　　<NOFRAMES>
　　<IFRAME> 

　　■ 框架概念 ：

　　所謂框架便是網頁畫面分成幾個框窗，同時取得多個 URL。只　要 <FRAMESET> <FRAME> 即可，而所有框架標記　要放在一個總起的 html 檔，這個檔案只記錄了該框架 如何劃分，不會顯示任何資料，所以不必放入 <BODY> 標記，瀏覽這框架必須讀取這檔 案而不是其它框窗的檔案。<FRAMESET> 是用以劃分框窗，每一框窗由一個 <FRAME> 標 記所標示，<FRAME>必須在 <FRAMESET> 范圍中使用。如下例：
 
　　<frameset cols=”50%,*”>

　　<frame name=”hello” src=”up2u.html”>
　　<frame name=”hi” src=”me2.html”>
　　</frameset>

　　此例中 <FRAMESET> 把畫面分成左右兩相等部分，左便是顯示 up2u.html，右邊則會顯示 me2.html 這檔案，<FRAME> 標記所標示的框窗永遠是按由上而下、由左至右的次序。

　　本節與 Composer 教室的【運用框架】大部分相同，只是本節增加了內容及較為詳細，正 如其它篇章一樣并不會提及網頁制作工具，若饋下學會了 HTML 相信你亦不會選用 Composer ， FrontPage 一類的工具了。

　　■ <FRAMESET> <FRAME> ：
　　
　　<FRAMESET> 稱框架標記，用以宣告HTML文件為框架模式，并設定視窗如何分割。
　　<FRAME> 則只是設定某一個框窗內的參數屬性。

　　<FRAMESET> 參數設定：

　　例子：<frameset rows=”90,*” frameborder=”0″ border=0 framespacing=”2″ bordercolor=”#008000″>

　　●　COLS=”90,*”

　　垂直切割畫面(如分左右兩個畫面)，接受整數值、百分數， * 則代表占用馀下空 間。數值的個數代表分成的視窗數目且以逗號分隔。例如 COLS=”30,*,50%” 可以 切成三個視窗，第一個視窗是 30 pixels 的寬度，為一絕對分割，第二個視窗是當 分配完第一及第三個視窗後剩下的空間，第三個視窗則占整個畫面的 50% 寬度 為 一相對分割。您可自己調整數字。

　　●　ROWS=”120,*”
　　就是橫向切割，將畫面上下分開，數值設定同上。唯 COLS 與 ROWS 兩參數盡量 不要同在一個<FRAMESET> 標記中，因 Netacape 偶然不能顯示這類形的框架，盡采用多重分割。

　　●　frameborder=”0″
　　設定框架的邊框，其值只有 0 和 1 ， 0 表示不要邊框， 1 表示要顯示邊框。（避 免使用 yes 或 no ）
　　●　border=”0″
　　設定框架的邊框厚度，以 pixels 為單位。

　　●　bordercolor=”#008000″
　　設定框架的邊框顏色。

　　●　framespacing=”5″
　　表示框架與框架間的保留空白的距離。

　　<FRAME> 參數設定：

　　例子：<frame name=”top” src=”a.html” marginwidth=”5″ marginheight=”5″ scrolling=”Auto” frameborder=”0″ noresize framespacing=”6″ bordercolor=”#0000FF”>

　　●　SRC=”a.html”
　　設定此框窗中要顯示的網頁檔案名稱，每個框窗一定要對應著一個網頁檔案。你可 使用絕對路徑或相對路徑，有關此兩者詳見於【連結進階】。

　　●　NAME=”top”
　　設定這個框窗的名稱，這樣才能指定框架來作連結，必須但任意命名。
　　
　　●　frameborder=0
　　設定框架的邊框，其值只有 0 和 1 ， 0 表示不要邊框， 1 表示要顯示邊框。（避 免使用 yes 或 no ）

　　●　framespacing=”6″
　　表示框架與框架間的保留空白的距離。

　　●　bordercolor=”#008000″
　　設定框架的邊框顏色。顏色值請參考【HTML 剖析】。

　　●　scrolling=”Auto”
　　設定是否要顯示卷軸，YES 表示要顯示卷軸，NO 表示無論如何都不要顯示， AUTO是視情況顯示。

　　●　noresize
　　設定不讓使用者可以改變這個框框的大小，亦沒有設定此參數，使用者可以很隨 意地拉動框架，改變其大小。

　　●　marginhight=5
　　表示框架高度部份邊緣所保留的空間。

　　●　marginwidth=5
　　表示框架寬度部份邊緣所保留的空間。

　　以下是一些例子：（與 Composer 教室的【運用框架】相同）

例子	HTML Code
	<frameset rows=”80,*”> <frame name=”top” src=”a.html”> <frame name=”bottom” src=”b.html”> </frameset>

例子	HTML Code
	<frameset rows=”80,*,80″> <frame name=”top” src=”a.html”> <frame name=”middle” src=”b.html”> <frame name=”bottom” src=”c.html”> </frameset>

例子	HTML Code
	<frameset cols=”150,*”> <frameset rows=”80,*”> <frame name=”upper_left” src=”a.html”> <frame name=”lower_left” src=”b.html”> </frameset> <frame name=”right” src=”c.html”> </frameset>

例子	HTML Code
	<frameset rows=”80,*”> <frame name=”top” src=”a.html”> <frameset cols=”150,*”> <frame name=”lower_left” src=”b.html”> <frame name=”lower_right” src=”c.html”> </frameset> </frameset>

例子	HTML Code
	<frameset cols=”150,*”> <frame name=”left” src=”a.html”> <frameset rows=”80,*”> <frame name=”upper_right” src=”b.html”> <frame name=”lower_right” src=”c.html”> </frameset> </frameset>

　　■ <NOFRAMES> ：
 
　　當別人使用的瀏覽器太舊，不支援框架這個功能時，他看到的將會是一片空白。為了避免 這種情況，可使用 <NOFRAMES> 這個標記，當使用者的瀏覽器看不到框架時，他就會看 到 <NOFRAMES> 與 </NOFRAMES> 之間的內容，而不是一片空白。這些內容可以是提醒 瀏覽轉用新的瀏覽器的字句，甚至是一個沒有框架的網頁或能自動切換至沒有框架的版本 亦可。

　　應用方法：

　　在<frameset> 標記范圍加入 </NOFRAMES> 標記，以下是一個例子：

　　<frameset rows=”80,*”>
　　<noframes>
　　<body>
　　很抱歉，饋下使用的瀏覽器不支援框架功能，請轉用新的瀏覽器。
　　</body>
　　</noframes>
　　<frame name=”top” src=”a.html”>
　　<frame name=”bottom” src=”b.html”>
　　</frameset>

　　若瀏覽器支援框架，那堋它不會理會 <noframes> 中的東西，但若瀏覽器不支援框架，由 於不認識所有框架標記，不明的標記會被略過，標記包圍的東西便被解讀出來，所以放在 <noframes>范圍內的文字會被顯示。

　　■ <IFRAME> ：
 
　　這標記只適用於 IE。 它的作用是在一頁網頁中間插入一個框窗以顯示另一個文件。它是 一個圍堵標記，但圍著的字句只有在瀏覽器不支援 iframe 標記時才會顯示，如<noframes> 一樣，可以放些提醒字句之類。通常 iframe 配合一個辨認瀏覽器的 Java Script 會較好，若 JavaScript 認出該瀏覽器并非 Internet Explorer 便會切換至另一版本。

　　<iframe> 的參數設定如下：

　　例子： <iframe src=”iframe.html” name=”test” align=”MIDDLE” width=”300″ height=”100″ marginwidth=”1″ marginheight=”1″ frameborder=”1″ scrolling=”Yes”>

　　●　src=”iframe.html”
　　欲顯示於此框窗的文件來源除檔案名稱，必要加上相對或絕對路徑。

　　●　name=”test”
　　此框窗名稱，這是連結標記的 target 參數所要的。

　　●　align=”MIDDLE”
　　可選值為 left, right, top, middle, bottom，作用不大。

　　●　width=”300″ height=”100″
　　框窗的寬及長，以 pixels 為單位。

　　●　marginwidth=”1″ marginheight=”1″
　　該插入的文件與框邊所保留的空間。

　　●　frameborder=”1″
　　使用 1 表示顯示邊框， 0 則不顯示。（可以是 yes 或 no）

　　●　scrolling=”Yes”
　　使用 Yes 表示容許卷動（內定）， No 則不容許卷動。

　　例子：

原始碼	<center> <iframe src=”http://m.bjzxqy.com/” name=”test” align=”MIDDLE” width=”300″ height=”100″ marginwidth=”5″ marginheight=”5″ frameborder=”1″> 很抱歉，閣下使用的瀏覽器并不支援 IFrame，不能正常瀏覽我的網頁。</iframe> </center>
顯示結果

　　<A>
　　<BASE> 

　　■ <A> ：
 
　　<A> 稱連結標記，由 <A> 與 </A> 所圍的文字、圖片等等可以成為一個連結。

　　<A> 的一般參數設定：

　　例如 <a href=”index.html” name=”hello” target=”_top”>

　　●　href=”index.html”
　　這參數不能與另一參數 name 同時使用，使用這參數才能造成可按的連結。
　　○　當作為一外部連結時：href 所設定的是該連結所要連到的文件名稱，若該文件與此html 檔不是同在一目錄請加上適當的路徑，相對絕對皆可。
　　○　當作為一內部連結時：href 所設定的是該連結所要連到的同文件內參考 點或指定文件之參考點，且不要包圍任何字畫，只加上結束標示 </a>便可以，例如 <a href=”#there”></a> 、 <a href=”index.html#there”></a> 及 <a href=”http://www.school.net.hk/~chris55/index.html#there”></a> 其中 there 便是參考點，并於其前加上符號 # 以作識別，參考點由下一個參數 name 事先於文件中埋下。

　　●　name=”hello”
　　這參數是為文件埋下參考點，作為被連結，不會被顯示。所以說造成一個內部連 結　要使用兩次 <A> 連結標記。一個使用參數 name 事先於文件中埋下一參考 點，另一個使用參數 href 連到這個參考點。

　　●　target=”_top”
　　設定連結被按後之結果所要顯示的視窗。可選值為： _blank, _parent, _self, _top, 框 窗名稱。

　　○　target=”框窗名稱”
　　這只運用於框架中，若被設定則連結結果將顯示於該“框窗名稱”之框窗 中，框窗名稱是事先由框架標記所命名。

　　○　target=”_blank” 或 target=”new”
　　將連結的畫面內容，開在新的瀏覽視窗中。

　　○　target=”_parent”
　　將連結的畫面內容，當成文件的上一個畫面。

　　○　target=”_self”
　　將連結的畫面內容，顯示在目前的視窗中。(內定值)

　　○　target=”_top”
　　將框架中連結的畫面內容，顯示在沒有框架的視窗中。（即除去了框架)

例子一：（外部連結）

　　例子二（內部連結）：請到 PenPal Garden 的 FAQ Page 刻體驗一下何為內部連結。

　　■ <BASE> ：
 
　　<BASE> 是一個連結基準標記，用以改變文件中所有連結標記的參數內定值。它只能應用 於文件的開頭部分，即標記 <HEAD> 與 </HEAD> 之間。

　　<BASE> 的一般參數設定：

　　例如 <base href=”http://www.microsoft.com/” target=”_top”>

　　●　href=”http://www.microsoft.com/”
　　設定該頁網頁中所有 HTTP 文件及圖形（包括相對路徑連結及 <IMG> 圖形標記 等）的內定路徑，其他如 ftp:// 及 gopher:// 等則不受影響。這參數只可填入一個相 對或絕對的路徑，不必填入檔案名稱。一般相對路徑連結及 <IMG> 圖形標記等是 內定以該頁網頁所在的目錄作為起點，若依這例子，該文件中所有連結將會以 http://www.microsoft.com/ 作為起點，若其中有連結如 <a href=”index.html”>Back to Main Page</a> ，那末它不會連到自已目錄下的 index.html，它將會連到 Microsoft 的 首頁，這是因為相對路徑己給 <BASE> 轉成絕對的了。
　　
　　●　target=”_top”
　　設定該頁網頁中所有連結被按後之結果所要顯示的視窗，免得分別為所有連結加 上 target 參數，常應用於框架中。其設定與 <A> 連結標記中 target 參數相同。
　　
　　例子容後再寫，你可親自嘗試或到一些以框架制作的網頁去體驗一下。

　　■ <IMG> ：

　　<IMG> 稱圖形標記，主要用以插入圖片于網頁中，至于其它用處如配合影片文件等的播 放及影像地圖（Image Map 或稱一圖多連結）則于不會在這節提及，請看【影像地圖】及 【其他標記】。
　　
　　<IMG> 的一般參數設定：

　　例如 <img src=”logo.gif” width=100 height=100 hspace=5 vspace=5 border=2 align=”top” alt=”Logo of PenPals Garden” lowsrc=”pre_logo.gif”>

　　●　src=”logo.gif”
　　圖片來源，接受 .gif, .jpg 及 .png 格式，前兩者通行己久，后者由 96 年開始發展， 于未來取代前兩者。若圖片文件與該 html 文件同處一目錄則只　寫上文件案名稱，否則 必須加上正確的途徑，相對及絕對皆可。

　　●　width=100 height=100
　　設定圖片大小，此寬度、及高度一般采用 pixels 作單位。通常只設為圖片的真實 大小以免失真，若　要改變圖片大小最好事先使用圖像編輯工具。

　　●　hspace=5 vspace=5
　　設定圖片邊沿空白，以免文字或其它圖片過于貼近。hspace 是設定圖片左右的空 間，vspace 則是設定圖片上下的空間，高度采用 pixels 作單位。

　　●　border=2
　　圖片邊框厚度。

　　●　align=”top”
　　調整圖片旁邊文字的位置，你可以控制文字出現在圖片的偏上方、中間、底端、 左右等，可選值：top, middle, bottom, left, right，內定為 botom。Netscape 還支持 texttop, baseline, absmiddle, absbottom，
　　texttop 表示圖片和文字依頂線對　，
　　baseline 表示圖片對　到目前文字行底線值，
　　absmiddle 表示圖片對　到目前文字行絕對中央，
　　absbottom 表示圖片對　到目前文字行絕對底部，（絕對底部意指它考慮到比方 y 、g、q 等字的下緣）。
　　
　　●　alt=”Logo of PenPal Garden”
　　這是用以描述該圖形的文字，若用者使用文字瀏覽器，由于不支持圖片，這些文 字更會代替圖片而被顯示。若于支持圖片顯示的瀏覽器，當鼠標移至圖片上該些 文字亦會顯示。

　　●　lowsrc=”pre_logo.gif”
　　設定先顯示低解像圖片，若所加入的是一張很大的圖片，下載　時很長，這張低 解像圖片會先被顯示以免瀏覽失卻興趣，通當是原圖片灰階版本。

　　例子一：

始碼	<img src=”girl.gif” width=100 height=112 border=0 alt=”beautiful girl”> 普通插入
顯示結果	普通插入

　　例子二：

原始碼	<img src=”girl.gif” width=100 height=112 border=0 alt=”beautiful” hspace=10 vspace=20″> 設定上下左右空白位置
顯示結果	設定上下左右空白位置

 　　例子三：

原始碼	<img src=”girl.gif” width=100 height=112 border=4 alt=”beautiful” hspace=10 vspace=20″> 設定上下左右空白位置
顯示結果	設定字畫中間對　，邊框厚度為 4。

　　例子四：

原始碼	<img src=”girl.gif” width=100 height=112 alt=”beautiful lady” align=”right” border=0> 設定圖片靠右。
顯示結果	設定圖片靠右。

　　例子五：

原始碼	<img src=”girl.gif” width=200 height=220 alt=”I’m not beautiful right now” border=0> 放大了的圖片
顯示結果	放大了的圖片

　　表單標記

　　<FORM> <INPUT>
　　INPUT 的種類： Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。
　　<SELECT> <OPTION>
　　<TEXTAREA> 

　　■ 引子

　　表單的用處很多，于網上無處不見，當然是配合 CGI 使用為佳，所以饋下有意使用或學 習 CGI 的話，表單設計見必需的，這一節介紹的標記不多，但其參數變化很多。一份表單的基本架構是：在<FORM> 標記 的包圍下加上一種或以上的表單輸入方式及一個或以上的按鍵。

　　■<FORM> <INPUT>：

　　<FORM>稱為表單標記，用以宣告此為表單模式，屬于一個容器標記，表示其它表單標記需要在它的包圍中才有效，<INPUT>便是其中的一個，用以設定各種輸入資料的方法。它 是一個空標記。
　　
　　<FORM> 的參數設定（常用）：
 
　　例如： <form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”>

　　●　action=”http://your.isp.com/cgi-local/example.cgi”
　　表單通常是與 CGI 配合使用的，參數 action 便是用以指明該 CGI 程式的位置，這 樣此表單所填的資料才能正確傳給 CGI 作處理。若饋下沒有 CGI 以進行測試，可 設定此參數為ACTION=”mailto:your@email.com” 那樣該表單所填的資料將會寄至 此電郵地址（紅色部分）。
 
　　●　method=”POST”
　　傳送資料給 CGI 的的方式，可選值為 POST, GET。你只需記住POST容許傳送大量資料，但 GET則只接受低于 1K 的資 料，所以你若看過別人的表單原始碼的話，你會發現申請表單用的是POST 而搜 找器用的是 GET。

　　<INPUT> 的參數設定（常用）：

　　由于其第一個參數 type 己有很多的選擇，而不同的選擇表示出不同的輸入方式，且其它 參數亦因此而異，故以下將獨立介紹不同輸入方式及其它參數設定。

　　●　type=”Text”
　　可選值為 Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。

　　輸入方式一： Text （單行文字盒）

　　例如<input type=”Text” name=”age” value=”20″ align=”MIDDLE” size=”2″ maxlength=”255″>

　　●　type=”Text”
　　輸入方式為 Text，能產生一單行文字盒，上限為 255 字元。

　　●　name=”age”
　　此一單行文字盒名稱，這是最重要的一個，方便 CGI 辨認由表單傳來的資料，雖 說可隨便命名，但通常 CGI 程式中都有指定名稱，若轉用其它名稱便需要修改該 CGI 程式了，名稱可為沒空白沒特別符號的英文或數字，有大小寫的分別，可以 寫成Your_Age，若有訪客于此表單此一文字盒填入 40 的話，那末傳給 CGI 的字 串便是 Your_Age=40。

　　●　value=”20″
　　此一單行文字盒內定值。若不填寫則文字盒是空白的，等待訪客親自鍵入，若 value=”20″ 的話， 20 便會出現在文字盒中，當然訪客可以修改之。

　　●align=”MIDDLE”
　　可選值：top, middle, bottom, left, right, texttop, baseline, absmiddle. 沒太大有處。

　　●　size=”2″
　　此一單行文字盒顯示的長度，若饋下是采用 Big5 編碼的中文網頁便要小心，同 size 的文字盒 NC 會顯示得比 IE 狻長。

　　●　maxlength=”255″
　　此一單行文字盒可輸入字元的上限，為方便編排資料或避免錯輸入等，宜設定上 限，例如輸入電話或 ICQ UIN 的可設為 8，年齡為 2 等。

　　例子：

始碼	<form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”> 請填入電話號碼：<input type=”Text” name=”phone” value=”” size=”10″ maxlength=”8″> </form>
顯示結果	請填入電話號碼：

　　輸入方式二： Radio （單一選擇）

　　例如：<input type=”Radio” name=”gender” value=”female” align=”MIDDLE” checked>

　　●　type=”Radio”
　　輸入方式為 Radio，能產生一單一選擇，以供點選。
 
　　●　name=”gender”
　　此一 Radio 名稱，參考 Text 部分的說明。

　　●　value=”female”
　　內定值。每一個 radio 必須及僅有一個 value，通常有同時采用兩個或以上同 name 不同 value 的 　　Radio 輸入方式，可讓使用使任選其一。

　　●　align=”MIDDLE”
　　可選值：top, middle, bottom, left, right, texttop, baseline, absmiddle。

　　●　checked
　　設該 Radio 為內定被選。同 name 的各個 Radio 中只能有一個使用，或全不使用這 參數。

　　例子：

原始碼	<form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”> 請選性別： <input type=”Radio” name=”gender” value=”Female”>女性 <input type=”Radio” name=”gender” value=”Male” checked>男性 <br>你喜歡嗎： <input type=”Radio” name=”like” value=”Yes”>喜歡 <input type=”Radio” name=”like” value=”No”>不喜歡 <input type=”Radio” name=”like” value=”NotSure”>不肯定 </form>
顯示結果	請選性別： 女性 男性 你喜歡嗎： 喜歡 不喜歡 不肯定

　　表格標記
　　<TABLE> <TR> <TD>
　　<TH>
　　<CAPTION> 

　　■ <TABLE> <TR> <TD> ：
 
　　這三個標記是定義表格的最重要的標記，可以說只學這三個己足夠。
　　<TABLE>是一個容器標記，意思是說它用以聲明這是表格而且其他表格標記只能在他的 范圍內才適用，屬容器標記的還有其他。
　　<TR>用以標示表格列（row）
　　<TD>用以標示儲存格（cell）

　　<TABLE> 的參數設定（常用）：

　　例如： <table width=”400″ border=”1″ cellspacing=”2″ cellpadding=”2″ align=”CENTER” valign=”TOP” background=”myweb.gif” bgcolor=”#0000FF” bordercolor=”#FF00FF” bordercolorlight=”#00FF00″ bordercolordark=”#00FFFF” cols=”2″>

　　●　width=”400″
　　表格寬度，接受絕對值（如 80）及相對值（如 80%）。

　　●　border=”1″
　　表格邊框厚度，不同瀏覽器有不同的內定值，故請指明。

　　●　cellspacing=”2″
　　表格格線厚度，請看例子三，那是加厚到 5 的格線。

　　●　cellpadding=”2″
　　文字與格線的距離，請看例子四，那是加至 10 的 padding。

　　●　align=”CENTER”
　　表格的擺放位置（水平），可選值為： left, right, center，請看例子五或六，那表格 是放于中間的，為怕一些瀏覽器不支援，故特加上居中標記<CENTER>，只是多 層保證而己，當然只用<CENTER>亦可。

　　●　valign=”TOP”.
　　表格內字畫等的擺放貼　位置（垂直），可選值為： top, middle, bottom。

　　●　background=”myweb.gif”
　　表格　紙，與 bgcolor 不要同用。

　　●　bgcolor=”#0000FF”
　　表格底色，與 background 不要同用，請看例子六。

　　●　bordercolor=”#FF00FF”
　　表格邊框顏色，NC 與 IE 有不同的效果，請看例子六。

　　●　bordercolorlight=”#00FF00″
　　表格邊框向光部分的顏色，請看例子二�！褐贿m用于 IE』

　　●　bordercolordark=”#00FFFF”
　　表格邊框背光部分的顏色，請看例子二，使用 bordercolorlight 或 bordercolordark 時bordercolor 將會失效�！褐贿m用于 IE』

　　●　cols=”2″
　　表格欄位數目，只是讓瀏覽器在下載表格是先畫出整個表格而己。

　　<TR> 的參數設定（常用）：

　　例如：<tr align=”RIGHT” valign=”MIDDLE” bgcolor=”#0000FF” bordercolor=”#FF00FF” bordercolorlight=”#808080″ bordercolordark=”#FF0000″>

　　●　align=”RIGHT”
　　該一列內字畫等的擺放貼　位置（水平），可選值為： left, center, right。

　　●　valign=”MIDDLE”
　　該一列內字畫等的擺放貼　位置（垂直），可選值為： top, middle, bottom。

　　●　bgcolor=”#0000FF”
　　該一列底色，請看例子五。

　　●　bordercolor=”#FF00FF”
　　該一列邊框顏色，請看例子三�！褐贿m用于 IE』

　　●　bordercolorlight=”#808080″
　　該一列邊框向光部分的顏色，請看例子三�！褐贿m用于 IE』

　　●　bordercolordark=”#FF0000″
　　該一列邊框背光部分的顏色，請看例子三，使用 bordercolorlight 或 bordercolordark 時 bordercolor 將會失效。『只適用于 IE』

　　<TD> 的參數設定（常用）：

　　例如：<td width=”48%” height=”400″ colspan=”5″ rowspan=”4″ align=”RIGHT” valign=”BOTTOM” bgcolor=”#FF00FF” bordercolor=”#808080″ bordercolorlight=”#FF0000″ bordercolordark=”#00FF00″ background=”myweb.gif”>

　　●　width=”48%”
　　該一儲存格寬度，接受絕對值（如 80）及相對值（如 80%）。

　　●　height=”400″
　　該一儲存格高度。

　　●　colspan=”5″
　　該一儲存格向右打通的欄數。請看例子六

　　●　rowspan=”4″
　　該一儲存格向下打通的列數。請看例子六

　　●　align=”RIGHT”
　　該一儲存格內字畫等的擺放貼　位置（水平），可選值為： left, center, right。

　　●　valign=”BOTTOM”
　　該一儲存格內字畫等的擺放貼　位置（垂直），可選值為： top, middle, bottom。

　　●　bgcolor=”#FF00FF”
　　該一儲存格底色，請看例子四。

　　●　bordercolor=”#808080″
　　該一儲存格邊框顏色，請看例子三。『只適用于 IE』

　　●　bordercolorlight=”#FF0000″
　　該一儲存格邊框向光部分的顏色，請看例子三�！褐贿m用于 IE』

　　●　bordercolordark=”#00FF00″
　　該一儲存格邊框背光部分的顏色，請看例子三，使用 bordercolorlight 或 bordercolordark 時 bordercolor 將會失效�！褐贿m用于 IE』

　　●background=”myweb.gif”
　　該一儲存格　紙，與 bgcolor 任用其一。

　　<OL> <LI>
　　<UL>
　　<MENU> <DIR>
　　<DL> <DT> <DD>

　　■ <OL> <LI> :
 
　　<OL>稱為順序清單標記。<LI>則用以標示清單項目。
　　所謂順序清單就是在每一項前面加上 1,2,3… 等數目，又稱編號清單。
　　<OL> 的參數設定（常用）：
　　例如： <ol type=”i” start=”4″></ol>
 
　　<OL> 的參數設定（常用）：
　　例如： <ol type=”i” start=”4″></ol>

　　♦　 type=”i”

Type	Numbering style
1	arabic numbers	1, 2, 3, …
a	lower alpha	a, b, c, …
A	upper alpha	A, B, C, …
i	lower roman	i, ii, iii, …
I	upper roman	I,

　　設定數目款式，其值有五種，請參考 右表，內定為 type=”1″。

　　♦ 　start=”4″
　　設定開始數目，不論設定了哪一數 目款式，其值只能是 1,2,3.. 等整 數，內定為 start=”1″。 

　　 <LI> 的參數設定（常用）：
　　例如： <li type=”square” value=”4″>

　　♦　type=”square”
　　只適用于非順序清單，設定符號款式，其值有三種，如下，內定為 type=”disc”：
　　符號  是當 type=”disc” 時的列項符號。
　　符號  if” width=10 height=10 border=0> 是當 type=”circle” 時的列項符號。
　　符號  是當 type=”square” 時的列項符號。

　　♦　value=”4″
　　只適用于順序清單，設定該一項的數目，其後各項將以此作為起始數目而遞增， 但前面各項則不受影響，其值只能是 1,2,3.. 等整數，沒有內定值。

　　例子：

HTML Source Code （原始碼）	瀏覽器顯示結果
My best friends: <ol> <li>Michelle Wei <li>Michael Wan <li>Gloria Lam </ol>	My best friends: Michelle Wei Michael Wan

　■ <UL> ：
 
　　<UL>稱為無序清單標記。
　　所謂無序清單就是在每一項前面加上 、、 等符號，故又稱符號清單。
　　<UL> 的參數設定（常用）：
　　例如： <UL type=”square”>

　　type=”square”
　　設定符號款式，其值有三種，如下，內定為 type=”disc”：
　　符號  是當 type=”disc” 時的列項符號。
　　符號  是當 type=”circle” 時的列項符號。
　　符號  是當 type=”square” 時的列項符號。

　　注意：由于 <UL> 及 <LI> 都有 type 這個參數，兩者盡可能選用其一。

　　例子：

HTML Source Code （原始碼）	瀏覽器顯示結果
My Homepages: <ul> <li>Penpals Garden <li>ICQ Garden <li>Software City <li>Creation of Webpage </ul>	My Homepages: Penpals Garden ICQ Garden Software City

　　■ <MENU> <DIR> ：

　　這兩個標記都不為 W3C 所贊同，希望用者能以 <ul> 及 <ol> 代之。
　　<MENU> 及 <DIR>，基本上它和 <ul> 是一樣的，在一些特別的瀏覽器可能表現出 <ol> 的 效果，于舊版的 IE 或 NC 標記 <DIR> 不顯示符號或數目。兩標記的用法與 <ul> 完全一 樣。

　　例子：
 

　　■ <DL> <DT> <DD> :
 
　　<DL>稱為定義清單標記。 <DT> 用以標示定義條目，<DD> 則用以標示定義內容。
　　所謂定義清單就是一種分二層的項目清單，其不故符號及數目。
　　三個標記都沒有常用的參數。而 <DT> <DD> 可以獨立使用，只是一些舊的瀏覽器并不支 援，如 IE 3.0。常用的如 <DD> 標記可用以制造段落第一個字前面的空白。

　　例子：

原始碼

<dl> <dt>How to use Definition List <dd>First, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML. <dt>Other things to know <dd>We usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags. </dl>

顯示結果

How to use Definition List First, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML. Other things to know We usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag,

Source Code （原始碼）	瀏覽器顯示結果
My Homepages: <dir> <li>Penpals Garden <li>ICQ Garden <li>Software City <li>Creation of Webpage </dir>	My Homepages: Penpals Garden ICQ Garden Software City