訪客留言簿

星期五, 1月 26, 2007

給 blog 新手的簡短說明(一)

前言

Blog ,國內一般翻作「部落格」,簡單來說就是個人網頁日誌(雖然也有人拿來當作商業平台,或是共筆平台。),功能依各服務商所提供的而有所不同。

好用的部落格服務提供商有很多,糟糕的部落格服務提供商也很多,總之就我個人收集來的情報,大概是推 Blogger樂多XuitePixnetWordPress 這五家國人比較常用的。

要學會寫部落格,基本上半點網頁相關語言都用不上。以新版 Blogger 來說,模版樣式可以用點選的;版面樣式也可以用點擊新增刪減元素,或是用滑鼠拖拉方式移動元素位置;就連在撰寫文章時,也會自動幫你換行,也有便利的工具列可以使用,幾乎不需要自己手動輸入任何網頁語言。

不過,如果你想要更進一步,打造有自己特色的網頁的話,那就需要認識以下四種觀念: HTML 、 CSS 、 JavaScript 以及 Blog Hack 。

JavaScript 跟 Blog Hack 我還不熟,所以就暫且不提。本文章就先來講解 HTML 跟 CSS 。注意,以下內容並非遵照標準來敘述的,請當作參考就好。

HTML

基本上 HTML 在坊間隨便找,就能找到一堆書了,不過筆者還是在此先簡單說明必要的部分好了,其它進階(或者該說是多餘的)的部分就留給各位自行取經了。

HTML ,全名 Hyper Text Mark-up Language (超文字標記語言) ,是一種用以描述網頁文件中的元素 (element) 其代表的意義為何用的。比如說碰上一個段落,我們就會用「 p 」這個元素來代表一個段落,實際寫的時候則是如下所表示:

<p>這是一個段落</p>

HTML 就是利用這種元素的起始標籤 (Start tag) 跟結束標籤 (End tag) 包夾住內文,來表示出一個有意義的資料。不合規範的無意義資料,就是沒有用元素的標籤包住的內文,這種是不應該出現在一份網頁文件中的,請注意。

接著我要跳過一些雜七雜八的觀念,直接告訴各位常用的元素有哪些,以及它們的功能為何。

  1. html - 表示這是一份網頁文件用的,放在最外層,但在 DOCTYPE 之下。
  2. head - 表示文件的標頭資訊(在此)用的,裡面夾有 title 跟 meta 等的元素及資料。
  3. body - 表示文件的內容(在此)用的,裡面夾有下述的元素。
  4. div - 表示一個區塊 (block) 層級的元素用的,幾乎不具有任何樣式在。
  5. span - 表示一個行內 (inline) 層級的元素用的,幾乎不具有任何樣式在。
  6. p - 表示一個段落用的,會與前後文各保持一行的外邊距。是個區塊元素。
  7. hn - n 為 1 到 6 的數值,表示標頭用的,要在各段落間下一個標題時很方便。是個區塊元素。
  8. blockquote - 引用,當要引用他人文章時很方便。是個區塊元素。
  9. ol - 有序列表,就是會有 1 2 3 這樣排下來的列表,裡面會包 li 。列表型的區塊元素。
  10. ul - 無序列表,就是只會顯示符號這樣排下來的列表,裡面會包 li 。列表型的區塊元素。
  11. em - 斜體強調字。行內元素。
  12. b - 粗體強調字。行內元素。
  13. a - 連結,最常見的就是 <a href="網址">超連結文字</a> 這種超連結形式。行內元素。
  14. img - 圖片,是單獨出現的元素,沒有結束標籤,一般寫成 <img src="圖片位置"><img src="圖片位置" /> 。行內元素。
  15. br - 強制斷行,是單獨出現的元素,沒有結束標籤,一般寫成 <br><br />

區塊與行內元素的差別,在於前者會佔據整行的空間,後者只佔據該內文所擁有的空間這樣,實際用一遍就會知道了。

接著要說明的是 HTML 的巢狀架構,也就是一個元素中包著一個元素的這種情形。正如上面那張表所列的一樣, html 中包了 head 跟 body , head 中包了 title 跟 meta , body 中包了更多的元素,而且各元素皆是對稱而不是交錯存在的,我想說的就是這種東西。

但是在這裡要注意,有些元素內是不能包某些元素的。基本規則就是,區塊可以包任何行內元素,但是區塊能包含區塊的,上述之中,只有 div 、 ul 、 ol 跟 blockquote 而已(希望我沒記錯),然後行內可以包行內。

