第 13 章網頁編写 13.1 跨平台問題專為某類型電腦而編写的程式, 通常不能在其他類型的電腦運行, 原因是程式以機器碼形式來存貯, 因此造成所謂機器相關 (Machine dependent) 問題這問題亦稱為跨平台問題或兼容問題另㆒方面, 美國信息交換標準碼 (ASCII) 是標準化

Size: px

Start display at page:

Download "第 13 章網頁編写 13.1 跨平台問題專為某類型電腦而編写的程式, 通常不能在其他類型的電腦運行, 原因是程式以機器碼形式來存貯, 因此造成所謂機器相關 (Machine dependent) 問題這問題亦稱為跨平台問題或兼容問題另㆒方面, 美國信息交換標準碼 (ASCII) 是標準化"

号熊
7 years ago
Views:

圖形聲音和視像及其他的檔案在用戶漫遊萬維網時, 電腦會收到純文本的 HTML 檔案, 此外, 亦會收到相關的圖形聲音和視像等檔案

1 網頁編写在完成這章後, 你將能夠建造簡單的網頁了解㆒些基本的 HTML 碼在建造網頁時, 懂得應用超連結在建造網頁時, 懂得應用多媒體網頁包括 : 1. HTML 檔案及 [ 或 ] 2. 圖形聲音和視像及其他的檔案在用戶漫遊萬維網時, 電腦會收到純文本的 HTML 檔案, 此外, 亦會收到相關的圖形聲音和視像等檔案瀏覽器會為 HTML 檔案進行解譯, 根據所提供的料在屏幕適當的位置顯示相關的物件用戶電腦網站伺服器傳送中的檔案瀏覽器圖 1 網頁及多媒體檔案從伺服器傳送到用戶電腦 40 超連結 hyperlink 網站伺服器 web server

2 第 13 章網頁編写 13.1 跨平台問題專為某類型電腦而編写的程式, 通常不能在其他類型的電腦運行, 原因是程式以機器碼形式來存貯, 因此造成所謂機器相關 (Machine dependent) 問題這問題亦稱為跨平台問題或兼容問題另㆒方面, 美國信息交換標準碼 (ASCII) 是標準化的碼因此, 存貯 ASCII 碼的文字檔 (Text file) 可以在不同類型的電腦之間互相交換, 而不存在任何兼容的問題 HTML 代表超文本標示語言 HTML 檔案是能被所有的電腦讀取的文字檔 HTML 檔案是文字檔因此,HTML 檔案能被各種不同類型的電腦, 例如 Mac IBM PC 或 Linux 等讀取用戶可以用簡單的文本編輯器 (Text editor) 來建立 HTML 檔案, 但存檔時必須使用檔擴展.htm 或.html 除文字檔外, 大部分的圖形聲音和視像檔案均可由任何電腦讀取 13.2 HTML HTML 是超文本標示語言 (HyperText Markup Language) 的英文縮写, 並用於定義版面配置字型圖形及超文本連結等超文本標示語言的意義是 : 超文本集合多個彼此相連的物件 ( 例如文本或圖片 ) 若用戶在超文本物件按㆒, 將被帶往其位置標示告訴電腦如何在屏幕顯示文本圖形和視像等物件語言表定的可以由某些程式 ( 例如瀏覽器 ) 來解譯的碼標示語言並非全面性的程式語言, 例如 HTML 並不設條件語句 (Conditional statement) HTML 只是用於指示瀏覽器如何將物件顯示在屏幕的演示語言跨平台問題 cross-platform issue 兼容問題 compatibility issue 版面配置 page layout 標示 markup 屏幕 screen 演示語言 presentation language 41

3 互聯網及其應用 13.3 HTML 的簡介 "<" 和 ">" 用來區別文本內容及 HTML 代碼 HTML 檔案存貯文本內容及指令這些指令稱為 HTML 碼, 並以別的括號 < 及 > 從文本內容區別過來在括號內用於格式化的碼稱為標籤 (Tag) 例如, 標籤 <TITLE> 是放置於主題文本之前, 稱為開始標籤, 而結束標籤 </TITLE> 則放置於主題文本之後結束標籤只是比開始標籤多了㆒個斜線符號 (/) A. ㆕對必需的標籤必需的四個標籤是 : 1. HTML 2. HEAD 3. TITLE 4. BODY HTML 檔案必需的㆕對標籤是 : 標籤 <HTML>...</HTML> 將整個 HTML 文件包括在內, 並告訴瀏覽器用於描述這個網頁的語言是 HTML 這對標籤是必需的, 原因是除 HTML 外, 還其他的標示語言, 因此瀏覽器需要知道用那㆒套規則來解譯文件的碼 HTML 檔案有頭部和正文部分 B. HTML 檔案的結構 HTML 文件可分為兩部分 : 頭部 (Head) 和正文 (Body) 圖 2 HTML 檔案的結構 42 碼 code 解譯碼 decode

