本篇作為第二篇，我們不談太深入的技術，我們用很基本的方式談什麼是 html。

網站系統可說是現在最多學子與新人想要入門的一個領域，
這個原本屬於新興的領域，這幾年來也累積許多年的知識與 pattern ，
在有限的環境（stateless）與有限的伺服器端、瀏覽器資源下，
成為許多人進入程式的一塊入門鐵板(?)。

這個系列希望能夠就網站系統設計幾個門檻著手，
這是設定給初心者作為學習，給同好們作為回顧，

重新認識有關網站系統的每個環節與認識。
ok ，接下來我們將正式進入技術主題，建構網頁系統的基本元素。

一般而言談到網站系統(website)，如果有學過網頁設計的話，
大家一定都會先想到，先寫"網頁" (web page)，

像是 J2EE ， hello world 教學都會先寫個 JSP ，
php 、 rails 等，也幾乎都是這樣。

網頁基本上都是由一頁一頁的頁面組成的，
有時候沒有實際的跳頁動作，但我們其實也是不斷的跟伺服器進行 Request，

每次 Request 的單位是一個網址，回傳的是一個特定的內容，
而這些內容有很大以上都是純文字。

而今天我們要聊得，就是這些純文字中的骨幹，也就是 html 。

html 在中文裡面有一個過去聽起來很炫，但現在其實已經沒有太大意義的中文名字，
叫「超文本標籤語言」。(HyperText Markup Language)

根據筆者的學習經驗，如果要介紹名詞可以把這篇文章寫得很豐富，
這邊一個 html ，那邊一個 hyperlink ，
最後再一一列舉 html tag 跟他們的用途，

這篇文章大概就可以輕鬆破萬字。

不過這些坊間的書都有，我們不需要重造輪子，
筆者要介紹得是筆者身為資深前端開發工程師，純手工打造網站 html 時的心中模型。

對我們而言， html 在元素上其實是相當單純的。

在我們進入 html 教學之前，因為我們每篇文章都會有夾帶範例跟說明，
我們必須先教你如何執行一個 html。

您可以將代表 html 的文字(字串)，存成副檔名為 .html 的檔案，
就可以在檔案管理員裡面雙擊檔案直接使用瀏覽器開啟。

或是透過 jsfiddle 等線上服務測試。

舉例，如果您將以下文字存成 html ，您將可以看到一個清單：

		<title>清單範例</title>
	
	
		<ul>
			<li>我是清單項目1</li>
			<li>我是清單項目2</li>
			<li>我是清單項目3</li>
		</ul>
	

您可以在 jsfiddle 上線上編輯與瀏覽，
如 http://jsfiddle.net/Pdhrk/1/

而以下這個範例

		<title>表格範例</title>
	
	
		<table border="1">
			<tr>
				<td>表格(0,0)</td>
				<td>表格(1,0)</td>
			</tr>
			<tr>
				<td>表格(0,1)</td>
				<td>表格(1,1)</td>
			</tr>	
			<tr>
				<td>表格(0,2)</td>
				<td>表格(1,2)</td>
			</tr>
		</table>
	

則會呈現一個表格。

您可以試著在這裡是著修改清單項目的文字並執行作為練習：
http://jsfiddle.net/hwBW4/1/

讓我們繼續介紹 html 吧！

＠標籤

在前面的介紹中我們使用幾個網頁元素作為說明，
首先我會看到 html/head/title/table/tr/td/ul/li 等元素。

這些都是所謂”標籤”（或稱標籤）。

在 html 中，以 "<" 開頭並且以 ">" 結尾的稱之為標籤(Tag) ，
並且有起始標籤與結束標籤，如 "<div>" 是起始標籤， "</div>" 是結束標籤。

也有一些標籤(tag) 是自己結尾的，像是 <img /> 就是同時是起始標籤也是結尾標籤。

標籤(tag) 是可以巢狀的使用，如
<div> <img src="" /> </div>
就是由 div 包覆的一個圖片(image) 標籤。

所以當您聽到"寫 html tag "、"寫個 div 裡面包 table "，
其實就是在描述 tag 與 tag 之間的關係，而這種關係與所謂的 XML 基本是很雷同的。
（但瀏覽器對 html 容錯性比 xml reader 還寬鬆許多，所以還是有一些些差別。
當然也有個標準叫做 xhtml ，就是要求使用者以標準 xml 規格來寫 html，但那不在目前的討論範圍內。）

每個標籤都有他對應的功能與意義，也有預設的樣式，
像是表格就會呈現出一行一行的格線，並且將資料以行列顯示。

＠屬性

由於需要的資料不一樣，所以每個 tag 都會定義他們需要的屬性，

屬性需置放在開始標籤內，以 (屬性名稱)="(屬性值)" 的方式宣告，
以最常見的 img （圖片）與 a （超連結 ）兩個標籤而言，

可能 img 就會有以下基本屬性（包含但不限於）
<img src="圖片網址" alt="替代文字"
title="圖片標題" border="0" width="100" height="100" />

其中 img 屬性的部份，有

src ：圖片網址，
alt ：圖片無法顯示時的替代文字
title： 作為滑鼠指標移過去時顯示的圖片介紹，

border 、 width 、 height 則是作為樣式設定的一部分。
（註：此處僅作為屬性說明，我們更推薦使用 style 屬性
來進行 css 樣式設定，會在之後的主題介紹。）

