程式語言教學誌 FB, YouTube: PYDOING: HTML 4.01 快速導覽

HTML 為 Hyper Text Markup Language 的首字母縮寫，意思是超文件標記語言。所謂的標記語言 (markup language) 就是利用標籤 (tag) 控制內容的編排，例如

<html>
<head>
<title>網頁標題</title>
</head>
<body>
<p>You ever have that feeling where you're not sure if
 you're awake or still dreaming?</p>
<p>A prison for your mind.</p>
<p>Free your mind.</p>
<p>Believe the unbelievable.</p>
<p>There is no spoon.</p>
<p>I can only show you the door, you have to walk 
through it.</p>
<p>Choice. The problem is choice.</p>
<p>Then tomorrow we may all be dead, but how would that 
be different from any other day?</p>
<p>I have dreamed a dream, but now that dream has gone 
from me.</p>
<p>Choice is an illusion, created between those with 
power, and those without.</p>
<p>Because I choose to.</p>
<p>Everything that has a beginning has an end.</p>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：example01.html
     功能：示範 HTML 4.01 標記語言的使用 
     作者：張凱慶
     時間：西元 2011 年 5 月 -->

使用瀏覽器 (browser) 開啟，如下

HTML 文件由 <html> 開始，到 </html> 結束，由 <html></html> 成對標籤圍起來的範圍即是網頁所顯示內容

<head></head> 成對標籤裡頭放置屬於整份 HTML 文件的資訊，例如

<title></title>
<meta />
<link />
<script></script>
<style></style>

<title></title> 圍住的內容即是網頁標題，如上例中 Firefox 的標題列。 <meta /> 為文件資訊，可提供時間日期、關鍵字、電子郵件與作者姓名等相關內容。 <link /> 用來連結樣式表 (style sheet) ， <style></style> 為自訂的樣式表， <script></script> 則是放置腳本語言 (script language) 的地方，或是外連其他伺服器的腳本程式。

所謂的樣式，也就是文件內容呈現的方式。

像是 <html></html> 或 <title></title> 稱為成對標籤，而像是 <meta /> 是獨立標籤，這是說獨立標籤不需要結束的標籤。成對標籤包括所圍住的內容就是一個 HTML 文件的元素 (element) ，獨立標籤自成一個元素。

<body></body> 成對標籤裡頭放置網頁內容的地方，此例中，我們利用 <p></p> 成對標籤包住個別的英文句子， <p></p> 表示段落，因此顯示結果有自動空一行的效果。

這些英文句子是知名電影駭客任務系列中的語錄 :)

這裡，我們看到的是預設的樣式，當然，我們也可以在 <style></style> 標籤中自行設計樣式。

除了文字之外， HTML 文件也可以設置圖片、程式或其他多媒體檔案，已下為放置圖片的例子

<html>
<head>
<title>網頁標題</title>
</head>
<body>
<img src="example.jpg" />
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：example02.html
     功能：示範 HTML 4.01 標記語言的使用 
     作者：張凱慶
     時間：西元 2011 年 5 月 -->

瀏覽器開啟如下

我們看到 <img /> 為獨立標籤， src 是 <img /> 的屬性 (attribute) ，表示圖檔來源，這裡直接設置檔名，表示 HTML 文件與圖檔放在相同的目錄裡。我們可以看到，獨立標籤利用屬性指定元素內容，成對標籤的元素內容則是所圍住的內容。

src 為 <img /> 專用的屬性之一，不同標籤有的專用屬性，屬性名稱可能相同。另外有四個所有標籤可共用的屬性，如下表

共用屬性	說明
class	指定樣式表中的類型
id	元素專屬的識別名稱，可供 JavaScript 程式使用
style	指定元素的樣式
title	指定元素的標題名稱

這裡須注意一點，雖然 HTML 4.01 允許直接用標籤，或是 style 屬性控制元素的樣式，然而這一方面應該由 CSS 樣式表來完成，目的是把 HTML 文件結構與樣式分隔開來，這樣一來，結構改變與樣式無關，同樣的，樣式改變與結構也無關。

顯而易見的例子如眾多部落格服務都提供模板 (template) 供使用者選者，大體上，部落格所提供的網頁結構都極為類似，模板賦予更多的樣式表選擇，只要選了不同的模板，實際上就是換了不同的樣式表，整個部落格外觀看起來就會很不一樣。

事實上，模板是網頁結構與樣式表的混合體，通常部落格廠商允許使用者自訂網頁結構，例如側邊欄的小工具可能不等之類，各模板明顯的差異通常可由樣式表看出來。

所以，利用 CSS 的好處是改外觀可以直接換樣式表，無須動到網頁結構，不然如果把樣式寫在網頁結構裡，也就是 HTML 文件之中，要改外觀就得一一張網頁各自分開來改，既沒有效率也不方便。

我們在這份《HTML 4.01 快速導覽》中並不會提到太多的 CSS 設計，有關 CSS 的教學，可參考本站的另一份《CSS 2.1 快速導覽》。