半手工打造符合 w3c 規範的網頁

徒步/腳踏車/開車/直升機/太空梭?

手工打造 html 實在並不困難, 因為

  1. 不需要從零開始, 可以拿現成的網頁來改;
  2. 不需要學會太複雜的東西, 就已經可以滿足最基本的需求;
  3. 有 tidy (下詳) 可以幫忙把手工打造的半調子網頁轉換成符合 w3c 規範的網頁。

另一方面, 學手工打造 html, 比學許多軟體操作都更有價值, 因為 檔案格式的壽命遠比應用軟體的壽命要長。 請用 "html tutorial w3c" 搜尋 html 講義, 例如找到 Dave Raggett 的短文 Getting started with HTML。 另外, 這裡 有一個常用及次常用標籤列表 (含實驗區) 可以參考。

如果比較喜歡 「所見即所得」 的工具, 可以考慮採用 nvu 與 bluefish 甚至是 OpenOffice.org。 這些自由軟體有幾個共同的優點: 製作出來的網頁較符合 w3c 規範, 跨作業平臺, 具有原始碼, 零授權費。

版權專屬軟體裡面, Adobe 的 DreamWeaver 所製作的網頁相對來說比較符合標準。 至於 MS Frontpage 與 MS Word 製作出來的網頁, 穿插了許多不標準的東西, 傷害網站所有人甚大。 網頁是分享資訊/散佈理念/宣傳行銷的利器, 我們當然希望越多人看越好。 買了微軟的 Frontpage 及 Adobe 的 Flash 來替我們製作網頁, 它們產生的網頁卻要求訪客一定要安裝某某軟體某某版本以上才能瀏覽, 這就像是僱用微軟及 Adobe 擋在家門前, 替我們過濾 它們不喜歡 的訪客, 這... 花錢事小; 產生反效果事大, 不僅流失客戶, 甚至還害訪客隱私走光。 詳見 「何苦砸錢拋售到手的點閱率?」 及 「Adobe Flash 用戶: 請笑一個給世界看, 您上鏡頭了!」

到隔壁街的菜市場買菜, 怎麼去比較方便? 走路, 騎腳踏車, 騎機車, 開車, 駕直升機, 還是開太空梭? 如果有人不顧場合與實用考量, 一味 (是 "一味" 沒錯; 不是 "一昧") 堅持採用最新最炫最搶眼的工具, 卻忘記甚至傷害了原始目的, 這, 才是盲目。 可惜現在市面上有太多的網頁製作書籍, 一味強調花俏, 卻因而提高障礙, 阻擋訪客, 降低搜尋引擎曝光率。 這正如韓愈所說: 「句讀之不知, 惑之不解, 小學而大遺」 啊! 詳見 「金玉其表之下 -- 從行銷的角度看網頁設計」

用 w3c 的 tidy 整修你的網頁

制定網頁標準的, 不是微軟, 也不是 Adobe 或被 Adobe 併購的 Macromedia, 而是一個非營利組織 w3c (World Wide Web Consortium)。 它的創辦人正是 WWW 的發明人 Tim Berners-Lee; 它的會員包含上述各公司, 及其他四百多個公司與非營利組織。 新的 html 標準 (例如 html 4.0 與 xhtml 1.0) 都是由 w3c 制定。 新的 html 標準? 為什麼我們很少聽到不同版本 html 不相容的問題? 因為 w3c 在制定新標準時, 非常重視如何為軟體保留 向上相容 forward compatibility 與 向下相容 backward compatibility 的空間。 所以好的網頁伺服器, 搭配上好的瀏覽器, 與正確的網頁, 不論是用新瀏覽看舊網頁, 或是用舊瀏覽器看新網頁, 應該都不會有大問題。 健康的資訊世界, 應該長這樣才對。 不同廠商, 甚至是同一廠商的不同版本軟體, 如果會因而造成網頁無法開啟, 或其他嚴重的操作問題, 很可能就是其中有廠商侵犯 資訊人權, 想要綁架消費者的文件。

