TUTOR

HyperText Markup Language

HTML 檔的組成

URL (Uniform Resource Locators )

開始寫 HTML 檔

編排您的資料

變化文字的字體

List 條列出資料項目

在資料中加上圖形

Link 引導讀者到其它地方

Advanced

Design

FORM

內文設計準則

圖像設計準則

版面設計準則

鏈結設計準則

Common Gateway Interface

W3 伺服器比較

MISC

Untitled Document
HyperText Markup Language
HTML 是什麼
   
HTML (Hypertext Markup Language) 超 文 件 標 註 語 言 , 是 一 種 用 來 建 立 超 文 件 (Hypertext Document) 的 簡 單 格 式 . 是 目 前 提 供 WWW 資 訊 最 通 用 的 格 式
如何寫 HTML
   
撰 寫 HTML 可 用 普 通 的 文 書 編 輯 器 , 寫 成 HTML 檔 (檔 案 附 名 通 常 是 *.html 或 *.htm) . 像 是 DOS 下 的 Edit 、 PE2 , Windows 下 的 記 事 本 (notepad) 都 可 以

也 有 一 些 編 寫 HTML 專 用 的 編 輯 器 , 使 得 撰 寫 的 工 作 更 容 易

Thu Sep 30 06:11:45 CST 2021 Untitled Document
HTML 檔的組成
 
Major Elements
標籤 (tag) 文字與圖形資料 (URL)
標籤 (tag) 
標籤是HTML學習的重點.在寫慣HTML檔,會發現大部分時候,
都是把資料加上一些標籤,呈現出來.它可以決定
資料輸出的方式(像是段落、條列、字體...)或是
連接不同的資源(如圖形、檔案、另一份文件...).
標籤由兩個角括號<、>和角括號包圍的
文字構成,其文字是大小寫無關.
例如   <p>  和   <P>的效果是相同的.
 
單 一 標 籤
   
只 要 一 個 標 籤 就 能 完 成 所 要 表 示 的 動 作
<hr> 可 顯 示 出 一 條 水 平 的 分 隔 線
 
成 對 標 籤
   
需 要 兩 個 標 籤 才 能 完 成 所 要 表 示 的 動 作
<b>test 123</b> 使 「test 123」 這 段 文 字 加 粗 顯 示
  
我 們 把 <b> 稱 為 前 標 籤 (start tag) , </b> 稱 為 後 標 籤 (end tag) . 後 標 籤 比 較 特 別 的 地 方 在 它 是 由 </ 、 > 構 成 , 文 字 部 分 則 與 前 標 籤 對 映 有 部 分 標 籤 擁 有 屬 性 (attribute) 能 夠 對 標 籤 的 特 性 加 以 控 制
   
例 如 : <hr width=50%> , 其 中 width=50% 就 是 <hr> 這 個 標 籤 的 屬 性 , 使 得 水 平 分 割 線 只 有 半 個 視 窗 寬 , 原 本 是 整 個 視 窗 寬
文字、圖形資料
   
這 裡 的 文 字 與 圖 形 , 指 的 是 要 提 供 給 瀏 覽 資 訊 者 閱 讀 的 東 西 . 雖 然 WWW 能 把 資 料 包 裝 美 觀 , 如 果 不 是 有 價 值 的 資 料 仍 屬 枉 然
   
一 般 文 字 資 料 是 搭 配 標 籤 , 直 接 寫 在 HTML 檔 中 . 可 以 視 做 是 文 字 的 加 工 . 而 WWW 顯 示 的 圖 形 都 是 各 別 以 檔 案 形 式 存 在 , 倘 使 要 顯 示 圖 形 (圖 形 檔 用 其 它 程 式 建 立) , 必 須 用 特 別 的 標 籤 指 向 圖 形 檔
 
如何處理 < 及 > 等特殊符號
   
標 籤 是 使 用 角 括 號 < 和 > . 如 果 要 顯 示 這 些 角 括 號 呢 ?
   
今 天 蛋 (角 括 號) 能 孵 出 雞 (標 籤) 來 , 我 們 不 能 寄 望 蛋 還 能 孵 出 蛋 . 在 HTML 裡 有 別 的 辦 法 解 決 這 樣 的 問 題 :
   
兩種處理方式
Entity Reference 用 縮 寫 代 表 一 字 元
Numberic Character Reference 用 ASCII 碼 代 表 一 字 元
   
例 :
顯示字元 Entity
Reference 		Numeric Char
Reference 		意義
& &amp; &#38; And 符號
< &lt; &#60; 小於符號
> &gt; &#62; 大於符號
  
也 就 是 在 HTML 檔 中 有 「&lt;」 這 樣 的 描 述 , 在 WWW 顯 示 就 是 一 個 「<」 小 於 符 號
Thu Sep 30 06:11:45 CST 2021 Untitled Document
URL (Uniform Resource Locators )
   
用 來 指 示 某 一 網 際 網 路 (Internet) 資 源 的 位 置
格式
<服務資源名稱>:<連接資源方式>
服務資源名稱:
   
用以指定服務種類
   
http、ftp、gopher、news、telnet ... 等
連接資源方式:
   
//<電腦主機的網路位址>:<埠址>/<目錄>/<檔案>

電腦主機的網路位址 指 定 連 接 的 電 腦 主 機 . 可 用 IP 位 址 或 網 域 名 稱
埠址 指 定 連 接 埠
目錄、檔名 和 個 人 電 腦 上 目 錄 、 檔 案 的 概 念 相 同
 
例
WWWhttp://www.fido.net.tw/
連 接 www.fido.net.tw 的 WWW 伺 服 器
Gophergopher://gopher.twnic.net/11/taiwan/
連 接 gopher.twnic.net 瀏 覽 /11/taiwan/ 目 錄 下 的 資 訊 : 臺 灣 Internet 團 體
FTPftp://ftp.tku.edu.tw/pc/windows/WWW/Client/NetScape/n16e12n.exe
連 上 ftp.tku.edu.tw 將 目 錄 /pc/windows/WWW/Client/NetScape/ 下 的 n16e12n.exe 傳 回
Mailtomailto:tutor@www.fido.net.tw
寄 信 給 tutor@www.fido.net.tw
Newsnews:tw.bbs.comp.www
閱 讀 tw.bbs.comp.www , WWW 討 論 區 的 News
[註] 必 須 先 設 定 從 那 裡 讀 News
Telnettelnet://archie@servers.nctu.edu.tw/
以 telnet 使 用 servers.nctu.edu.tw 的 archie (檔 案 找 尋 系 統)
[註] 必 須 先 設 定 好 使 用 的 telnet 程 式
Relative Path
   
雖 然 URL 提 供 了 連 接 網 路 資 源 的 方 法 , 對 於 撰 寫 HTML 的 人 來 說 , 一 個 檔 案 中 可 能 要 用 到 許 多 指 向 其 它 檔 案 的 URL . 很 可 能 這 些 檔 案 就 在 和 自 己 相 同 的 電 腦 主 機 上 , 難 道 每 次 都 要 重 覆 輸 入 自 己 的 電 腦 主 機 名 稱 嗎 ?
   
有 個 辦 法 , 可 免 去 這 種 困 擾 . 和 我 們 以 命 令 列 執 行 檔 案 的 狀 況 相 似 , 在 使 用 時 有 所 謂 的 絕 對 路 徑 與 相 對 路 徑
   
