第 2 章 HTML 與 CSS - HTML 及 CSS * 超文件標示語言 (Hypertext markup language, HTML) # 說明網頁意義的語言 * 層疊樣式單 (Cascading style sheet, CSS) # 告訴瀏覽器如何顯示網頁以及控制顯示格式的語言 * HTML 與 CSS 的歷史 # 1990 1994:HTML2, 簡單 ( 醜陋 ) 的網頁格式顯示 # 1995 1999:HTML3 HTML4, 人們及企業開始嚴肅看待網際網路, 希望網頁看來美觀, 各家瀏覽器激烈競爭, 各自發展獨家且不相容的 HTML, 跨平台 HTML 之撰寫非常困難 # 2000 2005:CSS 已明確定義, 但各家瀏覽器對於 CSS 之支援各自不同, 同一瀏覽器的前後版本也可能不相容, 跨平台 HTML 及 CSS 之撰寫還是有很大問題 # 2005 2008: 所有瀏覽器對於 CSS 都可支援, 唯獨 IE 5 是當時普遍使用但對 CSS 支援很差的瀏覽器 # 2009 : 可以放心假設所有瀏覽器對於 CSS 都有很好的支援 (IE 6 IE 7 例外 ),HTML 與 CSS 熬了 18 年終於步上正軌 ( 生逢此時, 各位太幸運了! ;-) - HTML 文件 * 超文件標示語言 (Hypertext markup language, HTML): 用來產生網頁的標示語言 * 網頁也稱為 HTML 頁 (HTML page) 或 HTML 文件 (HTML document) * 標示語言 (Markup language): 利用一群符號來標示一份文件應如何顯示 * 超文件標示語言是根據標準一般標示語言 (Standard generalized markup language, SGML) 所衍生而來 - 基本 HTML 語法 * HTML 文件為文字檔案, 內含格式化指令稱為標籤 (Tag), 以決定資料該如何顯示 * 標籤功能 : 顯示文字特殊效果 ( 例如粗體 斜體 ) 使用者可點選的控制元件 ( 例如點選框 ) 顯示多媒體資料 ( 例如影像 音訊 視訊 ) * 標籤由 < 及 > 所包含, 分為開始及結束標籤, 結束標籤需加上斜線 /, 例如 : <b>... </b> # 要看到 < 及 > 字元, 需使用 < 與 > * 開始及結束標籤及其所包含文字, 統稱為元素 (Element), 所包含文字稱為內容 (Content) * 有些元素不需要結束標籤, 稱為空元素 (Empty element), 例如插入一橫線 <hr> * HTML 基本架構 (HTML5 標準 ) <!DOCTYPE html> <html> <title>... </title> </head> <body>... </body> </html> 2-1
* 所有 HTML 文件均以 <html> 元素為根元素 (Root element), 在一份文件中根元素包含所有其他元素 * 元素緊跟在 <html> 標籤之後, 其中放置 <title> 元素, 以便在視窗標題區呈現標題, 元素稱為文件標頭 (Document head) * <body> 元素緊跟在 元素之後, 稱為文件本體 (Document body) * 當瀏覽器開啟一份 HTML 文件時, 瀏覽器依據標籤指示來組合及格式化文件內容, 此程序稱為解析 (Parsing) 或呈現 (Rendering), 例如將文字以粗體呈現 : <p><b> 本段落將以粗體在瀏覽器中呈現 </b></p> * 習慣上 HTML5 的標籤均為小寫 (<!DOCTYPE html> E 除外 ) * 可利用各種參數 ( 稱為屬性,Attribute) 來組態 HTML 元素, 屬性放在開始標籤的右邊角括號之前, 其語法為 :attribute=value # 例如利用 src (Source) 屬性在 HTML 文件中插入一影像 : <img src=mygraphic.gif> * 瀏覽器忽略 HTML 文件中的空行 - 產生 HTML 文件 * HTML 文件是純文字檔, 需使用可產生純文字檔的編輯器來編輯 * 亦有 所見即所得 (What you see is what you get, WYSIWYG) 編輯器, 例如 : Dreamweaver,Frontpage 等, 利用視覺工具加入 HTML 標籤, 並自動加入其他標籤 * 練習 1 1. 執行純文字編輯器, 開啟新檔並儲存為 dessertshop.html, 檔案中輸入下列標籤 <!DOCTYPE html> <html> </html> 2. 在 <html> 及 </html> 兩個標籤之間輸入下列元素 : <title> 甜點商店 </title> </head> 3. 在 </html> 標籤之上輸入下列元素 : <body> </body> 4. 在 </body> 標籤之上輸入下列元素 : <h1 style=color:olive> 甜點商店 </h1> <hr> <h2 style=color:olive> 開店時間 </h2> <p style=color:blue> 星期一到星期四,7:45 a.m. -- 9:45 p.m.<br> 星期五,7:45 a.m. -- 4:30 p.m.<br> 星期六,9:00 a.m. -- 4:00 p.m.<br> 星期日, 中午 -- 9:00 p.m.</p> <hr> <h2 style=color:olive> 要什麼甜點?</h2> <ul style=color:blue> <li> 餅乾和糕點 </li> <li> 蛋糕和派 </li> <li> 美食巧克力 </li> </ul> <hr> <h2 style=color:olive> 付款方式 </h2> 2-2
<p style=color:blue> 現金, 自動櫃員機, 信用卡, 美國運通, 發現卡, 大來卡 </p> 5. 存檔後, 另外開啟瀏覽器觀看該檔案 * 練習 2:lexmark.html <!DOCTYPE html> <html> <title> 碳粉匣銷售 </title> </head> <body> <h1> 碳粉匣銷售 </h1> <hr> <h2>lexmark 碳粉匣 </h2> <p><b> 型號 #</b>:lex 1382100<br> <b> 相容性 </b>:optra 4049/3112/3116<br> <b> 價格 </b>:$2,000</p> <p><b> 型號 #</b>:lex 1380520<br> <b> 相容性 </b>:optra 4019/4028/4029<br> <b> 價格 </b>:$2,200 < 有折扣喔!></p> </body> </html> (1) 建立正確格式的網頁 - HTML 版本 * 1993 年 :1.0 版 * 1995 年 :2.0 版 * 1996 年 :3.2 版 * 1999 年 :4.01 版, 之後由 XHTML (Extensible HTML) 取代 * 2011 年 :5.0 版 ( 尚在研發中 ), 包含 HTML 4 及 XHTML 1 * 未來主流 :HTML5,XHTML 退場 - 撰寫正確格式的文件 * 需有 <!DOCTYPE html> 宣告 <html> 及 <body> 等元素 * 元素屬性質若有空格, 需以雙引號包含 # 例如 :<h1 style="color:olive; margin-top:20px;"> 甜點商店 </h1> * HTML 元素之巢狀順序必須正確 # 例如, 標籤順序必須對應 :<p><b><i> 此段落為粗體及斜體 </i></b></p> # 錯誤的順序 :<p><b><i> 此段落為粗體及斜體 </b></p></i> - 層疊樣式單 (CSS) 利用一致性的格式設定, 使文件的呈現一致化, 亦即相同的元素使用相同的格式 * 利用 CSS 可統一設定文字對齊 字型 背景 顏色等, 使整份文件看來非常一致 * CSS 可放在 HTML 檔案中, 亦可獨立成為一檔案, 以提供許多文件使用 * CSS 特性 (CSS property) # CSS 樣式由 2 部分組成並以冒號分隔, 此稱為宣告 (Declaration) 或樣式宣告 (Style declaration) - 特性 (Property): 某項 CSS 樣式 - 值 (Value): 決定該樣式的視覺效果 # 例如 :color:blue 2-3
* 行內樣式 (Inline style) # 在一份文件中對於某元素加入樣式資訊 # 例如將某段落設定為 Verdana 字型 : <p>this paragraph does not use CSS ( 本段落不使用 CSS)</p> <p style=font-family:verdana>paragraph formatted with inline styles ( 使用行內樣式所格式化的段落 )</p> # 使用多項行內樣式, 利用分號區隔, 例如 : <p style="font-family:verdana; color:blue; text-align:center;">paragraph formatted with <strong>inline</strong> styles ( 使用行內樣式所格式化的段落 )</p> # 行內樣式無法提供相同文件中的其他元素使用, 亦無法提供其他文件使用 # 練習 : 將 dessertshop.html 依下列修改, 並儲存為 dessertshop2.html: 1. 如下修改 <body> 標籤 : <body style="font-family: Arial; color: blue; background-color: transparent"> 2. 如下修改 <h1> 標籤 : <h1 style="font-family: Arial; color: olive"> 3. 如下修改 3 個 <h2> 標籤 : <h2 style="font-family: Arial; color: olive"> * 內部樣式單 (Internal style sheet) # 所設定的樣式可提供整份文件使用 # 產生內部樣式單 : 在 元素中加入 元素, 如下 : style declarations ( 樣式宣告 ) # 在樣式宣告中, 每個樣式設定格式如下 : 選項 { 特性 : 值 (selector {property: value), 其中選項 (Selector) 為某個標籤, 例如將整份文件的段落均設為藍色 p {color: blue # 針對某個選項設定多個特性時, 以分號區隔 # 練習 : 複製 lexmark.html 為 lexmark1.html, 並將 元素中加入 元素 ( 其中 em 表示以該數字乘上未格式化的文字作為文字大小 ), 並另存新檔 h1 {color: navy; font-size: 2em; font-family: serif h2 {color: red; font-size: 1.5em; font-family: Arial body {color: blue; font-family: Arial; font-size:.8em; font-weight: normal # 針對多個選項設定相同特性時, 以逗號區隔, 例如 : h1, h2, h3 {color: navy # 練習 : 將 dessertshop2.html 依下列修改, 並儲存為 dessertshop3.html: 1. 將行內樣式設定 <body>, <h1>, 及 <h2> 刪除 2. 在 元素中加入下列 元素 : body {font-family: Arial; color: blue; background-color: transparent h1, h2 {font-family: Arial; color: olive * 外部樣式單 (External style sheet) 獨立文字檔, 內含樣式宣告, 可提供許多檔案分享, 使所有檔案的格式均一致 2-4
# 檔案內容僅包含樣式設定, 且檔案之副檔名為.css # 在 HTML 文件中, 在 元素中利用 <link> 元素來參考外部樣式單, 如下 ( 其中 company.css 為外部樣式單檔案 ): <link rel=stylesheet href=company.css> # 練習 : 將 dessertshop3.html 依下列修改, 並儲存為 dessertshop4.html: 1. 將 元素中之 body, h1, h2 內部樣式複製到另一名為 dessert.css 的樣式檔, 並儲存該檔案, 刪除 元素 2. 在 元素中加入 : <link rel=stylesheet href=dessert.css> - 利用標籤的 id 與 class 設定格式 * id 可用來指定某一個特定標籤, 不可重複, 例如 : <p id=myparagraph>this is my paragraph.</p> * class 可用來指定許多標籤, 例如 : <p class=similar>this is paragraph 1.</p> <p class=similar>this is paragraph 2.</p> <div class=similar>this is div 1.</div> <div class=similar>this is div 2.</div> * 指定 id 或 class 後, 即可使用 CSS 來做設定 : #myparagraph { font-weight: bold; margin-top: 20px; text-align: center; p.similar { color: blue;.similar { background-color: yellow; - 內容型態元素 (Content type element) * 當瀏覽器要求一份 HTML 文件時, 伺服器送出 2 份資料 : 回覆標頭及該網頁 # 回覆標頭 (Response header) - 說明網頁的內容 資料型態 - 利用 <meta> 標籤來記錄標頭資訊 * 練習 : 在 dessertshop4.html 的 元素中加入下列資料, 並儲存為 dessertshop5.html <meta charset=utf-8> - 網頁驗證 (Validating web pages) * 當瀏覽器開啟一份格式不良的網頁時, 會忽略錯誤格式並盡可能呈現網頁 * 可利用驗證分析器 (Validating parser) 來分析網頁的格式 # 線上驗證 : - W3C Markup validation service: http://validator.w3.org - Web design group (WDG): http://www.htmlhelp.org/tools/validator/ * 練習 : 分別利用 W3C 及 WDG 之 "validate by file upload" 來驗證 dessertshop5.html, 並更正所有錯誤 ( 亦驗證各個版本之 dessertshopx.html) 2-5
(2) HTML 常用標籤 - 字元處理 * 粗體字 :<b> </b>, <strong> </strong> * 斜體字 :<i> </i>, <em> </em> * 底線 :<u> </u> * 字型及顏色 : 例如 <span style="color:red; font-size:14pt"> </span> - 表列項目及編號 * 無序排列 (Unordered list):<ul> </ul> # 預設項目符號為圓點 (Disc), 亦可設為空心圓 (Circle) 實心方塊 (Square) 等 # 例如 : <ul> 無序排列 <li> 項目 1</li> <li> 項目 2</li> </ul> <ul type=circle> 無序排列 <li> 項目 1</li> <li> 項目 2</li> </ul> * 有序排列 (Ordered list):<ol> </ol> # 預設編號為 1, 2, 3..., 亦可設為 A (A~Z), a (a~z), I (I, II, III, ), i (i, ii, iii,...) 等 # 例如 : <ul> 有序排列 <li> 項目 1</li> <li> 項目 2</li> </ol> <ul type=a> 有序排列 <li> 項目 1</li> <li> 項目 2</li> </ol> - 段落 * 段落 :<p> </p> * 斷行 :<br> * 無格式設定 ( 依照所輸入的格式, 不做任何處理, preformatted):<pre> </pre> - 分區 (Division):<div> </div> * 置中對齊 :<div style="width:200px; margin:0px auto;"> center </div> * 靠左對齊 :<div style="float:left; width:200px; "> left </div> * 靠右對齊 :<div style="float:right; width:200px; "> right </div> * <div> 常用在網頁佈局 (Page layout), 例如 : # HTML (div.html): <!DOCTYPE html> <html> <title>div 範例 </title> <link rel=stylesheet href=div.css> <meta charset=utf-8> 2-6
</head> <body> <div id=wrapper> <div id=header> 這是頁首 </div> <div id=banner> 這是橫幅 </div> <div id=left> 這是左邊 </div> <div id=right> 這是右邊 </div> <div id=footer> 這是頁尾 </div> </div> </body> </html> # CSS (div.css): #wrapper { width: 500px; margin: 0 auto; #header { height: 50px; background: yellow; #banner { height: 80px; background: lightblue; #left { width: 150px; float: left; background: pink; #right { width: 350px; float: right; background: lightgreen; #footer { height: 50px; clear: both; background: lightgray; * 練習 ( 頁面寬度 1000px): - 表格 * 格式 : <table> <!-- 表格宣告 --> <caption> 表格標題 </caption> <!-- 表格標題 --> 2-7
<tr> <!-- 第 1 列 --> <td> 內容 </td> <!-- 儲存格 1 --> <td> 內容 </td> <!-- 儲存格 2 --> <td> 內容 </td> <!-- 儲存格 3 --> <tr> <!-- 第 2 列 --> <td> 內容 </td> <!-- 儲存格 4 --> <td> 內容 </td> <!-- 儲存格 5 --> <td> 內容 </td> <!-- 儲存格 6 --> </table> * 範例 : table { margin: 0 auto; width: 250; height: 250; border-collapse: collapse; td { border: 1px; border-style: solid; border-color: red; padding: 20px; <table> <tr> <td style=text-align:center;> <p> 會員管理系統 </p> <p> 帳號 :</p> <p> 密碼 :</p> <p> 記住我的帳號密碼 </p> <p><a href=#> 馬上申請會員 </a></p> </td> <td>test</td> <tr> <td>test</td> <td>test</td> </table> * 儲存格縱向合併 :<td rowspan=" 合併的格數 "> <table > <tr> <td>upper left</td> <td rowspan=2>right</td> <tr> <td>lower left</td> </table> * 儲存格橫向合併 :<td colspan=" 合併的格數 "> 2-8
<table > <tr> <td>upper left</td> <td>upper right</td> <tr> <td colspan=2>lower</td> </table> (3) 層疊樣式單應用範例 - 層疊樣式單 (Cascading style sheet, CSS): 設定顏色 字型 及連結樣式等 * 先利用內部樣式單進行編輯及實驗, 完成後再改為外部樣式單 * 練習 :aboutme.html <!DOCTYPE html> <html> <title> 自我介紹 </title> <meta charset=utf-8> </head> <body> <!-- 網頁導覽選單 --> <ul> <li><a href=self.html> 自我介紹 </a></li> <li><a href=town.html> 我的出生地 </a></li> <li><a href=school.html> 我的母校 </a></li> <li><a href=specialty.html> 我的專長 </a></li> </ul> <!-- 主要內容 --> <h1> 自我介紹 </h1> <p> 歡迎來到自我介紹網頁!</p> <p> 本網頁介紹我的出生地 我的母校 以及我的專長 目前沒有圖片, 但至少有樣式 ; 也有連結, 但連不到任何地方!</p> <p> 應該還有很多內容可以加入, 但目前還沒有任何概念...</p> <!-- 此處加入簽名及日期, 以示禮貌 --> <address> 最後修改 :3/1/2012<br> 網頁設計 : 王大明 </address> </body> </html> * 加上顏色 # 在 元素中加入 元素, 設定 <body> 元素之文字及背景顏色 <meta charset=utf-8> body { color: purple; background-color: #d8da3d * 設定連結之樣式 # 連結項目看起來像清單 : 取消清單樣式, 使其看起來像選項 2-9
# 選項 <li> 背景設為白色 (background: white), 右邊界設為黑色 (border-right: 1em solid black) # 連結 <a> 設為無底線 (text-decoration: none) # 連結未被點選者顯示藍色, 已被點選者設為紫色 body { color: purple; background-color: #d8da3d ul { list-style-type:none; width:9em li { background:white; margin:0.5em; padding:0.3em; border-right:1em solid black a { text-decoration: none a:link { color:blue a:visited { color:purple... * 在 網頁編輯 上方加上橫線... body { color: purple; background-color: #d8da3d ul { list-style-type:none; width:9em li { background:white; margin:0.5em; padding:0.3em; border-right:1em solid black a { text-decoration: none a:link { color:blue a:visited { color:purple 2-10
address { margin-top: 1em; padding-top: 1em; border-top: thin dotted... * 將樣式單放到另一檔案 # 將 元素的內容 ( 不包含 <style...> 及 標籤 ) 複製到一個新的文字檔, 以檔名 aboutme.css 存檔 # 在 元素中設定連結到樣式檔 <title> 自我介紹 </title> <meta charset=utf-8> <link rel=stylesheet href=aboutme.css> </head> - 利用 <div> 及 CSS 進行網頁佈局 (Page layout) * 主要概念 : 將 內容 (Content) 與 呈現 (Presentation) 分開處理, 使兩者鬆散連結 (Loosely coupled) * HTML 內容如下, 需佈局之區塊利用 <div> 標籤標示, 每個區塊均有其 ID ( 存檔 : layout.html): <div id=wrapper> <div id=header> 網頁標題或橫幅影像 </div> <div id=navigation> <b> 選單 </b><br> 交通資訊 <br> 住宿資訊 <br> 用餐資訊 </div> <div id=content> 網頁內容 </div> <div id=link> 文字連結 </div> <div id=footer> 網頁設計 : 王大明 </div> </div> * 建立外部 CSS 檔案 ( 存檔 :layout.css), 利用浮動 (float) 屬性來排列區塊 : #wrapper { #content { width: 600px; height: 200px; margin: 0 auto; overflow: auto; background-color: #eeeeee; #header { height: 100px; #link { background-color: #ffa500; clear: left; height: 60px; #navigation { background-color: #9999ff; float: left; width: 100px; #footer { height: 200px; height: 60px; background-color: #ffd700; background-color: #00ff00; 2-11
(4) 表單及表單元件 - 表單 (Form) * 透過表單接受使用者輸入, 由伺服器端語言處理資料, 和使用者互動, 格式 : <form action= 處理程式 method= 傳送方式 > </form> * 在表單中可加入各式可讓使用者輸入之元件, 例如 : # 文字欄位 <input type=text name= 欄位名稱 value= 值 > # 密碼欄位 <input type=password name= 欄位名稱 value= 值 > # 表單確定鈕 <input type=submit name= 欄位名稱 value= 值 > # 多重勾選方塊 (checked 項目為選擇性 ) <input type=checkbox name= 欄位名稱 value= 值 checked=checked> 字串 # 選擇鈕 (checked 項目為選擇性 ) <input type=radio name= 欄位名稱 value= 值 checked=checked> 字串 # 下拉式選單 <select name= 欄位名稱 > <option value= 值 > 字串 1</option> <option value= 值 > 字串 2</option> </select> # 文字區塊 <textarea name= 欄位名稱 cols= 寬度 rows= 高度 > 內容 </textarea> * 練習 : 將下列資料儲存為 dataselect.html 檔, 於瀏覽器開啟 <!DOCTYPE html> <html> <title> 資料選擇 </title> <meta charset=utf-8> </head> <body> <p> 會員管理系統 </p> <form action=# method=post> <!-- 目前尚無後端程式 --> <p> 帳號 :<br> <input type=text name=account value=student> </p> <p> 密碼 :<br> <input type=password name=password value=1234> </p> <p> <input type=checkbox name=rememberme value=true checked=checked> 記住我的密碼 </p> <p><strong> 性別 </strong>: <input type=radio name=sex value= 男 > 男 <input type=radio name=sex value= 女 checked=checked> 女 </p> <p><strong> 生日 </strong>: <select name=year> <option>2010</option> <option>2011</option> <option>2012</option> 2-12
</select> 年 <select name=month> <option>1</option> <option>2</option> <option>3</option> </select> 月 <select name=day> <option>1</option> <option>2</option> <option>3</option> </select> 日 </p> <p><strong> 備註 </strong>:<br> <textarea name=memo cols=50 rows=5></textarea> </p> <p><input type=submit name=login value= 登入 ></p> </form> </body> </html> 2-13