Microsoft Word - ªþ¿ýC.doc

Size: px

Start display at page:

Download "Microsoft Word - ªþ¿ýC.doc"

隆段昝
5 years ago
Views:

1 C HTML 語法介紹 C-1 認識 HTML C-2 C-2 HTML 標籤運用基本觀念 C-7 C-3 文字版面編排標籤 C-13 C-4 文字格式標籤 C-23 C-5 表格的建立 C-27 C-6 其他常用標籤 C-38

2 C-1 認識 HTML C-1-1 簡介 HTML HTML 是一種語法相當易學易懂的標記語言, 以 HTML 語法所撰寫出的檔案稱做 HTML 文件儲存 HTML 文件時, 並未運用特別的檔案格式, 僅是運用 htm 或 html 副檔名儲存純文字檔所以您可以使用任何文書編輯軟體建立編輯 HTML 文件, 如 :Windows 中最簡單的文書編輯軟體 NotePad 此外, 除了可從本書中學習到 HTML 語法外, 另外一個捷徑就是多觀摩他人所撰寫網頁的原始碼當運用 IE 瀏覽網頁時, 若想要察看目前瀏覽網頁的原始碼, 可以執行檢視功能表 / 原始碼選項, 即可將目前瀏覽之網頁的原始碼, 開啟在 NotePad 中檢視 C-1-2 HTML 的標籤與元件觀念 HTML 的標籤 HTML 控制資料顯示格式的方式, 是透過兩個兩個一組的 HTML 標籤 ( 亦可稱之為標記 ) 將欲控制的文字包夾於中間每個一組 HTML 標籤的開頭標籤之語法為 < 標籤名稱 >, 結尾標籤之語法則為 </ 標籤名稱 > HTML 文件中 HTML 標籤控制文字顯示的語法如下所示 < 標籤名稱 > 欲控制文字 </ 標籤名稱 > 舉例來說, 以下 HTML 敘述, 將控制 ( 或稱定義 ) 位元文化這幾個字在瀏覽器顯示時, 為一個文字段落 <P> 位元文化 </P> C-2

3 C 元件的觀念當您用一組 HTML 標籤將一段文字包夾在中間時, 這段文字與包夾文字的 HTML 標籤將被稱之為一個元件所以, 前述控制位元文化四個字, 在瀏覽器顯示為一個段落的敘述, 將被稱之為一個元件 HTML 語法介紹<P> 位元文化 </P> 在大部份的 HTML 標籤中, 還可以設定一些屬性, 進行更細微的控制以下敘述將利用 Align 屬性, 控制位元文化這四個字所組成的段落, 採用置中方式對齊 <P Align=Center> 位元文化 </P> HTML 的階層觀念由於在 HTML 語法中, 每個由 HTML 標籤與文字所形成的元件, 還可以包含另一組元件, 因此, 整個 HTML 文件就像是一個大元件, 包含了許多小元件其中所有 HTML 文件最外層的元件是由標籤所建立而在標籤所建構的元件中, 還包含了兩個主要的子元件, 這兩個子元件是由 <HEAD> 標籤與 <BODY> 標籤所建立,<HEAD> 標籤所建立元件的內容為文件標題, 而 <BODY> 標籤所建立的元件內容為文件內容所以, 所有 HTML 文件的最基本架構都應該如下所示 <HEAD> </HEAD> <BODY> </BODY> 上述 HTML 語法, 若以圖示的方式表示, 其架構則如下圖所示 HTML HEAD BODY C-3

4 從上圖中, 可以輕易地瞭解到整個 HTML 文件的所有資料, 均被建立為一個個的元件, 並組織為一個樹狀結構當利用 HTML 標籤定義元件時, 定義標籤不可交錯, 否則將造成錯誤, 在以下語法中,<HEAD> 標籤與 <BODY> 標籤彼此交錯, 這樣是不對的當標籤交錯時, 將無法區別兩個元件的範圍 <HEAD> <BODY> </HEAD> </BODY> 錯誤! 兩個標籤交錯超連結經過以上說明, 相信您已經瞭解 HTML 語法標示文件的觀念與基本架構另外,HTML 文件還有一非常重要的觀念, 那就是超連結 (Hyperlink) 超連結的觀念可說是 HTML 文件中, 最具影響力的觀念, 而 HTML 文件就是因為具備了超連結的觀念, 才能提供使用者無遠弗界的網路連結能力讓任一網頁, 都可以任意連結至世界任何角落提供的網路資源在網頁中的超連結, 將以下加底線, 並以不同顏色與網頁中其他文字區隔當滑鼠游移到超連結上時, 將會變成一個手形的圖示, 告訴您可以點選該文字, 連結至其他網頁 C-4

5 超文字與多媒體在網頁中除了各種變化的文字, 也可以置入圖片影像聲音動畫等多媒體資料, 這也就是 HTML 語法之所以被稱為超文字 (Hypertext) 的原因這些多媒體資料同樣是利用 HTML 標籤, 標示成為文件內的一個元件以下語法是一個建立圖片元件的 HTML 敘述 C HTML 語法介紹<IMG src=" 其他要點另外, 在 HTML 文件中還有一些比較特殊的小觀念, 您必須要注意 : HTML 文件中文字的換行 ( 按下 Enter 鍵分行 ), 當顯示在瀏覽器時, 並不會有換行的效果若網頁中的文字欲換行, 必須在文件中使用換行的 <BR> 標籤文件中的文字間, 不論您鍵入幾個空白鍵, 在網頁中都將只顯示為一格空白若您還是希望在 HTML 文件中使用空白時, 可以利用代表一空白當 n 個串連在一起時, 便會在網頁上顯示 n 個空白在 HTML 的標籤中, 英文大小寫的意義相同, 也就是說與 <html> 是一樣的使用不同瀏覽器瀏覽同一份 HTML 文件時, 顯示的網頁可能不盡相同, 因為不同的瀏覽器解釋 HTML 語法時會有些許差異雖然 HTML 是一個標準的語法, 各軟體廠商撰寫的瀏覽器, 通常會基於這個標準語法, 再自訂一些只能在該廠牌瀏覽器才能正常顯示的特殊語法, 所以如果您希望所有瀏覽器, 都能正常瀏覽完成製作的網頁時, 應該避免使用這些自訂的語法, 在本附錄所介紹的是最新的 HTML 4.0 語法 C-5

6 C-1-3 HTML 的開發環境前面曾經提到,HTML 文件其實是一個副檔名為.htm 或.html 的純文字檔因此, 所有文字編輯軟體都可以用來撰寫 HTML 文件, 如 :Windows 系統的 Notepad 小作家甚至 Word 等不過, 由於 WWW 的日益盛行, 目前在 Windows 下出現了許多視覺化的網頁開發工具, 如 :FrontPage DreamWeaver 等, 運用這些網頁開發軟體進行網頁的設計是相當方便快速的或許也正因為如此, 導致許多會運用這些工具撰寫網頁的開發者, 並不熟悉建構網頁的 HTML 語法由於本書學習 HTML 語法的目的, 是為了建立開發 ASP 網頁的基礎, 因此, 建議您應使用簡單的文書編輯軟體或者 Visual InterDev 進行網頁的開發, 而不要運用前面提及的視覺化開發工具在本書解說 HTML 的過程裡, 將提供您一個小小的 HTML 語法撰寫環境 HTML 小助教, 讓您能很容易地進行 HTML 語法的練習, 並立即看到檢視結果關於 HTML 小助教的說明, 請參考下一節的說明 C-1-4 HTML 小助教學任何事, 最快的方法就是一邊學一邊練習對於本節的範例或者您想測試結果的 HTML 敘述, 都可以直接利用本書所提供的 HTML 小助教進行練習當將本書範例光碟按照光碟安裝說明, 安裝到您的電腦上後, 便可開啟瀏覽器, 並鍵入以下的超連結路徑, 即可啟動 HTML 小助教 C-6