現 在 顯 示 的 檔 案 http://home.fido.net.tw/TUTOR/W3/html.html . 在 撰 寫 這 個 html.html 檔 時 , 就 已 設 計 在 相 同 目 錄 下 都 是 擺 WWW 相 關 的 東 西 , 而 且 清 楚 知 道 它 的 位 置 . 可 以 想 像 使 用 者 連 上 這 份 文 件 後 , 他 的 位 置 就 是 在 上 圖 html.html 的 所 在 . 因 此 只 要 在 html.html 寫 form.html , 表 示 要 連 http://home.fido.net.tw/TUTOR/W3/form.html (可 以 看 看 省 下 多 少 字) . 如 果 寫 PIC/proxy.gif , 就 會 顯 示 proxy.gif 這 張 圖 . 而 想 要 一 致 的 背 景 , 就 寫 /PIC/backgrd.gif
   
實 際 要 連 接 另 一 HTML 檔 或 想 顯 示 圖 形 , 必 須 配 合 標 籤 . 這 裡 只 先 說 明 URL 寫 法
Thu Sep 30 06:11:45 CST 2021 Untitled Document
開始寫 HTML 檔
   
寫 HTML 檔 可 視 做 是 堆 積 木 的 過 程 , 可 以 一 步 步 把 積 木 堆 高 、 堆 完 整 . 不 像 是 書 本 , 必 須 完 成 所 有 稿 件 、 排 版 、 裝 訂 等 工 作 才 能 出 書 . 不 過 , 在 建 立 HTML 檔 前 , 能 有 完 整 的 構 想 、 按 部 就 班 做 , 當 然 是 比 較 好 的 主 意
首 先 我 們 來 看 看 底 層 的 積 木 要 如 何 擺
   
用 文 書 編 輯 器 寫 同 下 面 的 內 容 
<html>

<head>

<title>標題</title>

</head>

<body>

內容

</body>

</html>
   
存 成 struct.htm (檔 名 可 自 定) , 就 可 用 瀏 覽 器 來 看
  
基 本 成 員 有 <html></html> 、 <head></head> 、 <title></title> 、 <body></body> 這 四 個 成 對 標 籤 . 所 有 資 料 都 寫 在 <html></html> 之 間 , 然 後 像 信 件 般 分 成 兩 個 部 分 , 一 是 <head></head> 放 標 頭 , 另 一 則 是 <body></body> 放 內 容
  
而 <title></title> 是 放 在 <head></head> 中 , title 這 標 籤 會 設 定 視 窗 的 標 題 (在 視 窗 最 上 方) . 在 上 面 的 例 子 , 直 接 把 「標題」 兩 個 字 取 代 成 欲 顯 示 的 字 串 即 可
  
剩 下 的 重 點 就 是 在 <body></body> 中 的 東 西 , 這 是 要 給 使 用 者 瀏 覽 的 資 料 . 上 例 中 只 是 簡 單 放 兩 個 字 「內容」 , 您 可 以 取 代 成 要 顯 示 的 資 料 . 如 果 要 讓 顯 示 資 料 賞 心 悅 目 , 需 要 使 用 其 它 標 籤 . 請 繼 續 看 下 一 段 內 容
Thu Sep 30 06:11:45 CST 2021 Untitled Document
編排您的資料
   
最 簡 單 編 排 WWW 資 料 的 方 式 , 莫 過 於 使 用 <pre></pre> . 我 們 可 以 比 較 下 面 兩 個 例 子 :

有 pre 標 籤無 pre 標 籤 
<html>
<head>
<title>有 pre 標籤</title>
</head>
<body>
<pre>
學習 HTML
 只要瞭解標籤、URL
	剩下的就交給創意
</pre>
</body>
</html>

<html>
<head>
<title>無 pre 標 籤</title>
</head>
<body>
學習 HTML
 只要瞭解標籤、URL
	剩下的就交給創意
</body>
</html>
看以上結果 看以上結果
[說 明]
「只」 開 頭 那 列 前 有 一 空 白 字 元 (Space)
「剩」 開 頭 那 列 前 有 一 Tab 字 元

  
發 現 了 嗎 ? 如 果 使 用 pre 標 籤 , WWW 顯 示 資 料 就 會 遵 循 過 去 文 書 編 輯 器 排 版 的 方 式 , 所 以 用 Tab 、 空 白 和 換 列 字 元 來 編 排 文 章 都 可 以 看 到 效 果 . 沒 用 pre 標 籤 , 上 面 三 個 字 元 全 都 無 效 , 須 用 HTML 編 排 標 籤 . 雖 然 pre 標 籤 可 依 照 以 前 習 慣 的 方 式 來 寫 WWW 資 料 , 但

  1. 它 顯 示 資 料 是 固 定 字 型
  2. 如 果 一 列 長 度 超 過 視 窗 , 不 會 自 動 排 到 下 一 列
  3. 部 分 HTML 標 籤 無 法 使 用

因 此 除 非 文 章 事 先 做 好 , 要 放 在 WWW 上 , 才 用 pre 標 籤 . 想 使 資 料 美 觀 、 自 動 排 列 , 還 是 用 HTML 編 排 標 籤 較 好 :

劃分段落 <p></p> 標 籤
   
只 要 把 段 落 文 字 放 在 <p></p> 中
  
另外,當想要和前段文字拉出段落時,也可以只用<p>單一標籤. 段落之間,一般會有一列的距離.

使用成對標籤結果
<html>
<head>
<title>成對標籤<p></p></title>
</head>
<body>
<p>
如 果 您 使 用 過 Word , 它 會 告 訴 你 Enter 鍵 不 再 是 換 列 功 能 , 而 是 分 段 功 能

</p>
<p>
如 果 您 常 寫 HTML 檔 , 您 必 須 忽 略 換 列 字 元 的 存 在 . 而 用 編 排 標 籤

</p>
</body>
</html>
使用單一標籤結果
<html>
<head>
<title>單一標籤<p></title>
</head>
<body>
如 果 您 使 用 過 Word , 它 會 告 訴 你 Enter 鍵 不 再 是 換 列 功 能 , 而 是 分 段 功 能

<p>
如 果 您 常 寫 HTML 檔 , 您 必 須 忽 略 換 列 字 元 的 存 在 . 而 用 編 排 標 籤

</body>
</html>

強迫換列 <br>
   
當 想 使 文 字 從 下 一 列 開 始 , 但 不 想 像 段 落 之 間 有 距 離 . 就 用 <br>

結果
<html>
<head>
<title>強迫換列<br></title>
</head>
<body>
如 果 您 使 用 過 Word ,<br> 它 會 告 訴 你 Enter 鍵 不 再 是 換 列 功 能 , 而 是 分 段 功 能

<br>
如 果 您 常 寫 HTML 檔 ,<br> 您 必 須 忽 略 換 列 字 元 的 存 在 . 而 用 編 排 標 籤

</body>
</html>
顯示一條水平的分割線 <hr>
   
用 一 條 水 平 分 割 線 可 把 內 容 明 顯 的 分 成 兩 個 段 落
結果
<html>
<head>
<title>顯示一條水平的分割線 <hr></title>
</head>
<body>
如 果 您 使 用 過 Word , 它 會 告 訴 你 Enter 鍵 不 再 是 換 列 功 能 , 而 是 分 段 功 能

<hr>
如 果 您 常 寫 HTML 檔 , 您 必 須 忽 略 換 列 字 元 的 存 在 . 而 用 編 排 標 籤

</body>
</html>
  
有 一 點 是 寫 做 中 文 HTML 檔 必 須 注 意 : 目 前 使 用 者 所 用 的 瀏 覽 器 , 如 果 要 自 動 換 列 的 話 , 是 依 照 空 白 字 元 做 為 換 列 的 依 據 . 因 為 英 文 每 個 字 之 間 都 有 空 白 . 要 使 中 文 也 能 自 動 排 列 , 就 需 要 在 字 與 字 之 間 加 個 空 白 字 元 . 詳 細 內 容 可 參 考 「網 際 工 作 室 版 的 WWW 問 答 集」
Thu Sep 30 06:11:45 CST 2021 Untitled Document
變化文字的字體
  
