Html Note

本網頁以打造無障礙閱讀為目標，可以用任何瀏覽器來觀看本網頁

XHTML摘要
名詞
一般觀念
大小寫
註解
HTML的基本標籤
好的標記與屬性
宣告所使用的HTML格式如下
meta的使用
link標籤的屬性
html標籤的屬性
body標籤的屬性
指定字型樣式
影像，色彩
與段落,區塊有關的標籤
form表單
anchor 超連結標籤
frame
工具的使用
參考書目
網路資源

XHTML摘要

XHTML(eXtensible HyperText Markup Language) 屬於web標準之一，是以 XML 技術為基礎的 HTML。
W3C 創始人 Tim Berners-Lee 說：「 XHTML將帶領現存的 Web 世界通往未來，它是網頁及網站製作者通往 XML 結構化資料的橋樑，其同時保留了使用 HTML 4.0 的瀏覽器的互通性」。
XHTML 1.0 規格是由 W3C 的 HTML 工作小組成員所共同製作完成。其中包括 CNET、HP、IBM、微軟、Philips 及昇陽（ Sun ）等知名廠商。
W3C 提供針對 HTML 及 XHTML 文件的驗證（ Valdidation ）的線上服務，也提供公開原始碼的程式 Tidy。這個軟體可以協助你將一般的HTML 4 文件轉換為 XHTML 文件，同時修正文件中的錯誤。
XHTML 的結構為doctype, html, head, body, and title 。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh_TW" xml:lang="zh_TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>Hello World</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>

<head>區間中最好依照此順序擺放1. meta 2.title 3.javascript程式碼，否則遇到utf-8的網頁時，IE會有亂碼或空白網頁的情形。
XHTML的元素與屬性都必須小寫，例如：<body>不可寫成<BODY>。
一般元素必須以開始標籤(start tag)及結束標籤(End tag)成對出現，不可省略結束標籤，例如<p> </p>，<li> </li>。
DOCTYPE宣告不屬於XHTML，故它沒有關閉標籤，其DTDs有 Strict, Transitional, Frameset 三種。
meta、img、br、hr等空元素（Empty Element）必須以 />結尾，例如 <hr />,<br />。
屬性值必須以雙引號或單引號圍起來，例如width=”120”，不可寫成width=120。
標籤屬性一定得有值，無值的屬性必須以屬性本身當值，如<input checked="checked" /> 。
img及br等元素，根據DTD的定義，必須包含在p或div等元素中。
不同元素的巢狀套用必須正確。
符合上述規則稱為"格式正確"(well-formed) 。
name屬性到了XHTML必須改為id。
XHTML增加了 Lang的屬性，如<div lang="no" xml:lang="no">Heia Norge!</div>。
所有的 <img> 標籤都要有個 alt 屬性，作為圖檔的替代文字。
所有行內標籤內都不能含有區塊標籤。
所有的 <style> 標籤都要有 type 屬性。
關於網頁上與樣式∕排版有關的標籤，如 <font>、<center> 等等都不該再使用，應改以 CSS 語法設定。

名詞

HTML(HyperText Markup Language,超文字標記語言)
ISP(Internet Service Provider,網際網路服務提供業者)
PP(Presence Provider,網頁存放提供業者)
bandwidth(頻寬)
overhead(專用資源)
WYSIWYG(What You See Is What You Get,所見即所得)
URL(Uniform Resource Locator,一致性資源定位器)
CLUT(Color LookUp Table,色彩查閱表格)
Leading(鉛條)：行距
Dithering(混色)：以8位元的256色來模擬其他的顏色
Mind Maps:1974年一位心理學家兼數學家Tony Buzan發明的一種筆記方法,用以描述非結構化的問題
SSI(Server-Side Includes,伺服器端含入功能):提供一個可含括(Includes)在html文件的控制指令，並能在伺服端(Server-Side)加以解析的功能。若要特別表示此檔案類型則其副檔名為shtml

一般觀念

網頁大小儘量在30K以內，較大的網頁最好也不要超過50K
html會忽略空白，故要用   來代表或用全形的空白
網站都有所謂的welcome page, 一般都以flash製作
當使用embed與object標籤時一定要指定width與height屬性來定義外掛模組所顯示的內容大小
首頁的主檔名常用index, default(以此命名則網址就不需打檔名)
首頁的副檔名htm, html, asp, php, js, ........
可利用表格來作出縮排效果

	縮排示範縮排示範縮排示範縮排
