HTML新手入門(一)：序曲

第一單元介紹網頁設計語言《HTML》，艾爾弗烈德建議讀者們每天閱讀一個單元，一周之後你就有足夠能力撰寫你的烘焙雞(Home Page)了。真的，這實在是太神奇了！

你一定做得到！ 先講個故事，在美國的書店中，銷售最旺的電腦書籍往往取名為《xxxxxx：給腦袋有點秀逗的讀者》，原因是讀者們戒慎恐懼地望著琳瑯滿目的書籍時，心裡想著這本書如果腦袋有點秀逗的人都看得懂，我應該沒問題吧！另外那本既然是《xxxxxx大全》，那就給專家去唸吧！其實呢，兩本書內容幾乎沒有兩樣。所以不要有個刻板印象，以為撰寫網頁語言必須是個電腦工程師，其實你一定做得到。艾爾弗烈德不敢說這份素材是給腦筋短路的朋友們(怕有冒犯)，不過內容一定力求簡單易懂。所以，下次你與朋友們聚會時，你一定是在向朋友們宣傳你的個人網頁，絕不是笑自己在網路上做了件蠢事。

你一定做得到！

咱們開始吧

艾爾弗烈德假設讀者們在此之前對《HTML》沒有任何認識，不過至少會用電腦。而且你還需要：

(1) 一台堪用的電腦，用不著最新或最貴的。艾爾弗烈德的電腦是撿朋友們淘汰的電腦拼成的，它的規格僅是 P150/32MB RAM/560MB HD，但已應付裕如了。

(2) 一個瀏覽程式，例如微軟探險家(Microsoft Internet Explorer)，或是火狐狸(Mozilla Firefox)，或是歌劇(Opera)。艾爾弗烈德建議使用可支援圖像的瀏覽程式，如果你還在使用LYNX或CELLO等純文字型瀏覽程式，該可以考慮昇級至上述三者之一，或是其它較新、較好的瀏覽程式。(註：Firefox和Opera都具有程式體積小、速度快、功能強大的優點。)

(3) 一個純文字處理程式。可別將MS WORD拿來使用，講好聽點兒是殺雞焉用牛刀，講難聽點兒是大而無當、浪費硬碟資源。如果你使用視窗作業系統，那麼就選擇附屬應用程式中的"記事本(NotePad)"或"WordPad"。如果你使用蘋果電腦，那麼就用"SimpleText"。

只要你有這三件工具，你就可以寫好《HTML》。這裡再提出幾個常見問題：

• 問：我使用的是蘋果電腦(或PC)，會不會有問題？
• 答：《HTML》不限於電腦作業平台，撰寫時僅需任何一種簡單好用的純文字處理程式即可。

• 問：我必須要連線才能撰寫《HTML》嗎？這會不會讓我的電話費及連線費帳單暴增呢？
• 答：不會。你可以在離線時撰寫《HTML》。

• 問：我是否需要某些昂貴的軟體？
• 答：不需要，前面已列出你必備的三件工具。如果你預算充足，去買個好玩的遊戲吧！

• 問：我是不是要開始學一種新的電腦語言，像是BASIC或FORTRAN或是其它神秘難懂的天書呢？
• 答：嗯！是否有必要呢？答案是"不需要"。《HTML》不是一種電腦語言！

《HTML》不是一種電腦語言！

什麼是《HTML》

《HTML》是 HyperText Mark up Language 的縮寫，簡單的說就是《超級化粧語法》。如果你和我一樣也曾使用過PE2編輯中文，那你就知道"化粧"的意義了。你必須先輸入文字，再加入印表機控制碼(或是HTML旗標)，必須等到列印之後(瀏覽時)才能看到放大、縮小或粗斜體等效果。

接下來還是秀點英文吧!

Hyper 的意義是"在……之上"、"非直線性的、跳躍的"，所以翻譯為《超級》。網際網路帶給人類不同於以往的改變，步幅之大也是前人難以想像的。《HTML》讓你在任何時間、任何地點都能享用網際網路的好處。

Text 就是"文字"，翻譯時可以省略。它也告訴你《HTML》不是天書，只是簡單易懂的文件。

Mark up 就是"標記"，不過翻譯為《化粧》比較傳神。它使用一些旗標來控制你的文件。

Lauguage 就是"語言"，翻譯為《語法》。它不是繞口難記的電腦語言，它只是簡單的白話英語。當然它也有文法規定，這才能放諸四海皆準嘛！

開始撰寫

