顯示具有 網頁製作 標籤的文章。 顯示所有文章
顯示具有 網頁製作 標籤的文章。 顯示所有文章
2012年2月8日 星期三

免費網頁編輯軟體:BlueGriffon、Amaya

若是慣用「所見即所得」編輯軟體,早期多半採取微軟的FrontPage,臺灣不少中小學校老師都採用此軟體教導學生製作HTML網頁,它後續發展為SharePoint Designer 2007/2010,程式體積約數百MB,可自微軟網站免費下載!另外一款知名商業軟體是Adobe Dreamweaver,伴隨著其繁複功能的是體積龐大的程式和高不可攀的價格。

BlueGriffon

BlueGriffon Web Editor

其實可能有不少使用者曾聽過Nvu這款頗受好評的免費網頁編輯軟體,但它很不幸於2006年停止開發。後來一群程式設計師以Nvu的原始碼為基礎,增補修訂為KompoZer。而BlueGriffon的開發團隊則包括許多原來Nvu的程式設計師,在整編納入KompoZer的新血輪之後,推出符合W3C標準的XHTML、最新的HTML5、CSS3、SVG、變形、陰影等效果……的網頁編輯軟體。它使用Firefox的Gecko渲染引擎,所以呈現出來的畫面是和Firefox相同!

BlueGriffon是跨平臺軟體,適用於Windows、Linux或Mac作業系統,於2012年1月17日甫推出1.4版,可由官網免費下載(英文網頁連結)。

Amaya

Amaya - W3C's Editor and Browser

Amaya是一款「歷史悠久」、由W3C開發的網頁編輯軟體,它協助W3C推廣及制定網頁標準,最初僅是一款HTML + CSS的編輯器,之後擴大支援XML、HTML、MathML和SVG,集瀏覽功能與編輯及遠程控制功能。

Amaya是跨平臺軟體,適用於Windows、Linux或Mac作業系統,於2012年1月18日甫推出11.4.4版,可由官網免費下載(英文網頁連結)。

2009年11月1日 星期日

HTML新手上路

如果你對寫網頁沒有任何概念,這正是你跨出第一步的時候。

七天速成

羨慕朋友們紛紛設立個人網頁嗎?自己卻不知道如何撰寫嗎?這份素材可以幫助有心人瞭解網頁的基本設計。每天只要三、四十分鐘,每次一個單元,一周即可速成。如果你願意加快步伐,找個周末下午,泡杯香濃的咖啡坐在電腦前面(可別打翻了),晚上你就可領到結業證書了。祝好運!

第一單元:序曲,簡單地介紹網頁設計語言(HTML)以及你所需要的相關知識。

第二單元:旗標,介紹網頁設計語言的旗標,運用它們來控制文字變化。

第三單元:控制文字變化,更進一步介紹內文的控制旗標。

第四單元:連結網頁,這其實是最簡單、有趣的部份,連結你的網頁或是網際網路的任何一張網頁。(小心不要侵犯著作權哦!)

第五單元:圖像,介紹如何將圖像插入你的網頁,文字繞圖的方法,以及利用圖像連結至其它網頁。

第六單元:控制圖像變化,介紹如何將圖像放大或縮小的旗標。

第七單元:結業,領取你的結業證書,再找個網站來安置你的個人網頁吧!

這份素材已儘量避免使用專業術語,並在一些相關名詞上加註英文或說明,希望能讓你輕輕鬆鬆瞭解如何撰寫網頁。

亞馬遜書店(amazon.com)的 HTML 暢銷書:

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

HTML新手入門(二):旗標

嗨!歡迎來到第二單元。顯然你是很認真地要撰寫個人網頁,那麼你也一定準備好文字處理程式了,例如記事本(NotePad)SimpleText;你一定也還記得附加檔名 .html.htm吧!好極了,我們就開始今天的課程!

HTML旗標

