HTML網頁製作語言

讀完前面幾章後,您也許開始感到好奇:「文字、圖片、與超連結到底是如何儲存在網頁 之中呢?」。 如果您對第一章所簡介的 HTML(HyperText Markup Language,超文字標記語言)還有印象的話,應該記得網頁的原始檔其實只 是遵從HTML語法格式 的文字檔案。HTML 是 Tim Berners-Lee 先生當初發展 WWW 時所制訂的一套網頁製作語言。就像WWW日新月異一般, HTML 也是一個成長中的語言。W3C 幾乎每隔一段時間就會更新 HTML 的規格,除了提供各家瀏覽器作為網頁處理的標準外,也會增加一 些功能更強的新東西。幾年下來,HTML已經從當初簡單的語言,逐漸成為一個豐富的語言。 話雖如此,其外在的格式與核心的概念還是保持不變。

我們將從這一章起,用四章的篇幅來介紹最新版的 HTML 4.0 網頁製作語言。HTML 4.0 中與網頁編排相關的主題大致可分為:文字與段落的編排、 條列項目、超連結、表格、圖片、框架網頁、與表單等七大單元。框架網頁與表單這兩個主題比較複雜,所以我們將它們獨立出來,在接下來的兩章中分別介紹之。

本章的內容大綱如下:第一節敘述一些為什麼要學習HTML的原因。第二節說明如何在瀏覽器中觀看或編輯網頁的原始檔。第三節討論 HTML 的一些基本概念與術語。第四節 列出一些 HTML 常見的 屬性值種類。第五節介紹與網頁結構相關的 HTML 元件。第六節介紹用來設定文字格式的 HTML 元件。 第七節介紹用來設定段落格式的 HTML 元件。第八節介紹製作條列項目的 HTML 元件。 第九節介紹建立超連結的 HTML 元件。第十節介紹製作表格的 HTML 元件。第十一節介紹用來加入 多媒體的 HTML 元件。

一、為什麼要學習HTML?

您也許會懷疑地問:「FrontPage 或 Dreamweaver 這類 WYSIWYG 的網頁編輯器就可以用來輕輕鬆鬆地設計網頁,為什麼還要費心地去學習HTML語言呢?」。 大哉問!的確,如果你只是以玩票的心情來寫寫幾個網頁,這些WYSIWYG網頁編輯器網頁編輯器所提供的功能也算堪用。但是基於底下的原因, 您還是有必要瞭解HTML:
  1. 某些網頁效果無法在 WYSIWYG 網頁編輯器中設定,而必須用修改網頁原始檔內容的方式來加入這些效果。你當然就必須先瞭解 HTML,才能進行這樣的修改工作。
  2. 某些網頁編輯器雖然具有加入 JavaScript、VBScript、Java 等網頁程式碼的功能,但是這項工作最簡便作法是:利用文字編輯器將網頁程式碼編寫(或剪貼)入網頁原始檔中。
  3. 許多動態網頁並不是由人編寫出來,而是靠程式(如 PHP、ASP、或 CGI 程式)來產生出網頁原始檔。如果要寫這種程式,你當然就必須先熟悉 HTML 的語法, 才能讓程式產生出所需的網頁。
  4. 如果你喜歡上某一張網頁的風格或技術,而想「偷過來」運用到自己的網頁上, 怎麼辦?光從瀏覽器的畫面,你是無法明瞭其中的奧妙。但只要檢視網頁原始檔 ,你就可以清清楚楚地看到作者的手法。當然你得先瞭解 HTML,才懂得如何「偷」。
  5. 如果按照技術發展的先後順序來排,依序是 HTML、瀏覽器、與網頁編輯器。通常 HTML 新規格出來後,過了一年半載,支援新規格的瀏覽器才發行,再過個一年半載, 支援新規格編排功能的網頁編輯器才上市。如果你是一個「走在時代尖端」的有為青年,就必須用編輯網頁原始檔的方式,才能搶在他人之先,在網頁中添入新規格的功能。

二、觀看或編輯網頁原始檔

在 IE 或 Netscape 中,你只要用滑鼠點選「檢視」功能表中的「原始檔」指令,就可以看到目前網頁的原始檔。

由於網頁原始檔本身是文字檔的格式,因此你可以用任何的文字編輯器來直接編寫網頁。 不過,使用文字編輯器時,你必須注意 下列兩點才不會造成困擾:

  1. 在許多文字編輯器的檔案瀏覽對話框中,預設的檔案類型通常為 .txt 的文字 文件,因此無法看到和點選以 .htm 或 .html 為副檔名的網頁原始檔。許多人 因而誤以為網頁原始檔流失不見了。其實你只要把對話框中的檔案類型改選成 「所有檔案(*.*)」,就可以看到和點選網頁原始檔了。
  2. 當你儲存新檔案而沒有指定副檔名時,大部分的文字編輯器會自動地以 .txt 作為其副檔名。然而,網頁原始檔一定要以 .htm 或 .html 為副檔名,所以儲存新的網頁原始檔時,不要忘了在檔案名稱之後加上 .htm 或 .html。

三、HTML概述

在這一節中,我們以 底下所示的網頁範例來說明一些 HTML 基本的術語與概念。

 

 1. <HTML>
 2.  <HEAD>
 3.   <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=big5">
 4.   <TITLE>哈囉!WWW</TITLE>
 5.  </HEAD>
 6.  <BODY>
 7.   <P><FONT size=+2>哈囉!<B>WWW</B>,我來了!</FONT></P>
 8.   <P><IMG src="Devil01.gif" height=61 width=62></P>
 9.   <P><HR width=100%></P>
10.   <P><A href="http://devil.pu.edu.tw/devil.html">紅小鬼</A>到此一遊</P>
11.  </BODY>
12. </HTML>

首先,從所示的網頁原始檔中,你可以發現到其中除了網頁的內容以外,還有許多如 <HTML>、<P>、<IMG> 等等以「小於符號 <」和「大於符號 >」括住的英文字。這些就是所謂的標籤(tag)。HTML的標籤依用途可分成兩大類:一類是用來提供網頁外在內容的描述資訊,另一類則是用來指揮瀏覽 器如何編排網頁。

