Html02

A00338 網頁設計

課程教師：王弘宗
教學網站 : http://course2011.dyndns.biz/
電子郵件 : htwang05@gmail.com

Oct 21, 2012

HTML 網頁語言
超文件標記語言 HTML(HyperText Markup Language) 是
WWW 上最常用來編寫網頁的語言。 HTML 文
件的重要功能之一是它能透過超連結
( Hyperlink) ，將網路上的檔案連接起來，使用
者就可以輕易地從一個網頁跳到另一個網頁
來瀏覽資訊。

HTML 的基本常識

基本上， HTML 語法通常是有頭有尾的，例
如： <head> 和 </head> ，當然也會有例外的，
例如： < br /> ，而且大小寫是可以用的，例如
： < Head > 、 < hEAd > 或 < BR /> 。但大家要
記著，每一個語法也要有 "<" 和 ">" 包著，
如此才能運作！

HTML 的相關主題
• 帳號及主機位址 • 序列標籤
• Html語法及網頁素材 • 網頁插入多媒體
• 網頁架構 • 內嵌(EMBED)
• 標題標籤 • 超連結語法
• 設定字體大小標籤 • 製作表格
• 圖片與背景音樂 • Script
• 插入圖片 • CSS
• 排版標籤 • Server端語言
• 分隔標籤

操作網站
• 主機
– ( 網站 ) 名稱 : bb1002046.no-ip.biz
– 位址 (IP) : 120.107.77.xxx
• 你的網站 URLLinux 系統
大小寫有區別路徑檔名
– http://bb1002046.no-ip.biz/test/my.html
• 首頁的檔名
資料夾內的 index.html or index.htm or
index.php …

參考網站
• http://chinese.allproducts.com.tw/html/
• http://wamp.dyndns.biz/webpage/
– http://wamp.dyndns.biz/webpage/html/
– http://wamp.dyndns.biz/webpage/css/
• http://wamp.dyndns.biz/webpage/cat/
– http://wamp.dyndns.biz/webpage/js/
– http://wamp.dyndns.biz/webpage/java/

網頁架構
<HTML>
　 <HEAD>
　　 <TITLE> 網頁製作教學 </TITLE>
　　　 </HEAD>
　 <BODY>
　　 BODY 之間則為主要語法所在，也
是網頁的主要呈現部分。
　 </BODY>
</HTML>

標題標籤

原始碼呈現結果

<h1> 標題一 </h1> 標題一
使用方法：
<h1> 標題內容 </h1> <h2> 標題二 </h2> 標題二

<h3> 標題三 </h3> 標題三

<h4> 標題四 </h4> 標題四

<h5> 標題五 </h5> 標題五

<h6> 標題六 </h6> 標題六

設定字體大小標籤
 使用方法： <font size=3> 文字內容 </font>
 標籤解說：
 <font size=1> （最小）
 <font size=7> （最大）
 <font size=+1> 文字內容 </font> ，其意思就是說
：比預設字大一級。
 font size=+2 （比預設字大二級），或是 font
size=-1 （比預設字小一級），
 以一般而言，預設字體多為 3 。
 預設定體標籤 <basefont size=4>( 預設為 4)

字體大小設定
<font size=1> 字體一 </font> 或是
字體一

<font size=-2> 字體一 </font>

<font size=2> 字體二 </font> 或是
字體二
<font size=-1> 字體二 </font>

<font size=3> 字體三 </font> 或是
字體三
<font size=+0> 字體三 </font>

<font size=4> 字體四 </font> 或是
字體四
<font size=+1> 字體四 </font>

<font size=5> 字體五 </font> 或是
字體五
<font size=+2> 字體五 </font>

<font size=6> 字體六 </font> 或是
字體六
<font size=+3> 字體六 </font>

<font size=6> 字體七 </font> 或是

<font size=+4> 字體七 </font> 字體七

字型變化標籤
<b> 粗體 </b> 粗體
<i> 斜體 </i> 斜體
<u> 底線 </u> 底線
<sup> 上標 </sup> 上標

<sub> 下標 </sub> 下標

