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) 選按不同顏色按鍵以測試背景顏色效果 |
■ 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 width=150>I’m a small MARQUEE</marquee> |
| 顯示結果 |
例子二：
例子三：
| 原始碼 | <marquee behavior=alternate>撞來撞去，啊！我昏啦</marquee> |
| 顯示結果 |
例子四：
| 原始碼 | <marquee scrolldelay=5 scrollamount=50>嘩！！太快了，我又昏啦</marquee> |
| 顯示結果 |
| 原始碼 | <marquee behavior=slide>This is a slide effect</marquee> |
| 顯示結果 |
<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，用法直接，沒有參數?？纯蠢颖阒?/FONT>
例子：
| 原始碼 | <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,*”> </frameset> |
| 例子 | HTML Code | |||
| <frameset rows=”80,*,80″> </frameset> |
| 例子 | HTML Code | |||
| <frameset cols=”150,*”> <frameset rows=”80,*”> </frameset> </frameset> |
| 例子 | HTML Code | ||||
| <frameset rows=”80,*”> <frameset cols=”150,*”> </frameset> </frameset> | |||||
| 例子 | HTML Code | |||
| <frameset cols=”150,*”> <frameset rows=”80,*”> </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://www.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”
將框架中連結的畫面內容，顯示在沒有框架的視窗中。（即除去了框架)
例子一：（外部連結）
| 始碼 |
<a href=http://www.bjzxqy.com>設計之家</a> <p><a href=http://www.bjzxqy.com> <img src=”link_image.gif” width=99 height=44 border=1 alt=”設計之家“></a> <p><a href=http://www.bjzxqy.com> <img src=”link_image.gif” width=99 height=44 border=0 alt=”設計之家“></a> |
| 顯示結果 |
|
例子二（內部連結）：請到 PenPal Garden 的 FAQ Page 刻體驗一下何為內部連結。
| 原始碼 | <a name=”test”></a> <a href=”#test”>本頁的內部連結</a> <br><a href=http://sj33.cn/article>跳到 設計之家平面設計</a> |
| 顯示結果 | 本頁的內部連結 |
■ <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″> 設定上下左右空白位置 |
| 顯示結果 |
|
例子四：
| 原始碼 | <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:
|
■ <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:
|
■ <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> |
| 顯示結果 |
|
| Source Code （原始碼） | 瀏覽器顯示結果 |
| My Homepages: <dir> <li>Penpals Garden <li>ICQ Garden <li>Software City <li>Creation of Webpage </dir> | My Homepages: |