第 2 章 HTML 語法

1

第 2 章 HTML 語法

製作

2

認識 HTML - 簡介 HTML

在以往建構靜態網頁時，可以利用網頁設計工具進行設計，但是想要學習動態網頁的製作時，則必須捨棄這些工具直接運用 HTML 撰寫網頁。

以 HTML 語法撰寫的檔案稱做 HTML 文件。儲存 HTML 文件時，並未運用特別的檔案格式，而是以 .htm 或 .html 為副檔名儲存的純文字檔。

3

認識 HTML - 簡介 HTML

您可使用任何文書編輯軟體建立、編輯 HTML 文件，如Windows 中的文字編輯軟體 – NotePad 。

4

HTML 的標籤 HTML 控制資料顯示格式的方式，是透過兩個兩個一

組的 HTML 標籤（亦可稱之為標記）將欲控制的文字包夾於中間。

每一組 HTML 標籤的開頭標籤之語法為『 < 標籤名稱> 』，結尾標籤之語法則為『 </ 標籤名稱 > 』。

認識 HTML - HTML 的標籤與元件觀念

5

HTML 文件內 HTML 標籤控制文字顯示的語法如下所示。

以下 HTML 敘述將控制（或稱定義）位元文化這幾個字在瀏覽器顯示時，為一個文字段落。


< 標籤名稱 > 欲控制文字 </ 標籤名稱 >

<P> 位元文化 </P>

6

元件的觀念運用一組 HTML 標籤將一段文字包夾在中間時，這段文字與

包夾文字的 HTML 標籤將稱為一個元件。

以下敘述將利用 Align 屬性，控制『位元文化』這四個字組成的段落，以置中方式對齊。


<P Align=Center> 位元文化 </P>

7

HTML 的階層觀念整個 HTML 文件就像是一個大元件，將包含許多小元件。

HTML 文件最外層的元件，將由 <HTML> 標籤建立。

在 <HTML> 標籤建構的元件內，還包含由 <HEAD> 標籤與<BODY> 標籤所建立的兩個主要子元件。


8

所有 HTML 文件的最基本架構如下所示： <HTML>

<HEAD>……

</HEAD><BODY>

……</BODY>

</HTML>


9

HTML 標籤的架構如下圖所示：


HTML HEAD

BODY

10

以下語法 <HEAD> 標籤與 <BODY> 標籤彼此交錯是不對的，當標籤交錯時，將無法區別兩個元件的範圍。


11

超連結網頁的超連結是以下加底線，並以不同顏色與網頁中其他

文字區隔。當滑鼠游移到超連結上時，游標將變成手形圖示，告訴您

可以點選該文字，連結至其他網頁，如下圖所示。


12

超文字與多媒體網頁內除了可以包含文字外，也可以置入圖片、影像、聲

音、動畫等多媒體資料。這些多媒體資料同樣利用 HTML 標籤，標示成為文件內的

一個元件，以下為建立圖片元件的 HTML 敘述。


<IMG src="http://192.168.1.10/poweredby.gif>

13

在 HTML 文件內還有一些比較特殊的小觀念必須注意： HTML 文件內以按下鍵的方式分行，顯示於瀏覽器時，並

不會有任何效果。若網頁內容的文字欲換行，必須使用<BR> 標籤。

HTML 文件的文字間，不論您鍵入幾個空白鍵，瀏覽器僅顯示

為一格空白。若希望在 HTML 文件內顯示數個空白時，必須利用『』代表空白。當 n 個『』串連在一起時，瀏覽器內將顯示 n 個空白。


14

在 HTML 的標籤中，英文大小寫的意義相同，也就是說<HTML> 與 <html> 是一樣的。

使用不同瀏覽器瀏覽同一份 HTML 文件時，顯示的網頁可能不盡相同，因為不同的瀏覽器解譯 HTML 語法會有些許差異。


15

雖然 HTML 是一個標準語法，但 Netscape 與 IE 基於此標準語法，將各自訂定一些只能在該廠牌瀏覽器內，才能正常顯示的特殊語法。若希望所有瀏覽器都能正常瀏覽所製作的網頁時，應該避免使用這些自訂語法，本書所說明的 HTML語法為 HTML 4.0 。


16