HTML 是非常簡單、邏輯的格式,就好像聽你指揮往前、往後、向上或向下一樣容易。只要記住一點,HTML 是文字格式,它的主要目的也在控制文字編排。當你寫了長長一篇文章之後,你總不會將文章不分段的一口氣讀(列印)完吧!你將文章分段、每個段落之前加上標題,而標題文字使用較大字型、文章重點則加上底線或是改為粗體字型、註解文字使用較小字型。在 HTML 裡,這些功能皆透過一系列的旗標來完成。

每一個旗標都代表一個指令,例如你想將文章中某一個字改為較大字型,你就在那一字前面加上一個放大旗標,在那個字的後前加上一個回復旗標。一行字或整個段落也是如此控制。粗體、斜體字型都有相對應的旗標,控制方法也相同。

旗標的格式

所有的旗標(指令)都有一固定的格式,姑且稱為 HTML 文法。它們一定由一個"小於符號"開始,<,再由一個大於符號結束,>,絕對沒有例外。旗標多半是英文單字的縮寫,學習 HTML 只是要記得這些旗標而已。我們馬上就來學第一個旗標

控制粗體字型的旗標是英文字母 B,其來源為 Bold (粗體)。我們來看看它如何控制 "艾爾弗烈德" 這個名字:

<B>艾爾弗烈德</B>

哇! 變成粗體字了

  1. <B>是粗體字旗標
  2. "阿爾弗烈德"是被粗體字旗標<B>所控制的文字。
  3. </B>是回復旗標。注意,它也是字母 B,只是前面加了一條斜線 /。
  4. 目前為止還算簡單吧?

常見問題

  • 問:其它的回復旗標是否也是啟動旗標加上一條斜線呢?
  • 答:是的。
  • 問:旗標會出現在我的網頁上嗎?
  • 答:不會。只要你的旗標沒有打錯字母,而且置於 < 和 > 之間,讀者不會看到這些幕後的控制碼。
  • 問:艾爾弗烈德的粗體字型旗標是大寫的英文字母 B,是不是所有的控制旗標都使用大寫字母?
  • 答:不是,無論是大寫或小寫英文字母,瀏覽程式視它們為相同的控制旗標。不過,最好是保持一個良好習慣,例如所有的控制旗標都使用大寫字母,當你要回頭修改現有的 HTML 文件時就容易多了。(註:若要與XML相容,則建議都使用小寫字母。)
  • 問:是不是文件中的所有內容都需要控制旗標
  • 答:不是。無論是否受到旗標控制,所有的內容都會顯示。旗標的作用是控制(美化) HTML 文件,吸引讀者注意。
  • 問:如果我忘了加上回復旗標、或是加上回復旗標卻打漏字母而少了那條斜線,會對我的 HTML 文件造成什麼影響?
  • 答:這是麻煩事,不過是很容易矯正的麻煩。顯而易見的,如果你沒有正確地加上回復旗標,所有接下來的內容都會繼續受到控制。當你用瀏覽程式檢視你的 HTML 文件時,從你漏掉回復旗標之後的文件內容都會持續相同的"特效"。修正方法就是所以回到 HTML 文件,加入正確的回復旗標,重新儲存文件,再回到瀏覽程式檢視,一切回到正常。
  • 問:所有的控制旗標是成雙成對嗎?
  • 答:不是,的確有些例外。不過目前我們先保持一個觀念:有開始就有結束。記得第一單元中艾爾弗烈德曾告訴你,語言一定有文法規定,成雙成對就是 HTML 一條重要的文法。

成雙成對

一些主要的 HTML 旗標都是成對出現,它們也都很容易記憶,(還是需要略通英文啦)。以下列出三個常用的文字控制旗標

效果 控制碼 說明 範例
粗體(Bold) B <B>粗體(Bold)</B> 粗體(Bold)
斜體(Italic) I <I>斜體(Italic)</I> 斜體(Italic)
鉛字體(Typerwriter) TT <TT>鉛字體(Typerwriter)</TT> 鉛字體(Typerwriter)
  • 問:是否能一次使用兩個或兩個以上控制旗標
  • 答:是的。但要記得不管使用幾個控制旗標,不要忘了成雙成對的文法規定。看看接下來的例子:
  • <B><I>粗體和斜體</I></B>粗體和斜體
  • <B><TT>粗體和鉛字體</TT></B>粗體和鉛字體

