HTML – 文字文字都是字

奇怪,文字就文字,有什麼好談的,還不就是打打字,你用無蝦米,我用新注音,糟一點的也許還會來個火星文;不過在HTML裡面,文字可以說是大有文章的呢!畢竟大部分的網站,還是透過文字內容來傳達網站本身的存在意義, 尤其對於一些視障的使用者而言,圖片與排版根本就是個屁,所以HTML關於文字方面的相關標籤,更顯得重要。

早些年的時候,我預言網站下一波的發展是設計與藝術當道;不過前幾年開始,我就改變論調,因為我發現只有設計卻不懂得標準化實在是場噩夢,放眼望去,真可以說是噩夢滿天下。DW CS3出來,不過我看網頁標準化這種事情還是沒辦法依賴軟體來進行,太多網頁設計師,可以說是DW拉拉神,按鈕按來按去,東西拉來拉去,閉著眼都知道要按哪裡,可是切到程式碼檢視畫面,問他為什麼沒事給我在那邊加上<div>,居然還一臉無辜的說:什麼?我有加那個嗎?

連拿啾啾槌敲他都覺得提不起勁。

網頁,回歸到每個動作的最原始初衷,當初大家都曾經藐視過HTML,本人也幹過這種事,沒辦法,因為那個助教實在是太爛;不過深入了解之後,你會發現,HTML是一切網頁標準化的基礎,HTML寫不好,你的CSS也不會好。

文字,是大部份網頁最主要的內容,在HTML當中,有很多具備排版觀念的標籤,只不過當初誰也沒告訴我們有這麼好用的東西,深入了解每個標籤的用法,你才能夠更加精準的傳達文字的意義。

斷行及空白

我決定先講斷行和空白的問題。其實最好的方式,就是程式碼不要去做無意義的斷行和空白,表面看沒事,但是往往會在你想不到的地方給你出問題,瀏覽器,也是很會記恨的;更糟的是,有問題的IE無法Debug,可以Debug的FF又沒有問題,這真是人間煉獄啊~如果非要使用空白,下面幾種會是你的選擇:

  • ASCII 空白鍵 ()
  • ASCII tab鍵 ()
  • ASCII form feed ()
  • Zero-width space (​)

結構化與語意化

我們一再強調,要讓你的HTML看起來有意義,而不是為了達到頁面排版效果而胡亂使用標籤,下面幾個,是一些具備特殊意義的標籤,如果你的文章當中有需要用到它們,請不吝於使用。

EM
強調
STRONG
加重強調
CITE
引用或是參照其他的外部資料
DFN
附加在文件上面,關於特殊詞彙的定義或是說明
CODE
標記程式碼的區塊
SAMP
指出程式執行的範例內容
KBD
使用者自行輸入的內容
VAR
程式裡面的變數
ABBR
縮寫字,例如:WWW、 HTTP、URL…等等
ACRONYM
首字縮寫,例如:WOW(魔獸世界…XD) 
 

<em>及<strong>都是用於強調文字的標籤,前者會產生斜線的效果,後者會出現粗體的效果,網頁設計師如果只是純粹想要使用斜線或是粗體的文字效果,而非為了語意上的強調,就不應該使用<em>或是<strong>,而應該要使用CSS來做樣式設定,否則只是使用<em>或<strong>來達到視覺上的效果,容易造成語意上的混淆,因為這兩個標籤,在聲音瀏覽器當中會用不同的聲音來朗讀。

另外,ABBR與ACRONYM的存在意義,主要是為了能夠正確的說明縮寫字所代表的意義,因為西方語系當中,有分為首字縮寫(例如:FBI、CSI、WOW)以及簡寫(例如:inc、ex、et al、etc)。正確的把這樣的文字型態標記出來,可以更有效的提供瀏覽器工具相關的資訊,例如拼字檢查、聲音瀏覽器、翻譯系統、或是搜尋引擎索引;較為現實面的好處,就是搜尋引擎比較可以正確的搜尋到你網站上的資料。

另外要注意的是,不管是首字縮寫還是簡寫,有時在發音上會有所不同,例如FBI、CSI、BBC、CNN等縮寫,就是屬於一個字母一個字母分開念的方式;不過SQL這種字,就會當成一個單字來念,因此最好的方式,是在樣式表當中特別去指定某些縮寫字的發音方式。

<BLOCKQUOTE>和<Q>

<blackquote>經常用於引用文章上面,尤其是長篇文章內容,比如說一段新聞等,由於它的預設外觀是縮排,因此也有很多網頁設計師把它當成排版工具一樣亂用,基本上,這也是不正確的作法,樣式歸樣式,語意歸語意,千萬要分清楚。網路上,常常會將其他網站的內容引用來引用去,為了更加清楚的標記資料來源,往往會需要附加引用網址讓使用者參考,因此,我們可以在<blackquote>當中加上cite的屬性,來加上資料來源網址,使用方式如下:

