2009年11月1日 星期日

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 DOSTEXT 格式。
  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均可向前相容。

0 留言:

張貼留言