縮排示範縮排示範縮排示範縮排示範縮排

可利用表格來作出垂直線段

111

大小寫

html本身不分大小寫皆可,但為了朝XML方向前進的XHTML來說,還是全部用小寫好了
副檔名可為htm或html,且為了上linux主機,檔名最好不要有空白且以小寫命名

註解

HTML :

ASP : '

CSS : /* */

HTML的基本標籤

<html>......</html>

<head>......</head>

<title>......</title>

<body>......</body>

良好的標記與屬性

開頭的<與i之間不能有空白,等號前後也不要有空白,屬性以雙引號括起來，如 <img src="hello.gif">

宣告所使用的HTML格式如下(寫在<html>......</html>的上面)

HTML3.2： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 FINAL//EN">
HTML4.01： 1999年12月W3C(World Wide Web Consortium)發表HTML4.01中,建議以CSS來取代標籤font與body的指定色彩與字型的方法
- 嚴密型Strict：
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"
  "http://www.w3.org/TR/REC-HTML40/strict.dtd">
- 過渡型Transitional：
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/REC-HTML40/loose.dtd">
- 欄位型Frameset：
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 FINAL//EN"
  "http://www.w3.org/TR/REC-HTML40/frameset.dtd">
XHTML1.0： 2000年1月W3C(World Wide Web Consortium)發表XHTML
- 嚴密型Strict：
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 //EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 過渡型Transitional：
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 欄位型Frameset：
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 FINAL//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

meta的使用

供瀏覽器或搜尋引擎的"robot"或"spider"的代理程式查詢之用(通常寫在<head>......</head>裡面)

作者： <meta name="author" content="朱孝國" />
內容： <meta name="description" content="ASP/HTML筆記" />
關鍵字： <meta name="keywords" content="ASP, HTML, XHTML" />
文字編碼的類型為中文： <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
script的類型： <meta http-equiv="Content-Script-Type" content="text/javascript" />
style sheet的類型： <meta http-equiv="Content-Style-Type" content="text/css" />
等待指定的秒數後，讀取指定的網頁： <meta http-equiv=" refresh " content=" 6,URL=http://www.cyut.edu.tw/ " />
設定網頁失效的日期： <meta http-equiv="Expires" content="Wed, 07 Apr 2004 20:00:00 GMT ">
本頁面是否可以被索引，是否可以從本頁的連結繼續找出更多的文件。目前不是所有的robot都有實作此一功能，必要時須搭配網站根目錄的robots.txt，指明禁止讓robot訪問的網頁
- <meta name="robots" content="index,follow">
- <meta name="robots" content="noindex,follow">
- <meta name="robots" content="index,nofollow">
- <meta name="robots" content="noindex,nofollow">
若為utf-8的網頁，需注意meta的charset宣告要放在 title的前面，否則IE會出現一片空白的情形。
若為utf-8的網頁，需注意javascript code要放在 title的後面，否則IE可能會出現亂碼。
總而言之，若使用utf-8的網頁，<head>區間最好依照下列順序撰寫1. meta 2.title 3.javascript code 。

link標籤的屬性

指定加到我的最愛時的圖示樣式為：<link rel="shortcut icon" href="image/peterju.ico">

html標籤的屬性

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw" xml:lang="zh">
- XHTML的namespace： xmlns="http://www.w3.org/1999/xhtml"
- 指定撰寫的語言為中文： lang="zh-tw"
- xml撰寫的語言為中文： xml:lang="zh""

body標籤的屬性

指定前景顏色： text="#FFCC00"
指定背景顏色： bgcolor="#FFCC00"
指定背景圖案： background="back.gif"

指定字型樣式

粗體： <b></b>,<strong></strong> (粗體)
- 對於聽覺瀏覽器而言strong會發出較強的音
斜體： <i></i>,<em></em> (斜體)
- 對於聽覺瀏覽器而言em會發出較高的音
底線： <u>......</u> (底線)
標準： <tt>......</tt>r (標準)
刪除線： <s></s>,<strike></strike> ~~(刪除線)~~
上標： <sup>......</sup> ^(上標)
下標： <sub>......</sub> _(下標)

影像，色彩

