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

• 標籤 (tag)

  標 籤 是 HTML 學 習 的 重 點 . 在 寫 慣 HTML 檔 , 會 發 現 大 部 分 時 候 , 都 是 把 資 料 加 上 一 些 標 籤 , 呈 現 出 來 .

  它 可 以 決 定 資 料 輸 出 的 方 式 (像 是 段 落 、 條 列 、 字 體 ...) 或 是 連 接 不 同 的 資 源 (如 圖 形 、 檔 案 、 另 一 份 文 件 ...) . 後 面 章 節 會 針 對 各 個 標 籤 使 用 做 說 明 .

  標 籤 由 兩 個 角 括 號 < 、 > 和 角 括 號 包 圍 的 文 字 構 成 , 其 文 字 是 大 小 寫 無 關 . 如 <p> 是 一 個 標 籤 , <P> 是 相 同 功 能 的 標 籤 .

  基 本 上 有 兩 種 標 籤 :

  1. 單 一 標 籤 只 要 一 個 標 籤 就 能 完 成 所 要 表 示 的 動 作 .
     如 : <hr> , 可 顯 示 出 一 條 水 平 的 分 隔 線 .

     成 對 標 籤 需 要 兩 個 標 籤 才 能 完 成 所 要 表 示 的 動 作 .

     如 : <b>test 123</b> , 使 「test 123」 這 段 文 字 加 粗 顯 示 .
     我 們 把 <b> 稱 為 前 標 籤 (start tag) , </b> 稱 為 後 標 籤 (end tag) . 後 標 籤 比 較 特 別 的 地 方 在 它 是 由 </ 、 > 構 成 , 文 字 部 分 則 與 前 標 籤 對 映 .

  有 部 分 標 籤 擁 有 屬 性 (attribute) , 能 夠 對 標 籤 的 特 性 加 以 控 制 . 例 如 : <hr width=50%> , 其 中 width=50% 就 是 <hr> 這 個 標 籤 的 屬 性 , 使 得 水 平 分 割 線 只 有 半 個 視 窗 寬 , 原 本 是 整 個 視 窗 寬 .

• 文字、圖形資料

  這 裡 的 文 字 與 圖 形 , 指 的 是 要 提 供 給 瀏 覽 資 訊 者 閱 讀 的 東 西 . 雖 然 W3 能 把 資 料 包 裝 美 觀 , 如 果 不 是 有 價 值 的 資 料 仍 屬 枉 然 .

  一 般 文 字 資 料 是 搭 配 標 籤 , 直 接 寫 在 HTML 檔 中 . 可 以 視 做 是 文 字 的 加 工 . 而 W3 顯 示 的 圖 形 都 是 各 別 以 檔 案 形 式 存 在 , 倘 使 要 顯 示 圖 形 (圖 形 檔 用 其 它 程 式 建 立) , 必 須 用 特 別 的 標 籤 指 向 圖 形 檔 .

  要 如 何 使 用 標 籤 是 在 後 面 章 節 說 明 , 現 在 要 提 和 文 字 資 料 有 關 .

  我 們 標 籤 是 使 用 角 括 號 < 和 > . 如 果 要 顯 示 這 些 角 括 號 呢 ? 今 天 蛋 (角 括 號) 能 孵 出 雞 (標 籤) 來 , 我 們 不 能 寄 望 蛋 還 能 孵 出 蛋 . 在 HTML 裡 有 別 的 辦 法 解 決 這 樣 的 問 題 :

  1. 實體參考 (entity reference) 用 縮 寫 代 表 一 字 元
  2. 字碼參考 (numberic character reference) 用 ASCII 碼 代 表 一 字 元

  舉 常 用 字 元 為 例 :

  顯示字元	實體參考	字碼參考	意義
  &	&	&	And 符號
  <	&lt;	&#60;	小於符號
  >	&gt;	&#62;	大於符號

  也 就 是 在 HTML 檔 中 有 「&lt;」 這 樣 的 描 述 , 在 W3 顯 示 就 是 一 個 「<」 小 於 符 號 .