當你使用兩個或兩個以上控制旗標時,務必注意啟動和回復的順序。看看接下來的說明:

  • <B><I><TT>艾爾弗烈德</TT></B></I>:誤,</B> 應在 </I> 之後。
  • <B><I><TT>艾爾弗烈德</TT></I></B>:正

注意!回復旗標的順序和啟動旗標的順序完全相反。

單身旗標

現在介紹幾個常用的單身旗標,意思是它們不需要回復旗標

旗標 說明
<HR> HR 是 Horizontal Reference 的縮寫,它會在網頁中顯示一條水平的分隔線。
<BR> BR 是 Break 的縮寫,它的作用為另起一行,(跳行)。
<P> P 是 Paragraph 的縮寫,它的作用為另起一段,(分段)。它的功能和 <BR> 有點兒類似,不過段落與段落之間的距離較大,意即 <P> 多跳一行。
雖然 <P> 是一個單身旗標,不過你仍可以加上回復旗標 </P>,協助你保持成雙成對的良好文法習慣。

你的第一張網頁

如果你已瞭解上述旗標的作用,你可以開始撰寫你的第一張網頁了。不過在真正開始之前,艾爾弗烈德還得告訴你兩個重要旗標,而且它們必須出現在每一份 HTML 文件之中。(哼!居然拖到現在才告訴人家!)

每一張網頁都是由 <HTML> 旗標開始:顯而易見的,你必須宣告這是一份 HTML 文件。

利用 <TITLE></TITLE> 旗標給你的網頁一個標題(表頭、橫批):看看命令列的上方,(如果你的瀏覽程式使用全螢幕,看看螢幕的頂端),是否出現 HTML新手入門:旗標 的字樣,這就是利用 <TITLE></TITLE> 旗標所宣告的本頁標題,在啟動旗標和回復旗標之間的文字就會出現在命令列上方的橫幅內。

每一張網頁都是由 </HTML> 旗標結束:這就更明白了,成雙成對的文法規定,</HTML> 宣告結束 HTML 文件。

我們開始吧!

再提醒一次,HTML 非常容易,它完全聽你的指揮而往前、往後、向上或向下。你加入啟動旗標,它就啟動"特效",你加入回復旗標,它就停止"特效"。你只要確定旗標都置於 <> 之間,而且沒有打錯、漏字母即可。

這裡提供一個簡單的示範網頁,包涵今天的課程。輸入你的文字處理程式,儲存,再用瀏覽程式檢視。

<HTML>
<HEAD>
<TITLE>我的第一張網頁</TITLE>
</HEAD>
<BODY>
<P><B>這是我的第一張 HTML 網頁!</B>
<BR>我可以使用<I>斜體字</I>或<B>粗體字</B>。</P>
<P><B><I>或是粗體及斜體字</I></B>。</P>
<P><TT>或是下課啦!</TT></P>
<HR>
</BODY>
</HTML>

艾爾弗烈德在這個範例中還使用了第二單元未教的旗標,你就先依樣畫葫蘆,總之這是非常簡單的網頁。注意 <HTML></HTML> 以及 <TITLE></TITLE>。仔細觀察 <P><BR> 的不同效果。

如果你已經完成你的第一張網頁,不妨與艾爾弗烈德的參考答案對照效果:請按這裡

明天見!

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

HTML新手入門(三):控制文字變化

還記得昨天學的 <HTML></HTML><TITLE></TITLE><P><BR><HR> 以及其它的文字控制旗標吧?如果有點兒忘了,就回到第二單元去複習一下。準備好你的文字處理程式和瀏覽程式了嗎?如果一切 OK,我們就要開始介紹字型的大小變化了。

標題(Heading)旗標

HTML 文件中常常見到標題旗標。原因很簡單,因為你必須替文章分段,所以每段之前都得加上段落標題嘛!

