HyperText Markup Language 教學

標準範本
<html>
<head>
<title>
本網頁主題
</title>
可插入Script
</head>
<body>
本網頁內容
</body>
</html>
字型
- 標題字體<Hx ALIGN=對齊方式>‧‧‧</Hx>
  x：1,2,3,4,5,6 數字愈小，字型愈大
  具有換行功能
  字體加粗
  對齊方式：RIGHT LEFT CENTER
  例：
  <H1 ALIGN=CENTER>H1字型</H1>→
  H1字型
  <H2 ALIGN=LEFT>H2字型</H2>→
  H2字型
  <H3 ALIGN=RIGHT>H3字型</H3>→
  H3字型
  <H4>H4字型</H4>→
  H4字型
  <H5>H5字型</H5>→
  H5字型
  <H6>H6字型</H6>→
  H6字型
- 字型格式<FONT SIZE=x COLOR=FFFFFF FACE=字型>
  x=7,6,5,4,3,2,1 數字愈大，字型愈大
  COLOR：十六進位數之二位數，分別控制紅、綠、藍三原色
  FACE：瀏覽器會自動搜尋瀏覽端的字型，若無此字型，則使用預設值，
  中文：細明體；英文：Times New Roman
  <FONT SIZE=7>字型7
  <FONT SIZE=6 COLOR=FF0000>字型6紅字
  <FONT SIZE=5 COLOR=00FF00 FACE=標楷體>字型5綠字標楷體
  <FONT SIZE=4 COLOR=0000FF FACE=新細明體>字型4藍字新細明體
  <FONT SIZE=3 COLOR=00FFFF FACE=comic sans ms>字型3淺藍字comic sans ms
  <FONT SIZE=2 COLOR=FF00FF FACE=impact>字型2粉紅字impact
  <FONT SIZE=1 COLOR=FFFF00 FACE=Arial>字型黃字Arial1
換行與段落
- 換行<BR>
  此標籤是不需要</br>
  例：
  
  標籤結果
  
  列距<BR>是不一樣的ㄛ！列距
  是不一樣的ㄛ！
- 換行<P>
  此標籤是不需要</P>
  例：
  
  標籤結果
  
  列距<P>是不一樣的ㄛ！列距
  是不一樣的ㄛ！
  
  　
水平線<HR Align=對齊方式 Size=n Width=n>
<HR>

<HR Size=20>

<HR Align=right Width=250>

<HR Align=center Width=50%>

標籤	結果
列距<BR>是不一樣的ㄛ！	列距是不一樣的ㄛ！

標籤	結果
列距<P>是不一樣的ㄛ！	列距是不一樣的ㄛ！

字元格式

標籤	結果
<B>粗體</B>	粗體
<I>斜體</I>	斜體
<U>加底線</U>	加底線
<S>刪除字</S>	~~刪除字~~
上標<SUP>字</SUP>	上標^字
下標<SUB>字</SUB>	下標_字
&LT;	<
&GT;	>
&	&
"	"
	空格

項目與編號

編號

標籤	結果
<OL> <LI>國文 <LI>英文 <LI>數學 </OL>	國文英文數學

項目

標籤	結果
<UL> <LI>國文 <LI>英文 <LI>數學 </UL>	國文英文數學

定義項目

標籤	結果
<DL> <DT>文學類 <DD>國文 <DD>英文 <DT>科學 <DD>物理 <DD>化學 </UL>	文學類國文英文科學類物理化學

表格

標籤

結果

文學類	國文	英文
科學類	物理	化學

標籤

結果

文學類	科學類
國文	物理
英文	化學

標籤

結果

冠軍
準決賽A			準決賽B
種子a隊	賽程1		賽程2		賽程3
	參賽 b 隊	參賽 c 隊	參賽 d 隊	參賽 e 隊	參賽 f 隊	參賽 g 隊

超連結

同檔案連結關鍵字

連結關鍵字 <a href="#標準範本">標準範本</a>
對應關鍵字 <a name="標準範本">標準範本</a>
例

標籤	結果
<a name="標準範本">標準範本</a> <a href="#標準範本">標準範本</a>	標準範本

不同檔案連結關鍵字
連結關鍵字 <a href="檔名#關鍵字">關鍵字</a>
對應關鍵字 <a name="關鍵字">關鍵字</a>

本站連結

連結本站網頁 <a href="/路徑/檔名">說明</a>
例

標籤	結果
<a href="../test/">歷屆試題線上測驗</a>	歷屆試題線上測驗

網路超連結

連結網路網頁 <a href="http://網址/路徑/檔名">說明</a>
例