大部份的標籤必須用一個結束標籤來界定其作用範圍。 你只要在標籤的名稱之前加上「斜線符號 { /」就可以得到相對於該標籤的結束標籤。 譬如:<HTML> 的結束標籤是 </HTML>、<BODY> 的結束標籤是 </BODY>、...、等等。不過有少數的標籤並不需要界定作用範圍,因此也就沒有對應的 結束標籤。譬如:<IMG> 標籤只用來連結一個圖片檔案,不需要對應的結束標籤, 所以HTML中並無 </IMG> 標籤。

含括在一個標籤和對應結束標籤之間的部份稱為元件(element)(無結束標籤的標籤則其自成一個元件)。 一個元件可以包含其它的元件。 譬如在底下的例子中:

<P><B>明天下午三點鐘</B>來找我</P>

<P> 元件的內部有一個 <B> 元件。我們稱這種元件包含元件的組合為巢狀(nested)結構, 其中在外部的元件稱為外層元件(如上例中的 <P> 元件),在內部的元件則稱為內層元件(如上例中的<B> 元件)。然而,HTML並不允許兩個元件部分地重疊 (overlapping)。比方說,你不可以把上面的例子寫成:

<B><P>明天下午三點鐘</B>來找我</P>
否則就會產生不正確的排版結果。從上面的網頁例子中,我們可以看到:整份 HTML 文件的結構是由巢狀但不重疊的各種元件所組成。

許多標籤具有若干的屬性(attribute)來提供更細部的編排設定。 屬性的設定是以 屬性名稱="屬性值" 的格式加在標籤的名稱之後。譬如:<FONT> 標籤是用來設定文字的字型。若想將文字放大 兩級的話,你可以將它的 SIZE(字型大小)屬性值設定成 +2 如:<FONT SIZE="+2">。 不同的標籤有不同的屬性。 為了方便你查閱這些資訊,我們討論每一個 HTML 標籤時,會舉列出它所具有的屬性以及可用的屬性值。

瞭解了上面的基本術語後,我們來剖析上面的網頁原始檔。首先, 我們看到標籤 <HTML> 出現在第一行,而其對應的結束標籤 </HTML> 則在最後一行,這是因為所有網頁的最外層元件必須是 <HTML> ... </HTML> 的緣故。第一行的 <HTML> 標籤 「告知」瀏覽器這是一份 HTML 文件。最後一行的 </HTML> 則標示整份文件到此為止。

接下來,<HTML>元件是由兩大元件所組成:

  1. 檔頭元件: <HEAD> ... </HEAD>
  2. 主體元件: <BODY> ... </BODY>

檔頭元件是用來陳述網頁外在內容的資訊。譬如:第 3 行的 META元件標示此網頁是 HTML 格式的文字檔,且內容採用 big5 字碼(中文大五碼)。 第 4 行的標題元件把網頁的標題設定為「哈囉!WWW」,此標題通常也做為瀏覽器視窗的標題。

檔頭元件之後的主體元件則包含了真正的網頁內容。網頁內容通常是由若干 <P> ... </P> 元件所標示的段落所組成。 這個網頁共有四個段落,分別是利用原始檔中 7--10 行的四個 <P> 元件來製作。底下我們依序說明各段落的內容。

 

第 7 行 此段落是由「哈囉! WWW,我來了!」這句話所組成。我們用標籤 <FONT SIZE=+2> 將整句話的字型放大兩級,再用標籤 <B> (Bold,粗體字)把「WWW」一詞設定成粗體字。
第 8 行

在此段落中,我們用標籤 <IMG>(Image,影像)來加入 一張圖片。標籤中的屬性設定:

src="Devil01.gif" height=61 width=62

其含意分別為:連結的圖片檔名稱是 Devil01.gif、圖片的高度與寬度分別是 61 個像素與 62 個像素。瀏覽器會根據這些資訊從伺服器下載圖片檔,然後以指定 的大小顯示出圖片。請注意:當屬性不只一個時,它們之間必須以空白字元隔開。
第 9 行 在此段落中,我們用標籤 <HR>(Horizontal Rule,水平線條)畫出一條水平線來分隔網頁。屬性設定 width="100%" 的用意是讓水平線橫跨整個瀏覽 器視窗,並隨著瀏覽器視窗一起變寬或變窄。
第 10 行

在此段落中,我們用標籤 <A>(Anchor,定錨)來建立一個超連結。 標籤中的屬性:

href="http://devil.pu.edu.tw/devil.html"
指定超連結目標為 "http://devil.pu.edu.tw/devil.html"。觀看網頁畫面後,你可以發現到:網頁並未顯示這個字串,而是顯示出居於 <A> 和 </A> 之間的超連結文字:「紅小鬼」。當使用者以滑鼠點選它時,瀏覽器就會下載指定的連結網頁。 為了與普通文字有所區別,瀏覽器常用特別的顏色(如藍色)來顯示超連結文字, 或在其下劃上底線。同段落中的「到此一遊!!!」一詞,由於並不在 <A>元件 的範圍內,算是普通的文字,因此沒有被劃上底線。

 

四、標籤屬性值的型態

設定某一個屬性的值時,你必須用符合其型態需求的值來指定,否則會被瀏覽器忽略, 而使得屬性的設定失效。一般而言,你必須在屬性值的前後加上英文雙引號字元 (") 。不過,若屬性值是一個簡單的文數字時,前後的英文雙引號可以省略。譬如: 屬性值 "book" 可以簡寫成 book、屬性值 "50" 可以簡寫成 50、或屬性值 "80%" 可以簡寫成 80%。接下來,我們說明一些常見的屬性值型態與其格式:

string(字串)
字串是由一連串任意的字元所組成,且前後以英文雙引號字元 (")包夾住。譬如: "My Home Page" 和 "book" 是兩個字串型態 的屬性值。
name(名稱)
名稱是由若干字元所組成。其中,第一個字元必須是英文的大小寫字母(A--Za--z),而其餘的字元除了英文大小寫字母,還可以是阿拉伯數字(0--9)、英文連線字元(-)、英文底線字元(\_)、英文冒號字元 (:)、與英文句點(.)。
keyword(關鍵字)
關鍵字是一個具有特殊意義的名稱。譬如:關鍵字 center 可作為 水平對齊模式屬性 align 的值,其作用是把元件水平置中。由於關鍵字的大小寫並無分別,所以之前的關鍵字 center 也可寫成 center。 本書一律採用小寫關鍵字的形式。
number(數字)
數字的屬性值是由阿拉伯數字所組成的整數值。
pixel(像素)
此型態的屬性值代表螢幕(或印表機)像素的個數。譬如 數值 "50" 意指「50個像素」。像素型態的屬性值常用於指定絕對的長度。
length(長度)
此型態的屬性值用於指定長度。指定的方式除了上述的像素以外,你還可以用百分比 (如 75%)的方式來設定相對的長度(相對於外層元件的寬度而言)。
<url>
此型態的屬性值用於指定超連結的 URL。此處的URL字串必須包夾在英文雙引號字元之間,如:"http://www.pu.edu.tw"。 有關 URL 的格式請參 考後面的說明。
color(顏色)
此型態的屬性值用於指定顏色。你可以用 #RRGGBB 的格式來指定顏色,其中的 RR、GG、與 BB 是兩位數的十六進位數值,它們分別代表紅(Red)、藍(Blue) 、綠(Green)三原色的成分。下表列出了一些顏色所對應 的 RGB 值。你也可以使用表中的英文顏色名稱 來指定顏色。
HTML中可用的顏色名稱與其RGB值
  aqua 青色 #00FFFF   navy 海軍藍 #000080
  black 黑色 #000000   olive 橄欖色 #808000
  blue 藍色 #0000FF   purple 紫色 #800080
  fuchsia 洋紅色 #FF00FF   red 紅色 #FF0000
  gray 灰色 #808080   silver 銀色 #C0C0C0
  green 綠色 #008000   teal 藍綠色 #008080
  lime 亮綠色 #00FF00   white 白色 #FFFFFF
  maroon 赭紅色 #800000   yellow 黃色 #FFFF00

在爾後的 HTML 標籤屬性說明中,我們會用以上的名稱來宣示屬性值的型態。除此之外, 如果某一個屬性具有多種屬性值可供挑選的話,我們將以垂線字元(|)分列出這些選項。

五、網頁的結構元件

從這一節開始,我們將陸續為您介紹一些常用的HTML元件。首先,我們列出與網頁結構有關的一些元件。

註解

有的時候,網頁原始檔的結構比較複雜,為了增進其可讀性以及便利日後的維護工作,你可以 在其中加上註解文字,藉此提醒自己一些注意事項或原先的構想為何。註解文字也可讓他人明瞭網頁中的一些奧秘。網頁原始檔中的註解必須寫在 <!-- 與 --> 之間。 譬如底下的第一行是一段註解文字:

    <!-- 此段落需要進一步地修改 -->
    <P> ... </P>

註解文字雖然是寫在網頁原始檔之中,但瀏覽器並不會將它顯示出來。

HTML 元件

用途: 網頁的最外層元件。

格式: <html>...</html>

說明:

HTML 元件是網頁的最外層元件。所有其它的元件都必須寫在標籤 HTML 與其 結束標籤 HTML 之間,而出現在 HTML 之後的文字,則會被 瀏覽器忽略而不處理。換句話說,任何網頁的原始檔都會呈現出以下之結構:

    <HTML>
       ...檔頭元件與主體元件寫在其中
    </HTML>

HEAD -- 檔頭

用途: 加註非屬網頁內容的資訊。

格式: <head>...</head>

說明:

HEAD 元件包含了一些如網頁標題(title)或關鍵字等非屬網頁內容的資訊。 這些資訊通常不會在瀏覽器的視窗中顯示出來。

TITLE -- 標題

用途: 設定網頁的標題。

格式: <TITLE>...</TITLE>

說明:

每一個網頁的 HEAD 元件都必須包含 TITLE 元件。瀏覽網頁時,你或許曾注意到瀏覽器視窗上的標題列內容會隨著網頁的不同而有所變化。瀏覽器視窗標題列顯示的資訊就是此處你所設定的網頁標題。使用瀏覽器的「加入我的最愛」功能時,網頁標題就是預設的記錄資訊。此外,許多瀏覽者會由網頁的標題來判斷是否要進一步閱讀這份網頁。基於這些原因,我們建議你使用簡短但又能充分提示網頁內容的語句來作為網頁的標題。譬如: 「簡介」二字並不是一個好標題,你應該用「媽祖進香團簡介」之類更清晰的語句作為標題。最後,如果你希望讓外國朋友也能夠看到網頁標題的話,那麼最好用英文網頁標題,否則在無法顯示中文的電腦上,他們所看到的網頁標題將是 一串亂碼。

META -- 後設

用途: 提供網頁的後設資訊

格式: <META> (只能使用於 HEAD 元件之中)>

屬性:

http-equiv=name HTTP 回應檔頭(response header)屬性的名稱
name=name 自訂的後設資訊類別
content=string 網頁後設資訊的內容

說明:

META 元件是用來提供網頁的後設資訊。 後設資訊是用來描述網頁文件本身的資訊,它並不屬於網頁的內容。 網頁後設資訊可分為:「HTTP 回應檔頭屬性」與「自訂類別」兩種。前者是利用 http-equiv 屬性來設定,後者則是利用 name 屬性來設定。設定自訂類別的後設資訊時,你必須先 用 name 屬性來宣告其類別,然後再用 content 屬性來指定其值。譬如以下的 META 元件:

    <META name="Author" content="令狐沖">
把網頁後設資訊類別 Author 的值設定成 "令狐沖",其作用是設定網頁作者 為令狐沖。底下我們介紹一些常見的 META元件範例:
    <META name="keyword" content="WWW, html, image, hyperlink">

此 META元件設定網頁的關鍵字(keyword)為 WWW、html、image、與 hyperlink。 設定網頁的關鍵字通常會有助於網路搜尋引擎的精確性。

	<META http-equiv="Content-type" content="text/html; charset=big5">

此 META 元件告知瀏覽器此文件是一個 HTML 文字檔的網頁,並將字碼集設定成中文 Big5 碼。一般 而言,中文網頁必須含有此一 META 元件。

	<META http-equiv="Expires" content="Sat, 1 January 2000 0:0:0 GMT">

此 META 元件把網頁有效期限的截止時間設定成格林威治時間:西元 2000 年一月 一日零時零分零秒。

	<META http-equiv="refresh" content="3; url=http://www.pu.edu.tw/a.html">

此 META元件中 content 的設定方式,將使得瀏覽器先顯示目前的網頁三秒鐘,然後自動 下載網頁: http://www.pu.edu.tw/a.html 來更新畫面。如底下的 HTML 原始檔所示,我們利用這個技巧先顯示一個搬家通知網頁,三秒鐘之後自動連結 至新網址。

 

通知網站搬家並自動連結至新網站的HTML範例
 1. <HTML>
 2.  <HEAD>
 3.   <META http-equiv="Content-type" content="text/html; charset=big5">
 4.   <META http-equiv="refresh" content="3; url=http://www.pu.edu.tw/">
 5.   <TITLE>網站搬家通知</TITLE>
 6.  </HEAD>
 7.  <BODY>
 8.   <P>對不起,本站已搬家。三秒鐘後將自動連結至
 9.      <A href="http://www.pu.edu.tw/">新網站</A></P>
10.  </BODY>
11. </HTML>

 

  此外,針對不支援此種作法的瀏覽器,我們在第 9 行的「新網站」一詞上設定超連結,讓這些瀏覽器的使用者,能夠透過超連結的方式連上新的網站。

	<META http-equiv="refresh" content="1;url=music.wav">

此 META 元件中 content 的設定方式, 會使得瀏覽器下載網頁一秒鐘後,再去下載音效檔 music.wav。與上一個例子 不同的地方是:瀏覽器並不換掉目前的網頁,而是自動地播放此音效檔。 因此,這個方式可以用來在網頁中加入一段背景音效。

BODY -- 主體

用途:定義網頁的主體元件。

格式:<BODY>...</BODY>

屬性:

string=url 網頁背景圖案檔的URL
bgcolor=color 網頁背景的顏色
text=color 網頁文字的顏色
link=color 網頁超連結文字的顏色
vlink=color 拜訪過後的超連結文字顏色
alink=color 選取當中的超連結文字顏色

說明:

BODY 元件是網頁主體的最外層的元件。BODY 元件中所包含的內容將會呈現在 瀏覽器的視窗中,此外,<body> 標籤可用來設定上述的網頁外觀屬性。

DIV - 部(Division)

用途:將若干的元件群組成一個區塊。

格式: DIV

屬性:

align= left | center | right | justify (水平的對齊模式:靠左、置中、靠右、或兩邊對齊 )
說明:

DIV 元件原先的目的是把若干元件群組成一個區塊,然後利用其 align 屬性來同時設定這些元件的水平對齊方式。不過,DIV元件目前最大的用途是配合樣式單來設定區塊中的樣式。

Hn - 標題(Heading)

用途:定義一至六級的標題元件。

格式: <Hn>...</Hn>, n = 1, 2, .., 6

屬性:

align= left | center | right | justify (水平的對齊模式:靠左、置中、靠右、或兩邊對齊)
說明:

利用標題元件,我們可以容易地顯示出文件的內容大綱以利於閱讀。傳統上,<H1> 元件 是作為文件標題,<H2> 元件是作為章標題,<H3> 元件是作為節標題 ...等等。 因為標題元件的目的是是用來標示標題,所以請勿用它來達成改變字型或文字大小的效果。

ADDRESS - 地址

用途:定義位址元件。

格式: <ADDRESS>...</ADDRESS>

說明:

此元件用來標示網頁的作者或維護人的聯絡資訊(如電子郵件地址或首頁網址)。比方說: 以下的 <ADDRESS> 元件包含了網頁作者的名字(張無忌)與電子郵件地址:

<ADDRESS>
  張無忌(E-Mail:<A HREF="mailto:wugichang@pu.edu.tw>
          wugichang@pu.edu.tw</A>)
</ADDRESS>

其中的電子郵件地址被設定成一個超連結,目的是讓瀏覽者可以更便利地寄送電子郵件給作者。

六、設定文字格式的元件

這一節將介紹用來設定行中(inline)文字格式的元件。我們將這些元件區分為以下的兩大類:

寫意的文字格式設定一覽表
元件 用途 範例
<ABBR> 縮寫字 Computer Science 可縮寫成<ABBR> Comp. Sci. </ABBR>
<CITE> 引用 <CITE> 論語 </CITE>
<CODE> 程式碼 <CODE> x = x + 1; </CODE>
<DEL> 刪除字 明天<DEL>晚上 </DEL> 八點見
<DFN> 定義 <DFN>新新人類</DFN>是指目前二十歲上下的青少年
<EM> 強調 <EM>禁止進入</EM>
<INS> 插入字 明天<INS>晚上 </INS>八點見
<KBD> 鍵盤輸入 按<KBD>ENTER</KBD>鍵
<Q> 引用語 孔子曾說過:<Q>有事弟子服其勞 </Q>
<SAMP> 樣本文字 鍵入指令<SAMP>dir</SAMP>
<STRIKE> 刪字 <STRIKE>下週五</STRIKE>
<STRONG> 加重強調 <STRONG>絕對禁止</STRONG>
<VAR> 變數 變數<VAR>x </VAR>加一


 

FONT -- 字型

用途:設定文字的大小、顏色、與字型。

格式: <FONT>...</FONT>

屬性:

size = 1 | 2 | 3 | 4 | 5 | 6| 7 絕對大小,預設值為 3
size = -2 | -1 | 0 | +1 | +2 | +3 | +4 相對大小,預設值為 0
size = point 字型大小的點數
color = color 文字的顏色
face = font_name 字型名稱

說明:

FONT 元件是用來設定下列三種的文字外觀變化:

大小:
size 屬性來設定文字的絕對大小、相對大小、或點數。
顏色:
color 屬性來來設定文字的顏色。
字型:
face 屬性來來設定之。其屬性值 font_name 代表某 一個字型的名稱。字型名稱通常要寫在英文的雙引號之間,如 "新細明體"、 "標楷體"、"Times New Roman"、或 "Symbol" 等等。

 

設定段落格式的元件

這一節介紹以下與段落編排有關的HTML元件:<P>、<PRE>、<BLOCKQUOTE>、<BR> 、<NOBR>、以及 <HR>。

P -- 段落(Paragraph)

用途:設定一個段落。

格式:<P>...</P>

屬性:

align= left | center | right | justify] 水平的對齊模式:靠左、置中、靠右、或兩邊對齊
說明:

<P> 元件是用來定義一個段落。你可以用 align 屬性來設定段落的水平對 齊模式。如果結束標籤 <P> 之後跟著另一個 <P> 或 <DIV> 標籤,則 它可以省略不寫。譬如在底下的例子中:

   <P>第一個段落</P>
<P>第二個段落</P>
<DIV> ... </DIV>

你可以省略掉其中的P而簡化成:

    <P>第一個段落
<P>第二個段落
<DIV> ... </DIV>

瀏覽器通常將 <P> 元件中連續多個空白字元刪除成只剩下一個。此外,由於斷行字元也被視為空白字元的一種,它在 P 元件中,並不會產生斷行 的效果。我們以底下的例子來示範這些效果:

 

輸入 結果
<P> 這    是 一 段

文字 </P>
這是 一 段文字

如果你想在段落文字之間插入多個空白,則必須在 HTML 原始檔中輸入代表不可隔斷的空白字元的字元本體(character entity)&nbsp;(註:字元本體是HTML中用來輸入特殊字元的一種 方式。) 我們以底下的例子來示範 \  所產生的效果:

 

輸入 結果
中    華    民    國 中 華 民 國
中&nbsp;&nbsp;&nbsp;華&nbsp;&nbsp;&nbsp;民&nbsp;&nbsp;&nbsp;國 中   華   民   國

由於斷行字元在 <P> 元件中並不產生斷行的效果,所以當你希望在某處強迫斷行的話, 就必須在該處加上 <BR> 標籤才行(參見底下的說明)。

PRE -- 定格(Prefomatted)

用途:保留空白字元與斷行方式的文字區塊。

格式:<PRE> ...</PRE>

屬性:

width = n 每行建議的最多字元個數
說明:

<PRE> 元件通常用於需要保留空白字元與斷行方式的情況下,如顯示電腦程式碼或簡單的數據表格。瀏覽器常用定寬字型(如 Courier)來顯示<PRE> 元件內的文字。 以下我們會一些 <PRE> 元件的使用範例:

 

輸入 結果

<PRE>
這 是
三 行
文 字
</PRE>

這 是
三 行
文 字
<PRE>
二年甲班月考成績表
姓名   國文  數學  英文
-----------------------
李大同  90    60    35
吳小燕  75    86    77
張蕙海  60    40    44
</PRE> 
二年甲班月考成績表
姓名   國文  數學  英文
-----------------------
李大同  90    60    35
吳小燕  75    86    77
張蕙海  60    40    44
<PRE>
int sum (int n) { int i, sum = 0; for (i = 1; i <= n; i++) sum += i; return sum; } </PRE>
int sum (int n)
{
    int i, sum = 0;
    for (i = 1; i <= n; i++)
          sum += i;
          return sum;
}

 

BLOCKQUOTE -- 引述區段

用途:標示一段引述的文字。

格式:<BLOCKQUOTE>...</BLOCKQUOTE>

說明:

<BLOACKQUOTE> 元件用於括住一段引用他人的文字。瀏覽器通常會把此元件 內的文字視為獨立的段落,而且顯示時加以內縮,並增加其與上下段落之間的間隔 (如下例所示)。

 

輸入 結果
孔子曾經說過:
<BLOCKQUOTE>
學而實習之,不亦悅乎! 有朋自遠方來,不亦樂乎! 人不知而不慍,不亦君子乎!
</BLOCKQUOTE>
偉哉斯言!
孔子曾經說過:
學而實習之,不亦悅乎! 有朋自遠方來,不亦樂乎! 人不知而不慍,不亦君子乎!
偉哉斯言!

 

BR -- 斷行(Breaking)

用途:中斷文字流,強制跳行。

格式: <BR>

屬性:

clear = none | left | right | all      設定斷行之後的下一行出現方式(見以下的說明)。

說明: 利用 <BR> 元件強制跳行,可以達到文件編排上或視覺上的效果,如下例所示

輸入 結果
<P>
越女採蓮秋水畔,窄袖輕羅, 暗露雙金釧。<BR>
照影摘花花似面, 芳心只共絲爭亂。<BR>
雞尺溪頭風浪晚,霧重煙輕, 不見來時伴。<BR>
隱隱歌聲歸棹遠, 離愁引著江南岸。
</P>
越女採蓮秋水畔,窄袖輕羅, 暗露雙金釧。
照影摘花花似面, 芳心只共絲爭亂。
雞尺溪頭風浪晚,霧重煙輕, 不見來時伴。
隱隱歌聲歸棹遠, 離愁引著江南岸。

當段落之中有浮動的圖片或表格(即「文繞圖」或「文繞表」)時,屬性 clear 可用來 選擇斷行之後的下一行出現位置。其屬性值的含意如下:

none
下一行出現在正常的位置。此為預設值。
left
下一行出現在左側浮動物件的下方。
righ
下一行出現在右側浮動物件的下方。
all
下一行出現在左右兩側浮動物件的下方。

NOBR -- 不斷行(Non-Breaking)}

用途:不自動斷行。

格式:NOBR

說明:

NOBR 元件是用來防止某一段文字被斷行,即使其中的文字長度超過瀏覽器視窗的寬度, 也不會被瀏覽器將其斷行。

HR -- 橫線(Horizontal Rule)

用途:中斷文字流,並加入一條水平尺線。

格式: <HR>

屬性:

size=n 厚度為 n 個像素
width=n | n% 寬度為 n個像素或視窗的 n%
align= left | right | center 水平的對齊模式:靠左、靠右、或置中
noshade 去陰影

說明:

<HR>元件是用來在網頁中加入一條水平線,藉此來分隔網頁不同的區域。

 

製作條列元件

這一節介紹以下用來製作條列項目的HTML元件:<UL>、<OL>、<DIR>、<MENU> 、<DT>與<DD>、以及<LI>。

UL -- 無序條列(Unordered List)

用途:定義沒有次序性的條列項目。

格式:<UL>...</UL>

屬性:

compact 壓縮項目的間距
type = disc | circle | square 條列項目之前的符號:空心圓、實心圓、或實心方塊

說明:

<UL> 元件是用來建立沒有次序性的項目條列。此外,<UL> 元件也常用來達到段落內縮的 效果。以下是一些 <UL> 元件的示範:

 

輸入 結果
<P>台灣大民俗節日是:</P>
<UL>
<LI>春節
<LI>清明節
<LI>端午節
<LI>中秋節
</UL>

台灣大民俗節日是:

  • 春節
  • 清明節
  • 端午節
  • 中秋節
<P>台灣大民俗節日是:</P>
<UL TYPE="SQUARE">
<LI>春節
<LI>清明節
<LI>端午節
<LI>中秋節
</UL>

台灣大民俗節日是:

  • 春節
  • 清明節
  • 端午節
  • 中秋節
<P>台灣大民俗節日是:</P>
<UL TYPE="DISC">
<LI>春節
<LI>清明節
<LI>端午節
<LI>中秋節
</UL>

台灣大民俗節日是:

  • 春節
  • 清明節
  • 端午節
  • 中秋節

 

OL -- 有序條列(Ordered List)

用途:定義有次序性的條列項目。

格式: <OL> ... </OL>

屬性:

compact 壓縮項目的間距
type = I | i | A | a | 1

項目條列的編號方式:

I 大寫的羅馬數字。
i 小寫的羅馬數字。
A 大寫的英文字母。
a 小寫的英文字母。
1 阿拉伯數字。
start=n 編號的初始值

說明:

<OL> 元件是用來建立具有次序性的項目條列。以下是一些 <OL> 元件的示範:

 

輸入 結果

<p>距離太陽最近的個行星依序為:</p>
<ol>
<li>金星
<li>水星
<li>地球
<li>火星
</ol>

距離太陽最近的個行星依序為:

  1. 金星
  2. 水星
  3. 地球
  4. 火星
<p>距離太陽最近的個行星依序為:</p>
<ol type="A">
<li>金星
<li>水星
<li>地球
<li>火星
</ol>

距離太陽最近的個行星依序為:

  1. 金星
  2. 水星
  3. 地球
  4. 火星
<p>距離太陽最近的個行星依序為:</p>
<ol type="i">
<li>金星
<li>水星
<li>地球
<li>火星
</ol>

距離太陽最近的個行星依序為:

  1. 金星
  2. 水星
  3. 地球
  4. 火星

 

LI -- 條列項目(List Item)

用途:設定 <UL> 和 <OL> 條列中的項目。

格式:<LI> ... </LI>

屬性:

compact 壓縮項目的間距
type = disc | circle | square <UL> 條列項目之前的符號:空心圓、實心圓、或實心方塊
type = I | i | A | a | 1

<OL> 項目條列的編號方式:

I 大寫的羅馬數字。
i 小寫的羅馬數字。
A 大寫的英文字母。
a 小寫的英文字母。
1 阿拉伯數字。
value=n <OL> 條列項目的編號值

 

定義式條列(Definition List)

用途:建立定義式的條列項目。

格式: <DL>
            <DT>...</DT> <DD>...</DD>
            ...

       </DL>

屬性:

compact 壓縮項目的間距

說明:

<DL> 元件是用來建立一個定義形式的條列項目,其中的 <DT> 元件是用於標示定義項目的 名稱,而 <DD> 是用於標示定義項目的描述。譬如以下是一個定義式條列的範例:

 

輸入 結果
          

<p>中英對照 </p> <dl> <dt>CPU</dt> <dd>中央處理機</dd> <dt>Memory</dt> <dd>主記憶體</dd> <dt>Disk</dt> <dd> 磁碟機</dd> </dl>

中英對照

CPU
中央處理機
Memory
主記憶體
Disk
磁碟機
 

A -- 定錨(Anchor)

用途:在網頁中加入一個超連結或文件標籤。

格式:<A> ... </A>

屬性:

href = url 指定連結物件之URL
name= string 設定文件標籤
target= string 指定目標文件的顯示視窗或框架
title = string 連結標題
說明:

href name這兩個屬性不能同時在 <A> 元件之中設定,因為前者 是用來建立超連結,而後者是用來設定文件標籤的位置。底下是一些利用 <A> 元件來建 立超連結的範例。

 

輸入 結果
預知詳情,請參考 <A href="menu.html"> 使用手冊 </A> 在「使用手冊」這個詞上建立一個超連結。當瀏覽者在其上按 下滑鼠,瀏覽器會下載並顯示網頁 menu.html
就讀學校:<A href="http://www.pu.edu.tw/">靜宜大學 </A> 在「靜宜大學」這個詞上建立一個連結至靜宜大學首頁的超連結。
<A href="http://www.pu.edu.tw/pugate.gif"> 靜宜的大門照片 </A> 在「靜宜的大門照片」這個詞上建立一個連結至 圖片檔 http://www.pu.edu.tw/pugate.gif

name 屬性是用來在網頁中特定位置上建立一個文件標籤。 文件標籤可以作為超連結的目標端。文件標籤名稱中的大小寫英文字母並無區別 (case-insensitive),然而同一個網頁中不得有相同名稱的文件標籤。 底下是一個利用 <A> 元件來設定文件標籤的範例。

<P><A href="#sec1"> 如何製作網頁 </A> 
...其他內容
<A name="sec1"></A><H2> 一﹑如何製作網頁 </H2>

第一個 <A> 元件在「如何製作網頁」這個詞上建立一個連結至名稱為 sec1 的文件標籤。(注意:此處不可寫成 href="sec1",否則 將被視為連結至檔案 sec1 的超連結。第二個 <A> 元件在標題 「一﹑如何製作網頁」之前插入一個名為 sec1 的文件標籤。這兩 個 <A> 元件的配合使用,將使得超連結文字「如何製作網頁」連結至 標題「一﹑如何製作網頁」所在的位置。

target 屬性是用來選擇顯示連結目標物件的視窗或框架。 其屬性值為視窗或框架的名稱。 譬如底下的 <A> 元件設定:

 
   <A href="content.html" target="window1">目錄</A>
  
將使得連結的網頁 content.html 顯示於名稱為 window1 的瀏覽器視窗或框架之中。 若此視窗並不存在的話,瀏覽器自動開啟一個新視窗,並將其命名為 window1 。除了自訂的名稱外,你也可以採用以下的預設名稱:
target = _blank
開啟一個沒有名稱的視窗來顯示連結目標物件。
target = _self
顯示連結目標物件於目前的視窗(或框架)中。這是 target 屬性的預 設值。換句話說,若你沒有指定 target 屬性的話,連結物件 將顯示於目前的視窗。
target = _parent
顯示連結目標物件於父視窗中。此處所稱的父視窗(parent window)是之前開 啟目前視窗的視窗。若無父視窗的話,則連結物件將顯示於目前的視窗中。
target = _top
顯示連結目標物件於頂層視窗中。此處所稱的頂層視窗(top window)是沿著 瀏覽器視窗開啟順序的反方向追蹤到底所得的視窗,通常為你所開啟的第一 個瀏覽器視窗。若目前的視窗就是頂層視窗的話,則連結物件將顯示於目前 的視窗中。

title 屬性是用來設定 <A> 元件的標題資訊。在IE瀏覽器中,若你將 游標移至具有標題資訊的超連結上,螢幕上就出現一個顯示該標題資訊的淺黃色 小方塊。你可以利用此效果,提供一些超連結的額外資訊給瀏覽者。

 

製作表格的元件

 

表格簡介

基本上,表格(Table)是用來把一個矩形區域切割成若干儲存格(Cell)的一種結構。其中以棋盤式的切割為最常見的一種。通常我們把具有 n 列 m 欄的表格稱為 n x m 的表格,顯然地,這樣的表格具有 nm 個儲存格。比方說:底下圖中的表格將一個矩形區域橫切為三列以及直切為四欄,因此它是一個 3 x 4 的表格,且其儲存格的個數為 3 * 4 =12。為了方便稱呼起見,我們習慣將表格的列與欄以下圖所示的方式加以編號,亦即列由上而下、欄由左而右地分別用1, 2, 3, … 等數字依序地編號。

你可以用以下兩種方式來指定表格的高度與寬度(即其所切割之矩形區域的高度與寬度):

絕對單位
以像素的個數指定之。表格的大小固定不變,並不會隨瀏覽器視窗的大小而變。
相對單位
以瀏覽器視窗高度(或寬度)的百分比指定之,因此表格的大小會隨瀏覽 器視窗的大小而變。

註:巢式表格(見以下說明)是以其外部表格高度(或寬度)的百分比指定之。

外框線與格線

用來顯示出表格外緣的線條稱為表格的外框線(Border)。用來區隔儲存格的線條則稱為表格的格線(Grids)。在設計家中,你可以控制一個表格是否顯示外框線或格線;若顯示的話,還可以進一步地設定其粗細程度。Netscape 與 IE 瀏覽器會以立體的效果來顯示外框線,使表格彷彿突出於網頁之上。

一般而言,資料表格最好顯示出外框線與格線,才比較美觀。但是當表格用於網頁佈置時,就應該將其外框線與格線隱藏起來,才不會在網頁上出現錯綜複雜的線條,而顯得凌亂不堪。

儲存格

你可以在儲存格中加入文字、圖片、甚至另一個表格。設計家提供以下的儲存格設定功能:

此外,通常儲存格是以其所在的列號與欄號來稱呼,以上面圖示的表格為例,位於四角的儲存格分別是: 第一列第一欄(左上角)、第三列第一欄(左下角)、第一列第四欄(右上角)、以及第三列第四欄(右下角)。

背景顏色與背景圖案

你可以設定整個表格或個別儲存格的背景顏色或背景圖案,以及設定一整列儲存格的背景顏色。不過,HTML 並未提供設定一整欄儲 存格背景顏色的功能,所以你必須一格一格地來設定一欄的背景顏色。

合併格

跨越不只一列或一欄的儲存格稱為併格。比方說:在 \figref{cellspan} 所示的表格中,「作物」儲存格就是一個合併格,因為它跨佔了兩列。 「收成比例」儲存格也是一個合併格,因為它跨佔了三欄。併格通常用於製作結構比較複雜的表格。

 

作物
收成比例
甲地 乙地 丙地
稻米 30% 40% 30%
黃豆 20% 40% 40%
紅豆 60% 25% 15%

 

巢式表格

如前所述,你可以在儲存格中加入另一個表格,這種「表格之中有表格」就是所謂的巢式表格(Nested Table)。 可能有讀者一時無法明瞭為何需要巢式表格這項功能,這麼說吧!假定你用了表格來規劃網頁的佈置。如果不允許使用巢式表格的話, 你將無法在這個佈置之用的表格中,再加入一個普通的資料表格。如此一來,表格只能在其兩種用途之間擇一使用,而無法並用了。 這種限制顯然並不合理。 除此之外,巢式表格也能讓你規劃出更複雜與更精確的網頁佈置方式。

在HTML 4.0中,表格除了一般的列與欄之外,還可以定義其他的表格結構。 比方說:你可以利用 <THEAD> 元件、<TFOOT> 元件、與 <TBODY> 元件, 將表格列群組成 表首(head)、表尾(foot)、與表體(body)。 瀏覽器所以不同 的方式來顯示這些不同的列結構。譬如:底下的表格設定方式在IE 4.0中, 產生如 \figref{tblsamp1} 所示的畫面:

 

輸入 結果
<table align=center border=1 cellpadding=3 width=300>
    <caption align=top> 活動人員名單 </caption>
    <thead align=left> 
          <th>姓名<th>年齡<th>身份字號
    <tbody> 
          <tr><td>李大同<td>12<td>A520723389</tr>
          <tr><td>張小燕<td>6<td>B452270345</tr>
          <tr><td>光 禹 <td>10<td>F201209873</tr>
          <tr><td>黃大洲<td>13<td>A692345966</tr>
    <tfoot> 
          <tr>
          <td align=center colspan=3>總人數:共四人
          </tr>
</table>
        
活動人員名單
姓名 年齡 身份字號
李大同 12 A520723389
張小燕 6 B452270345
光 禹 10 F201209873
黃大洲 13 A692345966
總人數:共四人

你可以注意到IE 4.0將表首列的文字以較粗的字體來顯示。 除此之外,HTML 4.0也提供了更彈性的方式來設定外框線與格線的樣式。比方說:如果你把 以上範例的 <TABLE> 元件改成如下的設定方式:

 <TABLE align=center border=1 cellpadding=3 width=300 frame=above rules=groups>

則在在IE 4.0中的畫面將如下表所示。你應該可以注意到表格只有 三條水平的框線,它們分別出現在表首、表尾、與表體的上方。

 

活動人員名單
姓名 年齡 身份字號
李大同 12 A520723389
張小燕 6 B452270345
光 禹 10 F201209873
黃大洲 13 A692345966
總人數:共四人

 

表格是用 <TABLE> 元件來定義。所有其它的表格元件都必須寫在 <TABLE> 元件之中才能發生效力。 表格的結構主要是靠以下的表格元件來設定:

<TD>
定義資料格(data cell)
<TH>
定義標題格(header cell)
<TR>
定義資料列(data row)
<CAPTION>
定義表格的說明文字標題

此外,你可以用 <THEAD> 元件、<TFOOT> 元件、或 <TBODY> 元件來群組 表格列。也可以用 <COLGROUP> 元件與 <COL> 元件來群組表格欄。

 

TABLE HTML元件

用途:用以定義表格的結構與內容。

格式:<TABLE> ... </TABLE>

屬性:

width = length 指定表格的寬度。
align = left | right | center 指定表格在網頁中的水平位置為:靠左、靠右、或置中。
border = n 指定表格外框線的厚度 。
cellspacing= length 指定儲存格的間距寬度。
cellpadding= length 指定儲存格的內距寬度。
bgcolor = color 指定表格的背景顏色。
frame 設定格外框的顯示方式(參見底下的說明)。
rules 設定儲存格格線的顯示方式(參見底下的說明)。
說明:

屬性 rules 可用來設定儲存格之間的格線。其五種可能的屬性值如下:

none 無格線(此為預測值)。
groups 只在列組群(<THEAD> 、<TFOOT>、或<TBODY>) 之間或欄組群(<COLGROUP> 或 <COL>)之間畫上格線。
rows 只在列與列之間畫上格線。
cols 只在欄與欄之間畫上格線。
all 在列之間與欄之間都畫上格線。

 

CAPTION -- 表格標題

用途:加入表格的說明文字標題。

格式:<CAPTION>

屬性:

align = top | bottom | ;eft | right 指定表格標題的位置在表格之上方、下方、左方、或右方
說明:
    1. 你可以在Netscape設計家的「新建表格對話框(\figref{newtbldlg})」 或「表格屬性對話框(\figref{tbldlg})」中設定說明文字標題與其位置。 不過你只有表格上方或下方兩種位置的選擇。
    2. 若你將屬性align設定成右方(或左方),則說明文字標題將出現在 表格的右上角(或左上角)。

THEAD - 表首(Table Head)

用途:用以宣告表首列。

格式:<THEAD> ... </THEAD>

屬性:

align = left | right | center 指定表首列儲存格的水平對齊模式:靠左、靠右、或置中。
valign = top | middle | bootom | baseline 指定表首列儲存格的垂直對齊模式:頂部、 中間、底部、或基線。
說明:
  1. <THEAD> 元件是用來宣告表首列,而表首列通常作為表格的欄標題之用。
  2. 通常我們在 <THEAD> 元件中使用 <TH> 元件(而非 <TD>元件)來定義欄 的標題。

TFOOT - 表尾(Table Foot)

用途:用以宣告表尾列。

格式:<TFOOT> ...</TFOOT>

屬性:

align = left | right | center 指定表尾列儲存格的水平對齊模式:靠左、靠右、或置中。
valign = top | middle | bootom | baseline 指定表尾列儲存格的垂直對齊模式:頂部、中間、底部、 或基線。

說明:

  1. <TFOOT> 元件是用來宣告表尾列,而表尾列通常包含了表格的總結資訊或 附註資訊。
  2. 你可以在 <TFOOT>元件中使用 <TH>元件或 <TD>元件來定義其中的 儲存格。

 

TBODY - 表格主體(Table Body)

用途:用以宣告表格的主體。

格式:<TBODY> ... </TBODY>

屬性:

align = left | right | center 指定表主體儲存格的水平對齊模式:靠左、靠右、或置中。
valign = top | middle | bootom | baseline 指定表主體儲存格的垂直對齊模式:頂部、中間、底部、 或基線。

說明:

  1. <TBODY> 元件是用來宣告表格的主體,而表格的主體通常包含了表格的資料 項目。
  2. 你可以在 <TBODY> 元件中使用 <TR> 元件來設定各個資料列,並用 <TD>元件來定義其中的儲存格。

 

TR -- 表格列(Table Row)

用途:TR(Table Row)是用來宣告一個表格列。

格式:<TR> ... </TR>

屬性:

align = left | right | center 指定此列儲存格的水平對齊模式:靠左、靠右、或置中。
valign = top | middle | bootom | baseline 指定此列儲存格的垂直對齊模式:頂部、中間、底部、或基線。
bgcolor=color 此列的背景顏色

說明: <TR> 元件是用來設定一個表格列。

 

TH - 標題格(Table Header Cell)與 TD - 資料格(Table Data Cell)

用途:<TH> 元件與 <TD>元件是分別用來定義標題格和資料格。

格式:<TH> ... </TH> 與 <TD>...</TD>

屬性:

colspan = n 跨佔的欄數
rowspan= n 跨佔的列數
nowrap 內文不自動回繞
bgcolor=color 儲存格的背景顏色
width = n 儲存格的寬度
align = left | right | center 指定儲存格的水平對齊模式:靠左、靠右、或置中。
valign = top | middle | bootom | baseline 指定儲存格的垂直對齊模式:頂部、中間、底部、或基線。

說明:

  1. 標題格是表格中作為各欄標題的儲存格,而資料格是表格中顯示資料 的儲存格。瀏覽器通常以比較粗的字體來顯示標題格,而以普通的字體 來顯示資料格。
  2. 標題格是以 <TH> 元件來設定,資料格則是以 <TD> 元件來設定。
  3. 儲存格可以跨佔數欄或跨佔數列。跨佔的欄數 是以屬性 colspan 來設定。跨佔的列數則是以屬性 rowspan 來設定。

 

COLGROUP -- 欄群組(Column Group)

用途:用來定義欄群組,藉以設定這些欄的共同屬性。

格式:<COLGROUP>

屬性:

span = n 欄群組所包含的欄數(參見底下的說明)。
width = multilength 欄群組中各欄的寬度(參見底下的說明)。
nowrap 內文不自動回繞
bgcolor=color 儲存格的背景顏色
width = n 儲存格的寬度
align = left | right | center 指定欄群組中儲存格的水平對齊模式:靠左、靠右、或置中。
valign = top | middle | bootom | baseline 指定欄群組中儲存格的垂直對齊模式:頂部、 中間、底部、或基線。

說明:

網頁作者可以用 <COLGROUP> 元件來區隔表格欄的結構,以及設定群組中各欄的共同屬性。 屬性 span 是用來設定群組所包含的欄數。 其值必須為一個正整數。若沒有設定的話,其預設值為 1(即欄群組只包含一欄)。屬性 width 是用來設定欄群組中各欄 的寬度。你除了可以用像數、 百分比、或相對值來指定寬度之外,也可以使用 "0*" 這個特別形式的屬性值,將欄寬設定成足以顯示完整內容的最小寬度。屬性 align 與屬性 valign 則分別是用來設定欄群組中儲存格的水平對齊模式與垂直對齊模式。

你可以在 <COLGROUP> 元件中使用 <COL> 標記(參見下一節)來定義各欄的 屬性。比方說,以下的的表格定義了一個欄群組。此欄群組由兩欄所組成, 且第一欄與第二欄的寬度分別是 60 個像素與 100 個像素。

<TABLE>
<COLGROUP>
  <COL width=60>
  <COL width=100>
</COLGROUP>
  ...其餘的表格列定義
</TABLE>

若每一欄的屬性均相同的話,你可以利用屬性\attrib{span>來簡化欄群組的定義。 比方說,以下的的表格定義了兩個欄群組。第一個欄群組由三欄所組成,且每一欄 的寬度為 50 個像素。第一個欄群組由兩欄所組成,且每一欄的寬度為足以顯示完整 內容的最小寬度。

<TABLE>
<COLGROUP span=3 width=50>
<COLGROUP span=2 width=0*>
  ...其餘的表格列定義
</TABLE#62;

以上的欄群組定義等同於底下的定義方式:

<TABLE>
<COLGROUP>
   <COL repeat=3 width=50>
</COLGROUP>
<COLGROUP>
   <COL repeat=2 width=0*>
</COLGROUP>
  ...其餘的表格列定義
</TABLE>

COL - 欄(Column)

用途:設定一欄的屬性或多欄的共同屬性。

格式: <COL>

屬性:

repeat = n 設定欄數為 n(參見底下的說明)。
width = multilength 設定各欄的寬度(參見底下的說明)。
width = n 儲存格的寬度
align = left | right | center 指定欄群組中儲存格的水平對齊模式:靠左、靠右、或置中。
valign = top | middle | bootom | baseline 指定欄群組中儲存格的垂直對齊模式:頂部、 中間、底部、或基線。
說明:

<COL> 元件可以用來設定一欄的屬性或多欄的共同屬性,然而它並不會如 <COLGROUP> 元件一般地定義出一個欄群組結構。屬性 repeat 是用來設定欄數,其值必須為一 個正整數。若沒有設定的話,其預設值為 1(即只含一欄)。屬性 width 是用來設 定各欄的寬度。它的意義與設定方式與 <COLGROUP> 元件的 width 屬性完全相同。 屬性 align 與屬性 valign 則分別是用來設定欄群組中儲存格的水平對齊 模式與垂直對齊模式。

若 <COL> 元件的屬性與 <COLGROUP> 元件的屬性相抵觸的話,瀏覽器將以前著的設定為準。譬如:底下表格的 <COLGROUP> 元件包含兩個 <COL> 元件。

<TABLE>
<COLGROUP width=100>
   <COL>
   <COL width=50>
</COLGROUP>
  ...其餘的表格列定義
</TABLE>

第一個 <COL> 元件並未指定欄寬,因此第一欄的寬度為 100 個像數(取自 <COLGROUP> 元件的設定)。第二個 <COL> 元件則將第二欄的寬度設定成 50 個像數(取代了 <COLGROUP> 元件的設定)。

加入多媒體的元件

這一節介紹以下用來加入多媒體的HTML元件:<IMG>、<EMBED>、和 <NOEMBED>。

IMG -- 圖片(Image)

用途:在文件加入行間圖片(inline image)。

格式: <IMG>

屬性:

src = url 圖片檔的 URL
alt = string 替代文字
height = length 圖片高度
width = length 圖片寬度
align = bottom | middle | top 水平對齊模式
align = left | right 文繞圖方式
border = length 圖片外框厚度
hspace= pixel 圖片左右留白寬度
vspace = pixel 圖片上下留白寬度
lowsrc = url 低解析度圖片位址
usemap = url 客戶端影像地圖
ismap 伺服端影像地圖

說明:

屬性 align 除了上述的水平對齊模式外, Netscape 另外了支援底下的方式:

texttop 讓圖片的頂端與同一行最高文字的頂端對齊。 註:TOP是讓圖片的頂端與同一行最高物件的頂端對齊。
absmiddle 讓圖片的水平中線與同一行最大物件的水平 中線對齊。 註:middle是讓圖片的水平中線與同一行文字的基線(baseline)對齊。
baseline 讓圖片的底部與同一行文字的基線對齊。 註:baselinebottom的作用完全相同,不過baseline這個名稱比較貼切。
absbottom 讓圖片的底部與同一行最低物件的底部對齊。

此外,微軟公司的IE瀏覽器支援使用 <IMG> 元件來加入 AVI 影片或 VRML描述檔的功能。(註:VRML(Virtual Reality Markup Language)是一種 用來製作網頁上虛擬實境的標記語言。本書限於篇幅,無法詳細解說。有興趣的讀者, 可自行閱讀相關的書籍或雜誌。)底下是這些相關屬性的說明:

dynsrc = url AVI影片檔的URL。
controls 顯示影片播放控制器的圖示。
start = fileopen | mouseover 播放時機。fileopen:網頁開啟之後即播放;mouseover:滑鼠游標移到影片圖示的上方才播放。
loop = n | infinite 循環播放的次數。你可以將其 設定成播放 n 次(n 為一個正整數),或不停地循環播放(infinite)。
loopdelay = n 循環時的延播時間(以千分之一秒為單位)

 

BGSOUND -- 背景音樂(Background Sound)

用途:在網頁中加入背景音樂。

格式:<BGSOUND>

屬性:

src = url 背景音樂檔案的 URL
loop = n | infinite 循環播放的次數。你可以將其 設定成播放 n 次( n 為一個正整數),或不停地循環播放(infinite)。

說明: 你可以在 BODY 元件一開頭的部分使用 <BGSOUND> 元件為網頁加上一段背景音樂。 背景音樂可以使用 MIDI(.mid)、AU(.au)、或WAV(.wav)等格式的音樂檔(括號內是它們常用 的副檔名)。以下是一些 <BGSOUND>元件的使用範例:

輸入 效果
<BGSOUND src="welcome.wav"> 
進入網頁後,播放背景音樂檔 welcome.wav 一次。
<BGSOUND src="welcome.wav" loop=4>
進入網頁後,播放背景音樂檔 welcome.wav 四次。
<BGSOUND src="welcome.wav" loop=INFINITE>
進入網頁後,不斷地循環播放背景音樂檔 welcome.wav,直到離開網頁為止。

如果你打算加入背景音樂,筆者建議你選用簡短的音樂以避免因為過大的音樂檔,而 延緩網頁的下載時間。此外,也盡量避免多次循環播放,而使得瀏覽者感到厭煩。

註:目前只有 IE 瀏覽器能夠正確地處理 <BGSOUND> 元件,而 Netscape 瀏覽器不支援這個元件。筆者建議你採用底下所敘述的 <EMBED> 元件來加入背景音樂。

EMBED -- 崁入

用途:在網頁中崁入物件。

格式: <EMBED>

屬性:

src = url 物件檔案的 URL

說明:電腦的資料檔案格式種類繁多,瀏覽器顯然無法處理與顯示所有的資料檔案。Netscape 公司因而制訂一套擴充瀏覽器功能的規則,讓他們的協力廠商得以開發出所謂的「外掛程式(plug-ins)」。使用者只要安裝某個廠商提供的外掛程式, 就能夠直接在瀏覽器視窗中觀看這個廠商專屬的資料檔案。比方說:

除此之外,你還可以在網站上找到各式各樣的即插即用程式。

由於各種資料檔案所要求的屬性設定方式也不盡相同,所以 <EMBED> 元件除了上述的 src 屬性以外,其它的屬性則是隨資料檔案的格式而定。底下我們用一些例子來 說明 <EMBED> 的使用技巧。

	<EMBED src="myavi.avi" width=320 height=200 autostart=true loop=true>

插入AVI 格式的影片檔 myavi.avi。其顯示的寬度與高度分別是 320 個像素與 200 像素。 屬性 autostart 設成 true 是為了讓影片在網頁下載之後即自動播放。 屬性 loop 設成 true 則是為了讓影片不斷地循環播放。

	<EMBED src="mysound.mid" width=140 height=60 volumn=75>

插入 MIDI 格式的音效檔 mysound.mid,並顯示 140 x 60 個像素大小的音效控制器圖像。瀏覽者可利用此音效控制器來播放音效。屬性 volumn 設成 75 則是將音量調為 75(音量值是介於 0 到 100 之間,0 代表無聲,而 100 代表最大聲)。

	<EMBED src="chord.wav" width=0 height=0 autostart=true>

插入 WAV 格式的音效檔 chord.wav,並隱藏音效控制器圖像。屬性 autostart 設成 true 將使得音效在網頁下載之後即自動播放。由於 Netscap 與 IE 瀏覽器都接受以上的 <EMBED> 格式,所以此方式比 前一節的 <BGSOUND> 元件更適合用來為網頁加上背景音樂。

	<EMBED src="mydoc.pdf" width=100% height=100%>

插入 PDF 格式的文件檔 mydoc.pdf,並以整個瀏覽器視窗來顯示。IE 瀏覽器自動執行 Adobe 公司的Acrobat Reader 程式,讓瀏覽者觀看整個文件。Netscape 瀏覽器只顯示文件的 第一頁,瀏覽者必須按下滑鼠右鍵後,點選其中的開啟文件指令,才能觀看整個文件。

	<EMBED src="shockmov.dcr" width=300 height=300>

插入 DCR 格式的動畫檔 shockmov.dcr,並播放於 300 x 300 個像素大小的方框內。

NOEMBED -- 非崁入

用途:提供 <EMBED>元件的替代性內容。

格式:<NOEMBED>

說明:<NOEMBED> 元件中的內容會被不支援 <EMBED> 元件的瀏覽器顯示出來,但不會被支援 <EMBED> 元件的瀏覽器顯示出來。 由於並非所有的瀏覽器均支援 <EMBED >元件,所以當 <EMBED> 元件的內容 會受影響網頁的外觀時,筆者建議你使用 <NOEMBED> 元件來提供替代性的內容。比方說,你可 以用以下的設定:

<EMBED src="shockmov.dcr" width=300 height=300>
<NOEMBED>
<IMG src="frame1.gif" width=300 height=300 alt="動畫替換圖片">
</NOEMBED>
讓不支援 <EMBED> 元件的瀏覽器能夠用顯示圖片 frame1.gif 的方式來取代播放動畫檔 shockmov.dcr,此處的 frame1.gif 可選用動畫的第一張圖片。