認識 HTML - HTML 小助教啟動後的畫面如下圖所示：

輸入區

檢視區

按下此鈕可立即執行輸入的 HTML 語法，並在檢視區看到結果

17

HTML 標籤運用基本觀念 - HTML 標籤的語法

定義元件的開始標籤之基本語法如下：

結束標籤的建立方式：

< 標籤名稱屬性 1=" 值 1" 屬性 2=" 值 2" …>

</ 標籤名稱 >

18

HTML 標籤運用基本觀念 - HTML 標籤的語法

HTML 文件某個元件的完整定義語法如下： < 標籤名稱屬性 1=" 值 1" 屬性 2=" 值 2" …> 元件資料 </ 標籤名稱 >

19

HTML 標籤運用基本觀念 - HTML 文件基本架構

HTML 文件的典型結構如下： <HTML>

<HEAD><TITLE> 標題文字 </TITLE></HEAD> <BODY>

…… </BODY>

</HTML>

20


<HTML> 標籤整個文件被區分為兩大部份：

•由 <HEAD> 標籤建立的文件標頭•由 <BODY> 標籤建立的文件主體

21


<HEAD> 標籤由 <HEAD> 標籤定義的元件中，是放置有關這份 HTML 文

件的資訊，例如：文件的標題、編碼方式…等等。

<TITLE> 標籤此標籤使用於 <HEAD> 標籤內，用於標示此 HTML 文件

的標題名稱。

22


<BODY> 標籤由 <BODY> 標籤建立的元件，為此 HTML 文件的內容

主體。此 HTML 文件欲顯示的所有文件內容都將放在這個元件

中。在這個元件中，可以利用各種 HTML 標籤，控制網頁顯

示內容的格式、編排與效果。

23

HTML 標籤運用基本觀念 - 文件主體標籤 <BODY></BODY>

bgcolor 屬性控制文件的背景顏色，語法為：

16 進位數值的方式指定顏色，語法如下：

bgcolor=" 顏色 "

#RRGGBB

RR 代表紅色、 GG 代表綠色、 BB 代表藍色

24


常用的基本顏色名稱列於下表。英文名稱顏色英文名稱顏色Black 黑 Purple 紫White 白 Olive 橄欖綠Gray 灰 Navy 深藍Silver 銀灰 Aqua 水藍Red 紅 Lime 青綠Green 綠 Maroon 茶色Blue 藍 Teal 墨綠Yellow 黃 Fuchsia 紫紅

25

HTML 標籤運用基本觀念 - 文件主體標籤 <BODY></BODY> 以下 HTML 敘述將產生背景顏色為藍色的 HTML 文件。

<HTML> <BODY bgcolor=blue>

文件背景為藍色

</BODY> </HTML>

26

HTML 標籤運用基本觀念 - 文件主體標籤 <BODY></BODY> 上述 HTML 敘述鍵入 HTML 小助教後，顯示的畫面如下：

27

text 屬性此屬性用於控制網頁內文字的顏色，語法為： text= 顏色值

link 屬性網頁中未被點選過之超連結的顏色，語法為： link= 顏色值


28

vlink 屬性設定網頁中已經連結過之超連結的顏色，語法如下： vlink= 顏色值

alink 屬性按下滑鼠時之顏色

alink= 顏色值


29

background 屬性指定做為 HTML 文件背景的圖片，可以使用的圖檔格式為

GIF 與 JPG ，語法如下： background=" 檔案名稱與路徑 "


30

文字版面編排標籤 - 標題標籤 <Hn></Hn>

<Hn> 標籤用於標示網頁的標題文字，被標示的文字將以粗體方式顯示在網頁中，語法如下：

<Hn> 標題文字 </Hn>

31

文字版面編排標籤 - 標題標籤 <Hn></Hn> 以下 HTML 敘述將建立出六種層級的標題 <HTML>

<BODY><H1> 標題 1</H1><H2> 標題 2</H2><H3> 標題 3</H3><H4> 標題 4</H4><H5> 標題 5</H5><H6> 標題 6</H6>以上為網頁中可用的各等級標題。</BODY></HTML>

32


上述 HTML 敘述鍵入 HTML 小助教後，顯示的效果如下：

33


