ICT-old-ch19-converted.pptx

19.1 超文本標示語言的介紹
 簡介
 大部分網站都是由多種元素所構成，包括文本、圖像、動畫、
聲音及視像。
 當你在網頁瀏覽器輸入某網頁的劃一資源定位（URL）或按下
其超連結時：
 網頁瀏覽器會隨即傳送一個「請求」到該網頁所在的網伺服器。
 若該網頁存在，網伺服器便會將它傳送到你的瀏覽器。
 接着，瀏覽器會解譯該網頁文件內的代碼，並將其內容按代碼的
描述顯示在瀏覽器上。
 超文本標示語言 (HTML)
 它在 1991 年由「萬維網之父」TimBerners-Lee 創立。
 是第一種用以製作網頁的語言。
 至今，HTML 仍是其中一種最常用以編寫網頁的語言。
 字面上，超文本標示語言的意思如下：
 超文本是指有能力連結到其他文件的任何文本。
 它不一定指在網頁上的文本。
 文書處理器內的說明工具便是一個典型的例子。
 我們可以透過工具內的連結來逐步找到協助。
 標示語言
 不是一種程序語言
 一種用來定義文本、圖像和網頁上各種元素特性的語言。
 它的作用是告訴網頁瀏覽器該怎樣將一個網頁顯示在屏幕上。
 標示語言可分為：
 HTML
 XML
 XHTML
 MathML
 DHTML

 標示語言
 只要系統內的網頁瀏覽器支援該標示語言，網頁便能夠正常地顯示出
來。
 標示語言具有跨平台的特性。
 它能夠在不同的平台上運作及可由一平台被帶到另一平台上繼續運作。
 HTML 文件
 基本上是一種文字文件。
 以.htm 或.html 為副檔名。
 我們可以利用文本編輯器（如 Windows 的記事本）來建立和修改它。
 我們可使用一些網頁編寫工具來製作 HTML 網頁，如：
 Adobe Dreamweaver
 Microsoft Expression Web
 HTML 標記的概念
 HTML 提供一系列稱為「標記」的符號。
 用以定義網頁內不同元素的外貌和特性。
 所有標記都包含在角括號「<>」內。
 大部分標記都以一對的形式出現，只有小部分以單獨形式運作。
 「開始標記」表示某格式效果的開始。
 「結束標記」表示該格式效果的結束。
 結束標記與其開始標記十分近似，只是在開始標記的開頭加上一個
斜號「/」。
 若標記是一對的話，我們應將我們想要加上效果的文字放在開始標
記和結束標記之內。
HTML 碼瀏覽器顯示
粗體 粗體
斜體 斜體

 HTML 標記是沒有大小寫之分的。
 所以 和 在功能上沒有任何分別。
 HTML 文件的基本結構
起始部分
主體部分
HTML 文件的基本結構
 <HTML>…</HTML>
 每個 HTML 文件都是包含在 <HTML> 及</HTML> 之內。
 它包含兩個主要部分：
 起始部分
 主體部分
 <HEAD>…</HEAD>
 起始部分包含在 <HEAD> 及</HEAD> 之內。
 當中可以包括該網頁文件的標題、額外的手稿程序函數，以及其他用
以描述該文件特性的資訊。
 網頁文件的標題應包含在<TITLE> 及</TITLE> 之內。
 文件的標題會被顯示在瀏覽器視窗的標題列上。

 <BODY>…</BODY>
 主體部分包含在 <BODY> 及 </BODY> 之內。
 當中包括該網頁文件的主要內容，以及一些用以指示網頁瀏覽器該怎
樣將這些內容顯示在屏幕上的 HTML 標記。
 巢狀結構
 例如：<HEAD><TITLE>…</TITLE></HEAD>
 十分常見，尤其是當有數個效果需要加在同一段內容之上。
 要注意兩對或以上的標記不應交叉重疊。
 例如 <HEAD><TITLE>…</HEAD></TITLE>
 這樣便可能會令文件產生不合預期的效果。
19.2 基本 HTML 標記
 標記
 網頁文件中的一個重要元素。
 可用以定義網頁的版面。
 加入文字以外的不同元素。
 標題標記
 標題標記用來設定網頁的段落標題。
 定義最大的標題：<H1>…</H1>
 定義最小的標題：<H6>…</H6>
 標題的預設格式為粗體。
 在標題前後自動加入額外行距。

 標題標記
<HTML>
<BODY>
<H1>This is Heading 1.</H1>
</BODY>
</HTML>
標題標記
 分段標記
 三個例子：
 段落標記 …
 換行標記 
 已格式化文本標記 <PRE>…</PRE>
 分段標記
 段落標記
 用來定義一段新段落。
 而結束標記 並非必須。
 瀏覽器會在段落前後自動加入額外行距。
 分段標記
 段落標記