如果你依照七天計畫，你真正開始撰寫《HTML》是在明天第二單元的時候。現在只是說明一下撰寫過程。

你必須利用文字處理程式來撰寫《HTML》，例如"記事本(NotePad)"、"WordPad"或是"SimpleText"。當你完成《HTML》文件時，你需要一個瀏覽程式來檢查成果，(瀏覽程式演譯《HTML》文件成為網頁)，例如"Firefox"。

現在許多人進入學校或補習班學習《HTML》，他們會告訴你去買一些《HTML》撰寫軟體，例如微軟的Frontpage。這類軟體的確會帶給你一些方便，但是它們卻增加學習的困難度，因為它們拿去了一半工作。相信艾爾弗烈德的建議，至少這七天你必須使用純文字處理程式來撰寫《HTML》，等你結業之後再作選擇是否要添購這類軟體。其實，許多有經驗的網頁工作者只使用"記事本"而已。

有一件事你必須牢記在心，《HTML》必須是純文字文件，而且它的延伸檔名必須是 .html 或 .htm。

艾爾弗烈德推薦"記事本(NotePad)"、"WordPad"或是"SimpleText"的原因為：它們皆將文件儲存為純文字格式，你不需有其它額外工作。當然如果你最熟悉的是WORD或WordPerfect等重量級文書軟體，你也可以使用它們，不過你必須留心閱讀以下說明。

文書處理軟體

如果你使用WORD或WordPerfect等重量級文書軟體，你必須依循以下步驟：

1. 按照你平常的方式撰寫《HTML》文件。
2. 儲存文件時，一定選擇"另存新檔(Save As)"指令
3. 當"另存新檔"的提示視窗出現時，你必須選擇將文件儲存成不同於其預設的格式，也就是純文字格式(TEXT)。(通常在視窗下方可找到格式選單)。
4. 如果你是使用PC，你可以儲存為 ASCII TEXT DOS 或 TEXT 格式。
5. 如果你是使用蘋果電腦，你可以儲存為 TEXT 格式。
6. 記得加上延伸檔名 .html 或 .htm。

請牢記在心：一定要使用"另存新檔(Save As)"指令，否則文書處理軟體不會將其儲存為純文字格式，也不要忘了延伸檔名。

因為文書處理軟體的預設格式不止儲存你所輸入的文字，它們還儲存了頁面寬度設定、定位點、自動縮排、文字大小，以及一大堆數不盡的列印格式設定資料。你的《HTML》文件不需要它們，《HTML》文件僅僅需要簡單的"純文字"。而"記事本(NotePad)"、"WordPad"或是"SimpleText"的儲存格式就是《HTML》文件所需要的"純文字"。

文件命名

文件命名是很重要的工作，你必須替你的《HTML》文件取一個簡單易記而不重覆的名字，任何名字都可以，不過最好是由英文字母(A-Z, a-z)及數字(0-9)組成。據艾爾弗烈德所知，大部份的網路主機不支援中文檔名，而且將大小寫英文字母視為不同字母，所以千萬要注意哦！而且每一份《HTML》文件都需要延伸檔名。以下是命名的步驟：

1. 取一個名字，任何名字。如果你使用蘋果電腦或視窗9x/Me/NT/XP版本以上的PC，你可以使用長檔名，(別太長了，名字要簡單易記而不重覆)；如果你使用MS DOS或視窗3.1版本的PC，你最多只能使用8個英文字母。
2. 加上延伸檔名 .html (或 .htm)。如果你使用的是蘋果電腦或視窗9x/Me/NT/XP版本以上的PC，延伸檔名可以是 .html 或 .htm；如果你使用的是MS DOS或視窗3.1版本的PC，延伸檔名只能是 .htm。

例如，艾爾弗烈德想將文件命名為"Alfred"。若艾爾弗烈德使用蘋果電腦或視窗9x/Me/NT/XP版本以上的PC，在儲存時設定文件名稱為Alfred.html (或 Alfred.htm)；若是使用MS DOS或視窗3.1版本的PC，在儲存時設定文件名稱則為 Alfred.htm。

什麼是延伸檔名

很高興你問到這個問題。延伸檔名可協助電腦辨別文件格式， .html 或 .htm 的作用是告訴電腦這是一份《HTML》文件。當你在處理圖像時還會遇上其它延伸檔名，所以記得替你所有的網頁文件加上合適的延伸檔名。

.html 和 .htm 有什麼不同，它們和蘋果電腦及視窗3.1/9x/Me/NT/XP版本有什麼關係？

