用HTML寫網頁webpage

如何用 HTML 寫網頁 web page

原作 : Mike Smith, University of Brighton, UK
翻譯 : ENMPC Technical Team

序言

萬維網 (WWW World Wide Web) 本頁是用HTML (HyperText Markup Language)電腦語言編寫的.
萬維網頁的示範能力是有賴於HTML中的標籤 (tags) 的指引,再經由瀏覽器 (web browser) 演譯
於瑩幕上. 常用的瀏覽器有:

Netscape
Mosaic
Internet Explorer

甚麼是HTML

HTML (HyperText Markup Language)是一種包含標籤於文字中於組合語言,
讀者可憑瀏覽器 (BROWSER) 讀取文件中的標籤及文字,演譯出預定的效果.
同一的瀏覽器已有不同的版本以適合不同的電腦系統.
演譯效果除有賴於不同的瀏覽器外,也取決於瀏覽器的設定值:

所使用的標籤.
所選用的頁寬.
所選用的字型.
所選用的顏色及深度.

瀏覽器在字與字及行與行中反會接受任何空行或空字元。
所以以下的情況將得到相同的結果.

輸入示範一輸入示範二輸入示範三
瀏覽器將不會理會

新行及多出的空字元。瀏覽器將
不會理會新行及
多出的空字元。瀏覽器將
不會理會新行
及
多出的空字元。

輸入示範一	輸入示範二	輸入示範三
瀏覽器將不會理會新行及多出的空字元。	瀏覽器將不會理會新行及多出的空字元。	瀏覽器將不會理會新行及多出的空字元。

結果是這樣:

瀏覽器將不會理會新行及多出的空字元。

HTML中的標籤一般都有一個開始生效符<　> 及關閉生效符</　>，
以粗體字為例，<B> 粗體字</B>

標籤中的英文指令不分大小楷的，如粗體字標籤 <B> 或<b> 是一樣的。

HTML跟其他的電腦語言一樣是有一定的格式，
標籤就是HTML的指令。
HTML的格式：

文件的起始
主題的起始
主題的結束
內文的起始
內文的結束
文件的結束

備忘等。

以下是一個其本的HTML例子：

畫面顯示如下 HTML 需要這樣寫

一個專頁 web page 的例子
<!這是備忘行，用感歎號開始> <HTML> <HEAD> <TITLE>這行會顯示在外框</TITLE> </HEAD> <BODY> 一個專頁 <B>web</B> page 的例子 </BODY> </HTML>

　

畫面顯示如下	HTML 需要這樣寫
一個專頁 web page 的例子	<!這是備忘行，用感歎號開始> <HTML> <HEAD> <TITLE>這行會顯示在外框</TITLE> </HEAD> <BODY> 一個專頁 <B>web</B> page 的例子 </BODY> </HTML>

在這例子曾使用過的標籤：

<!　>: 備忘行只有起始標籤，沒有結束標籤。用<!開始，及">關閉。有些瀏覽器用<!-開始及">關閉。
<HTML> </HTML>: 宣佈 HTML 本文開始。
<HEAD> </HEAD>: 宣佈此文件的題目，這題目是不會顯示在讀者的瀏覽器上。
<TITLE> </TITLE>: 主題目會顯示在瀏覽器外框的頂端，網絡尋找器也是用這個主題目為指引。
<BODY> </BODY>: 網頁的內文全都要放在這個標籤範圍內，並且需要遵照HTML語法啟動其他標籤。
<B> </B>: 一組顯示粗體的標籤。

注意:: 一、標籤是可以用大寫、小寫、甚至大小混合寫都可。例如： <HTML>, <HtMl> 或 <html>
二、如果想在瀏覽器上顯示中文字句，你需要在<HEAD></HEAD>標籤中加入下列句子：
<meta http-equiv="Content-Type" content="text/html"; charset="BIG5">

簡單的 HTML 標籤 (tags)

以下是一些簡單的 HTML 標籤：

畫面顯示如下 HTML 需要這樣寫
這文字是粗體這 <B>文字</B> 是粗體
這文字是斜體這 <I>文字</I> 是斜體
這 文字 是用打字機字體這 <TT>文字</TT> 是用打字機字體
這文字是用 2 號字型
大小可使用 -7..-1.1 .. 7 號字型
這 <FONT SIZE=+2>文字</FONT> 是用 2 號字型<FONT SIZE=+2>大</FONT> 小可使用 -7..-1.1 .. 7 號字型

*紅色
*綠色
*藍色
*<FONT COLOR="red">紅色</FONT> *<FONT COLOR="green">綠色</FONT> *<FONT COLOR="blue">藍色</FONT>* 這是用英文來設定顏色。