<HTML>
<BODY>
The first paragraph.
Still the first paragraph.
The second paragraph.
</BODY>
</HTML>
段落標記

 分段標記
 換行標記
 一個獨立出現的標記，即只有開始標記，而沒有結束標記。
 在下一行接着餘下的內容。
<HTML>
<BODY>
The first line. 
The second line. 
The third line.
</BODY>
</HTML>
換行標記
 分段標記
 已格式化文本標記
 可如實顯示所有在標記內輸入的文本，包括額外的空格（即空鍵）及
分行（即「Enter」鍵）。
 整段已格式化文本的前後會自動加入額外行距。
 在這對標記內，因為瀏覽器會自動將分行轉為換行。
 分段標記
 已格式化文本標記
<HTML>
<BODY>
<PRE>
I love Hong Kong!
This is my home!
</PRE>
</BODY>
</HTML>
已格式化文本標記
 置中標記
 置中標記 <CENTER>...</CENTER> 可將任何網頁元素置於該行
的中間。
<HTML>
<BODY>
<CENTER>
This is the centre of
this line.
</CENTER>
</BODY>
</HTML>
置中標記

 水平分隔線標記
 用來定義一條水平分隔線。
 可用於替網頁在視覺上分成數個部分。
 標記的前後會自動加入額外行距。
<HTML>
<BODY>
<HR>
In between two
horizontal rules
<HR>
</BODY>
</HTML>
水平分隔線標記
 註解標記
 任何註解（例如某段 HTML 碼的用途）都可以加在標記  之內。
 標記內的內容會被瀏覽器略過，而不會顯示在瀏覽器視窗上。
 註解標記
<HTML>
<BODY>

The above line is not
displayed.
</BODY>
</HTML>
註解標記
 常用的文本格式標記
 一些常用的文本格式及其 HTML 標記，包括粗體、斜體、畫底線、
上標及下標。
一些常用的文本格式及其 HTML 標記
HTML 標記文本格式
… 粗體
… 斜體
… 畫底線
… 上標
… 下標

<HTML>
<BODY>
This is bold.
This is italic.
This is underline.
This is
superscript.
This is
subscript.
</BODY>
</HTML>
粗體、斜體、畫底線、上標及下標的例子
 這些文本格式標記可以巢狀結構形式來編寫，以達至更豐富的文本
格式效果。
<HTML>
<BODY>
This is bold and
italic.
This is italic and
underline.
</BODY>
</HTML>
以巢狀結構編寫不同的文本格式
 字型標記
 …
 可以用來定義文本的其他格式，例如字型大小、字體及文本顏色。
 字型標記
 標記屬性的概念
 標記屬性是一些可供在標記上使用的格式類別。透過利用標記屬性，
我們可以對標記的某些相關屬性進行設定。
 標記屬性的編寫格式如下：
屬性
標記屬性值

 字型標記
 標記屬性的概念
 屬性值若不包含空格，包着屬性值的雙引號就並非必要。
 有些標記擁有屬性，有些則沒有。
 不同的標記可以有同樣的屬性。
 適用於 標記的屬性包括：
 size
 face
 color
 字型標記
 字型大小
 標記內的 size 屬性用來定義文本的字型大小。
 屬性值共有 7 個選擇：
 由 1（最小）至 7（最大）
 3 則是預設值。
 字型標記
 字型大小
<HTML>
<BODY>
Font size: default
Font size: 1
</BODY>
</HTML>
 的七種字型大小
 字型標記
 字體
 標記內的 face 屬性用來定義文本的字體。
 所指定的字體必須預先安裝在用戶的電腦內，瀏覽器才能正確地顯示
該字體。
<HTML>
<BODY>

This is in Times.

This is in Arial.

This is in Courier.
</BODY>
</HTML>
在 中定義三種常用的字體

 字型標記
 文本顏色
 標記內的 color 屬性用來定義文本的顏色。
 它的值可以是常用顏色的名稱或是六數位的十六進制顏色碼。
 顏色的名稱可以是 "red" 、 "orange" 、 "yellow" 、 "green" 、
"blue" 、 "purple" 、 "black" 、 "white" 等。
 若使用顏色碼，我們要在六個數字前加上「#」號，例如：
"#008000" 。
 在 內所設定的文本顏色可以蓋過在 <BODY text>
內所設定的文本顏色。
瀏覽器顯示
 字型標記
 文本顏色
HTML 碼
<HTML>
<BODY>

This is green in
colour.

This is also green in
colour.
</BODY>
</HTML>
兩個在 內設定的不同的值顯示出同一種顏色

2. 基本 HTML 標記
字型標記
 文本顏色
 可以在同一標記內設定多個屬性。
 例如：