常用的標題旗標共有六個:從 <H1><H6><H1> 為最大標題,<H6> 為最小標題。以下列出它們的相對大小:

<H1>一號標題</H1>

<H2>二號標題</H2>

<H3>三號標題</H3>

<H4>四號標題</H4>

<H5>五號標題</H5>
<H6>六號標題</H6>

新版的瀏覽程式接受 <H7><H8> 旗標,不過實際上它們和 <H6> 的差別不大,所以真正使用到的機會不多。

標題旗標可以作出不同大小的粗體字型,而且很容易使用,僅需運用 H# 和 /H# 控制碼即可。不過它們有一個缺點,它們控制的文字會獨立成行。其實這正是它們的原始目的,做為段落的標題當然是獨立成行,也不會有其它文字出現在它們的左右兩邊。

字型大小(Font Size)旗標

相信你一定希望能對字型大小作更多的控制,那麼 <FONT SIZE> 就是你所需要的。標題旗標控制文字 "座落" 在段落的上方,字型大小旗標卻可以出現在文章的任何一個位置。

共有十二個字型相對大小的控制旗標+6+1-1-6

你可能猜測 +6 代表最大字型,-6 代表最小字型。你猜對了,所以我們也不展示所有的效果。不過你可以每一個都練習一次。

<FONT SIZE="+3"> 這是加大三號字 </FONT>

<FONT SIZE="+1"> 這是加大一號字 </FONT>

<FONT SIZE="-1"> 這是減小一號字 </FONT>

<FONT SIZE="-6"> 這是減小六號字 </FONT>

注意上面的旗標控制碼,<FONT SIZE="--">,實際上分為兩個部分:

  • FONT 代表此旗標作用為控制字型變化。(也許是字型大小,也許是顏色,也許是字型種類)。
  • SIZE 為此旗標屬性,它設定字型大小。

這有點類似控制旗標再內含一個內部控制旗標,艾爾弗烈德稱其為旗標屬性HTML 有許多旗標都運用屬性作進一步控制,屬性後接等號,等號後面的引號內含屬性控制碼。屬性可以不止一個,也不受先後順序影響。例如 FONT 就另有 COLOR 和 FACE 兩個屬性,它們對新手而言略嫌複雜,容艾爾弗烈德另文介紹。

再看一次 <FONT SIZE="--"> 旗標,它的回復旗標永遠只有 </FONT>,道理很簡單,所有的屬性屬於 FONT 控制碼,回復旗標內就不再贅述屬性設定了。

文字置中(Centering)

相信你現在已寫了一小段文章了,無疑地你應發現瀏覽程式將你的文章 向左對齊。你也應該猜到這是預設的,英文是由左往右唸的嘛。

那麼若艾爾弗烈德想將文字置中怎麼辦?
很簡單啊!就用 <CENTER></CENTER> 旗標就可以了。

其範例如下:

<CENTER>這段文字為向中間對齊</CENTER>

文字置右

那麼文章可以 向右對齊 嗎?是的,你可以運用第二單元所學到的段落旗標 <P>,再加上屬性控制碼即可。範例如下:

<P ALIGN="RIGHT">文字向右對齊</P>

ALIGN 的意思是"對齊、排列、排隊",RIGHT 的意思是"右邊",這個屬性控制應該不用多作解釋了吧!不過 </P> 在這就不能省略了,你得宣告向右對齊的段落結束才行。

除了 <P> 外, <BR><HR> 也可有屬性控制。接下來的幾個單元中,我們會介紹更多的旗標屬性,不過今天到此結束。你也許會覺得第三單元短了一些,其實不然,艾爾弗烈德多留點兒時間給你練習這幾天所學到的旗標

明天見!

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

HTML新手入門(四):連結網頁

製作連結

歡迎來到第四天的課程,第四單元只介紹一個主題:如何製作連結。現在你應該很熟悉 HTML 的文法了,也應該已猜到連結是用旗標來控制,那我們就來看看如何設定連結至其它網頁。