*紅色
*綠色
*藍色
*<FONT COLOR="#FF0000">紅色</FONT> *<FONT COLOR="#00FF00">綠色</FONT> *<FONT COLOR="#0000FF">藍色</FONT>* 這是用 RGB 來設定顏色。

請用電郵地址
enews@enmpc.org.hk
與我聯絡
請用電郵地址 <ADDRESS>enews@enmpc.org.hk</ADDRESS> 與我聯絡

畫面顯示如下	HTML 需要這樣寫
這文字是粗體	這 <B>文字</B> 是粗體
這文字是斜體	這 <I>文字</I> 是斜體
這 `文字` 是用打字機字體	這 <TT>文字</TT> 是用打字機字體
這文字是用 2 號字型大小可使用 -7..-1.1 .. 7 號字型	這 <FONT SIZE=+2>文字</FONT> 是用 2 號字型<FONT SIZE=+2>大</FONT> 小可使用 -7..-1.1 .. 7 號字型
紅色綠色 *藍色	<FONT COLOR="red">紅色</FONT> <FONT COLOR="green">綠色</FONT> <FONT COLOR="blue">藍色</FONT> 這是用英文來設定顏色。
紅色綠色 *藍色	<FONT COLOR="#FF0000">紅色</FONT> <FONT COLOR="#00FF00">綠色</FONT> <FONT COLOR="#0000FF">藍色</FONT> 這是用 RGB 來設定顏色。
請用電郵地址 enews@enmpc.org.hk 與我聯絡	請用電郵地址 <ADDRESS>enews@enmpc.org.hk</ADDRESS> 與我聯絡

注意:: 標籤通常是一對使用的。(同時需要有開啟及關閉標籤)

邏輯化的標籤

以下使用的標籤是絕對需要有關閉標籤同時使用的：

畫面顯示如下 HTML 需要這樣寫
以下是引述他人的說話以下是
<CITE> 引述他人的說話</CITE>
Represents computer code
<CODE> Represents computer code </CODE> <!這標籤只適用於英文文本>

一串的 literal 文字一串的 <SAMP> literal </SAMP>文字
這是一個BLOCKQUOTE例子
此段文字已向內移入小許
這是一個BLOCKQUOTE例子 <BLOCKQUOTE>此段文字已向內移入小許 <BLOCKQUOTE>
這個文字使用了 definition 標籤這個
<DFN> 文字 </DFN>使用了 definition 標籤
這個文字使用了 emphasized 標籤這個<EM> 文字 </EM>
使用了 emphasized 標籤
這個 文字使用了keyboard標籤這個 <KBD> 文字 </KBD>使用了keyboard標籤
這個文字使用了 strongly emphasized 標籤這個<STRONG> 文字 </STRONG>
使用了 strongly emphasized 標籤
這個 文字 使用了 program variable 標籤這個<VAR> 文字 </VAR>
使用了 program variable 標籤

畫面顯示如下	HTML 需要這樣寫
以下是引述他人的說話	以下是 <CITE> 引述他人的說話</CITE>
`Represents computer code`	<CODE> Represents computer code </CODE> <!這標籤只適用於英文文本>
一串的 `literal` 文字	一串的 <SAMP> literal </SAMP>文字
這是一個BLOCKQUOTE例子此段文字已向內移入小許	這是一個BLOCKQUOTE例子 <BLOCKQUOTE>此段文字已向內移入小許 <BLOCKQUOTE>
這個文字使用了 definition 標籤	這個 <DFN> 文字 </DFN>使用了 definition 標籤
這個文字使用了 emphasized 標籤	這個<EM> 文字 </EM> 使用了 emphasized 標籤
這個 `文字`使用了keyboard標籤	這個 <KBD> 文字 </KBD>使用了keyboard標籤
這個文字使用了 strongly emphasized 標籤	這個<STRONG> 文字 </STRONG> 使用了 strongly emphasized 標籤
這個 `文字` 使用了 program variable 標籤	這個<VAR> 文字 </VAR> 使用了 program variable 標籤

分段及分行

開新段落用 <P> 這個標籤，關閉標籤</P> 一般是不需要的。
開新段除了是另起新行外，也會插入一空行。

另起新行是用 <BR> 這個標籤，它是沒有關閉標籤的。

畫面顯示如下 HTML 需要這樣寫
這是舊段落的一部份
這是新段落的開始
這是舊段落的一部份 <P>
這是新段落的開始
一行文字
另外一行文字一行文字 <BR>
另外一行文字

畫面顯示如下	HTML 需要這樣寫
這是舊段落的一部份這是新段落的開始	這是舊段落的一部份 <P> 這是新段落的開始
一行文字另外一行文字	一行文字 <BR> 另外一行文字

主題及橫線