一 篇 資 料 字 體 都 相 同 , 對 閱 讀 者 是 件 吃 力 的 事 . 把 標 題 字 體 加 大 , 明 顯 和 整 篇 文 字 區 隔 , 會 對 讀 者 有 幫 助 ; 能 夠 將 文 章 內 重 點 加 粗 標 示 , 更 能 替 讀 者 省 下 氣 力 . 下 面 介 紹 的 就 是 如 何 改 變 字 體
標 題 設 定
   
有 六 種 大 小 的 標 題 可 選 擇 使 用
標題標籤 範例 結果
h1 <h1>WWW 好</h1>

WWW 好

h2 <h2>WWW 很好</h2>

WWW 很好

h3 <h3>WWW 真的很好</h3>

WWW 真的很好

h4 <h4>WWW 實在真的很好</h4>

WWW 實在真的很好

h5 <h5>WWW 非常實在真的很好</h5>
WWW 非常實在真的很好
h6 <h6>WWW 確實非常實在真的很好</h6>
WWW 確實非常實在真的很好
   
注意 : 標 題 標 籤 會 與 前 、 後 文 字 拉 出 如 段 落 標 籤 的 空 白 列
範例 結果
前段文字
<h3>我是標題</h3>
後段文字 		前段文字

我是標題

後段文字
  

另 外 , 在 使 用 時 , 最 好 使 用 <h3> 以 上 等 級 的 標 題 標 籤 . 從 上 面 的 例 子 可 看 得 出 : <h4> 的 標 題 標 籤 大 小 已 經 和 普 通 文 字 相 同 , 不 一 樣 的 部 分 在 於 較 黑 的 粗 體 . 這 樣 的 標 題 效 果 將 不 是 很 好

文字設定
   
對 一 般 顯 示 文 字 的 設 定 分 為 兩 種 :
 
實體設定法 (Physical Format)
   
實 體 設 定 的 影 響 是 固 定 、 不 因 使 用 瀏 覽 器 不 同 有 所 改 變
名稱 範例 結果
bold 粗體 <b>bold</b>
可讓文字在字句中突顯出來 		粗體 bold
可讓文字在字句中突出來
italic 斜體 <i>italic</i>
表現出柔和效果 		斜體 italic
表現出柔和效果
teletype 電報體 <tt>teletpye</tt>
是復古的風範 		電報體 teletype
是復古的風範
 
語意設定法 (Semantic Format)
  
語 意 設 定 的 影 響 會 依 使 用 瀏 覽 器 而 有 所 不 同 . 在 使 用 時 , 可 依 標 籤 內 的 文 字 , 來 想 像 效 果
名稱 範例 結果
citation <cite>cite</cite> 用在引證、列舉 cite 用在引證、列舉
code <code>code</code> 是法典、規則的意思 code 是法典、規則的意思
emphasis <em>em</em> 用來強調 em 用來強調
keyboard <kbd>kbd</kbd> 通常用來寫指導手冊 kbd 通常用來寫指導手冊
sample <samp>samp</samp> 是不變胖瘦的文字 samp 是不變胖瘦的文字
strong <strong>strong</strong> 用在非常強調 strong 用在非常強調
variable <var>var</var> 用來指示變數 var 用來指示變數
   
在國內用 實 體 設 定 似 乎 較 語 意 設 定 多 , 國 外 則 恰 恰 相 反 (看 HTML source 的 心 得) . 或 許 是 由 於 國 內 大 多 數 人 對 外 語 沒 有 親 切 感 的 關 係
   
特別注意, 有 些 瀏 覽 器 處 理 上 述 文 字 設 定 標 籤 是 互 斥 的 , 有 些 則 可 以 合 成 . 您 可 以 看 看 下 面 例 子 在 使 用 的 瀏 覽 器 是 什 麼 樣 子 :
範例 結果
<i>這是斜體和<b>粗體</b>同時使用的範例</i> 這是斜體和粗體同時使用的範例
Thu Sep 30 06:11:46 CST 2021 Untitled Document
List 條列出資料項目
   
當 資 料 要 分 項 說 明 時 , 使 用 列 舉 標 籤 (list tags) 可 以 讓 您 分 項 的 資 料 條 理 分 明
名稱 範例 結果
有標號條列

Ordered List

寫 HTML 檔須考慮
<ol>
<li>頻寬大小
<li>不同瀏覽器狀況
<li>顯示是否清楚
<li>顯示的大小、顏色
</ol> 		寫 HTML 檔須考慮
  1. 頻寬大小
  2. 不同瀏覽器狀況
  3. 顯示是否清楚
  4. 顯示的大小、顏色
用 <ol></ol> 含 括 資 料 項 目 , <li> (list item) 指 示 每 個 項 目
無標號條列

Unordered List

寫 HTML 檔須考慮
<ul>
<li>頻寬大小
<li>不同瀏覽器狀況
<li>顯示是否清楚
<li>顯示的大小、顏色
</ul> 		寫 HTML 檔須考慮
  • 頻寬大小
  • 不同瀏覽器狀況
  • 顯示是否清楚
  • 顯示的大小、顏色
用 <ul></ul> 含 括 資 料 項 目 , <li> (list item) 指 示 每 個 項 目
定義式條列

Definition List

寫 HTML 檔須考慮
<dl>
<dt>頻寬大小
<dd>能負荷的資料量
<dt>不同瀏覽器狀況
<dd>不同廠牌支援有差別
<dt>顯示是否清楚
<dd>資料能否辨視
<dt>顯示的大小、顏色
<dd>解析度、色彩數的不同
</dl>
寫 HTML 檔須考慮
頻寬大小
能負荷的資料量
不同瀏覽器狀況
不同廠牌支援有差別
顯示是否清楚
資料能否辨視
顯示的大小、顏色
解析度、色彩數的不同
用 <dl></dl> 含 括 資 料 項 目 , <dt> (definition term) 定 義 項 目 , <dd> (definition data) 定 義 內 容
選單式條列

Menu List

