1-2 HTML 的基本架構

上述範例的原始檔如下：. 原始檔（basic01.htm）：. （灰色區域按兩下即可拷貝）

網頁的內容 . 1-2HTML的基本架構 一份最簡單的HTML網頁，可以顯示如下： Example（basic01.htm）： 上述範例的原始檔如下： 原始檔（basic01.htm）：（灰色區域按兩下即可拷貝） 網頁的內容 我們將以上述原始碼，來介紹基本的HTML網頁。

首先我們來看看這個網頁的標籤（Tags），每一個標籤都是由「」所包圍，例如上述原始碼中的，代表HTML網頁的開始，而則代表HTML網頁的結束。

在HTML網頁中，可大略分為「頭」和「身體」兩部分，茲說明如下： 「頭」的部分是由和兩個標籤所界定，大部分用於規範和整體網頁相關的資訊，這些資訊通常不會直接呈現於網頁內。

以上例來說，「頭」的部分還包含了和兩個標籤所界定，大部分用於擺置網頁的內容，這些內容將直接呈現在瀏覽器視窗內。

事實上，每一個標籤都可以加上不同的屬性（Attributes），來改變瀏覽器對標籤的呈現方式。

以這個標籤為例，我們可以使用background來加入背景圖片，例如： Example（basicBgImage01.htm）： 上述範例的原始檔如下： 原始檔（basicBgImage01.htm）：（灰色區域按兩下即可拷貝） 加入了背景圖！ 若要使背景影像只重複一個橫列，可以改用CSS(CascadingStyleSheet)，如下： Example（basicBgImage02.htm）： 上述範例的原始檔如下： 原始檔（basicBgImage02.htm）：（灰色區域按兩下即可拷貝） 加入了一列背景圖！

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

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

請注意，標籤及屬性都沒有大小寫的區分，瀏覽器會用同樣的方式來呈現。

因此，要用大寫或小寫，完全看個人的習慣和喜好。

學習HTML，最主要就是在學習HTML的各種標籤和屬性，及其在瀏覽器內呈現的效果。

還好，基本的標籤並不是太多，所以並不難學。

很多人認為不需要學習HTML的標籤，因為只要用WYSIWYG(WhatYouSeeIsWhatYouGet，所見即所得)的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簡介與應用