HTML 一般都不是問題(也有例外)。通常在顯示或功能上的問題來自於格式表 (stylesheet, CSS) 與 JavaScript 腳本語言用法不正確或不符標準。
如果語法錯誤,通常瀏覽器會「猜測」設計者的心思來顯示內容。但每個瀏覽器的行為都不同。而有些設計人往往編碼隨便,以為只要 IE 顯示正確他的原始碼就一定對,忽視了其它瀏覽器可能會有不同解釋。
而語法不符標準往往是因為設計者用了微軟專有的技術,而不是通用的標準。技術相容問題起源於 90 年代微軟與網景 (Netscape) 在爭奪市場時各打自己的技術,迫使設計師要學些奇怪的技巧讓網頁可以正確顯示。時代已過,這些瀏覽器(IE4 與 Netscape 4)加起來使用率只剩 <1%,而取而代之的 Firefox、Opera、IE 5.5+ 等都支援通用的資訊網標準。可惜的是,舊習慣從過去設計師或從未更新的教學資源散播到新一代設計師,使得許多網站還是照舊 90 年但現代已不適用的技術/技巧。
然而,甚麼是標準?誰定的?一般而言我們所指的標準是由全球資訊網協會 (W3C) 所定的 HTML 4.01、CSS 樣示、與 DOM (文件物件模型) 的技術規格書。W3C 是個與許多專家和公司(包括微軟)合作訂立與推行資訊網技術的組織。
在來講 HTML 與 CSS。我說 HTML 不是問題是因為在新的標準 (HTML 4.01) 中它只處理文件架構,與文件格式完全分開 (格式由 CSS 處理)。現在的 HTML 已沒有如 <font>、bgcolor、color 等排版格式的元素/屬性,只有如 <p> (段落)、<h1> (標題)、<address> (作者)、<li> (列表)等「語意」元素。(如果你現在用的教學站/書有教你用<font> 或 bgcolor 那你可以把它丟了)。
說來說去還是不懂,那舉個例子吧
過去你可能這樣寫:
代碼:
<b><font color="red">警告</font></b>
(粗體)(字體 顏色=紅色)紅字((*字體)(*粗體)
但現在你要用
代碼:
<strong style="color:red;">警告</strong>
(重強調 樣式="顏色:紅色")警告(*重強調)
沒甚麼不同,不過如果你要用好幾個這類格式呢?
代碼:
<head>
<style type="text/css">
strong { color: red; }
</strong>
</head>
:
<strong>警告</strong>
哇,太方便了,你只需要定義樣示一次就可以重覆用了
再一個範例:
代碼:
<head>
<style type="text/css">
.date { color: red; } /* 日期,紅字 */
.title { background-color: blue; color: white; } /* 標題,白字籃底 */
.username { font-style:italic; } /* 用戶名,斜體 */
</strong>
</head>
:
<table>
<tr><td class="title">我有問題</td><td class="username">珊珊</td><td class="date">10/10/99</td></tr>
:
</table>
哇,也可以這樣用呀。那如果要改格式呢?那改 <style></style> 內的東西「一次就夠了」!
還有呢,你可以把 <style></style> 內的東西放到一個文字檔(舉例叫 mystyle.css) 然後用
代碼:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
「老師,那是不是要改整個網站的格示只要改一個檔就好了?」
「對,注意你編碼不是寫越多就分數越多 oh。」
那我前面說過,HTML 與格式分開,那一些標籤(像 <strong>、<h1>)不本身就有預設格式?對也不對,舉例來說
代碼:
<style type="text/css">
ul.snav li { display: inline; } /* 包括在 <ul class="snav"> 的 <li> 都是以文字層顯示 */
</style>
:
<ul class="snav">
<!-- 以下全顯示在一行文字內 -->
<li><a>隱私權政策</a></li>
<li><a>服務條款</a></li>
<li><a>使用規範</a></li>
</ul>
(忘了說,以上這些觀念都是利用 CSS)
除了可以把任何元素設為文字層、區塊層、或表格的顯示模式 (display mode) 外,CSS 還可以:
- 設定背景圖片的位置與是否橫向或縱向重複
- 設定文字底線與頂線
- 設定各種元素的上下左右框格的顏色、線條、與粗細
- 字行與字行間,或段落與段落間的空格
- 隨意置放文字在任何地方(不用表格)
- 還有好多好多的進階功能
不過呢,除了學那些可以做甚麼外,還要學正確的設計觀念。要注意,你樣式越複雜出錯的機率就越高。你編碼寫的越亂,除錯就越困難,花的時間就越多。雖然 HTML 與 CSS 功能強,但它們基礎在於文件架構的邏輯,而你在設計時越有 discipline (紀律)越能發揮這些技術的潛能。
(抱歉沒能有時間解釋 JavaScript 與 DOM)