My Way To HTML

* This page is still being edited * 本頁尚未完成,只是部份。 *

來說個故事 :)

很久很久以前,我開始接觸到 internet/WWW 的世界。寫個網頁!? 聽起來很棒,but how?

...

Revolution | 演變過程

大一的時候,我希望有個好的工具能簡化我們寫 HTML 的力氣。 那陣子我寫了一個簡單的 macro processor (pmhtml), 可以吃 <macro MACRONAME MACROCONTENT> 這樣的東西。不過這樣的東西就某個角度來說有點麻煩: 一方面因為是 C Sourse,所以每次都要有可以 compile 的地方把 pmhtml 給 build 出來,再讓它去處理 HTML。這時開始尋找 已成為標準的東西。
記得那時首先看到的是 PHP ,加上跟 MH / ChenHsiu 一起寫網頁時 MH 做了一套 HTML Interface 的 library, 我本來也覺得不錯; 不過讓我放棄它的最大原因是系上的 WWW Server 始終不支援 PHP。 (註: 現在已經支援了)。
那時我們一起合作的網頁有幾個,一開始是畢輔室的網頁,這算是我 跟 PHP 接觸的開始。做出來的網頁是以 MH 的 style (or say templete) 為主,而其中很多要重複定義的地方則是 pmhtml 發揮長處之處。 那時靠著 VIM 的強大跟 pmhtml,我們很快的把網頁完成了; (註:後來 ChenHsiu 有把該網頁全部重寫成非常好看的 CSS Version。 pmhtml 則沒再使用於該網站了(吧?))
第二個大網頁是 NCREE 的網站,那是一天之內熬夜拼出來的,PHP 的經驗 來自之前寫畢輔室的網站,不過這次多了很多新東西; 真是受益匪淺,像留言板、中英對照、MAP、... 很多經驗都是那時累積的。

由於以前堅持要寫 Best viewed with Any Browser 的網頁,可是技術又不成 熟,(所謂技術,包括我自己的經驗及實際 HTML 環境的方便與否) 所以看起來都很醜;從大二到大四,我的個人網頁也就一直是那樣沒動。

大四時一方面是想把 Mozilla Language pack 的網頁做完整 (之前是只有一個 List 並產生 install script 的簡單 python cgi),加上對 CSS 比較了解了: 靠著 CSS 的幫忙,我可以在不靠太多工具的情況下把 HTML content 跟 style 分開來。 所以, SOP(Site of piaip) 就這樣產生了。以今日的眼光來看 或許還是不怎麼樣,不過那時算是過渡時期。後來學到 CSS Layout without table 的技巧,就是現在看到的形態。

下一個版本會怎樣? 雖然還沒動工,不過大致的方向已經決定了: 下次會改用更標準的 standard、更 flexible、但門檻也更高: 我決定改用 XML/XHTML+XSLT 這算是徹底解決所有問題的形式。 有關的資訊請至 W3schools 查詢。 這是我覺得最棒的關於 W3C Standards 的入門網站。 若是 XML 相關技術,還可以看看 zvon

分析起來,我的網頁有幾個時期:

Piaip's Web
這是最早的時期。已經不可考了。
Piaip's Web+
Piaip's Advanced Web
這是 pmhtml 的全盛時期。
Site of piaip (SOP)
這是使用 Python scripts 的時期。 使用 SOP 的 code 的網頁主要有 SOP 本身,Mozilla:Localization 跟一片 presentation CDROM (:P)
piaip@csie.org (piaip Webring, code name 'pacdo')
這是 Server-Side Include (shtml) 加 CSS 的時期。使用 pacdo code 的網頁有 csie.org, piaip@csie.org, piaip@ntucsie(前sop)
W3C CoreStyleSheets
2003 以後,對於不是要架構整個網站的場合 (如一份文件, 可說是取決於要不要有 navigation menu/sidebar 啦) ,我喜歡用 W3C CoreStyle 來處理 (範例)。 我寫了些 JavaScript 跟 template 來加強,可下載 tarball: corestyle.tgz

My Policy | 我對 HTML 的想法