<BLOCKQUOTE cite="http://www.mycom.com/tolkien/twotowers.html">
<P>They went in single file, running like hounds on a strong scent,
and an eager light was in their eyes. Nearly due west the broad
swath of the marching Orcs tramped its ugly slot; the sweet grass
of Rohan had been bruised and blackened as they passed.</P>
</BLOCKQUOTE>

注意,<blackquote>本身屬於區塊元件,並非屬於行內元件,通常用在較長的引用內容當中;如果你只是要標註一段引用的內容,可以使用<q>或是<cite>等行內元件。

使用<q>標籤的時候,可以加上lang屬性,這樣一來,引用的文字就會依照不同語言習慣幫你加上特別的引用符號(不過IE6像是中風一樣,毫無反應,使用FireFox瀏覽器看,就可以看到聰明的標記方式喔!),所以可以不用再特別打上單引號或是雙引號來標註引文,下面的例子就是使用的範例:

John said, <Q lang="en-us">I saw Lucy at lunch, she told me
<Q lang="en-us">Mary wants you
to get some ice cream on your way home.</Q> I think I will get
some at Ben and Jerry's, on Gloucester Road.</Q>

結果會出現:

John said, “I saw Lucy at lunch, she told me ‘Mary wants you
to get some ice cream on your way home.’ I think I will get some
at Ben and Jerry’s, on Gloucester Road.”

嘿嘿!很聰明吧!至於有哪些語言可以選擇,我這邊將常用的語言縮寫列舉出來:fr(法文)、de(德文)、it (義大利文)、 nl(還是德文)、el(希臘文)、es(西班牙文)、pt(波蘭文)、ar(阿拉伯文)、he(希伯來文)、ru(俄文)、zh(中文)、ja(日文)、hi(北印度文)、 ur(晤魯都語←這…這是啥?)、還有sa(梵文)。如果你覺得我列舉出來的語言不敷使用,煩請參考ISO 639.的語系列表

下標字<SUB>和上標字<SUP>

這兩個標籤,使用方式很簡單,只要依照下列的範例,就可以了解。

H<sub>2</sub>O
E = mc<sup>2</sup>
<SPAN lang="fr">M<sup>lle</sup> Dupont</SPAN>

段落與斷行

寫文章,大多需要分段落,在HTML標籤裏面,有著專門分段的標籤,就是我們常用的<p>。用<p>所夾起來的內容,會形成一個完整的段落,段落當中,有幾個部份會具備特殊的預設模式:

  • 空白的處理模式
  • 斷行以及斷字的方式
  • 對齊方式
  • 連字號
  • 段落與段落之間的格式化

<p>標籤本身會形成一個區塊,但是注意<p>標籤當中不能包含任何區塊元件(例如:div或是blockquote),當然也不能包含<p>標籤自己(也就是說,巢狀型態的段落是不被允許的)。

斷行又是啥?基本上,斷行多半是為了對內容作更好的視覺排版,因此視覺上雖然看到換行的效果,但就段落而言,並沒有改變,也就是說,在同一個段落當中,讓內容產生換行的效果就是斷行的目的,通常我們會使用<br />來對文章強制換行,要注意的是,<br />當中有個clear的屬性,搭配img可以強化它的排版效果(不過img要有設定對齊屬性才看得出來喔),不過比較建議的是透過CSS來做設定。基本上,clear的屬性有下列四種:

  • none: 下一行會正常出現,這是預設值
  • left:下一行會出現在任何最接近的靠左浮動物件正下方
  • right:下一行會出現在任何最接近的靠右浮動物件正下方
  • all:下一行會出現在任何最接近的浮動物件正下方

連字號

連字號有兩種,一種是普通的連字號,大家都知道,就是「-」,或者可以寫成- 或是 -,普通的連字號在瀏覽器上面,若是遇到要換行,就會直接在連字符號上面斷字;另外一種就是隱性的連字號(­),一但顯示了以後,看起來跟「-」沒有兩樣,但是和普通連字號不同的地方是,它的功能是「建議」(而非強制)瀏覽器該在哪裡斷字。也就是說,在瀏覽器上面,使用隱性的連字號,將會遵守下面的斷字規則:如果正好斷在連字號上,就會在該行的最後顯示連字號;如果沒有斷字,就不會在字當中出現連字符號。

好像有點難懂,沒關係,講個例子就知道了。

