1 / 101

HTML 與 CSS

HTML 與 CSS. 必備的 HTML 與 CSS 重點. 因為 PHP 的程式碼內嵌在 HTML (Hyper Text Markup Language) 網頁中 , 所以本章的目標是讓不熟悉 HTML 語法的讀者 , 可以具備必須的知識。 故重點會放在 HTML 網頁結構、本書範例中常用到的 HTML 標籤 , 以及對 PHP 而言較重要的表單 (form) 語法 , 以便在後續章節能用表單設計出具互動性的網頁。. 必備的 HTML 與 CSS 重點.

daryl-lara
Download Presentation

HTML 與 CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML 與 CSS

  2. 必備的 HTML 與 CSS 重點 • 因為 PHP 的程式碼內嵌在 HTML (Hyper Text Markup Language) 網頁中, 所以本章的目標是讓不熟悉 HTML 語法的讀者, 可以具備必須的知識。 • 故重點會放在 HTML 網頁結構、本書範例中常用到的 HTML 標籤, 以及對 PHP 而言較重要的表單 (form) 語法, 以便在後續章節能用表單設計出具互動性的網頁。

  3. 必備的 HTML 與 CSS 重點 • 此外本章也會介紹如何使用 CSS (Cascading Style Sheet) 為 HTML 文件設定外觀樣式, 讓網頁內容能有更多的變化。

  4. 2 - 1 HTML 的標籤與結構 • HTML 標籤的種類 • HTML 文件結構 • 標頭資訊 • 文件本體 • 標籤屬性

  5. HTML 標籤的種類 • 我們稱以 HTML 語法撰寫的文字檔案為『HTML 文件』, 也就是一般俗稱的網頁。 • 『使用 HTML 語法』的意思, 就是用 HTML 語言標準中所定義的標籤 (Tag), 來標示要顯示在網頁中的文字、圖片...等物件。 • 依照最新的 XHTML 規格, HTML 標籤依其用法可分為 2 類： • 第一類使用時需起始標籤與結束標籤成對出現, 例如 <html>...</html>。

  6. HTML 標籤的種類 • 另一類標籤則可單獨出現, 不需結束標籤, 我們稱之為空標籤(Empty Tag), 空標籤的用法是在標籤名稱後加上斜線, 例如 <br/>。 • 早期的 HTML 規格並無空標籤的語法, 所以換行標籤會寫成 <br> 而不是 <br/>。 • 本書將依照 XHTML 規格, 使用加上斜線的空標籤。

  7. HTML 標籤的種類 • 此外, 早期 HTML 規格中, 標籤的名稱是不分大小寫的, 換言之 <html>、<HTML>、<hTmL> 都是合法的。 • 但是到了新版的 XHTML規格中, 規定標籤的名稱統一為小寫。 • 本書將會依照 XHTML 規格, 所有的標籤都使用小寫。

  8. HTML 文件結構 • 在標準的 HTML 文件中, 一定要有 <html>、<head>、<body> 標籤, 它們分別標示出整個 HTML 文件的結構。 • <html> 代表文件的開頭與結束, 而 <head> 及 <body> 標籤分別代表文件的標頭和本體：

  9. HTML 文件結構 • 標頭資訊 • 我們會將網頁屬性設定放置於標頭資訊中, 像是標題、編碼...等設定, 例如：

  10. HTML 文件結構 ex. Ch02-01.htm • 除了使用 <title> 標籤標示出文件的標題外, 在標頭資訊中常見的另一種標籤則是 <meta> 標籤。

  11. HTML 文件結構 • 此標籤可用以提供與文件本身相關的資訊, 以供瀏覽器、搜尋引擎等程式參考。 • 例如上述範例中即是用它來指定本文件採用的文字編碼： • 本書的範例網頁與程式一率使用 UTF-8 編碼儲存, 因此都會加入上述的 <meta> 標籤, 或在 PHP 程式中設定。

  12. HTML 文件結構 • 瀏覽器看到文件中有用 <meta> 標籤指定文件的編碼時, 就會自動使用該編碼來顯示其中的文字內容。 • 所以如果指定錯誤：例如使用 UTF-8 編碼的文件, 在標籤中卻寫 Big5 碼, 就會造成顯示的內容變成亂碼, 必須由使用者手動在瀏覽器切換正確的編碼, 才能讓文件正常顯示。

  13. 為什麼採用 UTF-8 編碼？ • 為促進資訊交流, 資訊業界合組 Unicode Consortium 組織, 制訂一套編碼, 讓所有語系的文字, 都採用同一套編碼來表示, 這就是一般所熟知的 Unicode (通用碼)。 • 為了讓這套文字編碼能用於大大小小、或新或舊的電腦系統上, 就產生了以不同位元數為單位, 來表示 Unicode 的『編碼方式』。 • 例如 UTF-8 就是以 8 位元為單位來表示 Unicode；同理, UTF-16 則是以 16 位元為單位來表示 Unicode。

  14. 為什麼採用 UTF-8 編碼？ • 台灣通用的中文 Big5 編碼中, 有些字元如『許』、『功』、『蓋』...等, 包含了 "\" 符號的 ASCII 碼。 • 而 "\" 卻是大多數程式語言 (包括 PHP) 用來顯示特殊字元的符號, 因此在這些程式語言中, 便無法顯示與處理『許』、『功』、『蓋』...等 Big5 編碼的字。

  15. HTML 文件結構 • 文件本體 • 在 <body> 標籤中放置的就是要顯示在網頁中的內容, 例如要顯示在網頁中的文字、圖片等物件, 因此這個標籤將會是內容最豐富的。

  16. 標籤屬性 • HTML 的所有標籤, 都有數量不一的屬性, 可設定此標籤的某項性質或行為。

  17. 標籤屬性 • 標籤屬性的設定方式如下： • HTML 標籤的屬性種類很多, 而且不同的標籤會有不同的屬性, 在此我們就不詳細介紹。 • 稍後介紹各標籤時, 則會適時介紹一些實用的屬性。

  18. 2 - 2 基本的 HTML 標籤 • 在 <body>...</body> 標籤之間, 就是要放入所有要顯示的網頁文字或圖片的 URL。 • 也因此為了讓網頁中的文字看起來段落分明、版面整齊、甚至美觀大方, 我們就需用到許多不同的 HTML 標籤來標示文件中不同的部份。 • HTML 的標籤為數不少, 此處就不一一介紹, 下表列出本書常用到的幾個標籤。

  19. 基本的 HTML 標籤

  20. 特殊字元表示法 • 在 HTML 程式中, 空白字元、換行字元、定位字元 (tab) 都被視為『空白』, 而且連續出現多個『空白』時, 仍會被當成 1 個空白。 • 所以在 HTML 原始檔中, 即使在每一行行首空好幾個空格、兩段文字間按了幾次 Enter鍵換行, 在瀏覽時仍只會出現一個小小的空白, 也沒有換行的效果。 • 如果真的需要有連續的空白, 該如何呢？

  21. 特殊字元表示法 • 另外有讀者或許會想到：HTML 標籤要用大於、小於符號, 那如果網頁中要顯示大於、小於符號, 要如何表示？ • 其實這類特殊的字元及符號都有特殊的表示法：

  22. 超連結的連結屬性 • 剛才用到 <a> 標籤來建立超連結 (Hyperlink), 使用 <a> 標籤時需用 href 屬性設定此標籤所指的網址, 網址可以是相對位置或絕對。 • 絕對位置：即瀏覽該網頁或其物件時, 在瀏覽器網址列看到的完整 URL。 • 通常用於表示另一網站的資源。 • 相對位置：通常用於表示同一網站的資源。

  23. 超連結的連結屬性 • 使用相對位址時, 只需設定該資源與目前網頁所在路徑的『相對位置』。 • 例如要指向同一資料夾下的另一個網頁, 只要在 herf 中列出該網頁的檔名即可。

  24. 2 - 3 表單 • 對 PHP 網頁而言, 最重要的 HTML 標籤應該就是與表單 (form) 相關的標籤。 • 因為表單的功能就是在網頁產生輸入欄位, 讓瀏覽者可輸入資料、並傳回給伺服器。 • 往後幾章設計 PHP 網頁時, 我們都會利用表單讓瀏覽者輸入資料, 並傳送給我們的 PHP 程式處理。

  25. 表單中的欄位名稱與欄位值

  26. 表單中的欄位名稱與欄位值 • 使用者在欄位輸入或選擇的資料稱為欄位值 (value), 上面表單中, username 欄位的欄位值為 "tony"。 • 當 PHP 程式要取得表單資料時, 必須指定欄位名稱, 才能取得該欄的資料 (欄位值)。 • 因此在設定欄位名稱時, 最好取易記、能代表欄位意義的名稱, 以免寫程式時, 自己都分不清楚要處理的欄位是什麼。

  27. 建立表單 • 要建立表單, 必須使用 <form>...</form> 標籤, 在這一對標籤中則可加入表單的內容, 例如表單本身的說明文字、各輸入欄位的標籤等等。 • 但除此之外, 表單本身也必須設定下列屬性, 以指定使用者於表單中輸入資料後, 要將資料送到什麼地方處理、以及要以什麼方式傳送： • action 屬性：設定表單資料要送到何處, 其屬性值應設為 PHP 網頁的 URL, 表示表單資料要傳送給該 PHP 網頁處理。

  28. 建立表單 • 由於我們還沒撰寫 PHP 網頁, 所以稍後的範例不會設定此屬性, 第 4 章開始才會將此屬性設為網頁本身或其它網頁。 • method 屬性：設定資料送出的方式。 • 可設定的屬性值有兩種： • "get"：使用 HTTP 通訊協定中的 GET 方法送出資料, 此時瀏覽器會將使用者輸入的資料, 附在網頁 URL 後面送出。 • 此種方式不能傳送超過 1024 位元組的資料, 且傳送的內容會出現在瀏覽器的網址列。

  29. 建立表單 ex. Ch02-02.htm • "post"：使用 HTTP 通訊協定中的 POST 方法送出資料。 • 此時瀏覽器會將使用者輸入的資料, 附加於 HTTP 的通訊檔頭送出, 所以傳送的內容不會出現在網址列, 使用者不會看到傳送的內容。 • POST 方法沒有大小限制, 可用於傳送大量資料 (例如發表 Blog 文章、上傳檔案等)。

  30. 建立輸入欄位 • 單列的文字輸入欄位 • 單列的文字輸入欄位是最常見的欄位： • 要在表單中建立單列的文字輸入欄位, 可以使用 <input> 標籤, 其用法如下：

  31. 建立輸入欄位 • name 屬性用來指定該欄位的名稱, 這是所有表單欄位都有的屬性, 隨後介紹其他欄位時, 將不再重複說明 name 屬性。 • 如果我們在上例所建立的欄位輸入 "tony", 送出表單時, 便會以 "欄位值 = 輸入的資料", 也就是 "username = tony" 的格式傳送資料。 • 隨後介紹的密碼輸入欄位與多列文字輸入欄位也都具有一樣的特性。

  32. 建立輸入欄位 • 密碼輸入欄位 • 密碼輸入欄位會隱藏使用者輸入的文字, 避免其他人窺視。 • 密碼輸入欄位一樣可以使用 <input> 標籤來建立, 其用法如下：

  33. 建立輸入欄位 • 多列的文字輸入欄位 • <input type = "text"> 所建立的是單行的輸入欄位, 不適合於輸入大量、分行、分段的文字資料。 • 若需要提供多列的輸入欄位(如留言板), 可改用 <textarea> 標籤, 其用法為： • 關於 <textarea> 標籤的示範, 請參考下一頁的範例 Ch02-02.htm。

  34. 建立輸入欄位 • 送出與清除資料的按鈕 • 有了輸入欄位後, 表單還需要按鈕, 才能將資料送出。 • 建立按鈕也是使用 <input> 標籤, 用法如下：

  35. 建立輸入欄位 ex. Ch02-02.htm • 下面例子示範如何結合按鈕, 建立包含密碼欄位與單列、多列文字欄位的表單 (從本例開始, 範例程式視情況只列出 <body>...</body> 標籤的部份)：

  36. 建立輸入欄位 • 執行結果如下。

  37. 建立輸入欄位

  38. Exercise

  39. 建立輸入欄位 ex. Ch02-03.htm • 單選鈕 • 在表單上使用單選鈕, 可以方便使用者直接選擇, 不用再手動輸入資料： • 建立單選鈕也是使用 <input> 標籤, 下面是其用法：

  40. 建立輸入欄位 • 範例如下： • <input> 是空標籤, 標籤內容在 "/>" 的地方已經結束了, 所以上例中, <input> 後面的文字 "男" 與 "女", 都是顯示於網頁上的文字, 與 <input> 無關。 • 當使用者選擇 "男" 前面的單選鈕時, 表單會送出 "gender = male", 若選則 "女" 前面的單選鈕, 則會送出 "gender = female"。

  41. 建立輸入欄位 • 多選鈕 • 多選鈕可以讓使用者同時選擇多個項目： • 建立多選鈕也是使用 <input> 標籤, 下面是其用法：

  42. 建立輸入欄位 • 下面範例建立一個包含單選鈕與多選鈕的表單：

  43. 建立輸入欄位 • 執行結果：

  44. 建立輸入欄位 • 上例可以看到, 單選鈕的資料會以 "欄位名稱 = value 屬性值" 的方式送出, 而多選鈕的資料會以 "欄位名稱 = on" 的方式送出。 • 下拉式選單及固定選單 • 當可選的項目較多時, 要全部列在網頁上, 有時會妨礙網頁畫面的設計。

  45. Exercise

  46. 建立輸入欄位 • 此時可改用 <select> 標籤建立下拉式的選單 (Drop Down), 或是固定選單 (在固定大小的窗格列出選項, 供使用者捲動、選取)： • 下面將分別說明下拉式選單及固定選單的建立方式。

  47. 建立輸入欄位 ex. Ch02-04.htm • 建立下拉式選單：定義下拉式選單時, 在 <select> 標籤中要用 name 屬性定義此選單的名稱。 • 至於所有可選擇的項目, 則是以 <option> 標籤來設定, 整體的格式如下：

  48. 建立輸入欄位 • 說明文字會顯示在網頁上, 成為該項目的名稱。而選項值是實際傳回的表單資料, 不會顯示在網頁上。 • 例如上面表單中, 若選擇第二個項目, 傳回的表單資料就是 "DropDown = 選項值 2"。 • 不過 value 屬性並非必要屬性, 如果該項目沒有選項值, 傳回的表單資料會變成 "DropDown = 說明文字 2"。 • 若在某個 <option> 標籤中加入 selected = "on" 的設定, 則該項會成為預設的選項。 • 請參考以下的例子。

  49. 建立輸入欄位

  50. 建立輸入欄位 • 執行結果：

More Related