C 啟動後的畫面如下所示, 整個畫面可分為兩個部份, 下半部的有一個輸入區, 您可在該區中輸入欲練習的 HTML 語法當按下檢視按鈕後, 上半的檢視區將顯示出鍵入之 HTML 語法的執行結果 HTML 語法介紹檢視區輸入區按下此鈕可立即執行輸入的 HTML 語法, 並在檢視區看到結果 C-2 HTML 標籤運用基本觀念 C-2-1 HTML 標籤的語法在前面的

7 C 啟動後的畫面如下所示, 整個畫面可分為兩個部份, 下半部的有一個輸入區, 您可在該區中輸入欲練習的 HTML 語法當按下檢視按鈕後, 上半的檢視區將顯示出鍵入之 HTML 語法的執行結果 HTML 語法介紹檢視區輸入區按下此鈕可立即執行輸入的 HTML 語法, 並在檢視區看到結果 C-2 HTML 標籤運用基本觀念 C-2-1 HTML 標籤的語法在前面的 C-1-2 節, 已經簡單的說明過,HTML 標籤大部份是以兩個為一組, 並以 < 與 > 符號標示標籤名稱在每個 HTML 標籤中, 還可以運用一些屬性, 控制 HTML 標籤所建立的元件這些屬性將置於建立元件的開始標籤裡, 因此, 定義元件的開始標籤之基本語法如下 : < 標籤名稱屬性 1=" 值 1" 屬性 2=" 值 2" > 而結束標籤的建立方式則為 </ 標籤名稱 > C-7

8 在 HTML 文件中某個元件的完整定義語法如下 : < 標籤名稱屬性 1=" 值 1" 屬性 2=" 值 2" > 元件資料 </ 標籤名稱 > C-2-2 HTML 文件基本架構一個典型的 HTML 文件之結構如下 : <HEAD><TITLE> 標題文字 </TITLE></HEAD> <BODY> </BODY> 上面是一個標準的 HTML 文件基本架構, 不過目前並沒有內容而上述文件結構所使用的 HTML 標籤, 被稱之為非主體標籤, 原因是這些標籤所控制的, 都不是所顯示網頁內容的格式各標籤的功能說明請參考以下內容標籤一個 HTML 文件, 事實上是一個由標籤所建立的元件, 所有文件的內容都應該被包含在此標籤中而在這個元件中, 整個文件將被區分為兩大部份, 一是由 <HEAD> 標籤所建立的文件標頭, 另一個則是由 <BODY> 標籤所建立的文件主體 <HEAD> 標籤由 <HEAD> 標籤所定義的元件中, 並不放置網頁的任何內容, 而是放置有關這份 HTML 文件的資訊, 例如 : 文件的標題編碼方式 URL 等等這些資訊大部分是提供索引辨認或其他應用之使用 C-8

C <TITLE> 標籤此標籤使用於 <HEAD> 標籤中, 用於標示此 HTML 文件的標題名稱而被標示的標題名稱, 則顯示在瀏覽器的標題列中範例 C-1:<TITLE> 標籤的使用 HTML 語法介紹[ 執行結果 ] 下圖為執行結果, 從執行結果可以看到, 定義於 <TITLE> 標籤的文件標題, 顯示在瀏覽器的標題列 [ 網頁內容 ] HTML 文件 :Title.

9 C <TITLE> 標籤此標籤使用於 <HEAD> 標籤中, 用於標示此 HTML 文件的標題名稱而被標示的標題名稱, 則顯示在瀏覽器的標題列中範例 C-1:<TITLE> 標籤的使用 HTML 語法介紹[ 執行結果 ] 下圖為執行結果, 從執行結果可以看到, 定義於 <TITLE> 標籤的文件標題, 顯示在瀏覽器的標題列 [ 網頁內容 ] HTML 文件 :Title.htm <HEAD> 003 <TITLE>HTML 文件的標題文字 </TITLE> 004 </HEAD> 005 <BODY> 006 <P>TITLE 標籤的使用 </P> 007 </BODY> 008 <BODY> 標籤由 <BODY> 標籤所建立的元件, 為此 HTML 文件的內容主體此 HTML 文件欲顯示的所有文件內容, 都將放在這個元件中, 此標籤屬性的說明, 請參考下一節的說明在這個元件中, 可以利用各種 HTML 標籤, 控制網頁顯示內容的格式編排與效果關於各種應用於控制 HTML 文件格式的標籤說明, 請參考以下 C-3 節至 C-5 節的說明 C-9

10 C-2-3 文件主體標籤 <BODY></BODY> 定義於 <BODY> 標籤內的範圍就是 HTML 文件的主體, 也就是網頁的主要內容, 並依照各種 HTML 標籤的控制, 將這些內容呈現在瀏覽器的視窗中而設定於 <BODY> 標籤內的屬性, 可用於控制整個頁面的顯示方式, 以下敘述將針對常用屬性加以說明 bgcolor 屬性控制文件的背景顏色, 語法為 : bgcolor=" 顏色 " 顏色可以用兩種方法表示, 您可以直接指定顏色的英文名稱, 常用的基本顏色名稱列於下表英文名稱顏色英文名稱顏色 Black 黑 Purple 紫 White 白 Olive 橄欖綠 Gray 灰 Navy 深藍 Silver 銀灰 Aqua 水藍 Red 紅 Lime 青綠 Green 綠 Maroon 茶色 Blue 藍 Teal 墨綠 Yellow 黃 Fuchsia 紫紅另外, 也可以利用 16 進位數值的方式指定顏色, 其語法如下 : #RRGGBB RR 代表紅色 GG 代表綠色 BB 代表藍色, 並以 00 到 FF 的值, 表示三種顏色成分的多寡, 以指定出這三種原色將以多少的成分組成新顏色, 下例將設定網頁背景為綠色 : <body bgcolor="#00ff00"> C-10

11 C 範例 C-2: bgcolor 屬性的設定以下 HTML 敘述將設定背景顏色為藍色的 HTML 文件 <BODY bgcolor=blue> HTML 語法介紹文件背景為藍色 </BODY> 上述 HTML 敘述鍵入 HTML 小助教後的畫面如下 : 文件的背景為藍色 text 屬性此屬性用於控制網頁內文字的顏色, 語法為 : text= 顏色值有關顏色值的設定, 請參考前面 bgcolor 屬性的說明 C-11

12 link 屬性網頁中未被點選過之超連結的顏色, 語法為 : link= 顏色值有關顏色值的設定, 請參考前面 bgcolor 屬性的說明 vlink 屬性設定網頁中已經連結過之超連結的顏色, 其語法如下 vlink= 顏色值有關顏色值的設定, 請參考前面 bgcolor 屬性的說明 alink 屬性這項屬性將設定超連結在點選時的顏色, 通常只有在壓下滑鼠按鍵時一閃而過 alink= 顏色值有關顏色值的設定, 請參考前面 bgcolor 屬性的說明 background 屬性指定做為 HTML 文件背景的圖片, 可以使用的圖檔格式為 GIF 與 JPG, 其語法如下 : background=" 檔案名稱與路徑 " 假若引用網頁所在目錄下一層 Sub 子目錄中, 名為 bg.gif 的圖檔做為 HTML 文件背景時, 此屬性的設定語法如下 : background="sub/bg.gif" 有關檔案路徑引用的說明, 請參考 C-6-1 節 C-12