4 第 13 章網頁編写 1. 文件的頭部 HTML 文件的頭部包含㆒些技術性的訊, 在這裡的內容只用於向瀏覽器提供訊, 例如設定瀏覽器視窗的標題欄, 而不會影響網頁的面貌這些料也用於向搜尋器提供登記料, 讓網址包含在搜尋器的數據庫列是出現在頭部的㆒些標籤 : 表 1 在 HTML 檔案頭部的標籤參考列的語句 : <HEAD> <TITLE>This will appear on the top of the window</title> </HEAD> 述語句令 "This will appear on the top of the window" 出現在瀏覽器視窗的標題欄, 如圖所示 : 圖 3 顯示在瀏覽器視窗標題欄的文本搜尋器 search engine 數據庫 database 標題欄 title bar 43

5 互聯網及其應用 2. 文件的正文 HTML 文件的正文包含所你想在瀏覽器顯示的東西, 並使用以的標籤 : <BODY> 和 </BODY> 所出現在網頁的文本影像視像聲音等都必須安排在正文, 即放置於以兩個標籤之間當然, 對影像視像聲音等非文本物件, 所放置的只是其檔而已 C. 建造㆒個簡單的網頁啟動視窗記事本 (Windows Notepad) 並鍵入列的文字, 然後把檔案存檔為 "myhomepage.htm": 代碼列表 1 網頁 "This is my Home Page" 的代碼這個簡單網頁令瀏覽器的視窗標題欄顯示 "This is my Home Page", 並在內文顯示 "Welcome to my Home Page!", 如圖 5 所示 : 圖 4 使用文本編輯器 (NotePad) 編寫 HTML 檔案圖 5 網頁顯示在瀏覽器上 44 存檔 save 標題欄 title bar

第 13 章網頁編 D. 成對及單㆒指令標籤 HTML類型的標籤 1. 成對標籤 2. 單一指令標籤 HTML 標籤可分為成對標籤及單㆒指令標籤成對標籤 (Paired tag) 主要用於為物件進行格式化例如改變文本的字體或對齊等經格式化的物件必須放置在開始和結束標籤之間以是成對標籤用於格式化的例子成對標籤的例子 1. 2. 3. 4. 5. 6. 7. 8.

6 第 13 章網頁編 D. 成對及單㆒指令標籤 HTML類型的標籤 1. 成對標籤 2. 單一指令標籤 HTML 標籤可分為成對標籤及單㆒指令標籤成對標籤 (Paired tag) 主要用於為物件進行格式化例如改變文本的字體或對齊等經格式化的物件必須放置在開始和結束標籤之間以是成對標籤用於格式化的例子成對標籤的例子 <HTML></HTML> <HEAD></HEAD> <TITLE></TITLE> <BODY></BODY> <CENTER></CENTER> 單一指令標籤的例子 1. 2. <IMG> 單㆒指令標籤 (Single command tag) 用於發出某些行動的指令例如換行 和插入圖形 <IMG> 等由於指令標籤不是針對某部分文本所以碼可以單獨存在 E. 嵌套標籤嵌套標籤使用方法類似數學的括號嵌套標籤 (Nested tag) 意謂把㆒組標籤放於另外㆒組內在以的例子 ... 及 ... 便是嵌套在 ... 之內 These words are bold italics and these are bold underlined. 圖 6 靠對齊 right-justified 顯示在瀏覽器的嵌套標籤 45

互聯網及其應用注意, 嵌套標籤的層次應像使用數括號般, 必須合乎邏輯, 不能胡亂放置舉例來說, 若以較大的字型置及粗體來顯示㆒些文字, 正確的開始標籤可依列安排 : <CENTER> <FONT SIZE="+1"> <B> 對應的結束標籤必須以相反次序排列, 例如開始標籤的首個碼應對應結束標籤最後的碼因此, 述