<tt> 打字機 </tt> 打字機
<blink> 閃爍 </blink> （ ie 沒效果）閃爍
<em> 強調 </em> 強調
<strong> 加強 </strong> 加強
<samp> 範例 </samp> 範例
<code> 原始碼 </code> 原始碼
<var> 變數 </var> 變數
<dfn> 定義 </dfn> 定義
<cite> 引用 </cite> 引用
<address> 所在地址 </address> 所在地址

文字顏色設定
RGB
<font color="#ff0000"> 紅 </font> 紅色的字喔！
<font color="#ff8000"> 橙 </font> 橙色的字喔！
<font color="#ffff00"> 黃 </font> 黃色的字喔！
<font color="#00ff00"> 綠 </font> 綠色的字喔！
<font color="#0080ff"> 藍 </font> 藍色的字喔！
<font color="#0000a0"> 靛 </font> 靛色的字喔！
<font color="#8000ff"> 紫 </font> 紫色的字喔！
<font color="#000000"> 黑 </font> 黑色的字喔！
<font color="#c0c0c0"> 灰 </font> 灰色的字喔！

圖片與背景音樂

 設定顏色：
 <Body Bgcolor=#ff0000>….</body>
 <Body Bgcolor=red>…</body>
 設定背景圖 ( 可用 gif,jpg(jpeg),png,bmp)
 <Body Background=“back.gif”>…</body>
 使用圖形檔要注意連結路徑
 如果圖片具「透明」效果，則背景色會顯現出來
 也可以連結到別人的網站中的某一個圖檔

插入圖片

 語法： <IMG SRC=“ 圖檔” >
 <IMG SRC=“ 圖檔” align=left> 靠左
 <IMG SRC=“ 圖檔” width=24 height=24
border=2> 有邊框的圖
 圖片和文字的排列關係：
 http://dye.mychat.to/teach/qa_102.htm

檔案的路徑問題
相對位
 <img src=“tad.gif”> 圖文均在同一目錄址
 <img src=“images/tad.gif”> 圖在網頁下一層
images 目錄
 <img src=“ ../tad.gif”> 圖在網頁上一層
 <img src=http://........../tad.gif> 圖在網路上的 url
絕對
位址

排版標籤
 文字置左、置中、置右


<p align="left"> 文字靠左 </p> 文字靠左

<p align="center"> 文字置中
文字置中
</p>

<p align="right"> 文字靠右
文字靠右
</p>

分隔標籤
 使用方法：強制斷行標
籤 <br> 、強制分段標籤原始碼呈現結果
<p>
 標籤解說：我們在寫文
章時，有時候在特定的這是一個斷行的範例
這是一個斷行的範例
地方會強迫斷行 <br> 看出來了嗎
（ <br> ），或是在寫完？
看出來了嗎？
某一段的時候便會分段
（ <p> ）。
這是一個分段的範例
這是一個分段的範例

<p> 基本上他會比
基本上分段會比斷行
斷行還多空出一行
還多空出一行

分隔線標籤
 使用方法：上一段文字內容 <hr> 下一段文字內容
 標籤解說：利用 <hr> 這個標籤便可產生一條橫分
隔線。另外，其有些屬性分別說明如下：
 http://chinese.allproducts.com.tw/html/#tagindex

序列標籤
 無序標籤原始碼呈現結果

<UL type= “circle” >
<LI> 姓名：傑克昇
• 姓名：傑克昇
<LI> 生日：
• 生日：
1974/11/21
1974/11/21
<LI> 星座：天蠍座
• 星座：天蠍座
</UL>

前面的符號一定是要圓形的嗎？不，我們可以加入 TYPE=" 形狀名稱 " 屬性
來改變其符號形狀，一共有三個選擇： DISK （實心圓）、 SQUARE （小
正方形）、 CIRCLE （空心圓）三種（由於本頁使用 CSS 故僅於 Netscape
看得出效果。）：

有序標籤


<OL>
<LI> 姓名：傑克昇
1. 姓名：傑克昇
<LI> 生日： 1974/11/21
2. 生日： 1974/11/21
<LI> 星座：天蠍座
3. 星座：天蠍座
</OL>

一更有五種符號： 1 （數字）、 A （大寫英文字母）、 a （小寫
英文字母）、 I （大寫羅馬字母）、 i （小寫羅馬字母）等五種：

指定起始值

原始碼呈現結果原始碼呈現結果