比如說我在unbelievable這個單字上面加上隱性連字號:un­­believable,告訴瀏覽器,如果要斷字的話,就在un後面斷字;於是在瀏覽器上面檢視的時候,如果沒有需要斷字,就會直接顯示unbelievable(注意,不會出現連字符號「-」喔!),但是如果螢幕不夠寬而必須要換行的時候,就會出現un- believable的換行效果。嗯…這真的是個非常好用的效果,不過要用在英文內容當中比較有效果(XD)。

<PRE>預先格式化文字

簡單來講,就是你在原始碼當中打什麼,怎麼排版,呈現的時候就會完整的顯示,不管你是用了多少空白,基本上,要在文章當中顯示程式碼的時候很好用。不過要特別注意的是,雖然你自己在打字的時候,使用tab鍵來縮排,因為設定的關係,tab鍵好像也可以只縮兩個空白甚至一個空白;但是,實際上在轉換的時候,一個tab鍵就等於8個空白,這樣你就該知道為什麼我們強烈建議不要在<pre>標籤當中使用tab鍵了吧!tab兩次,文章就不知道跑到哪裡去了….囧rz。

接著,我們就要來談談,如何正確的修改網頁文件。

網路如同一個出版媒體,某種程度來看,它是很有隱私的,但是從程式面的角度來看,其實只要釋放在網路上的資料,都沒有所謂的安全性可言;就像日前無名小站文章密碼鎖失效,導致私密文章外洩的事件,任何人只要面對網路,就不應該對網路資料的安全隱密性有過高的期待,如果你真的笨到覺得文章上了密碼鎖就萬事放心的話,我也真的為你感到悲哀….

因為網路不安全、也不隱密,所以任何你要發表放在網路上的文章都必須三思而後行,除了要避免涉及誹謗、不實指控等問題外,還必須注意到,任何關於文章內容的重大修改與內容增減都必須清楚的註明,才不至於造成讀者的困惑。HTML當然也提供了許多相關的語法,以下就是這些常用的相關與法介紹:

<INS>與<DEL>

這兩個標籤,經常用於版本更新時,內容異動的註記。正確的使用這兩個標籤,可以讓讀者對於文章修改更新的部份一目了然,也能夠方便讀者比對增刪前與增刪後兩者之間的內容差異。下面的語法,就是企業徵募人才人數從三人異動為五人的正確寫法:
<P>本次職缺需求數為:<DEL>3</DEL><INS>5</INS> 人。</P>

注意,<DEL>和<INS>都不能夠包含任何的區塊元件,例如<div>等標籤,像<INS><DIV>…布拉布拉布拉…</DIV></INS>這種寫法是錯誤的。使用這兩個標籤的時候,瀏覽器會自動標註特殊的樣式,例如<DEL>可能就會以刪除號的樣式呈現,或是乾脆不被呈現;如果可以,最好位這兩個標籤加上時間屬性和說明,方便其他人了解文章來來龍去脈,而不是片斷性的斷章取義,舉個例來說,你可以這樣寫:

<INS datetime="YYYY-MM-DDThh:mm:ssTZD"
cite="引用來源網址">
...增加的內容....
</INS>

這裡面的YYYY-MM-DDThh:mm:ssTZD是標準的時間格式,也就是datetime這個屬性所必須使用的格式;你可以參考W3C當中對於日期與時間格式表示式的詳細說明,以下是簡單的列表:

  • YYYY = 四位數的西元記年方式
  • MM = 兩位數的月份((01=一月,依此類推)
  • DD = 兩位數的日期格式 (01 到 31)
  • hh = 兩位數的24小時表示符號(00 到 23,不允許使用pm/am這種十二小時的標記法)
  • mm = 兩位數的分(00 到 59)
  • ss = 兩位數的秒(00 到 59)
  • s = 一位數以上表示更精細的秒
  • TZD = 時區

當然,如果你覺得網址的方式不喜歡,你也可以使用title來另加說明,不一定要提供網址來源。

網際網路寫文章,就如同出版寫作一般,需要嚴謹與正確,尤其當你寫的不是囈語而是重要文章的時候;因為網際網路的變動性太大,任何人都可以依照自己的心情或是視自己的有利情況來刪改文章內容,而平台服務商,也多不可能保存每個文章的修改版本,因此如果使用不負責任的態度寫文章,就往往會出現許多紛爭與誤會。當然,很多規定都不是硬性的枷鎖與限制,而是由使用者自行決定要不要遵守這樣的撰文準則,你可以選擇不使用,也可以選擇使用它,這都可以視情況而定,但我只是覺得,太多台灣的網路使用者都需要好好了解一下,在網路上寫文章批評任何你看了不爽的事情,其實還是有很多細節是需要去好好注意的,否則與人吵架是小事,到時被人一狀告上法院才衰小。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s