網頁設計

第 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)：

clientserver

▸ 客戶端(Client)：使用者利用瀏覽器存取網路資源，並將相關資訊傳送給伺服器

✶ 客戶端相關技術：瀏覽器, HTML, CSS, JavaScript, ...

▸ 伺服器端(Server)：提供網路資源服務，接收使用者資訊並負責大多數的運算

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

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

frontend

▸ 前端設計師：頁面樣式設計

✶ 視覺效果, 網頁佈局, UI/UX, 影像處理, 繪圖, 藝術, 風格, ...

▸ 前端工程師：實作頁面樣式設計

✶ HTML, CSS, JavaScript, CSS 預處理器, CSS 框架, API, AJAX, JSON, JavaScript 框架,...
✶ 也可能包括網站架設與內容管理系統的導入 (Content management system, CMS)

▸ 交集：HTML, CSS, JavaScript

✶ 前端設計師可以不具備，但前端工程師則必備

(4) 網頁基礎及結構

∗ 基本 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 等

▸ 安裝 Brackets 網頁編輯器：至 Brackets 官網 http://brackets.io/ 下載以下安裝檔並安裝

✶ Ubuntu：Brackets.Release.x.x.64-bit.deb
✶ Windows：Brackets.Release.x.x.msi
✶ Mac：Brackets.Release.x.x.dmg
→ 以上 x 為版本數字

▸ 註：Ubuntu 亦可利用 PPA 安裝 (此方式較好，版本會自動更新)

$ sudo add-apt-repository ppa:webupd8team/brackets
$ sudo apt update
$ sudo apt install brackets

▸ 設定 Brackets

✶ 設定中文繁體介面：Debug → Switch Language → 繁體中文 → Reload Brackets
✶ 選擇字型：檢視 → 佈景主題 → 可設定目前的佈景主題與字體大小：14px，字體 (選等寬字體)：
# Ubuntu：DejaVu Sans Mono
# MS Windows：Consolas
✶ 設定縮排 (spaceUnits) 為 2 個空格，停用智慧縮排 (SmartIndent) 與 JavaScrit 語法錯誤偵測 (lintint.enabled)
# 在 Brackets 裡，點選 「除錯」 → 「開啟喜好設定檔」 (或：Debug → Open Preferences File) 即可編輯 brackets.json 設定檔，在最後加入
{
    ...,
    "spaceUnits": 2,
    "smartIndent": false,
    "linting.enabled": false
}
# 註：原先最後一行後面要加逗點，加入後的最後一行沒有逗點

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

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

∗ 規劃目錄架構

▸ 首先在使用者家目錄下建立名為 webdesign 的工作區目錄，以便儲存所有練習程式檔案：

✶ Ubuntu：/home/<username>/webdesign
✶ Windows：C:\Users\<username>\webdesign
✶ Mac：/Users/<username>/webdesign
→ 以上 <username> 指的是登入作業平台的使用者名稱

▸ 目錄架構：在 webdesign 目錄下再建立其他子目錄

webdesign/
  css/
  img/
✶ 最上層目錄為 webdesign，用來置放 HTML 檔案
✶ 子目錄可有多個：例如 css/ 與 img/ 等，前者置放 CSS 檔案，後者置放影像檔案

▸ 接下來啟動 Brackets 並移到目的資料夾

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

∗ HTML5 文件基本架構

▸ 建立新檔案：

檔案 → 新增 → ctrl-s → 選擇 <...>/webdesign/ 目錄，檔名：simplest.html → 儲存，輸入以下內容：
<!doctype html>
<html>
<head>
<title>Simplest page</title>
<meta charset="utf-8">
</head>
<body>
<p>最簡單的網頁</p>
</body>
</html>
✶ 啟動 Brackets 的網站伺服器 (右上角閃電符號)，即可觀察網頁呈現結果：網址為 127.0.0.1:xxxxxx/simplest.html

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

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

▸ 瀏覽器忽略 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>
主要 <main> 總結 <summary> 章節 <section>
頁尾 <footer> 文章 <article> 地址 <address>
重要 <strong> 縮寫 <abbr> 刪除字 <del>
強調 <em> 引文來源 <cite> 插入字 <ins>
引用文字 <blockquote> 文字定義 <dfn> 不正確字 <s>
引用短文 <q>

▸ 例如利用語意標籤進行網頁佈局

<header>
<nav>
<aside> <section>
<article>
<footer>

▸ 練習：將 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>
dessert1-3

(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=... >

▸ src：來源 (Source)，影像檔來源

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

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

✶ 使用正確的影像尺寸：過大則影響傳輸效率，過小則畫質不佳
✶ 應在伺服器端就做好影像尺寸調整，不要在客戶端做
✶ 常用影像格式：jpg, png, gif
# 拍攝之影像：使用 jpg
# 以電腦軟體產生之影像或影像有透明部份：使用 png
# 有動畫功能之影像：使用 gif
✶ 參考：網站影像處理常見問題及解決方案
✶ 通常在 HTML 檔案所在目錄中，建立子目錄 img/ 來存放影像，亦可直接連結其他網站的影像，例如：
<img src="https://www.google.com.tw/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google">

▸ 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><br>

</body>
</html>

▸ 作業 1

(10) 表單

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

▸ 表單結構

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

▸ method：GET 或 POST

▸ 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> 標籤之前，加入以下表單：

...
</table>
<br><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="favorite">
        <option value="vanilla">香草</option>
        <option value="peach">蜜桃</option>
        <option value="apple">蘋果</option>
        <option value="chocolate">巧克力</option>
        <option value="butter">鮮奶油</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>, <ol>, <li>, <div>, <header>, <nav>, <aside> <blockquote>, <section>, <article>, ...

▸ 範例 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>

▸ 區塊元素可包含區塊元素或行內元素，行內元素可包含行內元素，但行內元素不可包含區塊元素。 有些區塊元素不可包含區塊元素 (例如 <p>)

(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 為音訊檔

▸ 除了 width 、 height 、 poster 屬性之外， <audio> 標籤和 <video> 標籤的使用方式一樣

▸ 練習：

✶ 下載 avatar.jpg, avatar.ogv, avatar.mp4, 18_and_life.ogg, 18_and_life.mp3 等檔案， 影像、視訊、及音訊檔分別放在 img, film 及 music 子目錄
✶ 將 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

(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>