瀏覽器在字與字及行與行中反會接受 任何空行或空字元。
所以以下的情況將得到相同的結果.
輸入示範 一 | 輸入示範 二 | 輸入示範 三 |
---|---|---|
瀏覽器將不會理會 新行及多出的空字元。 |
瀏覽器將
不會理會新行及 多出的空字元。 |
瀏覽器將
不會理會新行 及 多出的空字元。 |
結果是這樣:
瀏覽器將不會理會新行及多出的空字元。 |
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 需要這樣寫 |
---|---|
這 文字 是粗體 | 這 <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 標籤 |
開新段落用 <P> 這個標籤,關閉標籤</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 需要這樣寫 |
---|---|
使用題目字型前
這是 H4 題目字型使用題目字型後 |
使用題目字型前 <H4>這是 H4 題目字型</H4> 使用題目字型後 |
畫面顯示如下 | HTML 需要這樣寫 |
---|---|
橫線前 橫線後 |
橫線前<HR>橫線後 |
長度只有 40% 的橫線 橫線後 |
長度只有 40% 的橫線<HR WIDTH=40%>橫線後 |
橫線的粗度也可調節 橫線後 |
橫線的粗度也可調節<HR SIZE=10 color="red">橫線後 |
※ 橫線的粗度是用 pixels 為量度單位。
除了文字外,圖畫也是傳遞資訊必要的媒體。
瀏覽器暫時可以接受二種圖像文件的。如 GIF、JPEG。
JPEG 檔其強大的壓縮及能處理全色(24 bit colour)的能力,當然是最佳的選擇。
當傳送的圖像檔是很小時候,這時選用 GIF 檔就比較適合。
雖然JPEG壓縮會使圖像質素下降,但這不被肉眼察覺。
Inserted image | HTML 需要這樣寫 |
---|---|
![]() |
<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> 想做到圖文並茂, |
你也可用圖像連繫到其他的 hypertext 檔, 這時就要用 <A HREF="..."> <IMG SRC="..."> </A>標籤。
插入圖像時,使用 <IMG> 標籤要包括以下的選項:
有美麗圖像作背景的專頁當然比較吸引,但圖像應以簡單為主, 以免增加下載(Download)所需時間,這樣令你的專頁將不受歡迎。
※把背景圖像這句標籤在內文範圍內。例:
<BODY BACKGROUND="backgrd.jpg"> |
內文的選項可用來設定網頁的顏色,以下是選項的用法:
下面是一個例子:
<BODY BGCOLOR="#00FF00" TEXT="RED" LINK="#0000FF"> |
這裡有幾種列出項目的方式,
以下是一個不設數字編排的例子:
畫面顯示如下 | HTML 需要這樣寫 |
---|---|
|
<UL> <LI>項目一 <LI>項目二 </UL> |
以下是一個 設數字 編排的例子:
畫面顯示如下 | HTML 需要這樣寫 |
---|---|
|
<OL> <LI>項目一 <LI>項目二 </OL> |
採用定義式列出項目標籤時,註解項會移入小許。
畫面顯示如下 | HTML 需要這樣寫 |
---|---|
|
<DL> <DT> 這是定義行 <DD> 這是移入了的註解行 <DT> 這是另一定義行 <DD> 這是另一移入了的註解行 </DL> |
※ 這個定義式列出項目標籤常用於圖片的解釋
瀏覽器可從連繫標籤找到其他用 hyper text 寫的文件的連繫路徑,這跟電腦語言中的呼叫 (call) 及跳 (jump) 相似。
在例子中放置了一個連繫記號,以 NAME 代表
畫面顯示如下 | HTML 需要這樣寫 |
---|---|
記號在此 | <A NAME="marker"> 記號在此 </A> |
※ 這不一定須要用文字去顯示記號的住置。例如: <A NAME="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> |
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]] | - |
製作表格是用 <TABLE> 這個標籤。
最簡單的表格就是只有一格的表格。
開始表格中的一格用 <TD> 這個標籤,關閉時用 </TD> 這個標籤。
畫面顯示如下 | HTML 需要這樣寫 | |
---|---|---|
|
<TABLE BORDER CELLPADDING=2> <TD> 一句文字 </TD> </TABLE> |
以下這些選項是可以加進標籤中:
若要將文字在儲存格中靠左、右及分中,可用 ALIGN 選項:
<ALIGN=LEFT>,<ALIGN=RIGHT>,<ALIGN=CENTER>.
畫面顯示如下 | HTML 需要這樣寫 | ||
---|---|---|---|
|
<TABLE BORDER CELLPADDING=2> <TR> <TD> 第一格 </TD> <TD> 第二格 </TD> </TR> </TABLE> |
畫面顯示如下 | 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 代符:
顯示字符 | 相對的代符 | 顯示字符 | 相對的代符 |
---|---|---|---|
< | < | > | > |
& | & | " | " |
想印 <BODY> 這句子,在 HTML 中要這樣寫 <BODY> 。
當這些用 & 開始的字串不能在 ASCII 字表中轉換時,瀏覽器將以 ?
或空白取代。
例如:
顯示字符 | 相對的代符 | 顯示字符 | 相對的代符 |
---|---|---|---|
à | &;amp;agrave; | ç | &;amp;ccedil; |
瀏覽器顯示 HTML 文件時會自動調節換行及空白等。 如希望顯示時排出預設的效果,可以用預設標籤 <PRE>, 預設標籤使用時需要同時有關閉標籤 </PRE>。
※ 顯示大段文字時最好不要使用 <PRE> 標籤, 這會令一些瀏覽器在視窗細小的時候失去自動換行及調節空白的功能。
畫面顯示如下 | HTML 需要這樣寫 |
---|---|
* *** ***** |
<PRE> * *<B>*</B>* ***** </PRE> |
在文本中插入自己的電郵地址 e-mail address 方便讀者回郵。 須用連繫標籤中 mailto 來設定連繫路徑。瀏覽器會以特別字體顯示, 一般為斜體字。
如下例:
請回郵給我們,我們的地址是
enews@enmpc.org.hk也可用你喜歡的字句代表回郵地址。
畫面顯示如下 | HTML 需要這樣寫 |
---|---|
我的信箱 | <A HREF="mailto:enews@enmpc.org.hk"> 我的信箱 </A> |
當然你須要使用一個能支援回郵功能的瀏覽器
填入式表格需使用開啟標籤 <FORM>
及關閉標籤 </FORM> 。
使用填入式表格 </FORM> 標籤時需留意的事項有:
此種表格是需要讀者輸入一些文字並傳到例子中名為 form 的 CGI 步驟檔去。 表格的標籤是 <INPUT>
螢光幕上顯示 | HTML 需要這樣寫 |
---|---|
<FORM ACTION="http://www.enmpc.org.hk/cgi_enmpc/form"> <INPUT TYPE="text" NAME="名稱" SIZE=20 VALUE="你的名字"> </FORM> |
<INPUT>標籤的選項如下:
有些字符傳送往 CGI 步驟檔時需要用其他字符替代。
例如:
輸入的字符 | 送往 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> |
注意: 在國際網上傳送密碼是絕對不安全的,任何加密的程式都有其破解的方法。
<INPUT TYPE="submit" NAME="button" VALUE="Send"> |
當觸動這個選取項目時,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/textarea"> <TEXTAREA NAME="feedback" ROWS=5 COLS=20> 這是 我的意見 </TEXTAREA> <BR> <INPUT TYPE="submit" NAME="button" VALUE="Send"> </FORM> |
※ 在 <TEXTAREA> 標籤中的內設值需用 </TEXTAREA> 標籤關閉。
<TEXTAREA> 可以有以下的選項:
當輸入完成並觸動送出鍵後 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> |
如選項中有預設值時可把 CHECKED 放在預設值的行中。 如下例:
螢光幕上顯示 | HTML 需要這樣寫 |
---|---|
<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 需要這樣寫 |
---|---|
<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> |
值定預設值在下拉式 <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/image"> <INPUT NAME="image" TYPE="IMAGE" SRC="images/cdrom.gif"> </FORM> |
螢光幕上顯示 | 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> |