Anda di halaman 1dari 33

A-1 認識 HTML 語法

HTML 語法是由標籤 (tags) 與屬性 (attributes) 所組成,瀏覽器只要看到 HTML


標籤與屬性,就可以將它解譯成網頁。

 標籤 (tag):HTML 標籤可以分成兩種,第一種是用來識別網頁上的元件或
描 述 元 件 的 樣 式 , 例 如 網 頁 標 題 <TITLE>、 網 頁 主 體 <BODY>、 標 題 1
<H1>、標題 2 <H2>、粗體 <B>、斜體 <I>、段落 <P>、項目符號 <UL>、
編號清單 <OL>…;第二種是用來指向其它資源,例如 <IMG> 可以插入
圖片、<APPLET> 可以插入 Java applets、<A> 可以插入超連結或識別網頁
上的位置…。

HTML 標籤是以 "<"、">" 兩個符號括起來,而且多數標籤會成對出現,舉


例來說,假設要將一串文字設定成斜體 (例如 Happy),那麼可以輸入文字,
然 後 分 別 在 文 字 前 後 加 上 <I> 和 </I> 標 籤 (例 如 <I>Happy</I>), 其 中
<I> 是起始標籤,</I> 是結束標籤。

<I>PHP5&MySQL 程式設計</I>

起始標籤 內容 結束標籤

當然,還是有些標籤不會成對出現,舉例來說,假設要在一串文字後面加
上中斷字元做強迫換行,那麼可以輸入文字,然後在文字後面加上 <BR>
標籤 (例如 Birthday<BR>)。

 屬性 (attribute):除了 HTML 標籤本身所能描述的特性之外,大部分標籤還


會搭配屬性,以提供更多資訊。

 HTML 標籤與屬性沒有大小寫之分,但在本附錄中,為了方便閱讀與區分,我
們將全部以大寫表示。

 HTML 標籤後面可以加上數個屬性,但標籤與屬性及屬性與屬性之間必須加上
一個空白字元,附錄 B 有 HTML 標籤與屬性速查供您參考。

A-2
HTML 語法教學 A

舉例來說,假設要將一串文字設定成標題 1,而且文字為紅色、置中對齊,
那麼除了要在文字前後分別加上 <H1> 和 </H1> (標題 1) 標籤之外,還要
加上紅色及置中對齊屬性:

<H1 COLOR="#FF0000" ALIGN="CENTER">快樂頌</H1>

結束標籤
起始標籤

空白字元

屬性

空白字元

屬性

內容

 值 (value):通常屬性會有一個值,而且這個值必須從預先定義好的範圍內
選取,不能自行定義,例如 <HR> (水平線) 標籤的 ALIGN (對齊方式) 屬
性的值只有 LEFT、RIGHT、CENTER 三種,使用者不能自行指定其它值。

