第一次就做出正確的網頁 (上)

操作與說明

如果我們告訴你, ape 經過某些處理之後, 會變成 ape.html, 你是否可以看出一些規則? 用 lynx 比較看看; 又用 mozilla 比較看看. 不要太在意換列出現的位置 -- 因為處理過程當中, 空格與換列這些東西會有增減. 請猜猜看如何製造各種視覺效果, 等一下就拿你的筆記檔來做實驗. (請老師不要給太多的提示.)

        cp note.txt note.html   # 把筆記檔複製一份, 叫它 note.html
        diff note.txt note.html # 比較一下這兩個檔案內容有無差別.
        md5sum note.txt note.html # 換一個方式確定兩個檔案內容沒有差別.
        lynx .                  # 用 lynx 在目前目錄下, 看看這兩個檔案.
        ...                     # 再用 mozilla 比較看看.

如果檔案名稱尾巴叫做 .html, 在 browsers 瀏覽器 (例如 lynx 與 mozilla 都是瀏覽器) 裡面看起來就很醜咧... 原來瀏覽器會根據 suffix 來決定如何顯示一個檔案: 遇到 txt 檔 (plain text, 也叫純文字檔) 就原封不動地顯示出來; 遇到 html 檔 (hyper-text markup language, 就是網頁檔啦) 則會自動重新安排版面. 不管你原來的檔有沒有空一列, 它都會把所有東西串在一起 -- 除非你用特殊的記號 (叫做 markup) 標示出新一段的開頭.

其實你也可以看 "未經處理的樣子" 啦 -- 在 lynx 裡面按 \ (這個 "倒斜線" 在很多場合都有 "不要擅自主張, 加以處理; 請原封不動地顯示" 的意思.) 在 mozilla 裡面選 "view 檢視" 底下的 "page source 本頁原始碼".

現在另外開一個終端機視窗 (例如 rxvt), 用 vim note.html 進入新的檔案, 開始實驗你的猜測. 先改一兩處就好. 如果你猜對的話, 插入特殊記號的時候 vim 會自動變色. 回到 lynx 下, 回到 note.html 這一頁, 按 ^R 重新整理, 看看效果是否如你所預測. 同樣地, 在 mozilla 下也按重新整理的按鈕.

手工打造堪用的網頁其實並不難.

不過手工打造的網頁很容易有一些小錯誤, 雖然瀏覽器有時可以猜出你的意思, 這樣的網頁品質並不好. 可以用 tidy 來幫我們將網頁修改至符合 w3c 的標準.

        tidy note.html          # 用 tidy "修理" note.html
        tidy note.html | less   # 慢慢看
        tidy -raw note.html     # 這樣才不會有一堆亂碼
        tidy -raw -i note.html  # indent 縮格 一下, 看起來比較漂亮
        tidy -raw -i note.html > a   # 好了, 將輸出存檔
        mv a note.html          # 更改檔名. 小心! 原檔會被取代掉!

你可以繼續手工修改 ape.html 不必理會 tidy 幫你加上的奇怪東西, 只修改你看得懂的部分就好. 改完之後一樣要經過 tidy 與 mv 兩個步驟, 用修改過的版本, 取代原來的檔案. 作業, 每次下過 tidy 產生新版的檔案 a 之後, 下 mv 取代舊版本的 note.html 之前, 請先下 diff a note.html 仔細觀察並解釋輸出結果的意義.

每次轉換檔案都要寫那麼複雜的 options, 有點麻煩 -- 而且還有很多有用的 options 我們還沒講咧! 我們來為 tidy 建一個 config 檔, 姑且叫它 tidy.cfg 吧, 裡面只放兩句話 (請向左靠, 最左邊不要留空白):

        char-encoding: raw
        indent: auto

Tidy 的手冊說, 如果你設定一個 environment variable 環境變數, 讓它指向我們剛才 (亂取名字) 的設定檔, 以後下指令就可以比較簡單一點了:

        tidy note.html          # 沒有用設定檔
        tidy -config ~/tidy.cfg note.html # 在 option 內指定設定檔
        tidy note.html          # 沒有用設定檔
        export HTML_TIDY=~/tidy.cfg       # 令環境變數 HTML_TIDY 指向設定檔
        echo $HTML_TIDY         # 檢查一下是不是真的多了 HTML_TIDY 這個東西
        env                     # 換一個方式檢查
        env | grep -i tidy      # 太多了, 我只對 tidy 有興趣
        tidy note.html          # 從此以後 (在這次 logout 之前)
        tidy note.html          # 就有使用設定檔的效果了, 除非...
        unset HTML_TIDY         # 把這個環境變數清除掉.
        echo $HTML_TIDY         檢查一下環境變數 HTML_TIDY 是不是真的不見了
        env | less              # 換一個方式檢查. (Q: 如何搜尋有沒有 "tidy" ?)
        tidy note.html          # 這樣又沒有用到設定檔了

態度與文化

新命令索引

mv, cp, diff, md5sum, tidy, env