概述HTML
HTML的全名是HyperText Markup Language，是編寫網頁的基本語言，而它並不是一個程式， 只是一些插在普通文件內的碼( code )，這些碼可以控制我們的瀏覽器要怎樣把文件顯示出來, 就是你現在所看到的頁面就是用HTML來控制的，它可控制字體的大小，也可以插入連結或圖像。
一個HTML檔稱為HTML document，存檔的副檔名為htm或 html，編寫的方式有很多種， 最原始的方法是用windows內的記事本或各種文書編輯軟體，而現在有一種軟體也是編寫HTML碼， 但具有預覽及插入特效的功能，如Dida 網頁速寫器，編寫完成後記得儲存成*.htm或*.html 即可。
若你想看一個網頁的HTML檔，只要在瀏覽器內按下滑鼠右鍵，再選擇 檢視原始檔(view)即可。
一份標準的HTML文件是由元素所組成的，元素是由標籤(Tag)以及文件內容所組成。 文件內容可以是文字、圖形、甚至是影像、聲音等等。而標籤又是啥東東呢？？ 一個開始標籤(< >)是由一個小於符號(<)和一個大於符號(>)所構成的 一個起始標籤中加一道斜線"/"就構成了結束標籤(</>) 而一對標籤是由一個起始標籤和一個結束標籤所構成的。
html的結構
HTML document有一固定的格式，瀏覽器才可以辨識及分析，進而顯示在你的眼前，而基本格式為 :
<html>
<head>
<title>
</title>
</head>
<body>
您所要在瀏覽器顯示的內容
</body>
</html>
有兩個須要注意的地方，每一個開啟碼是由<> 兩個符號所框住的，而關閉碼是由</> 所框住的，而每一個HTML碼有開就要有關，後面的單元會逐一的介紹。
網頁顏色設定
<bodybgcolor="#xxxxxx"text="#xxxxxx" link="#xxxxxx"vlink="#xxxxxx" alink="#xxxxxx">
bgcolor=控制背景顏色
text=控制文字顏色
link=控制連結顏色
vlink=控制已閱讀過的顏色
alink=控制正在連結的顏色
而xxxxxx六個數值代表紅／綠／籃的顏色元素值，為A～F及0～9等所組合起來的六個數值， 配色的功力就得看您自己嚕，右邊有我所製做的調色區有16的6次方種顏色供您參考 :
另外在xxxxxx的部份也可用顏色的英文單字代替，但xxxxxx之前的#要去掉，如text="#000000"可換成 text="BLACK"
加入背景圖像
若您覺得背景顏色太單調，想要換成背景圖像的話，就得要在<body>內加入background的屬性了。如果你的背景圖檔檔名為 back.gif，則<body>內便要寫成 :
<bodybackground="back.gif"text="#000000"link="#0066cc"vlink="#336600">
PS:如果圖像的檔案跟您網頁的檔案不在同一目錄裡，則必須輸入完整路徑，如http://www.123.com.tw/back.gif。
bgproperties="fixed"(使背景圖像固定不動，不過只有IE有效果)
如果想要在網頁內加入一條像下面的水平線，加入<hr>的碼即可。
--------------------------------------------------------------------------------
這是上面那一條線的原始碼 :
<hr size="5" align="center" noshade width="90%" color="0000ff">
size=控制線的寬度
align=控制線是靠左(left)／靠右(right)／中間(center)
width=控制線的長度，可用數字或百分比
noshade=控制線沒有陰影
color=控制線的顏色
【網頁HTML2】
清單設定方式
圓頭清單
只要加入<ul>的碼，便可製出有小圓頭的清單 :
<ul>
<li>物件清單1
<li>物件清單2
<li>物件清單3
</ul>
上面的原始碼會顯示成下面的樣子 :
物件清單1
物件清單2
物件清單3
在<ol>的標籤內加入一些參數就可以讓顯出的效果有所變動唷 :
<ul type=disc>
這是一般的小圓點
<ul type=circle>
這是空心的小圓點
<ul type=square>
這是實心正方黑點
數字清單
跟小圓頭的方式很像，只要加入<ol>的碼，便可製出有數字的清單 :
<ol>
<li>清單1
<li>清單2
<li>清單3
</ol>
上面的原始碼會顯示成下面的樣子 :
清單1
清單2
清單3
type=A(控制清單之前數字的參數顯示成A. B. C......)
type=a (控制清單之前數字的參數顯示成a. b. c......)
type=I (控制清單之前數字的參數顯示成I. II. III......)
type=i (控制清單之前數字的參數顯示成i. i. iii......)
start=起始的數值
定義清單
一般做為解釋一樣動作，加入以下的碼便可做一個定義清單
<dl>
<dt>耗子
<dd>是這裡的站長
<dt>電腦
<dd>已成為人類生活的一部分
</dl>
上面的原始碼會顯示成下面的樣子 :
耗子
是這裡的站長
電腦
已成為人類生活的一部分
標題文字
瀏覽器可分出六種大小的標題文字,原始碼如下 :
<h1>標題文字1</h1>
<h2>標題文字2</h2>
<h3>標題文字3</h3>
<h4>標題文字4</h4>
<h5>標題文字5</h5>
<h6>標題文字6</h6>
上面的碼會造出下面六種大小的標題文字 :
標題文字1
標題文字2
標題文字3
標題文字4
標題文字5
標題文字6
文字設定
如果要把文字變成粗體，就要加上<b>的碼了
如果要把文字變成斜體，就要加上<i>的碼了
如果要把文字加上底線，就要加上<u>的碼了
耗子洞HTML教學<b>耗子洞HTML教學</b>
耗子洞HTML教學<i>耗子洞HTML教學</i>
耗子洞HTML教學<u>耗子洞HTML教學</u>
文字的控制
文字的控制要加上<font>的碼，它可以控制文字的大小，顏色，字型，在<font>裡加上一些屬性就可以控制
<fontface="Arial"color="#cc33ff"size="7">Good morning</font>
上面的碼會做出下面的文字 :
Good morning
face=控制文字字體，填入字體名稱
color=控制文字顏色
size=控制文字大小，數字1～7
強迫換行
如果覺得您的文字太長，想要您的文字跳到下一行，就要加上<br>或<p>的碼 :
斷行1<br>
斷行2<p>
上面的碼會顯現強迫換行效果 :
而<p>是比<br>多跳一行的。
在<p>的標籤內，可以加入align=left／right／center這樣就可以控制在<p>之後的物件是靠左／靠右／置中了 :
如果在<p>內有加入align的屬性，記得加上</p>的關閉碼
文字格式化
用<pre>的碼可以將你所要顯示的文字格式一模一樣的顯示在瀏覽器上，再用</pre>來關閉
<pre>
格式會跟你打的一樣唷
看到了嗎
會一模一樣唷！！
</pre>
格式會跟你打的一樣唷
看到了嗎
會一模一樣唷！！
插入超連結
文字之超連結
連結為一個網頁不可少的東西，沒有連結就那都不能去，如要差入一個連結便要加入<a href="URL">的碼 :
按下下面的連結會連到奇摩站唷!!
奇摩站
記得要加上</a>的關閉碼唷，不然瀏覽器會把<a href="http://www.kimo.com">之後的東西都連到奇摩站
URL就是所要連結的網址
如果是要連結在同一系統內的檔案，則將URL改成相對的路徑即可
連結到同一目錄內的檔案
<a href="index.htm">回首頁</a>
連結在子目錄的檔案
<a href="a/1.htm">連到a目錄裡的1.htm</a>
FTP的連結方式
<A HREF="ftp://ftp.hinet.net">中華電信 HINET FTP</A>
當然也可以加上目錄名稱，甚至檔案名稱。
<A HREF="ftp://ftp.hinet.net/windows/windows95/simtel.net/inet/ ws_ftp32.zip">
如此一來按一下就可以下載WS FTP的檔案&/A>
GOPHER的連結方式
範例如下:
<A HREF="gopher//gopher.ntu.edu.tw">台大的GOPHER</A>
指定要進入的GOPHER主機，同樣可以加上目錄名稱。
E-MAIL
範例如下:
範例1:文字連結
< A HREF="mailto:nanshanlive@yahhoo.com.tw.com">站長的信箱</A>
站長的信箱
而在<a href="URL">的標籤中，可插入target="_new／_top／_blank／name"
來改變連結所開啟頁面的狀態!!
在target裡的參數如下 :
_new=在一個新視窗開啟，不過只會一直在同一個新視窗開啟，不會另外在開一個新視窗
_top=在同一個視窗出現，不過是整個大視窗，而不是所分割後的視窗
_blank=跟_new差不多，只是會一直出現新的視窗，而不會在同一個新視窗開啟 =''
name=在frame有介紹，是給frame的name
而在<a href="URL">的標籤中，可插入STYLE="text-decoration:none"
來消除連結的底線
當然所有的連結方式．並不一定用文字,用圖片也可以唷！
【網頁HTML3】
插入表格
●表格標籤-<table>及屬性應用●
<table>.....</table>
<table>標籤可以說是建立表格時最重要的一個標籤，在開始時一定要加上起始標籤<table>，結果時必須加上結尾標籤</table>，不然瀏覽器無法顯示出來。
width、height-表格寬度、高度
用法： <table width="表格寬度值" height="表格寬度值">
說明：在表格中，你可以任意的設定表格的寬度、高度等，但高度對於網頁來說比較不重要，因為表格會自動的調整高度。
border-表格邊框
用法： <table border="寬度值">
說明：設定表格的框線，寬度值越大，它的框線越粗，寬度值為零或是沒有寫上border時，代表表格沒有框線。
bgcolor-表格背景顏色
用法： <table bgcolor="色碼">
說明：設定表格內的背景顏色。
background-表格背景圖片
用法： <table background="圖片路徑">
說明：表格的背景顏色除了利用色碼來顯示外，還可以加上圖片當背景顏色。
align-表格對齊方向
用法： <table align="方向">
說明：align屬性就是設定整個表格在網頁中靠左、靠中或是靠右對齊，設定型態以left、center和right來設定，和圖片的align的情況一樣。
例：
<tablewidth="80"height="40"bgcolor="blue"border="5">
<tr>
<td>1</td>
</tr>
</table>
說明：
寬80、高40，背景顏色為藍色，邊框寬度值為5的表格
●表格列-<tr>及屬性應用●
<tr>.....</tr>
表格有分欄和列，<tr>標籤就是代表著列的起頭，它是加在<table>起始標籤和</table>結尾標籤內，有多少個<tr>標籤就代表有多少列。而<tr>和</tr>標籤間可以包含著<th>或<td>兩種標籤，分別代表標題或是表格內文。
bgcolor-表格列背景顏色
用法： <tr bgcolor="色碼">
說明：設定表格中每一列的背景顏色。
align-表格列水平對齊方向
用法： <tr align="方向">
說明：設定表格中每一列所有儲存格內容的水平對齊方向，設定型態有left、center和right三種。
valign-表格列垂直對齊方向
用法： <tr valign="方向">
說明：設定表格中每一列所有儲存格內容的垂直對齊方向，設定型態有top、middle和bottom三種。top是將文字放置在最頂端；middle是將文字放置在居中的位置；bottom是將文字放置在最底端。預設值為middle。
例：
<table width="100" border="1">
<tr bgcolor="red">
<td>1</td>
</tr>
<tr align="right">
<td>2</td>
</tr>
<tr bgcolor="yellow" valign="top">
<td>3</td>
</tr>
</table>
說明：
第一列背景顏色為紅色 ，第二列內容對齊右邊 ，第三列內容對齊頂端，背景顏色為黃色
●表格欄-<td>●
<td>儲存格文字</td>
<td>標籤就是儲存格，也就是所要置資料的欄位，同樣的，<td>標籤必須和<tr>標籤一起配合使用的。
●欄位標題-<th>●
<th>標題文字</th>
<th>標籤就是儲存格標題，也就是欄位的標題，被<th>標籤所包含的內容文字會變成粗體字型，並靠中對齊。
●<td>和<th>屬性應用●
bgcolor-表格欄背景顏色
用法： <td bgcolor="色碼"> <th bgcolor="色碼">
說明：設定表格中每一欄的背景顏色。
align-表格欄水平對齊方向
用法： <td align="方向"> <th align="方向">
說明：設定儲存格內容水平的對齊方向。設定型態有left、chenter和right三種，預設值為center。
valign-表格欄垂直對齊方向
用法： <td valign="方向"> <th valign="方向">
說明：設定儲存格內容垂直的對齊方向。設定型態有top、middle和bottom三種，預設值為middle。
width-表格欄寬度
用法： <td width="表格寬度值"> <th valign="表格寬度值">
說明：<table>標籤可以設定寬度，它的百分比長度是相對於瀏覽器視窗，而<td>和<th>標籤的寬度是相對於表格的寬度。
height-表格欄高度
用法： <td height="表格寬度值"> <th height="表格寬度值">
說明：height屬性就是用於設定儲存格的高度，高度的設定值也是以用pixel為單位或是百分比來設定。
colspan-橫向合併
用法： <td colspan="合併的儲存格數"> <th colspan="合併的儲存格數">
說明：設定表格欄位的橫向合併。
rowspan-縱向合併
用法： <td rowspan="合併的儲存格數"> <th rowspan="合併的儲存格數">
說明：設定表格欄位的縱向合併。
例一：
<table border="1">
<tr>
<td valign="bottom">1</td>
<td bgcolor="blue">2</td>
<td width="20" align="right">3</td>
<td height="40" bgcolor="red">4</td>
</tr>
</table>
說明：
第一欄向下對齊 ，第二欄背景顏色為藍色 ，第三欄表格寬度值為20，向右對齊 ，第四欄表格高度值為40，背景顏色為紅色
例二：
<table border="1" align="center">
<tr>
<td colspan="3" align="center">1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
說明：
第一列合併第二列的三欄
例三：
<table border="1" align="center">
<tr>
<td rowspan="3" >1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
說明：
第一欄合併第二欄的三列
安裝音樂
加入背景音樂只要在<head>跟</head>之間插入下列原始碼即可讓你的網站有悅耳的聲音唷 :
<bgsound src="music.mid" loop="1">
src=設定你想要撥放的midi音樂檔名(須注意音樂檔格式)
loop=音樂重撥次數，如想不斷撥放便設成infinite
●加入音效標籤-<embed>及屬性應用●
<embed src="音效檔路徑"">
使用<embed>標籤加上標籤的屬性src來播放背景音樂，只要簡單的一句標籤指令，就能讓網頁更生動哦！
width、height-播放程式界面寬度、高度
用法： <embed width="寬度值" height="高度值">
說明：設定音效播放程式界面寬度和高度。
hidden-隱藏播放程式
用法： <embed hidden="true∣false">
說明：設定為true就會將播放程式隱藏，但是如果想讓播放程式顯示，就不必特地設定這屬性，因為預設值就是顯示播放程式。
loop-無限次播放
用法： <embed loop="數值∣true">
說明：使用loop這個屬性，設定數值為5就是代表連續播放5次，若將數值改成true就會無限播放。
autostart-手動播放
用法： <embed autostart="true∣false">
說明：這個屬性代表播放程式是否要自動播放音樂。true就代表要，false就代表不要。
例：
<embedsrc="..mediasdora.mid"width="70"height="25"autostart="false"loop="true">
說明：手動播放，寬度值70，高度值25
網路媒體播放程式－ExoBUD
視訊
1.影片：
<img dynsrc="org2.WMV" start="fileopen">
2.Flash動畫：
<embed width="357" height="370" src="madeapoop.swf">
分割視窗
首先要加入
<frameset cols=數字或比例,數字或比例>(左右分割畫面)或
<frameset rows=數字或比例,數字或比例>(上下分割畫面)
也可以寫成這樣 :
<frameset cols=120,*>
用*的意思是左邊的頁面長度為120，而剩餘的空間都給右方的頁面使用
在<frameset>之後便要加上<frame>的碼，如果左邊頁面的顯示檔案為left.htm， 而右邊的頁面顯示的檔案為right.htm，如下所示 :
<frameset cols=120,*>
<frame src="left.htm">
<frame src="right.htm">
</frameset>
在<frameset>內的控制屬性如下 :
framespacing=控制兩個frame之間的距離
frameborder=控制frame外框的粗細
border=控制外框粗細，不外框便設成0
要分割頁面的原始碼如下，不須加上<body>碼 :
<html>
<head>
<title>
</title>
</head>
<frameset cols=120,* frameborder="0" framespacing="0" border="0">
<frame src="left.htm">
<frame src="right.htm">
</frameset>
</html>
frame內的特性
在<frame>內的特性 :
noresize=讓瀏覽者不可改變frame的size，就加上這行
scrolling=auto/no控制frame是可以/不可以捲動
name=設定frame的名字，下面有介紹如何應用
target=框頁名稱，設定連結所欲出現的框頁位置
target=_top，連結位置為整個網頁
target=_self，連結位置為原來網頁
target=_blank，連結位置為新的網頁
例如：我們想要在按下左邊頁面裡的連結時，只改變右邊頁面的內容，則在左邊頁面的連結標籤裡要加上
<a href="right.htm" target="right">回首頁</a>
鎖死右鍵
程式碼：請將此文字內容複製到HTML裡的</title>之後
<SCRIPT>
function click() { if (event.button==2) { alert("Stop Stealing The Code! 請勿拷貝本站資料!") } } document.onmousedown=click
</SCRIPT>
刪除蹦出廣告視窗
本語法可消除大部份免費網站空間，蹦出式的廣告視窗。控制碼內容如下：
<SCRIPT LANGUAGE="JavaScript">
<!--
function open () {return true;}
//-->
</SCRIPT>
將語複製後置於<head>........</head>之間
創作內容
【參考資料】簡易網頁HTML語法
MOON+ONE (187)