w3c 的 Dave Raggett 寫了一支小程式 tidy, 可以將不太整齊的半調子網頁整理成符合 w3c 規範的標準網頁。

  1. 用 lynx 下載前一篇講義提到的 樣版網頁 或是你自製的網頁, 然後用 tidy 整理: tidy template.html > a.html 再用 lynx 檢視。
  2. 在 lynx 裡面按 \ 檢視原始碼, 或按 e 編輯。 怪怪的嗎? 請把 範例設定檔 剪貼到 ~/.tidy 設定檔裡面。
  3. 用新的設定再執行一次: tidy template.html -config ~/.tidy > a.html 並檢視結果。 如果還是亂碼, 就要先把所有語言設定清除掉: unset $(env | grep zh_TW | sed 's/=.*//'), 然後再試一次。 注意看看有沒有 warnings 或 errors。 奇怪, 不是已經用 output redirection 把 standard output 導向到檔案裡面去了嗎? 怎麼還會印在螢幕上呢? 原來這部分的輸出叫做 standard error, 專門放警告與錯誤訊息。
  4. 查看 tidy 的手冊: man tidy 發現如果設定環境變數 HTML_TIDY 就不必每次指定設定檔。 先手動測試一次: export HTML_TIDY=~/.tidy 並重新執行: tidy template.html > a.html 如果確實沒有亂碼產生, 可以把 export 那一句放到 .bashrc 裡面去, 這樣以後每次登入都會自動設定。

如果您的作業系統是 Windows, 也可以從 tidy 首頁 Windows 版; 或下載 具有圖形介面的 tidy。

最後貼上 「通過 w3c xhtml 1.0 認證」 標籤, 也就是在網頁下方加上一段:

	<a href = "http://validator.w3.org/check/referer">
	<img src = "vxhtml10.png"
	alt= "[(力求維持) 符合 xhtml 1.0]" /></a>

並且記得把標籤檔抓回你的 public_html 目錄底下。 然後用瀏覽器看自己的網頁, 並點進標籤裡面去。 應該看到通過檢驗的綠底標題。

隨時確保自己的網頁大致正確

請安裝 firefox 的 tidy plugin。 安裝完畢, 下次重新進入 firefox 時, 右下角會出現一個小標籤, 可能是綠色的勾, 黃色的驚嘆號, 或是紅色的叉。 這分別表示使用 tidy 整理該網頁時, 沒有任何錯誤或警告訊息, 有一些警告訊息, 或是有一些錯誤訊息。 如此可以很方便地知道自己的網頁是否經常維持大致正確。 當然, 「用 tidy 處理時沒有任何錯誤或警告訊息」 並不等於符合 w3c 規範 -- 處理過的網頁才會符合 w3c 規範。 至於符合 w3c 規範, 也不能保證完全沒有障礙; 不過如果你的網頁是用手工打造的, 平時沒有用太複雜奇怪的 tags, 大概也就非常接近無障礙了。

不要急著學習/製作花俏的網頁, 目前請以文件內容為重 -- 金玉其表底下的東西 比較重要。

作業

作業: 製作一個簡單的網頁, 形式上必須能夠用 lynx 或 w3c 瀏覽, 並符合 w3c 規範, 貼上 「通過 w3c 認證」 圖樣; 內容必須包含表格/圖片/內部超連結/外部超連結 至少各一。 善用 yubnub 的 g, wp, gim 等等指令; 要找什麼題目呢? 對演化, 太空, 旅遊,... 等等知性題目有興趣的讀者, 不妨到這些網站逛逛尋找靈感: Tree of Life, NASA planets, google map。 當然要做一點更有本土味或個人特色的話, 也可以做一頁 「高雄市推薦小吃列表」, 或 「大雄的風景照集錦」 等等。