This is okay!
 對齊設定
 三種對齊的形式：
 "left" （靠左對齊、預設）
 "right" （靠右對齊）
 "center" （置中）
 要設定對齊效果，可使用 align 屬性。
 這個屬性適用於標題標記、段落標記 ... 及水平分隔線標
記 <HR>。

 對齊設定
<HTML>
<BODY>

This line of text is left-aligned.

This line of text is centre-aligned.

This line of text is right-aligned.
</BODY>
</HTML>
三種對齊效果
 清單標記
 有時候，我們需要用清單展示資訊。
 HTML 有兩種清單可供選擇：
 有序號清單
 每個項目以數字列出
 無序號清單
 每個項目以項目符號列出。
 數字或項目符號都會自動加在每個項目的前端。
 清單標記
 有序號清單
 有序號清單標記 <OL>...</OL> 定義以數字列出的項目清單。
 <LI>...</LI> 標記定義每個清單項目。
<HTML>
<BODY>
<OL>
<LI>Heading Tags</LI>
<LI>Paragraphing Tags</LI>
<LI>Centre Tags</LI>
<LI>Horizontal Rule Tag</LI>
<LI>Comment Tags</LI>
</OL>
</BODY>
</HTML>
有序號清單
 清單標記
 無序號清單
 <UL>...</UL> 定義以項目符號列出的項目清單。
 <LI>...</LI> 標記定義每個清單項目。
<HTML>
<BODY>
<UL>
<LI>Heading Tags</LI>
<LI>Paragraphing Tags</LI>
<LI>Centre Tags</LI>
<LI>Horizontal Rule Tag</LI>
<LI>Comment Tags</LI>
</UL>
</BODY>
</HTML>
無序號清單

 表格標記
 網頁內的表格與試算表內所見的相似，兩者都包含由欄和列所構成
的儲存格。
 可以放置其他多媒體元素，例如圖像和動畫。
 亦可以用來設定整個網頁的版面。
 表格標記
標記描述
<TABLE>…</TABLE>
定義一個表格。
下列標記都是放置在此表格標記之內。
<TR>…</TR>
定義表格的一列。
表格的標題標記及儲存格標記都是放置在此標
記之內。
<TH>…</TH>
定義表格內的一格作標題（非必要的）。
標題內的預設文本格式為粗體及置中。
<TD>…</TD> 定義表格內的一格。
用以建立表格的不同標記及其描述
 表格標記
<HTML>
<BODY>
<TABLE border=1>
<TR><TH>Class</TH><TH>Location</TH></TR>
<TR><TD>5A</TD><TD>Room 501</TD></TR>
<TR><TD>5B</TD><TD>MMLC</TD></TR>
<TR><TD>5C</TD><TD>Computer Room</TD></TR>
</TABLE>
</BODY>
</HTML>
利用不同標記來建立一個表格。
 表格標記
 要注意預設的 HTML 表格是沒有框線的。
 我們可以使用 border 屬性來設定框線的粗幼。

 圖像
 我們可以在網頁內插入圖像，以作為背景圖像或內嵌式圖像。
 背景圖像
 我們可在 <BODY> 標記內利用 background 屬性。
 若要指定整個網頁的背景圖像，我們則可用 <BODY background>
來進行設定。
 例如：
<BODY background="cirlce.jpg">
附有背景圖像的網頁
circle.jpg
 圖像
 背景圖像
 如果圖像的尺寸小於瀏覽器視窗的大小，該圖像會自動複製並覆蓋整
個視窗，形成一個無縫的背景。
 檔案大的圖像則需要較長的時間去下載。
 圖像
 內嵌式圖像
 圖像標記 <IMG> 可用來插入內嵌式圖像。
 圖像的來源則可用 src 屬性來設定。
<HTML>
<BODY>
<IMG src ="beach.jpg">
</BODY>
</HTML>
圖像標記
 超連結
 網頁不可缺少的一個元素。
 讓我們由一個網頁跳至另外一個網頁，無論所連結的網頁是否屬於
同一個網站。
 可在文本、圖像、動畫等元素上加上超連結。

 超連結
 錨點標記 <A>...</A>
 用來定義一個超連結。
 被連結的檔案或錨點則可用 href 屬性來設定其來源。
 超連結
 連結到其他網頁或檔案
 透過在 href 屬性內指定網頁或檔案的名稱（或其完整路徑），我
們可以連結到相關的網頁或檔案。
 當按下超連結時，被連結的檔案可以在以下情況中開啟：
 同一個視窗內的同一分頁內
 同一個視窗內的新頁面內
 在一個新的視窗內
 超連結
 連結到其他網頁或檔案
