<HTML>
<HEAD>
有關網頁環境的宣告、JAVA SCRIPT程式、標題的設定等
<TITLE> 標題 </TITLE>
</HEAD>
<BODY>
內容編輯區
</BODY>
</HTML>

一、背景之設定
 二、文字的設定
 三、編輯方式
 四、項目排列
 五、超鏈結
 六、圖片
 七、表格
 八、畫面分割 (框架)
九、表單
 十、背景音樂
 十一、動態鏈結
 十二、CGI及JAVA Applet
十三、CSS樣式

一、背景之設定
<BODY BACKGROUND="圖片名" 背景圖片
BGCOLOR="#??????" 背景顏色
TEXT="#??????" 本文顏色
LINK="#??????" 超鏈結顏色
VLINK="#??????" 拜訪過超鏈結顏色
ALINK="#??????" 游標指到超鏈結顏色
BGPROPERTIES=fixed | scroll> 捲動畫面時，背景圖片為固定或捲動
顏色從 #000000 ~ #FFFFFF (紅、綠、藍 00 ~ FF)
例:(#FFFFFF：白色)、(#000000：黑色)、(#FF0000：紅色)、(#00FF00：綠色)、(#0000FF：藍色)、
　　(#00FFFF：淺藍色)、(#FFE0FF；淡紫色)、(#FFFF00：黃色)

色碼小程式

範例：
主要架構
<HTML>
<HEAD>
<TITLE>HTML簡介</TITLE>
</HEAD>
<BODY TEXT="#0000FF" LINK="#FF0000" VLINK="#FF00FF" BACKGROUND="book.jpg">
.....
</BODY>
</HTML>

二、文字設定
<BASEFONT COLOR="#??????" SIZE=n> 本字體設定 n=1~7(內定值為3)
<FONT FACE="字型" COLOR="#??????" SIZE= n | +n | -n >文字</FONT> 字體設定
<Hn ALIGN=center | left | right>標題文字</Hn>
字型大小(n=1~6)及文字對齊(居中,靠左,靠右)
<B>文字</B>粗體字
<I>文字</I>斜體字
<U>文字</U>字下線
<Big>文字</Big>放大
<Small>文字</Small>縮小
<Sup>文字</Sup>上標
<Sub>文字</Sub>下標

範例：
<BASEFONT COLOR="#FF0000" SIZE=3>基本字型3號字
<FONT SIZE=-1>字體-1</FONT>
<FONT SIZE=1>1號字</FONT>
<FONT COLOR="#00FF00" SIZE=+1>綠色+1字</FONT>
<FONT COLOR="#FF0000" SIZE=5>紅色5號字</FONT>
<FONT FACE="華康儷中黑" SIZE=6>中黑6號字</FONT>
<FONT FACE="標楷體" SIZE=7>楷書7號字</FONT>
<B>粗體字</B>
<I>斜體字</I>
<U>字下線</U>
<Big>放大</Big>
<Small>縮小</Small>
<I>X</I> <Sup>2</Sup>
<I>X</I> <Sub>1</Sub>

結果：

基本字型藍色3號字
字體-1
1號字
綠色+1字
紅色5號字

中黑6號字

楷書7號字

粗體字
斜體字
字下線
放大
縮小
X ²
X ₁

H1 ~ H6標題文字變化

H1標題文字

H2標題文字

H3標題文字

H4標題文字

H5標題文字

H6標題文字

三、編輯方式
<! ...>程式註解
<P ALIGN=center | left | right>段落</P> 設定某一段落，段落間會加一空白列
<BR>換行
<NOBR>內容</NOBR> 不可斷行
<PRE>內容</PRE>顯示與HTML相同的斷行方式，其內定字型大小為2，字體為細明體
<BLOCKQUOTE>內容</BLOCKQUOTE>在左右分別空出一定?度
<CENTER>內容</CENTER> 圖文對中
<HR WIDTH=n% color="顏色" SIZE=n ALIGN=center | left | right NOSHADE(無陰影) >水平線

HTML顯示字元
" "

< <

> >

& &

  非斷列空白

&ensp; 半方空白

&emsp; 全方空白

HTML顯示字元
"	"
<	<
>	>
&	&
	非斷列空白
&ensp;	半方空白
&emsp;	全方空白

範例：
<HR>

四、項目排列

數字化項目
<OL>
<LI>.....
<LI>.....
…….
</OL>

<OL TYPE= A | a | I | i | 1 START= n > 非數字化項目
<UL>
<LI>.....
<LI>.....
……
</UL>

<UL TYPE=disk | circle | square >
定義式項目
<DL>
<DT>.....
<DD>.....
……
</DL>

範例：

學歷
<OL type=I>
<LI>中山國小
<LI>陽明國中
<LI>台中商專
<LI>淡江大學學士
<LI>元智工學院碩士
<LI>雲林科技大學博士
</OL>
學歷
<UL >
<LI>中山國小
<LI>陽明國中
<LI>台中商專
<LI>淡江大學學士
<LI>元智工學院碩士
<LI>雲林科技大學博士
</UL>
學歷
<DL >
<DT>中山國小
<DD>彰化市中山路二段100號
<DT>陽明國中
<DD>彰化市長順街50號
<DT>台中商專
<DD>台中市三民路三段129號
<DT>淡江大學學士
<DT>元智工學院碩士
<DT>雲林科技大學博士
</DL>

結果：

學歷

中山國小

陽明國中

台中商專

淡江大學學士

元智工學院碩士

雲林科技大學博士

學歷

中山國小

陽明國中

台中商專

淡江大學學士

元智工學院碩士

雲林科技大學博士

學歷

中山國小

彰化市中山路二段100號

陽明國中

彰化市長順街50號

台中商專

台中市三民路三段129號

淡江大學學士

元智工學院碩士

雲林科技大學博士

五、超鏈結

<A HREF="超鏈結" TARGET="名稱"> 超鏈結說明或圖片 </A>
超鏈結內容

FILE:///....... 硬碟內檔案
HTTP://........ 網路上的檔案(若檔案無法由網頁型態開啟，則會自動下載)
可以在瀏覽器上開啟的檔案包括：
- html檔
- CGI程式 (php、pl、asp執行程式)
- 文字檔
- 圖檔( xxxx.jpg 、 xxxx.gif 或 xxxx.png )
- OFFICE檔案：若為 xxxx.doc 會開啟WORD程式、 xxxx.xls 會開啟EXCEL程式、 xxxx.pps 或 xxxx.ppt 會開啟POWER POINT程式
- 多媒體檔：若為 xxxx.avi、 xxxx.mpeg 或 xxxx.mp3等會開啟Media Player播放、若為 xxxx.mov 則會開啟Quick time播放、若為 xxxx.rm 則會開啟Real Player播放
- Flash檔( xxxx.swf)
- PDF檔：會開啟Acrobat Reader程式
- EXE檔或壓縮檔( xxxx.zip 、 xxxx.rar 或 xxxx.lzh 等)：會出現檔案下載的對話視窗
GOPHER://.......... GOPHER文字系統
FTP://........... FTP檔案傳輸，連結伺服器
NEWS: ........ NEW網路論壇系統
MAILTO:E-mail 利用Outlook Express來寄信
TELNET:......... 遠端登入，利用登入BBS系統

常用的網頁連結方式：

連結至其它網站的網頁，例： < A HREF=http://www.kimo.com.tw>雅虎奇摩站</A>
或是
< A HREF=http://www.kimo.com.tw> <img src=goto.gif border=0> </A>記得要設border=0，否則圖片會有超連結顏色外框
連結至本網站的其它網頁，例：< A HREF=index.htm>首頁</A>
路徑說明：
"." 表示目前所在目錄
".." 表示上一層目錄
"/" 用於上一層目錄名稱與下一層目錄名稱的連接符號

例如：
< A href="./image/sea.gif"> 表示目前目錄下的image目錄內的 sea.gif 檔
< A href="../image/sea.gif"> 表示在不同目錄image內的 sea.gif 檔(目前的目錄和image目錄在同一層)
書籤：跳到本文中的其它部分鏈結
<A NAME="書籤名稱"> 書籤內容 </A>
<A HREF="#書籤名稱"> 超鏈結說明或圖片 </A>

範例：
<a href="http://tw.yahoo.com" >奇摩站</A>
奇摩站

<a href="mailto:yclin@mail.ntit.edu.tw" >寄信給我</A>
寄信給我

<a href="question.htm" target=_blank >問答集</A>
問答集

<a name="6">六、圖片(最好用GIF檔、 JPG 或 png檔)</a>

六、圖片(最好用GIF檔、 JPG 或 png檔)

JPG檔為向量圖形，全彩，畫質較好(照片格式)
GIF檔為點陣圖形，256色，速度較快(常用於動畫、背景透明)
<IMG SRC="圖片名"
WIDHT=n | n% HEIGHT=n | n%
ALT="圖片說明"
ALIGN="對齊方式"
HSPACE=n VSPACE=n
BORDER=n>
對齊方式 top, bottom, middle, left, right
如果對齊方式採取align=left或align=right則會將圖片以「圖蹺文」的方式來靠左或靠右

範例：
<img src="thanks.gif" alt="玩球的趴趴熊" align=left>

玩球的趴趴熊

人生很多經驗是要付代價的，
但是也使我們了解這個錯誤，痛定思痛，以後永遠不再犯它。
適量的挫折也培養孩子的忍受力與同理心，以後容易與人相處。
父母不可能一輩子陪伴著孩子，
及早在遊戲中訓練孩子獨立完成一件事是很重要，
鼓勵孩子去試新奇的做事方法，
不必事事都依你的想法來做，
孩子們自發性的創造力就是這樣培養出來的。

趴趴熊<img src="thanks.gif" width=80 height=80 hspace=20>趴趴熊(水平間距為20)
趴趴熊趴趴熊

Map圖片的超鏈結

<Map Name = "IMAGE MAP 名稱">
<AREA SHAPE="形狀" COORDS="座標" HREF="超鏈結">
……
</MAP>
<IMG SRC="圖片名" USEMAP="#IMAGE MAP名稱">
形狀=RECT(矩形)、座標=X1,Y1,X2,Y2
形狀=CIRCLE(圓形)、座標=X1,Y1,R
形狀=POLY(多邊形)、座標=X1,Y1,X2,Y2,X3,Y3,...

範例：天線寶寶

範例：

七、表格

<TABLE BORDER=n CELLPADDING=n CELLSPACING=n WIDTH=n HEIGHT=n BORDERCOLOR="#??????" >
<CAPTION>表格標題</CAPTION>
<TR><TH> 標題 </TH><TH> 標題 </TH>.....</TR>
<TR><TD> 文字 </TD><TD> 文字 </TD>.....</TR>
..................
</TABLE>
其中
BORDER 表示框線厚度，CELLSPACING表示內框厚度，CELLPANDDING表示文字與框線距離
且 <TD WIDTH=n HEIGHT=n BGCOLOR="#??????"
ALIGN="center | left | right" VALIGN="top | middle | bottom"
ROWSPAN=合併列數 COLSPAN=合併欄數>

範例：

<table border=3>
<tr><td colspan=2 align=center bgcolor="#ccffcc"><b><font color="#ff0000">林裕章機密檔案</b></font></td></tr>
<tr><td width=100 bgcolor="#ffffcc" align=center><font color="#ff00ff">身份</font></td>
<td width=450 bgcolor="#ccffff">台中技術學院會計系副教授</td></tr>
<td bgcolor="#ffffcc" rowspan=6 align=center valign=middle><font color="#ff00ff">學歷</font></td>
<tr><td bgcolor="#ccffff">雲林科技大學管理研究所博士班</td></tr>
<td bgcolor="#ccffff">元智大學工業工程研究所碩士(第一屆)</td></tr>
<tr><td bgcolor="#ccffff">淡江大學統計系畢業</td></tr>
<tr><td bgcolor="#ccffff">台中技術學院會計統計科畢業(統計組第一屆)</td></tr>
<tr><td bgcolor="#ccffff">彰化縣立陽明國民中學畢業</td></tr>
<tr><td bgcolor="#ccffff">彰化市立中山國民小學畢業</td></tr>
<tr><td bgcolor="#ffffcc" rowspan=3 align=center valign=middle><font color="#ff00ff">經歷</font></td>
<td bgcolor="#ccffff">台中技術學院課務組組長</td></tr>
<tr><td bgcolor="#ccffff">台中技術學院出版組組長</td></tr>
<tr><td bgcolor="#ccffff">統計人員高考及格</td></tr>
<tr><td bgcolor="#ffffcc" align=center><font color="#ff00ff">任教課程</font></td>
<td bgcolor="#ccffff">統計學、商業套裝軟體、、作業研究、品質管制</td></tr>
</table>

結果：

林裕章機密檔案

身份台中技術學院會計系副教授

學歷雲林科技大學管理研究所博士班

元智大學工業工程研究所碩士(第一屆)

淡江大學統計系畢業

台中技術學院會計統計科畢業(統計組第一屆)

彰化縣立陽明國民中學畢業

彰化市立中山國民小學畢業

經歷台中技術學院課務組組長

台中技術學院出版組組長

統計人員高考及格

任教課程統計學、商業套裝軟體、作業研究、品質管制

八、框架

<HTML>
<FRAMESET BORDER=n BORDERCOLOR="#??????" COLS="分割欄"
ROWS="分割列">
<FRAME SRC=超鏈結 NAME="名稱" SCROLLING=yes | no | auto >
<FRAME SRC=超鏈結 NAME="名稱" NORESIZE>
........................
</FRAMESET>
</HTML>
<A HREF=超鏈結 TARGET=名稱 | _blank | _self | _parent | _top> 超鏈結出現視窗
[ _blank(新增), _new(新增), _self(本身), _parent(上一層), _top(全視窗) ]
例: ROWS="30%,*"分割二列，前一畫面佔30%
例: COLS="*,*,*"以平分方式分割三欄
例: COLS="1*,2*,3*"以 1:2:3 方式分割三欄

範例：
分成上下兩個畫面，上面畫面高為50，下面畫面分成左右兩個畫面，左邊佔10%，右邊佔90%

<html>
<head>
<title>歡迎光臨林裕章網站</title>
</head>
<frameset rows="50,*" border=0 >
<frame src="up.htm" scrolling="no">
<frameset cols="10%,*" border=0 >
<frame src="left.htm" scrolling="no">
<frame src="home.htm" name=main>
</frameset>
</frameset>
</html>

在up.htm中的超鏈結中如果要出現在main視窗中，則語法為：
<A href="http://www.kimo.com.tw" target="main">奇摩站</A>

內置框架
<iframe name="name" src="HTML" height="高度" width="寬度" scrolling= yes | no | auto> 說明</iframe>

例：
<iframe name="subframe" src="teach.htm" width=700 height=450 scrolling=no>
</iframe>

九、表單

<FORM ACTION=CGI程式 METHOD=傳輸方式 TARGET=分割畫面>
<INPUT TYPE ="類型" NAME="欄位名稱" VALUE="內容">
傳輸方式有 POST 及GET兩種
輸入資料類型有
TEXT ：文字欄位、PASSWORD：密碼輸入、CHECKBOX：核取方塊(複選)、
RADIO：單選圓鈕、SUBMIT：送出資料按鈕、RESET：重設按鈕、HIDDEN：隱藏
<SELECT NAME="選單名稱" SIZE="高度" MULTIPLE>
<OPTION VALUE="傳回值" SELECTED>
</SELECT>下拉式清單
<TEXTAREA COLS=寬度 ROWS=高度 NAME="欄位名稱">內容 </TEXTAREA>文字區塊

範例：
<form method="POST" action="http://alpha3.ntit.edu.tw/cgi-bin/cgiwrap/yclin/cgi.cgi">
姓名：<input type="text" name="name" size="25"><br>
密碼：<input type="password" name="password" size=10><br>
ISP：<input type="checkbox" name="hinet">HINET <input type="checkbox" name="seednet">SEEDNET <input type="checkbox" name="other">其它<br>
性別：<input type="radio" value="男" checked name="sex">男 <input type="radio" name="sex" value="女">女<br>
URL：<input type="text" name="email" size="25" value="http://"><Br>
心情：<select name="pic" size="1">
<option selected value="1">一切正常</option>
<option value="2">欣然微笑</option>
<option value="3">開心大笑</option>
<option value="4">相當不滿</option>
<option value="5">非常生氣</option>
<option value="6">傷心落淚</option>
<option value="7">心中恐懼</option>
<option value="8">信心十足</option>
<option value="9">十分抱歉</option>
<option value="10">充滿疑問</option></select><br>
留言：<textarea rows="2" name="body" cols="70"></textarea><p>
<input type="submit" value="確定" name="B1">
<input type="reset" value="重新再來" name="RESET"><br>
</form>

結果：

十、背景音樂與影像檔播放

(IE)
<BGSOUND SRC="MID" LOOP=INFINITE>只能播放mid檔

影像檔播放(例：mov, mpg, avi, wmv, asf, mp3等)
1. Plug-in用法
<EMBED SRC="plug-in檔案" WIDTH=n HEIGHT=n AUTOSTART=True | false LOOP=true | false HIDDEN= true | false>

例:
<EMBED SRC="domino.wmv" WIDTH=300 HEIGHT=250 AUTOSTART=false LOOP=false>

結果

若要以背景音樂方式來播放音樂(如：mp3)時，可以採取下列方式：
例：
<EMBED SRC="02.mp3" hidden=true AUTOSTART=true LOOP=true >

如果影片的檔案太大時，可以將其檔案放在其它伺服器，再利用超連結來播放。
例：
<EMBED SRC="http://home.kimo.com.tw/~yclin/domino.wmv" WIDTH=300 HEIGHT=250 AUTOSTART=false>

2. 如果是以超連結的方式來播放時，則會自動下載後，以Windows Media Player來播放
例：
<A href=domino.wmv>下載點</A>

十一、動態鏈結

例：
<META HTTP-EQUIV=REFRESH CONTENT="5;URL=new.htm"> 表示間格五秒後自動跳至new.htm網頁

如果要避免網頁中的文字變成其它方式編碼，可以強制其字元為big5字體(繁體中文)
例：將下列的設定加入<HEAD>......</HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=big5">

十二、CGI及JAVA Applet

CGI(Common Gateway Interface):是指www伺服器外部應用程式溝通(傳送或接收訊息)的一個通訊協定，大部份的CGI都是利用C、C++、Perl、VB或Java語文所撰寫，例如計數器、留言板
Java Applet與JavaScript (Sun公司所發展)：
Java語言須經過編譯成Java Applet後，由瀏覽器從網頁伺服器下載來執行。

範例：在HTML中加入下列敘述即可執行Lake.class
<APPLET CODE="Lake.class" align="absmiddle" width="580" height="650" id="Lake">
<PARAM name="image" value="lk02.jpg">
</APPLET>
下載 Lake.class檔

十三、CSS樣式

如同在Word中的樣式表一樣，可以設定特定的樣式格式於網頁中。使用方式：有三種方式

Inline Style(單項樣式設定)：針對某一特定物件設定樣式

其基本語法為：

< 標籤名稱 STYLE=" property (屬性) : value (設定值) ; .... ; property : value">

屬性包括了：

字型屬性：
- 字型(font-family): 字型名稱
- 字型大小(font-size): n pt
- 顏色(color)
- 字型粗細( font-weight): normal | bold | bolder | lighter | 100-900
- 字型型態(font-style): normal | italic | oblique
- 字型效果(text-decoration): underline | line-throuth | overline | blink | none 底線,刪除線,頂線, 閃爍(不支援),無
- 字元間距(letter-spacing) : normal | n pt
- 垂直位置(vertical-align): 上標為正,下標為負
段落屬性：
- 對齊方式(text-align): left | right | center | justitfy
- 垂直對齊(vertical-align): baseline | sub | super | top | text-top | middle | bottom | text-bottom
- 第一行縮排(text-indent): n pt
- 左右縮排(margin-left, margin-right): n pt
- 與前後距離(margin-top, margin-bottom): n pt
- 字母間距(word-specing): normal| n pt
- 行距(line-height): normal | n pt
框線屬性：
- 樣式(border-style): none | dotted(小點虛線) | dasked (大點虛線) | solid (實線) | double (雙線) | groove (3D 凹線) | ridge (3D 凸線) | inset | outset
- 顏色(border-color)
- 寬度(border-width): thin | medium | thick | n
表格內邊界屬性：
- 距離(padding- [ top | right | bottom | left ] ): n
背景屬性
- 顏色(background-color)
- 前景顏色(color)
- 背景圖片(background-image)
- 背景圖片的位置(background-position): [ x% y%] | [ x y] | [top | center | bottom] | [ left | right | center ]
- 重複(background-repeat): repeat, repeat-x, repeat-y, no-repeat
- 捲動(background-attachment): scroll | fixed
清單屬性
- 清單符號(list-style-type): disc | circle | square | none
- 清單編號(list-style-type): decimal | lower-roman | upper-roman | lower-alpha | upper-alpha
- 清單圖片(list-style-image)
- 清單符號縮排(list-style-position): inside | outside

設定值包括：(單位為長度單位、百分比單位與顏色單位)

長度：公分(cm)、公厘(mm)、英吋(in)、點(pt)、像素(px)等
百分比
顏色
檔案來源：url('檔案路徑')
垂直對齊：向上(top)、置中(center)、向下(bottom)
水平對齊：靠左(left)、置中(center)、靠右(right)

範例：
語法：
<textarea rows="5" name="body" cols="50" style="background-image: url('bg1.gif');
font-family='標楷體'; color='#ff0000'; font-size='14pt'">請輸入你的感想</textarea>

結果：
請輸入你的感想

範例:
<UL style=list-style-image:url('pic\dot.gif') >
<LI>中山國小
<LI>陽明國中
<LI>台中商專
<LI>淡江大學學士
<LI>元智工學院碩士
<LI>雲林科技大學博士
</UL>

結果：

中山國小
陽明國中
台中商專
淡江大學學士
元智工學院碩士
雲林科技大學博士

Embedded Style Sheet(嵌入式樣式表)：針對整個網頁設定樣式

其基本語法為：

在<HEAD>與</HEAD>之間設定
<HEAD>
<Style type=text/css>
的內容
/* 註解符號 */
selector 選擇器 { property 屬性： value 設定值 ; .... ; property 屬性： value 設定值}

-->
</Style>
</HEAD>
選擇器包括了：

body：主體
hr,br,p等：換行與水平線
table：表格
H1~H6：6種字體
b,u,l：字體樣式
img：圖片
form,input,textarea等：表單
CLASS 類別，用"."加上樣式名稱來定義
ID 類別，用"#"加上樣式名稱來定義

其它可設定的還包括：

連結屬性：
- 未使用的超連結(A:link)
- 已使用的超連結(A:visited)
- 連結中的超連結(A:active)
- 游標移到超連結上方(A:hover)
捲軸屬性：
- 捲軸面顏色(scrollbar-face-color)
- 捲軸右與下方線陰影顏色(scrollbar-shadow-color)
- 捲軸左與上方線陰影顏色(scrollbar-highlight-color)
- 捲軸左與上方框邊顏色(scrollbar-3dlight-color)
- 捲軸右與下方框邊顏色(scrollbar-darkshadow-color)
- 捲軸底色(scrollbar-track-color)
- 箭頭顏色(scrollbar-arrow-color)

範例：
語法：於<HEAD>與</HEAD>之間設定
<HEAD>
<Style type=text/css>
<!--

body {
background-image:url('pic\book.jpg');
margin-left:100px;
line-height:25px;
color:#0000ff;
background-attachment:fixed;
scrollbar-face-color: #d9b180;
scrollbar-shadow-color: #ccffff;
scrollbar-highlight-color: #eeffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color:#990000;
scrollbar-track-color: #660000;
scrollbar-arrow-color: #330000;
}
a:link {color:#ff0000; text-decoration:underline }
a:visited {color:#ff00ff; text-decoration:line-through}
a:hover {color:#cc0000; text-decoration:none }

背景圖片
左邊縮排
行距
字體顏色
背景不捲動(浮水印)
scrollbar面顏色
scrollbar右與下方線陰影顏色
scrollbar左與上方線陰影顏色
scrollbar左與上方框邊
scrollbar右與下方框邊
scrollbar底色
箭頭顏色

未拜訪超連結顏色與字下線
已拜訪超連結顏色與刪除線
游標上超連結顏色與無字下線

-->
</Style>
</HEAD>

範例二：利用CLASS來定義( 用"."加上樣式名稱來定義，例如: .bigword)
<HEAD>
<Style type=text/css>

</Style>
</HEAD>
.... <P class=bigword>CLASS用法</P>

結果：

CLASS用法

範例三：利用ID來定義 ( 用"#"加上樣式名稱來定義，例如: #smallword)
<HEAD>
<Style type=text/css>

</Style>
</HEAD>
.... <P id=smallword>ID用法</P>

結果：

ID用法

區塊元件

<DIV>標籤：用於設定某一特定較大區塊(區塊內可以有文字、圖形、表格等)的格式
語法：<DIV ID=idname>.....</DIV> 或是 <DIV CLASS=classname>.....</DIV>
其中
位置屬性 position: absolute| relative | static 絕對位置 | 相對位置 | 預設值
位置屬性 left: 100px; top: 100px 左邊與上邊坐標
顯示屬性 visibility: show | hidden 顯示 | 隱藏
層級屬性 z-index: auto|n n值愈大，則愈上層

範例：
<div id="music01" style="position:absolute; visibility:show; left:70px; top:150px; z-index:1">
這是一張音樂圖片
<img src=music111.gif>
可以將這張圖片的位置調為絕對位置，坐標為(150,70)
</div>

範例連結

<SPAN>標籤：用於設定某特定小段落(通常為文件段落)的格式
語法：<SPAN ID=idname>.....</DIV> 或是 <SPAN CLASS=classname>.....</DIV>

External Style Sheet(外部共用樣式表)：供多個網頁來設定樣式
將該樣式表儲存成延伸檔名為"xxx.CSS"的文字檔，在HEAD內連結該樣式表即可。
範例：
語法：於<HEAD>與</HEAD>之間設定
<HEAD>
<Style type=text/css>

</Style>
</HEAD>

回上一頁

數字化項目 <OL> <LI>..... <LI>..... ……. </OL> <OL TYPE= A \| a \| I \| i \| 1 START= n >	非數字化項目 <UL> <LI>..... <LI>..... …… </UL> <UL TYPE=disk \| circle \| square >	定義式項目 <DL> <DT>..... <DD>..... …… </DL>
範例：
學歷 <OL type=I> <LI>中山國小 <LI>陽明國中 <LI>台中商專 <LI>淡江大學學士 <LI>元智工學院碩士 <LI>雲林科技大學博士 </OL>	學歷 <UL > <LI>中山國小 <LI>陽明國中 <LI>台中商專 <LI>淡江大學學士 <LI>元智工學院碩士 <LI>雲林科技大學博士 </UL>	學歷 <DL > <DT>中山國小 <DD>彰化市中山路二段100號 <DT>陽明國中 <DD>彰化市長順街50號 <DT>台中商專 <DD>台中市三民路三段129號 <DT>淡江大學學士 <DT>元智工學院碩士 <DT>雲林科技大學博士 </DL>
結果：
學歷中山國小陽明國中台中商專淡江大學學士元智工學院碩士雲林科技大學博士	學歷中山國小陽明國中台中商專淡江大學學士元智工學院碩士雲林科技大學博士	學歷中山國小彰化市中山路二段100號陽明國中彰化市長順街50號台中商專台中市三民路三段129號淡江大學學士元智工學院碩士雲林科技大學博士

林裕章機密檔案
身份	台中技術學院會計系副教授
學歷	雲林科技大學管理研究所博士班
	元智大學工業工程研究所碩士(第一屆)
	淡江大學統計系畢業
	台中技術學院會計統計科畢業(統計組第一屆)
	彰化縣立陽明國民中學畢業
	彰化市立中山國民小學畢業
經歷	台中技術學院課務組組長
	台中技術學院出版組組長
	統計人員高考及格
任教課程	統計學、商業套裝軟體、作業研究、品質管制