7 互聯網及其應用注意, 嵌套標籤的層次應像使用數括號般, 必須合乎邏輯, 不能胡亂放置舉例來說, 若以較大的字型置及粗體來顯示㆒些文字, 正確的開始標籤可依列安排 : <CENTER> 對應的結束標籤必須以相反次序排列, 例如開始標籤的首個碼應對應結束標籤最後的碼因此, 述碼的正確結束標籤應安排如 : </CENTER> 注意 : 若嵌套次序不正確, 可能會令格式化的範圍溢出到其他部分, 甚會令文件部分的內容不能如預期般顯示出來試編輯 "myhomepage.htm" 成 : 述碼的結果將如圖所示 : 圖 6 嵌套標籤 <CENTER>, 和 的顯示 46

8 第 13 章網頁編写 F. 段落和換行標籤在 HTML 源文件上按下換行鍵並不會產生預期效果 ( 除增加空格外 ) HTML 的理念是藉著提供充足的格式化標籤, 讓設計師只需使用所提供的標籤, 便可對網頁作版面配置, 指定物件的格式位置等例如 HTML 提供專為分隔文本而設的標籤分別是 : 段落標籤和換行標籤基於述原因, 瀏覽器會忽略文件的換行鍵 (Enter), 並解譯為空格而不是新的㆒行這措施迫使用戶使用 HTML 提供的文本分隔標籤, 而不是換行鍵段落標籤 比換行標籤 多一行空格段落標籤 (...) 屬成對標籤, 用於表明所包括的文本屬於同㆒段落段落之間會以空行來分隔圖 7 段落標籤換行標籤 ( ) 是單㆒指令, 要求瀏覽器以新的㆒行來顯示緊隨其後的文本圖 8 換行標籤格式 format 段落標籤 paragraph tag 換行標籤 line break tag 47

9 互聯網及其應用 G. 加入圖形加入影像方法 : <IMG SRC=" 檔名 "> 網頁若只文本而欠缺圖片是單調乏味的為網頁加插圖片的標籤是 : <IMG SRC=" 檔名 ">. 其 IMG SRC 表影像來源例如 <IMG SRC= computer.jpg > 會在網頁插入圖片 computer.jpg 以的例子把圖形 "bmw.jpg" 插進網頁 : 圖 9 為網頁加入圖形圖 10 加入圖形後的結果 48 影像來源 IMG SRC, image source

第 13 章網頁編写注意 : 述例子的圖形檔案 "bmw.jpg" 必須存放在相關的 HTML 檔案同㆒的目錄若圖形檔案和 HTML 檔案分別存放在不同的目錄, 則必須為圖形檔提供完整的路徑常用於網頁的圖形檔案是 GIF, PNG 和 JPG GIF 及 PNG 適合線條簡單或透明背景的影像, 而 JPG 則適合較細緻及色彩較豐富的影像 H.

10 第 13 章網頁編写注意 : 述例子的圖形檔案 "bmw.jpg" 必須存放在相關的 HTML 檔案同㆒的目錄若圖形檔案和 HTML 檔案分別存放在不同的目錄, 則必須為圖形檔提供完整的路徑常用於網頁的圖形檔案是 GIF, PNG 和 JPG GIF 及 PNG 適合線條簡單或透明背景的影像, 而 JPG 則適合較細緻及色彩較豐富的影像 H. 加入超連結超連結 (Hyperlink) 是讓用戶在互聯網漫遊的設施建立超連結是指將網址嵌入到文本圖片等物件你可能連結到其他網頁或同㆒網頁的其他方, 你亦可能建立寄出電郵的連結錨點標籤 (Anchor tag) 用於創造超連結, 並以列形式出現 : 開始錨點標籤 : <A HREF=" 位置 "> 結束錨點標籤 : </A> A 表錨點,HREF 表超連結參考, 位置是瀏覽器將轉去的網址在錨點標籤之間的文本將被標明 ( 例如藍色字元及加底線 ) 1. 連結到其他的文件列的語句會顯示如圖 11 的文本連結 : <A HREF=" Web</A> 加入超連結方法 : 1. <HREF=" 檔名 ">...</A> 2. <HREF="# 位置 ">...</A> 3. <HREF="mailto:...">...</A> 連結到 " 圖 11 連結到其他網站若用戶在以的超連結按㆒, 瀏覽器將轉到網站 "Radian Web" 路徑 path 透明背景 transparent background 連結參考 HREF, hyper-reference 標明 highlighted 49

