HTML 簡介、文字的變化、超連
結的使用
課程綱要
一、 HTML 的基礎概念
1.
什麼是 HTML ？
2.
HTML 文件的基本結構。
3.
編寫 HTML 文件的工具。
二、常用的 HTML 標籤介紹
1.
HTML 頭部（ HEAD ）標籤
2.
文字格式設定
3.
超連結
什麼是 HTML ？
• HTML 代表超文字標記語言 (
H
yper
T
ext
M
arkup
L
anguage) 。
• HTML 的標準是由國際的組織 W3C （ The World Wide Web Consortiu
m ）發所佈，最新的版本為 4.01 。
• 由許多標籤（ tag ）所構成的元素（ element ）組合而成。
• 是一種純文字檔案，可以使用各種文字編輯器來進行編輯。
• 副檔名為 .htm 或 .html 。
什麼是 HTML ？
• 透過 HTTP ( HyperText Transfer Protocol) 網路通訊協定，
便能夠在世界各地透過 WWW (World Wide Web) 的架構做跨平
台的交流。
• 以 HTML 格式所儲存的文件檔案，經由瀏覽器（如 Internet E
xplorer 或 Netscape Navigator ）顯示出來。
Request
Response
WWW Server
HTML 文件的基本結構
• 一個簡單的網頁：
CH01.htm
原始檔如下：
<HTML> <HEAD> <TITLE> 網頁的標題 </TITLE> </HEAD> <BODY> 網頁的內容 </BODY> </HTML>標籤（ Tag ）
•
標籤是由一個「 < 」及「 > 」符號所構成，例如 < HTML> 、 < TITLE> 。
•
標籤的結構可分為兩種：一種是成對的標籤，另一是單一標籤。
– 成對標籤：由起始標籤（ opening tag ）及結束標籤（ closing tag ）組成。
大部分的標籤都屬於此類。例如： <font>…</font> （代表字型的設定）。
( 註：所謂的結束標籤，是在原標籤文字前加上一個「 / 」，例如： </font> ，通常 表示該標籤特性的結束。 )– 單一標籤：顧名思義，就是只有起始標籤。例如： <hr> （代表水平線）、
<br> （代表斷行）。
•
標籤屬性 ：大部分的標籤都可以藉由標籤的屬性來更改呈現方式，標籤屬性的
格式為 [ 屬性名稱＝屬性值 ] ，標籤屬性介於 [ 標籤名稱 ] 與 [>] 之間，例如
：
<font size=‘4’> 字體大小 </font> ----> 字體大小
<font size=‘5’> 字體大小 </font> ---->
字體大小
•
標籤的使用 ：利用起始標籤 < 標籤名稱 > 與結束標籤 </ 標籤名稱 > 所包夾起
來的文句，即被賦予這個標籤所代表的意義。瀏覽器在解讀出這些標籤之後，
便可根據這些標記的意義來對其所包夾的文句進行編排。例如， <HTML> 與 </
HTML> 是要告訴瀏覽器，其所包夾的文件內容是一份 HTML 文件；由 < H2
> 與 </H2> 所包夾的文句需以第二種標題形式（字形較大、粗體等）來顯示。
•
其他注意事項：
–
標籤及屬性都沒有大小寫的區分。
–
屬性質的引號用「雙引號」或「單引號」均可。
–
瀏覽器對 HTML 文件中的空白字元將有特殊的處理。如果使用一個以上的
空白字元，第二個及以後的空白將被忽略，僅認可第一個空白字元。如果
您希望保留更多的空白，有以下二個方式：
1) 使用「全形」的空白字元。
2) 以「 」來代表一個空白字元。（需要兩個空白字元時就連
續使用 ）
標籤（ Tag ）
特殊字元表示法
•
由於在 HTML 中， < 、 > 、 & 、空白 等符號會被用來當成標記使用，
因此，當瀏覽器讀到這些符號時，會自動把它們當成標記而無法正確顯
示出來。所以，若您要在瀏覽器中顯示這些符號，必需使用以下之表示
法：
“
"
&
&
<
<
>
&g;
空白
※ 例如要正確顯示 <table> ，您就應該輸入
<
table
>
。
如想要查詢其他的特殊字元表示法，可參考此網頁：
http://neural
HTML 文件的基本架構
※ HTML 文件由 < HTML> 與 </HTML> 所包夾，其中包括 [ 檔頭 ]
與 [ 主體 ] 兩部分：
• 檔頭：由 < HEAD> 與 </HEAD> 所包夾的部分，其中最重要的是 <
TITLE> 與 </TITLE> 所包夾的文件主題，這個主題會出現在瀏覽器
的 Title Bar 。
• 主體 ：由 < BODY> 與 </BODY> 所包夾的部分，所有的網頁內容
（包含文字、圖片、多媒體物件，甚或是其他的標籤）都會放在這一
對標籤之內。
<html> 代表文件的開始 <head> 用來提供文件整體資訊 ( 文件的頭部 ) <title> 網頁的標題 </title> 代表文件的標題 </head> <body> 文件內容部分 ( 文件的主體 body 區段 ) 網頁的內容 </body> </html> 代表文件結束 檔頭區 主體區• 文字編輯器 ：
– 任何平台上的任何文字編輯器都可使用，例如 Windows 裡的 N
otepad 、 Wordpad 等，甚至可使用 Word 並以純文字模式儲存
檔案亦可。使用這些文字編輯器來直接撰寫並儲存符合 HTML
格式的文件，比較能得到簡潔、洗鍊、單純的 HTML 文件。缺
點是必須熟悉 HTML 格式的各種標記與其屬性。
• HTML 設計軟體 ：
– 市面上有許多 HTML 設計軟體，例如 Microsoft FrontPage 、
Netscape Composer 、或 Macromedia Dreamweaver 等，這些軟
體提供良好的圖形介面，讓使用者能以所見即所得（ WYSIWYG
, What You See Is What You Get ）的方式，很容易地設計、編排
出所想要呈現的網頁，並且以 HTML 的格式來儲存檔案，功能
也較為強大。但所產生的 HTML 檔案較為複雜，不易閱讀。
常用的 HTML 標籤介紹（檔頭區標籤）
一、檔頭區的相關標籤：
通常在標頭區中包含以下幾個標籤，這些標籤都是可有可無的
。
<base>
使用在標頭，用來定義所有連結網頁的原始路徑<link>
定義目前的文件與其它文件之間的關聯，經常用來匯入階 層樣式定義檔案之用<meta>
主要係用來描述文件的參考資訊，其內容並不會顯示在瀏 覽器的畫面上<script>…</script>
在 HTML 文件中插入瀏覽器端 Script<style>…</style>
定義階層樣式表<title>…</title>
文件的標題常用的 HTML 標籤介紹（ Body ）
二、主體區的相關標籤：
1. <body> ：代表網頁文件主體，用來設定與整份文件相關的屬性，
例如：畫面的顏色、各種文字的顏色等等。
在 <body> 標籤中，常用的屬性可以分成幾類：
背景類： 1) background=" 圖檔檔名 " 指定背景圖 2) bgcolor=“ 色彩名稱或色碼 (#rrggb b ）” 指定背景顏色 文字色彩類： 1) text=" 色彩名稱或色碼（ #rrggbb ） " 指定一般文字顏色 2) link=" 色彩名稱或色碼（ #rrggbb ） " 指定連結文字顏色 3) alink=" 色彩名稱或色碼（ #rrggb b ） " 指定連結（連結中）顏色 4) vlink=" 色彩名稱或色碼（ #rrggb b ） " 指定連結（連結後）顏色 例如：<body bgcolor="#008080" text="#800000" link="#009900" vlink="#9999FF">常用的 HTML 標籤介紹（註解）
2. <!-- 註解文字 --> ：通常我們會在程式原始碼中加入一些說明文字
，作為程式碼的附註。使用「 <!-- 」及「 --> 」兩符號，在此兩符
號中間的文字就會被瀏覽器視為註解而不被執行或顯示。
如：
<!-- 單行註解 -->
多行註解
-->
<!---
多行註解
--->
常用的 HTML 標籤介紹（文字格式標籤之
1 ）
3. 文字格式設定相關標籤：
標籤 功能 語法 屬性 <p> 段落 <p> 新的段落 </p> align=“ left” （靠 左）或 “ center” （置中）或 “ rig ht” （靠右） <br> 跳行 第一行 <br> 第二行 <br> --<h1>～ <h6> 提供六種層次的標題格式 <h1> 標題 1</h1> <h2> 標題 2</h2> <h3> 標題 3</h3> <h4> 標題 4</h4> <h5> 標題 5</h5> <h6> 標題 6</h6> align=“ left” （靠 左）或 “ center” （置中）或 “ rig ht” （靠右）標籤 功能 語法 屬性
<font> 設定文字格式 <font> 文字 </font> •SIZE=“ 字型大小”
•COLOR=“ 字型顏色” (#RRGG BB) • FACE=“ 字型” <b> 將所標記的文字字型 加粗 <b> 字型加粗 </b> --<i> 將所標記的文字變成 斜體 <i> 斜體字 </i> --<u> 將所標記的文字加上 底線 <u> 加底線 </u> --<strike> 將所標記的文字畫線 刪除 <strike> 畫線刪除 </strike> --<big> 將所標記的
文字放
大
字體 <big> 放大 </b ig>--常用的 HTML 標籤介紹（文字格式標籤之
2 ）
標籤 功能 語法 屬性
<small> 將所標記的文字縮小 文字 <small> 縮小 </smal
l>
--<sup> 將所標記的文字變成上標 文字 <sup> 上標 </sup>
--<sub> 將所標記的文字變成下標 文字 <sub> 下標 </sub>
--<strong> 將所標記的文字以強調粗 體顯示
<strong> 強調粗體 </s
trong>
--<em> 將所標記的文字以強調斜 體顯示<em> 強調斜體 </em>
--常用的 HTML 標籤介紹（文字格式標籤之
3 ）
常用的 HTML 標籤介紹（超連結之 1 ）
4. 超連結：
• 「絕對路徑」和「相對路徑」：簡單的說，「相對路徑」就是相
對於現在目錄的路徑表示法，因此「相對路徑」所指到的檔案或
目錄，會隨著現在目錄的不同而改變；「絕對路徑」指的是一個
絕對的位置，並不會隨著現在目錄的改變而改變。
類別
範例
說明
絕對路徑
file:///E:/ 文件 /Document.doc 本機 E 槽上的 Document.doc檔案
http://www.nuk.edu.tw/nuk/home-main-adm.htm http://www.nuk.edu.tw 此台 Server 根目錄下 nuk 目 錄中的 home-main-adm.htm 檔案
/nuk/home-main-adm.htm
目前 Server 的 WWW 根目錄 下的 nuk 目錄中的 home-ma in-adm.htm 檔案類別
範例
說明
相對路徑
（相對於
目前文件
的路徑）
text.html 表同一層目錄下的 text.html 檔案 ./text.html 表同一層目錄下的 text.html 檔案image/text.html image 子目錄下的 text.html 檔案
../index.html 表示上一層目錄下的 index.html 檔案
../html40/cover.html 表示上一層目錄下 html40 子目錄的 inde
x.html 檔案
註：通常我們用「 . 」代表現在目錄，而用「 .. 」代表上一層目錄。
•
一般而言，除非有特殊需求，否則在 HTML 文件中，我們都盡量用相
對路徑來表示網址。使用相對路徑的好處是：當我們將包含許多網頁的
目錄轉移到另一個位置時，雖然絕對位置改變，但是在此目錄下的網頁
相對位置並沒有改變，因此我們並不需要大幅修改網頁內的網址。
•
超連結除了可以連結到網頁以外，我們也可以連結到其他檔案，例如可
以連結到數位音樂檔（ MP3 或 MIDI ）、聲音檔（ WAV ）、影像檔
（ GIF 或 JPEG 或 PNG ）…等，當連結的檔案被送到用戶端時，用
戶端會根據檔案類型而呼叫不同的應用程式來播放或呈現。
•
超連結標籤： <a>
– 功能：可連結到另一文件或同一文件中的書籤。
– 語法： <a></a>
– 範例： <a href="http://www.nuk.edu.tw">
連結到高雄大學首頁
</a>
常用的 HTML 標籤介紹（超連結之 4 ）
– 常用屬性解說
： Href=URL ：指定超連結所連結之文件的相對或絕對位置。
* HTTP URL ：如 http://www.nuk.edu.tw （若檔名省略表示將讀取 Server 預設的檔名，通常為 index.html 或 default.html ）
* FTP URL ：如 ftp://ftp.tku.edu.tw （若 filename 省略表示將顯示整個目 錄）
* mailto URL ：如 mailto:[email protected] * telnet URL ：如 telnet://bbs.nuk.edu.tw
Name ：指定書籤（ Bookmark ）名稱；連結除了可以跳到其他網頁之外，也 可以在一份長的網頁之中上下跳動。 例如： CH02.htm
<a href=“# 書籤名稱” > 連結書籤 </a> ………..
<A name=“ 書籤名稱” > 這是書籤所在位置
