如何利用超文字標記語言設計全球資訊網首頁:大綱
洪秀雄
一、導言
全球資訊網：一個可以傳遞超文字文件的廣域資訊網路，又稱為「萬維網」。
英文全名為 Word Wide Web，簡稱 WWW或 Web或 W3 或 3W。
首頁：全球資訊網站的第一頁，也就是其門戶，進了首頁就能一窺該站的資料，故名。
HTML：「超文字標記語言」，為HyperText Markup Language 的翻譯，為一種可以處理文字、多媒體文件、網路鏈結的程式語言。
二、HTML基本語法
☆HTML文件的基本要件：文字、圖形、鏈結、背景
☆HTML文件的基本架構：
[HTML]
[HEAD][TITLE] 標題文字 [/TITLE] [/HEAD]
[BODY]]
文件主體 （包括文件的所有要件）
....................
..............
[/BODY]
[/HTML]
☆文件主體
1.內容主體參數宣告[BODY .....]
[BODY BGCOLOR="#參數" TEXT="#參數" VLINK="#參數" ALINK="#參數"]
○BGCOLOR、TEXT、VLINK、ALINK分別表示背景、主體文字、看過的鏈結、未看過的鏈結的顏色，其參數為：
RRGGBB （RR、GG、BB分別表示紅色、綠色、藍色的程度，程度由00到FF表示，為十六進位，數字越大表示飽和程度越高，顏色的調配和水彩的顏色調配原理完全相同）
例如：
#FFFFFF 白色 #000000 黑色 #FF0000 紅色 #00FF00 綠色
#0000FF 藍色 #FF00FF 紫色 #FFFF00 黃色 #777777 灰色
...........
系統設定：BGCOLOR=#00FFFF，TEXT=#000000，ALINK=#FF00FF，VLINK=#0000FF
2.文字的使用
○文字的大小：有兩種方式可用，其一為 [FONT SIZE=Y]，其二為 [HX]。其中Y 為1 ～7 的數字，表示字由小到大的排序，而X 則為1 ～6 的數字，但順序正好相反，X 數字越小，字越大，故H1及 SIZE=7 為可以使用的最大字型。
○個別字的顏色：用 [FONT COLOR=#參數] 來設定，這裡參數與顏色的對照和前面所說的相同。
○字體的變化：有粗體 [B]，斜體 [I]，及畫底線 [U]三種。
○字型的變化：尚無。
○文章的表現：可以讓瀏覽程式自動排版，或自己先排好。前者用 [PRE]，或者在每一行後面加[br]；後者不必做什麼，但稿件不要用enter去強迫分行。（進一步的作法請參考後面的「進階用法」）
○強迫斷行：加 [br] （結束時不必宣告 [/br]）。
○分段：加 [p] （結束時不必宣告 [/p] ）。
○條列：分有序列（Order List）及無序列（Unorder List）兩種，寫法：
⊙有序列 ⊙無序列
[OL] [UL]
[LI]第一點 [LI]第一點
[LI]第二點 [LI]第二點
[LI]第三點 [LI]第三點
[/OL] [/UL]
○內縮：利用定義式序列（Definition List）使次條列內縮。寫法：
[DL] 接著 [DT] （不內縮者）或 [DD] （內縮者），接著以 [/DL]結束。
例：
⊙有序列 ⊙無序列
[DL] [DL]
[UL] [UL]
[DT]第一點 [DT][LI]第一點
[/UL] [/UL]
[OL] [UL]
[DD][LI]次條列一 [DD] 次條列一
[DD][LI]次條列二 [DD] 次條列二
[DD][LI]次條列三 [DD] 次條列三
[/OL] [/UL]
[UL] [UL]
[DT]第二點 [DT][LI]第二點
[/UL] [/UL]
[OL] [UL]
[DD][LI]次條列一 [DD] 次條列一
[DD][LI]次條列二 [DD] 次條列二
[/OL] [/UL]
[/DL] [/DL]
○例題見附件一。
3.表格的寫法
○基本寫法：先宣告
[TABLE BORDER=X1 CELLSPACING=X2 CELLPADDING=X3 WIDTH=X4]
接著用 [TR] 宣告表格行，[TD] 宣告表格列。結束時分別用[/TD]、[/TR]、[/TABLE]反對稱的方式關閉。
[td]的寫法：
[td align=Y1 valign=Y2 rowspan=Y3 colspan=Y4 width=Y5]
說明：1)X1為表格線的寬度，若為零，表示忽略表格線；X2表示相鄰表格列間之水平間距；X3為表格行間之垂直距離；X4為整體表格的寬度。以上除了X4外，其餘的均為以圖素（PIXEL）
為單位的數字；X4通常以百分比表示（以圖素量表示也可以，但不推薦），表示表格寬度佔螢幕寬度的百分比。
2)Y1為文字在表格內的左右對齊方式，center, left, right分別表示置中、向左、向右對齊；Y2為文字在表格內上下的對齊方式，top, middle, bottom 分別表示依最上面一行、中間一行或最下面一行對齊；Y3表示該資料格左右所橫跨的列數；Y4表示該資料格在上下所縱跨的行數；Y5為該資料格的寬度，可以用圖素量或百分比表示。
○例題見附件二。
4.圖片的穿插
○基本寫法： [img src="圖片名稱" align=Z1 width=Z2 height=Z3]
○圖片若要加說明，可選擇在圖片的1)上面，2)下面，3)右邊，或4)左邊加註解。
1)先是說明的文字，並在文字後面加 [br] 或 [p] , 再跟著
[img src="sample.gif"]，這裡 sample.gif 假設是圖片的名稱。
2)先 [img src="sample.gif"] [p] , 接著才是文字說明。
3)[img src="sample.gif" align=left]文字說明。接著[br clear=left]。
4)[img src="sample.gif" align=right] 文字說明。接著 [br clear=right]。
○圖片縮小顯示：假設原來的圖片大小為 640 x480，要縮成 160 x120，則[img src="sample.gif" WIDTH=160 HEIGHT=120]
如果你不確定圖片原來的長寬比例，則可以省掉WIDTH、HEIGHT 的任一個，例如，如果只定義 HEIGHT=160 ，省掉WIDTH=? ，則系統會自動依比例將寬度也縮成 120。
○好幾張圖片要整齊擺在一起，可以和表格標記相配合。
○例題見附件三。
5.鏈結的寫法
○基本寫法：[a href="URL"]參數
說明：URL 是點到「參數」所連結到的地址。結束時記得要加 [/a]，
不然會一塌糊塗。參數可以是一個WWW 站、gopher站、ftp 站、
一張圖片、或一篇文章。
例：⊙ [a href="../librimg/libr07.jpg"] 圖書館外觀之六 [/a]
⊙ [a href="http://www.lib.ncu.edu.tw/"] 中央大學圖書館[/a]
⊙ [a href="http://www.yahoo.com/"] Yahoo [/a]
⊙ 網路上有豐富的、圖文並茂的資訊，讓人流連忘返，如果你發
現資訊太多，不知從何處下手，那麼[a href="http://www.yahoo.com/"]雅虎[/a]站絕對是一個不會讓你空手而回的地方。
⊙ [a href="../librimg/libr07.jpg"]
[img src="../librimg/libr07.jpg" height=100 border=0][/a]
最後的例子表示「參數」是一張縮小的同一張圖。
○例題見附件四。
三、進階運用
☆背景佈景：利用已經預備好的圖片或佈景，舖陳在螢幕上，和舖地磚相仿，可增加畫面的美觀性，寫法：
◎ [body background="../tiles/tile-gry.gif"]
◎ [body background="../tiles/lib-pnk.gif"]
☆字形變化：由於不論你用的瀏覽器是Netscape Navigator 或 Internet
Explorer，都是用自己的Windows字型，所以基本上螢幕上的
中文字型無法用文字的方式隨意變化。克服的方法只有用圖
形方式彌補，雖然多佔點記憶體，但變化反而更靈活。
☆善用表格功能
1)圖片的排列
2)運用於目次
3)協助文字對齊
☆善用影像處理程式：使圖片透明，不但更美觀，而且還可以大幅減少檔案的大小。如果將圖片事先縮小，而不是在HOME
PAGE中再縮小，可以大量的減少網路上下載的時間。
四、最重要的要點
☆內容遠比外觀重要
☆構思決定成敗
☆圖與文字一樣重要
☆不要成為網路塞車的罪魁禍首
五、補充說明
☆本文為為「科技館際合作協會」北區會員單位及URICA 使用者聯合會舉
辦的「ＷＷＷ的使用及設計研習會」的部分講義，原講義還附有彩色圖片、磁片及基本練習。感謝經辦的館員（參考諮詢組）及參與的學員；
沒預料到這一類的研習如此受歡迎，對眾多向隅者感到抱歉，實在是因為有場地及教學效果的限制。
☆強烈建議你在自己的個人電腦上建立一個首頁，那是你的網路上的家，永遠回得去的家；除非你的電腦沒有硬碟。將你的瀏覽器的HomePage設定為你自己的家，作法：FILE:///C|/MY_URL/MYHOME.HTM
其中MY_URL為MYHOME.HTM所在的子目錄名稱，如此你每次上瀏覽器，不論網路通或不通都一定上得去，而不是給你當機。在啟動瀏覽器後，先會出現你的首頁，你如果在首頁上設計有你最喜愛的網站鏈結點，則再從那裡連出去；如果沒有，則從BOOKMARK那裡連出去。萬一你要連結的站出了問題，或這時網路出了問題時，你也可以按一下HOME回家，而不是當機。
☆為了設計首頁，你必須要有一個影像處理軟體。強力推薦Paint Shop Pro，易學、易用、功能強又便宜，而且是一個共享軟體，提供30天的免費試用。你可以自網路上免費下載，網址是： http://www.jasc.com/
請務必注意16 bits及32 bits之分，Windows 3.1 只能用前者，Windows95則用後者。
參考書籍
1.徐忠長，1995：WWW縱橫天下--資料製作篇，資策會。（相當易讀的入門書）
2.鄧武原，1996：你也可以設計Home Page，旗標。（易讀，而且有蠻豐富的例子及說明）
3.藍鈴（譯），1996：用HTML設計你的Home Page，基峰資訊。（由簡入繁，內容豐富，但不失可讀性，可做為進階的輔助讀本）
4.Mullen, Robert, 1996: HTML Quick Reference.（中譯本「HTML指令速查 手冊」，基峰資訊）（記載所有的HTML指令及說明，是進階的工具書）
5.Shafran & Oliver, 1996: Creating Your Own Graphics. Que
Corporation.（說明如何利用PaintShop Pro 影像處理軟體製作各種實用而美觀的圖片及動畫，是一本寫得非常通順、淺顯，但又很實用的書；作者對網路的特性認知正確）
附件一：
[html]
[HEAD][TITLE]圖書館通訊20[/TITLE][/HEAD]
[body bgcolor="#ffaa00" text="#0000ff" vlink="#00ff00" ALINK="#0000ff"]
[body]
[font size=7 color=#bb00ff][b]國立中央大學圖書館通訊[/b][/font][p]
[h3]第二十期 目次[/h3][p]
[ul]
[h3]
[li]前言-------------洪秀雄---3[P]
[li]虛擬圖書館--------------洪秀雄---4[P]
[li] 圖書館萬維網「展示與教育訓練」設計過程說明-----洪秀雄---13[P]
[li]期刊目次檢索系統------林麗芳---16[P]
[dl]
[DT][li]心靈饗宴[P]
[dd]中大賞花（樹）情報----------陳芷瑛---17[P]
[DT][li]會議記錄[P]
[dd] 圖書館八十四學年度第三次館務會議85.7.4-----李芙蓉記錄---18[P]
[/dl]
[li]圖書館大事紀85.6.1-85.8.31-----李芙蓉---23[P]
[li]圖書館外觀近況----洪秀雄---30 [p]
[li]開放時間-------------31
[/ul]
[/h3]
[h3]中華民國八十五年十月十日出版 [/h3][P]
[/body]
[/html]
附件二：
[html]
[HEAD][TITLE]圖書館通訊[/TITLE][/HEAD]
[body bgcolor="#ffaa00" text="#0000ff" vlink="#00ff00" ALINK="#0000ff"]
[body]
[center]
[h3][b] 本館開放時間 （國訂假日除外）[/b][/h3][p]
[h4]
[table border=2 cellpadding=4 cellspacing=4 VALIGN=TOP]
[tr]
[td valign=top]參考光碟區
[td valign=top]週一至週五 上午八時至下午八時[br]
週六 上午八時至十一時四十五分
[tr]
[td valign=top]借還書
[td valign=top]週一至週五 上午八時至下午九時[br]
週六 上午八時至下午五時
[tr]
[td valign=top]視聽資料室
[td valign=top]週一至週五 上午八時三十分至下午四時三十分[br]
週六 上午八時三十分至十一時五十分
[tr]
[td valign=top]期刊、參考書[br]圖書閱覽[br]採開架式
[td valign=top]週一至週日 上午八時至下午十時五十分
[tr]
[td valign=top]舊館自修[br]閱覽室
[td valign=top]週一至週日 全天開放
[/td][/tr][/table][/center]
[h4][center][a href="news20a.htm"]回本主題[/a][/center][/h4]
[/body]
[/html]
附件三：
[HTML]
[HEAD]
[TITLE]圖書館外觀近況[/TITLE][/HEAD]
[body bgcolor="#ffff00" text="#0000ff" vlink="#00ff00" ]
[body]
[center]
Number of slides:6[p]
[table border=0]
[tr]
[td][img src="../librimg/libr02.jpg" height=100 border=0][/a]
[td][img src="../librimg/libr03.jpg" height=100 border=0][/a]
[td][img src="../librimg/libr04.jpg" height=100 border=0][/a]
[tr]
[td][img src="../librimg/libr05.jpg" height=100 border=0][/a]
[td][img src="../librimg/libr06.jpg" height=100 border=0][/a]
[td][img src="../librimg/libr07.jpg" height=100 border=0][/a]
[/table]
[/body]
[/html]
附件四：
[HTML]
[HEAD]
[TITLE]圖書館外觀近況[/TITLE][/HEAD]
[body]
[center]
Number of slides:6[p]
[table border=0]
[tr]
[td][a href="../librimg/libr02.jpg"]
[img src="../librimg/libr02.jpg" height=100 border=0][/a]
[td][a href="../librimg/libr03.jpg"]
[img src="../librimg/libr03.jpg" height=100 border=0][/a]
[td][a href="../librimg/libr04.jpg"]
[img src="../librimg/libr04.jpg" height=100 border=0][/a]
[tr]
[td][a href="../librimg/libr05.jpg"]
[img src="../librimg/libr05.jpg" height=100 border=0][/a]
[td][a href="../librimg/libr06.jpg"]
[img src="../librimg/libr06.jpg" height=100 border=0][/a]
[td][a href="../librimg/libr07.jpg"]
[img src="../librimg/libr07.jpg" height=100 border=0][/a]
[/table]
[h4][a href="news20a.htm"]回本主題[/a][/h4]
[/body]
[/html]
***註：凡所有括號<>皆改成[]，以便於上網說明。