• 單一資源配置 (URL)

  URL, Uniform Resource Locators . 用 來 指 示 某 一 網 際 網 路 (Internet) 資 源 的 位 置 .

  常 在 網 際 網 路 穿 梭 , 可 以 發 現 在 其 中 的 服 務 種 類 繁 多 , 提 供 服 務 的 電 腦 主 機 (Host) 更 多 . 過 去 的 經 驗 是 要 用 什 麼 服 務 就 用 什 麼 程 式 , 啟 動 特 定 程 式 後 再 輸 入 電 腦 主 機 的 網 路 位 址 去 連 接 . 現 在 W3 可 以 帶 領 人 悠 遊 網 路 , 就 需 要 能 夠 用 固 定 格 式 描 述 連 接 在 某 處 的 某 種 服 務 . 目 前 W3 通 用 的 , 是 一 種 稱 做 URL 的 格 式 .

  URL 的 格 式 :

  <服務資源名稱>:<連接資源方式>

  • 服務資源名稱 指 定 服 務 種 類 . W3 是 http , 還 有 ftp 、 gopher 、 news 、 telnet ... 等 .
  • 連接資源方式 和 服 務 種 類 有 關 . 一 般 可 分 為 兩 類 :
    1. 目錄式資源 「連接資源方式」的格式為

       「//<電腦主機的網路位址>:<埠址>/<目錄>/<檔案>」

       • 電腦主機的網路位址 指 定 連 接 的 電 腦 主 機 . 可 用 IP 位 址 或 網 域 名 稱 .
       • 埠址 指 定 連 接 埠 .
       • 目錄、檔名 和 個 人 電 腦 上 目 錄 、 檔 案 的 概 念 相 同 .

       其 中 W3 的 http 、 ftp 、 gopher 都 屬 於 這 一 類 .

       非目錄式資源 不 屬 上 面 目 錄 式 的 , 「連 接 資 源 方 式」 就 較 為 多 樣 :

       服務資源名稱	連接資源方式
       mailto	電 子 信 箱 位 址
       news	可 寫 上 news 討 論 區 名 稱 , 若 不 寫 則 列 出 所 有 討 論 區
       telnet	//<使用者名>:<密碼>@<電腦主機的網路位址>:<埠址>/

  目 前 各 個 W3 在 URL 使 用 上 , 在 非 目 錄 式 資 源 存 在 不 少 差 異 . 因 此 實 際 情 形 , 得 考 慮 瀏 覽 器 狀 況 . 底 下 是 一 些 URL 的 範 例 :

  WWW	http://www.fido.net.tw/
  	連 接 www.fido.net.tw 的 W3 伺 服 器
  Gopher	gopher://gopher.twnic.net/11/taiwan/
  	連 接 gopher.twnic.net 瀏 覽 /11/taiwan/ 目 錄 下 的 資 訊 : 臺 灣 Internet 團 體
  FTP	ftp://ftp.tku.edu.tw/pc/windows/WWW/Client/NetScape/n16e12n.exe
  	連 上 ftp.tku.edu.tw 將 目 錄 /pc/windows/WWW/Client/NetScape/ 下 的 n16e12n.exe 傳 回
  Mailto	mailto:tutor@www.fido.net.tw
  	寄 信 給 tutor@www.fido.net.tw
  News	news:tw.bbs.comp.www
  	閱 讀 tw.bbs.comp.www , WWW 討 論 區 的 News [註] 必 須 先 設 定 從 那 裡 讀 News
  Telnet	telnet://archie@servers.nctu.edu.tw/
  	以 telnet 使 用 servers.nctu.edu.tw 的 archie (檔 案 找 尋 系 統) [註] 必 須 先 設 定 好 使 用 的 telnet 程 式

  雖 然 URL 提 供 了 連 接 網 路 資 源 的 方 法 , 對 於 撰 寫 HTML 的 人 來 說 , 一 個 檔 案 中 可 能 要 用 到 許 多 指 向 其 它 檔 案 的 URL . 很 可 能 這 些 檔 案 就 在 和 自 己 相 同 的 電 腦 主 機 上 , 難 道 每 次 都 要 重 覆 輸 入 自 己 的 電 腦 主 機 名 稱 嗎 ?

  有 個 辦 法 , 可 免 去 這 種 困 擾 . 和 我 們 以 命 令 列 執 行 檔 案 的 狀 況 相 似 , 在 使 用 時 有 所 謂 的 絕 對 路 徑 與 相 對 路 徑 .

  
  大寫表示目錄、小寫表示檔案

  現 在 顯 示 的 檔 案 http://home.fido.net.tw/TUTOR/W3/html.html . 在 撰 寫 這 個 html.html 檔 時 , 就 已 設 計 在 相 同 目 錄 下 都 是 擺 W3 相 關 的 東 西 , 而 且 清 楚 知 道 它 的 位 置 . 可 以 想 像 使 用 者 連 上 這 份 文 件 後 , 他 的 位 置 就 是 在 上 圖 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 寫 法 .

首 先 我 們 來 看 看 底 層 的 積 木 要 如 何 擺 .

用 文 書 編 輯 器 寫 同 下 面 的 內 容 (以 Windows 的 記 事 本 編 輯 , 可 利 用 Copy 和 Paste) :

<html> <head> <title>標題</title> </head> <body> 內容 </body> </html>

存 成 struct.htm (檔 名 可 自 定) , 就 可 用 瀏 覽 器 來 看 . 以 Netscape 為 例 , 按 「Ctrl+o」 開 啟 剛 才 存 的 struct.htm 檔 案 . 我 們 把 上 面 的 內 容 放 在 SAMPLES/struct.html , 您 也 可 以 按 這 裡 看 結 果 .