第一,我還是覺得, HTML Source 要 Human Readable。 看原始碼時一堆 <font> 跟 <td> 是非常煩的事情。 而且,我希望能 online 用任意 editor 編輯而不會一定要裝某些軟體 才能編輯。 很多人編輯是這樣的流程; 用 Windows Frontpage 改, 改完上傳到 UNIX 機器,... 所以要有 Frontpage(要錢)跟 ftp 軟體。 我則是只要有 telnet 就可以改我的網頁了。

然後,對於展現的效果, 我覺得應該是對任何瀏覽器 "Browsable",就是說能看到資料啦! (因為很多時候用 lynx 之類的 text browser 看網頁,或是一些古老機器 上無法使用新版 browser 時這是很重要的。 越好的網站越應該注意這點。) 我也知道要寫成對 any browser 顯示一致是非常難的事情,所以我說 "Browsable" ,就是說該顯示的都要顯示出來。其實如果你的 HTML 是 Human Readable 的話、把資料與 Style 分開的話,這樣並不難。

再來我希望盡量 Follow w3c 的 Standard,包括 HTML, CSS, ...。 Microsoft 自己發明的奇怪 tag 最好不要用。 不過有時像 marquee 那些東西,就算你用了,在一般的 browser 上只是看不到效果,不過 資料還是會顯示出來,這就還勉強可以接受(也就是上面提的原則).

對於展現效果,目前我完整的 Policy 是: Browsable on any browser, best fit on HTML4/CSS2 Browser, not-so-bad on IE.
什麼 browser 來應該都可以看到內容,然後支援標準 HTML4 / CSS2 的瀏覽器應該可以看到最好的內容 (目前我以 Gecko engine ,也就 是 Mozilla/Netscape 一族為標準), 再來雖然 IE 對標準支援不好, 不過別忘了 IE 用戶真的很多,所以我會盡量讓 IE 看起來 "還不錯". 也就是說,如果某個用法在 CSS2/HTML4 是正確的、但 IE 上會錯的很慘, 那我會考慮少用,像 list item counter。 不過像 body 的 border ,TD 的 on hover,dashed border... 這些東西(just for style)我就照用。

認 UserAgent 這種事(像有些網頁會偷看 UserAgent 然後說這個網頁是 for IE only 之類) 可以不做就別做,除非你的網頁只跟某些 browser 有關,像我寫 Mozilla 安裝 language pack 的部份這樣做就合理 (因為用非 Mozilla 來裝時只會失敗),不過一般的網頁也這樣玩只會令人厭煩。

網頁 load 的時間應該不要太久。 我自己是在用 56k modem。 你覺得 現在寬頻到處都有? 不過連國外還是不快呀,而且很多地方的頻寬還是 沒很大。 不管怎樣,我不喜歡要 load 太久的網頁。

對於重複出現的 HTML 部份,像 header、footer、sidebar ,像這個網頁 的左列選單那些東西,我的想法是這樣:

最早似乎是 frame 不錯
這可以真正解決重複的問題。 不過 frame 常常 調起來不好調,以前的 frame 更是一團糟、lynx 看不了,很容易有相容上的問題; 我看過有文章提了很多理由。 總之,我也不想用。
那用 JavaScript 來產生呢?
其實這個 idea 還不錯,不過為了讓 不支援 JavaScript 或關掉 JavaScript 的browser 也能用,建議不要。
自己寫 macro processor,使用自訂的 tag?
我以前試過,不過用自己寫的 tag 會讓 VIM 之類無法 syntax highlight,而且 browser 直接看會看不懂,稍差。
用 PHP 產生 HTML?
不是每個地方都有 PHP 的喔
純粹只用 include html
這是我現在的做法。我把 style 之類的重複資訊用 CSS 來解決,而 sidebar/header 則獨立寫成 html 檔案,所以 vim 會 syntax highlight。 再來,各個 html 則只要 include 進來就好。 怎麼 include? Server-Side Include 的 shtml 有 <!--#include file="header.html" --> 這樣的語法, PHP 有 include "header.html"; ASP 也有類似的東西。 我的意思是, include 而非function call 之類的產生方式雖然限制較多, 但比較好移植。 那如果你的 website 什麼都沒有呢? 我用 python 寫了簡單的 SHTML 語法的 parser 可以做同樣的事。
到目前為止,我覺得這是最好的方式。