Align 屬性 <Hn> 標籤內較為常用的屬性為 align ，此屬性用於控制

標題的對齊方式，語法如下： align= left 或 center 或 right

34


以下 HTML 敘述將示範不同的標題對齊方式 <HTML>

<BODY><h1 align=center> 置中標題 </h1><h1 align=left> 靠左標題 </h1><h1 align=right> 靠右標題 </h1></BODY></HTML>

35


上述 HTML 敘述鍵入 HTML 小助教後所，顯示的效果如下：

36

文字版面編排標籤 - 段落標籤 <P></P>

在瀏覽器中，不同段落文字間將以一行空白間隔，以區別文字的不同段落，語法如下：

<P> 文字 </P> 在 <P> 標籤中較常用的屬性為 align 屬性，透過此屬性

可以控制段落的對齊方式，語法如下： align= left 或 center 或 right

37


以下 HTML 敘述，將示範不同的標題對齊方式。 <HTML>

<BODY><P align=center> 置中段落 </P><P align=left> 靠左段落 </P><P align=right> 靠右段落 </P></BODY></HTML>

38


上述 HTML 敘述鍵入 HTML 小助教後，所顯示的效果如下：

39

文字版面編排標籤- 換行標籤 <BR>

換行標籤是一個沒有結尾標籤的標籤， HTML 文件中任何位置只要使用了 <BR> 標籤，當文件顯示於瀏覽器中時，該位置後的文字將顯示於下一行。

若欲將某位置後的文字顯示於下一行時，必須在該位置使用 <BR> 標籤。

40


以下 HTML 敘述將示範利用 <BR> 標籤將文字分行顯示。 <HTML>

<BODY>第一行 <BR>第二行 <BR></BODY></HTML>

41



42

文字版面編排標籤 - 水平分隔線 <HR>

Size 屬性設定水平線的粗細，單位為像素（ pixel ）。 Width 屬性水平線的寬度，單位可使用像素（ pixel ），或螢幕的百分比。 align 屬性控制水平分隔線的對齊方式，有置中、靠左、靠右三種，語法如下： align=center 或 left 或 right

43


color 屬性線條的顏色，顏色可用英文名稱或是 16 進位數值設定。語法如下： color= 顏色值 noshade 屬性水平線不顯示 3D陰影。

44


以下 HTML 敘述將示範建立各種不同的水平分隔線。 <HTML>

<BODY><HR align=left><HR align=left width= 50%><HR size=10 width= 50%><HR size=20 color="blue"><HR size=20><HR size=20 noshade></BODY></HTML>

45


上述 HTML 敘述鍵入 HTML 小助教後，顯示的效果如下：

46

文字版面編排標籤- 置中對齊 <CENTER></CENTER>

以下示範運用 <CENTER> 標籤控制段落文字的水平對齊為置中對齊。

<HTML> <BODY> <CENTER> <P> 我是郭尚君 </P> 請多指教 </CENTER> </BODY> </HTML>

47

文字版面編排標籤- 置中對齊 <CENTER></CENTER>

上述 HTML 敘述鍵入 HTML 小助教後，顯示效果如下：

48

文字版面編排標籤 - 有序號條列標籤 <ol></ol> 有序號條列標籤的語法如下： <ol> <li> 條列 1 <li> 條列 2 <li> 條列 3 …… </ol>

49

文字版面編排標籤 - 有序號條列標籤 <ol></ol> type 屬性此屬性用於控制序號的種類。語法如下： type=1 或 A 或 a 或 I 或 i

設定值說明1 表示序號為數字。A 表示序號為大寫英文字母。a 表示序號為小寫英文字母。I 表示序號為大寫羅馬數字。i 表示序號為小寫羅馬數字。

50

文字版面編排標籤 - 有序號條列標籤 <ol></ol>

start 屬性以下為設定序號開始之編號的語法， n 可以是 2 、 C或是 vi 。

start=n

51

文字版面編排標籤- 無序號條列標籤 <ul></ul>

無序號條列標籤的語法如下： <ul>

<li> 條列 1 <li> 條列 2 <li> 條列 3 ……

</ul>

52

文字版面編排標籤- 無序號條列標籤 <ul></ul>

type 屬性此屬性在無序號項目條列中，可以設定項目符號。語法如下： type=circle 或 disc 或 square