以連結至 艾爾弗烈德的蝙蝠洞 為例:

<A HREF="http://alfredcave.blogspot.com">艾爾弗烈德的蝙蝠洞</A>

解析:

  • A 的意義為 Anchor,中文翻譯為"定錨"。
  • HREF 的意義為 Hypertext REFerence,中文翻譯為 "超文字" 的 "參考"。記得第三單元提到的屬性控制嗎?HREF 也是一個屬性控制,它宣告定錨旗標的連結屬性
  • http://alfredcave.blogspot.com 是一個完整的網際網路地址。它接在等號後面、兩個引號中間,意即它在此作為連結屬性的控制碼。
  • 艾爾弗烈德的蝙蝠洞 是真正出現在網頁上的文字。
  • /A 是回復旗標,千萬別漏掉了。

我們現在來看看前述範例出現在網頁上的效果:

艾爾弗烈德的蝙蝠洞

先不要按下連結,將你的滑鼠遊標移至連結文字(艾爾弗烈德的蝙蝠洞)的位置,再檢視你的瀏覽視窗底部,它會出現 "http://alfredcave.blogspot.com" 或類似字樣。這個底部區域是供瀏覽程式向你報告它目前的工作或進度之用,通常出現的是 "完成(Document Done)"。

OK!現在你可以按下連結,記得要回來繼續我們的課程哦!

連結電子郵箱(E-Mail)的地址

製作電子郵箱的連結和製作一般連結無甚不同,它也使用定錨旗標 <A>。請看下例:

<A HREF="mailto:alfredcave@hotmail.com">寄E-Mail給艾爾弗烈德</A>

解析:

  • mailto: 宣告此連結屬性為電子郵件。
  • alfredcave@hotmail.com 為艾爾弗烈德的電子郵箱地址。
  • 寄E-Mail給艾爾弗烈德 是真正出現在網頁上的文字。

我們現在來看看前述範例出現在網頁上的效果:

寄E-Mail給艾爾弗烈德

同樣地,先不要按下連結,將你的滑鼠遊標移至連結文字(寄E-Mail給艾爾弗烈德)的位置,再檢視你的瀏覽視窗底部,它會出現 "傳送郵件到 alfredcave@hotmail.com" 或類似字樣。

OK!現在你可以按下連結,寫封電子郵件給艾爾弗烈德了。

明天見!

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

HTML新手入門(五):圖像

歡迎進入第五單元,相信你現在已經能夠撰寫一美觀大方的文字型態網頁了。網際網路盛行的原因之一是它支援許多格式的圖像,你也一定希望能夠運用圖像讓你的網頁更生動、更能吸引網友們的視線。今天介紹的就是如何在網頁中置入圖像,以及設定圖像為連結。

在網頁中置入圖像

首先要導入一個觀念:網頁中的所有文字是儲存在同一個 HTML 文件內,但是網頁中的所有圖像既不是儲存於同一個 HTML 文件內,也不是文字格式(TEXT)文件,它們是獨自儲存於不同檔案中。當瀏覽程式遇到圖像旗標 <IMG> 時,會傳呼該圖像而顯示於網頁中的相關位置。

註:此刻,艾爾弗烈德希望你將所有的 HTML 文件及圖像儲存於同一個文件夾內 (Folder, 目錄, Directory, 次目錄, Sub-Directory)。

現在就介紹圖像旗標<IMG SRC="image.gif">

"image.gif" 可為任何圖像的檔名;艾爾弗烈得就以 <IMG SRC="internet.gif"> 為例,請看其效果:

image example - internet

解析:

  • IMG 的意義為 IMaGe,中文翻譯為"圖像、圖形、圖畫"。它告訴瀏覽程式在此旗標處置入圖像。
  • SRC 的意義為 SouRCe,中文翻譯為 "來源"。SRC 是一個屬性控制,它告訴瀏覽程式至何處傳呼該圖像檔案。
  • image.gif 是圖像檔名。注意:此例的延伸檔名是 .gif
    註:你可以將圖像檔案儲存於不同的檔案夾內,不過必須在此輸入完整的路徑及檔名。例如 C:\MyFolder\MySubFolder\MyFile.gif。為了避免混淆,艾爾弗烈德建議你在更熟悉 HTML 文件之後才使用不同的檔案夾來儲存你的檔案及管理你的網站。
  • <IMG> 是單身旗標,不需要回復旗標