My Suggestio | 我對寫好網頁的建議

常有人問我應該怎麼寫好網頁? 或許有人覺得我的網頁並不好, 我不否認很多網頁都比我的更 fancy、更炫,不過我想提的是基於 我前面的 Policy 之下的一些建議。
Do not use WYSIWYG editors as Frontpage.
第一條,別用那些你不知道它亂加了什麼 code 的 HTML 編輯器。 Frontpage 我覺得很糟,Dreamweaver 可能是稍好,不過我個人是一律不用。 請自己 key in。 說真的,這不會比用那些東西慢多少,事實上對我來說是 快多了。
Content is the most important
做網頁,內容才是最重要的。要開始前, 多花點時間想如何分配頁面,要放哪些內容。除非是 作業需要,不然那些只寫了「我是誰」、「我唸哪些學校」 、...的網頁已經太多了,別再增加無意義的網頁了吧。
Use CSS instead of HTML tags to style.
傳統的 HTML 有很多 tag 可以用來製作效果,像顏色、 字型、大小... 等等。 不過把這些東西給內容混在一起 又不易讀又難改,TAG 的屬性名稱還頗不統一; CSS 好多了, 所以請用 CSS 來設定。 像我現在的網頁,幾乎都以 div, span, dl, ol, ul, li, a, h[1-4], ... 這幾組就夠了。 font/color 很久沒用了,table/tr/td 超少見, ...
Use CSS to layout your page instead of HTML <table>.
現在的網頁大部份都有過多無意義的 table,因為歷史因素, 在 CSS 出來前 TABLE 幾乎是 layout (or say, 定位) 最好的方式。 我以前也這樣用。不過既然現在已經有 CSS 了... 請用 CSS 吧。 TABLE 不是不能用,只是不應該被拿來亂用。 我現在只在真正要表列時才用 table。
Do not use images just for button effect
圖片跟 TABLE 一樣都屬於被濫用的東西。 IMAGE 當然有它存在的必要,不過很多網頁只是為了 製造按鈕按下去或鏈結變色效果就用 JavaScript 跟 image 弄了一堆圖。其實這些用 css 都可以做到。 請記得, 你的 CSS+HTML 再怎麼複雜,都比擺張圖來的好。 簡單計算,假定我有 10 個 button,每個用 1024 byte 的圖 (這在button image 中已經是很小囉),就要 10240 byte; 有 onMouseOver 效果的要 double。 可是, 10240 byte 如果是 HTML 可以傳多少東西! 一般 button 大約 10 byte 以內就可以儲存它要顯示的文字了,所以是 100 byte, CSS 假定設字型、顏色、border、hover... 1024 byte 也很夠吧! 所以,平均資料量只有 1/10 以內。
不使用圖片 button 的另一個理由是,這樣無法線上改。 每次都要找你的 image editor 出來,不是很麻煩嗎? 而且也不能縮放。
Keep your page's loading time short
網頁別太大,造成載入時間太久。 我想,以 33k modem 的 modem 為例,大約是 3~4 kb/sec 的傳送速率。 假定 10 秒是合理的傳輸時間,那一個頁面所有內容總載入時間不應該大於 35kb。 35 kb 就是 35000 bytes。 事實上以這邊的網頁來說, HTML 平均在 5kb 左右,CSS 也是 5k。所以.. 其實 35k 是很多的。 不過如果你用了一堆無意義的圖片、TABLE tag,又用些爛 editor, 很容易就爆了。當然,上面這些數字其實只是算個例子,50k/100k 的 html 也不少,不過要內容真的很多才有意義; 如果你塞的都是 無意義的 "Microsoft Generated" tag或一堆圖,那就會載入很久且沒內容。
Try your page on Gecko* lynx, then IE.
網頁過不過 HTML/CSS Validation 隨便你,不過除非 你的網頁有特殊目的,不然最好 lynx (text mode browser), Gecko* (如 Mozilla/Netscape 6), IE 看起來都不會太糟。