主題文字的共有六種尺寸，用標籤<H1>及 </H1> .. <H6>及 </H6> 選用。
(H1 字型最大，H6 字型最小)

畫面顯示如下 HTML 需要這樣寫

這是最大的 H1 題目字型
<H1>這是最大的 H1 題目字型 </H1>

小題目用 H3 字型最適合
<H3>小題目用 H3 字型最適合</H3>

這是最小的 H6 題目字型
<H6>這是最小的 H6 題目字型</H6>

畫面顯示如下	HTML 需要這樣寫
這是最大的 H1 題目字型	<H1>這是最大的 H1 題目字型 </H1>
小題目用 H3 字型最適合	<H3>小題目用 H3 字型最適合</H3>
這是最小的 H6 題目字型	<H6>這是最小的 H6 題目字型</H6>

※轉行指令會自動插入於每次使用題目字型之前及之後，

請留意下例：

畫面顯示如下 HTML 需要這樣寫
使用題目字型前
這是 H4 題目字型
使用題目字型後使用題目字型前
<H4>這是 H4 題目字型</H4>
使用題目字型後

畫面顯示如下	HTML 需要這樣寫
使用題目字型前這是 H4 題目字型使用題目字型後	使用題目字型前 <H4>這是 H4 題目字型</H4> 使用題目字型後

水平橫線用 <HR> 標籤啟動，它是沒有關閉標籤的。請看下例：

畫面顯示如下 HTML 需要這樣寫
橫線前
橫線後橫線前<HR>橫線後
長度只有 40% 的橫線
橫線後長度只有 40% 的橫線<HR WIDTH=40%>橫線後
橫線的粗度也可調節
橫線後橫線的粗度也可調節<HR SIZE=10 color="red">橫線後

畫面顯示如下	HTML 需要這樣寫
橫線前橫線後	橫線前<HR>橫線後
長度只有 40% 的橫線橫線後	長度只有 40% 的橫線<HR WIDTH=40%>橫線後
橫線的粗度也可調節橫線後	橫線的粗度也可調節<HR SIZE=10 color="red">橫線後

※ 橫線的粗度是用 pixels 為量度單位。

內文中加插圖畫

除了文字外，圖畫也是傳遞資訊必要的媒體。
瀏覽器暫時可以接受二種圖像文件的。如 GIF、JPEG。

JPEG 檔其強大的壓縮及能處理全色(24 bit colour)的能力，當然是最佳的選擇。
當傳送的圖像檔是很小時候，這時選用 GIF 檔就比較適合。
雖然JPEG壓縮會使圖像質素下降，但這不被肉眼察覺。

Inserted image HTML 需要這樣寫
camp fire 這是一個 JPEG 檔
<IMG SRC="camp_fire_2.gif" ALT="camp fire" ALIGN=TOP>這是一個 JPEG 檔

GIF 檔是可以用透明作底色的
GIF 檔 <IMG SRC="camp_fire_2.gif" ALIGN=TOP> 是可以用透明作底色的

fire 想做到圖文並茂，
可把圖像放在文字
的右側。
<IMG SRC="camp_fire_2.gif" ALT="fire" ALIGN=RIGHT> 想做到圖文並茂，
可把圖像放在文字的右側。

Inserted image	HTML 需要這樣寫
這是一個 JPEG 檔	<IMG SRC="camp_fire_2.gif" ALT="camp fire" ALIGN=TOP>這是一個 JPEG 檔
GIF 檔是可以用透明作底色的	GIF 檔 <IMG SRC="camp_fire_2.gif" ALIGN=TOP> 是可以用透明作底色的
想做到圖文並茂，可把圖像放在文字的右側。	<IMG SRC="camp_fire_2.gif" ALT="fire" ALIGN=RIGHT> 想做到圖文並茂，可把圖像放在文字的右側。

※ 如想製作一些以透明為底色的圖像，可以使用 LView Pro 1.B2 或 Paint Shop Pro 3.11等圖像處理器，　圖像必需以 89a gif 檔儲存。

　你也可用圖像連繫到其他的 hypertext 檔，這時就要用 <A HREF="..."> <IMG SRC="..."> </A>標籤。

插入圖像時，使用 <IMG> 標籤要包括以下的選項：

ALT="沒法顯示": 當瀏覽器不設或不能顯示圖像時，以雙引號括著的訊息取代。例： "沒法顯示"
ALIGN=TOP: 把圖像放在與相關文字的頂端
ALIGN=BOTTOM.: 把圖像放在與相關文字的底端
ALIGN=MIDDLE.: 把圖像放在與相關文字的中線平排
ALIGN=LEFT: 把圖像放在與相關文字的左側，文字放在右側
ALIGN=RIGHT: 把圖像放在與相關文字的右側，文字放在左側

背景圖畫

