Atelier Wini: 給 blog 新手的簡短說明（一）

前言

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

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

要學會寫部落格，基本上半點網頁相關語言都用不上。以新版 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) 包夾住內文，來表示出一個有意義的資料。不合規範的無意義資料，就是沒有用元素的標籤包住的內文，這種是不應該出現在一份網頁文件中的，請注意。

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

html - 表示這是一份網頁文件用的，放在最外層，但在 DOCTYPE 之下。
head - 表示文件的標頭資訊（在此）用的，裡面夾有 title 跟 meta 等的元素及資料。
body - 表示文件的內容（在此）用的，裡面夾有下述的元素。
div - 表示一個區塊 (block) 層級的元素用的，幾乎不具有任何樣式在。
span - 表示一個行內 (inline) 層級的元素用的，幾乎不具有任何樣式在。
p - 表示一個段落用的，會與前後文各保持一行的外邊距。是個區塊元素。
hn - n 為 1 到 6 的數值，表示標頭用的，要在各段落間下一個標題時很方便。是個區塊元素。
blockquote - 引用，當要引用他人文章時很方便。是個區塊元素。
ol - 有序列表，就是會有 1 2 3 這樣排下來的列表，裡面會包 li 。列表型的區塊元素。
ul - 無序列表，就是只會顯示符號這樣排下來的列表，裡面會包 li 。列表型的區塊元素。
em - 斜體強調字。行內元素。
b - 粗體強調字。行內元素。
a - 連結，最常見的就是 <a href="網址">超連結文字</a> 這種超連結形式。行內元素。
img - 圖片，是單獨出現的元素，沒有結束標籤，一般寫成 <img src="圖片位置"> 或 <img src="圖片位置" /> 。行內元素。
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 觀念講座就到此暫時結束。各位如果有什麼意見的話，還請多多利用底下的「張貼意見」超連結來回覆。

Atelier Wini

星期五, 1月 26, 2007

給 blog 新手的簡短說明（一）

前言

HTML

CSS

CSS 的選擇子

關於 HTML 跟 CSS 中的註解文字

結語

2 則留言: