網頁設計

第 1 章    HTML

(1) HTML 簡介

∗ HTML

▸ 超文件標示語言 (Hypertext markup language, HTML)

✶ 說明網頁意義的語言

▸ HTML 的歷史

✶ 1991:HTML 出現
✶ 1995:HTML2,簡單(醜陋)的網頁格式顯示
✶ 1997:HTML3.2, HTML4.0
✶ 1999:HTML4.01
# HTML3 與 HTML4 期間,人們及企業開始嚴肅看待網際網路,希望網頁看來美觀,各家瀏覽器激烈競爭,各自發展獨家且不相容的 HTML, 跨平台 HTML 之撰寫非常困難
✶ 2000:XHTML1.0
# 2000 – 2005:CSS 已明確定義,但各家瀏覽器對於 CSS 之支援各自不同,同一瀏覽器的前後版本也可能不相容, 跨平台 HTML 及 CSS 之撰寫還是有大問題
# 2005 – 2008:所有瀏覽器對於 CSS 都可支援,唯獨 IE 5 是當時普遍使用但對 CSS 支援很差的瀏覽器
✶ 2011:HTML5
# W3C 停止發展 XHTML,HTML5 成為未來主流
# 2009 以後:可以放心假設所有瀏覽器對於 CSS 都有很好的支援(IE 6、IE 7 例外),HTML 與 CSS 熬了 18 年終於步上正軌

∗ HTML5 的由來

▸ 2004 年,W3C 決定放棄 HTML,改而支持以 XML 為基礎的 XHTML 技術

▸ 來自 Apple、Mozilla、與 Opera 等之社群人士則成立 Web Hypertext ApplicationTechnology Working Group (WHATWG) 工作小組,分庭抗禮繼續發展 HTML

▸ 2007 年 4 月,Apple、Mozilla、與 Opera 提議 W3C 之下的新的 HTML 工作小組應採用 WHATWG 所提出的 HTML5

▸ 2007 年 5 月,W3C 的 HTML 工作小組同意,於是 HTML5 成為發展主流,XHTML 將走入歷史

▸ 2014 年 10 月,W3C 正式推出 HTML5 標準

(2) Web 系統

∗ Web 系統 (Web system, Web-based system) 包含兩部份:

▸ 網頁設計 (Web design):網頁頁面之製作,又稱為客戶端設計 (Client-side design)、瀏覽器端設計 (Browser-side design)、 或前端設計 (Front-end design)

▸ Web 程式設計 (Web programming):網站之應用程式設計,又稱為伺服器端程式設計 (Server-side programming) 或後端程式設計 (Back-end programming)

∗ Web 系統使用主從式架構 (Client/server architecture):2 層式 (Two-tier)

clientserver

▸ 客戶端(Client):存取網路資源,利用使用者介面收集使用者資訊並傳送給伺服器

✶ 客戶端相關技術:HTML, CSS, JavaScript, ...

▸ 伺服器端(Server):提供網路資源服務,接收使用者資訊、將送給使用者的文件格式化、並負責大多數的運算

✶ 伺服器端相關技術:伺服器軟體 (Apache, Nginx, MS IIS, ...)、伺服器端程式語言 (PHP, ASP.NET, JSP, Java, Python, Ruby, Perl, ...)、資料庫管理系統(MySQL, Postgres, Oracle, MS SQL, ...)

(4) 前端主要工作與技術

frontend

▸ 前端工作

✶ 前端設計師:頁面樣式設計
# 佈局, UI/UX, 影像處理, 繪圖, 風格制定, ...
✶ 前端工程師:實作頁面設計
# 前端框架, CSS 預處理器, AJAX, JSON, API, ...
# 也可能包括網站架設與內容管理系統的導入 (Content management system, CMS)
✶ 前端設計與工程的交集:HTML, CSS, RWD, JavaScript, jQuery

(4) 網頁基礎及結構

∗ 電子文件

▸ 辦公室文件 (.doc, .xls, .ppt, .odt, .ods, .odp, ...):格式與內容均可編輯

▸ PDF 文件:格式與內容不可編輯

▸ HTML 文件:格式與內容均可編輯,有格式顯示標準及傳輸協定

∗ HTML 文件

▸ 超文件標示語言 (Hypertext markup language, HTML):用來產生網頁的標示語言

▸ 網頁也稱為 HTML 頁 (HTML page) 或 HTML 文件 (HTML document)