寫 HTML 檔須考慮
<menu>
<li>頻寬大小
<li>不同瀏覽器狀況
<li>顯示是否清楚
<li>顯示的大小、顏色
</menu> 		寫 HTML 檔須考慮
  • 頻寬大小
  • 不同瀏覽器狀況
  • 顯示是否清楚
  • 顯示的大小、顏色
    • 用 <menu></menu> 含 括 資 料 項 目 , <li> (list item) 指 示 每 個 項 目
    目錄式條列

    Directory List

    		寫 HTML 檔須考慮
    <dir>
    <li>頻寬大小
    <li>不同瀏覽器狀況
    <li>顯示是否清楚
    <li>顯示的大小、顏色
    </dir>     		寫 HTML 檔須考慮
  • 頻寬大小
  • 不同瀏覽器狀況
  • 顯示是否清楚
  • 顯示的大小、顏色
    • 用 <dir></dir> 含 括 資 料 項 目 , <li> (list item) 指 示 每 個 項 目
       
    以 上 這 些 列 舉 標 籤 可 以 形 成 巢 狀 條 列 (nesting lists) , 亦 即 一 個 項 目 可 以 包 含 另 一 個 列 舉
    範例 結果
    寫 HTML 檔須考慮
    <ol>
    <li>頻寬大小
    <li>不同瀏覽器狀況
    <br>目前流行的瀏覽器
    <ul>
    <li>Netscape
    <li>Mosaic
    <li>Lynx
    </ul>
    <li>顯示是否清楚
    <li>顯示的大小、顏色
    </ol>     		寫 HTML 檔須考慮
    1. 頻寬大小
    2. 不同瀏覽器狀況
      目前流行的瀏覽器
      • Netscape
      • Mosaic
      • Lynx
    3. 顯示是否清楚
    4. 顯示的大小、顏色
    Thu Sep 30 06:11:46 CST 2021 Untitled Document
    在資料中加上圖形
      
    一 般 來 說 人 們 接 受 圖 形 說 明 遠 比 文 字 說 明 的 程 度 為 高 . 形 形 色 色 的 圖 形 , 也 是 WWW 引 人 入 勝 之 處
    另 一 方 面 , 當 有 些 東 西 在 WWW 無 法 用 文 字 表 現 , 也 可 以 用 圖 形 取 代 . 這 篇 文 章 , 在 講 解 URL 絕 對 路 徑 與 相 對 路 徑 的 地 方 , 就 以 一 張 圖 說 明 . 還 有 , 許 多 人 在 首 頁 中 , 對 於 分 項 說 明 的 地 方 , 捨 棄 HTML 列 舉 標 籤 不 用 , 而 以 一 個 個 多 種 顏 色 圓 點 的 圖 形 標 示 , 的 確 是 更 吸 引 人
       
    要 加 入 圖 形 , 只 要 寫 : 
      
    <img src="圖形檔的 URL">
      
    其 中 圖形檔的 URL 就 是 圖 形 檔 的 位 置
    如 果 和 HTML 檔 放 在 同 一 個 目 錄 , 就 只 要 寫 檔 案 名 稱 即 可
       
    目 前 在 WWW 最 為 通 用 的 圖 形 檔 是 GIF 格 式
       
    在 使 用 圖 形 前 , 請 先 做 確 認
       
    圖 形 在 WWW 顯 示 上 有 許 多 效 果 , 將 在 「WWW 的 圖 形 效 果」 中 說 明
    範例 結果
    <img src="solo.gif">
    <img src="http://www.fido.net.tw/pic/w3c.gif">
       
    有 些 瀏 覽 器 無 法 看 到 圖 形 , 這 時 候 可 以 顯 示 別 的 訊 息 給 他 . 使 用 方 式 : 
      
    <img src="圖形檔的 URL" alt="文字說明">
    範例 結果
    <img src="mailbox.gif" alt="這應該有張圖"> 這應該有張圖
      

    如 果 圖 形 檔 不 存 在 , 會 出 現 . 當 瀏 覽 器 不 支 援 圖 形 才 會 顯 示 alt= 的 文 字

    img 這 圖 形 標 籤 另 外 有 可 點 取 (Clickable) 功 能
    這 個 功 能 的 說 明 , 擺 在 「可 點 取 式 圖 形」 章 節 中

    Thu Sep 30 06:11:46 CST 2021 Untitled Document
    Link 引導讀者到其它地方
       
    閱 讀 WWW 文 件 最 愉 快 的 事 , 莫 過 於 只 要 一 只 滑 鼠 (mouse) 就 可 在 網 際 網 路 中 遨 遊 . 要 參 考 其 它 文 件 , 只 須 用 滑 鼠 一 點 (click)
    不 用 埋 首 在 書 堆 中 , 尋 找 一 言 兩 語 ; 或 擔 心 要 參 考 的 資 料 被 別 人 搶 先 一 步 借 走 (如 果 資 料 在 圖 書 館 的 話)

    身 為 HTML 檔 的 寫 作 者 , 要 引 導 讀 者 到 其 它 地 方 , 只 要 寫 : 

      
    <a href="其它地方的 URL">對 URL 的描述</a>
       
    讀 者 會 看 到 : 
      
    對 URL 的描述
      

    上 面 一 列 是 讀 者 看 到 的 訊 息 , 並 可 以 點 取 (click) , 然 後 就 會 顯 示 其它地方的 URL 資 源

    關 鍵 之 處 , 除 了 顯 示 適 當 對 URL 的描述 給 讀 者 清 楚 的 指 引 外 . 就 是 要 瞭 解 其它地方的 URL 要 如 何 寫 . 簡 單 的 說 , 這 是 個 URL . 如 果 對 URL 不 明 白 的 話 , 請 按 這 裡

     
    範例
    範例 結果
    <a href="W3QnA.html">網際工作室 W3 問答集</a> 網際工作室 WWW 問答集
    <a href="http://www.fido.net.tw/">網際工作室首頁</a> 網際工作室首頁
    <a href="gopher://gopher.fido.net.tw/">網際工作室 Gopher</a> 網際工作室 Gopher
      

    另 外 , 可 能 會 在 同 一 個 HTML 檔 中 , 要 指 引 讀 者 閱 讀 在 相 同 檔 案 裡 , 不 同 地 方 的 資 料 . 這 可 以 想 像 成 : 在 最 上 方 有 這 份 資 料 的 目 錄 (提 綱 挈 領 用) , 讀 者 依 照 目 錄 指 示 , 閱 讀 詳 細 內 容 . 也 可 能 用 在 交 互 參 考 , 讀 者 不 需 辛 苦 往 返 龐 大 資 料 間 . WWW 有 條 指 導 原 則 是 所 點 即 所 得 , HTML 檔 的 作 者 宜 善 用 之

       
    可以用下面這方式來標示一個特定名稱位置,

    <a name="特定名稱">對特定名稱的描述</a>
       
    用下面這方式在同一檔案中用指示到上面指定的位置

    <a href="#特定名稱">一些描述</a>
       
    如果是不同檔案要指到這位置,就在#井字符號前加上檔案的URL:
    <a href="URL#特定名稱">一些描述</a>
       
    例如這段文章的名稱標示是:
    <a name="HTML_link"><h2>引導讀者到其它地方</h2></a>
       
    注 意 在 上 面 描 述 中 包 含 HTML 的 其 它 標 籤 . 下 面 就 是 讓 讀 者 跳 到 HTML_link 的 方 法
    <a href="#HTML_link"><h2>到這篇文章的開頭</h2></a>

    到這篇文章的開頭
    INTERNET STUDIO 網路教材
    若有任何建議或意見, 歡迎寫信到 tutor@www.fido.net.tw     Thu Sep 30 06:11:46 CST 2021 Untitled Document
    Advanced

    Table

    Frame

    Image Map

    Form

    Thu Sep 30 06:11:46 CST 2021 Untitled Document
    Design
    Push Me to See Color Design Page Thu Sep 30 06:11:46 CST 2021 Untitled Document
    FORM
     
    把 表 格 想 像 成 製 作 問 卷 調 查 所 需 要 的 項 目
      
    簡 單 的 問 卷 會 有 單 選 、 複 選 . 有 時 候 選 擇 項 目 太 多 , 恐 怕 版 面 變 得 零 亂 , 我 們 可 利 用 視 窗 環 境 的 特 點 : 捲 動 軸 選 擇 來 做 . 還 有 些 會 要 填 學 校 / 工 作 單 位 或 身 份 證 字 號 ... 等 屬 於 單 列 文 字 資 料 , 也 有 要 寫 寫 建 議 之 類 的 多 列 文 字 . 當 使 用 者 輸 入 的 資 料 有 保 密 的 必 要 , 不 希 望 輸 入 資 料 時 , 過 往 的 人 群 都 看 得 到 (例 如 某 些 情 況 下 , 會 對 出 生 年 、 月 、 日 敏 感) , 可 以 使 用 密 碼 式 單 列 文 字 輸 入 . 如 果 同 一 份 問 卷 , 可 能 因 為 填 寫 的 族 群 不 同 會 要 分 A 、 B 卷 , 這 時 隱 藏 式 資 料 就 派 上 用 場
      
    另 外 , W3 的 表 格 有 可 點 取 圖 形 的 能 力 . 和 <img> 的 ismap 能 力 相 彷
      
    最 後 , 和 一 般 問 卷 較 大 的 不 同 在 於 如 何 使 W3 伺 服 器 去 執 行 CGI 程 式 . 是 我 們 在 此 需 要 瞭 解 的 重 點 . 下 面 的 範 例 中 , 會 出 現 <form></form> 標 籤 (tag) , 我 們 安 排 在 執 行 CGI 程 式 這 部 分 做 說 明 . 瀏 覽 的 時 候 , 先 不 深 究
    讓使用者輸入單選 (Radio) 資料
    語 法 <input type="RADIO" name="[名稱]" value="[值]" CHECKED>
    CHECKED 為 選 擇 性 功 能 , 它 可 讓 這 個 項 目 為 預 設
    範 例 <form>
    請問您的性別
    <input type="RADIO" name="N1" value="Female" CHECKED>女
    <input type="RADIO" name="N1" value="Male">男
    </form>
    請問您的性別 女 男
    讓使用者輸入複選 (Checkbox) 資料
    語 法 <input type="CHECKBOX" name="[名稱]" value="[值]" CHECKED>
    CHECKED 為 選 擇 性 功 能 , 它 可 讓 這 個 項 目 為 預 設
    範 例 <form>
    喜歡的休閒活動
    <input type="CHECKBOX" name="N2" value="Music" CHECKED>聽音樂
    <input type="CHECKBOX" name="N2" value="Sleep">睡覺
    </form>
    喜歡的休閒活動 聽音樂 睡覺
    讓使用者以捲動軸選擇 (Select)
    語 法 <SELECT NAME="[名稱]" MULTIPLE SIZE=[值]>
    <OPTION VALUE="[值]" SELECTED>
    <OPTION>
    .
    .
    </SELECT>
    • MULTIPLE
      為 選 擇 性 功 能 , 設 定 為 複 選 的 方 式
    • SIZE=[值]
      為 選 擇 性 功 能 , 設 定 顯 示 的 項 目 數
    • VALUE="[值]"
      為 選 擇 性 功 能 , 將 [值] 傳 回 . 一 般 是 傳 回 <option> 後 的 資 料
    • SELECTED
      為 選 擇 性 功 能 , 它 可 讓 這 一 項 為 [名稱] 的 預 設 值
    範 例 <form>
    最喜歡的系統
    <select name="N3">
    <option>DOS
    <option value="MS-Win" selected>Microsoft Windows
    <option value="UNIX">UNIX
    </select>
    </form>
    最喜歡的系統
    <form>
    最喜歡的系統
    <select name="N3" size=2>
    <option>DOS
    <option value="MS-Win" selected>Microsoft Windows
    <option value="UNIX">UNIX
    </select>
    </form>
    最喜歡的系統
    <form>
    最喜歡的系統
    <select name="N3" multiple>
    <option>DOS
    <option value="MS-Win" selected>Microsoft Windows
    <option value="UNIX">UNIX
    </select>
    </form>
    最喜歡的系統

    讓使用者輸入單列文字 (Text)

    語 法 <input type="TEXT" name="[名稱]" value="[值1]" SIZE=[值2]
    MAXLENGTH=[值3]>
    • value="[值1]"
      為 選 擇 性 功 能 , 為 [名稱] 的 內 定 值
    • SIZE=[值2]
      為 選 擇 性 功 能 , 設 定 顯 示 框 的 長 度
    • MAXLENGTH=[值3]
      為 選 擇 性 功 能 , 設 定 輸 入 資 料 的 最 大 字 數
    範 例 <form>
    請輸入您的大名
    <input type="TEXT" name="N4">
    </form>
    請輸入您的大名

    讓使用者輸入多列文字 (Textarea)

    語 法 <TEXTAREA name="[名稱]" ROWS=[值1] COLS=[值2]>
    • ROWS=[值1]為 選 擇 性 功 能 , 輸 入 框 的 列 數
    • COLS=[值2]為 選 擇 性 功 能 , 輸 入 框 的 行 數
    範 例 <form>
    請輸入您的建議
    <br><TEXTAREA name="N5" ROWS=5 COLS=30>
    範例資料:今天天氣很好
    </TEXTAREA>
    </form>
    請輸入您的建議
    讓使用者輸入密碼式單列文字 (Password)
    語 法 <input type="PASSWORD" name="[名稱]" value="[值1]" SIZE=[值2]
    MAXLENGTH=[值3]>
    • value="[值1]"
      為 選 擇 性 功 能 , 為 [名稱] 的 內 定 值
    • SIZE=[值2]
      為 選 擇 性 功 能 , 設 定 顯 示 框 的 長 度
    • MAXLENGTH=[值3]
      為 選 擇 性 功 能 , 設 定 輸 入 資 料 的 最 大 字 數
    範 例 <form>
    請輸入您的密碼
    <input type="PASSWORD" name="N6">
    </form>
    請輸入您的密碼
    隱藏式資料 (Hidden)
    語 法 <input type="HIDDEN" name="[名稱]" value="[值1]">
    範 例 <form>
    [說明] 這項資料不會顯示
    <input type="HIDDEN" name="DEBUG_MODE" value="On">
    </form>
    [說明] 這項資料不會顯示
    可點取圖形 (Image)
    語 法 <input type="IMAGE" SRC="[URL]" name="[名稱]" ALIGN=[模式]>
    • SRC="[URL]"
      圖 形 檔 位 置
    • name=[名稱]
      為 選 擇 性 功 能 , 指 定 圖 形 名 稱
    • ALIGN=[模式]
      為 選 擇 性 功 能 , 對 齊 位 置 . 可 指 定 [模 式] TOP , BUTTON , MIDDLE
    說 明 若 指 定 name=[名稱] , CGI 程 式 將 得 到 [名稱].x=[值1] , [名稱].y=[值2] 的 資 料

    否 則 就 是 x=[值1] , y=[值2]
    範 例 <form>
    <input type="IMAGE" SRC="/pic/cis256.gif" name="N7">
    </form>
    執行 CGI 程式
    語 法 <FORM ACTION="[URL]" METHOD=[模式]>
    .
    .
    [以 上 介 紹 的 標 籤 、 其 它 HTML 標 籤]
    .
    .
    <input type="SUBMIT" value="[值1]">
    <input type="RESET" value="[值2]">
    </FORM>
    • ACTION="[URL]"
      欲 執 行 CGI 程 式 位 置
    • METHOD=[模式]
      為 選 擇 性 功 能 , 設 定 執 行 模 式 . 可 指 定 GET (預設) 、 POST
      • GET
        以 環 境 變 數 傳 遞 資 料 給 CGI 程 式
      • POST
        以 檔 案 傳 遞 資 料 給 CGI 程 式

    • value="[值1]"
      為 選 擇 性 功 能 , 更 改 執 行 CGI 程 式 鈕 (Button) 的 文 字
    • value="[值2]"
      為 選 擇 性 功 能 , 更 改 重 設 鈕 的 文 字
    說 明
    • <input type="SUBMIT">
      顯 示 執 行 CGI 程 式 紐 , 用 來 起 動 CGI 程 式
    • <input type="RESET">
      顯 示 重 設 鈕 , 重 設 FORM 內 的 資 料 值
    按鈕示範
    範 例

    在 WebSite 執行的 CGI 程式

    INTERNET STUDIO 網路教材
    若有任何建議或意見, 歡迎寫信到 tutor@www.fido.net.tw Thu Sep 30 06:11:46 CST 2021 Untitled Document
    內文設計準則
    1. 將最重要的訊息放在頁面頂端 2. 提供簡介
    3. 提供有價值的內容 4. 內容越精簡越好
    5. 一個段落, 一個意念 6. 一篇文章, 一個主題
    7. 一篇文章要有明確的結構 8. 文章內容要符合讀者需求
    9. 只用最好的素材 10. 句子要簡潔而明確
    11. 使用淺顯易懂的詞彙 12. 段落間的連貫要符合思考邏輯
    13. 善用標題  
    Thu Sep 30 06:11:46 CST 2021 Untitled Document
    圖像設計準則
    1. 強調畫面重點, 除去多餘畫面 2. 不要使用只有裝飾功能的圖片
    3. 只用能有效傳達訊息的畫面 4. 增加圖片的傳輸效率
    5. 在下載大型圖片之前, 應該告知讀者圖檔大小 6. 減少圖片的顏色數量
    7. 每個圖片都要附加替代文字 8. 不要鏈結其他站台的圖片
    9. 使用圖片作為項目符號時, 應該考慮其功能性, 而非只從美觀的角度考慮 10. 除非為了營造氣氛, 否則不要使用背景圖片
    11. 圖片中人物的視線應該朝向頁面中央 12. 為圖片加上標題說明
    13. 選擇適當的檔案格式 14. 將數字資料轉換成適當的圖表
    Thu Sep 30 06:11:46 CST 2021 Untitled Document
    版面設計準則
    1. 版面風格統一 2. 只用足夠的階級層次表現版面結構
    3. 同種類的物件用相同的方式表現 4. 依重要性不同而有不同的表現方法
    5. 將版面元素安排成簡單的幾何形狀 6. 瞭解設計的目的
    7. 不要並排標題 8. 不要濫用字形變化
    9. 文字與背景要有強烈對比 10. 慎選字形
    11. 英文字不要全部大寫 12. 靠左對齊
    13. 放置圖片時避免干擾文字 14. 少即是多--不要過度設計
    Thu Sep 30 06:11:47 CST 2021 Untitled Document
    鏈結設計準則
    1. 將鏈結文字融合在內文之中
    2. 不要用"按這裡"
    3. 盡量不使用鏈結
    4. 確保鏈結的正確性
    5. 不要自行設定鏈結文字的顏色
    6. 若相似文句排列成串, 只需讓不同詞句成為鏈結文字
    7. 盡量讓鏈結文字和所鏈結文章的標題相同
    8. 設法在內文中再次提供原本在標題和圖片中的鏈結
    9. 謹慎評估"插入"還是"鏈結"
    10. 在鏈結文字的前後有足夠的說明文字, 讓讀者瞭解鏈結的目的地有甚麼內容
    11. 為鏈結資料附加自己的意見
    12. 在 Image Map 下提供文字鏈結
    13. 標明 Image Map 中, 區域間的界線
    Thu Sep 30 06:11:47 CST 2021 Untitled Document
    Common Gateway Interface
    CGI 的功能, 為什麼要 CGI?
       
    CGI 是 一 種 介 面
       
    當 您 想 要 使 W3 與 程 式 結 合, 就 需 要 用 CGI
      
    一 般 來 說 , HTML 檔 案 是 屬 於 靜 態 的 資 料 . 雖 然 可 以 呈 現 文 字 、 聲 音 、 影 像 乃 至 於 動 畫 等 多 媒 體 資 料 , 但 終 究 只 是 展 示 固 定 資 料 的 一 種 方 式 . 如 果 想 要 列 出 像 是 在 資 料 庫 中 隨 時 會 變 動 的 資 料 , 立 刻 捉 襟 見 肘
    CGI 是什麼
     
    W3 的 主 從 架 構
    W3 主從架構
       
    使用者端要有瀏覽器(Browser),如:Netscape、Mosaic..;
       
    伺服器則必須存在一個伺服程式(Daemon),通常被統稱為HTTPD
       
    另外,還要有一些事先寫好的HTML檔、圖形檔...等.
    W3 主從架構程式
       
    使 用 者 就 透 過 HTTPD 取 得 想 要 看 的 HTML 檔 、 圖 形 檔 , 但 這 些 檔 都 是 固 定 內 容 . 除 了 以 編 輯 器 (Editor) 來 編 輯 更 動 , 否 則 使 用 者 看 到 東 西 都 會 是 一 樣 的
       
    今 天 絕 大 部 分 的 HTTPD 都 支 援 CGI , 讓 HTTPD 與 一 般 程 式 溝 通 , 達 到 顯 示 動 態 資 料 的 效 果 (可 用 程 式 控 制 W3 的 顯 示) . 這 並 沒 有 限 定 使 用 那 種 程 式 , 只 要 符 合 CGI 規 格 的 程 式 就 被 稱 為 CGI 程 式
    實作的準備
     
    以 perl 為 例 , 引 導 讀 者 撰 寫 CGI 程 式
       
    (可 用 自 己 熟 悉 的 程 式 語 言 )
     
    HTTPD 執 行 CGI 程 式 的 方 式
       
    大 部 分 的 HTTPD 都 是 把 CGI 程 式 集 中 放 在 一 個 目 錄 裡 , 因 此 只 有

    1. 你 是 系 統 管 理 者 或 自 己 執 行 W3 伺 服 程 式
    2. 和 系 統 管 理 者 有 交 情
    3. 系 統 管 理 者 開 放 CGI 程 式 的 目 錄
    這 些 情 況 下 , 才 有 機 會 寫 CGI 程 式
       
    有 些 HTTPD 會 依 MIME 型 態 定 義 或 輸 出 檔 案 形 式 來 決 定 是 否 為 CGI 程 式 , 這 時 使 用 者 可 在 自 己 的 目 錄 下 撰 寫 CGI 程 式
       
    若 不 確 定 自 己 的 HTTPD 是 否 有 這 種 功 能 , 可 查 閱 Paul E. Hoffman 先 生 整 理 的 W3 伺 服 器 比 較, 看 看 在 各 項 資 料 的 Script or action based on output file type 及 Script or action based on MIME content-type 是 Yes 還 是 No
     
    接 下 來 的 例 子 , 是 在 下 面 的 條 件 成 立 :
       

    1. perl直譯器的版本是4.036,並且可以正確執行 perl 的程式
    2. 放 置 perl 的 目 錄 名 稱 在 PATH 環 境 變 數 中
    3. CGI 程 式 在 /cgi-bin 目 錄 裡 可 被 HTTPD 執 行
    4. 您 必 須 瞭 解 HTML 語 法
      

    • 如 果 是 在 UNIX 環 境 下 , 我 們 假 設 perl 放 在 /usr/local/bin 裡 . 若 不 是 , 請 視 情 況 更 改 每 個 範 例 的 第 一 列 #!/usr/local/bin/perl 部 分
    • 如 果 使 用 NT , 您 可 以 省 略 每 個 範 例 的 第 一 列 #!/usr/local/bin/perl 部 分
    第一個 CGI 程式
     
    檔名 : echoecho.cgi
    		 
    #!/bin/sh
