HTML簡介、文字的變化、超連結的使用

Download Report

Transcript HTML簡介、文字的變化、超連結的使用 

HTML簡介、文字的變化、超連結
的使用
主講：朱漢琳
課程綱要
一、HTML 的基礎概念
1.
什麼是 HTML？
2.
HTML 文件的基本結構。
3.
編寫 HTML 文件的工具。
二、常用的 HTML 標籤介紹
1.
HTML 頭部（HEAD）標籤
2.
文字格式設定
3.
超連結
什麼是 HTML？
• HTML 代表超文字標記語言(Hyper Text Markup Language)。
• HTML的標準是由國際的組織 W3C（The World Wide Web Consortium）
發所佈，最新的版本為 4.01。
• 由許多標籤（tag）所構成的元素（element）組合而成。
• 是一種純文字檔案，可以使用各種文字編輯器來進行編輯。
• 副檔名為.htm或.html。
什麼是 HTML？
• 透過 HTTP ( HyperText Transfer Protocol) 網路通訊協定，便
能夠在世界各地透過 WWW (World Wide Web) 的架構做跨平台的
交流。
• 以 HTML 格式所儲存的文件檔案，經由瀏覽器（如 Internet
Explorer或 Netscape Navigator）顯示出來。
Request
User
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>
字體大小
---->
標籤（Tag）
•
標籤的使用 ：利用起始標籤<標籤名稱> 與結束標籤</標籤名稱> 所包夾起來的
文句，即被賦予這個標籤所代表的意義。瀏覽器在解讀出這些標籤之後，便可
根據這些標記的意義來對其所包夾的文句進行編排。例如，<HTML> 與
</HTML> 是要告訴瀏覽器，其所包夾的文件內容是一份 HTML 文件；由 < H2>
與 </H2> 所包夾的文句需以第二種標題形式（字形較大、粗體等）來顯示。
•
其他注意事項：
– 標籤及屬性都沒有大小寫的區分。
– 屬性質的引號用「雙引號」或「單引號」均可。
– 瀏覽器對HTML文件中的空白字元將有特殊的處理。如果使用一個以上的空
白字元，第二個及以後的空白將被忽略，僅認可第一個空白字元。如果您
希望保留更多的空白，有以下二個方式：
1) 使用「全形」的空白字元。
2) 以「&nbsp;」來代表一個空白字元。（需要兩個空白字元時就連
續使用&nbsp;&nbsp;）
特殊字元表示法
•
由於在HTML中，<、>、&、空白 等符號會被用來當成標記使用，因此，
當瀏覽器讀到這些符號時，會自動把它們當成標記而無法正確顯示出來。
所以，若您要在瀏覽器中顯示這些符號，必需使用以下之表示法：
“
&
&quot;
<
>
&lt;
空白
&nbsp;
&amp;
&g;
※例如要正確顯示<table>，您就應該輸入 &lt;table&gt;。
如想要查詢其他的特殊字元表示法，可參考此網頁：
http://neural.cs.nthu.edu.tw/jang/books/html/text2.asp?title=26%20特殊文字。
HTML 文件的基本架構
※ HTML 文件由 < HTML> 與</HTML> 所包夾，其中包括 [檔頭] 與 [主
體] 兩部分：
• 檔頭：由 < HEAD> 與 </HEAD> 所包夾的部分，其中最重要的是<
TITLE> 與 </TITLE> 所包夾的文件主題，這個主題會出現在瀏覽器的
Title Bar。
• 主體 ：由 < BODY> 與 </BODY> 所包夾的部分，所有的網頁內容（包
含文字、圖片、多媒體物件，甚或是其他的標籤）都會放在這一對標
籤之內。
代表文件的開始
<html>
<head>
用來提供文件整體資訊(文件的頭部)
<title>網頁的標題</title> 代表文件的標題
</head>
<body>
文件內容部分(文件的主體body區段)
網頁的內容
</body>
</html>
代表文件結束
檔頭區
主體區
編寫 HTML 文件的工具
• 文字編輯器 ：
– 任何平台上的任何文字編輯器都可使用，例如 Windows 裡的
Notepad、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=“色彩名稱或色碼(#rrggbb）” 指定背景顏色
文字色彩類：
1) text="色彩名稱或色碼（#rrggbb）"
指定一般文字顏色
2) link="色彩名稱或色碼（#rrggbb）"
指定連結文字顏色
3) alink="色彩名稱或色碼（#rrggbb）"
指定連結（連結中）顏色
4) vlink="色彩名稱或色碼（#rrggbb）"
指定連結（連結後）顏色
例如：<body bgcolor="#008080" text="#800000" link="#009900" vlink="#9999FF">
常用的 HTML 標籤介紹（註解）
2. <!-- 註解文字 -->：通常我們會在程式原始碼中加入一些說明文字，
作為程式碼的附註。使用「<!--」及「-->」兩符號，在此兩符號中
間的文字就會被瀏覽器視為註解而不被執行或顯示。
如：
<!--單行註解 -->
<!-多行註解
-->
<!------------------多行註解
-------------------->
常用的 HTML 標籤介紹（文字格式標籤之1）
3. 文字格式設定相關標籤：
標籤
功能
語法
屬性
<p>
段落
<p>新的段落</p>
align=“ left” （靠
左）或 “center”
（置中）或
“right” （靠右）
<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”
（置中）或
“right” （靠右）
常用的 HTML 標籤介紹（文字格式標籤之2）
標籤
<font>
功能
設定文字格式
語法
<font>文字</font>
屬性
•SIZE=“字型大小”
•COLOR=“字型顏
色”(#RRGGBB)
• FACE=“字型”
<b>
將所標記的文字字型
加粗
<b>字型加粗</b>
--
<i>
將所標記的文字變成
<i>斜體字</i>
--
斜體
<u>
將所標記的文字加上
底線
<u>加底線</u>
--
<strike>
將所標記的文字畫線
刪除
<strike>畫線刪除
</strike>
--
<big>
將所標記的文字放
字體<big>放大
</big>
--
大
常用的 HTML 標籤介紹（文字格式標籤之3）
標籤
功能
語法
屬性
<small>
將所標記的文字縮小
文字<small>縮小
</small>
--
<sup>
將所標記的文字變成上標
文字<sup>上標</sup>
--
<sub>
將所標記的文字變成下標
文字<sub>下標</sub>
--
<strong>
將所標記的文字以強調粗
體顯示
<strong>強調粗體
</strong>
--
<em>
將所標記的文字以強調斜
體顯示
<em>強調斜體</em>
--
常用的 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-mainadm.htm 檔案
常用的 HTML 標籤介紹（超連結之2）
類別
相對路徑
（相對於
目前文件
的路徑）
範例
說明
text.html
表同一層目錄下的 text.html 檔案
./text.html
表同一層目錄下的 text.html 檔案
image/text.html
image 子目錄下的 text.html 檔案
../index.html
表示上一層目錄下的 index.html 檔案
../html40/cover.html
表示上一層目錄下 html40 子目錄的
index.html 檔案
註：通常我們用「.」代表現在目錄，而用「..」代表上一層目錄。
常用的 HTML 標籤介紹（超連結之3）
•
一般而言，除非有特殊需求，否則在 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=“書籤名稱”>這是書籤所在位置
Target：指定超連結文件開啟的框架。
如 <a href="http://www.nuk.edu.tw" target="_blank">高雄大學</a>
附錄一、HTML 色彩表示法
•
HTML文件中有許多屬性可以控制色彩，包含文件的底色、文字的顏色、表格或線
條的顏色......等等。
此時您可以直接使用色彩的英文單字名稱來表示，例如：yellow 表示黃色、pink 表
示粉紅色。不過在大多數情況下，我們會使用 #rrggbb 的格式來表示色彩值。他的
原理如同調色盤一般，rr 代表紅色，gg 代表綠色，bb代表藍色，共有六個十六進
位的數值，每一個值都可以是 0 至 F 的值，數值愈大及代表該顏色的強度愈強。
因此，#FF0000就表示紅色，#00FF00就表示綠色，#0000FF就是藍色了。
 常見的色彩及其色碼數值如下表所示：
顏色
色碼值
顏色
色碼值
黑色
#000000
白色
#FFFFFF
棕色
#A52A2A
灰色
#808080
橘色
#FFA500
紫色
#800080
銀色
#C0C0C0
金色
#FFD700
黃色
#FFFF00
海軍藍
#000080
青綠色
#00FFFF
天藍色
#F0FFFF
 您也可以善用以下常見的色彩單字名稱：
顏色
單字
顏色
單字
紅色
Red
黃色
Yellow
綠色
Green
藍色
Blue
靛色
Teal
紫色
Purple
黑色
Black
白色
White
銀色
Silver
灰色
Gray
相關網站
• W3C HTML 4.01 規格書：http://www.w3.org/TR/html4/
• W3 Schools：http://www.w3schools.com/html/default.asp
• Taiwan Cnet 簡單好用的 HTML 標籤與屬性：
http://taiwan.cnet.com/builder/authoring/story/0,2000020511,2000850
2,00.htm
• wells 的HTML 線上教學網站：
http://stuck.myweb.hinet.net/c/index.htm