▸ 標示語言 (Markup language):利用一群符號來標示一份文件應如何顯示

▸ 超文件標示語言是根據標準一般標示語言 (Standard generalized markup language,SGML) 所衍生而來

▸ HTML 檔案的副檔名應為 .html

∗ 基本 HTML 語法

▸ HTML 文件為文字檔,內含格式化指令稱為標籤 (Tag),用來決定資料該如何顯示

▸ 標籤功能:顯示文字特殊效果 (例如粗體、斜體)、使用者可點選的控制元件 (例如點選框)、 顯示多媒體資料 (例如影像、音訊、視訊)

✶ 開始標籤由小於符號 (<)、標籤、及大於符號 (>) 組成, 例如 <p> 為段落 (Paragraph) 開始標籤
✶ 結束標籤由小於符號 (<)、斜線 (/)、 標籤、及大於符號 (>)組成,例如 </p> 為段落結束標籤
✶ 要顯示 <> 字元需使用 &lt; (less than) 與 &gt; (greater than)

▸ 開始標籤、結束標籤、及其所包含的文字整體稱為元素 (Element),所包含文字稱為內容 (Content),例如: <p>這是一個段落</p> 是一個段落元素,其內容為 這是一個段落

▸ 標籤屬性 (Tag attribute)

✶ 在標籤中加上屬性,可進一步設定標籤特性,例如:<meta charset="utf-8"> (字元編碼為 UTF-8)

▸ 有些元素不需要結束標籤,稱為空元素 (Empty element),例如橫線 <hr> (Horizontal rule),斷行 <br> (Break),影像 <img src=...>

∗ 以文字編輯器來產生 HTML 文件

▸ HTML 文件及 CSS 都是純文字檔,常用的文字編輯器: Sublime Text 3, Brackets, Atom, Bluefish, notepad++, Gedit

▸ 在 Ubuntu 安裝 Brackets:兩種方式

1. 利用 Ubuntu PPA (此方式較好,版本會自動更新)
$ sudo add-apt-repository ppa:webupd8team/brackets
$ sudo apt update
$ sudo apt install brackets
2. 下載安裝檔:http://brackets.io/,再進行安裝

▸ 在 Windows 或 Mac 安裝 Brackets:

✶ 下載安裝檔:http://brackets.io/,再進行安裝

▸ 設定 Brackets

✶ 設定中文繁體介面:Debug → Switch Language → 繁體中文 → Reload Brackets
✶ 選擇字型:檢視 → 佈景主題 → 字體大小:14px,字體 (選等寬字體):
# Ubuntu:DejaVu Sans Mono
# MS Windows:Consolas
✶ 設定按下 Tab 鍵的結果是輸入 2 個空白,而不是定位鍵
# 點選右下方設定:最後呈現「空白字元:2」
# 註:在空白處移動游標時,看起來還是一次移動 2 格 (感覺上還是輸入了定位鍵), 這是 Brackets 的智慧功能,一次跳至所設定空白字元的數量
✶ 因為 Brackets 的智慧縮排一點也不智慧,且 JavaScrit 語法錯誤偵測 (JsLint) 也不好用,因此將兩個都停用
# 在 Brackets 裡,點選 「除錯」 --> 「開啟喜好設定檔」 (或:Debug --> Open Preferences File) 即可編輯 brackets.json 設定檔,在最後加入 2 行
{
    "brackets-eslint.gutterMarks": true,
    .
    .
    ...,
    "smartIndent": false,
    "linting.enabled": false
}
# 註:原先最後一行後面要加逗點,加入後的最後一行沒有逗點

▸ 亦有「所見即所得」(What you see is what you get, WYSIWYG) 編輯器

✶ 例如:MS Word (另存 HTML 新檔)、Dreamweaver、KompoZer 等,此類編輯器操作方便但所產生的樣式格式不當, 所儲存的檔案也很大,不利於網路傳輸,因此不建議使用
✶ 主要平台常用的 HTML 編輯器: Linux, Windows, Mac

∗ 規劃專案目錄架構

webDesign/
  css/
  img/
  example1.html
  example2.html

▸ 最上層目錄為 webDesign (以 Ubuntu 作業系統為例, 可以設在 /home/<username>/目錄之下,其中 <username> 是登入的使用者名稱)

✶ 可包含多個子目錄:例如 css/img/ 等,前者置放 CSS 檔案,後者置放影像檔案

▸ 註:本教材的目錄架構主要以 Ubuntu 作業系統的表示法為主,在 Windows 系統中的目錄則以反斜線 (\) 表示

▸ 建立專案目錄架構,啟動 Brackets 並移到目的資料夾

檔案 → 開啟資料夾 → 選擇 <...>/webDesign/ 目錄 → 開啟

∗ HTML5 文件基本架構

▸ 建立新檔案:

檔案 → 新增 → ctrl-s → 選擇 <...>/webDesign/ 目錄,檔名:simplest.html → 儲存,輸入以下內容:
<!doctype html>
<html>
<head>
<title>最簡單的網頁</title>
<meta charset="utf-8">
</head>
<body>
<p>最簡單的網頁</p>
</body>
</html>

▸ HTML 基本架構包含 <!doctype html><html><head> ,及 <body>

<!doctype html> 宣告本文件為 HTML 文件型態,提供瀏覽器辨識
<html> 為根元素 (Root element),根元素包含所有其他元素
<head> 元素緊跟在 <html> 標籤之後,稱為文件標頭 (Document head),包含:
# <title> 元素在視窗標題區呈現標題
# <meta charset="utf-8"> 元素說明檔案的編碼方式 (utf-8 為主流)
<body> 元素緊跟在 <head> 元素之後, 稱為文件本體 (Document body)
phaserLogo

▸ 瀏覽器忽略 HTML 文件中的空行,亦忽略多於一個的連續空白

▸ HTML 的標籤不分大小寫,因此 <br> 亦可用 <BR> 代替,但習慣上均以小寫為主

▸ 可利用各種屬性 (Attribute) 來設定 HTML 元素的特性,屬性放在標籤之後, 其語法為:attribute="value"

✶ 例如利用 src (Source) 屬性在 HTML 文件中插入一影像: <img src="myPicture.jpg" alt="My picture">
✶ 屬性值的雙引號可以省略 (但並非主流),但如果屬性有許多值 (亦即內含空白),就必須要有雙引號,例如: <div style="width:200px; margin:0 auto;">

▸ 當瀏覽器開啟一份 HTML 文件時,瀏覽器依據標籤指示來組合及格式化文件內容,此程序稱為解析 (Parsing) 或呈現 (Rendering), 例如將文字以粗體呈現:

<p>本段落裡的<strong>重點</strong>在瀏覽器中以粗體字呈現。</p>

(5) 文字呈現

∗ 文字標籤 (Text markup)

標題 (Header):<h1>, <h2>, ..., <h6> 段落 (Paragraph):<p> 粗體 (Boldface):<b>
斜體 (Italic):<i> 底線 (Underline):<u> 上標 (Superscript):<sup>
下標 (Subscript):<sub> 斷行 (Break):<br> 橫線 (Horizontal rule):<hr>
空白 (Non-breakable space):&nbsp;

▸ 練習:建立 dessert1-1.html 檔案,輸入下列資料並以瀏覽器觀看

<!doctype html>
<html>
<head>
<title>甜點商店</title>
<meta charset="utf-8">
</head>
<body>
<h1>甜點商店</h1>
<p>我們製作最精美、最有創意、最健康的各式甜點</p>
<hr>
<h2>您要什麼甜點?</h2>
<p>餅乾和糕點:每份 50 元</p>
<p>蛋糕和派:每份 75 元</p>
<p>美食巧克力:每份 100 元</p>
<br>
<h2>開店時間</h2>
<p>
  星期一到星期四,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>
<br>
<h2>付款方式</h2>
<p>現金,自動櫃員機,信用卡,美國運通,發現卡,大來卡</p>
<br>
</body>
</html>
phaserLogo

∗ 語意標籤 (Semantic markup)

▸ HTML5 使用語意標籤來描述文件的意義,有利於文件分析以及無障礙網頁

頁首 <header> 導航 <nav> 側欄 <aside>
頁尾 <footer> 文章 <article> 地址 <address>
重要 <strong> 縮寫 <abbr> 刪除字 <del>
強調 <em> 引文來源 <cite> 插入字 <ins>
引用文字 <blockquote> 文字定義 <dfn> 不正確字 <s>
引用短文 <q>

▸ 練習:將 dessert1-1.html 另存為 dessert1-2.html 並如下修改:

...
<header>
  <h1>甜點商店</h1>
  <p>我們製作最精美、最有創意、最健康的各式甜點</p>
</header>
...
<p>餅乾和糕點:<s>每份 50 元</s>&nbsp;&nbsp;<ins>每份 45 元</ins></p>
<p>蛋糕和派:每份 75 元</p>
...
<p>美食巧克力:每份 100 元</p>
<p>什麼叫<dfn>蛋糕</dfn>? --> 雞蛋+麵粉+功夫+愛心</p>
<br>
<h2>顧客的陳述:</h2>
<blockquote>
  這家店甜點的口味實在太棒了,每當我從辛苦的工作崗位下來,我一定來嚐嚐各種口味,
  享受獨特的餐廳氣氛,讓我一天的辛勞都拋到九霄雲外。
</blockquote>
<br>
<h2>開店時間</h2>
...<br><strong>星期日,中午 -- 9:00 p.m.</strong>
</p>
...
<br>
<address>地址:台中市中區台灣大道 1 號</address>
<br>
</body>
</html>
phaserLogo

(6) 清單

∗ 清單 (List)

▸ 有序清單 (Ordered list)

<ol>
  <li> ... </li>
  <li> ... </li>
  ...
</ol>
✶ 編號:<ol type="1 | a | A | i | I"> (註:建議不使用此屬性,改為使用 CSS 設定)

▸ 無序清單(Unordered list)

<ul>
  <li> ... </li>
  <li> ... </li>
  ...
</ul>
✶ 項目符號:<ul type="disc | circle | square"> (註:建議不使用此屬性,改為使用 CSS 設定)

▸ 定義清單 (dl: definition list, dt: definition term 項目, dd: definition description 描述)

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
  <dt> ... </dt>
  <dd> ... </dd>
   ...
</dl>

▸ 練習:將 dessert1-2.html 另存為 dessert1-3.html 並如下修改:

...
<h2>您要什麼甜點?</h2>
<ol>
  <li>餅乾和糕點:<s>每份 50 元</s> <ins>每份 60 元</ins></li>
  <li>蛋糕和派:每份 75 元</li>
  <li>美食巧克力:每份 100 元</li>
</ol>
<dl>
  <dt>什麼叫蛋糕?</dt>
  <dd>雞蛋+麵粉+功夫+愛心</dd>
</dl>
...
<h2>開店時間</h2>
<ul>
  <li>星期一到星期四,7:45 a.m. -- 9:45 p.m.</li>
  <li>星期五,7:45 a.m. -- 4:30 p.m.</li>
  <li>星期六,9:00 a.m. -- 4:00 p.m.</li>
  <li><strong>星期日,中午 -- 9:00 p.m.</strong></li>
</ul>
<br>
phaserLogo

(7) 連結

∗ 連結 (Link)

<a href=...> ... </a>

<a> :anchor (定錨)

href :Hypertext reference (超文件參考)

▸ 練習:將 dessert1-3.html 另存為 dessert1-4.html 並如下修改:

...
<address>總店地址:台中市中區台灣大道 1 號</address>
<p>分店:</p>
<ul>
  <li><a href="http://taipeishop.com">台北店</a></li>
  <li><a href="http://hsinchushop.com">新竹店</a></li>
  <li><a href="http://tainanshop.com">台南店</a></li>
  <li><a href="http://kaohsungshop.com">高雄店</a></li>
</ul>
phaserLogo

(8) 影像

∗ 影像 (Image)

<img src=... alt=... title=...>

src:來源 (Source),影像檔來源

alt:替代 (Alternative) 文字,影像如果無法顯示,就以替代文字呈現

title:標題,影像內容說明

▸ 使用網頁影像注意事項:

✶ 使用正確的影像尺寸:過大則影響傳輸效率,過小則畫質不佳
✶ 應在伺服器端就做好影像尺寸調整,不要在客戶端做
✶ 常用影像格式:jpg, png, gif
# 拍攝之影像:使用 jpg
# 以電腦軟體產生之影像或影像有透明部份:使用 png
# 有動畫功能之影像:使用 gif
✶ 參考:網站影像處理常見問題及解決方案
✶ 通常在 HTML 檔案所在目錄中,建立子目錄 img/ 來存放影像

▸ HTML5 標籤:

<figure> (圖片):包含 <img><figcaption>,讓圖片與標題組合起來
<figcaption>:圖片標題 (Figure caption)

▸ 練習:

✶ 在 webDesign 目錄中,建立子目錄 img/
✶ 下載 dessert.jpg 影像檔案並置於 img/ 目錄中
dessert image
✶ 將 dessert1-4.html 另存為 dessert1-5.html 並如下修改:
...
<body>
<header>
...
</header>
<hr>
<h2>甜點樣式</h2>
<figure>
<img src="img/dessert.jpg" alt="甜點影像"><br>
<figcaption>本店使用高級材料來製作甜點,保證吃得安全、吃得營養、吃得開心。</figcaption>
</figure>
<br>
<h2>您要什麼甜點?</h2>
dessert 1-5

▸ 以上指定路徑的方式 (img/dessert.jpg) 均使用「相對路徑」(Relative path), 不要使用「絕對路徑」(Absolute path),例如:/home/m514/桌面/img/dessert.jpg, 否則換了環境頁面就無法正常呈現

(9) 表格

∗ 表格 (Table)

▸ 以儲存格的方式顯示資料

▸ 基本結構: <table>, <tr>, <th>, <td>

<table border="1">
<tr>
  <th></th>
  <th>星期六</th>
  <th>星期日</th>
</tr>
<tr>
  <td>售出票卷</td>
  <td>120</td>
  <td>135</td>
</tr>
<tr>
  <td>總收入</td>
  <td>NT$60,000</td>
  <td>NT$67,500</td>
</tr>
</table>
註:不建議使用 border="1" 之屬性,應使用 CSS 樣式設定

▸ 儲存格縱向合併:<td rowspan="<合併的格數>">

<table border="1">
  <tr>
    <td>左上</td>
    <td rowspan="2">右</td>
  </tr>
  <tr>
    <td>左下</td>
  </tr>
</table>

▸ 儲存格橫向合併:<td colspan="<合併的格數>">

<table border="1">
  <tr>
    <td>左上</td>
    <td>右上</td>
  </tr>
    <tr>
    <td colspan="2">下</td>
  </tr>
</table>

▸ HTML5 建議表格格線、格線寬度及顏色、儲存格背景顏色、儲存格寬度等均在 CSS 中設定

▸ 練習:將 dessert1-5.html 另存為 dessert1-6.html 並如下修改:

<address>總店地址:台中市中區台灣大道 1 號</address>
<p>分店:</p>
<table border="1">
  <tr>
    <th>分店</th>
    <th>地址</th>
    <th>電話</th>
  </tr>
  <tr>
    <td><a href="http://taipeishop.com">台北店</a></td>
    <td>台北市士林區台北路 1 號</td>
    <td>(02) 1234-5678</td>
  </tr>
  <tr>
    <td><a href="http://hsinchushop.com">新竹店</a></td>
    <td>新竹縣新竹市新竹路 1 號</td>
    <td>(03) 1234-5678</td>
  </tr>
  <tr>
    <td><a href="http://tainanshop.com">台南店</a></td>
    <td>台南市台南路 1 號</td>
    <td>(06) 1234-5678</td>
  </tr>
  <tr>
    <td><a href="http://kaohsungshop.com">高雄店</a></td>
    <td>高雄市高雄路 1 號</td>
    <td>(07) 1234-5678</td>
  </tr>
</table>
<br>
</body>

* 作業 1

(10) 表單

∗ 表單 (Form):用於收集使用者的輸入資訊

▸ 表單結構

<form method=... action=... >
...
</form>

method:GETPOST

action:伺服器端網址

▸ 例如:

<p>註冊會員</p>
<form method="post" action="#">
  帳號:<input type="text" name="account"><br>
  密碼:<input type="password" name="password"><br>
  <input type="submit" value="送出">
</form>

∗ 何時使用 GET 或 POST?

▸ GET:可直接在瀏覽器的 URL 欄位中輸入指令而執行

✶ 傳送的資料沒有安全疑慮 (資料會顯示在 URL 中)
✶ 傳送的資料不會改變伺服器資料的狀態 (不寫入資料)

▸ POST:無法直接在瀏覽器的 URL 欄位中輸入指令而執行

✶ 傳送的資料有安全考慮 (資料不會顯示在 URL 中,但資料攔截者還是可以取出)
✶ 傳送的資料會改變伺服器資料的狀態 (會寫入資料)

▸ 最安全的傳輸方式:https:// (所有資料均加密)

∗ 表單欄位 (Field)

▸ 文字輸入 (Text input):<input type="text" name=...>

▸ 密碼輸入 (Password input):<input type="password" name=...>

▸ 文字區塊 (Text area):<textarea rows=... cols=...> ... </textarea>

▸ 單選項 (Radio choice):

<input type="radio" name=... value=... checked> ...
<input type="radio" name=... value=...> ...
<input type="radio" name=... value=...> ...
✶ 以上各項 name 的值必須相同,checked 是預設選項

▸ 選擇框 (Check box):

<input type="checkbox" name=... value=...> ...
<input type="checkbox" name=... value=... checked> ...
<input type="checkbox" name=... value=...> ...
✶ 以上各項 name 的值必須相同,checked 是預設選項

▸ 下拉式選擇框 (Drop-down select box)

<select name=...>
  <option value=...> ... </option>
  <option value=...> ... </option>
  <option value=... selected> ... </option>
  <option value=...> ... </option>
</select>
selected 是預設選項

▸ 上載檔案 (Upload)

<form ... enctype="multipart/form-data">
<input type="file" value=...>

▸ 按鈕 (Button)

<button> ... </button>

▸ 電子信箱 (Email)

<input type="email" name=...>

▸ 數字 (Number)

<input type="number" name=...>

▸ 必填 (Required)

<input type=... name=..." required>

▸ 日期輸入選擇器 (Date picker)

<input type="date" name=...>

▸ 送出表單 (Submit)

<input type="submit" value=...>

∗ 單選或複選框加上標籤 (Label)

▸ 將單選或複選框輸入控制項以 <label> 標籤包住,例如:

<label><input type="radio" name="sex" value="F"> 女性</label>
<label><input type="radio" name="sex" value="M"> 男性</label>

▸ 有了 <lable> 標籤,使用者可以點擊控制項,也可點擊文字,增加許多便利性

∗ 群組表單元素

▸ 可以將相關的表單元素包含在欄位集 <fieldset> 中,冗長繁複的表單看起來較為簡潔

▸ 大部分的瀏覽器會在欄位集元素外圍加上方框,以表示這些欄位同屬一個群組

▸ 通常在 <fieldset> 標籤之下加上 <legend>, 亦即欄位集說明

▸ 例如:

<fieldset>
  <legend>聯絡細節</legend>
  <p>電子信箱:<input type="email" name="email"></p>
  <p>手機:<input type="text" name="mobile"></p>
  <p>電話:<input type="text" name="telephone"></p>
</fieldset>

∗ 練習

▸ 將 dessert1-6.html 另存為 dessert1-7.html 並如下修改:

▸ 在 </body> 標籤之前,加入以下表單:

...

<br>
<form method="post" action="#"> <!-- 目前尚無後端程式 -->
  <fieldset>
    <legend>註冊會員</legend>
    <p>帳號:<input type="text" name="account" required></p>
    <p>密碼:<input type="password" name="password" required></p>
    <p><label><input type="checkbox" name="rememberme" value="True" checked>記住我的密碼</label></p>
    <p>性別:
    <label><input type="radio" name="sex" value="female" checked>女</label>
    <label><input type="radio" name="sex" value="male">男</label></p>
    <p>程式語言偏好:
    <select name="progLanguage">
      <option value="python">Python</option>
      <option value="java">Java</option>
      <option value="cpp">C++</option>
      <option value="ruby">Ruby</option>
      <option value="javascript">JavaScript</option>
      <option value="php">PHP</option>
    </select></p>
    <p>備註:<br>
    <textarea name="memo" cols="50" rows="5"></textarea></p>
    <p><input type="submit" value="送出"></p>
  </fieldset>
</form>
<br><br>
</body>
</html>

* 作業 2

(11) HTML 元素分類

∗ HTML元素可分為行內元素 (Inline element) 與區塊元素 (Block element) 兩類

∗ 行內元素

▸ 行內元素的特性就像文字 (無法設定寬度及高度),可左右接續排列,例如:<a>, <img>, ...

▸ 有些行內元素的目的在於標示文字,以便進行樣式或功能設定,例如:<b>, <em>, <span>, <i>, ...

▸ 範例 1:

<p>
<b>Cake (蛋糕)</b>這個字眼的由來有很長的歷史,最早來自於<a
href="http://en.wikipedia.org/wiki/Vikings">維京人</a>,<a
href="http://en.wikipedia.org/wiki/Norse">古斯堪的納維亞語
(Old Norse)</a>的單字"<strong>kaka</strong>"。
</p>
phaserLogo

▸ 範例 2:利用 <span> 標示文字,之後即可透過 CSS 設定樣式

<p>這就是本店蛋糕<span id="charming">如此迷人</span>的解答!</p>

∗ 區塊元素

▸ 區塊元素的特性就像方框,其目的在於建立網頁的「結構」,將網頁內容分割為許多區塊

▸ 預設一定會從新行開始,相鄰區塊由上往下排列

▸ 預設寬度等於其環境的寬度,高度則為其內容所產生的高度

▸ 例如:<hn>, <p>, <ul>, <li>, <div>, ...

▸ 區塊元素可包含其他區塊元素或行內元素,行內元素可包含其他行內元素,但行內元素不可包含區塊元素

▸ 範例 1:

<h1> 蛋糕<img src="img/cake.jpg"> </h1>
<p>蛋糕是一種麵包或類麵包形式的食物,典型的現代蛋糕就是烘烤的甜點,但
早期的蛋糕其實是油炸的麵包或者是起士蛋糕,大多是圓形。要分清楚哪些是麵
包 (Bread)、蛋糕 (Cake)、或者是糕點 (Pastry),可不是件容易的事。</p>
<ol>
  <li>特殊目的的蛋糕</li>
  <li>蛋糕的形狀</li>
  <li>蛋糕的裝飾</li>
</ol>
phaserLogo

▸ 範例 2:利用 <div> 將多個區塊及行內元素組成一個區塊

<div id="cake">
  <h1>蛋糕製作秘方大公開</h1>
  <ul>
    <li><a href="ingredient.html">材料</a></li>
    <li><a href="prepare.html">準備過程</a></li>
    <li><a href="bake.html">烘烤</a></li>
    <li><a href="taste.html">品嚐</a></li>
  </ul>
</div>

(12) 其他標籤

∗ 註解:

<!-- ... -->

▸ 在生產環境 (Production environment) 中,通常將註解全部刪除,以提昇傳輸效率

▸ 移除 HTML 註解: http://jsfiddle.net/DerekL/BUVkS/show/

▸ 網頁速度測試:http://tools.pingdom.com

∗ ID 屬性

▸ 每一個 HTML 元素都可以設定一個 id 屬性,標示其獨一性,例如: <p id="firstParagraph"> ... </p>

▸ 在同一個 HTML 頁面中, id 不得重複

id 值需以英文字母或底線開頭 (建議都是英文字母)

id 屬性讓 CSS 及 JavaScript 能夠針對單一元素進行樣式設定或增加其他功能

∗ Class (類別) 屬性

▸ 每一個 HTML 元素都可以設定一個 class 屬性,標示其屬於某個類別, 例如:<p class="paragraph"> ... </p>

▸ 在同一個 HTML 頁面中,可以設定許多元素屬於相同的 class

class 值需以英文字母或底線開頭 (建議都是英文字母)

class 屬性讓 CSS 及 JavaScript 能夠針對一群元素進行樣式設定或增加其他功能

∗ 行內框架 (Inline frame, iframe)

▸ 嵌入在頁面裡的一個框架,在其中可以看到其他頁面資訊,例如:

<iframe width="800" height="400" src="http://www.charmcitycakes.com/"></iframe>

∗ Meta 元素

<meta> 元素存在 <head> 元素之中,說明該網頁的相關資訊

✶ 網頁作者,網頁內容有效期限 ...
✶ 最常用來說明網頁檔案的編碼方式: <meta charset="utf-8">

∗ 逸出字元 (Escape character)

¢ &cent;     £ &pound;     ¥ &yen;       € &euro;       © &copy;
® &reg;      ä &trade;     × &times;     ÷ &divide;

(13) 視訊與音訊

∗ HTML5 多媒體 (視訊、音訊) 的演進

▸ 在 HTML5 之前,網頁的影音功能主要依賴 Flash (使用率統計)

▸ 此狀況因為 iOS 拒絕支援 Flash 並改採用 HTML5 而大幅改變

∗ 在 HTML5 頁面加入音訊或視訊

▸ 簡單語法:

<audio src=...></audio>
<video src=...></video>

▸ 加入各類屬性,例如:

<video src=... width=... height=... controls autoplay preload="auto" loop poster=...></video>
controls:瀏覽器應提供影音播放控制
autoplay:自動播放
preload:網頁頁面載入時,該做何事?
# none:瀏覽器不要載入影音,由使用者來啟動
# auto:瀏覽器自動載入影音
# metadata:瀏覽器僅需載入所需資訊,例如:檔案大小、第一幀影像、追蹤清單、時間長度等
loop:重複播放
poster:當影音正在下載時或使用者啟動播放之前所需要顯示的影像

▸ 範例:

<video src="demo.mp4" controls autoplay loop preload="auto" poster="demo.jpg">
<audio src="demo.mp3" controls preload="auto">

▸ 目前各瀏覽器支援不同的影音格式,解決之道為提供多種格式選擇

✶ 如果瀏覽器支援某種格式就播放,否則就選擇下一個
✶ 瀏覽器支援視訊格式:http://www.quirksmode.org/html5/tests/video.html
✶ 註:早期 .ogg 適用於音訊及視訊檔,但現在改為 .ogv 為視訊檔, .ogg.oga 為音訊檔

▸ 除了 widthheightposter 屬性之外, <audio> 標籤和 <video> 標籤的使用方式一樣

▸ 練習:

✶ 下載 avatar.jpg, avatar.ogv, avatar.mp4, 18_and_life.ogg, 18_and_life.mp3 等檔案, 影像、視訊、及音訊檔分別放在 img, filmmusic 子目錄
✶ 將 dessert1-7.html 另存為 dessert1-8.html 並如下修改:
...

<video width="640" height="480" controls preload="auto"
poster="img/avatar.jpg">
  <source src="film/avatar.ogv" type="video/ogg">
  <source src="film/avatar.mp4" type="video/mp4">
  您的瀏覽器不支援視訊播放
</video>
<br><br>
<audio controls preload="auto">
  <source src="music/18_and_life.ogg" type="audio/ogg">
  <source src="music/18_and_life.mp3" type="audio/mpeg">
  您的瀏覽器不支援音訊播放
</audio>

</body>
</html>

(14) 瀏覽器對 HTML5 的支援與網頁驗證

∗ HTML5 標籤查閱

▸ 所有標籤說明:HTML 5.3

▸ 過時的標籤或功能:請看這裡

∗ 網頁驗證 (Validating web pages)

▸ 當瀏覽器開啟一份格式不良的網頁時,會忽略錯誤格式並盡可能呈現網頁

▸ 可利用驗證分析器 (Validating parser) 來分析網頁的格式,線上驗證:

✶ W3C Markup validation service:http://validator.w3.org
✶ Web design group (WDG):http://www.htmlhelp.org/tools/validator/

(15) HTML 語法樣式建議

▸ 參考:http://www.w3schools.com/html/html5_syntax.asp

▸ 所有標籤或屬性均使用小寫

不好
<SECTION>
  <p>這是段落。</p>
</SECTION> 
<section>
  <p>這是段落。</p>
</section> 
<!DOCTYPE html><!doctype html> 均可

▸ 縮排:2 個空格

▸ 允許不使用結束標籤 (但目前仍建議使用)

不好
<SECTION>
  <p>這是第一段
  <p>這是第二段
</SECTION>
<section>
  <p>這是第一段</p>
  <p>這是第二段</p>
</section>

▸ 空元素之結束標籤格式

不好
<meta charset="utf-8"/> 
<meta charset="utf-8">

▸ 允許不使用雙引號(但有空格時必須使用)

允許 允許 錯誤
<p class="important"> 
<p class=important> 
<p class=important center>

▸ 影像應使用 alt 屬性 (以備影像無法顯示),且應定義影像尺寸(使瀏覽器預留空間,避免閃爍)

允許
<img class="html5Size" src="html5.png" alt="這是 HTML5 影像">
CSS:
img.html5Size {
  width: 200px;
  height: 200px;
}

▸ 屬性等號左右不要有空格

不好
<meta charset = "utf-8"> 
<meta charset="utf-8">

▸ 每個元素從新行開始

不好
<table>
  <tr><th>標籤名稱</th><th>說明</th></tr>
  <tr><td>table</td><td>表格</td></tr>
</table>
<table>
  <tr>
    <th>標籤名稱</th>
    <th>說明</th>
  </tr>
  <tr>
    <td>table</td>
    <td>表格</td>
  </tr>
</table>

上一章       下一章