<OL TYPE="A"> <OL START="8">
<LI> 姓名：傑 <LI> 姓名：傑克
克昇昇
A. 姓名：傑克昇 8. 姓名：傑克昇
<LI> 生日： <LI> 生日：
B. 生日： 9. 生日：
1974/11/21 1974/11/21
1974/11/21 1974/11/21
<LI> 星座：天 <LI> 星座：天蠍
C. 星座：天蠍座 10. 星座：天蠍座
蠍座座
</OL> </OL>

網頁插入多媒體

 AVI 檔：因為 AVI 是 IE 支援的格式，所以可
以使用 <IMG> 語法
 <IMG DYNSRC=“test.avi” Loop=infinite>
 背景音樂：
http://www.class2u.idv.tw/html/bgsound.htm
 IE 的指令： <BGSOUND SRC=“ 音樂檔” >

內嵌 (EMBED)

 網頁除了能夠顯示多媒體的連結外，也可以直
接將多媒體「內嵌」在網頁內，所使用的標籤
是 embed 。
 電腦本身必須具備播放檔的支援程式。
 可內嵌音樂影片
 .mid , .ra , .ram , .rm , .mpg , .swf , .wav , .au , .aif

當插入不同撥放屬性影音檔案時，會出現該撥放程式之控制器。
※瀏覽器必須有安裝網頁所撥放之音樂之撥放程式 ( 支援該副檔名類型撥放程
式 ) 才可以正常撥放。

法項　　目參數說明