11 互聯網及其應用 2. 連結到相同文件的其他位置在建立到同㆒文件其他位置的連結前, 必須先在目標位置放置附錨點 (named anchor), 例如 <A NAME="PartA"></A> 然後, 建立指向這個錨點的連結, 如圖所示 : <A HREF="#PartA">Go to Part A</A>. 3. 電郵連結建立寄出電郵的連結, 方法與建立其他連結相似, 分別只是以 mailto: 取並加入收件的電郵位址列語句會產生如圖 12 的電郵連結 : <A HREF="mailto:[email protected]">Send an to me!</a> 圖 12 連結到電郵軟件若用戶在以的超連結按㆒, 將會啟動預設的電郵軟件, 例如 Microsoft Outlook Express, 而預設的電郵位址會出現在軟件適當的方 50 連結 link 電郵位址 address 電郵軟件 software

Microsoft FrontPage 和 Macromedia Dreamweaver 這些工具提供所見即所得 (WYSIWYG) 編輯器使用這些編輯器, 你只需將文本鍵入文件視窗, 拖放所需的影像及元素到視窗適當的位置, 相關的 HTML 碼即動產生除非你需要處理別的 HTML

12 第 13 章網頁編写 13.4 使用網頁編写工具雖然使用文本編輯器 ( 例如記事本 Notepad) 可建立任何網頁, 但對初者而言, 這方法並不容易, 除必須熟習 HTML 外, 亦需要另外使用瀏覽器才可預覽結果網頁編写工具 (Web authoring tool) 是專為解決述問題而設的軟件較常用的網頁編写工具是 Microsoft FrontPage 和 Macromedia Dreamweaver 這些工具提供所見即所得 (WYSIWYG) 編輯器使用這些編輯器, 你只需將文本鍵入文件視窗, 拖放所需的影像及元素到視窗適當的位置, 相關的 HTML 碼即動產生除非你需要處理別的 HTML 碼或進行調校網頁, 否則你可以完全不用直接編輯這些碼大部分網頁編写工具都附 FTP 功能, 讓你把網頁文件和相關檔案載到網站伺服器在以的部分, 我們將討論 Macromedia Dreamweaver 的使用 A. 啟動 Dreamweaver 工具列文件視窗浮動面板物件面板屬性面板圖 13 Macromedia Dreamweaver MX ( 左 ) 商標 ( 右 ) 常用視窗文本編輯器 text editor 調校 fine-tune 拖放 drag-and-drop 所見即所得 WYSIWYG, what-you-see-is-what-you-get 51

互聯網及其應用圖 14 Dreamweaver 上載網頁到網站的 FTP 功能啟動 Dreamweaver: 在屏幕左角按㆒ 開始 (Start) -> 所程式 (All Programs) 找出 Macromedia Dreamweaver, 然後按㆒ 在 Dreamweaver 啟動後, 多個視窗會同時開啟最常用的視窗文件視窗 (Document window) 物件面板

13 互聯網及其應用圖 14 Dreamweaver 上載網頁到網站的 FTP 功能啟動 Dreamweaver: 在屏幕左角按㆒ 開始 (Start) -> 所程式 (All Programs) 找出 Macromedia Dreamweaver, 然後按㆒ 在 Dreamweaver 啟動後, 多個視窗會同時開啟最常用的視窗文件視窗 (Document window) 物件面板 (Object panel) 屬性面板 (Properties panel) 和網站視窗 (Site File window) 其他浮動面板讓用戶快捷選取 Dreamweaver 的功能代碼檢視設計檢視檢視執行代碼檔案管理更新代碼檢視編碼導航代碼及設計檢視文件名稱在瀏覽器中預覽參考項目選擇圖 15 Dreamweaver 的工具列 52 屏幕 screen 視窗 window 浮動面板 floating panel

( ) 設計和碼檢視 ( ) 圖 16 ( 左 ) 設計檢視 ( 中 ) 代碼檢視 ( 右 )