標籤	結果
<a href=http://140.122.140.243/~rick/cai/>吳志賢老師數學網</a>	吳志賢老師數學網
<a href="http://203.72.62.8/~rick/download/php-4.2.3-installer.exe">php-4.2.3-installer.exe</a>	php-4.2.3-installer.exe
<a href="http://203.72.62.8/~rick/download/php-4.2.3-win32.zip">php-4.2.3-win32.zip</a>	php-4.2.3-win32.zip
<a href="http://203.72.62.8/~rick/download/apache_1.3.27-win32-x86-src.msi">apache_1.3.27-win32-x86-src.msi</a>	apache_1.3.27-win32-x86-src.msi

連結網路檔案下載 <a href="ftp://網址/路徑/檔名">說明</a>
                                  網站需有開放 ftp Server

連結網路E-Mail       <a href="mailto:帳號@領域名稱">說明</a>
                                  網站需開放POP3且瀏覽端需設定OutLook等收發信件軟體

圖檔連結

通常使用JPG與GIF兩種格式圖檔，其功能用途比較如下

格式	JPG	GIF
色彩	全採	16色、256色
特殊功能	無	透明圖、動畫圖
失真	因壓縮易失真	不因壓縮易失真
適用情況	相片	單調圖案、透明圖、動畫圖

網頁直接呈現 <IMG SRC="路徑/檔名">
例

標籤	結果
<img src="../counter/gif7/7.gif>

背景圖 <BODY BACKGROUND="路徑/檔名">

表單
<form method=傳輸 action=URL target=頁別>說明</form>
　
- method 傳輸方式
  GET 將資料附於網址後進行傳輸
  POST 將資料本身當作主體來傳輸﹝多用此方式﹞
- action URL
  標單所呼叫的程式位址
- target
  _self     原框架
  _top      整頁
  _blank 新頁面
  _parent 父框架
  _自訂   自訂框架名稱

表單的輸入元件

確認<input type="SUBMIT" value=確定>
清除<input type="RESET" value=清除>

單選<input type="RADIO" name=名稱 value=值>值的說明

例

標籤	結果
<form method=post action=sex.php3 target=_blank>性別： <input type=RADIO name=a value=m>男 <input type=RADIO name=a value=f>女<br> <input type=SUBMIT value=確定> <input type=RESET value=清除> </form> sex.php3 <? if($a=="m") echo "你是男生"; if($a=="f") echo "你是女生"; if($a=="") echo "重新輸入"; ?>	性別：男女

複選<input type="CHECKBOX" name=名稱 value=值>值的說明

例

標籤	結果
<form method=post action=sex.php3 target=_blank>拿手科目：<br> <input type=CHECKBOX name=subjecta value=a>國文<br> <input type=CHECKBOX name=subjectb value=b>英文<br> <input type=CHECKBOX name=subjectc value=c>數學<br> <input type=CHECKBOX name=subjectd value=d>物理<br> <input type=CHECKBOX name=subjecte value=e>化學<br> <input type=SUBMIT value=確定> <input type=RESET value=清除> </form> subject.php3 <? echo "你的拿手科目<br>"; if($subjecta=="a") echo "國文<br>"; if($subjectb=="b") echo "英文<br>"; if($subjectc=="c") echo "數學<br>"; if($subjectd=="d") echo "物理<br>"; if($subjecte=="e") echo "化學"; ?>	拿手科目：國文英文數學物理化學

標籤

結果

<form method=post action=sex.php3 target=_blank>拿手科目：<br>
<input type=CHECKBOX name=subjecta value=a>國文<br>
<input type=CHECKBOX name=subjectb value=b>英文<br>
<input type=CHECKBOX name=subjectc value=c>數學<br>
<input type=CHECKBOX name=subjectd value=d>物理<br>
<input type=CHECKBOX name=subjecte value=e>化學<br>
<input type=SUBMIT value=確定>
<input type=RESET value=清除>
</form>

subject.php3
<?
echo "你的拿手科目<br>";
if($subjecta=="a") echo "國文<br>";
if($subjectb=="b") echo "英文<br>";
if($subjectc=="c") echo "數學<br>";
if($subjectd=="d") echo "物理<br>";
if($subjecte=="e") echo "化學";
?>

文字<input type="TEXT" size=大小 name=名稱 value=預設值>

例

標籤
<form method=post action=data.php3 target=_blank>個人資料：<br> 姓名：<input type=TEXT name=name value=a><br> 地址：<input type=TEXT size=50 name=address value=b><br> 職業：<input type=TEXT name=work value=c><br> <input type=SUBMIT value=確定> <input type=RESET value=清除> </form> subject.php3 <? echo "<font color=#ff0000>".$name."</font>的個人資料："; echo "<BR>地址：".$address; echo "<BR>職業：".$work; ?>
結果
個人資料：姓名：地址：職業：