13 C C-3 文字版面編排標籤 C-3-1 標題標籤 <Hn></Hn> <Hn> 標籤用於標示網頁中的標題文字, 被標示的文字將以粗體的方式 HTML 語法介紹顯示在網頁中, 語法如下 : <Hn> 標題文字 </Hn> n 值的設定範圍為 1 至 6, 以表達 6 個層次的標題範例 C-3:<Hn> 標籤的使用以下 HTML 敘述將建立出六種層級的標題 <BODY> <H1> 標題 1</H1> <H2> 標題 2</H2> <H3> 標題 3</H3> <H4> 標題 4</H4> <H5> 標題 5</H5> <H6> 標題 6</H6> 以上為網頁中可用的各等級標題 </BODY> 上述 HTML 敘述鍵入 HTML 小助教後所顯示的效果如下 : C-13

14 Align 屬性在 <Hn> 標籤中較為常用的屬性為 align, 此屬性用於控制標題的對齊方式, 其語法如下 : align= left 或 center 或 right 以上三個設定值, 將依序把標題文字的水平對齊方式設定為靠左對齊置中對齊以及靠右對齊範例 C-4:align 屬性的設定以下 HTML 敘述將示範不同的標題對齊方式 <BODY> <h1 align=center> 置中標題 </h1> <h1 align=left> 靠左標題 </h1> <h1 align=right> 靠右標題 </h1> </BODY> 上述 HTML 敘述鍵入 HTML 小助教後所顯示的效果如下 : C-14

15 C C-3-2 段落標籤 <P></P> 利用 <P> 標籤所標示的文字將為同一個段落的文字在瀏覽器中, 不同段落文字間將以一行空白加以間隔, 以便區別出文字的不同段落, 語法如下 : HTML 語法介紹<P> 文字 </P> 在 <P> 標籤中較常用的屬性為 align 屬性, 透過此屬性您可以控制段落的對齊方式, 其語法如下 : align= left 或 center 或 right 以上三個設定值, 將依序把段落文字的水平對齊方式設為靠左對齊置中對齊以及靠右對齊範例 C-5:< P> 標籤與 align 屬性的使用以下 HTML 敘述將示範不同的標題對齊方式 <BODY> <P align=center> 置中段落 </P> <P align=left> 靠左段落 </P> <P align=right> 靠右段落 </P> </BODY> 上述 HTML 敘述鍵入 HTML 小助教後所顯示的效果如下 : C-15

16 C-3-3 換行標籤 <BR> 換行標籤是一個沒有結尾標籤的標籤,HTML 文件中任何位置只要使用了 <BR> 標籤, 當文件顯示於瀏覽器中時, 該位置之後的文字將顯示於下一行請您注意, 在一般的文字檔中, 只要按下鍵盤上的 Enter 鍵便會產生一個分行字元, 使文字檔中的文字分行顯示但是在 HTML 文件中, 由 Enter 鍵所產生的分行字元, 瀏覽器並不會視為分行符號因此, 若您欲將某位置後的文字顯示於下一行時, 必須在該位置使用 <BR> 標籤才能達到目的當然利用 <P> 標籤也可以達到分行顯示資料的效果, 但兩個段落間將以一列空白做為間隔範例 C-6:<BR> 標籤的使用以下 HTML 敘述將示範利用 <BR> 標籤將文字分行顯示 <BODY> 第一行 <BR> 第二行 <BR> C-16

17 </BODY> 上述 HTML 敘述鍵入 HTML 小助教後所顯示的效果如下 : C HTML 語法介紹C-3-4 水平分隔線 <HR> <HR> 標籤將會在網頁上畫出一條橫跨網頁的水平分隔線, 通常可以用於分隔不同的文字段落下面將說明一些常用於控制 <HR> 標籤所建立水平分隔線樣式的屬性 Size 屬性水平線的粗細, 以像素 (pixel) 為單位表示, 以下語法將建立粗細為 10 個 pixel 的水平分隔線 <HR size=10> Width 屬性水平線的寬度, 可以用像素 (pixel) 為單位表示, 也可以使用螢幕的百分比表示以下語法將建立寬度為螢幕寬度 50% 的水平分隔線 <HR width=50%> align 屬性控制水平分隔線的對齊方式, 有置中靠左靠右三種方式語法如下 : align=center 或 left 或 right C-17

color 屬性線條的顏色, 顏色可以用英文名稱或是 16 進位數值設定, 有關顏色值的設定, 請參考 C-2-3 節中有關 bgcolor 屬性設定的說明, 設定語法如下 : color= 顏色值 noshade 屬性水平線不顯示 3D 陰影範例 C-7: 水平分隔線的建立以下 HTML 敘述將示範建立各種不同的水平分隔線 <BODY> <HR align=left> <HR

18 color 屬性線條的顏色, 顏色可以用英文名稱或是 16 進位數值設定, 有關顏色值的設定, 請參考 C-2-3 節中有關 bgcolor 屬性設定的說明, 設定語法如下 : color= 顏色值 noshade 屬性水平線不顯示 3D 陰影範例 C-7: 水平分隔線的建立以下 HTML 敘述將示範建立各種不同的水平分隔線 <BODY> <HR align=left> <HR align=left width= 50%> <HR size=10 width= 50%> <HR size=20 color="blue"> <HR size=20> <HR size=20 noshade> </BODY> 上述 HTML 敘述鍵入 HTML 小助教後所顯示的效果如下 : C-3-5 置中對齊 <CENTER></CENTER> 被 <CENTER> 標籤所包含的元件, 將以置中對齊的方式顯示在網頁中, 請看以下範例 C-18

19 C 範例 C-8:<CENTER> 標籤的使用以下 HTML 敘述將示範運用 <CENTER> 標籤, 控制段落文字的水平對齊方式為置中對齊 <BODY> <CENTER> <P> 我是郭尚君 </P> 請多指教 </CENTER> </BODY> HTML 語法介紹上述 HTML 敘述鍵入 HTML 小助教後所顯示的效果如下 : C-3-6 有序號條列標籤 <ol></ol> 將文字內容以條列方式顯示, 對於閱讀者來說通常是比較清楚而易讀的 HTML 共提供三種用於條列文字的標籤, 它們是有序號條列與無序號條列以及說明項目條列標籤在這一節中, 將為您介紹有序號條列標籤的使用有序號條列標籤的語法如下 : <ol> <li> 條列 1 <li> 條列 2 <li> 條列 3 </ol> 在 <ol> 標籤中, 可以使用屬性控制條列的序號, 請看以下說明 C-19

20 type 屬性此屬性用於控制序號的種類, 語法如下 : type=1 或 A 或 a 或 I 或 i 各設定值的意義如下 : 1 表示序號為數字 A 表示序號為大寫英文字母 a 表示序號為小寫英文字母 I 表示序號為大寫羅馬數字 i 表示序號為小寫羅馬數字 start 屬性設定序號開始的編號之語法為 : start=n n 可以是 2 C 或是 vi 範例 C-9: 有序號條列標籤的使用此範例的 HTML 敘述, 將示範有序號條列標籤的使用, 並運用屬性設定序號型態為小寫英文字母, 並由 c( 第 3 號 ) 開始編號 <BODY> <ol type=a start="3"> <li> 第一項 <li> 第二項 <li> 第三項 </ol> </BODY> C-20

