1-2

一份最簡單的 HTML 網頁,可以顯示如下:

Example(basic01.htm):

上述範例的原始檔如下:

原始檔(basic01.htm):(灰色區域按兩下即可拷貝)
<HTML>
<HEAD>
	<TITLE>網頁的標題</TITLE>
</HEAD>
<BODY>
	網頁的內容
</BODY>
</HTML>

我們將以上述原始碼,來介紹基本的 HTML 網頁。首先我們來看看這個網頁的標籤(Tags),每一個標籤都是由「<」及「>」所包圍,例如上述原始碼中的 <HTML>,代表 HTML 網頁的開始,而 </HTML> 則代表 HTML 網頁的結束。在 HTML 網頁中,可大略分為「頭」和「身體」兩部分,茲說明如下:

事實上,每一個標籤都可以加上不同的屬性( Attributes),來改變瀏覽器對標籤的呈現方式。以 <body> 這個標籤為例,我們可以使用 background 來加入背景圖片,例如:

Example(basicBgImage01.htm):

上述範例的原始檔如下:

原始檔(basicBgImage01.htm):(灰色區域按兩下即可拷貝)
<HTML>
<HEAD>
	<TITLE>有背景圖的網頁</TITLE>
</HEAD>
<BODY background="multimedia/CAT-WALKING-KITY.gif">
	加入了背景圖!
</BODY>
</HTML>

若要使背景影像只重複一個橫列,可以改用 CSS (Cascading Style Sheet),如下:

Example(basicBgImage02.htm):

上述範例的原始檔如下:

原始檔(basicBgImage02.htm):(灰色區域按兩下即可拷貝)
<HTML>
<HEAD>
<TITLE>有背景圖的網頁</TITLE>
</HEAD>
<BODY background="multimedia/CAT-WALKING-KITY.gif" style="BACKGROUND-REPEAT: repeat-x">
	加入了一列背景圖!
</BODY>
</HTML>

當然,也可以讓背景重複一個直行,讀者可以自行改寫上述範例來達到此功能。

Hint
CSS 是另一個網頁美工設計的重要主題,但我們在此先不深入探討。

請注意,標籤及屬性都沒有大小寫的區分,瀏覽器會用同樣的方式來呈現。因此,要用大寫或小寫,完全看個人的習慣和喜好。

學習 HTML,最主要就是在學習 HTML 的各種標籤和屬性,及其在瀏覽器內呈現的效果。還好,基本的標籤並不是太多,所以並不難學。很多人認為不需要學習 HTML 的標籤,因為只要用 WYSIWYG (What You See Is What You Get,所見即所得) 的 HTML 的編輯器(例如 FrontPage、Dreamweaver、Word),就可以寫出一個漂漂亮亮的網頁了!這個觀念對非專業人士來說,完全沒有錯,但是對於要靠網頁來討生活的資訊系同學(或有志於此的其他同學)來說,就大錯特錯了,舉個例子來說,沒有一個商業網站,是用 WYSIWYG 的 HTML 編輯器製作出來的,因為若用此種編輯器,可能有下列問題存在:

當然啦,使用這些 WYSIWYG 的編輯器也有優點,就是能夠快速製作,效果大致上也還好(如果你不是太挑剔),因而不必去瞭解 HTML 的各式各樣標籤。但對本課程來說,因為最後網頁要內嵌 JavaScript 或 VBScript 的程式碼,光靠 WYSIWYG 編輯器不足以完成,因此各位同學一定要瞭解 HTML 的一些基本標籤和功能。

以下是試驗區,你可以直接填入 HTML 的內容,按「送出測試」後,即可在新網頁看到呈現的結果。

Example(htmlTest.htm):


HTML 簡介與應用