密碼<input type="PASSWORD"size=大小 name=名稱 value=預設值>

例

標籤
<form method=post action=passwd.php3 target=_blank>保密資料：<br> 請輸入密碼：<input type=PASSWORD name=pass><br> <input type=SUBMIT value=確定> <input type=RESET value=清除> </form> passwd.php3 <? if($pass=="math") { echo "密碼正確"; } else { echo "密碼錯誤"; } ?>
結果
保密資料：請輸入密碼：

下拉式單選選單<select name=名稱 size=大小>
　　　　　　　<option>選項
　　　　　　　<option selected>預設選項
　　　　　　　</select>

例

標籤
<form method=post action=level.php3 target=_blank>學歷：<br> <select name=level> <option>博士 <option>碩士 <option selected>學士 </select> <input type=SUBMIT value=確定> <input type=RESET value=清除> </form> level.php3 <? echo "您的學歷："; echo "<font color=#00ff00>".$level."</font>"; ?>
結果
學歷：

文字輸入區域<textarea name=名稱 rows=列數 cols=行數>
　　　　　　預設文字
　　　　　　</testarea>

例

標籤
<form method=post action=book.php3 target=_blank>留言版：<br> <textarea name=gb rows=10 cols=30> </textarea> <input type=SUBMIT value=確定> <input type=RESET value=清除> </form> book.php3 <? echo "您的留言：<BR>"; echo "<font color=#00ff00>".$gb."</font>"; ?>
結果
留言版：

框架頁　取代<body>‧‧‧</body>

<html>
<head><title></title></head>
<frameset 行或列=比例 frameborder=yes/no framecolor=顏色>
<frame name=框架頁名稱1 target=連結後呈現的框架 src=網頁1>
<frame name=框架頁名稱2 scrolling=yes/no/auto src=網頁2>
<frame name=框架頁名稱3 frameborder=yes/no src=網頁3>
</frame>

行或列=比例

ROWS=1,1	分割成1：1的二列框架
COLS=40%,30%,30%	分割成40%：30%：30%的三行框架
ROWS=250,*	分割成指定第一個框架250pixel，其餘給第二個框架

name=框架頁名稱
設定該框架頁的名稱，該框架頁將以此名稱對外作連結

target=連結後呈現的框架

本框架頁的連結，將在target所指定的框架頁呈現

target=_blank	開啟新視窗
target=_parent	上一層視窗，呈現在原視窗
target=_top	消除框架設定，呈現在原視窗
target=框架頁名稱	連結後呈現指定框架

frameborder=yes/no
是否呈現框架頁的邊線
src=網頁
指定本框架頁所開啟的網頁
scrolling=yes/no/auto
設定框架頁是否可以捲動

By Rick 2003

HyperText Markup Language 教學

標準範本

字型

標題字體<Hx ALIGN=對齊方式>‧‧‧</Hx>

H1字型

H2字型

H3字型

H4字型

H5字型

H6字型

字型格式<FONT SIZE=x COLOR=FFFFFF FACE=字型>

換行與段落

換行<BR>

換行<P>

水平線<HR Align=對齊方式 Size=n Width=n>

字元格式

項目與編號

編號

項目

定義項目

表格

超連結

同檔案連結關鍵字

不同檔案連結關鍵字

本站連結

網路超連結

圖檔連結

表單 <form method=傳輸 action=URL target=頁別>說明</form>

method 傳輸方式

action URL

target

表單的輸入元件

確認<input type="SUBMIT" value=確定> 清除<input type="RESET" value=清除>

單選<input type="RADIO" name=名稱 value=值>值的說明

複選<input type="CHECKBOX" name=名稱 value=值>值的說明

文字<input type="TEXT" size=大小 name=名稱 value=預設值>

密碼<input type="PASSWORD"size=大小 name=名稱 value=預設值>

下拉式單選選單<select name=名稱 size=大小> <option>選項 <option selected>預設選項 </select>

文字輸入區域<textarea name=名稱 rows=列數 cols=行數> 預設文字 </testarea>

框架頁 取代<body>‧‧‧</body>

行或列=比例

name=框架頁名稱

target=連結後呈現的框架

frameborder=yes/no

src=網頁

scrolling=yes/no/auto

表單
<form method=傳輸 action=URL target=頁別>說明</form>

確認<input type="SUBMIT" value=確定>
清除<input type="RESET" value=清除>

下拉式單選選單<select name=名稱 size=大小>
　　　　　　　<option>選項
　　　　　　　<option selected>預設選項
　　　　　　　</select>

文字輸入區域<textarea name=名稱 rows=列數 cols=行數>
　　　　　　預設文字
　　　　　　</testarea>

框架頁　取代<body>‧‧‧</body>