這個問題應該反過來問，蘋果電腦或視窗3.1/9x/Me/NT/XP版本和延伸檔名有什麼關係？

蘋果電腦的MAC OS及PC的視窗3.1/95/98/NT版本的專業技術名詞都叫"作業系統"，作業系統管理電腦的各項作業。任一版本的MAC OS及視窗9x/Me/NT/XP以上版本都可以支援3個以上英文字母的延伸檔名，但MS DOS或視窗3.1版只能支援3個英文字母的延伸檔名。其實它們處理 .html 和 .htm 的方式是相同的。

為何艾爾弗烈德一再強調《HTML》文件必須儲存為文字格式(TEXT)？

因為瀏覽程式只看得懂純文字格式。觀察一下你的鍵盤，上面有英文字母、數字及一些小符號如％、＠或＊？等，它們共有128個，(區分大小寫字母)，瀏覽程式只看得懂它們。

你可以做個小實驗，寫一個《HTML》文件，再儲存為MS Word格式，看看你的瀏覽器能不能打開閱讀。試試看，這不會有什麼後遺症的。

所以就直接使用"記事本(NotePad)"、"WordPad"或"SimpleText"來撰寫和儲存(SAVE)吧！

利用瀏覽程式開啟《HTML》文件

當你將《HTML》文件儲存在軟碟片或硬碟中以後，你就可以利用瀏覽程式開啟它們。既然你現在正瀏覽本素材，請依循以下步驟：

1. 選擇命令列的檔案(File)，(通常在螢光幕左上方)，開啟下拉式選單，你會找到開啟(Open)，開啟檔案(Open File)，開啟文件(Open Document)或類似的功能文字。
2. 遊標移動至該功能上，單擊滑鼠(左)鍵。有些瀏覽程式會出現尋找檔案的對話方框，協助你快速找到檔案。(舊版的微軟探險家和網景領航員會要求你按下瀏覽(Browse)或開啟檔案(Open File)的按鈕，這時才出現尋找檔案的對話方框)。在對話方框中，改變目錄(Folder, Directory)至你的文件所在。
3. 遊標移動至你的文件上，雙擊滑鼠(左)鍵；或是選擇你的文件，單擊滑鼠(左)鍵，再按下確定(OK)按鈕。瀏覽程式會接手其餘的工作。

來點作業吧！

你第一天的功課到此已經結束，來點作業吧！

其實不是真的要你寫作業，只是給你一個建議。如果你真的要開始撰寫《HTML》文件、燒烤你的烘焙雞(Home Page)，你最好能在網際網路上多逛逛。你可能會說：我不是正在逛艾爾弗烈德的網頁嗎？話是不錯啦！艾爾弗烈德是希望你看看其它人是如何寫網頁的。別找太花俏的(例如MSN, Yahoo!等入口網站)，想要跑步得先學會走路，想要走路得先學會爬。

那該怎麼做！

當你看到一篇設計美觀大方的網頁、或是有優雅的文字特效、或是有許多美麗的圖案時，你可能會想知道那是如何設計出來的吧？

艾爾弗烈德絕對不會建議你去偷取別人辛苦的成果，不過他山之石可以攻錯。舉個例子，你到朋友的家中參觀，很欣賞他家的擺設，你不會去買一套與他相同的家具吧！不過你可以倚為藍圖，裝璜你可愛的窩。所以有空時在網際網路上多逛逛，參考各家的版面配置，應該能從其中得到一些靈感。也許，就從艾爾弗烈德的蝙蝠洞開始吧！就算不能令你"見賢思齊"，至少可以讓你"見不賢而內自省"。

這裡告訴你如何檢視網際網路上的《HTML》文件，稱為原始碼(Source Code)

1. 當你發現一頁有趣而吸引你的網頁時，在螢幕上方命令列上選擇檢視(View)功能，開啟下拉式功能表。
2. 在功能表上選擇原始碼(Source Code)或類似的功能文字。
3. 《HTML》文件就出現在螢光幕上了。
4. 試試本頁，看看艾爾弗烈德的原始碼。

這時你可能還有如霧裡看花一般，不過一周之後，你絕對可以瞭解《HTML》是如何作用的。

註：如果你的瀏覽程式的命令列上沒有檢視原始的功能，你可以試著在該網頁的空白處，(避開文字及圖像)，PC的使用者單擊滑鼠右鍵，蘋果電腦的使用者壓住滑鼠鍵一段時間，之後會出現一個小選單，此時你應可以找到檢視原始碼的功能。

明天見！

本文為配合HTML 4.0撰寫，新版HTML均可向前相容。