<HTML>
<BODY>
<A href="http://www.ilongman.com">
Longman Web Site</A> 
<A href="tabletags.html">
19.2.10 Table Tags</A> 
<A href="logo.jpg">Logo</A> 
<A href="school report.doc">
School Report</A> 
</BODY>
</HTML>
利用錨點標記連結到其他檔案。
 超連結
 連結到同一個網頁上的其他錨點
 可在同一個網頁內由一個錨點連結到另一個錨點。
 我們可在錨點標記加入 name 屬性，並把屬性值設定為被連結的錨點
的名稱。
 例如：<A name="example2">。
 在同一網頁內，利用錨點標記配合 href 屬性來設定一個超連結，而
該屬性值則為先前所設定的錨點名稱。
 例如：<A href="#example2"> 。
 錨點名稱前必須加上「#」號。

 超連結
<HTML>
<BODY>
<A href="#example1">Example 1</A>
 
<A href="#example2">Example 2</A>
 
<A name="example1"></A>
EXAMPLE 1 
This is example 1. 
<A name="example2"></A>
EXAMPLE 2 
This is example 2. 
</BODY>
</HTML>
利用錨點標記連結到同一個網頁上的其他錨點。
 超連結
 若我們想在文本上加上超連結，我們可以在 <A> 及 </A> 之間加入
文本。
 若我們想在圖像上加上超連結，我們可以把 <IMG src> 標記插入在
<A> 及 </A> 之間。
 超連結
<A href="Example7.doc">Example 7</A>
<A href="Example7.doc">
<IMG src="ex7.jpg"></A>
在文本及圖像上加上超連結。
 框
 可以讓瀏覽器視窗在同一時間顯示兩個或以上的網頁。
 一個瀏覽器視窗可以以欄、列或兩者的組合來分割。
 若要設定框的分割和框所指定的網頁，我們需要額外建立一個名為
框群組頁的網頁以貯存這些設定。
 除框設定外，框群組頁一般不包含任何網頁內容。

sr
 框
 框群組標記及框標記
 框群組標記 <FRAMESET>...</FRAMESET> 用來在原有框內定義一
個新的框群組。
 我們可以分別使用 cols 屬性及 rows 屬性來設定一個框群組該被分
割成多少欄和多少列。
 cols 和 rows 的屬性值可以是實際的像素數目、百分比或兩者混用。
 框標記 <FRAME> 是一個獨立出現的標記，用來設定一個框在初被開
啟時所載入的網頁。
 網頁的來源則可用屬性來設定。
 框
<HTML>
<FRAMESET cols="300, 500">
<FRAME src="frame1.html">
</FRAMESET>
</HTML>
<HTML>
<FRAMESET rows="300, 500">
</FRAMESET>
</HTML>
簡單的框群組版面設計
 框
<HTML>
<FRAMESET cols="350, 25%, 350">
</FRAMESET>
</HTML>
簡單的框群組版面設計
 框
 一個瀏覽器視窗可以包含多過一個框群組。
 即框群組可以巢狀結構形式來建立。
<HTML>
<FRAMESET cols="30%, 70%">
<FRAMESET rows="350, *">
</FRAMESET>
</FRAMESET>
</HTML>
框1 框3
框2
巢狀結構的框群組

 框
 在以上例子中，「*」號是用來代表沒有尺寸要求的長度。
 即該欄或列會被自動分配所剩餘的空間。
 一個框內若有圖像和表格等其他元素，而它們的尺寸超過了框的
大小：
 水平或垂直的卷軸便會出現在該框內。用戶可透過捲動卷軸，以檢視
整個框內的內容。
 不應使用實際的像素數目，而使用百分比來設定框內元素的高度及闊
度。
19.3 顏色表示方法
 顏色
 每種顏色可以其顏色名稱或以六數位的十六進制顏色碼來表示。
 當我們想要精確地選擇某種顏色時，我們就要使用顏色碼。
 顏色碼的概念：按 RGB 顏色模型的相加原則來調色。
 即是將三原色（紅綠藍）相加而合成另一種顏色。
RGB 顏色模型
 顏色
 六數位的十六進制顏色碼包括三部分。
 首兩個數字代表紅色的強度。
 中間的兩個數字代表綠色的強度。
 最後的兩個數字代表藍色的強度。
 這三種顏色的強度值的範圍由 00 至 FF（十六進制）不等，即相等
於十進制數系的 0 至 255。
 顏色
顏色 RGB 值（十六進制）
紅 #FF0000
黃 #FFFF00
綠 #00FF00
藍 #0000FF
黑 #000000
白 #FFFFFF
顏色名稱及其對應RGB 值的例子

ICT-old-ch19-converted.pptx

Recommended

Recommended

More Related Content

Similar to ICT-old-ch19-converted.pptx

Similar to ICT-old-ch19-converted.pptx (18)

More from liutommy1

More from liutommy1 (20)

Recently uploaded

Recently uploaded (6)

ICT-old-ch19-converted.pptx