請注意,我們通常會在值的前後加上雙引號 ("),但如果值是由英文字母、
阿拉伯數字 (0 ~ 9)、減號 (-) 或小數點 (.) 所組成,那麼雙引號 (") 可以
省略不寫。

 巢狀標籤 (nesting tag):有時我們可能需要使用一個以上的標籤來表示網頁


的資料,舉例來說,假設要將一串標題 1 文字 (例如 Happy Birthday) 中的
某個字 (例如 Birthday) 加上斜體效果,那麼就要使用 <H1> 和 <I> 兩個
標籤:

<H1>Happy <I>Birthday</I></H1>

順序正確

<H1>Happy <I>Birthday</H1></I>

順序不正確

請注意巢狀標籤之間的順序,原則上,第一個結束標籤必須對應最後一個
起始標籤,第二個結束標籤必須對應倒數第二個標籤,依此類推。

A-3
 空白字元:瀏覽器會忽略 HTML 標籤之間多餘的空白字元或 [Enter],因
此,我們可以利用這個特點在 HTML 原始檔加上空白字元和 [Enter],將
HTML 原始檔排列整齊,好方便閱讀。

適度地加上空白字元和 [Enter],既
不會影響正確性又可以幫助閱讀。

請注意,正由於瀏覽器會忽略 HTML 標籤之間多餘的空白字元或 [Enter],


因此,您不能使用空白字元或 [Enter] 將網頁內容格式化,舉例來說,如
果您想將網頁的一段文字強迫換行,那麼必須在這段文字前面插入 <BR>
標籤,光在 HTML 原始檔中按 [Enter],是不能強迫換行的。

 特殊字元:HTML 網頁有一些特殊字元,例如小於 (<)、大於 (>)、雙引號


(")、&、空白字元…,如果要在網頁上顯示這些字元,那麼不能直接使用
鍵盤輸入,而是要分別輸入 &lt;、&gt;、&quot;、&amp;、&nbsp;…,附錄
C 有完整的 HTML 特殊字元表供您參考。

錯誤寫法 瀏覽結果
使用<BR>做強迫中斷

正確寫法 瀏覽結果
使用&lt;BR&gt 做強迫中斷

A-4
HTML 語法教學 A

A-2 HTML 網頁的整體架構


HTML 網頁的整體架構分成三個部分-HTML 版本宣告、標題宣告、網頁主體,
下面是一個例子:

\append1\hello.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html40/strict.dtd"> HTML 版本宣告
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 標題宣告
<TITLE>我的第一個網頁</TITLE>
</HEAD>
<BODY> 網頁標題
Hello World! 網頁主體
</BODY>
</HTML>

網頁內容 網頁檔名

 <!DOCTYPE> 標籤:這個標籤用來宣告 HTML 網頁的版本訊息。

 <HTML>...</HTML> 標籤:這個標籤用來識別 HTML 網頁,如果 HTML 網


頁已經有 <!DOCTYPE> 標籤,那麼 <HTML> 標籤可以省略不寫,之所以
有這個標籤的存在,主要是考慮到不支援 <!DOCTYPE> 標籤的瀏覽器。
當我們撰寫網頁時,<HTML> 標籤是放在 <!DOCTYPE> 標籤後面,而且
是成對出現,也就是必須加上結束標籤 </HTML>。

A-5
 <HEAD>...</HEAD> 標籤:這個標籤包含網頁的相關資訊,例如網頁標題、
樣式定義、網頁使用的 scrips、對搜尋引擎有幫助的關鍵字…。當我們撰寫
網頁時,<HEAD> 標籤是放在 <HTML> 標籤後面,而且是成對出現,也
就是必須加上結束標籤 </HEAD>。

◆ <META> 標籤:這個標籤用來指定網頁的編碼方式為 UTF-8,如果網頁有


輸出中文到用戶端瀏覽器,就一定要加上這行敘述,否則可以省略不寫。

◆ <TITLE>...</TITLE> 標籤:這個標籤用來設定網頁標題,該標題會顯示在
瀏覽器的標題列。當我們撰寫網頁時,<TITLE> 標籤一定要放在 <HEAD>...
</HEAD> 標籤內,而且是成對出現,也就是必須加上結束標籤 </TITLE>。

 <BODY>...</BODY> 標籤:這個標籤用來設定網頁主體,包括網頁的文字、
圖片、影像、動畫、色彩、音效、超連結…。當我們撰寫網頁時,<BODY>
標籤是放在 <HEAD>...</HEAD> 標籤後面,而且是成對出現,也就是必須
加上結束標籤 </BODY>。

請注意,除了 HTML 標籤本身所能描述的特性之外,大部分標籤還會搭配屬性,


以提供更多資訊,在此,我們僅示範性的列出 <BODY>...</BODY> 標籤的屬性
做說明,其它標籤的屬性請參閱附錄 B。

<BODY> 標籤的屬性 說明

ALINK = "#RRGGBB" 或 "..." 設定超連結文字被選取時的色彩。

BACKGROUND = "URL" 設定網頁背景圖片的相對或絕對位置。

BGCOLOR = "#RRGGBB"或 "..." 設定網頁背景色彩。

BGPROPERTIES = "FIXED" 設定網頁背景圖片為浮水印 (僅適用於 IE)。

CLASS = "..." 設定 <BODY> 標籤的樣式類別。

ID = "..." 設定 <BODY> 標籤的 ID 識別字。

LEFTMARGIN = "n" 設定網頁的左邊界大小 (n 為像素點數,僅適用於 IE)。

LINK = "#RRGGBB" 或 "..." 設定尚未瀏覽過之超連結文字的色彩。

SCROLL = "{YES,NO}" 設定是否要顯示網頁的捲軸 (僅適用於 IE 4)。

A-6
HTML 語法教學 A

屬性 說明

STYLE = "..." 設定 <BODY> 標籤的樣式表命令。

TEXT = "#RRGGBB"或"..." 設定網頁的文字色彩。

TITLE = "..." 設 定 <BODY> 標 籤 的 標 題 , 瀏 覽 器 可 能 用 它 做 為


提示文字。

TOPMARGIN = "n" 設定網頁的上邊界大小 (n 為像素點數,僅適用於 IE)。

VLINK = "#RRGGBB" 或 "..." 設定已瀏覽過之超連結文字的色彩。

這 個 標 籤 亦 接 受 LANG 、 DIR 、 onLoad 、 onUnLoad 、 onClick 、 onDblClick 、


onMouseDown、onMouseUp、onMouseOver、onMouseMove、onMouseOut、onKeyPress、
onKeyDown、onKeyUp 等 屬性,請參閱第 A-3 節的 說明。

顏色 值 顏色 值

Black (黑 ) "#000000" Silver (銀) "#C0C0C0"

Gray (灰 ) "#808080" White (白) "#FFFFFF"

Maroon (褐 ) "#800000" Red (紅 ) "#FF0000"

Green (綠) "#008000" Teal (藍綠) "#008080"

Navy (深藍) "#008000" Yellow (黃) "#FFFF00"

Olive (橄欖 ) "#808000" Blue (藍) "#0000FF"

Purple (紫) "#800080" Lime (螢光綠) "#00FF00"

Aqua (水藍) "#00FFFF" DarkBlue (深藍 ) "#00008B"

Darkgreen (深綠) "#006400" Cyan (藍綠 ) "#00FFFF"

Seagreen (海綠) "#2E8B57" Indigo (深紫藍) "#4B0082"

Brown (棕色) "#A52A2A" Pink (粉紅 ) "#FFC0CB"

Orange (橘色) "#FFA500" DarkOrange (深橘色 ) "#FF8C00”

Deeppink (深粉紅) "#FF1493" Lightyellow (淡黃 ) "#FFFFE0"

Snow (雪白) "#FFFAFA" Salmon (褚色) "#FA8072"

Chocolate (巧克力色) "#D2691E" Khaki (卡其色) "#F0E68C"

A-7
A-3 事件處理程式
「事件處理程式」(event handler) 指的是將瀏覽者的動作 (例如按下滑鼠或按鍵)
和 script 程式連結,換句話說,當瀏覽者做下某些動作時,就去執行指定的 script
程式。許多 HTML 標籤均接受如下屬性,以指定事件處理程式,其中 onSubmit
和 onReset 只能用在 <FORM> 標籤,onSelect 只能用在 <INPUT> 和 <TEXTAREA>
標籤,onChange 只能用在 <INPUT>、<SELECT> 和 <TEXTAREA> 標籤。

屬性 說明

onLoad = "..." 設定當瀏覽器載入網頁或所有框架後所要執行的 script。

onUnload = "..." 設定當瀏覽器移除視窗或框架內的網頁後所要執行的 script。

onClick = "..." 設定當滑鼠在元件上按一下時所要執行的 script。

onDblClick = "..." 設定當滑鼠在元件上按兩下時所要執行的 script。

onMouseDown = "..." 設定當滑鼠在元件上按下按鍵時所要執行的 script。

onMouseUp = "..." 設定當滑鼠在元件上放開按鍵時所要執行的 script。

onMouseOver = "..." 設定當滑鼠移過元件時所要執行的 script。

onMouseMove = "..." 設定當滑鼠在元件上移動時所要執行的 script。

onMouseOut = "..." 設定當滑鼠自元件上移開後所要執行的 script。

onFocus = "..." 設定當瀏覽者將焦點移到元件上時所要執行的 script。

onBlur = "..." 設定當瀏覽者將焦點自元件上移開後所要執行的 script

onKeyPress = "..." 設定在元件上按下再放開按鍵時所要執行的 script。

onKeyDown = "..." 設定在元件上按下按鍵時所要執行的 script。

onkeyUp = "..." 設定在元件上放開按鍵時所要執行的 script。

onSubmit = "..." 設定當瀏覽者傳送表單後所要執行的 script。

onReset = "..." 設定當瀏覽者清除表單後所要執行的 script。

onSelect = "..." 設定當瀏覽者在文字欄位選取文字後所要執行的 script。

onChange = "..." 設定當瀏覽者修改表單欄位後所要執行的 script。

A-8
HTML 語法教學 A

A-4 資料編輯與格式化

A-4-1 設定標題格式
HTML 提 供 六 種 層 次 的 標 題 格 式 <H1>...</H1>、 <H2>...</H2>、 <H3>...</H3>、
<H4>...</H4>、<H5>...</H5>、<H6>...</H6>,其中以 <H1>...</H1> (標題 1) 的字
體最大,<H6>...</H6> (標題 6) 的字體最小。這些標題標籤有個最重要的屬性-
ALIGN = "{LEFT, CENTER, RIGHT}",用來表示標題文字向左對齊、置中或向右
對齊,下面是一個例子,如果您要查看這些標籤的所有屬性,可以參閱附錄 B。

\append1\heading.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>示範標題格式網頁</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="LEFT">這是向左對齊的標題 1</H1>
<H2 ALIGN="CENTER">這是置中的標題 2</H2>
<H3 ALIGN="RIGHT">這是向右對齊的標題 3</H3>
<H4>這是標題 4 (Heading 4)</H4>
<H5>這是標題 5 (Heading 5)</H5>
<H6>這是標題 6 (Heading 6)</H6>
</BODY>
</HTML>

雖然有六種標題,但建議您
不要使用三種以上的標題,
免得造成網頁的組織紊亂。

A-9
A-4-2 設定段落格式
網頁內容通常是由數個段落所組成,而輸入段落最簡單的方式就是使用
<P>...</P> 段 落 標 籤 。 另 外 , HTML 還 提 供 其 它 幾 種 段 落 格 式 , 例 如
<ADDRESS>...</ADDRESS> 位 址 段 落 標 籤 、 <BR> 強 迫 換 行 標 籤 、
<BLOCKQUOTE>...</BLOCKQUOTE> 左 右縮 排標 籤、<PRE>...</PRE> 預 先格式
化標籤。

由於瀏覽器會忽略 HTML 標籤之間多餘的空白字元或 [Enter],因此,即便您在


HTML 原始檔中按 [Enter] 企圖做分段,瀏覽器一樣會忽略 [Enter],而將文字
全部顯示成相同段落,倘若想如我們所願地將一篇文章顯示成四個段落,那麼
得在每個段落前後分別加上開始標籤 <P> 和結束標籤 </P>,例如:

\append1\p.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>使用段落標籤的網頁</TITLE>
</HEAD>
<BODY>
在每行文字前後加
<P>天命之謂性,率性之謂道,修道之謂教。</P> 上 <P> 和 </P>
<P>道也者,不可須臾離也;可離,非道也。</P>
<P>是故,君子戒慎乎其所不賭,恐懼乎其所不聞。</P>
<P>莫見乎隱,莫顯乎微,故君子慎其獨也。</P>
</BODY>
</HTML>

瀏覽結果顯示成四個段落

A-10
HTML 語法教學 A

<P> 標籤的屬性 說明

ALIGN = "{LEFT, CENTER, RIGHT}" 段落向左對齊、置中或向右對齊。

WIDTH = "n" 設定段落的寬度 (n 為像素點數,僅適用於 IE)。

這個標籤亦接受 LANG、DIR、CLASS、ID、STYLE、TITLE、onClick、onDblClick、
onMouseDown、onMouseUp、onMouseOver、onMouseMove、onMouseOut、onKeyPress、
onKeyDown、onKeyUp 等 屬性。

A-4-3 預先格式化段落
由於瀏覽器會自動忽略 HTML 標籤之間多餘的空白字元和 [Enter],導致在輸入
某些網頁內容時相當不方便,此時,我們可以使用 <PRE>...</PRE> 標籤,預先
將網頁內容格式化。

\append1\pre.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>示範預先格式化網頁</TITLE>
</HEAD>
<BODY>
<PRE> 利用 <PRE> 標籤做預先格式化
#include <studio.h>
void main()
{
printf("Hello World!\n")
}
</PRE>
</BODY>
</HTML>

A-11
A-4-4 註解
<!-- --> 標籤可以在網頁上插入註解,而且註解不會顯示在瀏覽器,例如下面的
網頁瀏覽結果將是一片空白:

\append1\comment.htm
<HTML>
<BODY>
<!--註解不會顯示在瀏覽器-->
</BODY>
</HTML>

A-4-5 常見的文字格式
粗體、斜體、加底線、大字型、上標、下標...,均是相當常見的文字格式,現
在,我們就來看看這些文字格式的 HTML 標籤及瀏覽結果。

範例 瀏覽結果 說明

預設的格式 Format 預設的格式

<B>粗體 Bold</B> 粗體

<I>斜體 Italic</I> 斜體

<U>加底線 Underlined</U> 加底線

<BIG>BIG</BIG>&nbsp;FONT 大字型

H<SUB>2</SUB>O 下標

X<SUP>3</SUP> 上標

<SMALL>SMALL</SMALL>&nbsp;FONT 小字型

A-12
HTML 語法教學 A

範例 瀏覽結果 說明

<EM>強調斜體 Emphasized</EM> 強調斜體

<STRONG>強調粗體 Strong</STRONG> 強調粗體

<DFN>定義 Definition</DFN> 定義文字

<CODE>程式碼 Code</CODE> 程式碼文字

<SAMP>範例 SAMPLE</SAMP> 範例文字

<KBD>鍵盤 Keyboard</KBD> 鍵盤文字

<VAR>變數 Variable</VAR> 變數文字

<CITE>引用 Citation</CITE> 引用文字

<ABBR>縮寫,如 HTTP</ABBR> 縮寫文字

<ACRONYM>頭字語 Acronym</ACRONYM> 頭字語

<STRIKE>刪除字 Strike</STRIKE> 刪除字

<S>刪除字 Strike</S> 刪除字

<TT>Monospace&nbsp;Font</TT> 打字機字體

<Q>Gone with the Wind</Q> 引用語

這些標籤均接受 CLASS、ID、STYLE、TITLE、LANG、DIR、onClick、onDblClick、
onMouseDown、onMouseUp、onMouseOver、onMouseMove、onMouseOut、onKeyPress、
onKeyDown、onKeyUp 等 屬性。

A-4-6 水平線
我們可以使用 <HR> 標籤在網頁上插入水平線,這個標籤的重要屬性有 ALIGN
= "{LEFT, CENTER, RIGHT}" (水平線向左對齊、置中或向右對齊)、COLOR =
"#RRGGBB " 或 "..." (水平線顏色)、WIDTH = " n" (水平線寬度) 、SIZE = " n" (水
平線高度),例如顏色為 Green、寬度為視窗比例 50%、高度為 5 像素點、靠左
對齊的水平線可以寫成如下:

<HR COLOR="Green" ALIGN="LEFT" WIDTH="50%" SIZE="5">

A-13
A-4-7 文字字型、色彩與大小
網頁上一成不變的字型、色彩與大小已經開始令您厭倦了嗎?如果是的話,那
麼就讓我們使用 <FONT>...</FONT> 標籤的 FACE、COLOR、SIZE 屬性,來改
變文字的字型、色彩與大小吧。

\append1\font.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>示範字型、色彩及大小的網頁</TITLE>
</HEAD>
<BODY>
聽風在唱<BR>
<FONT SIZE="1" COLOR="Green" FACE="華康細圓體">聽風在唱</FONT><BR>
<FONT SIZE="2" COLOR="Purple" FACE="華康行書體">聽風在唱</FONT><BR>
<FONT SIZE="3" COLOR="Red" FACE="華康流線體">聽風在唱</FONT><BR>
<FONT SIZE="4" COLOR="Navy" FACE="華康娃娃體">聽風在唱</FONT><BR>
<FONT SIZE="5" COLOR="Teal" FACE="華康彩帶體">聽風在唱</FONT><BR>
<FONT SIZE="6" COLOR="Blue" FACE="華康布丁體">聽風在唱</FONT><BR>
<FONT SIZE="7" COLOR="Olive" FACE="華康古印體">聽風在唱</FONT><BR>
</BODY>
</HTML>

A-14
HTML 語法教學 A

A-4-8 項目符號與編號清單
當您在閱讀書籍或整理資料時,可能會希望將相關的資料條列式地編列出來,
讓資料顯得有條不紊,那麼可以使用 <UL>...</UL> 標籤為資料加上項目符號,
或使用 <OL>...</OL> 標籤為資料加上編號清單。

以下面的程式碼為例,我們除了使用 <UL> 標籤設定項目符號,還使用 <LI>


標籤設定個別的項目資料,同時亦搭配 <FONT> 標籤設定項目資料的色彩、字
型等格式。

\append1\ul.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>示範項目符號的網頁</TITLE>
</HEAD>
<BODY>
<UL TYPE="CIRCLE">
<LI><FONT COLOR="#800000" FACE="華康行書體">射雕英雄傳</FONT></LI>
<LI><FONT COLOR="#800000" FACE="華康行書體">神雕俠侶</FONT></LI>
<LI><FONT COLOR="#800000" FACE="華康行書體">倚天屠龍記</FONT></LI>
<LI><FONT COLOR="#800000" FACE="華康行書體">碧血劍</FONT></LI>
</UL>
</BODY>
</HTML>

<UL> 標籤的 TYPE = "{SQUARE,


CIRCLE, DISC}" 屬性可以用來設
定項目符號的類型為 、 、 。如
果要換成圖片項目符號,可以使用
SRC 屬性設定圖片的相對或絕對位
置,這個屬性僅適用於 IE。

A-15
以下面的程式碼為例,我們除了使用 <OL> 標籤設定編號清單,還使用 <LI>
標籤設定個別的編號資料,同時亦搭配 <FONT> 標籤設定編號資料的色彩、字
型等格式。

\append1\ol.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>示範編號清單的網頁</TITLE>
</HEAD>
<BODY>
<OL TYPE="A">
<LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體">玩具總動員</FONT></LI>
<LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體">蟲蟲危機</FONT></LI>
<LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體">花木蘭</FONT></LI>
<LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體">泰山</FONT></LI>
<LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體">小美人魚</FONT></LI>
<LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體">鐘樓怪人</FONT></LI>
</OL>
</BODY>
</HTML>

<OL> 標籤的 TYPE = "{1, A, a, I, i}"


屬性可以用來設定編號的類型,預設
為阿拉伯數字,編號清單的起始值不
一定從 1、A、a、I、i 開始,您可以
使用 START 屬性設定起始值。

A-16
HTML 語法教學 A

A-5 超連結

A-5-1 建立超連結
我們可以使用 <A>...</A> 標籤在網頁上插入超連結,然後透過其 HREF = " URL"
屬性設定超連結所連結之文件的相對或絕對位置。現在,我們以下圖為例,說
明建立超連結的幾種情況:

My Web

about.htm
Support

staff.htm question.htm

 連結位於相同資料夾的文件:假設要將 staff.htm 內的文字「常見問題集」


設定成連結至 question.htm 的超連結,那麼可以採用文件相對 URL 來設定
超連結的 URL,例如 <A HREF="question.htm">常見問題集</A>。

 連結位於不同資料夾的文件:假設要將 about.htm 內的文字「員工」設定成


連結至 staff.htm 的超連結,那麼可以採用文件相對 URL 來設定超連結的
URL,例如 <A HREF="Support\staff.htm">員工</A>。

 連結 Web 上的文件:假設要將文字「HiNet」設定成連結至 HiNet 的超連結,


那麼必須採用絕對 URL,例如 <A HREF="http://www.hinet.net/">HiNet</A>。

在將文字設定成超連結後,如果以瀏覽器開啟網頁,超連結文字將變成藍色加底
線,而在超連結文字被點取後會變成紫色加底線。倘若要自行設定超連結文字的顏
色,可以使用 <BODY>… </BODY> 標籤的 LINK、 ALINK、VLINK 屬性。

A-17
A-5-2 設定連結至 E-mail 地址的超連結
網頁通常都會提供回信服務,瀏覽者只要點取網頁上的電子郵件地址、信箱之
類的圖示或文字,就可以啟動郵件編輯程式,而且收件人的地址已經自動填上。

1. 點取 E-mail 超連結

2. 自動啟動預設的郵件編
輯程式並填入收件人

當您設定連結至 E-mail 地址的超連結時,除了要使用 <A>…</A> 標籤的 HREF


屬性設定收件人的電子郵件地址之外,還要在電子郵件地址前面加上 mailto: 通
訊協定,例如:

<A HREF="mailto:jeanchen@mail.ht.net.tw">歡迎寫信給我們</A>

如果您希望在瀏覽者將指標移到超連結文字時會出現提示文字,可以在設定超
連結的同時使用 <A>…</A> 標籤的 TITLE = "..." 屬性設定提示文字。

A-18
HTML 語法教學 A

A-6 圖片

A-6-1 插入圖片
我們可以使用 <IMG> 標籤在網頁上插入圖片,其屬性如下:

 ALIGN = "{LEFT, RIGHT, TOP, MIDDLE, BOTTOM}":設定圖片的對齊方式。

 ALT = "...":設定圖片的替代顯示文字。

 BORDER = " n":設定圖片的框線粗細 ( n 為像素點數)。

 CONTROLS:當圖片為影像時,可以設定播放控制項 (僅適用於 IE)。

 DYNSRC = " URL":設定動態影像的相對或絕對位置 (僅適用於 IE)。

 HEIGHT = " n":設定圖片的高度 ( n 為像素點數)。

 HSPACE = " n":設定圖片的水平間距 ( n 為像素點數)。

 ISMAP:設定圖片為伺服器端影像地圖。

 LONGDESC = "...":設定圖片的說明文字。

 LOWSRC = " URL":設定低解析度圖片的相對或絕對位置。

 LOOP = "{ n, INFINITE}":設定視訊檔案的播放次數 (n 為次數,僅適用於 IE)。

 NAME = "...":設定圖片的名稱,以供 scripts、applets 或書籤使用。

 SRC = " URL":設定圖片的相對或絕對位置。

 START = "{FILEOPEN, MOUSEOVER}":設定讓 動態影像開始播放的事件


(僅適用於 IE)。

 USEMAP = " URL":設定影像地圖所在的檔案位置及名稱。

 VRML = "...":設定 VRML 物件的相對或絕對位置。

 VSPACE = " n":設定圖片的垂直間距 ( n 為像素點數)。

A-19
 WIDTH = " n":設定圖片的寬度 ( n 為像素點數)。

 這 個 標 籤 亦 接 受 CLASS 、 ID、 STYLE 、 TITLE 、 LANG 、 DIR 、 onClick 、


onDblClick 、 onMouseDown 、 onMouseUp 、 onMouseOver 、 onMouseMove 、
onMouseOut、onKeyUp、onKeyPress 等屬性。

A-6-2 設定圖片的高度、寬度與框線
當您在網頁上插入圖片時,除了可以使用 <IMG> 標籤的 SRC 屬性設定圖片的
相對位置或絕對位置之外,還可以分別使用 HEIGHT、WIDTH、BORDER 屬性設
定圖片的高度、寬度與框線 (以像素點為單位)。如果您沒有設定圖片的高度、
寬度與框線,那麼瀏覽器會顯示圖片預設的大小,而且不會加上框線 (即
BORDER = "0")。

\append\image1.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>設定圖片的高度、寬度與框線</TITLE>
</HEAD>
<BODY>
<IMG SRC="mulan4.gif">
高度為 136 點、
<IMG SRC="mulan4.gif" HEIGHT="136" WIDTH="120"> 寬度為 120 點
<IMG SRC="mulan4.gif" BORDER="3"> 框線為 3 點
</BODY>
</HTML>

A-20
HTML 語法教學 A

A-6-3 設定圖片的對齊方式
<IMG> 標籤的 ALIGN 屬性提供了 LEFT (靠左)、RIGHT (靠右)、TOP (靠上)、
MIDDLE (置中)、BOTTOM (靠下) 等五種對齊方式,在說明其中的差別之前,
我們先來看個例子,這個例子的兩張圖片均採用瀏覽器預設的對齊方式。

<BODY>
<P><IMG SRC="mulan1.jpg"> 沒有指定對齊方式
<FONT COLOR="Maroon" FACE="華康古印體" SIZE="5">迪士尼最新動畫鉅獻
<IMG SRC="mulan2.jpg"></FONT></P>
<P><FONT FACE="華康行書體" SIZE="5" COLOR="Maroon">Mulan-花木蘭</FONT></P>
<P><FONT FACE="華康楷書體 W3">唧唧復唧唧,木蘭當戶織,不聞機杼聲,唯聞女
嘆息。問女何所思?問女何所憶?女亦無所思,女亦無所憶......”這首耳熟能響的木
蘭詩,相信您我都背頌過,而今迪士尼將這個中國民間故事搬上動畫的舞台,就讓
我們一起來回味一下吧!</FONT></P>
</BODY>

採用瀏覽器預設的對齊方式

如果在插入第一張圖片的敘述中加上 ALIGN
= "LEFT" 屬性,令第一張圖片靠左對齊,其
它敘述維持不變,瀏覽結果如右圖所示:

<IMG SRC="mulan1.jpg" ALIGN="LEFT">

A-21
如果在插入第一張圖片的敘述中加上 ALIGN
= "RIGHT" 屬性,令第一張圖片靠右對齊,其
它敘述維持不變,瀏覽結果如右圖所示:

<IMG SRC="mulan1.jpg" ALIGN="RIGHT">

如果在插入第一張圖片的敘述中加上 ALIGN
= "TOP" 屬性,令第一張圖片靠上對齊,其它
敘述維持不變,瀏覽結果如右圖所示:

<IMG SRC="mulan1.jpg" ALIGN="TOP">

如果在插入第一張圖片的敘述中加上 ALIGN
= "MIDDLE" 屬性,令第一張圖片置中對齊,
其它敘述維持不變,瀏覽結果如右圖所示:

<IMG SRC="mulan1.jpg" ALIGN="MIDDLE">

如果在插入第一張圖片的敘述中加上 ALIGN
= "BOTTOM" 屬性,令第一張圖片靠下對齊,
其它敘述維持不變,瀏覽結果如右圖所示 (事
實上,瀏覽器預設的對齊方式通常就是
BOTTOM):

<IMG SRC="mulan1.jpg" ALIGN="BOTTOM">

A-22
HTML 語法教學 A

A-7 表格
A-7-1 插入表格
當我們要在網頁上插入表格時,通常會用到下列四個標籤,其意義如下:

 <TABLE>...</TABLE> 標籤:在網頁上標示一個表格。如果要設定表格的對
齊方式 (靠左、靠右、置中)、寬度、背景圖片、背景色彩、框線大小、框
線色彩,可以分別使用 ALIGN = "{LEFT, RIGHT, CENTER}"、WIDTH = " n"、
BACKGROUND = " URL " 、 BGCOLOR = "#RRGGBB " 、 BORDER = " n" 、
BORDERCOLOR = "# RRGG BB" 等屬性,至於暗邊框色彩、亮邊框色彩、儲
存格間距、儲存格墊充等屬性,可以參閱附錄 B。

 <TR>...</TR> 標籤:在表格中標示一列 (Row),結束標籤 </TR> 可以省略


不寫。如果要設定某一列儲存格的水平對齊方式 (靠左、靠右、置中、左右
對齊、對齊指定的字元)、垂直對齊方式 (靠上、中央、靠下、基線)、背景
色彩,可以分別使用 ALIGN = "{LEFT, RIGHT, CENTER, JUSTIFY, CHAR}"、
VALIGN = "{TOP, MIDDLE, BOTTOM, BASELINE}"、BGCOLOR = "#RRGGBB"
屬性,至於邊框色彩、暗邊框色彩、亮邊框色彩等屬性,可以參閱附錄 B。

 <TD>...</TD> 標籤:在 一列中標示一儲存格,結束標籤 </TD> 可以省 略


不寫。如果要設定某個儲存格的寬度、水平對齊方式 (靠左、靠右、置中、
左右對齊、對齊指定的字元)、垂直對齊方式 (靠上、中央、靠下、基線)、
背景圖片、背景色彩,可以分別使用 WIDTH = " n"、ALIGN = "{LEFT, RIGHT,
CENTER, JUSTIFY, CHAR}" 、 VALIGN = "{TOP, MIDDLE, BOTTOM,
BASELINE}"、BACKGROUND = " URL"、BGCOLOR = "# RRGGBB " 屬性,至
於邊框色彩、暗邊框色彩、亮邊框色彩、儲存格合併、儲存格文字換行等
屬性,可以參閱附錄 B。

 <TH>...</TH> 標籤:在 一列中標示一標題儲存格,結束標籤 </TH> 可 以


省 略 不 寫 。 <TH>…</TH> 標 籤 的 屬 性 和 <TD>…</TD> 標 籤 相 同 , 但
<TH>…</TH> 標籤內的文字會置中並加上粗體。

A-23
我們來做個練習,假設要在網頁上插入如下的 4 x 3 表格 (4 列 3 欄):

1. 首先,我們要定義表格及其
列數、欄數,在 <BODY>...
</BODY> 標 籤 之 間 加 入
<TABLE>...</TABLE> 標
籤,同時設定表格框線為
1 像素點,如果沒有設定
框線大小,表示為透明表
格,由於表格有 4 列,所以
在 <TABLE>...</TABLE>
標 籤 之 間 加 入 4 對
<TR>...</TR> 標籤。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>製作表格</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1"> 1. 加入 <TABLE>...</TABLE> 標籤
<TR>
2. 根據列數加入 <TR>...</TR> 標籤
</TR>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
<HTML>

A-24
HTML 語法教學 A

2. 接著,我們要在表格的每一列定義各個儲存格,由於表格的欄數為 3,而
且第一列為標題列,所以我們在第一對 <TR>...</TR> 標籤之間加入 3 對
<TH>...</TH> 標籤,其餘各列則各加入 3 對 <TD>...</TD> 標籤,表示每
一列有 3 欄。

<TABLE>
<TR>
<TH></TH>
<TH></TH>
<TH></TH>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>

3. 最後,在每個 <TH>...</TH> 或 <TD>...</TD> 標籤之間加入各個儲存格的


內容,就大功告成了 (網頁上有三張圖片,檔名分別為 maru1.gif、maru2.gif、
maru3.gif)。

A-25
A-7-2 設定表格的對齊方式
<TABLE> 標籤的 ALIGN 屬性提供了 LEFT (靠左)、CENTER (置中)、RIGHT (靠
右) 三種對齊方式,左上圖為預設的對齊方式 (沒有設定 ALIGN 屬性),右上圖
為靠左對齊,左下圖為置中對齊,右下圖為靠右對齊。

A-7-3 設定表格的背景色彩與背景圖片
我們可以使用 <TABLE> 標籤的 BGCOLOR、BACKGROUND 屬性設定表格的背
景色彩與背景圖片,例如 <TABLE BORDER="1" BGCOLOR="#FFEED2"> 是將表
格的背景色彩設定為 #FFEED2,<TABLE BORDER="1" BACKGROUND="bg.gif">
是將表格的背景圖片設定為 bg.gif,只要將背景圖片放在和網頁相同的資料夾
內,完整路徑就可以省略不寫。

A-26
HTML 語法教學 A

A-7-4 設定儲存格的對齊方式
儲存格的對齊方式分成水平及垂直兩個方向,如果要設定整列儲存格的水平或
垂直對齊方式,可以分別使用 <TR> 標籤的 ALIGN 和 VALIGN 屬性;如果要設
定單一儲存格的水平或垂直對齊方式,可以分別使用 <TD> 標籤的 ALIGN 和
VALIGN 屬性。

<TABLE BORDER="1" WIDTH="100%">


<TR>
<TD><IMG SRC="03.gif"></TD>
<TD ALIGN="LEFT">向左對齊</TD>
<TD ALIGN="CENTER">水平置中</TD>
<TD ALIGN="RIGHT">向右對齊</TD>
</TR>
<TR>
<TD><IMG SRC="04.gif"></TD>
<TD VALIGN="TOP">靠上對齊</TD>
<TD VALIGN="MIDDLE">垂直置中</TD>
<TD VALIGN="BOTTOM">靠下對齊</TD>
</TR>
<TR>
<TD><IMG SRC="05.gif"></TD>
<TD ALIGN="RIGHT" VALIGN="TOP">靠右上對齊</TD>
<TD ALIGN="CENTER" VALIGN="MIDDLE">水平垂直置中</TD>
<TD ALIGN="RIGHT" VALIGN="BOTTOM">靠右下對齊</TD>
</TR>
</TABLE>

A-27
A-7-5 設定儲存格的背景圖片與背景色彩
如果要設定某一列儲存格、某一個儲存格或標題儲存格的背景圖片與背景色
彩,可以分別使用 <TR>、<TD>、<TH> 標籤的 BACKGROUND 和 BGCOLOR 屬
性,下圖是將每一列儲存格設定不同背景色彩的結果:

每一列儲存格設定不同背
景色彩

而下圖是將每一列儲存格設定不同背景色彩並取消表格框線的結果:

每一列儲存格設定不同背
景色彩並取消表格框線

A-28
HTML 語法教學 A

A-8 框架網頁

A-8-1 建立框架網頁
「框架網頁」(frames) 通常會將瀏覽器視窗分割為兩個或兩個以上的部分,每
個部分會連結至不同的網頁。建立框架網頁的步驟可以簡單歸納如下:

1. 決定網頁的框架數目、大小與位置。

2. 製作框架的內容。

3. 設定框架的格式,例如設定框架的上下邊界大小、框線大小、框線色彩、
是否顯示捲軸…。

4. 針對不支援框架的瀏覽器設計網頁內容。

在此,我們會使用下列幾個標籤:

 <FRAMESET>...</FRAMESET> 標籤:這個標籤包含框架網頁的定義及各個
框架的間距、維數、屬性…。如果要設定框架網頁內的垂直框架、水平框
架、每個框架的框線大小、框線色彩,可以使用 COLS = "..."、ROWS = "..."、
BORDER = " n"、BORDERCOLOR = "..." 等屬性,至於其它屬性,可以參閱
附錄 B。

 <FRAME> 標籤:這個標籤用來定義框架網頁內某個框架的來源網頁和屬
性,它 必須放 在 <FRAMESET>...</FRAMESET> 標籤之 間。如 果要 設定 框
架的名稱、來源網頁、框線大小、框線色彩,可以使用 NAME、SRC = " URL"、
BORDER = " n"、BORDERCOLOR = "..." 等屬性,至於框架的上下邊界大小、
左右邊界大小、不允許瀏覽者以滑鼠拖曳邊框的方式改變框架的大小、框
架的捲軸顯示與否等屬性,可以參閱附錄 B。

 <NOFRAMES>...</NOFRAMES> 標籤:如果瀏覽器不支援框架,則顯示這個
標籤之間的網頁內容。

A-29
A-8-2 決定網頁的框架數目、大小與位置
網 頁 的 框 架 數 目 、 大 小 與 位 置 須 使 用 <FRAMESET>...</FRAMESET> 標 籤 的
COLS 或 ROWS 屬性來定義。一般來說,框架數目通常是以 2 為主,做水平分
割或垂直分割,但實際數目還是取決於您的設計。至於框架的大小可以採用下
列三種表示方式:

一、 以像素點數為單位:直接以像素點數表示框架的高度或寬度,例如:

\append\水平框架 1.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>以像素點為單位指定水平框架</TITLE>
</HEAD>
<FRAMESET ROWS="100,200"> 上下框架高度各為 100、200 像素點

<FRAME NAME="Top" SRC="1-1.htm"> 上方框架的名稱及來源網頁


<FRAME NAME="Bottom" SRC="1-2.htm"> 下方框架的名稱及來源網頁
</FRAMESET>
</HTML>

上方框架網頁為 <1-1.htm>

上方框架網頁為 <1-2.htm>

A-30
HTML 語法教學 A

\append\1-1.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>上方框架</TITLE>
</HEAD>
上方框架的高度為 100 像素點 上方框架 <1-1.htm> 的內容
</HTML>

\append\1-2.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>下方框架</TITLE>
</HEAD>
下方框架的高度為 200 像素點 下方框架 <1-2.htm> 的內容
</HTML>

二、 瀏覽器視窗縮放比例:根據瀏覽器視窗縮放比例指定框架的高度或寬度,
例如:

左中右框架網頁各為 <2-1.htm>、
<2-2.htm>、<2-3.htm>

A-31
\append1\垂直框架 1.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>以視窗縮放比例指定垂直框架</TITLE>
</HEAD> 左中右框架寬度各為視窗寬
度的 60%、20%、20%
<FRAMESET COLS="60%,20%,20%">
<FRAME NAME="Left" SRC="2-1.htm"> 左方框架的名稱及來源網頁
<FRAME NAME="Middle" SRC="2-2.htm"> 中間框架的名稱及來源網頁
<FRAME NAME="Right" SRC="2-3.htm"> 右方框架的名稱及來源網頁
</FRAMESET>
</HTML>

\append1\2-1.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>左方框架</TITLE>
</HEAD>
左方框架的寬度為視窗縮放比例的 60%
</HTML>

\append1\2-2.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>中間框架</TITLE>
</HEAD>
中間框架的寬度為視窗縮放比例的 20%
</HTML>

\append1\2-3.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>右方框架</TITLE>
</HEAD>
右方框架的寬度為視窗縮放比例的 20%
</HTML>

A-32
HTML 語法教學 A

三、 使用星號 (*) 表示成比例的框架或剩餘的空間:您可以使用星號 (*) 表示


高度成比例的水平框架或寬度成比例的垂直框架;另外,您也可以結合前
述的兩種表示方式和星號,此時的星號代表的是瀏覽器視窗剩餘的空間。
下面是一個例子,我們使用 <FRAMESET> 標籤的 ROWS 屬性設定三個水
平框架,第二、三個框架的高度分別為第一個框架的 2、3 倍,換句話說,
這三個水平框架的高度分別為視窗高度的 1/6、2/6、3/6。

\append1\水平框架 2.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>以星號(*)指定水平框架</TITLE>
</HEAD>
上中下框架高度各為視
<FRAMESET ROWS="*,2*,3*"> 窗高度的 1/6、2/6、3/6
<FRAME NAME="Top" SRC="3-1.htm">
上中下框架網頁各為
<FRAME NAME="Middle" SRC="3-2.htm"> <3-1.htm>、<3-2.htm>、
<FRAME NAME="Bottom" SRC="3-3.htm"> <3-3.htm>
</FRAMESET>
</HTML>

\append1\3-1.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>上方框架</TITLE>
</HEAD>
上方框架的高度為視窗高度的 1/6
</HTML>

A-33
\append1\3-2.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>中間框架</TITLE>
</HEAD>
中間框架的高度為視窗高度的 2/6
</HTML>

\append1\3-3.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>下方框架</TITLE>
</HEAD>
下方框架的高度為視窗高度的 3/6
</HTML>

A-8-3 製作框架的內容
在使用 <FRAMESET> 標籤的 COLS、ROWS 屬性設定垂直框架或水平框架的數
目、大小與位置後,我們可以使用 <FRAME> 標籤的 NAME 屬性設定個別框架
的名稱,然後使用 <FRAME> 標籤的 SRC 屬性設定個別框架的來源網頁,例如
<FRAME NAME="Left" SRC="3-4.htm"> 表 示 名 稱 為 Left 之 框 架 的 來 源 網 頁 為
3-4.htm。

有關來源網頁的路徑,您可以採用相對或絕對位置,如果來源網頁和框架網頁
位於相同資料夾,那麼可以只寫來源網頁的檔案名稱,至於來源網頁的製作方
式則和一般網頁的製作方式一樣。

請注意,由於 <FRAMESET>...</FRAMESET> 標 籤和 <BODY>...</BODY> 標籤


的地位相等,不能同時並存於 HTML 網頁,唯一的例外是 <BODY>...</BODY> 標
籤可以放在 <NOFRAMES>...</NOFRAMES> 標籤之間,將網頁內容格式化。

A-34