src 連結位址
可支援撥放：
volume
音量 .mid (Midi 音效檔 )
0~100
.ra (real player's file)
.ram (real player's file)
width 寬度
.rm (real player's file)
.mpg (media player's file)
插入影音 height 高度
.swf (flash's file)
<embed>
Hidden 隱藏 (True) .wav ( 音效檔 )
.au ( 音效檔 )
infinite .aif ( 音效檔 )
重複撥放 .avi (media player's file)
loop .mov (Quick Time's file)
自訂撥放
次數數值

超連結 (Hyper Link)
 <A HREF=“http://cs.hccvs.hc.edu.tw/~ko”> 我的網站
</A>
 顯示：我的網站
 <A HREF=“mailto:ko@cs.hccvs.hc.edu.tw”> 寫信給
我 </A>
 寫信給我
 <A HREF=“telnet://ptt.cc”> 台大 BBS 站 ( 批踢
踢 )</A>
 台大 BBS 站 ( 批踢踢 )
 <a href=“http://www.yahoo.com.tw”><img
src=“yahoo.gif”></a>

<html>
框架頁 <head>
<title> 新網頁 </title>
</head>

<frameset rows="25%,75%"
frameborder="NO">
<frame src="1.html" name="a">

<frameset cols=“30%,70%"
frameborder="NO">
<frame src="2.html" name="b">
<frame src="3.html" name="c">

</frameset>
<body>
<p> 此網頁使用框架，但是您的瀏
覽器不支援框架。 </p>
Index.html 的架構及語法 </body>

</html>
範例網站：
http://www.sani362.com/test/test/

Script

 VBScript
 http://dob.tnc.edu.tw/dir.php?t=22
 JavaScript
 http://dob.tnc.edu.tw/dir.php?t=6&at

製作表格

 利用 <TABLE> 這個標籤來告訴電腦，這是一
個表格
 BORDER=1 這參數是設定此表格的框線粗細為
1。
 一組 <TR></TR> 是設定一橫列的開始。
1

 一組 <TD></TD> 則是設定一個欄位。當然，文字就
原始碼
是要擺在這裡面。 <TABLE BORDER=1>
<TR><TD>1</TD></TR>
</TABLE>

CSS
<style>

</style>

CSS 樣式表
http://www.study-area.org/coobila/category_CSS_u6A23_u5F0F_u8868.html
語法教學
http://www.pt.ntu.edu.tw/hmchai/PTcomputer03_2/hCSS/CSSintroduction.htm#link
CSS 範例
http://dob.tnc.edu.tw/dir.php?t=2&at=

Server 端語言
 常用的有： ASP 、 PHP 、 JSP

範例實作 1
• 這是 INDEX.HTM 網頁。第八行的 <FRAMESET> 和第十六行的
</FRAMESET> 代表製作分割視窗。在第八行的 ROWS=”23%” 屬性代表
將視窗為列的分割，並且其上面的視窗列高為整個列高的 23%﹔ 而
FRAMESPACING=”0” 表視分割線為 0 。
• 第九行的 <FRAME NAME=”UP” SRC=”UP.HTM” TARGET=”MAIN”
SCROLLING=”AUTO”>
• 表視分割視窗的屬性名子為 UP ，而分割視窗放置 UP.HTM 網頁，而
SCROLLING=”AUTO” 表是捲軸為自動顯視。
• 第十行的 <FRAME NAME=”MAIN” SRC=”DOWN.HTM”
TARGET=”_SELF” SCROLLING=”AUTO”>
• 表視分割視窗的屬性名子為 MAIN ，而分割視窗放置 DOWN.HTM 網頁
，而 SCROLLING=”AUTO” 表是捲軸為自動顯視。

範例實作 1
• 這是 DOWN.HTM 的網頁。
• 標籤的特性是成對出現的而且第 2 個標
籤要有 / 符號，表示標籤結束。例如第 1
行的 <HTML> 和第 26 行的 </HTML> 。
第 2 行的 <HEAD> 標籤和第 8 行的
</HEAD> 標籤，第 9 行的 <BODY> 標
籤和第 25 行的 </BODY> 標籤。標籤間
的內容就是資料。

• 第一行的標籤和第二十六行的表示這裏面的內容這
是網頁的語言。
• 第二行的標籤和第八行的表示這裏面的是網頁資訊
。
• 第三行表示這是台灣地區 CONTENT=”ZH-TW’ ，第
四行表示這是大五碼的中文字 CHARSET=BIG5 。
• 第五行 <TITLE> 和第六行的 </TITLE> 表示網頁的
標題。
• 第九行到第二十五行為放著網頁的內容，而第九行
的

• <BODY BGCOLOR=”#00FFFF” 表示網頁的屬
性顏色為 #00FFFF( 黃色 ) 。
• 第十、第十一行和第二十四行為表格標籤
<TABLE> ，第十行的表格標籤屬性
BORDER=”1” 表示表格邊界為 1﹔
CELLPADDING=”0” 表示欄位的邊界為 0﹔
CELLSPACING=”0” 表示表格線的寬度為 0﹔
WIDTH=”100%” 表示表格為瀏覽器的 100% 寬
度。第二十四行的 </TABLE> 表示表格結束。
• 第十二行和第二十三行的標籤表示表格的一列
，裏面的內容就是欄位以及欄位資料。

• 第十二到第二十三行表示表格的一列，第十三行
<TD> 和第十四行的 </TD> 代表了欄位，而裏面
欄位的資料是員工﹔第十五行的 <TD> 和第十六行
的 </TD> 代表了欄位，而裏面欄位的資料是計劃﹔
第十七行 <TD> 和第十八行的 </TD> 代表了欄位
，而裏面欄位的資料是部門﹔第十九行的 <TD> 和
第二十行的 </TD> 代表了欄位，而裏面欄位的資
料是參與﹔第二十一行的 <TD> 和第二十二行的
</TD> 代表了欄位，而裏面的資料是首頁。
• 第十四行的 <A TARGET=”MAIN”
HREF=”DOWN.HTM”> 員工 </A> 表示當按下員
工時會超連結到 DOWN.HTM 網頁，並且把網頁
放到 MAIN 分割視窗。

• 第十六行的 <A TARGET=”MAIN” HREF=” 所
有計劃查詢 .HTM”> 計劃 </A> 表示當按下計
劃時會超連結到所有計劃查詢 .HTM 網頁，並
且把網頁放到 MAIN 分割視窗。
• 第十八行的 <A TARGET=”MAIN” HREF=” 所
有部門查詢 .HTM”> 部門 </A> 表示當按下部
門時會超連結到所有部門查詢 .HTM 網頁，並
且把網頁放到 MAIN 分割視窗。
• 第二十行的 <A TARGET=”MAIN” HREF=” 員
工參與計劃與工作時數 .HTM”> 參與 </A> 表
示當按下參與時會超連結到員工參與計劃與工
作時數 .HTM 網頁，並且把網頁放到 MAIN 分
割視窗。

• 第二十二行的 <A TARGET=”_TOP”
HREF=”INDEX.HTM”> 首頁 </A> 表示當按下首
頁時會超連結到 INDEX.HTM 網頁，並且把網頁
取代整個視窗。
• 除了我們自己設定分割視窗的名子，也有網頁的
預設值。
• 當 TARGET=”_TOP” 時，會將超連結的網頁取
代整個視窗。
• 當 TARGET=”_SELF” 時，會將超連結的網頁連
在所在的分割視窗。
• 當 TARGET=”_BLANK” 時，會開啟新的瀏覽器
來顯示超連結的網頁。
• 當 TARGET=”_PARENT” 時，會將超連結的網
頁取代超連結的主頁框。

* HTML 標籤的注意事項 - 1
• HTML 標籤是使用小於「 < 」和大於「 > 」符號夾著
指令，稱為標籤，大部分標籤都是成雙成對（部分標
籤是例外，例如： <br /> ），在上一節的 HTML 架構
是使用 <html> 開頭和 </html> 結尾，可以看出標籤成
雙成對的特性。
• HTML 標籤如果不是成對的，例如： <br> 標籤，其建
議寫法為 <br /> ，這就是 XHTML 標籤的寫法。
• HTML 標籤並不區分英文大小寫，例如：
<head> 、 <HEAD> 和 <Head> 都代表相同的標籤。
• HTML 標籤的屬性值需要使用雙引號包圍，例如：
width="20" 和 height="30" ，這也是 XHTML 標籤的寫
法。

* HTML 標籤的注意事項 - 2
• HTML 網頁內容是一般文字檔案，不過 Enter 鍵的換行
在網頁顯示時並沒有作用，瀏覽程式會自行調整版面
，如果文件內容需要強迫換行，請使用 <br/> 標籤。
• HTML 網頁的連續空白在瀏覽程式會自動簡化成一個
空白。
• HTML 的註解文字是使用「

* HTML 的 meta 標籤使用 –
設定使用的編輯工具
• 在 <meta> 標籤設定編輯 HTML 網頁使
用的編輯工具，此時的 name 屬性為
GENERATOR ， content 屬性為編輯器名
稱，例如： Dev-PHP ，如下所示：
<meta name="GENERATOR" content="Dev-
PHP“ />

設定網頁使用的字元集
• 對於網頁來說，因為各國文字的編碼不
同，為了讓瀏覽程式能夠顯示正確的網
頁內容，在 <meta> 標籤可以設定使用語
系的字元集。
• 在 <meta> 標籤的 http-equiv 屬性值
Content-Type 可以設定字元集，例如：設
定繁體中文 big5 的 content 屬性內容，如
下所示：
<meta http-equiv="Content-Type"

自動更新網頁內容
• http-equiv 屬性另一個重要功能是設定一
段時間後，自動轉址到指定的 URL 網址
。例如：在等待 5 秒鐘後，自動轉址到
test.php 的 PHP 程式，如下所示：
<meta http-equiv="refresh"
content="5;URL=test.php“ />

HTML 的常用標籤
• 3-2-1 HTML 的標頭標籤
• 3-2-2 文字格式標籤
• 3-2-3 清單項目標籤
• 3-2-4 圖片和超連接標籤
• 3-2-5 網頁表格標籤

HTML 的標頭標籤
• 在 HTML 的 <head> 區塊屬於標頭標籤
，可以使用相關子標籤來定義一些網頁
資訊，其說明如下表所示：
標籤說明
<title>…</title>
網頁標題，顯示在瀏覽程式上方標題列的內容
<base>
指定基底的 URL 網址
<meta>
設定伺服端或客戶端所需的識別資訊
<link>
連接其他網頁，例如： CSS 外部樣式表檔案

文字格式標籤 - 1
• HTML 網頁內容主要是由文字所組成，
編排文字內容的各種格式效果標籤，其
說明如下表所示：
標籤說明
<hn>…</hn>
顯示粗體的標題文字， n 的值是 1~6 ，表示不

<b>…</b> 同的尺寸，愈小愈大
粗體字
<i>…</i>
斜體字
<u>…</u>
底線字
<s>…</s>
刪除線，在文字中間有一條線
<strike>…</strike>
另一種刪除線

文字格式標籤 - 2
<sub>…</sub>
下標字
<sup>…</sup>
上標字
<tt>…</tt>
打字機字體
<big>…</big>
放大字體的字型
<address>…
使用地址的字體
</address>
<small>…</small>
縮小字體的字型
<center>…</center>
文字內容是置中對齊
<font>…</font>
使用 face 、 size 和 color 屬性設定編排使用的字

<basefont> 體、尺寸和色彩
指定網頁的基本字型
<br/>
強迫文字換行
<hr/>
插入一條水平線
<p>…</p>
使用文字段落編排

文字格式標籤 - 範例
• HTML 文字格式標籤可以編排網頁的文
字內容，位在標籤中的字串就是需要套
用預設編排效果的文字內容，如下所示
：
<b>PHP 與 MySQL 網頁設計範例教本 </b>
<i>PHP 與 MySQL 網頁設計範例教本 </i>
<u>PHP 與 MySQL 網頁設計範例教本 <u>
• 上述 HTML 標籤分別使用粗體、斜體和
底線字來編排文字內容。

清單項目標籤 - 說明
• HTML 標籤提供多種清單編排，使用條
列方式來編排文字內容，其說明如下表
標籤說明
所示：
<ul>…</ul>
項目符號
<ol>…</ol>
項目編號
<dl>…</dl>
定義式清單
<menu>…</menu>
選單式清單
<dir>…</dir>
目錄式清單
<lh>
清單標題
<li>
清單項目
<dt>
定義式的項目名稱
<dd>
定義式的項目說明

清單項目標籤 - 範例
• 在清單項目標籤最常使用的是 <ol> 和
<ul> 標籤，清單項目是使用 <li> 標籤，
如下所示：
<ol>
<li>Java Applet
<li>JavaScript
<li>VBScript
<li>DHTML
</ol>

圖片和超連接標籤 - 說明
• 在網頁可以插入圖片和超連接來建立多
媒體網頁內容，其相關標籤的說明，如
下表所示：
標籤說明
<a>…</a>
在網頁插入超連接
<img>
在網頁插入圖片
<bgsound>
在網頁插入背景音樂
<embed>
在網頁插入 MIDI 音樂檔
<marquee>…</marquee>
跑馬燈文字

圖片和超連接標籤 - 超連接標籤

• 在 HTML 網頁建立超連接是使用 <a> 標
籤，其基本語法如下所示：
<a href="protocol://domain/file#bookmark"> … </a>
• 上述標籤的 href 屬性可以設定超連接連
接的目的地。

圖片和超連接標籤 - 圖片標籤
• 在網頁插入圖片是使用 <img> 標籤，其
基本語法如下所示：
<img src="filename" width="value"
height="value" align="left | right“ />
• 上述標籤屬性的說明，如下表所示：
屬性說明
src
圖片檔案名稱和路徑，可以使用 gif 、 jpg 或 png 格式的圖

width 片檔案
圖片寬度，可以是點數或百分比。
height
圖片高度，可以是點數或百分比。
align
圖片和文字在同一列顯示的編排位置， left 是在文字的左方

網頁表格標籤 - 說明
• HTML 網頁表格標籤是由一組標籤所組
成，可以在網頁中顯示表格編排效果，
相關標籤的說明，如下表所示：
標籤說明
<table>…</table>
網頁表格
<tr>…</tr>
表格中的一列
<td>…</td>
表格中的一個儲存格
<caption>…</caption>
表格標題

網頁表格標籤 - 語法
• 網頁表格的每一列是使用 <tr> 和 <td> 標籤組合而成，
一組 <tr></tr> 標籤是表格的一列，在每一列中使用一
組 <td></td> 標籤建立一個儲存格，其基本語法如下所
示：
<table border="value">
<tr>
<td>........</td>
…….
</tr>
<tr>
<td>.........</td>
</tr>
……
</table>

網頁表格標籤 - 表格精靈
• Dev-PHP 提供表格精靈來幫助我們建立
HTML 表格，請在 HTML 網頁中的表格
插入位置按一下，然後執行「工具」→「
插入表格」指令，可以看到「表格精靈
」對話方塊。

Html02

More Related Content

Viewers also liked

Similar to Html02

Html02