53

文字版面編排標籤- 說明項目條列 <dl></dl>

語法如下： <dl>

<dt> 條列 1 <dd> 條列 1 的說明 1 <dd> 條列 1 的說明 2 ……

<dt> 條列 2 ……

</dl>

54

文字格式標籤- 字型標籤 <Font></Font>

語法如下： <FONT 屬性 1= 值 1 屬性 2= 值 2 ……> 欲控制文

字 </FONT>

face 屬性控制文字使用字型的屬性，語法為： face=" 字型名稱 "

55

文字格式標籤- 字型標籤 <Font></Font>

size 屬性控制文字大小的屬性，語法為： size= 字體等級

color 屬性設定文字的顏色，語法為： color=" 顏色 "

56

文字格式標籤- 特定文字樣式標籤

標籤說明<b>…</b> 文字以粗體字顯示。<i>…</i> 文字以斜體字顯示。<u>…</u> 在文字下方加上底線。<s>…</s> 文字加上刪除線。<em>…</em> 文字以強調樣式顯示。<strong>…</strong> 文字以加強強調樣式顯示。<address>…</address> 電子郵件地址、網頁網址所專用的文字樣式。<code>…</code> 程式碼或指令專用的字體。<big>…</big> 顯示放大字體。<small>…</small> 顯示縮小字體。<sup>…</sup> 將文字顯示為上標文字。<sub>…</sub> 將文字顯示為下標文字。

57

表格的建立- 建立表格的四種標籤

在網頁內建立表格是非常重要的技巧， HTML 語法內可運用 <TABLE> 、 <TH> 、 <TR> 、 <TD> 四種標籤建立表格。

各標籤之說明如下： <TABLE></TABLE> 標籤 - <TABLE> 標籤用於標示一

個表格元件。一個表格元件將由數個列（ <TR> ）、儲存格（ <TD> ）與標題格（ <TH> ）子元件組成。

58


<TR></TR> 標籤 - <TR> 標籤用於定義表格的一列，一組 <TR> 標籤內通常包含數組由 <TD> 或 <TH> 定義的儲存格。

<TD></TD> 標籤 - <TD> 標籤用於定義表格的儲存格。

<TH></TH> 標籤 - <TH> 標籤用於定義表格的標題儲存格，此儲存格中的文字將以粗體的方式顯示。此標籤可以不使用。

59


在一個基本表格的表格元件中，必須包含一組 <TABLE>標籤，一組 <TR> 標籤與一組 <TD> 標籤，敘述如下：

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

</TABLE>

上述語法將建立出只有一個儲存格的表格。

60

表格的建立- <TABLE> 標籤的屬性

border 屬性：用於控制表格框線的厚度。設定語法： border = 數值

cellspacing 屬性用於控制儲存格邊框到表格邊框的距離，也就是框線的寬度。

cellspacing = 數值

61


cellpadding 屬性用於控制儲存格內文字的邊緣到儲存格邊框的距離。

bordercolor 屬性用於設定表格厚度的顏色。

cellpadding = 數值

bordercolor = 顏色值

62


表格邊框的各控制屬性之設定 <HTML>

<BODY><TABLE border=10 cellspacing=10 cellpadding=10><TR><TD>郭尚君</TD><TD>屏東市</TD></TR>

<TR><TD>馬孝瑀</TD><TD>台北縣</TD></TR></TABLE></BODY></HTML>

63



bordercellspacing

cellpadding

64


bgcolor 屬性用於設定表格的背景顏色。

width 屬性整個表格的寬度設定。

bgcolor = 顏色值

width = 數值

65


height 屬性控制整個表格的高度。

align 屬性控制整個表格在網頁中，採用的水平方向對齊方式設定語

法如下：

height = 數值

align = left 或 center 或 right

66

表格的建立- <TR> 標籤的屬性

align 屬性 <TR> 標籤所包含儲存格中，文字的水平對齊方式，設定

語法如下：

valign 屬性 <TR> 標籤所包含儲存格中，文字的垂直對齊方式，設定

語法如下：

align = left 或 center 或 right

valign = top 或 middle 或 bottom 或 baseline

67

表格的建立- <TD><TH> 標籤的屬性