至於 table 這表格元素,因為太麻煩了,所以就不介紹了(逃)。其它不懂的,還請自行 Google 或 Yahoo 一下。 ^^;

總之在此所介紹的 HTML ,都是為了方便你使用下述的 CSS 而介紹的幾個簡單觀念而已。更詳細的請參考以下三個網站:

CSS

CSS ,全名 Cascading Style Sheets (串接樣式表) 。用途?比如說你看我的部落格右上方的「分類」這一項目,它底下的各個項目,其實是區塊元素,但是我卻利用了 CSS ,將它們改變成了行內元素。也就是說, CSS 具有改變外觀的功能在。(就連你看到的這個網頁的排版跟字體大小等的,也是靠 CSS 來設計的。)

CSS 請參考以下三個網站:

本處只說明 CSS 在 HTML 文件中的「內嵌」用法而已。剩下兩種用法請自行參考上述網站練習。

就如同上面 HTML 所提到的, head 是表示標頭資訊用的,而標頭資訊中,便包含了 CSS 相關的資訊。

CSS 的內嵌用法,就是把 style 元素寫在 head 中,如下所表示這樣:

<html>
<head>
<style type="text/css">
<!--
排版樣式區內容
-->
</style>

</head>
<body>
本文區內容
</body>
</html>

寫 CSS 的幾個基本觀念,分別如下:

  • 注意各元素的名稱
  • 注意各元素的 id 及 class 屬性
  • 注意各元素間的父子關係(即誰包含誰的關係)
  • 注意各元素間的前後關係(即誰在誰的後面的關係)

CSS 的選擇子

比如說 "div#id p > a[href="xxx.html"]+span.class:hover { font-size:12px }" 中的 "div#id p > a[href="xxx.html"]+span.class:hover" 就是 CSS 的選擇子(Selector)的部分。細述如下。

  • p 的部分 - 就是一般最常用的選擇子表示法「元素(element)選擇子」。支援度最廣。
  • > 的部分 - 就是「子選擇器(descendant selectors)」,表示一種父子階層關係,也就是誰包住誰的關係。 IE6 以下不支援,但是 IE7 支援了,很討厭,這對使用 CSS hack 手法寫網頁的人來說是項困擾。
  • a[href="xxx.html"] 的部分 - 就是「屬性(attribute)選擇子」,可以針對屬性選擇子再進一步準確指定有含特定屬性及值的元素。 IE6 以下不支援, IE7 不清楚。
  • + 的部分 - 這是用來表示元素間的前後關係用的,也就是「 a 的下一個是 span 」這種感覺。可以接很多個 + ,但是要注意若都是用同元素名稱(如 td )的話,會發生前面的干擾到後面的情況。 IE6 以下不支援, IE7 不清楚。
  • div#id 的部分 - 帶 id 屬性的元素名稱的選擇子。支援度廣。
  • span.class 的部分 - 帶 class 屬性的元素名稱的選擇子。支援度廣。
  • :hover 的部分 - 即「擬態類別選取器」,這提供網頁動態變化效果。比如說 hover 就是滑鼠移上時的效果, focus 就是游標移上時的效果, first-child 則是針對第一個子元素做出效果等等的。 IE6 以下對 hover 的支援不完善,對 focus 跟 first-child 則是不支援, IE7 不清楚。

關於 HTML 跟 CSS 中的註解文字

有時候用原始碼編輯模式,寫多了資料的話,總是會有看起來很痛苦的感覺吧?這時適當地加入註解文字,會有助於閱讀這份文件。

HTML 的註解文字表示方式是「 <! 註解文字 > 」或「 <!-- 註解文字 --> 」, CSS 的則是「 /* 註解文字 */ 」這樣。

注意,註解文字並不會出現在網頁中,只會顯示在原始碼中而已。

結語

那麼給部落客看的簡單 HTML 跟 CSS 觀念講座就到此暫時結束。各位如果有什麼意見的話,還請多多利用底下的「張貼意見」超連結來回覆。

2 comments:

路人點 提到...

有 h7 嗎?

wini 提到...

> 路人點
就網路上找到的 W3C HTML 4.01 文件來看,並沒有 h7 ,抱歉我不該寫上去的,感謝指正。不過 h7 應該是存在的,只是跟 h6 差別不大的樣子,至於現存的瀏覽器有沒有支援我就不清楚了。

http://www.w3.org/TR/html401/struct/global.html

 

本站著作(不包含圖片、影音以及回應留言)係採用 Creative Commons 姓名標示-非商業性-相同方式分享 2.5 台灣 (中華民國) 授權條款授權