基 本 成 員 有 <html></html> 、 <head></head> 、 <title></title> 、 <body></body> 這 四 個 成 對 標 籤 . 所 有 資 料 都 寫 在 <html></html> 之 間 , 然 後 像 信 件 般 分 成 兩 個 部 分 , 一 是 <head></head> 放 標 頭 , 另 一 則 是 <body></body> 放 內 容 .

而 <title></title> 是 放 在 <head></head> 中 , title 這 標 籤 會 設 定 視 窗 的 標 題 (在 視 窗 最 上 方) . 在 上 面 的 例 子 , 直 接 把 「標題」 兩 個 字 取 代 成 欲 顯 示 的 字 串 即 可 .

剩 下 的 重 點 就 是 在 <body></body> 中 的 東 西 , 這 是 要 給 使 用 者 瀏 覽 的 資 料 . 上 例 中 只 是 簡 單 放 兩 個 字 「內容」 , 您 可 以 取 代 成 要 顯 示 的 資 料 . 如 果 要 讓 顯 示 資 料 賞 心 悅 目 , 需 要 使 用 其 它 標 籤 . 請 繼 續 看 下 一 段 內 容 .

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

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

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

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

因 此 除 非 文 章 事 先 做 好 , 要 放 在 W3 上 , 才 用 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 檔 必 須 注 意 : 目 前 使 用 者 所 用 的 瀏 覽 器 , 如 果 要 自 動 換 列 的 話 , 是 依 照 空 白 字 元 做 為 換 列 的 依 據 . 因 為 英 文 每 個 字 之 間 都 有 空 白 . 要 使 中 文 也 能 自 動 排 列 , 就 需 要 在 字 與 字 之 間 加 個 空 白 字 元 . 詳 細 內 容 可 參 考 「網 際 工 作 室 版 的 W3 問 答 集」 .

標 題 設 定

首 先 要 注 意 的 : 標 題 標 籤 會 與 前 、 後 文 字 拉 出 如 段 落 標 籤 的 空 白 列 .

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

文字設定

1. 實 體 設 定 (Physical Format)
   實 體 設 定 的 影 響 是 固 定 、 不 因 使 用 瀏 覽 器 不 同 有 所 改 變 .

   名稱	範例	結果
   bold	粗體 <b>bold</b> 可讓文字在字句中突顯出來	粗體 bold 可讓文字在字句中突出來
   italic	斜體 <it>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 的 心 得) . 或 許 是 由 於 國 內 大 多 數 人 對 外 語 沒 有 親 切 感 的 關 係 .

特 別 要 注 意 一 點 , 有 些 瀏 覽 器 處 理 上 述 文 字 設 定 標 籤 是 互 斥 的 , 有 些 則 可 以 合 成 . 您 可 以 看 看 下 面 例 子 在 使 用 的 瀏 覽 器 是 什 麼 樣 子 :

以 上 這 些 列 舉 標 籤 可 以 形 成 巢 狀 條 列 (nesting lists) , 亦 即 一 個 項 目 可 以 包 含 另 一 個 列 舉 .

要 加 入 圖 形 , 只 要 寫 :

其 中 圖形檔的 URL 就 是 圖 形 檔 的 位 置 . 如 果 和 HTML 檔 放 在 同 一 個 目 錄 , 就 只 要 寫 檔 案 名 稱 即 可 . 有 關 URL 的 說 明 , 請 按 這 裡 .

目 前 在 W3 最 為 通 用 的 圖 形 檔 是 GIF 格 式 . 在 使 用 圖 形 前 , 請 先 做 確 認 . 圖 形 在 W3 顯 示 上 有 許 多 效 果 , 將 在 「W3 的 圖 形 效 果」 中 說 明 .

範例	結果
<img src="solo.gif">
<img src="w3c.gif">

有 些 瀏 覽 器 無 法 看 到 圖 形 , 這 時 候 可 以 顯 示 別 的 訊 息 給 他 . 使 用 方 式 :

範例	結果
<img src="mailbox.gif" alt="這應該有張圖">

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

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

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

讀 者 會 看 到 :

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

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

下 面 是 幾 個 例 子 :

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

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

可 以 用 :

來 標 示 一 個 特定名稱 位 置 , 在 同 一 檔 案 中 用

指 示 到 這 位 置 . 如 果 是 不 同 檔 案 要 指 到 這 位 置 , 就 在 # 井 字 符 號 前 加 上 檔 案 的 URL :

例 如 這 段 文 章 的 名 稱 標 示 是 :

注 意 在 上 面 描 述 中 包 含 HTML 的 其 它 標 籤 . 下 面 就 是 讓 讀 者 跳 到 HTML_link 的 方 法

<a href="#HTML_link"><h2>到這篇文章的開頭</h2></a>

到這篇文章的開頭