而 a 的屬性，則可能有
<a href="http://www.google.com.tw" target="_blank">Google 首頁</>

href ：超連結網址，點擊後會開啟的網頁。
target：開啟在哪個窗口，如果沒有給這個屬性，就會進行原頁跳轉，
如果設定 _blank ，則會開新頁面。

當然，您可能會好奇，既然屬性是使用 "" 去表示，
那如果值的部份含有 " 的話，該怎麼處理呢？

這個部份容我們先賣個關子，在之後的討論中就會提到囉。;)

如果你想瞭解其他的標籤與對應的範例，請參考以下頁面，在此不一一贅述。
http://www.htmldog.com/reference/htmltags/

這些屬性與標籤的組合，大大地決定了一個網頁會有什麼內容，

有人說，網頁的骨就是 html，選擇用什麼樣的 html tag 與資料組合你的網頁，
就決定你的網頁有什麼樣的內容。

而雖然對不瞭解的人而言，網頁的語法可能看起來像是亂碼，
但當你熟悉之後，其實這就像是一種人類使用的語言，
用某個嚴謹的規則去描述一個世界，而 html 就像是網路世界的"輕"小說。(笑)

＠ 外貿協會之 html 做出來的東西並不好看？

html 的預設外表其實蠻單調無趣的，事實上在大多時候我們會透過技巧，
來將 html 的預設樣式清空 （css-reset），因為每個瀏覽器的樣式不一。

所以 html 和他呈現出來的長相往往沒有直接關係，
網頁的外表，更多是由我們下一個章節要介紹的 CSS 來決定。

那醜醜的 html ，為什麼我們還要用他？

我們並不是為了撰寫無趣的文字小說給讀得懂得網頁設計師自 high ，
雖然有時我們的確會在註解裡面放一些只有工程師才會看到的梗。（笑）

我們最希望的還是有豐富畫面去吸引使用者與我們一起互動！

那我們為什麼還要寫 html，不直接寫 css 呢？

因為 css 並無法獨立存在成為畫面，你可以把它想像成是素顏的女生，
雖然化妝術可以說世上最強易容術，但總是要有基底才能夠裝扮他。

如果你的 html 架構設計得好，這個"化妝"的過程就會很容易，
反之亦然，至於如何設計好得 html 結構，
等到我們談到 css 所謂的 box model (箱型模型）時，我們會再回頭檢視。

＠回顧

今天的文章介紹了標籤與屬性，最後我要重新介紹，
幾個我在設計網頁時常用的重點標籤與註解。

＠常用樣式標籤

h1:用來表示網頁中比較重要的大標題項目（如呈現在畫面內容中的標題等）
ul, li:清單式的資料
table : 表格式的資料（至少需搭配 tr , td 等 tag 使用）
a : 超連結
img: 圖像標籤
div: 區塊，用來作為網頁區塊的標籤，非常常用，
是網頁樣板（layout）排版中非常常見的元素。常見於大區塊的排列設計。
p:段落，用來呈現一段一段的文字
span:非超連結且非段落的一般文字，適合使用這個標籤。
br :斷行標籤，但基本上應該避免使用。（透過段落與寬度設定達成適當地換行。）

＠還有一些用來進行操作與輸入的標籤：

form :將其內容的資料欄位集合成一個單位送出
textarea：多行文字輸入專用
input :依照 type 屬性分為 text/password/button/radio/checkbox ，非常多功能的標籤
select:下拉式選單（需配合 option tag 使用）

＠另外還有一些現在還不會介紹到，但之後也會陸續出現的標籤與觀念

title:網頁標題
meta: 網頁的基礎屬性設定
link:可用來載入 CSS 用的標籤
style:用來設定 css 樣式的標籤（跟 link 的差別在於主要不是讀檔）
iframe:用來載入其他網頁作為子畫面用的標籤
script:用來載入或執行 JavaScript 的標籤

其實雖然網頁標籤仔細一看很多，非常多，
但其實透過以上有限的集合就可以做出很多豐富有趣的事情囉！

筆者認為不見得需要瞭解每一個 tag 對應的意義，
隨著你涉入網頁世界的深入後，自然會瞭解每個 tag 的意義。

像筆者也是寫了一兩年之後才知道 fieldset 這個標籤，
在視覺上的有趣之處，先從這些下手慢慢學習就夠了。

當然有許多觀念我們沒有辦法在第一堂課就寫完，
像是 charset （編碼），doctype 等等觀念，

這些也不適合在一開始就說明，開頭重要得是「體驗」，
這些我們都會在之後陸續再回頭討論。

--
在這裡寫些紀錄好了，今天的文章幾乎有 80% 都是上下班在國光客運上寫得，
還因為這樣暈車暈得七暈八素，所以今天的文章其實發得蠻勉強的。XD

這樣每天一邊忙碌的工作一邊搾出時間寫文章，其實品質可能沒有很好，
但當天將預定好得主題寫出來的感覺，其實還是很想鼓勵自己去進行。:)

或許我可以事先寫好 30篇文章然後一一貼出，或是找自己曾經寫過得文章進行重整，
但既然參加了鐵人賽，就要以挑戰自己每天整理文章與構思文章架構的方向前進囉！

我志在參加，不在得獎。:D

本來這篇要教 WAMP 如何安裝的，不過後來幾經思考決定先以 JS Fiddle 作為討論媒介，
我們將會把 WAMP 安裝教學的部份挪到第四天的表單與五天的動態網頁。

我會努力寫完他的！