14 第 13 章網頁編写 B. 設計檢視和碼檢視文件視窗是放置內容的方, 並提供㆔種檢視方式 : 設計檢視 ( ) 碼檢視 ( ) 設計和碼檢視 ( ) 圖 16 ( 左 ) 設計檢視 ( 中 ) 代碼檢視 ( 右 ) 代碼及設計檢視 C. 建立標題每個文件應附適當的標題 (Title), 否則當用戶瀏覽網頁時, 信息未命或檔, 將會分別出現在瀏覽器視窗的標題書籤列表及記錄列表你可以在文件視窗內工具列的標題 (Title) 文本欄鍵入你的標題所鍵入的標題文本會動在 <TITLE>...</TITLE> 標籤之間出現, 如列的碼檢視所示圖 17 設定標題設計檢視 design view 碼檢視 code view 設計和碼檢視 design and code view 書籤列表 bookmark list 記錄列表 history list 53

格式化文本使用 Dreamweaver 來格式化文本, 就好像使用文字處理軟件般容易你可以更改文本的字體字型大小字型款式顏色對齊等格式舉例來說, 若要將某些文本變成粗體, 首先把這些文本標示起來, 然後按 ㆒ 在屬性面板的粗體 (Bold) 按鈕

15 互聯網及其應用 D. 設定背景顏色以的步驟可設定網頁的背景顏色 : 1. 從文件視窗選單, 選擇修改 (Modify) -> 頁面屬性 (Page Properties) 2. 設定背景顏色 : 按㆒ 背景 (Background) 顏色方格, 然後利用滴管 (Color Picker) 選擇顏色滴管圖 18 使用滴管設定背景顏色圖 19 設定背景顏色為黃色 E. 格式化文本使用 Dreamweaver 來格式化文本, 就好像使用文字處理軟件般容易你可以更改文本的字體字型大小字型款式顏色對齊等格式舉例來說, 若要將某些文本變成粗體, 首先把這些文本標示起來, 然後按 ㆒ 在屬性面板的粗體 (Bold) 按鈕 ( ) 便可另㆒方面, 你亦可應用標題 1 標題 2 等段落款式, 把相關的文本㆒次過改變成粗體及較大字型, 只需按㆒ 屬性面板的格式 (Format) 拉式選單, 選取所需的段落格式便可置中靠左靠右圖 20 使用屬性面板改變文本格式粗體斜體左右對齊 54 屬性面板 properties panel 字體 typeface 字型 font 拉式選單 drop-down menu 款式 style

第 13 章網頁編写 F. 插入超連結使用 Dreamweaver 來插入超連結的步驟非常簡單 : 1. 在文件視窗的設計檢視, 選擇相關的文本或影像 2. 在屬性面板的連結 (Link) 文本欄, 鍵入檔, 或按㆒ 連結欄右邊的料夾圖像, 然後選擇相關的檔案若要建立外部的連結 ( 到其他的網站 ), 你必須在屬性面板鍵入相關的網址 1.

16 第 13 章網頁編写 F. 插入超連結使用 Dreamweaver 來插入超連結的步驟非常簡單 : 1. 在文件視窗的設計檢視, 選擇相關的文本或影像 2. 在屬性面板的連結 (Link) 文本欄, 鍵入檔, 或按㆒ 連結欄右邊的料夾圖像, 然後選擇相關的檔案若要建立外部的連結 ( 到其他的網站 ), 你必須在屬性面板鍵入相關的網址 1. 選擇嵌入超連結的文本圖 21 為標示的文本設定連結 2. 鍵入檔名 ( 或 ) 2. 按一下這裡取得一列檔名 G. 插入圖形 1. 將插入點放置在圖形將要出現的方 2. 按㆒ 插入 (Insert) -> 影像 (Image) 或按㆒ 在物件面板 (Object Panel) 常用種類 (Common Category) 的插入影像 (Insert Image) 按鈕 3. 選擇圖形檔案, 按㆒ 確定 (OK) 1. 按一下插入影像按鈕 2. 選擇圖形檔案圖 22 把圖形插進文件內料夾圖像 folder icon 網址 URL 55