colspan 屬性水平延伸儲存格，設定語法如下：

rowspan 屬性垂直延伸儲存格，設定語法如下：

colspan = n

rowspan = n

68

其他常用標籤- 相對路徑與絕對路徑

相對路徑 – 以引用檔案之網頁所在位置為參考基礎，建立出的資料夾路徑。

絕對路徑 – 以 Web站台根資料夾為參考基礎的資料夾路徑。

69


下表介紹建立路徑所使用的幾個特殊符號，及其所代表的意義。

特殊符號說明. 代表目前所在的資料夾。.. 代表上一層資料夾。/ 代表根資料夾。

70


假設您所架設的 Web站台擁有如下圖所示的資料夾路徑。

假若欲在 Ref.htm 檔中引用 BeRef.gif 檔時，其相對路徑如下：

http://localhost/ Dir1

SubDir2

Ref.htm

BeRef.gif

./SubDir2/BeRef.gif

71


亦可省略『 ./ 』直接用以下這個方式引用。

若使用絕對路徑以根資料夾為參考點引用該檔時，則引用路徑如下：

SubDir2/BeRef.gif

/Dir1/SubDir2/BeRef.gif

72


若 Web站台的資料夾之架構如下圖：

假若欲在 Ref.htm 檔引用 BeRef.gif 檔時，相對路徑如下：

若使用絕對路徑引用時，則引用路徑如下：

http://localhost/ Dir1

Dir2

Ref.htm

BeRef.gif

../Dir2/BeRef.gif

/Dir2/BeRef.gif

73


假設在欲架設之 Web站台中，擁有如下圖的資料夾路徑。

http://LocalHost/ Dir1

Dir2

SubDir1

SubDir2

Ref1.htm

BeRef2.htm

BeRef1.gif

SubDir3 Ref2.htm

74


以下運用表格說明在上圖的情況下，某檔案引用另一檔案時，所應使用的相對路徑與絕對路徑。引用者被引用者相對路徑絕對路徑Ref1.htm BeRef1.gif ../SubDir2/BeRef1.gif /Dir1/SubDir2/BeRef1.gif

Ref2.htm BeRef1.gif ../../Dir1/SubDir2/BeRef1.gif /Dir1/SubDir2/BeRef1.gif

Ref1.htm BeRef2.htm ../../Dir2/BeRef2.htm /Dir2/BeRef2.htm

Ref2.htm BeRef2.htm ../BeRef2.htm /Dir2/BeRef2.htm

75

其他常用標籤 - 超連結的標籤 <A> 與 </A>

建立超連結所使用的標籤為 <A></A> 標籤，語法如下：

語法中各部份說明如下：超連結名稱：此字串顯示於網頁中，代表此超連結，並供使用者點選超連結之用。連結位置：用於指定 href 屬性所超連結的目標位置，可使用 URL指定。語法如下：

<A Href=" 連結位置 "> 超連結名稱 </A>

通訊協定 :// 連結位址 / 檔案位置… / 檔案名稱

76


以下列舉一些常見的連結位置設定方式。一、指定透過 http 協定連結至其他網頁 <a

href="http://localhost:8080/aspexample/ch2/ex2-24/img.htm">

二、指定透過 FTP 協定連結至網路上的 FTP 伺服器 <a href="ftp://ftp-cnpa.admin.yzu.edu.tw">

三、 Telnet 連結 <a href="telnet://bbs.iti.com.tw">

77


四、電子郵件由於這並不是標準的 URL ，將以『 mailto:電子郵件帳

號』的語法，將欲寄信的目標帳號設定給 href 屬性。

五、連結至同一伺服器上的其他網頁可使用相對路徑或絕對路徑指定欲連結的網頁。

<a href="mailto:[email protected]">

<a href="img.htm">

78

其他常用標籤 - 圖檔載入標籤 <IMG>

<IMG> 標籤用於將圖檔載入 HTML 文件內，可使用此標籤載入 GIF 、 JPG… 等格式的圖檔，基本語法如下：

以下敘述將載入位於上一層資料夾內名為 mark.gif 的圖檔。

<img src=" 圖檔儲存位置與名稱 ">

<img src="../mark.gif">

79


以下敘述將從位址為 192.168.1.10 的伺服器之根資料夾，載入名稱為 mark.gif 的圖檔。

