1-2

一份最簡單的 HTML 網頁，可以顯示如下：
Example（basic01.htm）：
上述範例的原始檔如下：
原始檔（basic01.htm）：（灰色區域按兩下即可拷貝）
<HTML>
<HEAD>
	<TITLE>網頁的標題</TITLE>
</HEAD>
<BODY>
	網頁的內容
</BODY>
</HTML>
我們將以上述原始碼，來介紹基本的 HTML 網頁。首先我們來看看這個網頁的標籤（Tags），每一個標籤都是由「<」及「>」所包圍，例如上述原始碼中的 <HTML>，代表 HTML 網頁的開始，而 </HTML> 則代表 HTML 網頁的結束。在 HTML 網頁中，可大略分為「頭」和「身體」兩部分，茲說明如下：

「頭」的部分是由 <head> 和 </head> 兩個標籤所界定，大部分用於規範和整體網頁相關的資訊，這些資訊通常不會直接呈現於網頁內。以上例來說，「頭」的部分還包含了 <title>，用來說明此網頁的標題，此標題最後會呈現在瀏覽器視窗最上方的文字部分（也會呈現在當別人將此頁加入「我的最愛」時所見到的字串）。
「身體」部分是由 <body> 和 </body> 兩個標籤所界定，大部分用於擺置網頁的內容，這些內容將直接呈現在瀏覽器視窗內。
事實上，每一個標籤都可以加上不同的屬性（ 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 編輯器製作出來的，因為若用此種編輯器，可能有下列問題存在：

在幾種主要的網頁瀏覽器（IE、Firefox、Netscape等）呈現的效果可能截然不同。
不方便插入 JavaScript 或 VBScript 的程式碼。
不方便插入 ASP 的程式碼。
HTML 的原始碼不夠精簡，導致頻寬的浪費。
編輯器可能不完全是 WYSIWYG，導致時間的浪費。
當然啦，使用這些 WYSIWYG 的編輯器也有優點，就是能夠快速製作，效果大致上也還好（如果你不是太挑剔），因而不必去瞭解 HTML 的各式各樣標籤。但對本課程來說，因為最後網頁要內嵌 JavaScript 或 VBScript 的程式碼，光靠 WYSIWYG 編輯器不足以完成，因此各位同學一定要瞭解 HTML 的一些基本標籤和功能。
以下是試驗區，你可以直接填入 HTML 的內容，按「送出測試」後，即可在新網頁看到呈現的結果。
Example（htmlTest.htm）：

HTML 簡介與應用