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

需要多高級的工具?

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

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

另一方面, 學手工打造 html, 比學許多軟體操作都更有價值, 因為 檔案格式的壽命遠比應用軟體的壽命要長。 請用 "html tutorial w3c" 搜尋 html 講義, 例如找到 Dave Raggett 的短文 Getting started with HTML (沒辦法, 用 "html 教學 w3c" 找到一堆香港網站, 而且他們的網站也並不符合規範) 另外, 這裡 有一個常用及次常用標籤列表 (含實驗區) 可以參考。

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

版權專屬軟體裡面, Adobe 的 DreamWeaver 所製作的網頁相對符合標準。 至於 MS Frontpage 與 MS Word 製作出來的網頁, 穿插了許多不標準的東西, 傷害網站所有人甚大。 網頁是分享資訊/散佈理念/宣傳行銷的利器, 我們當然希望越多人看越好。 買了微軟的 Frontpage 及 Adobe 的 Flash 來替我們製作網頁, 它們產生的網頁卻要求訪客一定要安裝某某軟體某某版本以上才能瀏覽, 這就像是僱用微軟及 Adobe 擋在家門前, 替我們過濾 它們不喜歡 的訪客, 這... 花錢事小; 產生反效果事大。 希望讀者可以理解我們激動與哭笑不得的原因; 這並不是盲目地 「仇視微軟」 或仇視任何一家廠商。

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

用 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 規範的標準網頁。 以下從第三步之後, 皆在 cygwin 的 bash 視窗內工作。

  1. 確認 Windows 裡已安裝 cygwin: 桌面上應該有 bash 與 x-server 兩個 icons。
  2. 到搜集 cygwin 套件的 交大 或 其他映射站臺 下載 lftp 套件 (檔名內不要有 src; 最新版本), 放在 c:\tmp 底下 (或其他簡單, 不含中文的路徑下)
  3. 把檔案搬進 cygwin 的目錄, 並驗證下載正確: 
            cd /tmp
        mv /cygdrive/c/tmp/lftp-*.tar.bz2 .
        md5sum lfTAB # 與網站上的 md5.sum 對照
  4. 檢視檔案裡面有什麼東西: tar tjf lftp-* | less 或 bunzip < lftp-* | tar tf - | less
  5. 移到 根目錄 root directory: cd / 並安裝: tar xjf lftp-* 或 bunzip < lftp-* | tar xf -
  6. 再回到 /tmp 底下 (以免抓到的檔案亂放)。 現在可以用 lftp 下載了: lftp ftp://..../cygwin/release/ 以下的指令都是給 lftp 看的: 有什麼東西? ls | less 進入 tidy 子目錄: cd tidy 有什麼東西? ls | less 抓檔案: get tiTAB (一次的 completion 可能不夠) 另外幾個常用的指令分別是:
    • put 上傳
    • mget 與 mput 一次下載或上傳多個檔案
    • help 求助
    • quit 離開
  7. 不要離開 lftp; 另外開一個 bash 視窗, 同樣用 tar 解壓縮以安裝 tidy。 記得要先切換到根目錄下!
  8. 用 lynx 下載前一篇講義提到的 樣版網頁 或是你自製的網頁, 然後用 tidy 整理: tidy template.html > a.html 再用 lynx 檢視。
  9. 在 lynx 裡面按 \ 檢視原始碼, 或按 e 編輯。 怪怪的嗎? 請將以下內容剪貼到 /tmp/tidy.cfg 裡面: 
            tidy-mark: yes
        markup: yes
        wrap: 72
        tab-size: 8
        indent: auto
        indent-spaces: 2
        output-xhtml: yes
        doctype: loose
        char-encoding: raw      # 主要是這句
        clean: yes
        logical-emphasis: yes
  10. 用新的設定再執行一次: tidy -config /tmp/tidy.cfg template.html > a.html 並檢視結果。 注意看看有沒有 warnings 或 errors。 奇怪, 不是已經用 output redirection 把 standard output 導向到檔案裡面去了嗎? 怎麼還會印在螢幕上呢? 原來這部分的輸出叫做 standard error, 專門放警告與錯誤訊息。

事實上從 tidy 首頁 還可以找到純 Windows 版 (不需要 cygwin 或 XLiveCD), 具有圖形介面的 tidy; Linux 上面也有已經編譯好的套件。

現在請到 Linux 伺服器上, 將你的網頁整理一下。 可以將 /tmp/tidy.cfg 改名為 .tidy 並放到家目錄底下, 這樣指令可以簡化為 tidy index.html > a.html 因為根據手冊, tidy 自動會去找 ~/.tidy 當做設定檔。 最後貼上 「通過 w3c xhtml 1.0 認證」 標籤, 也就是在網頁下方加上一段:

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

並且記得把標籤檔抓回你的 public_html 目錄底下。 然後用瀏覽器看自己的網頁, 並點進標籤裡面去。

w3c 的認證服務

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

請安裝 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。 當然要做一點更有本土味或個人特色的話, 也可以做一頁 「高雄市推薦小吃列表」, 或 「大雄的風景照集錦」 等等。