圖像格式

不同的圖像格式有不同的延伸檔名,網際網路最常使用的三種圖像格式為:

  • .gif,它是 Graphics Interchange Format 的縮寫。.gif 由 Compuserve 公司所制定,幾乎是網際網路上最流行的圖像格式。它可以支援動畫格式(Animated GIF);也可以支援透明格式,(將圖像的部份區域設定為透明,使文字和圖像有更好的融和效果,不致有突兀的白邊)。
  • .jpg.jpeg,如果你的PC使用舊版的作業系統而只能接受三個字母的延伸檔名,你只能使用 .jpg;如果你的PC使用新版作業系統或你使用蘋果電腦,你可以使用 .jpg 或 .jpeg。它們是 Joint Photographic Equipment Group 的縮寫,原文的中文翻譯為 "聯合圖像設備集團",這個組織制定 .jpg 格式。
    這個格式使用獨特的壓縮方式,舉例而言,一個圖像在顯示時需要10,000個位元組,但是儲存時可能只需要2,000個位元組。它節省硬碟的空間,也節省圖像檔案上傳或下載的時間,所以它也是網際網路上極受歡迎的圖像格式。
  • .bmp,它是 bitmap 的縮寫。它將圖像的每一個點的顏色都記錄下來,因此它佔用的檔案空間最大。雖然瀏覽程式支援 .bmp 格式,但是艾爾弗烈德不建議你使用。

切記一點:雖然圖像使你的網頁更生動,但是太多或太大的圖像檔案往往大量增加網頁的下載時間,你不會期望網友們枯坐在電腦前面只是等待下載一些無關緊要的美工插圖吧!所以慎選你的圖像檔案,再使用中等速度的電話撥接數據機測試網頁所需要的下載時間,將 "文字 — 圖像 — 速度" 三者取得最適當的平衡效果。

那裡可取得圖像?

網際網路上有許多網站提供免費圖像供你使用。此外,當你邀遊於網際網路的同時,你已經看到過數以百計的各式圖像了。如果你在任何一張網頁上看到你喜歡的圖案,別直接下載使用。艾爾弗烈德建議你寫封 E-mail 去詢問作者,取得授權之後再使用。

設定圖像為連結

在第四單元介紹了連結的設定方式,敘述如何將某些文字設定為按鈕而連結至其它網頁。現在則介紹如何將圖像設定為按鈕而連至其它網頁,以連結至 "艾爾弗烈德的蝙蝠洞" 為例:

<A HREF="http://alfredcave.blogspot.com">
<IMG SRC="internet.gif"></A>

很簡單吧!只是將圖像旗標 <IMG> 置入連結旗標 <A HREF></A> 之間就完成了。我們再來看看效果:

image example - internet

先不要按下連結,將你的滑鼠遊標移至圖像的位置,再檢視你的瀏覽視窗底部,它會出現 "http://alfredcave.blogspot.com" 或類似字樣。同時,你也應發現圖像周圍出現一個邊框(通常瀏覽程式設定為藍色,厚度約2~3點距),有點討厭吧?消除邊框非常容易,現在艾爾弗烈德就要介紹一個新的屬性,邊框屬性 BORDER

<IMG BORDER="0" SRC="internet.gif">

解析:

  • BORDER旗標屬性,它宣告邊框的寬度。

如果你喜歡,你可以設定任何厚度的邊框,例如:BORDER="7"、BORDER="55"、BORDER="103"等等。現在我們來看 BORDER="0" (無邊框) 的效果:

image example - internet

今天的課程到此為止,艾爾弗烈德仍然建議你多作些練習。

明天見!

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