21 C 上述 HTML 敘述鍵入 HTML 小助教後所顯示的效果如下 : 從 C 開始編號 HTML 語法介紹C-3-7 無序號條列標籤 <ul></ul> 無序號條列標籤的語法如下 : <ul> <li> 條列 1 <li> 條列 2 <li> 條列 3 </ul> 下面是在無序號條列標籤常用的屬性說明 type 屬性這個屬性在無序號項目條列中可以設定項目符號, 用法為 : type=circle 或 disc 或 square 三種 type 值所代表的條列符號分別為 circle disc square 範例 C-10: 無序號條列標籤的使用此範例的 HTML 敘述, 將示範無序號條列標籤的使用, 並運用屬性設定條列標籤的型態為 C-21

22 <BODY> <ul type=circle> <li> 第一項 <li> 第二項 <li> 第三項 </ul> </BODY> 上述 HTML 敘述鍵入 HTML 小助教後所顯示的效果如下 : C-3-8 說明項目條列 <dl></dl> 說明項目條列允許比較複雜的條列說明, 不只可以分項條列, 並且對每一條列的項目都可以再加以說明, 這種條列的語法如下 : <dl> <dt> 條列 1 <dd> 條列 1 的說明 1 <dd> 條列 1 的說明 2 <dt> 條列 2 </dl> 範例 C-11: 說明項目條列的運用以下 HTML 敘述將示範說明條列項目的運用 C-22

23 C <BODY> <dl> <dt> 條列項目 1 <dd> 條列說明內容 1 <dd> 條列說明內容 2 <dt> 條列項目 2 <dd> 條列說明內容 1 <dd> 條列說明內容 2 <dt> 條列項目 3 </dl> </BODY> HTML 語法介紹上述 HTML 敘述鍵入 HTML 小助教後所顯示的效果如下 : C-4 文字格式標籤 C-4-1 字型標籤 <Font></Font> 字型標籤通常用於控制文字的字型大小與顏色控制的方式是利用屬性設定完成, 下面將為您說明各屬性的使用方式, 語法如下 : <FONT 屬性 1= 值 1 屬性 2= 值 2 > 欲控制文字 </FONT> C-23

24 face 屬性控制文字使用字型的屬性, 語法為 : face=" 字型名稱 " 如果所指定的字型名稱並不存在於使用者的系統中, 將使用預設的字型 size 屬性控制文字大小的屬性, 語法為 : size= 字體等級在 IE 中, 字體的等級共有 7 級,7 為最大的字體 color 屬性設定文字的顏色, 語法為 : color=" 顏色 " 顏色的設定可運用英文名稱, 或是 16 進位數值有關顏色值的設定請參考 C-2-3 節中, 有關 bgcolor 屬性的說明範例 C-12: 利用 <FONT> 標籤控制文字格式以下 HTML 敘述將示範利用 <FONT> 標籤控制文字格式 <BODY> 預設字形文字 <BR><BR> <FONT face=" 標楷體 " size=1 color="blue"> 藍色標楷體文字 1 號 </Font><BR><BR> <FONT face=" 標楷體 " size=4 color="blue"> 藍色標楷體文字 4 號 C-24

25 C </FONT><BR><BR> <FONT face=" 標楷體 " size=7 color="blue"> 藍色標楷體文字 7 號 </FONT> </BODY> 上述 HTML 敘述鍵入 HTML 小助教後所顯示的效果如下 : HTML 語法介紹C-4-2 特定文字樣式標籤 HTML 中有一些標籤可以設定文字以特別的樣式顯示, 每一種瀏覽器對此類標籤的顯示可能會有些不同下面將列出較為常用特定文字樣式的標籤粗體字 <b></b> 文字以粗體字顯示斜體字 <i></i> 文字以斜體字顯示下加底線 <u></u> 在文字下方加上底線刪除線 <s></s> 文字加上刪除線 C-25

26 強調 <em></em> 文字以強調樣式顯示加強強調 <strong></strong> 文字以加強強調樣式顯示地址 <address> 與 </address> 電子郵件地址網頁網址所專用的文字樣式程式碼 <code> 與 </code> 程式碼或指令專用的字體放大 <big> 與 </big> 顯示放大字體縮小 <small> 與 </small> 顯示縮小字體上標 <sup> 與 </sup> 將文字顯示為上標文字下標 <sub> 與 </sub> 將文字顯示為下標文字 C-26

27 C-5 表格的建立 C-5-1 建立表格的四種標籤在網頁中, 表格的運用是非常重要的技巧在 HTML 語法中, 表格的建立主要運用 <TABLE> <TH> <TR> <TD> 四個標籤完成, 以下是這四個標籤的說明 : C HTML 語法介紹 <TABLE></TABLE> 標籤 - <TABLE> 標籤用於標示一個表格元件, 一個表格元件將由數個列 (<TR>) 儲存格(<TD>) 與標題格 (<TH>) 子元件所組成 <TR></TR> 標籤 - <TR> 標籤用於定義表格的一列, 一組 <TR> 標籤內通常包含數組由 <TD> 或 <TH> 所定義的儲存格 <TD></TD> 標籤 - <TD> 標籤用於定義表格的儲存格 <TH></TH> 標籤 - <TH> 標籤用於定義表格的標題儲存格, 此儲存格中的文字將以粗體的方式顯示此標籤可以不使用在一個最基本的表格元件中, 必須包含一組 <TABLE> 標籤, 一組 <TR> 標籤與一組 <TD> 標籤語法如下 : <TABLE> <TR><TD></TD></TR> </TABLE> 上述語法將建立出只有一個儲存格的表格 C-27

28 範例 C-13: 表格的建立以下 HTML 敘述將建立出一個三列兩行的表格 <BODY> <TABLE> <TR><TH> 姓名 </TH><TH> 居住地 </TH></TR> <TR><TD> 郭尚君 </TD><TD> 屏東市 </TD></TR> <TR><TD> 馬孝瑀 </TD><TD> 台北縣 </TD></TR> </TABLE> </BODY> 上述 HTML 敘述鍵入 HTML 小助教後所顯示的效果如下 : C-5-2 <TABLE> 標籤的屬性下面將說明一些 <TABLE> 標籤常用的屬性, 這些屬性將用於控制整個表格元件的格式 border 屬性 border 屬性用於控制表格框線的厚度設定語法如下 : border = 數值數值的設定值為一整數, 使用的單位為像素 (pixel) C-28

29 C cellspacing 屬性此屬性用於控制儲存格邊框到表格邊框的距離, 換言之, 也就是框線的寬度 cellspacing = 數值 HTML 語法介紹數值的設定值為一整數, 使用的單位為像素 (pixel) cellpadding 屬性此屬性用於控制儲存格內文字的邊緣到儲存格邊框的距離 cellpadding = 數值數值的設定值為一整數, 使用的單位為像素 (pixel) 範例 C-14: 表格邊框的各控制屬性之設定以下 HTML 敘述將示範在 <TABLE> 標籤中, 如何使用各表格邊框控制屬性設定表格 <BODY> <TABLE border=10 cellspacing=10 cellpadding=10> <TR><TD> 郭尚君 </TD><TD> 屏東市 </TD></TR> <TR><TD> 馬孝瑀 </TD><TD> 台北縣 </TD></TR> </TABLE> </BODY> 上述 HTML 敘述鍵入 HTML 小助教後所顯示的效果如下 : C-29

cellpadding border cellspacing bordercolor 屬性此屬性用於設定表格厚度的顏色 bordercolor = 顏色值顏色值的設定值可為顏色的英文名稱或 16 進位值, 請參考 C-2-3 節中有關 bgcolor 屬性設定之說明 bgcolor 屬性此屬性用於設定表格的背景顏色