17 互聯網及其應用 H. 插入聲音將聲音加入到文件, 可使用兩個不同的方法 : 連結 (Link) 和嵌入 (Embedding) 1. 連結到聲音檔案連結到聲音檔案是指加入聲音檔案的超連結, 與加入其他超連結相似這方法允許訪客決定是否收聽聲音 1. 選擇關文本或影像 2. 在屬性面板, 按㆒ 料夾圖像, 並尋找所需的聲音檔案, 或在連結欄, 直接鍵入聲音檔 ( 或 ) 在這裡按一下, 選擇聲音檔案鍵入聲音檔名連結到聲音檔案的超文本當用戶按一下這裡時, 媒體播放器會啟動, 並開啟聲音檔案圖 23 連結到聲音檔案 56 聲音檔案 audio file 料夾圖像 folder icon

( 如需要 ) 調整文件視窗外掛程式圖像的大小嵌入的音樂外掛程式 (Plugin) 按鈕以外掛程式符號形式出現的嵌入式音樂圖 24 將音樂嵌入一個網頁內媒體播放器自動開啟嵌入式音樂 1.

18 第 13 章網頁編写 2. 嵌入式聲音嵌入式聲音 (Embedded sound) 與插入的圖形相似, 意謂將聲音檔案納入到網頁, 成為網頁的㆒部分, 並迫使用戶的電腦開啟相關的媒體播放器當用戶瀏覽網頁時, 嵌入式聲音將會動播放, ㆒般應用於網頁的背景音樂 1. 在設計檢視, 將插入點放置在你想嵌入聲音的方 2. 按㆒ 物件面板媒體種類 (Media Category) 的外掛程式 (Plugin) 按鈕, 或選擇插入 (Insert) -> 媒體 (Media) -> 外掛程式 (Plugin) 3. 選擇要嵌入的聲音檔案 4. ( 如需要 ) 調整文件視窗外掛程式圖像的大小嵌入的音樂外掛程式 (Plugin) 按鈕以外掛程式符號形式出現的嵌入式音樂圖 24 將音樂嵌入一個網頁內媒體播放器自動開啟嵌入式音樂 1. 使用文本編輯器, 例如 Windows 的 NotePad, 嘗試鍵入所有在這章中的 HTML 代碼圖 25 附有嵌入式音樂的網頁檢視 2. 現時, 很多網頁都加上動畫做一個有關你這星期瀏覽過的網頁的統計, 以確定這句說話那個動畫編寫軟件是最廣泛地用於網頁設計? 這些軟件是由那間公司創造? 參閱那些公司的網站, 並取得更多有關於這種產品的資訊媒體播放器 media player 57

19 互聯網及其應用 1. 網頁包括 HTML 檔案及 [ 或 ] 圖形聲音和視像等檔案 2. HTML 代表超文本標示語言,HTML 檔案是能被所有的電腦讀取的文字檔 3. 下列的四對標籤是 HTML 檔案必需的 :<HTML>...</HTML>, <HEAD>...</HEAD>, <TITLE>...</TITLE>, <BODY>...</BODY>. 4. ... 產生粗體字元 ... 產生斜體字元 ... 產生加底線字元 <CENTER>...</CENTER> 將有關段落文本置中 4. 段落標籤 (... ) 是成對指令, 標示其中的文本屬於相同段落, 而段落之間以空行分隔換行標籤 ( ) 是單一指令要求瀏覽器將緊隨其後的文本在下一行顯示 5. <img src="file_name"> 顯示圖形,IMG SRC 代表 " 影像來源 " file_name 是影像檔名 6. 加入超連結方法 : 1. <HREF=" 檔名 "">...</A> 2. <HREF="# 位置 "">...</A> 3. <HREF="mailto:...">...</A> A 代表錨點,HREF 代表超連結參考, 位置是瀏覽器將轉去的地方 6. Microsoft FrontPage 和 Macromedia Dreamweaver 是網頁編寫工具的例子, 這些工具提供所見即所得 (WYSIWYG) 編輯器使用 WYSIWYG 編輯器, 創造網頁文件就如文字處理般容易 7. 音樂 / 聲音可以用連結或嵌入方式插進網頁, 連結到聲音檔案與連結到其他網頁類似, 嵌入聲音檔案將迫使用戶的電腦播放聲音 58

20 第 13 章網頁編写多項選擇題 1. HTML 檔案內 A. 只包含文本 B. 只包含文本和圖形 C. 只包含圖形和聲音 D. 包含所有類型的多媒體元素 2. HTML 標籤使用一對 A. <> B. [] C. {} D. () 3. HTML 檔案只有 A. 正文 B. 頭部和正文 C. 頭部正文和尾部 D. 頭部和尾部 4. 下列哪項 HTML 語句正確地以粗斜體款式把文本 "message" 格式化? A. message B. message C. message D. message 5. 出現在瀏覽器上網頁的內容必須放置在 A. <HEAD> 和 </HEAD> 之間 B. <TITLE> 和 </TITLE> 之間 C. <BODY> 和 </BODY> 之間 D. <A HREF> 和 </A> 之間 6. 下列哪項可作為網頁的預設主頁? A. home.htm B. index.htm C. title.htm D. reindex.htm 7. 下列語句出現在某 HTML 檔案中 : <IMG SRC="mydog.jpg"> 網頁將會顯示 A. 一些文本 B. 一些超文本 C. 一個圖形 D. 一個按鈕 59

21 互聯網及其應用 8. 下列語句出現在某 HTML 檔案中 : <A HREF="mailto:[email protected] ">Click here</a> 在網頁上將會顯示 A. 一些文本 B. 跳到新網頁的文本連結 C. 啟動電郵軟件的文本連結 D. 顯示郵件信箱的圖形 9. 下列哪項工具是上載網頁所需的? A. 瀏覽器 B. FTP 程式 C. 文字處理軟件 D. 圖形編輯軟件 10. 網頁編寫工具的輸出是 A. 文字檔 B. 二進制檔案 C. 附有檔擴展名 ".exe" 的執行檔案 D. 多媒體檔案問答題 1. (a) HTML 代表什麼? (b) 什麼是標示語言? (c) 解釋標示語言為什麼不被視為程式語言 2. (a) 舉出兩種常見於網站伺服器上的檔案 (b) 解釋使用某類型電腦建立的網頁為什麼能在幾乎所有其他類型的電腦上進行檢視? 3. (a) 寫出兩類存貯在 HTML 檔案中的資訊 (b) 如何區別這些資訊? 4. 寫出產生下列各項格式化文本的 HTML 語句 : (a) computer and information technology (b) computer and information technology (c) computer and information technology (d) computer and information technology 5. 描述下列各項 HTML 語句的用意 : (a) <IMG SRC = "printer.jpg"> (b) <A HREF=" (c) <A HREF=" SRC="printer.jpg"></A> (d) <A HREF="mailto://[email protected]">Contact me!</a> 60

22 第 13 章網頁編写 6. 以下是一個 HTML 文件 : <html> <head> <title>proper Keyboard Placement</title> </head> <body> proper keyboard placement is important to your health! keyboards should be located to allow a comfortable, neutral posture during use. This is typically considered to be directly in front of you. placement of the keyboard to the side results in twisting, awkward postures, and uneven loading on the body. <a href=" src="keyboard.jpg"></ a> <a href="mailto://[email protected]">contact us</a> (a) 當以上文件交給瀏覽器解譯時, 瀏覽器的標題欄將會出現什麼文本? (b) 寫出所有在瀏覽器上以粗體形式出現的文本 (c) 寫出所有在瀏覽器上以斜體形式出現的文本 (d) 這網頁包含了一個影像 i) 寫出該影像的檔名 ii) 若用戶在這影像上按一下, 將會發生什麼? (e) 標籤 有什麼意義? 它與在 HTML 檔案上按下的換行鍵 (ENTER) 有何不同? (f) 描述若用戶在網頁上的 "Contact us" 文本上按一下後的後果 61

p.2 1 <HTML> 2 3 <HEAD> 4 <TITLE> </TITLE> 5 </HEAD> 6 7 <BODY> 8 <H3> </H3> 9 <H4> </H4> 10 </BODY> </HTML> 1. HTML 1. 2.

p.2 1 <HTML> 2 3 <HEAD> 4 <TITLE> </TITLE> 5 </HEAD> 6 7 <BODY> 8 <H3> </H3> 9 <H4> </H4> 10 </BODY> </HTML> 1. HTML 1. 2. 2005-06 p.1 HTML HyperText Mark-up Language 1. HTML Logo, Pascal, C++, Java HTML 2. HTML (tag) 3. HTML 4. HTML 1. HTML 2. 3. FTP HTML HTML html 1. html html html cutehtmleasyhtml 2. wyswyg (What you see