影像是圖形:GIF,PNG(可做透明圖)
影像是照片:JPEG(漸層,縮小壓縮值55%尚可接受)
影像是動畫:GIF(只支援256色)
掃瞄的ＤＰＩ不要設太高，因為螢幕只有７２ＤＰＩ，就算用３００ＤＰＩ二者的顯示效果是一樣的
圖像加入alt的屬性,說明影像內容,如<img src="hello.gif" alt="graphic ofhello">
圖像加入width與height的屬性,讓瀏覽器在載入圖形前先顯示文字,且預留顯示圖形的位置,如<img src="hello.gif"alt="graphic of hello" width=110 height=120>
若網頁中有影像圖連結,考慮到盲人使用文字瀏覽器的習慣,如lynx,建議還要加入文字選單
因為無法完美的搭配不同檔案格式之間的色彩,因此jpeg的背景需搭配jpeg的前景,gif的背景需搭配gif的前景
網頁安全色彩(Web Safe Color)：8位元的256色，除去Mac與Windows相異的40色，平台共通的216色。
輪替影像(Roll Over Image)：滑鼠游標移動到影像時,影像會出現的變化, 一般時的狀態(UP),指向時的狀態(OVER)
MID 音樂檔案使用說明
- IE的方式： <bgsound src="test.mid" loop=3>
  1. bgsound為IE專用的指令，為背景播放的意思．【此指令在Netscap是無效的】
  2. loop為循環播放，數字表示次數，填入　infinite 或 -1 表一直重複
- Netscape的方式： <embed src="test.mid" autostart=true loop=true >
  1. embed為Netscape專用的指令，為呼叫外掛程式的意思．【此指令在IE3是無效的】
  2. autostart為自動播放ture或false(內定值)
  3. loop為循環播放ture或false(內定值)
  將以上兩種全加入就可以不管瀏覽者所用的是那一種瀏覽器了．

HTML4.0制訂的16色色票

色名	中文意義	16進位表示法
black	黑色	#000000
silver	銀色	#C0C0C0
gray	灰色	#808080
white	白色	#FFFFFF
maroon	棕色	#800000
red	紅色	#FF0000
purple	紫色	#800080
fuchsia	粉紅色	#FF00FF
green	綠色	#008000
lime	亮綠色	#00FF00
olive	橄欖色	#808000
yellow	黃色	#FFFF00
navy	深藍色	#000080
blue	藍色	#0000FF
teal	藍綠色	#008080
aqua	水藍色	#00FFFF

與段落,區塊有關的標籤

文字段落,後有空行

<p></p>

區塊標示,前後空行

區塊標示,前後無空行

form表單

form(設定表單範圍)

name/id	表單的名稱	<form name="login" id="login" method="post" action="newsedit.asp"> </form>
action	接收表單的程式
method	資料傳送的方式，有2種 post 與 get

name/id

表單的名稱

</form>

action

接收表單的程式

method

資料傳送的方式，有2種
post 與 get

input(建立表單欄位)

name/id	欄位的名稱		<form name="login" id="login" method="post" action="newsedit.asp"> 帳號：<input type="text" name="id" size=10 maxlength=10/> 密碼：<input type="password" name="pass" size=10 maxlength=10/> 　　　<input type="hidden" name="hiddenField" /> 　　　<input type="checkbox" name="checkbox" value="checkbox" /> 　　　<input type="radio" name="radiobutton" value="radiobutton" /> 　　　<input type="image" name="imagebutton" 　　　　src="image/go.gif" width="100" height="30"/> 　　　<input type="button" name="button" value="button" onclick="fun(s)"/> 　　　<input type="submit" name="submit" value="Submit" /> 　　　<input type="reset" name="reset" value="Reset" /> 　　　<input type="file" name="filename" /> </form> <form enctype="multipart/form-data"> 　　　<input type="file" name="filename" /> </form>
value	初值
size	顯示的字元寬度
maxlength	可輸入的字元寬度
onclick	按下button後會做的檢查
src	製作圖形按鈕所需的圖檔路徑
type	text password hidden checkbox radio image button sumit reset file	文字欄位密碼欄位隱藏欄位多選欄位單選欄位圖形按鈕一般按鈕送出按鈕重設按鈕附加檔案按鈕

textarea(多行輸入)

name/id	文字區域的名稱	<form name="login" id="login" method="post" action="newsedit.asp"> <textarea name="textarea" cols="20" rows="20" wrap="VIRTUAL"> 請發表各人意見 </textarea> </form>
rows	高度
cols	寬度
wrap	是否自動換行，常用的有 off, hard,virtual,physical

select(選單，預設為只可單選)

需搭配 option 標籤才可使用