30 cellpadding border cellspacing bordercolor 屬性此屬性用於設定表格厚度的顏色 bordercolor = 顏色值顏色值的設定值可為顏色的英文名稱或 16 進位值, 請參考 C-2-3 節中有關 bgcolor 屬性設定之說明 bgcolor 屬性此屬性用於設定表格的背景顏色 bgcolor = 顏色值顏色值的設定值可為顏色的英文名稱或 16 進位值, 請參考 C-2-3 節中有關 bgcolor 屬性設定之說明範例 C-15: 表格背景顏色與編框厚度顏色的設定以下 HTML 敘述將建立出表格背景顏色為黃色 (yellow), 邊框厚度為 3, 編框顏色為藍色 (blue) 的表格 C-30

31 C <BODY> <TABLE bgcolor=yellow border=3 bordercolor=blue> <TR><TD> 郭尚君 </TD><TD> 屏東市 </TD></TR> <TR><TD> 馬孝瑀 </TD><TD> 台北縣 </TD></TR> </TABLE> </BODY> HTML 語法介紹上述 HTML 敘述鍵入 HTML 小助教後所顯示的效果如下 : width 屬性整個表格的寬度設定 width = 數值數值的設定值若為一整數, 其單位為像素 (pixel) 若設定值為 n%, 則代表表格的寬度為整個網頁之寬度的百分之 n, 例如 : 將 width 屬性設為 50%, 代表此表格寬度為整個網頁的寬度的一半 height 屬性控制整個表格的高度 height = 數值數值的設定值若為一整數, 其單位為像素 (pixel) 若設定值為 n%, 代表表格的高度為整個網頁的高度的百分之 n, 例如 : 將 height 屬性設為 50%, 代表此表格高度為整個網頁的高度的一半 C-31

32 範例 C-16: 表格寬度的設定以下 HTML 敘述, 將建立出一個整個表格寬度為網頁畫面寬度 50% 的表格 <BODY> <TABLE width=50% border=3> <TR><TD> 郭尚君 </TD><TD> 屏東市 </TD></TR> <TR><TD> 馬孝瑀 </TD><TD> 台北縣 </TD></TR> </TABLE> </BODY> 上述 HTML 敘述鍵入 HTML 小助教後所顯示的效果如下 : align 屬性控制整個表格在網頁中所採用的水平方向對齊方式, 設定語法如下 : align = left 或 center 或 right 各設定值所代表的意義依序為靠左對齊置中對齊靠右對齊範例 C-17: 表格對齊方式的設定以下 HTML 敘述將建立出三個表格, 這三個表格將分別採用靠左對齊置中對齊與靠右對齊 <BODY> <TABLE align=left border=3> <TR><TD> 靠左對齊表格 </TD></TR> </TABLE><BR> <TABLE align=center border=3> C-32

33 C <TR><TD> 置中對齊表格 </TD></TR> </TABLE><BR> <TABLE align=right border=3> <TR><TD> 靠右對齊表格 </TD></TR> </TABLE> </BODY> HTML 語法介紹上述 HTML 敘述, 鍵入 HTML 小助教後所顯示的效果如下 : C-5-3 <TR> 標籤的屬性使用於 <TR> 標籤中的屬性, 將可控制表格中某一列的格式在上一節所提到, 可運用於 <TABLE> 標籤的屬性, 有許多也可以使用於 <TR> 標籤中, 它們是 width height bgcolor 與 bordercolor align 屬性 <TR> 標籤所包含之儲存格中, 文字的水平方向對齊方式, 設定語法如下 : align = left 或 center 或 right C-33

34 各設定值所代表的意義依序為靠左對齊置中對齊靠右對齊 valign 屬性 <TR> 標籤所包含儲存格中, 文字的垂直方向對齊方式, 設定語法如下 : valign = top 或 middle 或 bottom 或 baseline 各設定值所代表的意義依序為靠上對齊置中對齊靠下對齊底線對齊範例 C-18: 對齊屬性的設定以下 HTML 敘述, 將示範控制表格每一列中, 儲存格的文字水平對齊方式 <BODY> <TABLE width=50% border=3> <TR align=right> <TD> 郭尚君 </TD> <TD> 屏東市 </TD> </TR> <TR align=center valign=bottom height=50> <TD> 馬孝瑀 </TD> <TD> 台北縣 </TD> </TR> </TABLE> </BODY> 上述 HTML 敘述, 鍵入 HTML 小助教後所顯示的效果如下 : C-34

35 C C-5-4 <TD><TH> 標籤的屬性可使用於 <TD> <TH> 標籤中的屬性, 將可控制表格中某一儲存格的格式在上兩節所提到運用於 <TABLE> <TR> 標籤的屬性, 也有許多可以運 HTML 語法介紹用在 <TD> <TH> 標籤, 例如 :<TABLE> 標籤的 width height bgcolor 與 bordercolor 屬性 <TR> 標籤的 align valign 屬性對於這些屬性的意義與設定方式, 請您自行參考前面的說明在這一節中, 將說明專屬於 <TD> <TH> 標籤的屬性 colspan 屬性水平延伸儲存格的設定語法如下 : colspan = n n 為一整數, 代表此儲存格水平延伸的儲存格數假若某儲存格將此屬性設定為 3 時, 所造成的效果相當於將此儲存格與此儲存格右方 2 個儲存格合併為一個跨 3 欄的儲存格範例 C-19:colspan 屬性的設定以下 HTML 敘述中, 第一行的基本資料儲存格將運用 colspan 屬性, 合併該儲存格右方的 2 個儲存格, 達到橫跨表格三個欄位的效果 <BODY> <TABLE border=3 > <TR> <TH colspan=3> 基本資料 </TH> </TR> <TR> <TH> 居住地 </TH> C-35

36 <TH> 星座 </TH> <TH> 血型 </TH> </TR> </TABLE> </BODY> 上述 HTML 敘述, 鍵入 HTML 小助教後所顯示的效果如下 : rowspan 屬性垂直延伸儲存格, 設定語法如下 : rowspan = n n 為一整數, 代表此儲存格垂直延伸的儲存格數假若某儲存格將此屬性設定為 3 時, 所造成的效果, 相當於將此儲存格與此儲存格下方 2 個儲存格合併為一跨 3 列的儲存格範例 C-20:rowspan 屬性的設定以下 HTML 敘述中, 第一列第一行的基本資料儲存格將運用 rowspan 屬性, 合併該儲存格下方 2 個儲存格, 達到橫跨 3 列的效果 <BODY> <TABLE border=3 > <TR> <TH rowspan=3 width=30> 基本資料 </TH> <TH> 居住地 </TH> </TR> <TR> <TH> 星座 </TH> </TR> C-36

C <TR> <TH> 血型 </TH> </TR> </TABLE> </BODY> 上述 HTML 敘述, 鍵入 HTML 小助教後所顯示的效果如下 : HTML 語法介紹範例 C-21:colspan 與 rowspan 屬性的綜合運用以下 HTML 敘述中, 第一列的姓名儲存格將運用 rowspan 屬性, 達到橫跨表格兩列的效果而第一列的基本資料儲存格將運用 colspan 屬性,

37 C <TR> <TH> 血型 </TH> </TR> </TABLE> </BODY> 上述 HTML 敘述, 鍵入 HTML 小助教後所顯示的效果如下 : HTML 語法介紹範例 C-21:colspan 與 rowspan 屬性的綜合運用以下 HTML 敘述中, 第一列的姓名儲存格將運用 rowspan 屬性, 達到橫跨表格兩列的效果而第一列的基本資料儲存格將運用 colspan 屬性, 達到橫跨表格兩欄的效果 <BODY> <TABLE border=3 > <TR> <TH rowspan=2 valign=bottom> 姓名 </TH> <TH colspan=2> 基本資料 </TH> </TR> <TR> <TH> 居住地 </TH> <TH> 星座 </TH> </TR> <TR> <TD> 郭尚君 </TD> <TD> 屏東市 </TD> <TD> 雙魚座 </TD> </TR> <TR> C-37