echo "Content-type: text/html
<html>
<h1> This is a test of CGI !
</html>
"
     
    檔名 : t-cgi1.cgi
    		 
    #!/usr/local/bin/perl
srand;
print "Content-type: text/html\n\n";
print "<title>t-cgi1.cgi</title>\n";
print "<h1>魔 術 數 字 : ", int(rand(100000)), "</h1>\n";
     
    說 明 (以 下 各 點 代 表 列 號) :
       
    1. UNIX Shell 解 譯 命 令 檔 (Script) 時 指 定 的 處 理 程 式 (NT 可 省 略 此 列)
    2. 設 定 亂 數 種 子
    3. 「Content-type: 」 告 知 W3 以 下 輸 出 內 容 的 MIME 型 態 為 「text/html」, 就 是 html 格 式
    4. 明 顯 的 , 這 一 列 用 來 顯 示 標 題 (title)
    5. 使 用 <h1></h1> 使 字 體 放 大 . int(rand(100000)) 結 果 是 0 - 99999 的 隨 機 整 數 . 很 BASIC 的 語 法 , 以 「,」 連 接 要 顯 示 的 資 料
     
    HTTPD 送 出 資 料 不 再 是 取 用 存 在 的 HTML 檔 、 圖 形 檔 ...

    HTTPD HTML 靜態資料
     
    而 是 執 行 CGI 程 式 , 動 態 產 生 資 料

    HTTPD CGI 動態資料
       

    HTML 檔 到 HTTPD 的 資 料 是 HTML 檔 案 的 內 容 , 那 CGI 程 式 到 HTTPD 的 資 料 呢 ? 以 t-cgi1.cgi 來 說 , 其 資 料 內 容 透 過 標 準 輸 出 (Stdout) 至 HTTPD , 輸 出 的 資 料 就 是 底 下 框 框 裡 所 列 : 

    Content-type: text/html

    

    <title>t-cgi1.cgi</title>

    <h1>魔 術 數 字 : XXXX</h1>
    「XXXX」 為 不 定 的 隨 機 變 數
      

    要 注 意 的 , 以 Content-type: text/html 指 定 資 料 MIME 型 態 之 後 必 須 有 兩 個 換 列 字 元 才 能 接 續 其 它 資 料

       

    現 在 應 該 有 能 力 擴 增 上 述 程 式 , 使 它 讀 取 資 料 庫 中 的 紀 錄 , 然 後 透 過 W3 顯 示 . 這 些 都 屬 於 單 向 , 亦 即 僅 讓 W3 動 態 顯 示 . 想 要 使 W3 接 受 使 用 者 輸 入 的 資 料 , 需 要 多 一 點 技 術

    接受使用者輸入的 HTML 標籤 (tag)
      
    以 下 各 個 說 明 , 會 有 <form></form> 標 籤 , 我 們 安 排 在 執 行 CGI 程 式 這 部 分 做 說 明
     
    把 表 格 想 像 成 製 作 問 卷 調 查 所 需 要 的 項 目
       
    簡 單 的 問 卷 會 有 單 選 、 複 選
       
    有 時 候 選 擇 項 目 太 多 , 恐 怕 版 面 變 得 零 亂 , 我 們 可 利 用 視 窗 環 境 的 特 點 : 捲 動 軸 選 擇 來 做
       
    還 有 些 會 要 填 學 校 / 工 作 單 位 或 身 份 證 字 號 ... 等 屬 於 單 列 文 字 資 料 ,
       
    也 有 要 寫 寫 建 議 之 類 的 多 列 文 字
       
    當 使 用 者 輸 入 的 資 料 有 保 密 的 必 要 , 不 希 望 輸 入 資 料 時 , 過 往 的 人 群 都 看 得 到 (例 如 某 些 情 況 下 , 會 對 出 生 年 、 月 、 日 敏 感) , 可 以 使 用 密 碼 式 單 列 文 字 輸 入
       
    如 果 同 一 份 問 卷 , 可 能 因 為 填 寫 的 族 群 不 同 會 要 分 A 、 B 卷 , 這 時 隱 藏 式 資 料 就 派 上 用 場
       
    另 外 , W3 的 表 格 有 可 點 取 圖 形 的 能 力 . 和 <img> 的 ismap 能 力 相 彷
       
    最 後 , 和 一 般 問 卷 較 大 的 不 同 在 於 如 何 使 W3 伺 服 器 去 執 行 CGI 程 式 . 是 我 們 在 此 需 要 瞭 解 的 重 點
    CGI 程式如何接收使用者的輸入資料?
       
    CGI 程 式 是 利 用 標 準 輸 出 (Stdout) 將 資 料 送 至 HTTPD
       
    HTTPD 則 是 透 過 標 準 輸 入 (Stdin) 或 環 境 變 數 (Environ. Variable) 把 接 收 到 的 使 用 者 輸 入 , 傳 給 CGI 程 式
    CGI 程式與 HTTPD 傳遞資料
    
      
    
    1.   CGI 程 式 利 用 標 準 輸 出 (Stdout) 將 資 料 送 至 HTTPD
    
    2.   HTTPD 透 過 標 準 輸 入 (Stdin) 將 資 料 傳 給 CGI 程 式
    
    3.   HTTPD 透 過 環 境 變 數 (Environ. Variable) 將 資 料 傳 給 CGI 程 式
     
    HTTPD 傳 給 CGI 程 式 資 料 的 模 樣 
    job=%BA%DE%B2z%A4H%AD%FB&age=24&sex=%A4k&email=cynthia@www.fido.net.tw&comments=N%2FA
       
    以 上 的 資 料 被 稱 為 URL 編 碼 字 串 (URL-Encoded strings) , 是 在 範 例 GET 版 本 或 POST 版 本 中 輸 入 : 
    職業          管理人員