有美麗圖像作背景的專頁當然比較吸引，但圖像應以簡單為主，以免增加下載(Download)所需時間，這樣令你的專頁將不受歡迎。

※把背景圖像這句標籤在內文範圍內。例：

內文(BODY)的選項

內文的選項可用來設定網頁的顏色，以下是選項的用法：

BGCOLOR="RED" 或 BGCOLOR="#FF0000"
設定文件的背景顏色。
TEXT="RED" 或 TEXT="#FF0000"
設定文件內的字體的顏色。
LINK"RED" 或 LINK="#FF0000"
設定文件內的 Hypertext links 顏色。
ALINK="RED" 或 VLINK="#FF0000"
設定當滑鼠按動時，字體的顏色。
VLINK="RED" 或 VLINK="#FF0000"
設定曾經瀏覽過的 Hypertext links 顏色。

下面是一個例子：

<BODY BGCOLOR="#00FF00" TEXT="RED" LINK="#0000FF">

列出項目

這裡有幾種列出項目的方式，

以下是一個不設數字編排的例子：

畫面顯示如下 HTML 需要這樣寫

項目一
項目二

<UL> <LI>項目一 <LI>項目二 </UL>

畫面顯示如下	HTML 需要這樣寫
項目一項目二	<UL> <LI>項目一 <LI>項目二 </UL>

以下是一個設數字編排的例子：

畫面顯示如下 HTML 需要這樣寫

項目一
項目二

<OL> <LI>項目一 <LI>項目二 </OL>

畫面顯示如下	HTML 需要這樣寫
項目一項目二	<OL> <LI>項目一 <LI>項目二 </OL>

採用定義式列出項目標籤時，註解項會移入小許。

畫面顯示如下 HTML 需要這樣寫

這是定義行
這是移入了的註解行
這是另一定義行
這是另一移入了的註解行

<DL> <DT> 這是定義行 <DD> 這是移入了的註解行 <DT> 這是另一定義行 <DD> 這是另一移入了的註解行 </DL>

畫面顯示如下	HTML 需要這樣寫
這是定義行這是移入了的註解行這是另一定義行這是另一移入了的註解行	<DL> <DT> 這是定義行 <DD> 這是移入了的註解行 <DT> 這是另一定義行 <DD> 這是另一移入了的註解行 </DL>

※ 這個定義式列出項目標籤常用於圖片的解釋

連繫其他 Hyper 文件

瀏覽器可從連繫標籤找到其他用 hyper text 寫的文件的連繫路徑，這跟電腦語言中的呼叫 (call) 及跳 (jump) 相似。

在例子中放置了一個連繫記號，以 NAME 代表

畫面顯示如下 HTML 需要這樣寫
記號在此 <A NAME="marker"> 記號在此 </A>

畫面顯示如下	HTML 需要這樣寫
記號在此	<A NAME="marker"> 記號在此 </A>

※ 這不一定須要用文字去顯示記號的住置。例如： <A NAME="marker"></A>

在下例中可以連繫到剛才以 "記號在此" 為標記的地方，例子：

畫面顯示如下 HTML 需要這樣寫
跳到記號處 <A HREF="#marker"> 跳到記號處 </A>

畫面顯示如下	HTML 需要這樣寫
跳到記號處	<A HREF="#marker"> 跳到記號處 </A>

以 # 開始的記號是通知瀏覽器在現時的專頁文件中尋找

使用連繫標籤也可連繫到位於其他遠端服務器 URL (Uniform Resource Locator) 中的 Hypertext 文件。例子：

連繫到另一 Hyper text 文件
file.html 連繫到另一 Hyper text 文件
file.html
它是放在其他的遠端服務器 (URL) 內
<A HREF="file.html"> Name </A> <A HREF="http://host/file.html"> Name </A>

或：

連繫到另一 Hyper text 文件
file.html 中 "記號" 的地方連繫到另一 Hyper text 文件
file.html 中 "記號" 的地方，
它是放在其他的遠端服務器 (URL) 內
<A HREF="file.html#mark"> Name </A> <A HREF="http://host/file.html#mark"> Name </A>

遠端服務器 URL (Uniform Resource Locator)

遠端服務器是指在網絡中為你提供服務的機器，呼叫它時需要有一定的格式。
如這個例子： http://host/file.html 是以下的組件構成。

http: 這是最常用的協定，要求傳送用 HyperText 的文件。
host: 遠端服務器的名稱，以我們這個網絡協會為例，名稱是 www.enmpc.org.hk 或直接使用我們的 IP 網址 (Internet Protocol) address 137.189.97.47.
file.html: 想下載的 HyperText 文件的名稱。
如果文件存放於現正使用的目錄中，只需給予文件的名稱。
如文件存於其他的目錄內，就需給予文件的全路徑位置。