38 <TD> 馬孝瑀 </TD> <TD> 台北縣 </TD> </TR> <TR> </TR> <TD> 天秤座 </TD> <TD> 蘇品全 </TD> <TD> 高雄市 </TD> <TD> 射手座 </TD> </TABLE></BODY> 上述 HTML 敘述, 鍵入 HTML 小助教後所顯示的效果如下 : C-6 其他常用標籤 C-6-1 相對路徑與絕對路徑在說明本節所介紹的 HTML 標籤前, 必須先告訴各位相對路徑與絕對路徑的觀念, 因為在接下來的三個小節中, 將運用這個觀念引用存在於同一個 Web 伺服器的檔案或者網頁, 下面先為這兩種路徑做個簡單的介紹相對路徑以引用檔案之網頁所在位置為參考基礎而建立出的目錄路徑當不同網頁引用同一個檔案時, 所使用的路徑都不相同, 故稱之為相對 C-38

39 C 絕對路徑以 Web 站台根目錄為參考基礎的目錄路徑之所以稱為絕對, 意指當所有網頁引用同一個檔案時, 所使用的路徑都是一樣的其實絕對路徑與相對路徑的不同處只在於描述目錄路徑時, 所採用的參考點為何? 由於對網站上所有檔案而言, 根目錄這個參考點都一樣的, 因此, 運用以根目錄為參考點的路徑描述方式, 才會被稱之為絕對路徑以下列出建立路徑所使用的幾個特殊符號, 及其所代表的意義 HTML 語法介紹. - 代表目前所在的目錄.. - 代表上一層目錄 / - 代表根目錄接下來, 假設您所架設的 Web 站台擁有如下圖所示的目錄路徑 Dir1 Ref.htm SubDir2 BeRef.gif 假若欲在 Ref.htm 檔引用 BeRef.gif 檔時, 其相對路徑如下 :./SubDir2/BeRef.gif 上面的引用路徑中,. 代表目前的目錄(Dir1), 所以./SubDir2 代表目前目錄下的 SubDir2 其實, 您也可以省略./ 直接用下這個方式引用 SubDir2/BeRef.gif 若使用絕對路徑以根目錄為參考點引用該檔時, 則引用路徑如下 : /Dir1/SubDir2/BeRef.gif C-39

40 如果 Web 站台的目錄是如下圖的架構時, 那引用 BeRef.gif 檔的相對路徑又是如何呢? Dir1 Dir2 Ref.htm BeRef.gif 假若欲在 Ref.htm 檔引用 BeRef.gif 檔時, 其相對路徑如下 :../Dir2/BeRef.gif 上面的引用路徑中,.. 代表上一層目錄, 所以../Dir2 代表上一層目錄下的 Dir2 子目錄若使用絕對路徑引用時, 則引用路徑如下 : /Dir2/BeRef.gif 再舉一個比較複雜的例子, 來比較一下相對路徑與絕對路徑的使用假設在您所架設之 Web 站台中, 擁有如下圖的目錄路徑 Dir1 SubDir1 Ref1.htm SubDir2 BeRef1.gif Dir2 BeRef2.htm SubDir3 Ref2.htm 用以一個表格來說明在上圖的情況下, 某檔案引用另一檔案時, 所應使用的相對路徑與絕對路徑引用者被引用者相對路徑絕對路徑 Ref1.htm BeRef1.gif../SubDir2/BeRef1.gif /Dir1/SubDir2/BeRef1.gif Ref2.htm BeRef1.gif../../Dir1/SubDir2/BeRef1.gif /Dir1/SubDir2/BeRef1.gif Ref1.htm BeRef2.htm../../Dir2/BeRef2.htm /Dir2/BeRef2.htm Ref2.htm BeRef2.htm../BeRef2.htm /Dir2/BeRef2.htm C-40

41 C 上表中比較需要說明的是../../ 所代表的意義.. 代表上一層目錄,../../ 則代表上一層目錄的上一層目錄所以, 從上表可以看出, 如果引用的檔案存在於目前目錄的子目錄中, 或者存在於上一層目錄中另一個子目錄中, 運用相對路徑是比較方便的如果不是時, 則乾脆利用絕對路徑, 還比較省事再者, 從上表也可以看出, 當被引用的是同一個檔案時, 所使用的絕對路徑是一樣的 HTML 語法介紹C-6-2 超連結的標籤 <A> 與 </A> HTML 文件中最重要的應用之一就是超連結, 您可以在網頁上使用超連結, 以提供使用者連結至網路上其他網頁的功能當使用者點選建立於網頁中的超連結後, 瀏覽器便會瀏覽該超連結位置的網頁建立超連結所使用的標籤為 <A></A> 標籤, 其語法為 : <A Href=" 連結位置 "> 超連結名稱 </A> 語法中各部份說明如下 : 超連結名稱此字串將顯示於網頁中, 代表此超連結, 並供使用者點選超連結之用除了可以使用字串外, 在 <A></A> 標籤中, 亦可放入圖檔, 這樣該圖檔便可代表該超連結當使用者將滑鼠指標移到代表超連結的文字或圖檔上時, 游標型態將變成手狀, 表示使用者可點選該連結, 如下圖所示連結位置用於指定 <A> 標籤連結目標的 URL 位址 URL 的格式由使用的通訊協定連結位址與檔案位置所組成, 語法如下 : 通訊協定 :// 連結位址 / 檔案位置 / 檔案名稱 C-41

42 下面列舉一些常見的連結位置設定方式一指定透過 http 協定連結至其他網頁 <a href=" 二指定透過 FTP 協定連結至網路上的 FTP 伺服器 <a href="ftp://ftp-cnpa.admin.yzu.edu.tw"> 三 Telnet 連結 <a href="telnet://bbs.iti.com.tw"> 四電子郵件 : 這並不是一個標準的 URL, 將以 mailto: 電子郵件帳號的語法, 將欲寄信的目標帳號設定給 href 屬性當在網頁中點選這個超連結時, 將呼叫系統預設的電子郵件軟體, 建立一個空白的電子郵件發信給指定的郵件地址 <a href="mailto:sckuo1@ms32.hinet.net"> 五連結至同一伺服器上的其他網頁 : 可使用相對路徑指定欲連結的網頁 <a href="img.htm"> 範例 C-22: 超連結的建立以下 HTML 敘述將示範各種超連結的建立此範例儲存於 AppB 資料夾的 Hlink.htm 檔 <HEAD> <TITLE> 超連結的應用 </TITLE> </HEAD> <BODY> <CENTER> <FONT SIZE = 5 COLOR = blue> 超連結的應用 </FONT> </CENTER> <HR><BR><BR> <A Href = " 以 http 方式連結至本書的班級網站範例 </A> <BR><BR> <A Href = "/Class/Default.htm"> C-42

