CT212 (02/03)-Network Programming and design 27 April, 2002 HTML (1) - 基礎知識 HTML 透過一系列之標籤 (tags) 去描述如何在網頁中顯示各項網頁元件。例如:文字、圖畫等。 所有標籤皆要寫在起角括號內 : 容器標籤 – 成對出現 , 含開始及結束標籤 。 (例 : <html> ….. </html> ) 空標籤 – 沒有結束標籤 (例 : <br>) 大部份標籤皆容許我們在其內加入屬性 (attributes)。 (例 : <H1 align=“center”> …. </H1> ) HTML 是一組 ASCII 文字集合, 它不理會文字大細楷的分別, 亦不會顯示分行及空白字符。 所有網頁之原始編碼皆可透過點選瀏覽器功能列上的 “檢視-> 原始檔”去查閱。 下方之標籤可讓我們在網頁編碼內加入註釋，讓讀者知道該html語句之用途 , 但它不會在網頁內顯示出來。 <!-- 文字註釋 --> School of Science & Technology
CT212 (02/03)-Network Programming and design 27 April, 2002 HTML (2) - 外框結構 <html> <head> <title>……. </title> </head> <body> …….. </body> </html> 範例 School of Science & Technology
CT212 (02/03)-Network Programming and design 27 April, 2002 HTML (3) – 文本格式 新段落 : <p> 或 <p> </p> 新行 : <br> 預設格式的文字 : <pre> ….…</pre> 文字影象標題等置中處理 : <center> ……</center> 標題字 : 分6 級 , <h1> ….</h1> , …. <h6….. <h6> H1是最大的 水平分尺 : <hr> 4種屬性 例: <hr size=8 Align=right Width=30 Noshade> (粗幼) (對齊型式) (水平長度) (打陰影) 範例 School of Science & Technology
CT212 (02/03)-Network Programming and design 27 April, 2002 HTML (4) – 字體 格式 <B>..</b> (粗體), <I>…</I> (斜體) , <TT>..</tt> (打字機字體) , <U>..</u> (底線), <FONT size=n1 Color=n2 face=? > …. </font> (字型) 當中, n1=1 至 7; n2=“#RRGGBB” (R,G,B 是16進制數值 , 分別代表紅、綠、藍三色) Global顏色: <body bgcolor=n2 text=n2 link=n2 alink=n2 vlink=n2> 範例 School of Science & Technology
CT212 (02/03)-Network Programming and design 27 April, 2002 HTML (5) - 表列(list) 可分層次 , 相互嵌入 (nested) 分 3 類 1. 非數字表列(unordered list) : <ul> <li>….. <li> ….. </ul> ul 屬性 <ul type=[circle, square, disc(預設)] li 屬性 <li type=* start=* value=*> 2. 數字表列(ordered list) : <ol> <li>……<li>…..</ol> ol 屬性 <ol type=[a|A|i|I|1(預設)] start=?> 當中, a -> 細楷字母, A -> 大楷字母, i -> 細楷羅馬數字, I -> 大楷羅馬數字 , 1 -> 亞拉伯數字 ? 代表該表列之起始數值 School of Science & Technology
CT212 (02/03)-Network Programming and design 27 April, 2002 HTML (6) – 表列 (續) 3. 定義性(definitive)表列: <DL> <DT> 項目 1 <DD> 項目 1 內容 <DT> 項目 2 <DD> 項目 2 內容 </DT> 範例 1 範例 2 (嵌入之例子) School of Science & Technology
CT212 (02/03)-Network Programming and design 27 April, 2002 HTML (7) - 超連結 連結至另一網頁或檔案 (例 *.doc, *.ppt 等) <a href=“絕對或相對網頁地址”> ……. </a> 例 : <a href=“www.ouhk.edu.hk”>公開大學</a> 或 <a href=“intro.html”> 網頁介紹 </a> 寄電郵之超連結 <a href=mailto:收件人之電郵地址>…...</a> 例 : <a href=mailto:abc@yahoo.com>寄信給我</a> School of Science & Technology
CT212 (02/03)-Network Programming and design 27 April, 2002 HTML (8) - 影像 整個網頁之背景畫面 : <body background=“影像檔之絕對或相對地址”> 在網頁內加入影像 : <img src=“影像檔之絕對或相對地址及其名稱” height=“n1” width=“n2” border=“n3” align=[top|bottom(default)|middle|left|right] alt=“當影像檔不能被顯示時出現的字句”> 當中, n1,n2,n3 皆以圖素(pixels)數目為單位 範例 School of Science & Technology
CT212 (02/03)-Network Programming and design 27 April, 2002 HTML (9) - 表單(Table) <table>..</table> 表之開始及結束 <tr>…..</tr> 表內每一列之開始及結束 <td>…..</td> 表內每一列之每個儲存格的開始及結束 <caption> .. </caption> 寫在表上的標題 (非必需) <th>…</th> 表內每欄之標題 (非必需) 範例 School of Science & Technology
CT212 (02/03)-Network Programming and design 27 April, 2002 HTML (11) – 表格 功能 : 收集用戶輸入之數據, 並將之傳遞至伺服 器中作處理或運算 基本格式 : <FORM ACTION=“URL” METHOD=[get|post] > 表格輸入元素 </FORM> 其中 URL 是指處理表格數據之伺服器端程序的相對或絕對位址. School of Science & Technology
CT212 (02/03)-Network Programming and design 27 April, 2002 HTML (12) – 表格(續) 輸入元素 : 1. 文字欄位 Text box 2. 捲軸文字欄位 Scrollbar textbox 3. 多選項欄位 Checkbox 4. 單選按鈕 Radio button 5. 多項下拉式選單 (Multiple) Select Menu 6. 遞交按鈕 Submit button 7. 重設按鈕 Reset button 8. 密碼欄 Password 9. 隱藏欄位 Hidden field 10. 檔案欄位 File field 兩種傳遞方法 : GET or POST 範例 School of Science & Technology
框架 (frame) 參考教科書 p.85-89 範例
靜態html vs 動態html 靜態html (static html): 除非網頁設計者對網頁內容作出修改並再上傳至網站 , 否則, 其內容及外貌永遠不會改變 . 單靠使用不同的網頁標籤寫成 . 例子 : 本科科網
靜態html vs 動態html 動態html (dynamic html): 內容及外貌隨用戶的動作而作出相關網頁回應 . (css) (client-side script) 例子
程序片段(伺服器端vs客戶端) Server-side scripts vs Client-side scripts CT212 (02/03)-Network Programming and design 27 April, 2002 程序片段(伺服器端vs客戶端) Server-side scripts vs Client-side scripts 根據程序片段之地方作分類 : 在伺服器內執行 -> 伺服器程序片段 在用戶的瀏覽器上執行 -> 客戶端程序片段 兩類程序片段皆貯存於網頁伺服器內 Client-side scripts 的優點 : 運算交由客戶端進行 => 可令網頁伺服器有較佳表現 (因伺服器要執行的運算減少了) 令網頁變得互動及吸引 可節省 INTERNET 的頻寬供其他上網用戶使用 缺點 : 如網頁內容須牽涉數據庫內數據的存取 , 就要靠Server-side scripts 才可做到 School of Science & Technology
Client-side script 的運作流程 CT212 (02/03)-Network Programming and design 27 April, 2002 Client-side script 的運作流程 (1) 透過http要求url 瀏覽器 (客戶) 網頁伺服器 (2) 網頁被傳到瀏覽器 嵌入了client-side script之網頁 網頁 HTML 0 (3) 瀏覽器掃描程序片段 Client-side script (4) Script 在客戶機中產生了另 一網頁 HTML 1 (5)瀏覽器顯示 HTML 1 網頁 HTML 0 HTML 1 School of Science & Technology
Server-side script 之運作流程 CT212 (02/03)-Network Programming and design 27 April, 2002 Server-side script 之運作流程 (1) 透過http要求url 瀏覽器 (客戶端) 網頁伺服器 Script 及 靜態 html 貯在其中 (伺服器端) (2) URL內的空白表格被傳 回作輸入資料 (3) 用戶在表格內輸入數據 (7) 網頁經HTTP傳回瀏覽器 (4) Script 存取數據 (5) 回傳所需數據 (6)Script 插入數據到 網頁 數據庫伺服器 (數據) School of Science & Technology
CT212 (02/03)-Network Programming and design 合作流程 27 April, 2002 (1) 透過http要求url 瀏覽器 (客戶) 網頁伺服器 (伺服器端) 網頁 HTML 0 HTML 1 (2) server-side script 被執行(如有需要, 與數據庫溝通) 及 在伺服器端產生 HTML 1 (3) 網頁被傅回瀏覽器 網頁 HTML 0 Client-side script server-side script (4)瀏覽器掃描程序片段 Client-side script (5) client-side script 被執行及在客戶機中產生 HTML 2 (6) 瀏覽器顯示HTML 2 網頁 HTML 0 HTML 1 HTML 2 School of Science & Technology
CT212 (02/03)-Network Programming and design 27 April, 2002 JavaScript (1) – 介紹 最出名之client-side script, 由 Netscape 開發 建基於 Java 之語法, 能與 Java 程式兼容 與 C++ 程序語言相似 (物件導向) 提供 3 種效能 : 審核輸入到表格內之數據與及向用戶提供輸入錯誤提示 => 回應較快 處理由用戶觸發之事件, 例如當滑鼠移到一圖案上, 該圖案即由另一圖案所取代 => 網頁變得較互動及吸引 在客戶端進行數學運算 => 減輕伺服器之工作量 School of Science & Technology
CT212 (02/03)-Network Programming and design 27 April, 2002 JavaScript (2) – 基礎知識 嵌入在 HTML內 (Head 或 Body 部份) 及由瀏覽器翻譯 所有 JavaScript 語句皆被 <script language=“JavaScript”> ……. </script> 所包圍 語句之間要用分號分隔 School of Science & Technology
Javascript 範例 javascript_basic Javascript_event.html Javascript_form.html Javascript_func.html Javascript_intro.html Javascript_window.html
CT212 (02/03)-Network Programming and design 27 April, 2002 CGI (1) 公共閘道介面 Common Gateway Interface (CGI) 所有以windows及unix作 OS 之網頁伺服器皆支援此介面 可用以下程序語言編寫能使用 cgi 介面 技術之應用程序 : Perl, C, C++, Java School of Science & Technology
CT212 (02/03)-Network Programming and design 27 April, 2002 CGI (2) – 介紹 Server-side 運作 CGI script 可以是任何一個可執行的程式 (例 : Perl, compiled C, shell script 等) 如何呼叫 CGI script: <form action=“CGI_script的URL” method=[get | post] > ….. </form> 2 種方法 – GET, POST 傳遞數據至伺服器的不同方式 School of Science & Technology
CT212 (02/03)-Network Programming and design 27 April, 2002 CGI (3) – GET 輸入到表格內之數據, 會加在 URL後才傳送出去 : URL?var1=數值1&var2=數值2&var3=數值3 所有在 ? 後的數據會被抄至伺服器內之環境變量“QUERY_STRING” 內貯存 . QUERY_STRING = ‘var1=數值1&var2=數值2&var3=數值3’ CGI script 由 “QUERY_STRING” 中抽取各數值 如輸入的數據含有特殊符號, 在傳送前, 會變成一些 ascii 字符 School of Science & Technology
CT212 (02/03)-Network Programming and design 27 April, 2002 CGI (4) – GET (續) School of Science & Technology
CT212 (02/03)-Network Programming and design 27 April, 2002 CGI (5) – Post CGI script 直接接收由表格傅來的輸入數據 環境變數 “CONTENT_LENGTH” 內含數據之總長度 比 GET 更為常用 School of Science & Technology