name/id	選單的名稱	<select name="select" size="3" multiple > 　　　<option selected="selected">請點選...</option> 　　　<option value="1">電腦</option> 　　　<option value="2">羽毛球</option> 　　　<option value="3">桌球</option> 　　　<option value="4">看電影</option> </select>
multiple	宣告為可複選的選單
size	size=1時為下拉式選單 size>1時為選擇清單

anchor 超連結標籤 <a href=" 連結的網址 "> 連結的網頁名稱 </a>

本文超連結

設定跳躍點	<a name="chapter1"><a>
設定連結點	<a href="#chapter1">第一章<a>

各種URL

http	<a href="http://www.pchome.com.tw">pchome</a>	pchome
ftp	<a href="ftp://ftp.peterju.idv.tw">Peter Ju's FTP</a>	Peter Ju's FTP
email	<a href="mailto:peterju@pchome.com.tw">寄信給我</a>	寄信給我
telnet	<a href="telnet://bbs.kimo.com.tw">kimo BBS</a>	kimo BBS
gopher	<a href="gopher://gopher.edu.tw">教育部gopher系統</a>	教育部gopher系統
news	<a href="news:news.edu.tw">教育部news系統</a>	教育部news系統

超連結的視窗開啟方式

開新視窗	<a href="http://www.pchome.com.tw" title="網路家庭" target="_blank" >pchome</a>	pchome
本身開啟	<a href="http://www.pchome.com.tw" title="網路家庭" target="_parent" >pchome</a>	pchome
本身開啟	<a href="http://www.pchome.com.tw" title="網路家庭" target="_self" >pchome</a>	pchome
本身開啟	<a href="http://www.pchome.com.tw" title="網路家庭" target="_top" >pchome</a>	pchome

顯示滑鼠游標所在位置的說明

html碼	樣式
<a href="http://www.pchome.com.tw" title="網路家庭" >pchome</a>	pchome

Frame

遇到不支援Frame的瀏覽器時顯示的訊息：<noframes></noframes>
指定連結的Frame： <a href="content.htm" target="mainframe">
預設連結所指向的Frame：<base target="mainframe">

工具的使用

FireFox

FireFox較微軟的IE瀏覽器更能符合網頁標準，而FireFox擁有許多輔助Web設計的套件，因此FireFox成為Web設計者不可或缺的好幫手。
筆者常用的套件列表：ExtensionsList.html。
常用的套件：
- Firefox 擴充套件介紹
以下的套件介紹主要參考自Jedi的Firefox 與網頁設計。

Web設計相關套件介紹

Web Developer: Web開發者必備的工具。
Aardvark: 把滑鼠游標移到網頁組件上時，Aardvark 會用紅色框框標示出該組件的範圍，並在框框左下角以小標籤顯示該組件為何、其 class 或 id 又為何。這個時候透過鍵盤操作，還可以有一些額外的功能： W 可以讓該組件的範圍變寬而 N 則是變窄， Q 是離開 Aardvark 而 U 是還原最後一次操作， R 是刪除所選的組件而 I 則是刪除所有環繞著所選組件的其他組件然後 E 會刪除該組件的內容， B 是把組件內一律設為白底黑字而 C 都是隨機設定組件的底色， V 是檢視所選組件的原始碼，然後 D 則是移除任何該組件的固定寬度值。
ColorZilla: 用滑鼠在 Firefox 畫面左下角的滴管圖示上點一下，這時候滑鼠游標就會變成十字形（準星），然後當你把滑鼠游標移動到任何地方時， ColorZilla 就會顯示出游標所在位置的色彩資訊（包括 RGB HEX 值以及顏色代碼等）提示：在滴管圖示上按滑鼠右鍵，會發現很多東西喔……。
Document Map: 藉由網頁內的標題組件（也就是 h1, h2, h3, h4, h5 等），來建立所謂的「文件地圖」。使用 Document Map 的時候，要先從檢視選單裏叫出 Document Map 這個資訊方塊列，然後在左方的資訊方塊列中，就會按照網頁的結構層次，把所有的標題組件列出來。用滑鼠點一下被列出來的標題組件，瀏覽視窗中的位置也會跟著跳過去
Fangs: 把網頁模擬成純文字瀏覽器所會看到的樣子，所以當你特別專注於網頁親和力的話，這個工具可能會有些幫助。 (尚未支援FireFox 1.5)
HTML Validator: 隨時檢驗目前網頁是否為有效的 HTML ，並且以圖示顯示驗證結果，如果把滑鼠游標移到驗證結果圖示上，還會顯示更詳細的數據。 HTML Validator 除了驗證 HTML 之外，也能做一點簡單的親和力驗證，而且由於這個擴充套件係根據 HTML Tidy (HTML 美容程式) 所寫成的，所以它還兼具了幫你替網頁原始檔「整型美容」的功效
Live HTTP Headers: 直接監視伺服器傳來的 HTTP 標頭。因為有的時候，網頁設計師們會遭遇無法解決的奇怪問題，例如明明指定了語言為中文，可是頁面總是被當作英文開啟，許多這種問題，其實都來自於伺服器沒有正確組態所致，而這個擴充套件正可以幫助你釐清這種冤屈。
MeasureIt: 度量螢幕上各種東西的長度。在使用上也跟 ColorZilla 很像，首先就是以滑鼠點一下左下角的尺標圖示，這時候網頁的色彩會變淡，彷彿蓋上了一層薄紗，然後你可以用滑鼠任意畫出方框，而這個擴充套件則會告訴你這個方框的長度與寬度。
mozCC: Firefox 的右下角會出現辨識並顯示出網頁裏的創用 CC 授權圖示，如果你用滑鼠點擊這個圖示，就會出現一個視窗，告訴你更多細節。
Platypus: 動態地建立 greasemonkey 腳本，讓你可以用「所見即所得」的方式，編輯任何你看到的網頁！
View formatted source: 利用這個擴充套件來檢視網頁原始碼時，可以看到被整理得相當整齊的結果，這個源碼檢視不但會把連結的其他檔案（例如 JavaScript 和 CSS 等）給放進來，而且也可以把成對的標籤「折疊」起來，非常方便。