43 C 以絕對路徑連結至本書的班級網站範例 </A> <BR><BR> <A Href = "../../Class/Default.htm "> 以相對路徑連結至本書的班級網站範例 </A> <BR><BR> <A Href = "mailto:sckuo1@ms32.hinet.net"> 寫信給作者 </A> </BODY> HTML 語法介紹執行結果如下圖所示 C-6-3 圖檔載入標籤 <IMG> <IMG> 為圖檔載入標籤, 用於將圖檔載入 HTML 文件中顯示, 運用 <IMG> 可載入 GIF JPG 等格式的圖片檔案, 語法如下 : <img src=" 圖檔儲存位置與名稱 "> 其中 src 屬性為 <IMG> 標籤的必要屬性不可省略, 用於指定欲載入圖檔的儲存位置與名稱而欲載入圖檔的位置, 可以是在同一伺服器的檔案或是位於網路的其他伺服器若是同一主機內的檔案, 可運用相對路徑指出圖檔的位置, 有關相對路徑的說明請參考 C-6-1 節以下敘述將載入位於上一層目錄中, 名為 mark.gif 的圖檔 <img src="../mark.gif"> C-43

44 若是從網路上其他伺服器載入時, 則設定 src 屬性時, 必須使用 URL 格式, 以下敘述將從這個伺服器的根目錄下, 載入名稱為 mark.gif 的圖檔 <img src=" <IMG> 標籤其他常用的屬性請參考以下說明 alt 屬性當瀏覽器不能顯示指定的圖片時, 則以指定給 alt 屬性的字串替代圖片, 設定語法為 : alt=" 敘述文字 " border 屬性設定圖片的邊框, 語法為 : border=n n 為一整數數字, 如果為 0 就表示不顯示邊框 height 屬性設定圖片的高度, 語法為 : height=n n 為一整數數值, 單位為像素 (pixel) width 屬性設定圖片的寬度, 設定語法如下 : width=n n 為一整數數值, 單位為像素 (pixel) C-44

45 C hspace 屬性設定圖片左右水平空間空白的區域, 網頁中的文字以及其他物件都會避開這一段空白的區域, 語法為 : hspace=n HTML 語法介紹n 為數值, 單位為像素 (pixel) vspace 屬性與上一項屬性用法相同, 但控制的是垂直空間範例 C-23: 圖檔的載入以下 HTML 敘述儲存於 AppB 資料夾下的 IMG.htm 檔中, 用於示範圖檔的載入與 border vspace 屬性的設定 <HEAD> <TITLE> 圖檔的載入示範 </TITLE> </HEAD> <BODY> <CENTER> <FONT SIZE = 5 COLOR = blue> 圖檔的載入示範 </FONT> </CENTER> <HR> 上方的文字 <BR> <IMG border = 5 src="a9073.gif" vspace=50><br> 下方的文字 </BODY> C-45

瀏覽器瀏覽的畫面如下 : C-6-4 視窗框架的使用視窗框架用於將畫面分割成數個小視窗, 在各個小視窗中, 可以顯示不同的網頁, 達到在瀏覽器內同時瀏覽不同網頁的效果, 像本章所運用的 HTML 小助教, 就是一個運用視窗框架將網頁分割成為兩個子視窗的實例當將一個瀏覽器畫面分割成數個的視窗後, 各視窗將可以扮演不同的功能舉例來說, 分割後的視窗,

46 瀏覽器瀏覽的畫面如下 : C-6-4 視窗框架的使用視窗框架用於將畫面分割成數個小視窗, 在各個小視窗中, 可以顯示不同的網頁, 達到在瀏覽器內同時瀏覽不同網頁的效果, 像本章所運用的 HTML 小助教, 就是一個運用視窗框架將網頁分割成為兩個子視窗的實例當將一個瀏覽器畫面分割成數個的視窗後, 各視窗將可以扮演不同的功能舉例來說, 分割後的視窗, 可以運用其中一個做為主要顯示網頁內容的主畫面, 另一個則做為選單, 控制主畫面內顯示的網頁這樣的設計顯然比起單一個視窗的網頁設計來得人性化多了, 使用者可以在數個網頁中任意切換視窗框架的基本結構將整個瀏覽器畫面分割的視窗框架, 主要利用 <Frameset> 標籤與 <Frame> 標籤來定義其中 <Frameset> 標籤用於定義一個視窗框架元件, 而 C-46

47 C <Frame> 標籤則用於定義視窗框架中某個子視窗元件因此, 一組視窗框架的標準格式如下所示 <Frameset> <Frame> <Frame> </Frameset> HTML 語法介紹但是請注意, 由 <Frameset> 標籤所定義的視窗框架元件, 相當於 <BODY> 標籤所定義的文件主題元件, 因此 <Frameset> 標籤不可包含在 <BODY> 標籤中, 否則 <Frameset> 標籤將會無法正常作用因此, 運用 <Frameset> 標籤建立視窗框架時, 僅可直接包含在標籤中而用於定義子視窗的 <Frame> 標籤, 並沒有結束標籤, 該標籤的使用方式, 僅是在標籤中設定各種屬性, 以控制所代表視窗框設定畫面的分割方式視窗框架的分割方式, 可分為列分割與欄分割至於一個視窗框架元件採用的是哪種分割方式, 則要看設定於 <Frameset> 標籤中的是 rows 屬性還是 cols 屬性, 在一個 <Frameset> 標籤中, 兩個屬性您僅能採用一個換言之, 一個視窗框架不是採用列分割, 就是採用欄分割列分割以下 <Frameset> 標籤使用 rows 屬性定義一個列分割畫面的視窗框架 <Frameset rows=" 高度 1, 高度 2,.,*"> <Frame> </Frameset> C-47

48 設定給 rows 屬性的字串, 代表各分割子視窗的高度, 第一個子視窗高度 1, 第二個為高度 2, 依此類推而最後一個 *, 則代表最後一個子視窗的高度, 為其他子視窗高度分配後剩餘的高度當將畫面分割成幾個子視窗時, 設定給 rows 屬性的字串就有幾個高度值, 且每個高度值間將以, 加以區隔在 <Frameset> 標籤中, 也必須有相同個數的 <Frame> 標籤, 代表這些子視窗設定高度值的方式有兩種, 一種是採用整數設定, 單位為像素 (pixel), 如 :<Frameset rows="200, 150, *"> 另一種則是設定為畫面的百分比, 如 : <Frameset rows="50%, 30%, *"> 範例 C-24: 列分割視窗框架的建立以下敘述將定義出一個列分割視窗框架, 其中第一個視窗的高度為 70 像素, 第二個為 70 像素, 第三個視窗的高度則為整個畫面分配給前兩個子視窗後剩餘的高度 <Frameset rows="70, 70, *"> <Frame> <Frame> <Frame> </Frameset> C-48

49 C 上述 HTML 敘述, 鍵入 HTML 小助教後所顯示的效果如下 : HTML 語法介紹範例 C-25: 以設定百分比方式建立列分割視窗框架以下敘述所定義出的列分割視窗框架, 第一個視窗的高度佔整個視窗的 40%, 第二個為 30%, 第三個視窗則為 30%( = 30) <Frameset rows="40%, 30%,*"> <Frame> <Frame> <Frame> </Frameset> C-49

50 上述 HTML 敘述, 鍵入 HTML 小助教後所顯示的效果如下 : 欄分割以下 <Frameset> 標籤將使用 cols 屬性, 定義一個欄分割畫面的視窗框架 <Frameset cols=" 寬度 1, 寬度 2,.,*"> <Frame> </Frameset> 欄分割寬度值的設定, 與欄分割高度值的設定方式相同, 這裡不再贅述請看下面範例的示範範例 C-26: 欄分割視窗框架的建立以下敘述將定義出一個欄分割視窗框架, 其中第一個視窗的寬度為 100 像素, 第二個為 150 像素, 第三個視窗的寬度, 則為整個畫面分配給前兩個子視窗後剩餘的寬度 C-50