<img src="http://192.168.1.10/mark.gif">

80


<IMG> 標籤其他常用的屬性： alt 屬性當瀏覽器不能顯示指定圖片時，則以指定給 alt 屬性的字串替代圖片，設定語法為：

alt=" 敘述文字“ border 屬性設定圖片的邊框，語法為：

border=n

81


height 屬性設定圖片的高度，語法為： height=n

width 屬性設定圖片的寬度，設定語法如下： width=n

82


hspace 屬性設定圖片左右水平空間的空白區域，網頁中的文字以及其他物件都會避開這塊空白的區域，設定語法為：

hspace=n

vspace 屬性與上一項屬性用法相同，但控制的是垂直的空間。

83

其他常用標籤 - 視窗框架的使用

視窗框架的基本結構將整個瀏覽器畫面分割的視窗框架，主要利用

<Frameset> 標籤與 <Frame> 標籤定義。

其中 <Frameset> 標籤用於定義一個視窗框架元件，而<Frame> 標籤則用於定義視窗框架中某個子視窗元件。

84


一組視窗框架的標準格式如下所示： <Frameset>

<Frame><Frame>……

</Frameset>

85


設定畫面的分割方式視窗框架的分割方式，可分為列分割與欄分割。

一個視窗框架元件採用的是哪種分割方式，則要看設定於<Frameset> 標籤的是 rows 屬性還是 cols 屬性。

86


列分割以下 <Frameset> 標籤將使用 rows 屬性，定義一個列分割畫面的視窗框架。

<Frameset rows=" 高度 1, 高度 2, …, *"> <Frame> ……

</Frameset>

87


設定給 rows 屬性的字串代表各分割子視窗的高度，第一個子視窗高度 1 ，第二個為高度 2 ，依此類推。

最後一個『 * 』，則代表最後一個子視窗的高度，為其他子視窗高度分配後所剩餘的高度。

當將畫面分割成幾個子視窗時，設定給 rows 屬性的字串就有幾個高度值，且每個高度值間將以逗號（ ,）分隔。

設定高度值的方式共有兩種，一種是採用整數設定，單位為像素（ pixel ），另一種則是設定畫面的百分比。

88


欄分割以下 <Frameset> 標籤將使用 cols 屬性，定義一個欄分割

畫面的視窗框架。 <Frameset cols=" 寬度 1, 寬度 2,…. ,*">

<Frame> ……

</Frameset>

89


子視窗的設定 name 屬性 name 屬性用於指定頁框的名稱，定義子視窗名稱後，便可

在 HTML 語法內指定該視窗。設定語法為： name=" 子視窗名稱 "

90


src 屬性此屬性可指定預設載入子視窗之 HTML 文件的位置與名稱，

語法為： src="HTML 文件的位置與名稱“

以下設定將載入位於同一資料夾的 first.htm 網頁。 <frame src="first.htm" name="main">

91


控制視窗框架框線的 frameborder 屬性 <Frameset> 標籤與 <Frame> 標籤的 frameborder 屬性

用於控制是否顯示視窗框架四周的框線。使用於 <Frameset> 標籤時，可控制該視窗框架元件的所

有子視窗。使用於 <Frame> 標籤時，則僅控制該標籤代表的子視窗，

語法如下： frameborder=0 或 1

92


巢狀的視窗框架所謂的巢狀視窗框架意指，一個視窗框架還包含了另一個視窗框架。

93


超連結 target 屬性與視窗框架的搭配應用設定語法如下： target = " 子視窗名稱 "

94


設定 target 屬性可以運用下表所列的幾個代表特殊意義之值：

設定值說明_blank 新開一個視窗載入連結的網頁。_self 在同一個視窗框載入連結的網頁。_parent 將連結的網頁載入目前頁框的上一層視窗框（運用於巢狀

視窗框架中），如果沒有上層，則載入同一視窗框。_top 將網頁載入目前瀏覽器的最上層，因此，將畫面跳離原有

視窗框。

95

其他常用標籤 - 註解標籤 

欲在 HTML 文件內，說明 HTML 語法的意義時，可以使用『  』標籤定義註解文字，語法如下：

Documents

第 2 章 HTML 語法