Dreamweaver

Dreamweaver是由 Macromedia 公司所研發出來的所見即所得的網頁編輯軟體

準備儲存檔案用的資料夾,並定義網站 (網站/新增網站)
- 在此更改檔案的名稱或位置,dreamweaver會自動更新所有連結
網頁的面板
- 插入(物件)面板:Ctrl+F2
- 屬性面板:Ctrl+F3
頁面屬性(滑鼠右鍵)
- 設定背景圖案 background="image/bgd.gif"
- 設定左邊界與上邊界
- 設定影像藍圖
- 設定背景圖案不隨著捲軸移動 bgproperties="fixed" (需直接更改html碼,且不符合W3C的標準)
網頁預覽:F12 (此模式下重新整理無作用,需重新預覽)
圖形的寬度,高度,重設大小,低解析度
網頁的3種檢視模式
水平線的顏色要以視窗/標籤檢測器(F9) 來設定 <hr color="#00CCFF" /> (不符合W3C的標準)
利用滑鼠變換影像與導覽列可做出滑鼠指標指向前後的圖形變化(Roll Over Image)
文字超連結
利用CSS改變連結狀態
- 文字/CSS樣式表/新增CSS樣式/使用CSS判斷規則/定義在只有此文件
  - link:超連結的文字狀態
  - hover:滑鼠滑過時的狀態
  - visited:以點選過的超連結狀態
  - active:滑鼠按下左鍵為放開時的狀態
圖片超連結
Email超連結
- mailto:peterju@pchome.com.tw?subject=問題是..... //subject後接主旨,不需加引號,要在程式碼中打
設定錨點
設定影像地圖
表格
- 利用表格來幫圖片加邊框(去除寬,高與邊框)
- 表格的背景與顏色
- 儲存格的背景與顏色
- 列與欄的插入與刪除(滑鼠右鍵/表格)
- 儲存格的合併與分割
- 儲存格內容的對齊方式(水平與垂直)
- 表格匯入(檔案/讀入/讀入表格式資料)
圖層
- 以CSS圖層語法較常用
- 圖層選擇器(F2):視窗/其它/圖層
時間軸
- 加入一個圖層,放上圖片
- 視窗/其他/時間軸(Alt+f9)
- 修改/增加物件至時間軸
- 設定結束的時間軸
- 選取自動撥放鈕
命令
- 清理XHTML

參考書目

Web Design製作攻略集,博碩文化,ISBN 9575274687,(2002)
純手工打造-黃金網頁,第三波,ISBN 9572310593,(2000)

網路資源

主網站：http://peterju.notlong.com (目前轉址至 http://irw.ncut.edu.tw/peterju/)

This work is licensed under a Creative Commons License