iT邦幫忙

DAY 2
6

網站系統規劃實務系列 第 2

網站系統規劃 - 基本網頁元素介紹,HTML

本篇作為第二篇,我們不談太深入的技術,我們用很基本的方式談什麼是 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 安裝教學的部份挪到第四天的表單與五天的動態網頁。

我會努力寫完他的!


上一篇
網站系統規劃 - 綱要說明,網站系統概論
下一篇
網站系統規劃 - 基本網頁元素介紹, CSS
系列文
網站系統規劃實務27
0
timloo
iT邦研究生 2 級 ‧ 2012-09-26 00:38:00

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

我上下班是通火車,單趟40分鐘左右。
我只有小平板,7吋的ASUS NEXUS 7,沒有3G上網功能,只有wifi,
沒法在火車上寫,寫了沒法上傳。

搞到暈車,實在太令人佩服了,讚,我年紀大了,沒法這樣搞,年輕時太放鬆可能有關。

去年參賽時,也有一天,在除錯時,搞到56分,趕快上傳,結果我的當地時間還沒12點,
server時間己經12點了,這樣也犯規了。有時候,內容自己都覺得冷門,還是會想要弄清楚一些道理,不管有沒有人看。

範例程式真得要挑內容簡單,意義深遠,時間內跑得出來為佳。

javascript其實蠻容易測不出期待的結果。

還有28天啊,第二天暈車,第三天要調整回來哦,中秋節要小心別吃壞肚子,我因為老家在台東,
老爸特淮我不用回東部了。狀況少一些。回老婆南部的娘家就好。

------------------------
還是覺得暈車,這種狀況蠻少見的,比不能上網還怪。
或是筆電掉到馬桶。

來試試手寫輸入法,用平板投稿試試,同事說,ANDROID上也可有dosbox, 可以玩dos哦,
暈

tony1223 iT邦新手 2 級 ‧ 2012-09-26 00:51:55 檢舉

我是桃園台北通勤啦,已經好幾年了,
今天大概花在寫文章約70分鐘吧,來回車程。XD

平常是不會暈車,今天是急著想再有限的時間裡面,
寫完原本設定的主題,所以有點用力過度,不過還好,
現在已經慢慢恢復了,發現暈車就有稍微放鬆一下。:)

我剛也是擔心伺服器時間有誤差,所以才在五十分左右就先把完稿交上來了。:D

0
ted99tw
iT邦高手 1 級 ‧ 2012-09-26 06:41:22

Tony大的30篇未來一定要集結成列表,好讓小囉囉們按時膜拜....

讚讚讚

0
fillano
iT邦超人 1 級 ‧ 2012-09-26 09:42:04

讚讚讚

膜拜先...

tony1223 iT邦新手 2 級 ‧ 2012-09-26 10:39:19 檢舉

費大一起加油吧! XD

我要留言

立即登入留言