Html03
- 1. 國立清華大學資訊基礎教育
教學改進計畫
HTML 基本語法指令介紹
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-1
- 2. HTML 歷史
◙ HTML HyperText Markup Language
◙ 90 年代初期 Tim Berners-Lee 在 CERN 發展
HTML ，他創建了一種快速小型超文本語言 。
◙ 但是 Tim Berners -Lee 設計的語言太過簡易。
它是以文本格式爲基礎，所以可以用任何編輯器
和文字處理器來爲網路創建或轉換文本。
◙ 它僅有不多的幾個標籤（ TAG ），任何人可以
很快掌握 HTML 。網路從此快速發展，人人都
開始在網上發佈資訊， 架構網站。
◙ 註 : CERN ( 歐洲粒子物理實驗室 )
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-2
- 3. HTML 歷史
◙ Tim Berners-Lee 在 CERN 發展 HTML 以
來， HTML 歷經了多次革新。以下是其簡史：
HTML+ (1993)
HTML 2.0 (Nov. 1994)
HTML 3.0 (1995)
HTML 3.2 (Jan. 1997)
HTML 4.0 (Dec. 1998)
HTML 4.01 (Dec. 1999)
HTML 5 (2009 迄今，目前仍為草案，並已經被 W3C 接
納)
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-3
- 4. HTML 特性
◙ 它跟一般的文書處理器不同的地方在於，它具有
超文字 (HyperText) 、超連結 (HyperLink) 、超
媒體 (HyperMedia) 的特性，透過 HTTP
( HyperText Transfer Protocol) 網路通訊協定，
便能夠在世界各地透過 WWW (World Wide
Web) 的架構做跨平台的交流。
◙ 只需要簡單的文書編輯軟體（例如記事本、
vi 、 Word, UltraEdit ），加上對基本 HTML
標籤的認知，就可以很快的開發出個人網頁，
與其他電腦程式語言相較， 是最簡單的一種。
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-4
- 5. URL 『資源定位器』
◙ URL: (Uniform Resource Locators) 『資源定位器』
◙ 利用 URL 來做資源與文件的存取，一個 URL 主
要是通訊協定加上網址兩大部分
例如 : http://mir.cs.nthu.edu.tw/gavins/
或者 : telnet://bbs.cs.nthu.edu.tw/
◙ 一個網域名稱的最後一碼是代表國家，例如台灣
就是 tw ， Taiwan 的簡稱，但在美國的網域名
稱通常不加國名代碼。（網路最早就是老美起家
的，所以他們選擇性的忘記加上國碼。 )
◙ 可到下列網址查詢世界各國的國碼
http://www.december.com/html/spec/domcodes.html
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-5
- 6. HTML 編輯器
◙ 可以用 WORD ， FrontPage ， Flash 等
軟體快速製作，可不用學 HTML 語法。
◙ 缺點 : 通常不容易加上 ASP or Javascript
等語言，檔案也會比較大，利用 IE or
Netscape 看的效果可能會不同。
◙ 建議 : 使用 UltraEdit 編輯，並熟悉 HTML
語法，如此其他網站的設計也就有能力學
過來運用。
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-6
- 7. 撰寫第一個網頁 by HTML
◙ <HTML>
<HEAD>
<TITLE> 放標題的地方 </TITLE>
</HEAD>
<BODY>
這是第一個網頁
</BODY>
◙ </HTML>
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-7
- 8. 基本標籤說明
◙ 網頁的標籤（ Tags ），每一個標籤都是
由「 < 」及「 > 」所涵蓋， <HTML> ，
代表 HTML 網頁的開始，而 </HTML>
則代表 HTML 網頁的結束。
◙ <head> 和 </head> 之間是用於規範和
整體網頁相關的資訊，這些資訊不會直接
出現在網頁上。這部分還包含了
<title> ，用來說明此網頁的標題。此標題
會出現在視窗最上方。
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-8
- 9. 基本標籤說明
◙ <body> 和 </body> 之間所放的資訊則會
直接呈現在瀏覽器視窗上。
◙ 標籤可以加上不同的屬性（ Attributes ）
，去改變瀏覽器的呈現方式。
◙ 例如 :
將 <body> 改成 <body
background=“test.gif”>
◙ 註 : 標籤及屬性都沒有大小寫的區分
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-9
- 10. 常用標籤 : 文字相關 (1)
◙ 表頭（ Heading ）常用在強調文字的重要性
◙ 範圍 : H1 字型最大， H6 字型最小
◙ 特性 : 會在文字上下空白兩行
◙ 屬性 : left, center, right
◙ 例子 :
<h1 align=“left”> 這會是在左邊最大的字 </h1>
<h6 align=“center”> 這會是在中間最小的字 </h6>
結果呈現如下 :
這會是在左邊最大的字
這會是在中間最小的字
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-10
- 11. 常用標籤 : 文字相關 (2)
◙ <p> 代表「段落」 (Paragraph) ，可讓 web 內容更清
楚分辨每一個區段內容
◙ 屬性 : left, center, right
◙ 特性 : 會和上一個段落隔開一列
◙ <br> 代表換行 (break), 沒有其他屬性
◙ <pre> (Preformatted Text) ，原貌完整呈現在網頁上，
但是若有 HTML 標籤則會先處理後呈現。
◙ <xmp> 如果我們想顯示標籤存在，就可以改用 <xmp>
標籤，此標籤會將所有其它的 HTML 標籤原封不動地
呈現出來。
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-11
- 12. 常用標籤 : 文字相關 (3)
◙ <hr> 劃水平線
◙ 屬性 :
ALIGN : left, right, center
NOSHADE ( 沒有陰影效果的水平線 )
SIZE: n ( 水平線的粗細， n 值為整數 )
WIDTH: n|p% ( 水平線的長度，可設定 Pixel 值或百
分比值 )
◙ 例子 :
<hr noshade size=4 width=80% align=center>
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-12
- 13. 常用標籤 : 文字相關 (4)
◙ <font> : 設定字型
◙ 屬性 :
SIZE: 字體大小 , 1~7
COLOR: 顏色
FACE: 字體類別
◙ 例子 :
<font size=3 face=“ 標楷體” color=green> 測試 </font>
◙ 另一個例子 : 可將 size 作更大的調整
<basefont size=3>
<font size=+2> 測試 </font>
◙ <font> 設定字型不會自動換行 , 與 <h> 不同
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-13
- 14. 常用標籤 : 文字相關 (5)
◙ <i>: 斜體字
<i> 測試 </i> 測試
◙ <b>: 粗體字
<b> 測試 </b> 測試
◙ <u>: 底線字
<u> 測試 </u> 測試
◙ <sup>: 上標字
<sup> 測試 </sup> 測試
◙ <sub>: 下標字
<sub> 測試 </sub> 測試
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-14
- 15. 常用標籤 : 文字相關 (6)
◙ < marquee > : 「跑馬燈」，僅限於 IE 使
用， Netscape 不適用。
◙ 屬性 :
Direction: left, right, up, down
Bgcolor: #000000, 兩個兩個一組 , 00~99, AA~FF
Behavior: alternate ( 左右來回 ), slide ( 進入後停止 ), scroll ( 反
覆)
Scrollamount: 滑動步伐的寬 ( 速度 )
Scrolldelay: 捲軸捲動快慢
Height: 高度
Width: 寬度
◙ 例子 :
<MARQUEE DIRECTION=LEFT BGCOLOR=“#ff9999” BEHAVIOR=SCROLL
SCROLLAMOUNT=10 SCROLLDELAY=100>
測試
10/21/12 </MARQUEE> P-15
國立清華大學資訊基礎教育教學改進計畫
- 16. 滑鼠移入就會停止的跑馬燈
◙ <marquee onMouseOver=“this.stop()”
onMouseOut=“this.start()” height=“50”
direction=“up” scrolldelay=“4”
scrollamount=“1”> 測試的文字 </marquee>
◙ onMouseOver=“this.stop()” 表示滑鼠移入
就停止
◙ onMouseOut="this.start()" 表示滑鼠離開便
跑動
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-16
- 17. 列表標籤 1
◙ 總共有三種不同列表方式 :
無序列表（ Unordered list ） <UL>
有序列表（ Ordered list ） <OL>
定義列表（ Definition list ） <DL>
◙ 配合 <lh>(list head) 和 <li> (list) 標籤
◙ 每一種方式均可設定 type ，其值可為
Disc
Circle
Square
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-17
- 18. 列表標籤 2-- UL( 無序列表 ) 例
子
◙ UL( 無序列表 ) 例子 :
◙ HTML code:
<UL type=circle>
<LH> 這是標題
<LI> 資應很簡單
<LI> 資應非常簡單
<LI> 資應真的非常簡單
</UL>
◙ 結果顯示 :
這是標題
o 資應很簡單
o 資應非常簡單
o 資應真的非常簡單
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-18
- 19. 列表標籤 3--UL( 無序列表 ) 例子
◙ 也可在 <li> 內插 type 屬性
◙ HTML code:
◙ <UL>
<LH> 這是標題
<LI type=square> 資應很簡單
<LI type=circle> 資應非常簡單
<LI type=disc> 資應真的非常簡單
</UL>
◙ 結果顯示 :
這是標題
資應很簡單
o 資應非常簡單
• 資應真的非常簡單
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-19
- 20. 列表標籤 4--OL( 有序列表 ) 例子
◙ HTML code:
<OL type=3>
<LH> 這是標題
<LI> 資應很簡單
<LI> 資應非常簡單
<LI> 資應真的非常簡單
</OL>
◙ 結果顯示 :
這是標題
4. 資應很簡單
5. 資應非常簡單
6. 資應真的非常簡單
◙ 可以試著將 type=3 改成 type=a 或者 type=i
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-20
- 21. 列表標籤 5--DL( 定義列表 ) 例子
◙ DL 定義列表（ Definition Lists ），其功能就像是在定義一堆特殊名詞。
◙ <dt> 代表「被定義的名詞」（ Definition Term ）， <dd> 代表「說明的
文字（ Definition Data ），這兩者必須成對出現。
◙ HTML code:
<DL>
<DT> 這是標題 1
<DD> 資應很簡單
<DT> 這是標題 2
<DD> 資應真的非常簡單
</DL>
◙ 結果顯示 :
這是標題 1
資應很簡單
這是標題 2
資應真的非常簡單
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-21
- 22. 影像標籤
◙ 格式 : <img src=“xxx”, alt=“xxx”>
◙ 屬性：
src, “ 路徑 / 圖檔檔名”
alt, “ 找不到圖檔出現的文字 , 或滑鼠移到圖片
上方出現的文字”
width, “ 顯示時的寬度 , 百分比或像素值”
height, “ 顯示時的高度 , 百分比或像素值”
border, “ 邊框大小 , 像素值”
align, “ 設定和文字搭配的圖形位置 , 有 top,
bottom, middle,left, right 等”
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-22
- 23. 超連結標籤 1
◙ 格式： <a href=“URL”> 超連結所顯示的文字 </a>
◙ 連結的檔案就是一筆路徑名稱，分為絕對路徑和相對路
徑兩種。
相對 :<a href="index.htm">
絕對 : <a
href=“http://www.cs.nthu.edu.tw/index.htm">
◙ target 屬性 : 可設定網頁顯示視窗或開啟新視窗顯示。
例如 , target=“aaa” ( 設定網頁顯示視窗在 aaa 這個網頁
上 ) 或者 , target=“_blank”( 開啟新視窗顯示 )
◙ 例子 :
<a target=“aaa” href=“http://www.ntu.edu.tw”> 台大首頁 </a>
<a target=“aaa” href=“http://www.nctu.edu.tw”> 交大首頁 </a>
<a target=“_blank” href=“http://www.nthu.edu.tw”> 清大首頁
</a>
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-23
- 24. 超連結標籤 2
◙ 若不想要連結的時候有底線 ( 比較不好看 ?) 可
以加入屬性 STYLE="text-decoration:none"
<A HREF=“index.htm” STYLE=“text-decoration:none”>
沒有底線的連結 </A>
◙ 可配合 <a name=“xxx”>test</a> 使用，例如當
index.htm 檔案裡面有一行是 :
<a name=“head”> 這是開頭 </a>
而這個 index.htm 檔案中的某處寫上
<a href=“#head”> 跳到開頭 </a>
或者 <a href=“index.thm#head”> 跳到開頭 </a>
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-24
- 25. 超連結標籤 3
◙ 可以建立其他媒體的連結，如 wave, mp3, midi,
jpeg, gif, mpeg 等。
◙ 例子 : <a href=“abc.mp3”>abc 音樂撥放 </a>
◙ 以上這些檔案 IE 均有支援，可直接點選開啟，
但會呼叫系統的其他應用程式撥放。
◙ 寄信的超連結寫法 :
<a href="mailto:www@cs.nthu.edu.tw">www</a>
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-25
- 26. 表格製作 1
◙ <table>: 表格，會配合 <tr> 、 <th> 、 <td> 等，其中
<tr> 代表 table row ， <th> 代表 table header ， <td>
代表 table data 。也常會和 <caption> 標籤搭配，代表表
格標題。
◙ <td> 和 <th> 的差別是 <th> 中的字體是粗體且置中。
◙ <caption> 屬性 align 可為 top or bottom, 預設值 top ，如
<caption align=bottom> 標題 </catpion>
◙ <table> 屬性 : border ( 邊界的寬度 ) 、 align( 位置 ) 、
width( 寬 ) 、 height( 高 ) 、 cellspacing( 儲存格之間的
距離 ) 、 cellpadding( 表格資料到儲存格之間的距離 ) 、
border color(border 背景顏色 ) 、 bgcolor( 表格背景顏
色 ) 等。
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-26
- 27. 表格製作 2
◙ Border: 邊界的寬度，以 pixel 為單位
◙ Align: 決定該表格在文件中的位置， left 、 center 、
right.
◙ width 、 height : 表格的寬、高，可用百分比或 pixel 表
示
◙ Bordercolor: border 的背景顏色， #xxxxxx, x 為 16 進位
值，也可以寫為 bordercolor=green
◙ Bgcolor: 表格的背景顏色，寫法同上。
◙ Cellspacing: 每個表格之間的距離，以 pixel 為單位
<table border=10 cellspacing=20>
◙ Cellpadding: 表格資料到表格框的距離，以 pixel 為單位
<table border=20 cellpadding=30>
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-27
- 28. 表格製作 3
◙ 在 <td> 標籤內，我們可以使用 colspan 或
rowspan 的屬性，來合併數個儲存格。
◙ Rowspan: 列之間的合併。
◙ Colspan: 行之間的合併。
◙ 例子 :
<table border=3>
<tr><td>A</td>
<td rowspan=2> 上下兩格合成一格 </td>
<td>B</td></tr>
<tr><td>C</td> <td>D</td></tr>
<tr> <td colspan=3> 左右三格合成一格 </td></tr>
</table>
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-28
- 31. 常用符號
◙ 空白表示 :   (non-blank space)
◙ 大於 : >
◙ 小於 : <
◙ 雙引號 : " ( 單引號直接打 ‘ 即可 )
◙ & : &
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-31
- 32. HTML 程式註解表示
◙ 註解表示 : <!-- your comments -->
◙ Browser 不會去處理註解裡面所寫的內容
◙ 背景聲音
首頁中加入背景音樂的格式：
<embed src=“xxx.wav" width=100 height=30
autostart=true loop=flase>
</embed>
Ps. Autostart, 一開啟即撥放 , loop, 循環撥放
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-32
- 33. Frame 框架 1
◙ <frameset>~</frameset> 所包含的即為一個框架區域範圍。
例如以下程式 :
<FRAMESET COLS=4*,16*>
<FRAME SRC=“first.htm" NAME="left">
<FRAME SRC=“second.htm" NAME="right">
</FRAMESET>
◙ 上例中， cols 表示此框架要以“行”的方式切割，另一個屬性則是
rows ，表示此框架要以“列”的方式切割。
◙ <FRAMESET COLS=4*,16*> 的表示方式和 <FRAMESET
COLS=20%,80%> 的效果是一樣的。 * 為其單位，表示這個框架有
兩個 frames ，其中一個分配到 4 個 * 的空間，另一個分配到 16* 的
空間，這是因為百分比的總合需為 100% ，若以百分比來計算，遇
到要分成 3 個 frames 就會比較不好寫，而以 * 表示會方便的多，如
平均分配三行 <FRAMESET COLS=1*,1*,1*>
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-33
- 34. Frame 框架 2
◙ 上例中， <FRAME SRC=“first.htm”
NAME=“left”> 表示左邊 frame 是 first.htm 這個
檔案，而它的名字為 left 。 <FRAME
SRC=“second.htm” NAME=“right”> 則以此類推
。
取名字的用意是 你可以指定要將某個連結秀在
哪一個 frame 上，如 <a href=aaa.htm
target=right>aaa.htm</a>
◙ 如何顯示 在 2 個行的框架內各有 2 列和 3 列的
frames 呢 ? 如以下圖形，一個 IE 可同時瀏覽多
個網頁
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-34
- 37. Form ( 表單 ) 1
◙ Form ( 表單 ) 設計可以讓使用者進行資料填寫
或選取的功能，之後傳送至 Server 端處理，通
常需搭配 ASP 、 PHP 或 CGI 方面的程式。
◙ <form> 通常搭配 <input> 標籤，如下例 :
<FORM action="mailto:test@yahoo.com.tw" method="post">
名字： <INPUT type=text value="test"><br>
密碼： <INPUT type=password><br>
性別： <INPUT name="s" type=radio value=" 男 "> 男
<INPUT name="s" type=radio value=" 女 " checked> 女 <br>
<INPUT type="submit" value=" 送出 ">
<INPUT type="reset" value=" 重新輸入 ">
</FORM>
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-37
- 38. Form ( 表單 ) 2
◙ <form> 需搭配 </form> 結尾，而 <input> 則不需
要。
◙ <form> 可以指定其 submit 之後所要使用的程式
，以上例則是啟動系統的收發信軟體。
◙ <input> 可以設定許多屬性，常見的如下 :
Type = “text” ( 預設值 ) or “password” or “radio” or “checkbox” or
“submit” or “reset” 等
Value 則是此 input 的外在面貌。
◙ 上例結果 :
10/21/12 國立清華大學資訊基礎教育教學改進計畫 P-38