年齡          24
性別          女
電子郵件地址   cynthia@www.fido.net.tw
建議          N/A
       
    所 得 到 的 結 果
     
    在 處 理 上 , 一 般 遵 循 下 面 步 驟
       
    判 斷 是 用 GET 或 POST 傳 遞 資 料
       
    URL 編 碼 字 串 切 割 (以 & 分 段) , 取 得 參 數 對 (NAME=VALUE pairs)
       
    將 編 碼 部 分 還 原 --- 先 將 + 轉 為 空 白 (space) , 再 把 %xx (xx 為 16 進 位) 轉 為 單 一 字 元
    在 WebSite 執行的 CGI 程式範例:
     
    資料庫的使用範例:
     
    在 伺 服 器 動 態 改 變 資 料 Server Push 範 例
     
    在 使 用 者 端 要 求 改 變 資 料 Client Pull 範 例
    INTERNET STUDIO 網路教材
    若有任何建議或意見, 歡迎寫信到 tutor@www.fido.net.tw     Thu Sep 30 06:11:47 CST 2021 Untitled Document
    W3 伺服器比較
    CERNNCSAC.BuilderEMWACNetscapePurveyorWebSite
    Proxy12341另購123
    1: HTTP, 2: FTP, 3: GOPHER, 4: WAIS
    CGIYesYesYesYesYesYesYes
    Win-CGIYes
    Multi-Home需要 patch需要 patchYesYesYesYes
    Server-Side IncludeYesYesYes
    User AuthenticationYesYesYesYesYesYes
    Clickable ImageYesYesYesYesYesYesYes
    Search EngineYesWAIS Toolkit for NTYes
    SecuritySSLSSL
    價格SecurityUS$995US$2995
    US$495US$795US$595US$500
    參考 Web Servers Comparison
    W3 伺服器功能說明
     
    仲介、代理 (Proxy)
       
    Proxy 伺 服 器 代 理 所 連 接 使 用 者 原 本 的 要 求 (Request) 與 回 應 (Acknowledge) 的 處 理
    Proxy 工作圖

       
    左 圖 是 沒 有 Proxy 伺 服 器 的 情 形 , 右 圖 是 有 Proxy 伺 服 器
    把 中 間 的 橫 線 看 做 是 內 、 外 網 路 的 分 界 . 左 邊 是 直 接 對 外 連 接 某 個 伺 服 器 , 右 邊 是 透 過 Proxy 伺 服 器 . 直 接 對 外 連 接 , 存 取 的 速 度 會 受 限 於 對 外 線 路 速 度 . 如 果 透 過 Proxy 伺 服 器 , 一 些 資 訊 可 以 在 Cache 中 找 到 (如 果 內 部 網 路 有 人 存 取 過 同 樣 資 料 的 話) , 就 毋 須 再 從 外 面 取 得 所 須 的 資 料 . 內 部 的 線 路 都 是 比 較 快 的 , 因 此 可 以 較 快 取 到 想 要 的 . 若 Cache 中 找 不 到 , 才 連 到 外 面 去
     

    共通交換介面 (CGI)

       
    這 是 一 種 讓 W3 伺 服 器 和 各 種 軟 體 交 換 資 訊 的 介 面
    可 以 給 使 用 者 在 W3 輸 入 資 料 後 , 透 過 CGI 把 這 些 資 料 用 資 料 庫 系 統 儲 存 ; 另 一 方 面 , 也 可 把 資 料 庫 系 統 中 的 資 料 透 過 CGI , 在 W3 中 展 現
       
    CGI 的 詳 細 文 件 , 在 http://hoohoo.ncsa.uiuc.edu/cgi/
     
    Win 的共通交換介面 (WinCGI)
       
    CGI 本 身 雖 然 是 W3 伺 服 器 與 各 種 軟 體 的 橋 樑 . 但 須 以 標 準 輸 入 (stdin) 和 標 準 輸 出 (stdout) 來 交 換 資 料 (詳 細 情 形 請 參 考 CGI 網 路 教 材) . 但 MS-Windows 的 程 式 並 沒 有 標 準 輸 入 和 標 準 輸 出 , 所 以 就 有 Win-CGI 以 利 Win 程 式 和 W3 伺 服 器 的 資 料 交 換
       
    WinCGI 的 詳 細 文 件 , 在 http://www.city.net/win-httpd/httpddoc/wincgi.htm
     
    多窟 (Multi-Home)
       
    一 般 單 一 W3 伺 服 器 配 合 單 一 網 路 位 置 只 能 為 一 個 組 織 服 務 . 如 下 圖 , 網 際 工 作 室 和 網 路 教 材 必 須 由 兩 部 機 器 或 是 兩 個 程 序 (Process) 分 別 提 供 服 務

    無多窟功能的系統圖
      
    如 果 W3 伺 服 器 有 多 窟 功 能 , 則 兩 個 組 織 可 以 使 用 同 一 部 機 器 . 不 但 節 省 硬 體 成 本 , 也 可 精 簡 維 護 系 統 的 人 力
    有多窟功能的系統圖

       
    實 作 方 法 , 可 參 考 http://www.thesphere.com/~dlp/TwoServers/
     
    伺服端含括 (Server-Side Include)
       
    可 以 將 其 他 HTML 檔 或 是 把 系 統 命 令 及 CGI 程 式 的 輸 出 包 含 在 一 文 件 中 . 例 如: 


    .

    .

    <!--#exec cmd ="date"-->

    .

    .
       
    便 可 以 很 容 易 的 把 系 統 時 間 顯 示 在 文 件 中
     

    使用者授權 (User Authentication)

       
    設 定 讀 取 首 頁 (Home Page) 的 限 制 , 並 不 是 每 個 人 都 可 以 任 意 閱 讀 資 料 . 必 須 輸 入 使 用 者 名 字 (User name) 以 及 密 碼 (Password) 經 過 驗 證 之 後 , 才 能 讀 取
       
    例 : http://home.fido.net.tw/abp/
     
    可點取圖形 (Clickable Image)
       
    這 是 讓 W3 更 生 動 的 功 能 . 要 以 網 路 介 紹 台 灣 , 不 再 都 是 硬 梆 梆 的 文 字 . 可 以 把 台 灣 地 圖 先 繪 出 , 透 過 可 點 取 圖 形 讓 使 用 者 選 取 想 要 瀏 覽 的 縣 市 . 如 此 使 用 者 便 可 很 直 覺 的 遊 遍 北 台 灣 或 是 東 海 岸
       
    如 果 在 以 前 網 路 上 都 是 以 文 字 為 主 , 這 麼 方 便 的 遊 覽 是 無 法 達 到
       
    例 : http://www.fido.net.tw/vote/
     
    搜尋引擎 (Search Engine)
       
    W3 伺 服 器 中 若 以 建 立 為 數 眾 多 的 資 料 , 例 如 建 立 了 一 個 旅 遊 百 科 , 當 使 用 者 想 查 尋 某 一 地 點 的 資 料 時 , 他 便 須 要 一 頁 頁 翻 閱 , 去 尋 找 他 想 要 的 資 訊 . 而 搜 尋 引 擎 可 以 簡 化 這 工 作 , 讓 使 用 者 很 容 易 找 到 他 想 要 的
       
    一 般 搜 尋 引 擎 會 把 資 料 事 先 建 成 索 引 , 以 加 快 搜 尋 的 速 度
    使 用 者 輸 入 想 要 找 尋 資 料 的 相 關 文 字 , 如 果 是 上 面 所 說 的 例 子 , 那 就 把 旅 遊 地 點 輸 入 . 搜 尋 引 擎 便 會 開 始 在 索 引 裡 查 詢 , 然 後 再 把 相 關 資 料 列 給 使 用 者
       
    例 : http://web.fido.net.tw/gais.html
     
    安全 (Security)
       
    使 用 者 和 伺 服 器 之 間 的 傳 輸 協 定 HTTP 是 建 立 在 傳 統 TCP/IP 傳 送 架 構 上 . 一 般 來 說 , 任 何 人 都 可 以 截 取 到 傳 送 的 資 料 . 為 了 能 達 到 使 用 者 與 伺 服 器 之 間 傳 輸 資 料 保 密 的 能 力 (例 如 做 線 上 交 易 就 有 此 需 要) , 因 此 有 新 的 傳 送 資 料 方 式 在 發 展 :
    Secure Socket Layer (SSL) http://home.netscape.com/newsref/std/SSL.html
    S-HTTP http://www.commerce.net/information/standards/drafts/shttp.txt
    Shen Proposal http://www.w3.org/hypertext/WWW/Shen/ref/security_spec.html
    IETF 的 W3 安全研討首頁 (Home Page) http://www-ns.rutgers.edu/www-security/
    相關工具
     
    HTML 語法檢查
       
    檢查 HTML 檔案內容的正確性
    Weblint - Perl 版 http://www.khoros.unm.edu/staff/neilb
    HTML Check - 有 awk 及 perl 版 http://uts.cc.utexas.edu/~churchh/htmlchek.html
     
    計數器
       
    計錄有多少人拜訪 (Hit) 過某一頁 (Home Page)
    WWWCount - 產 生 GIF 檔, 可 選 擇 字 型 、 框 及 顏 色 等 功 能 http://www.semcor.com/~muquit/Count.html
     
    流量統計
       
    統計 W3 伺服器的使用情形
    Getstats - 以 GCC 編 譯 的 CERN, NCSA, Plexus, GN, MacHTTP, UNIX Gopher 分 析 程 式 http://www.eit.com/software/getstats/getstats.html 替 getstat 產生圖形檔 - http://www.tcp.chem.tue.nl/stats/
    Wusage - 用 C 語 言 寫 的, 可 以 處 理 CERN 和 NCSA 的 LOG http://siva.cshl.org/wusage.html
    WWWStat - 以 Perl 發 展, 全 功 能 NCSA LOG 分 析 程 式 組 http://www.ics.uci.edu/WebSoft/wwwstat/
     
    圖形檔製作
       
    用程式化的方式, 製作圖形檔案
    GD - C 語言版 http://siva.cshl.org/gd/gd.html
    GD - Perl 版 http://www-genome.wi.mit.edu/ftp/pub/software/WWW/GD.html
    GD - Tcl 版 http://www.umich.edu/~spencer/guraldi/gdtcl.html
    GNU Plot ftp://prep.ai.mit.edu/pub/gnu/gnuplot-3.5.tar.gz
     
    GIF 處理程式
       
    將 GIF 檔案處理成有 interlace, transparency 效果
     
    搜尋工具
       
    搜尋 W3 伺服器內容或在資料庫中搜尋
    GAIS http://gais.cs.ccu.edu.tw/
    WAIS http://www.wais.com/
    WWW WAIS http://www.eit.com/software/wwwwais/wwwwais.html
    INTERNET STUDIO 網路教材
    若有任何建議或意見, 歡迎寫信到 tutor@www.fido.net.tw     Thu Sep 30 06:11:47 CST 2021 Untitled Document
    MISC
    CGI@venus
    WWW Q and A
    HTML Resources
    Thu Sep 30 06:11:47 CST 2021