第 2 章 必備的 HTML 與 CSS 重點
本章重點 2 - 1 HTML 的標籤與結構 2 - 2 基本的 HTML 標籤
必備的 HTML 與 CSS 重點 因為 PHP 的程式碼內嵌在 HTML (Hyper Text Markup Language) 網頁中, 所以本章的目標是讓不熟悉 HTML 語法的讀者, 可以具備必須的知識。 故重點會放在 HTML 網頁結構、本書範例中常用到的 HTML 標籤, 以及對 PHP 而言較重要的表單 (form) 語法, 以便在後續章節能用表單設計出具互動性的網頁。
2 - 1 HTML 的標籤與結構 HTML 標籤的種類 HTML 文件結構 標頭資訊 文件本體 標籤屬性
HTML 標籤的種類 我們稱以 HTML 語法撰寫的文字檔案為『HTML 文件』, 也就是一般俗稱的網頁。 『使用 HTML 語法』的意思, 就是用 HTML 語言標準中所定義的標籤 (Tag), 來標示要顯示在網頁中的文字、圖片...等物件。 依照最新的 XHTML 規格, HTML 標籤依其用法可分為 2 類： 第一類使用時需起始標籤與結束標籤成對出現, 例如 <html>...</html>。
HTML 標籤的種類 早期的 HTML 規格並無空標籤的語法, 所以換行標籤會寫成 <br> 而不是 <br />。 另一類標籤則可單獨出現, 不需結束標籤, 我們稱之為空標籤 (Empty Tag), 空標籤的用法是在標籤名稱後加上斜線, 例如 <br />。 早期的 HTML 規格並無空標籤的語法, 所以換行標籤會寫成 <br> 而不是 <br />。 本書將依照 XHTML 規格, 使用加上斜線的空標籤。 此外, 為了避免只支援舊 HTML 語法的瀏覽器無法判讀, 一般會建議在斜線前空一格, 例如寫成 <br />, 本書也會採用此用法。
HTML 標籤的種類 此外, 早期 HTML 規格中, 標籤的名稱是不分大小寫的, 換言之 <html>、<HTML>、<hTmL> 都是合法的。 但是到了新版的 XHTML 規格中, 規定標籤的名稱統一為小寫。 本書將會依照 XHTML 規格, 所有的標籤都使用小寫。
HTML 文件結構 在標準的 HTML 文件中, 一定要有 <html>、<head>、<body> 標籤, 它們分別標示出整個 HTML 文件的結構。 <html> 代表文件的開頭與結束, 而 <head> 及 <body> 標籤分別代表文件的標頭和本體：
HTML 文件結構 標頭資訊 我們會將網頁屬性設定放置於標頭資訊中, 像是標題、編碼...等設定, 例如：
HTML 文件結構 請同學依照範例輸入，將檔名命為 ex01.html 並上傳到學校個人家目錄底下，並確定 http://www.cyut.edu.tw/~s99xxxxxx/ex01.html 可以瀏覽。
HTML 文件結構 除了使用 <title> 標籤標示出文件的標題外, 在標頭資訊中常見的另一種標籤則是 <meta> 標籤。
HTML 文件結構 此標籤可用以提供與文件本身相關的資訊, 以供瀏覽器、搜尋引擎等程式參考。 例如上述範例中即是用它來指定本文件採用的文字編碼： 本書的範例網頁與程式一率使用 UTF-8 編碼儲存, 因此都會加入上述的 <meta> 標籤, 或在 PHP 程式中設定。
HTML 文件結構 瀏覽器看到文件中有用 <meta> 標籤指定文件的編碼時, 就會自動使用該編碼來顯示其中的文字內容。 所以如果指定錯誤：例如使用 UTF-8 編碼的文件, 在標籤中卻寫 Big5 碼, 就會造成顯示的內容變成亂碼, 必須由使用者手動在瀏覽器切換正確的編碼, 才能讓文件正常顯示。
為什麼採用 UTF-8 編碼？ 為促進資訊交流, 資訊業界合組 Unicode Consortium 組織, 制訂一套編碼, 讓所有語系的文字, 都採用同一套編碼來表示, 這就是一般所熟知的 Unicode (通用碼)。 為了讓這套文字編碼能用於大大小小、或新或舊的電腦系統上, 就產生了以不同位元數為單位, 來表示 Unicode 的『編碼方式』。 例如 UTF-8 就是以 8 位元為單位來表示 Unicode；同理, UTF-16 則是以 16 位元為單位來表示 Unicode。
為什麼採用 UTF-8 編碼？ 台灣通用的中文 Big5 編碼中, 有些字元如『許』、『功』、『蓋』...等, 包含了 "\" 符號的 ASCII 碼。 而 "\" 卻是大多數程式語言 (包括 PHP) 用來顯示特殊字元的符號, 因此在這些程式語言中, 便無法顯示與處理『許』、『功』、『蓋』...等 Big5 編碼的字。
為什麼採用 UTF-8 編碼？ 這樣的狀況, 通常被稱為『衝碼問題』。 為了避免衝碼問題, 所以本書統一採用 UTF-8 編碼, 讓我們的 PHP 程式不用經過額外的設計, 就可以直接顯示與處理所有中文字。
HTML 文件結構 文件本體 在 <body> 標籤中放置的就是要顯示在網頁中的內容, 例如要顯示在網頁中的文字、圖片等物件, 因此這個標籤將會是內容最豐富的。
標籤屬性 HTML 的所有標籤, 都有數量不一的屬性, 可設定此標籤的某項性質或行為。 例如剛剛介紹 <meta> 標籤時, 使用了 http-equiv 這個屬性來註明網頁所用的編碼, 而文字的對齊方式、表單欄位的名稱、表格框線的粗細等等, 都是透過屬性來設定。
標籤屬性 標籤屬性的設定方式如下： HTML 標籤的屬性種類很多, 而且不同的標籤會有不同的屬性, 在此我們就不詳細介紹。 稍後介紹各標籤時, 則會適時介紹一些實用的屬性。
2 - 2 基本的 HTML 標籤 在 <body>...</body> 標籤之間, 就是要放入所有要顯示的網頁文字或圖片的 URL。 也因此為了讓網頁中的文字看起來段落分明、版面整齊、甚至美觀大方, 我們就需用到許多不同的 HTML 標籤來標示文件中不同的部份。 HTML 的標籤為數不少, 此處就不一一介紹, 下表列出本書常用到的幾個標籤。
基本的 HTML 標籤
特殊字元表示法 在 HTML 中, 空白字元、換行字元、定位字元 (tab) 都被視為『空白』, 而且連續出現多個『空白』時, 仍會被當成 1 個空白。 所以在 HTML 原始檔中, 即使在每一行行首空好幾個空格、兩段文字間按了幾次 Enter 鍵換行, 在瀏覽時仍只會出現一個小小的空白, 也沒有換行的效果。 如果真的需要有連續的空白, 該如何呢？
特殊字元表示法 另外有讀者或許會想到：HTML 標籤要用大於、小於符號, 那如果網頁中要顯示大於、小於符號, 要如何表示？ 其實這類特殊的字元及符號都有特殊的表示法：
超連結的連結屬性 剛才用到 <a> 標籤來建立超連結 (Hyperlink), 使用 <a> 標籤時需用 href 屬性設定此標籤所指的網址, 網址可以是相對位置或絕對。 絕對位置：即瀏覽該網頁或其物件時, 在瀏覽器網址列看到的完整 URL。 通常用於表示另一網站的資源。 相對位置：通常用於表示同一網站的資源。
超連結的連結屬性 使用相對位址時, 只需設定該資源與目前網頁所在路徑的『相對位置』。 例如要指向同一資料夾下的另一個網頁, 只要在 herf 中列出該網頁的檔名即可。
課堂練習 至學校秘書室下載本校校徽圖示，並上傳至與ex01.html 相同目錄底下。 利用相對目錄方式，顯示校徽圖示。 利用絕對目錄方式，顯示本校吉祥物。 於吉祥物圖片連結上方加上HTML註解說明此為外部連結，不顯示於網頁上。 加上校徽圖示說明，利用<p></p>與<br />進行排版。 說明最末處「秘書室」請連結至本校秘書室首頁。 於最下方增加 <回首頁> 連結，連回上週完成之首頁index.html 於 index.html 內增加一連結，連回此次練習 ex01.html