手刻 HTML 簡單入門文件

各位想寫網頁的人，可能常常會看了很多書本網站，卻還拿不住主意，該怎樣寫網頁吧。本文件就是要讓你馬上寫出網頁用的，你可以邊看邊動手寫。

簡單認識 HTML

HTML(HyperText Markup Language,超文件標示語言)，是賦與網頁文章明確架構的一種標記語言。就像我們拿起一本書，封面上會有書名跟作者、出版社資訊，打開來會有目錄列表、章節開始時會有標題、每一個段落也都有特定格式，有些書的插圖也是一看就知道是插圖而不是當成文字在看…… 這些架構特色在網頁上也是一樣的，定義網頁文字會變成標題還是段落的，就是 HTML 。

就筆者所知來推測， HTML 最初應該是為了方便文件之間，相互連結使用，才出現第一種標記文字「文件參照錨("a" 元素及 "href" 屬性，其中的 a 是指 anchor ， href 則是 hyper reference 兩字組成。)」。而後到了有大區域的網路後，又利用標記語言這種不屬於本文，但可以帶來文件使用上的便利性的特點，陸陸續續為文件製作豐富樣貌格式，才會產生現在網頁的雛形來的。

就跟我上面寫的一樣， HTML 最初就是為了標記出文件內容的架構才用的，所以正確使用 HTML 元素在應該使用這元素的文字上，這一點是很重要的。這就像你不會在書本封面上，塞滿內容文字一樣，我們在 HTML 文件中，也不會把目錄塞進文件標題，或是把放表格資料的表格拿來當排版工具，這在文件定義上是會造成困擾的。

總之閒話不多提，直接來教大家寫出第一份 HTML 吧。

製作手刻 HTML 文件的步驟

第一步：取得編輯工具

首先，要先準備適當的「純文字編輯器(text editor)」，筆者建議利用 MadEdit ，請從下面的超連結找一下，下載回來執行。（其它還有 EmEditor FREE 、Notepad++ 之類的，各位可以自己挑喜歡的用。）

MadEdit 官網
EmEditor 官網, Free 版下載頁
Notepad++ 官網

第二步：建立文件

基本上，把 HTML 文件當成純文字文件來寫就好。

首先你可以把這份文件，從第一行的 html 那整行開始，複製到文件尾的 /html 那行為止，然後貼到編輯器裡面。（網頁版註：請從瀏覽器選單工具列上的「檢視」中，找到「頁面原始碼」之類的，就可以複製本網頁的原始碼了。）

再來要存檔時，記得要先調整一些東西：

編碼: 因為本例是用 UTF-8 編碼的，所以請存成 UTF-8 編碼。用 MadEdit 的，請在選單工具列的「工具(Tool) → 轉換檔案編碼」中，找到 UTF-8 後按確定按鈕，再去儲存檔案。
檔名: 記得要存成 HTML 檔案，所以檔名要打 ***.html 或 ***.htm (*** 的部分請自己打喜歡的字上去就好，不過請盡量使用英數符號。)

第三步：檢視文件

要確認 HTML 文件最後顯示成怎樣，只要用瀏覽器打開來看就可以了。

比如說你可以用的瀏覽器至少有以下幾種：

Firefox http://www.mozilla.org/
IE http://www.microsoft.com/taiwan/products/ie/
Opera http://tw.opera.com/

次回預告

學會建立 HTML 文件後，下一課就要直接告訴你怎麼自己動手寫了。因為會直接說一堆 HTML 元素，所以各位有空請自己勤加練習。（基本上只會給各位常用的，所以不必擔心要記太多。）

備註

HTML 等電腦語言，只要使用的標記文字不中斷，就算在編輯時，把裡面包的資料從中切斷換行，也不會影響到結果。（不過像 html 中的 pre 元素算是例外，這會照原排版輸出。）
關於 meta 資訊: meta 元素本身只是用來說明文件的，本身沒啥作用，要配合後面的屬性(attribute)才能表達資訊。在要為文件設定字元編碼(指顯示的文字在電腦上的代碼)方式時，用的屬性是 http-equiv 跟 content 兩者。這裡只跟你說一件事， charset 裡的值就是設定字元編碼的地方，這跟你當初儲存文件時使用的編碼方式有關，不過我為了省麻煩，所以一律請各位採用 UTF-8 ，這樣各位就可以塞各國語言進文件了。
有不懂的名詞，請利用咕狗(http://www.google.com.tw/)。
本文件以 Creative Commons 姓名標示-非商業性-相同方式分享 2.5 台灣 (中華民國) 授權條款分享。(參考: http://creativecommons.org/licenses/by-nc-sa/2.5/tw/ )