第三篇
HTML教學
網頁研習室 第一節
基本架構
 
詳細介紹 HTML 基本架構
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<Meta Http-Equiv="Content-Type" Content="text/html; Charset=big5">
Meta 詳細解說...
請參閱電子報一之貳、網頁運用技巧內第二篇 Meta 十大功用
<TITLE>HTML語法介紹</TITLE>
</HEAD>
<BODY>
<CENTER>

詳細介紹 HTML 基本架構

</CENTER>
</BODY>
</HTML>

這是使用由
HyperText Markup Language
三個開頭英文字組合成的標籤。
這是使用完整且正確的英文字
Body 來做為標籤
中譯為頭、頭腦、前端、部分。
文檔類型定義或聲明
Document Type Definition (DTD)
從上面這組 HTML 基本架構中,您發現有甚麼關聯與差異嗎?看下面資料時請一併想一想喔!
什麼是 DOCTYPE 呢?其實 DOCTYPE 是 Document Type 的縮寫,在 HTML 4.01 版本時出現,意思為代表的文件類型。
DOCTYPE 其作用就是用來說明,本網站的網頁所編寫 HTML、XHTML 所用標籤是採用什麼樣的版本
每個標籤一定都是被大於 < 及小於 > 的符號包覆住:如 <HTML><HEAD><TITLE>
大多數的標籤都是採對稱的組合:如 <HTML> ... </HTML><HEAD> ... </HEAD><TITLE> ... </TITLE>
開始與結束標籤 (/) 符號各為不同:如 <BODY> ... </BODY><CENTER> ... </CENTER>
標籤是具有規律的層次巢狀安排,瀏覽器解讀他時,是由左而右、由上往下、由內往外的順序解讀。
標籤一定是使用組合或完整的英文語詞(文字):如 <HTML> BODY ...,不能使用其他語言或錯誤字取替。
標籤不分大小寫,甚至可以混合使用:如 Meta Http-Equiv="Content-Type" Content="text/html ...
未被大於 < 及小於 > 符號包覆的文字不具標籤功能(作用),只是一般文字或物件。
每一個標籤都有它固定的位置及功能:例如置中作用的 <CENTER>詳細介紹 HTML 基本架構</CENTER>
標籤跟其他軟體一樣,它也有預設(默認、內定)值,如 <BODY>....</BODY> 的預設值就是置左。
標籤就是與法、命令、宣告、指令,標籤是給瀏覽器 (Browser) 用來解讀或編譯的,所以瀏覽器只認得標籤
其實標籤只是純文字檔案而已,它不是程式語言,用最簡單及方便的記事本就可以編輯。
原來標籤的構造就是這麼的簡單,請下定決心吧!這次一定要學會它。
 
HTML 基本架構標籤進一步完全解說
宣告中 DTD 所指的就是文檔類型定義,其裡頭包含了 HTML、XHTML 標籤規則,讓瀏覽器依據這個 DTD 來分析 HTML 的編碼。
簡單的說建立此宣告只是為了讓網頁符合 W3C 的標準化,W3C 提供了以下三種 DTD 的宣告方式給 HTML4.01 所使用:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
過渡型 (Transitional DTD):這組 DTD 要求較為寬鬆,充許使用非推薦的 HTML 語法,但此 DTD 不可使用框架。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
框架型 (Frameset DTD Frameset):與上面相同,唯一的差別在於,此 DTD 充許使用框架。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
嚴格型 (Strict DTD):使用這組 DTD 最為嚴僅,不允許使用非推薦的 HTML 語法、標籤屬性或框架。
由於 W3C 在設計 HTML 標準時,考量到網頁可及性設計等問題,會以 W3C 所制定的 HTML 標準為依規作設計。
因此,網頁之起始標題必須著明網頁內容所使用的 HTML 版本,以供瀏覽器作識別解讀。
網頁語言的宣告方式,可以在 W3C 需外部連結的網站上,查詢到各版語言的最新標準寫法。
初學者在本篇各別練習 HTML 標籤時,是否加入以上宣告,並不會影響顯示結果。
<HTML>...</HTML>:宣告本文件為超文件標記語言【HyperText Markup Language】,必需使用瀏覽器來解讀才有作用。
<HEAD>...</HEAD>:與本文有關的資訊都可以放在此處,如 Meta、Title ...。
<TITLE>...</TITLE>:標題訊息,可以使用中、英文或數字及部份符號
<Meta Http-Equiv="Content-Type" Content="text/html; Charset=big5">:宣告本文件為繁體中文碼
<Meta> 為性質標籤,用來序述網頁的參考資料,如作者資料、網頁內容及其餘雜項等
詳參第一期電子報【網頁運用技巧】第二篇 Meta 十大功用
常見其他語系 HTML 碼:
簡體 (GB) <Meta Http-Equiv="Content-Type" Content="text/html; Charset=gb2312">
西歐 (Western) <Meta Http-Equiv="Content-Type" Content="text/html; Charset=iso-8859-1">
<BODY>...</BODY>:放置物件及各種語法的主要地方,其存放在這個範圍內的各種資料就會顯示成網頁畫面。
此畫面您所看到 [詳細介紹 HTML 基本架構] 文字,被存放在網頁畫面 <BODY>...</BODY> 的中間地方,那是我在裡面加了幾個斷行的標籤所致。
<CENTER>...</CENTER>:被此標籤包覆的資料或物件,都會向中對齊;此標籤內又可包覆其他標籤
您注意到嗎?在這個 HTML 基本架構中,我為何大多是使用的大寫的標籤
這只是我的習慣或給您的建議:基本架構使用大寫標籤,其他 標籤 使用小寫,以便容易區別。

請注意:
仍有少部份符號不適宜使用
例如:【:】、【/】、【//】
因為這些符號,在做存為我的最愛時
將無法順利被 (IE) 解讀。
請注意:
如果您忽略加入這段語法
訪客點入該頁時,有可能出現亂碼
請注意:
隨時養成按檢視,查看該頁原始碼習慣
看看我或是別人的網頁
是怎麼做出來的
請點選上方 [電子報一] 選單
找到貳、【網頁運用技巧】
第二篇 Meta 十大功用
就可進一步瞭解了!