Unix 系統的網頁伺服器是容許自動讀取專頁文件檔的，只要把專頁文件檔放在用戶名為 docs 或 public_html 的子目錄下。
以本專頁為例：文件檔 tutorial.html 放在 docs 中的 tutorial 的網頁伺服器的目錄內 www.enmpc.org.hk ，
可以用以下的 URL 指令讀取
http://www.enmpc.org.hk/tutorial/tutorial.html

在一般情形下，URL 指令中以下的字符是不能使用 ( 空格、 =、 +、 <、 >、%、 "、 /、及 ? )

URL 還有其他的協定，如傳送檔案時用 FTP 協定 (File Transfer Protocol)

以下是一個例子：

ftp://ftp.enmpc.org.hk/pub/htmleditor/webedit.zip

它是要求讀取於在遠端檔案服務器 ftp.enmpc.org.hk 中的 pub/htmleditor/ 子目錄內的檔案webedit.zip。

對不同的 URL 作出要求，有以下的寫法：

協定型式注意事項
HTTP http://host[:port]/path -
FTP ftp://[用戶名稱[:密碼]@host/path 如不知登入名字時，可以不輸入用戶名稱和密碼登入。
Gopher gopher://host[:port]/[type[item]] -

協定	型式	注意事項
HTTP	http://host[:port]/path	-
FTP	ftp://[用戶名稱[:密碼]@host/path	如不知登入名字時，可以不輸入用戶名稱和密碼登入。
Gopher	gopher://host[:port]/[type[item]]	-

※ 這個符號 [ ] 中的項目任選項。

表格製作

單一格

製作表格是用 <TABLE> 這個標籤。
最簡單的表格就是只有一格的表格。
開始表格中的一格用 <TD> 這個標籤，關閉時用 </TD> 這個標籤。

畫面顯示如下 HTML 需要這樣寫

一句文字

<TABLE BORDER CELLPADDING=2> <TD> 一句文字 </TD> </TABLE>

以下這些選項是可以加進標籤中：

UNITS=: 單位的內定值是 pixels.
你可以用此選項改變它的單位。
BORDER: 這是指定每一儲存格外框的寬度，選項是這樣寫的 BORDER=n。
CELLPADDING: 這是改變圍繞表格外圍的空間。

若要將文字在儲存格中靠左、右及分中，可用 ALIGN 選項：
<ALIGN=LEFT>,<ALIGN=RIGHT>,<ALIGN=CENTER>.

數列及數欄的表

在一列中有多個儲存格時只要重複使用 <TD> 及 </TD>這對標籤製造儲存格。

畫面顯示如下 HTML 需要這樣寫

第一格第二格

<TABLE BORDER CELLPADDING=2> <TR> <TD> 第一格 </TD> <TD> 第二格 </TD> </TR> </TABLE>

在同一表中要有多列，用 <TR> 標籤另起新行。

畫面顯示如下 HTML 需要這樣寫

第一格第二格
第三格第四格

<TABLE BORDER CELLPADDING=2> <TR> <TD> 第一格 </TD> <TD> 第二格 </TD> </TR> <TR> <TD> 第三格 </TD> <TD> 第四格 </TD> </TR> </TABLE>

欄的題目

如果在儲存格中想用大一點的字體, 用<TH> 這個標籤來取替 <TD> ，一般用在表示欄的題目。

畫面顯示如下 HTML 需要這樣寫

欄的題目用較明顯的字體

第一欄第二欄

<TABLE BORDER CELLPADDING=2> <TR> <TH ALIGN=LEFT> 欄的題目 </TH> <TH ALIGN=LEFT> 用較明顯的字體 </TH> </TR> <TR> <TD> 第一欄 </TD> <TD> 第二欄 </TD> </TR> </TABLE>

擴展儲存格的大小

儲存格是可以橫向或直向擴張的，橫向時用 ROWSPAN = n 選項，直向用 COLSPAN = n 選項，這兩選項須加在 <TD> 或 <TH> 內。
選項中 n 是可以是任何數字,只要符合這個表的大小。

畫面顯示如下 HTML 需要這樣寫

普通橫向擴張

第一格直向
擴張第三格
第二格第四格

<TABLE BORDER CELLPADDING=2> <TR> <TH ALIGN=LEFT> 普通 </TH> <TH ALIGN=LEFT COLSPAN=2> 橫向擴張 </TH> </TR> <TR> <TD> 第一格 </TD> <TD ROWSPAN=2> 直向 <br> 擴張 </TD> <TD> 第三格 </TD> </TR> <TR> <TD> 第二格 </TD> <TD> 第四格 </TD> </TR> </TABLE>

使用 HTML 特殊字符

由於所有的 HTML 標籤都用 < 字符開始，但這個字符與其他特殊字符一起是不能直接於內文中使用，
所以需要用一個以 & 開始及分號結束的代符替代。

以下是一些常用的 HTML 代符：

顯示字符相對的代符顯示字符相對的代符
< < > >
& & " "

顯示字符	相對的代符	顯示字符	相對的代符
<	<	>	>
&	&	"	"

想印 <BODY> 這句子，在 HTML 中要這樣寫 <BODY> 。

當這些用 & 開始的字串不能在 ASCII 字表中轉換時，瀏覽器將以？或空白取代。
例如：

顯示字符相對的代符顯示字符相對的代符
à &;amp;agrave; ç &;amp;ccedil;

顯示字符	相對的代符	顯示字符	相對的代符
à	&;amp;agrave;	ç	&;amp;ccedil;

預定顯示模式

瀏覽器顯示 HTML 文件時會自動調節換行及空白等。如希望顯示時排出預設的效果，可以用預設標籤 <PRE>，預設標籤使用時需要同時有關閉標籤 </PRE>。

※　顯示大段文字時最好不要使用 <PRE> 標籤, 這會令一些瀏覽器在視窗細小的時候失去自動換行及調節空白的功能。

畫面顯示如下 HTML 需要這樣寫

* *** *****

<PRE> * *<B>*</B>* ***** </PRE>

畫面顯示如下	HTML 需要這樣寫
* * ***	<PRE> * <B></B>* ***** </PRE>

插入一個電郵地址 email-address

在文本中插入自己的電郵地址 e-mail address 方便讀者回郵。須用連繫標籤中 mailto 來設定連繫路徑。瀏覽器會以特別字體顯示，一般為斜體字。

如下例：

請回郵給我們，我們的地址是

enews@enmpc.org.hk

也可用你喜歡的字句代表回郵地址。

畫面顯示如下 HTML 需要這樣寫
我的信箱 <A HREF="mailto:enews@enmpc.org.hk"> 我的信箱 </A>

畫面顯示如下	HTML 需要這樣寫
我的信箱	<A HREF="mailto:enews@enmpc.org.hk"> 我的信箱 </A>

當然你須要使用一個能支援回郵功能的瀏覽器

填入式表格

想一個 HTML 專頁能接受讀者的回應，作互動式反應時，須要用填入式表格去收集資料，再用 CGI (Common Gateway Interface) 介面寫的步驟檔處理。
處理後的資料也可經 CGI 傳回主頁的特定位置顯示。

填入式表格需使用開啟標籤 <FORM> 及關閉標籤 </FORM> 。
使用填入式表格 </FORM> 標籤時需留意的事項有：

ACTION="http://host/cgi-bin/script_name": 當表格填好及經選取動作後，資料將送到 CGI 步驟檔處理。例子中此步驟檔是放在 cgi_enmpc 的子目錄內。

簡單的填入式表格

此種表格是需要讀者輸入一些文字並傳到例子中名為 form 的 CGI 步驟檔去。表格的標籤是 <INPUT>

螢光幕上顯示 HTML 需要這樣寫

<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/form"> <INPUT TYPE="text" NAME="名稱" SIZE=20 VALUE="你的名字"> </FORM>

螢光幕上顯示	HTML 需要這樣寫
	<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/form"> <INPUT TYPE="text" NAME="名稱" SIZE=20 VALUE="你的名字"> </FORM>

<INPUT>標籤的選項如下:

NAME="名稱": 傳至 CGI 步驟項目的名字。
VALUE="你的名字": 這個項目的值。
SIZE=20: 這個項目可填入的空間。

有些字符傳送往 CGI 步驟檔時需要用其他字符替代。

例如：

輸入的字符送往 CGI 步驟檔的字符輸入的字符送往 CGI 步驟檔的字符
space + % %25
= %3D & %38
Line Feed %0A Carriage Return %0D

輸入的字符	送往 CGI 步驟檔的字符	輸入的字符	送往 CGI 步驟檔的字符
space	+	%	%25
=	%3D	&	%38
Line Feed	%0A	Carriage Return	%0D

※　傳送字符會用一個跟著 % 符的十六進碼替代 (%HH)。

密碼的輸入

這種填入式表格是不會把輸入的字串顯示在螢幕上，最適合作輸入密碼時使用。

螢光幕上顯示 HTML 需要這樣寫

請輸入密碼

<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/password"> 請輸入密碼r<BR> <INPUT TYPE="password" NAME="Password" SIZE=20 VALUE=""> </FORM>

螢光幕上顯示	HTML 需要這樣寫
請輸入密碼	<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/password"> 請輸入密碼r<BR> <INPUT TYPE="password" NAME="Password" SIZE=20 VALUE=""> </FORM>

注意： 在國際網上傳送密碼是絕對不安全的，任何加密的程式都有其破解的方法。

多項選取

很多時表格都是作多項選取的。
這時輸入類為 <INPUT TYPE="submit"> ，當觸動選取項目後 CGI 步驟檔就收到你所選的選擇。
這個 <INPUT> 標籤是需要包括在 <FORM> 的標籤內，是填入式表格的一部份。

當觸動這個選取項目時，button 的值就等於 Send 並送至 CGI 步驟檔去。

以下例子中可觸動的選項有兩個：

螢光幕上顯示 HTML 需要這樣寫

<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/submit"> <INPUT TYPE="submit" NAME="button" VALUE=" 是 "> <INPUT TYPE="submit" NAME="button" VALUE=" 否 "> </FORM>

螢光幕上顯示	HTML 需要這樣寫
	<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/submit"> <INPUT TYPE="submit" NAME="button" VALUE=" 是 "> <INPUT TYPE="submit" NAME="button" VALUE=" 否 "> </FORM>

輸入多行的文字

有時填入式的表格需求輸入多於一行的文字，這時需用 <TEXTAREA> 標籤。
當觸動 <INPUT TYPE="submit"> 的標籤時，便把已完成的表格送至 CGI 檔去。

螢光幕上顯示 HTML 需要這樣寫

這是我的意見

<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/textarea"> <TEXTAREA NAME="feedback" ROWS=5 COLS=20> 這是我的意見 </TEXTAREA> <BR> <INPUT TYPE="submit" NAME="button" VALUE="Send"> </FORM>

螢光幕上顯示	HTML 需要這樣寫
這是我的意見	<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/textarea"> <TEXTAREA NAME="feedback" ROWS=5 COLS=20> 這是我的意見 </TEXTAREA> <BR> <INPUT TYPE="submit" NAME="button" VALUE="Send"> </FORM>

※　在 <TEXTAREA> 標籤中的內設值需用 </TEXTAREA> 標籤關閉。

<TEXTAREA> 可以有以下的選項：

ROWS=n: 設定文字區中有多少列。
COLS=n: 設定一列中可以有多少的字元。

當輸入完成並觸動送出鍵後 CGI 步驟檔將收到一連串以空白字符相間的文字串。 ﹝空白字符以代符 + 字型式出現﹞ 如例子中送往 CGI 步驟檔的字串是：

feedback=這是+我的意見&button=Send

鈕鍵式選項

當從眾多選項中只能選取一項時，用 <INPUT> 標籤中 TYPE="radio" 選項。以下是一個選取姓別的例子：

螢光幕上顯示 HTML 需要這樣寫

男
女

<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/checked"> <INPUT TYPE="radio" NAME="sex" VALUE="M"> 男 <BR> <INPUT TYPE="radio" NAME="sex" VALUE="W"> 女 <BR> <INPUT TYPE="submit" NAME="button" VALUE="Send"> </FORM>

螢光幕上顯示	HTML 需要這樣寫
男女	<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/checked"> <INPUT TYPE="radio" NAME="sex" VALUE="M"> 男 <BR> <INPUT TYPE="radio" NAME="sex" VALUE="W"> 女 <BR> <INPUT TYPE="submit" NAME="button" VALUE="Send"> </FORM>

如選項中有預設值時可把 CHECKED 放在預設值的行中。如下例：

螢光幕上顯示 HTML 需要這樣寫

年齡
<18
18-65
65+

<FORM ACTION="http://host/cgi-bin/mas_form"> 年齡<BR> <INPUT TYPE="radio" NAME="age" VALUE="a"><18<BR> <INPUT TYPE="radio" NAME="age" VALUE="b" CHECKED>18-65<BR> <INPUT TYPE="radio" NAME="age" VALUE="c">65+<BR> <INPUT TYPE="submit" NAME="button" VALUE="Send"> </FORM>

螢光幕上顯示	HTML 需要這樣寫
年齡 <18 18-65 65+	<FORM ACTION="http://host/cgi-bin/mas_form"> 年齡<BR> <INPUT TYPE="radio" NAME="age" VALUE="a"><18<BR> <INPUT TYPE="radio" NAME="age" VALUE="b" CHECKED>18-65<BR> <INPUT TYPE="radio" NAME="age" VALUE="c">65+<BR> <INPUT TYPE="submit" NAME="button" VALUE="Send"> </FORM>

方框式選項

從眾多選項中選取多於一項時用 TYPE="checkbox" 於 <INPUT> 標籤中。例：

螢光幕上顯示 HTML 需要這樣寫

Use
Win 95
Windows NT
Windows 3.X

<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/checkbox"> Use<BR> <INPUT TYPE="checkbox" NAME="use" VALUE="95" CHECKED>Win 95<BR> <INPUT TYPE="checkbox" NAME="use" VALUE="NT" CHECKED>Windows NT<BR> <INPUT TYPE="checkbox" NAME="use" VALUE="3.X">Window 3.X<BR> <INPUT TYPE="submit" NAME="button" VALUE="Send"> </FORM>

螢光幕上顯示	HTML 需要這樣寫
Use Win 95 Windows NT Windows 3.X	<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/checkbox"> Use<BR> <INPUT TYPE="checkbox" NAME="use" VALUE="95" CHECKED>Win 95<BR> <INPUT TYPE="checkbox" NAME="use" VALUE="NT" CHECKED>Windows NT<BR> <INPUT TYPE="checkbox" NAME="use" VALUE="3.X">Window 3.X<BR> <INPUT TYPE="submit" NAME="button" VALUE="Send"> </FORM>

如某選項已預設為己選取，加 CHECKED 選項於其 <INPUT> 標籤中。

下拉式選項

從眾多的選項中選取其中一項，除鈕鍵式外還有下拉式 <SELECT> 。
下拉式比較適合於選取文字時使用。

螢光幕上顯示 HTML 需要這樣寫

把資料放在

<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/popup"> 把資料放在<BR> <SELECT NAME="Media"> <OPTION SELECTED> 磁碟 <OPTION> 光碟 <OPTION> 磁帶 </SELECT> <BR> <INPUT TYPE="submit" NAME="button" VALUE="Send"> </FORM>

螢光幕上顯示	HTML 需要這樣寫
把資料放在	<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/popup"> 把資料放在<BR> <SELECT NAME="Media"> <OPTION SELECTED> 磁碟 <OPTION> 光碟 <OPTION> 磁帶 </SELECT> <BR> <INPUT TYPE="submit" NAME="button" VALUE="Send"> </FORM>

值定預設值在下拉式 <OPTION> 項中加入 SELECTED 選項

重置 / 清洗已輸入的值

當輸入標籤的選項是 TYPE="reset" 時，按動此選擇會使整個表格重置致預設值。

螢光幕上顯示 HTML 需要這樣寫

我喜歡：
咖啡
茶

<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/form"> 我喜歡：<BR> <INPUT TYPE="checkbox" NAME="Like" VALUE="Coffee" >咖啡<BR> <INPUT TYPE="checkbox" NAME="Like" VALUE="Tea">茶<BR> <INPUT TYPE="reset" VALUE="Reset"><BR> <INPUT TYPE="submit" NAME="button" VALUE="Send"> </FORM>

螢光幕上顯示	HTML 需要這樣寫
我喜歡：咖啡茶	<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/form"> 我喜歡：<BR> <INPUT TYPE="checkbox" NAME="Like" VALUE="Coffee" >咖啡<BR> <INPUT TYPE="checkbox" NAME="Like" VALUE="Tea">茶<BR> <INPUT TYPE="reset" VALUE="Reset"><BR> <INPUT TYPE="submit" NAME="button" VALUE="Send"> </FORM>

影像中選擇

當圖像中的任何一點被觸取後，它的 X,Y 座標將會被送至 CGI 步驟檔去。

螢光幕上顯示 HTML 需要這樣寫

<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/image">
<INPUT NAME="image" TYPE="IMAGE" SRC="images/cdrom.gif">
</FORM>

螢光幕上顯示	HTML 需要這樣寫
	<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/image"> <INPUT NAME="image" TYPE="IMAGE" SRC="images/cdrom.gif"> </FORM>

隱藏的項目

在送往 CGI 步驟檔的資料中，有些部份是不希望讀者更改的可用隱藏的項目。
如在遊戲過程中，CGI 步驟檔是需要知道上次後的位置。這個資料可從上次 CGI 步驟檔傳回時存放在一個隱藏項目中。

螢光幕上顯示 HTML 需要這樣寫

移動

<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/hidden"> 移動<BR> <INPUT TYPE="hidden" NAME="game" VALUE="P123456"> <INPUT TYPE="text" NAME="move" SIZE=5 value="999"> </FORM>

連繫到另一 Hyper text 文件 `file.html`	連繫到另一 Hyper text 文件 `file.html` 它是放在其他的遠端服務器 (URL) 內
<A HREF="file.html"> Name </A>	<A HREF="http://host/file.html"> Name </A>

連繫到另一 Hyper text 文件 `file.html` 中 `"記號"` 的地方	連繫到另一 Hyper text 文件 `file.html` 中 `"記號"` 的地方，它是放在其他的遠端服務器 (URL) 內
<A HREF="file.html#mark"> Name </A>	<A HREF="http://host/file.html#mark"> Name </A>