51 C <Frameset cols="100, 150, *"> <Frame> <Frame> <Frame> </Frameset> HTML 語法介紹上述 HTML 敘述鍵入 HTML 小助教後所顯示的效果如下 : 範例 C-27: 以設定百分比方式建立欄分割視窗框架以下敘述所定義出的欄分割視窗框架, 第一個視窗的寬度佔整個視窗的 40%, 第二個為 30%, 第三個視窗則為 30%( = 30) <Frameset cols="40%, 30%,*"> <Frame> <Frame> <Frame> </Frameset> C-51

52 上述 HTML 敘述, 鍵入 HTML 小助教後所顯示的效果如下 : 子視窗的設定完成畫面的分割後, 接下來就是要定義每個分割出來的子視窗而定義每個子視窗的屬性, 都將設定於代表該子視窗的 <Frame> 標籤中, 其中較重要的屬性為子視窗的名稱 (name 屬性 ) 與欲載入的 HTML 文件之來源 (src 屬性 ), 請看以下說明 name 屬性用於指定頁框的名稱, 定義子視窗名稱後, 便可在 HTML 語法內指定該視窗, 最常用到的地方是定義超連結時, 指定顯示所連結網頁的子視窗, 這種超連結的建立稍後會加以說明,name 屬性的用法為 : name=" 子視窗名稱 " C-52

53 C src 屬性此屬性將指定預設載入某子視窗之 HTML 文件的位置與名稱語法為 : src="html 文件的位置與名稱 " 此屬性的設定方式及格式, 與 C-6-3 節中所提及載入圖檔之 <IMG> 標籤的 src 屬性相同以下設定將載入位於同一目錄下的 first.htm 網頁 HTML 語法介紹<frame src="first.htm" name="main"> 範例 C-28: 子視窗屬性的設定以下敘述將定義出一個採用欄分割的視窗框架, 並於各子視窗中顯示不同的網頁 <Frameset cols="40%, 30%,*"> <Frame name="left" src="../first.htm"> <Frame name="center" src="../second.htm"> <Frame name="right" src="../third.htm"> </Frameset> 上述 HTML 敘述, 鍵入 HTML 小助教後所顯示的效果如下 : left center right C-53

54 控制視窗框架框線的 frameborder 屬性 <Frameset> 標籤與 <Frame> 標籤的 frameborder 屬性, 用於控制視窗框架四周框線是否顯示使用於 <Frameset> 標籤時, 將可控制該視窗框架元件內的所有子視窗使用於 <Frame> 標籤時, 則僅能控制該標籤所代表的子視窗, 語法為 : frameborder=0 或 1 0 表不顯示框線,1 表顯示框線, 預設值為 1 範例 C-29: 取消視窗框架框線的顯示以下敘述將定義出一個採用欄分割的視窗框架, 並於各子視窗中顯示不同的網頁, 但不顯示每個子視窗間的分隔框線 <Frameset cols="40%, 30%,*" frameborder=0> <Frame name="left" src="../first.htm"> <Frame name="center" src="../second.htm"> <Frame name="right" src="../third.htm"> </Frameset> 上述 HTML 敘述, 鍵入 HTML 小助教後所顯示的效果如下 : left center right C-54

55 第一層視窗框架第二層視窗框架C 巢狀的視窗框架在前面的說明中, 對於視窗框架的分割, 講解了列分割與欄分割兩種方式, 用法相當簡單可是如果想做出有欄分割, 也有列分割的視窗框架該怎麼辦呢? 答案是運用巢狀視窗框架的觀念所謂的巢狀視窗框架, 意指一個視窗框架還包含了另一個視窗框架換言之, 整個視窗框架將不止有一個由 <Frameset> 標籤所建立的元件, 請看下面範例的示範 HTML 語法介紹範例 C-30: 巢狀的視窗框架的建立以下敘述將定義出一個採用列分割的視窗框架, 其中第二列的子視窗中包含了另一個採用欄分割的視窗框架 <Frameset rows="30%,*"> <Frame> <Frameset cols="50%,*"> <Frame> <Frame> </Frameset> </Frameset> 上述 HTML 敘述鍵入 HTML 小助教後所顯示的效果如下 : C-55

超連結 target 屬性與視窗框架的搭配應用前面曾經提過, 當利用視窗框架將瀏覽器畫面分割成數個子視窗時, 我們可以賦予各子視窗不同的功能最常見的應用方式, 就是一個子視窗做為主要顯示網頁的主畫面, 另一個視窗則用於控制主畫面視窗所顯示之網頁, 功能類似選單的控制子視窗要怎樣才能達到這個目的呢?

56 超連結 target 屬性與視窗框架的搭配應用前面曾經提過, 當利用視窗框架將瀏覽器畫面分割成數個子視窗時, 我們可以賦予各子視窗不同的功能最常見的應用方式, 就是一個子視窗做為主要顯示網頁的主畫面, 另一個視窗則用於控制主畫面視窗所顯示之網頁, 功能類似選單的控制子視窗要怎樣才能達到這個目的呢? 這整個機制的重點, 在於運用超連結的 target 屬性, 指定顯示連結之網頁的子視窗, 此屬性的設定語法如下 : target = " 子視窗名稱 " 請看下面範例的說明範例 C-31: 超連結 target 屬性與視窗框架的搭配應用這個範例將建立出一個採用欄分割的視窗框架, 建立此視窗框架的網頁為 AppB 資料夾下的 target.htm 右邊的視窗名為 main, 用於顯示使用者在左邊視窗點選之超連結所連結的 HTML 網頁左邊的視窗名稱為 menu, 預設顯示的網頁為 menu.htm, 該網頁中有 3 個超連結, 且設定顯示連結文件的目標子視窗為 main C-56

57 C 下面是建構整個視窗框架的 target.htm 檔的內容 HTML 文件 :target.htm <HEAD> 003 <TITLE> 超連結 target 屬性與視窗框架的搭配應用 </TITLE> 004 </HEAD> 005 <Frameset cols="30%, *"> 006 <Frame src="menu.htm" name="menu"> 007 <Frame src="first.htm" name="main"> 008 </Frameset> 009 HTML 語法介紹下面是建構整個視窗框架的 menu.htm 檔的內容 HTML 文件 :menu.htm <HEAD> 003 <TITLE>Menu 子視窗顯示之網頁 </TITLE> 004 </HEAD> 005 <BODY> 006 <P><A Href="first.htm" target="main"> 第一個超連結 </A></P> 007 <P><A Href="second.htm" target="main"> 第二個超連結 </A></P> 008 <P><A Href="third.htm" target="main"> 第三個超連結 </A></P> 009 </BODY> 010 另外, 設定 target 屬性時, 還有一些特殊設定可以運用, 請看以下說明 target=_blank, 另外新開一個視窗來載入連結的網頁 target=_self, 在同一個頁框中載入連結的網頁 target=_parent, 將連結的網頁載入目前頁框的上一層頁框 ( 運用於巢狀視窗框架中 ), 如果沒有上層, 則載入同一頁框 target=_top, 將網頁載入目前的瀏覽器畫面中, 且跳離頁框的頁面結構 C-57

58 C-6-5 註解標籤  當欲在 HTML 文件中, 說明 HTML 語法的意義時, 可以使用  標籤來定義這些註解文字其語法如下 :  當使用者瀏覽網頁時, 這些註解文字將不會出現在瀏覽器中 C-58

A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ / ] NotePad A-2

HTML A-1 HTML A-2 A-2 HTML A-8 A-3 A-14 A-4 A-26 A-5 A-30 A-6 A-42 A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ /