網頁編写 在完成這章後, 你將能夠 建造簡單的網頁 了解㆒些基本的 HTML 碼 在建造網頁時, 懂得應用超連結 在建造網頁時, 懂得應用多媒體 網頁包括 : 1. HTML 檔案及 [ 或 ] 2. 圖形 聲音和視像及其他的檔案 在用戶漫遊萬維網時, 電腦會收到純文本的 HTML 檔案, 此外, 亦會收到相關的圖形 聲音和視像等檔案 瀏覽器會為 HTML 檔案進行解譯, 根據所提供的 料在屏幕適當的位置顯示相關的物件 用戶電腦 網站伺服器 傳送中的檔案 瀏覽器 圖 1 網頁及多媒體檔案從伺服器傳送到用戶電腦 40 超連結 hyperlink 網站伺服器 web server
第 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
互聯網及其應用 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
第 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
互聯網及其應用 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. <HTML></HTML> <HEAD></HEAD> <TITLE></TITLE> <BODY></BODY> <B></B> <U></U> <I></I> <CENTER></CENTER> 單一指令標籤的例子 1. <BR> 2. <IMG> 單㆒指令標籤 (Single command tag) 用於發出某些行動的指令 例如 換行 <BR> 和插入圖形 <IMG> 等 由於指令標籤不是針對某部分文本 所以 碼可以單獨存在 E. 嵌套標籤 嵌套標籤使用方法類似 數學的括號 嵌套標籤 (Nested tag) 意謂把㆒組標籤放於另外㆒組內 在以 的例 子 <I>...</I> 及 <U>...</U> 便是嵌套在 <B>...</B> 之內 <B>These words are <I>bold italics</i> and these are <U>bold underlined</u>.</b> 圖 6 靠 對齊 right-justified 顯示在瀏覽器的嵌套標籤 45
互聯網及其應用 注意, 嵌套標籤的層次應像使用數 括號般, 必須合乎邏輯, 不能胡亂放置 舉例來說, 若以較大的字型 置 及粗體來顯示㆒些文字, 正確的開始標籤可依 列安排 : <CENTER> <FONT SIZE="+1"> <B> 對應的結束標籤必須以相反次序排列, 例如開始標籤 的首個 碼應對應結束標籤 最後的 碼 因此, 述 碼的正確結束標籤應安排如 : </B> </FONT> </CENTER> 注意 : 若嵌套次序不正確, 可能會令格式化的範圍溢出到其他部分, 甚 會令文件部分的內容不能如預期般顯示出來 試編輯 "myhomepage.htm" 成 : 述 碼的結果將如 圖所示 : 圖 6 嵌套標籤 <CENTER>,<FONT SIZE="+1"> 和 <B> 的顯示 46
第 13 章網頁編写 F. 段落和換行標籤 在 HTML 源文件上按下換行鍵並不會產生預期效果 ( 除增加空格外 ) HTML 的理念是藉著提供充足的格式化標籤, 讓設計師只需使用所提供的標籤, 便可對網頁作版面配置, 指定物件的格式 位置等 例如 HTML 提供專為分隔文本而設的標籤分別是 : 段落標籤和換行標籤 基於 述原因, 瀏覽器會忽略文件 的換行鍵 (Enter), 並解譯為空格而不是新的㆒行 這措施迫使用戶使用 HTML 提供的文本分隔標籤, 而不是換行鍵 段落標籤 <P> 比換行標籤 <BR> 多一行空格 段落標籤 (<P>...</P>) 屬成對標籤, 用於表明所包括的文本屬於同㆒段落 段落之間會以空行來分隔 圖 7 段落標籤 換行標籤 (<BR>) 是單㆒指令, 要求瀏覽器以新的㆒行來顯示緊隨其後的文本 圖 8 換行標籤 格式 format 段落標籤 paragraph tag 換行標籤 line break tag 47
互聯網及其應用 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. 加入超連結 超連結 (Hyperlink) 是讓用戶在互聯網 漫遊的設施 建立超連結是指將網址嵌入到文本 圖片等物件 你可能連結到其他網頁或同㆒網頁的其他 方, 你亦可能建立寄出電郵的連結 錨點標籤 (Anchor tag) 用於創造超連結, 並以 列形式出現 : 開始錨點標籤 : <A HREF=" 位置 "> 結束錨點標籤 : </A> A 表錨點,HREF 表超連結參考, 位置 是瀏覽器將轉去的網址 在錨點標籤之間的文本將被標明 ( 例如藍色字元及加底線 ) 1. 連結到其他的文件 列的語句會顯示如圖 11 的文本連結 : <A HREF="http://www.radian.com.hk">Radian Web</A> 加入超連結方法 : 1. <HREF=" 檔名 ">...</A> 2. <HREF="# 位置 ">...</A> 3. <HREF="mailto:...">...</A> 連結到 "www.radian.com.hk" 圖 11 連結到其他網站 若用戶在以 的超連結按㆒, 瀏覽器將轉到網站 "Radian Web" 路徑 path 透明背景 transparent background 連結參考 HREF, hyper-reference 標明 highlighted 49
互聯網及其應用 2. 連結到相同文件的其他位置 在建立到同㆒文件其他位置的連結前, 必須先在目標位置放置附 錨點 (named anchor), 例如 <A NAME="PartA"></A> 然後, 建立指向這個錨點的連結, 如 圖所示 : <A HREF="#PartA">Go to Part A</A>. 3. 電郵連結 建立寄出電郵的連結, 方法與建立其他連結相似, 分別只是以 mailto: 取 http://, 並加入收件 的電郵位址 列語句會產生如圖 12 的電郵連結 : <A HREF="mailto:wnchan@radian.com.hk">Send an email to me!</a> 圖 12 連結到電郵軟件 若用戶在以 的超連結 按㆒, 將會啟動預設的電郵軟件, 例如 Microsoft Outlook Express, 而預設的電郵位址會出現在軟件適當的 方 50 連結 link 電郵位址 e-mail address 電郵軟件 e-mail software
第 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) 物件面板 (Object panel) 屬性面板 (Properties panel) 和 網站視窗 (Site File window) 其他浮動面板讓用戶快捷 選取 Dreamweaver 的功能 代碼檢視 設計檢視 檢視執行代碼 檔案管理 更新代碼檢視 編碼導航 代碼及設計檢視 文件名稱 在瀏覽器中預覽 參考 項目選擇 圖 15 Dreamweaver 的工具列 52 屏幕 screen 視窗 window 浮動面板 floating panel
第 13 章網頁編写 B. 設計檢視和 碼檢視 文件視窗是放置內容的 方, 並提供㆔種檢視方式 : 設計檢視 ( ) 碼檢視 ( ) 設計和 碼檢視 ( ) 圖 16 ( 左 ) 設計檢視 ( 中 ) 代碼檢視 ( 右 ) 代碼及設計檢視 C. 建立標題 每個文件應附 適當的標題 (Title), 否則當用戶瀏覽網頁時, 信息 未命 或檔, 將會分別出現在瀏覽器視窗的標題 書籤列表及記錄列表 你可以在文件視窗內工具列的標題 (Title) 文本欄 鍵入你的標題 所鍵入的標題文本會 動 在 <TITLE>...</TITLE> 標籤之間出現, 如 列的 碼檢視所示 圖 17 設定標題 設計檢視 design view 碼檢視 code view 設計和 碼檢視 design and code view 書籤列表 bookmark list 記錄列表 history list 53
互聯網及其應用 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. 選擇嵌入超連結的文本 圖 21 為標示的文本設定連結 2. 鍵入檔名 ( 或 ) 2. 按一下這裡取得一列檔名 G. 插入圖形 1. 將插入點放置在圖形將要出現的 方 2. 按㆒ 插入 (Insert) -> 影像 (Image) 或按㆒ 在 物件面板 (Object Panel) 常用 種類 (Common Category) 的 插入影像 (Insert Image) 按鈕 3. 選擇圖形檔案, 按㆒ 確定 (OK) 1. 按一下 插入影像 按鈕 2. 選擇圖形檔案 圖 22 把圖形插進文件內 料夾圖像 folder icon 網址 URL 55
互聯網及其應用 H. 插入聲音 將聲音加入到文件, 可使用兩個不同的方法 : 連結 (Link) 和嵌入 (Embedding) 1. 連結到聲音檔案 連結到聲音檔案是指加入聲音檔案的超連結, 與加入其他超連結相似 這方法允許訪客決定是否收聽聲音 1. 選擇 關文本或影像 2. 在屬性面板, 按㆒ 料夾圖像, 並尋找所需的聲音檔案, 或 在連結欄, 直接鍵入聲音檔 ( 或 ) 在這裡按一下, 選擇聲音檔案 鍵入聲音檔名 連結到聲音檔案的 超文本 當用戶按一下這裡時, 媒體播放器會啟動, 並開啟聲音檔案 圖 23 連結到聲音檔案 56 聲音檔案 audio file 料夾圖像 folder icon
第 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
互聯網及其應用 1. 網頁包括 HTML 檔案及 [ 或 ] 圖形 聲音和視像等檔案 2. HTML 代表超文本標示語言,HTML 檔案是能被所有的電腦讀取的文字檔 3. 下列的四對標籤是 HTML 檔案必需的 :<HTML>...</HTML>, <HEAD>...</HEAD>, <TITLE>...</TITLE>, <BODY>...</BODY>. 4. <B>...</B> 產生粗體字元 <I>...</I> 產生斜體字元 <U>...</U> 產生加底線字元 <CENTER>...</CENTER> 將有關段落文本置中 4. 段落標籤 (<P>... </P>) 是成對指令, 標示其中的文本屬於相同段落, 而段落之間以空行分隔 換行標籤 (<BR>) 是單一指令要求瀏覽器將緊隨其後的文本在下一行顯示 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
第 13 章網頁編写 多項選擇題 1. HTML 檔案內 A. 只包含文本 B. 只包含文本和圖形 C. 只包含圖形和聲音 D. 包含所有類型的多媒體元素 2. HTML 標籤使用一對 A. <> B. [] C. {} D. () 3. HTML 檔案只有 A. 正文 B. 頭部和正文 C. 頭部 正文和尾部 D. 頭部和尾部 4. 下列哪項 HTML 語句正確地以粗斜體款式把文本 "message" 格式化? A. <I><B>message<B><I> B. </I></B>message<B><I> C. <I><B>message</I></B> D. <B><I>message</I></B> 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
互聯網及其應用 8. 下列語句出現在某 HTML 檔案中 : <A HREF="mailto:webmaster@radian.com.hk ">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="http://www.hp.com">Printer</A> (c) <A HREF="http://www.hp.com"><IMG SRC="printer.jpg"></A> (d) <A HREF="mailto://abc@123.com">Contact me!</a> 60
第 13 章網頁編写 6. 以下是一個 HTML 文件 : <html> <head> <title>proper Keyboard Placement</title> </head> <body> <p><font size="5" ><i><b>proper keyboard placement is important to your health!</b></i></font></p> <p>keyboards should be located to allow a <b>comfortable</b>, <b>neutral posture</b> during use. This is typically considered to be directly <b>in front of</b> you.</p> <p>placement of the keyboard to the side results in <u>twisting</u>, <u>awkward postures</u>, and <u>uneven loading on the body</u>. </p> <p><a href="http://www.itsd.gov.hk/"><img src="keyboard.jpg"></ a></p> <p><a href="mailto://abc@hkstar.com">contact us</a></p> (a) 當以上文件交給瀏覽器解譯時, 瀏覽器的標題欄將會出現什麼文本? (b) 寫出所有在瀏覽器上以粗體形式出現的文本 (c) 寫出所有在瀏覽器上以斜體形式出現的文本 (d) 這網頁包含了一個影像 i) 寫出該影像的檔名 ii) 若用戶在這影像上按一下, 將會發生什麼? (e) 標籤 <p> </p> 有什麼意義? 它與在 HTML 檔案上按下的換行鍵 (ENTER) 有何不同? (f) 描述若用戶在網頁上的 "Contact us" 文本上按一下後的後果 61