HTML 入門 - 前端工程開發實務訓練

Copyright © 2012 FITPI. All rights reserved.
基本架構 HTML
前端工程開發實務訓練 (1/8)
講師：蔣定宇 / josephj
1

2
是所有前端技術的基礎、建構起大樓的鋼筋
HTML, 一點都不簡單

3
HTML 是什麼？

๏ 超文字標記語言 HyperText Markup Language
3
HTML 是什麼？

❖ 純文字檔，附檔名 .html, .htm 皆可
3
HTML 是什麼？

❖ 網頁上所有的構成元素都可以用標籤 <.../>
配合「屬性」、撰寫出來
3
HTML 是什麼？

๏ 用「連結」將文件、甚至整個網際網路串連
起來
3
HTML 是什麼？

๏ 用「連結」將文件、甚至整個網際網路串連
起來
๏ 網際網路上最多的「文件」。
3
HTML 是什麼？

4
觀念 1 - 語意網頁

4
Semantic

4
你的 HTML 必須是有意義、可被閱讀的
Semantic

http://fgps.tcc.edu.tw/~jon/jon.htm
5
沒有語意的網頁
看起來很普通的一個網頁，你會怎麼寫？

6
用 FrontPage 做的網頁，有很多不必要的原始碼

7

甚⾄至完全無法從原始碼了解網⾴頁的構成
7

8
有語意的網頁

從原始碼就可以看出基本的結構
8
有語意的網頁

9
兩者的差異點

๏ 沒有語意的 HTML，使用 <table/>（表
格）做排版，但表格應該使用在資料的呈
現、而非排版。
9
兩者的差異點

๏ 沒有語意的 HTML，在原始碼中充滿了樣式
（顏色、粗細、寬度、字型）
9
兩者的差異點

๏ 沒有語意的 HTML，在原始碼中充滿了樣式
（顏色、粗細、寬度、字型）
๏ 有語意的 HTML：使用適合的標籤、完全不
管樣式。
9
兩者的差異點

10
有語意的好處

๏ 容易維護、除錯
10
有語意的好處

๏ 檔案較小、速度快
10
有語意的好處

๏ 專業
10
有語意的好處

๏ 專業
๏ 不需要安裝所見及所得的軟體即可撰寫
10
有語意的好處

๏ 專業
๏ 不需要安裝所見及所得的軟體即可撰寫
๏ 有助於搜尋引擎最佳化
10
有語意的好處

11

HTML
11

HTML
CSS
11

HTML
CSS
JavaScript
11

HTML
CSS
JavaScript
負責
樣式
11

HTML
CSS
JavaScript
負責
樣式
11
負責
結構

HTML
CSS
JavaScript
負責
樣式
11
負責
結構負責
⾏行為

12
如何做到 Semantic

๏ 徹底了解每個 HTML 標籤的意義、不使用
樣式類的標籤及屬性
12

๏ HTML 如今只定義結構
12

❖ 樣式由 CSS 、特效由 JavaScript 負責
12

❖ 樣式由 CSS 、特效由 JavaScript 負責
๏ 鼓勵大家手寫 HTML，這樣才會去思考頁面
的原始碼、也不會變笨。
12

13
漸進式支援
http://sixrevisions.com/web-development/progressive-enhancement/
Progressive Enhancement

13
漸進式支援
・一種由下而上的設計理念

13
漸進式支援
・先製作結構化的內容

13
漸進式支援
・再製作樣式層

13
漸進式支援
・再製作行為層

13
漸進式支援
・呈現結果以裝置的支援程度來決定

13
漸進式支援
・呈現結果以裝置的支援程度來決定
・不管怎樣都能使用

14
開始來寫 HTML 吧

了解標籤與屬性
15

15
๏ HTML 是由許多「標籤」 (Tag) 所構成

15
❖ 語法：<標籤名稱>標籤內容</標籤名稱>

15
❖ 範例：<h1>網頁標題</h1>

15
๏ 每個標籤會有不同的「屬性」 (Attribute)

15
❖ 語法：<標籤名稱屬性名稱=”屬性值”>標籤內容</標籤名稱>

15
❖ 範例：<a href=”http://tw.yahoo.com”>Yahoo! 奇摩</a>

15
๏ 不會顯示的「註解」（備註或暫時不用)

15
๏ 不會顯示的「註解」（備註或暫時不用)
❖ 語法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>這裡放標題</title>
</head>
<body>

</body>
</html>
16
了解 HTML 文件結構

16
此為文件宣告，你所要使用的文件類型
不可省略，不然必定會帶來一些問題<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>

16
<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>
代表裡面為 HTML 的內容

16
<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>
不需顯示出來的內容，例如編碼、分頁
的標題、作者、關鍵字等。

16
不需顯示出來的內容，例如編碼、分頁
的標題、作者、關鍵字等。
<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>

16
<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>
實際會出現在瀏覽器中的內容。

16
<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>1 天學會 HTML</title>
</head>
<body>
    <h1>1 天學會 HTML</h1>
    <p>HTML 學起來真的很簡單</p>
    <h2>HTML 的基礎知識</h2>
    <p>這裡將說明最基礎的知識。⾸首先...</p>
    <h3>關於元素與屬性</h3>
    <p>所謂元素</p>
</body>
</html>
17
標題
<h1>...</h1>

17
標題
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <p>所謂元素</p>
</body>
</html>
<h1>...</h1>

17
標題
๏ h = heading, 標題
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <p>所謂元素</p>
</body>
</html>
<h1>...</h1>

17
標題
๏ 一本書、一篇文章、一篇部落
格，必定有它的標題層次
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <p>所謂元素</p>
</body>
</html>
<h1>...</h1>

17
標題
๏ 使用 <h1> ~ <h6> 來表示這些
標題層次
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <p>所謂元素</p>
</body>
</html>
<h1>...</h1>

17
標題
標題層次
๏ h1 是此文件標題
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <p>所謂元素</p>
</body>
</html>
<h1>...</h1>

17
標題
標題層次
๏ 可以清楚地顯示結構
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <p>所謂元素</p>
</body>
</html>
<h1>...</h1>

17
標題
標題層次
๏ 可以清楚地顯示結構
๏ SEO 很重要的點！
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <p>所謂元素</p>
</body>
</html>
<h1>...</h1>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <p>所謂元素</p>
</body>
</html>
18
段落
<p>...</p>
一段一段的內文

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <p>所謂元素</p>
</body>
</html>
18
段落
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <p>所謂元素</p>
</body>
</html>
<p>...</p>

18
段落
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <p>所謂元素</p>
</body>
</html>
<p>...</p>

19
標題與段落

19
標題與段落
h1

19
標題與段落
h1
p

19
標題與段落
h1
h2
p

19
標題與段落
h1
h2
p
p

19
標題與段落
h1
h2
h2
p
p

20
強調
<em></em>
em 的英文是 emphasize, 即為強調的意思。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>如果學 HTML，但不了解 <em>Semantic 的意義</em>，那等於⽩白學。</p>
</body>
</html>
20
強調
<em></em>
em 的英文是 emphasize, 即為強調的意思。

21
更強調
<strong></strong>

21
更強調
<strong></strong>
與 em 有程度上的差別，用在非常重要的強調

21
更強調
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
如果學 HTML，但不了解 <strong>Semantic 的意義</strong>，
那等於⽩白學。
</p>
</body>
</html>
<strong></strong>
與 em 有程度上的差別，用在非常重要的強調

22
連結
<a href=”網址”>連結字樣</a>

22
連結
串連起網際網路的最重要標籤！

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <p>
  如果學 HTML，但不了解 Semantic 的意義，那等於⽩白學。
  來<a href=”http://josephj.com/”>啊嗚的部落格</a>學習成⻑⾧長吧！
  </p>
</body>
</html>
22
連結

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <p>
  如果學 HTML，但不了解 Semantic 的意義，那等於⽩白學。
  來<a href=”http://josephj.com/”>啊嗚的部落格</a>學習成⻑⾧長吧！
  </p>
</body>
</html>
22
連結
屬性說明屬性值
href 連結網址 <自訂連結網址>
target 連結要開啟位置 _blank, _top, _self, <name>
title 提示訊息 <自訂訊息內容>

23
圖片
<img src=”圖片網址” alt=”備註說明”>

23
圖片
讓網頁不只是文字

<img src=”http://farm4.staticflickr.com/3468/3359753828_a7aec51c35.jpg” alt=”Yahoo!紀念照”>
23
圖片

<img src=”http://farm4.staticflickr.com/3468/3359753828_a7aec51c35.jpg” alt=”Yahoo!紀念照”>
23
圖片
屬性說明
src 圖片網址
alt 破圖時的說明
width 圖片寬度
height 圖片高度

24
無順序的清單

24
無順序的清單
<ul>...</ul>

24
無順序的清單
<ul>...</ul> ul 為 Unordered List (無順序清單)

跑步環島身上裝備
Nike 運動帽
太陽眼鏡
Dphiten 鈦項圈
Nike Dry Fit 吸溼排汗衣
Nike 緊身褲
護手
Casio 電子表
護膝
Nike 慢跑襪
Adidas 慢跑鞋
Sony Cybershot 相機
Dakine 單車水袋背包
24
無順序的清單

<h2> </h2>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
跑步環島身上裝備
Nike 運動帽
太陽眼鏡
Dphiten 鈦項圈
Nike Dry Fit 吸溼排汗衣
Nike 緊身褲
護手
Casio 電子表
護膝
Nike 慢跑襪
Adidas 慢跑鞋
Sony Cybershot 相機
Dakine 單車水袋背包
24
無順序的清單

每⽇日⾏行程
4:00 起床盥洗、熱⾝身、吃 (Energy-in + 巧克⼒力棒⼀一條)
5:00 等待 GPS 定位好、相機拿在右⼿手、出發
5:00 ~ 10:00 跑步(依路途⻑⾧長短, 也有跑到快中午的)
11:00 ~ 12:00 抵達旅館、吃完早餐、盥洗完畢，洗⾐衣服晾乾
13:00 ~ 16:00 上網，更新部落格及照⽚片、找當地有什麼好吃的
16:00 ~ 19:00 當地趴趴⾛走, 覓⻝⾷食, 玩
19:00 ~ 21:00 將明⽇日會經過的道路寫在⼩小筆記本上
21:30 就寢
25
有順序的清單

<h2>每⽇日⾏行程</h2>
<ol>
<li>4:00 起床盥洗、熱⾝身、吃 (Energy-in + 巧克⼒力棒⼀一條)</li>
<li>5:00 等待 GPS 定位好、相機拿在右⼿手、出發</li>
<li>5:00 ~ 10:00 跑步(依路途⻑⾧長短, 也有跑到快中午的) </li>
<li>11:00 ~ 12:00 抵達旅館、吃完早餐、盥洗完畢，洗⾐衣服晾乾</li>
<li>13:00 ~ 16:00 上網，更新部落格及照⽚片、找當地有什麼好吃的</li>
<li>16:00 ~ 19:00 當地趴趴⾛走, 覓⻝⾷食, 玩</li>
<li>19:00 ~ 21:00 將明⽇日會經過的道路寫在⼩小筆記本上</li>
<li>21:30 就寢</li>
</ol>
每⽇日⾏行程
4:00 起床盥洗、熱⾝身、吃 (Energy-in + 巧克⼒力棒⼀一條)
5:00 等待 GPS 定位好、相機拿在右⼿手、出發
5:00 ~ 10:00 跑步(依路途⻑⾧長短, 也有跑到快中午的)
11:00 ~ 12:00 抵達旅館、吃完早餐、盥洗完畢，洗⾐衣服晾乾
13:00 ~ 16:00 上網，更新部落格及照⽚片、找當地有什麼好吃的
16:00 ~ 19:00 當地趴趴⾛走, 覓⻝⾷食, 玩
19:00 ~ 21:00 將明⽇日會經過的道路寫在⼩小筆記本上
21:30 就寢
25
有順序的清單
<ol>...</ol>
ul 為 Ordered List (有順序的清單)

Orz
失意體前屈，原本是日本網路上流行的表情符號：＿|￣|○。它看起來像是一個人跪
倒在地上，低著頭，一副「天啊，为什么是这样」的動作，雖然簡單卻很傳神。
冏
原名臉部表情異常緊縮暫時即性症候群，是一種源自於網路象形文字(或心情圖示)，
腦殘帝國為其發源地，儼然已經成為一種新興的網路文化。
26
定義清單
<dl>...</dl>
dl 為 Definition List (定義清單) 的縮寫
dt 為 Definition Title (定義標題)的縮寫
dd 為 Definition Description (定義描述)的縮寫

Orz
失意體前屈，原本是日本網路上流行的表情符號：＿|￣|○。它看起來像是一個人跪
倒在地上，低著頭，一副「天啊，为什么是这样」的動作，雖然簡單卻很傳神。
冏
原名臉部表情異常緊縮暫時即性症候群，是一種源自於網路象形文字(或心情圖示)，
腦殘帝國為其發源地，儼然已經成為一種新興的網路文化。
26
定義清單
<dl>...</dl>
dl 為 Definition List (定義清單) 的縮寫
<dl>
<dt> </dt>
<dd>
</dd>
<dt> </dt>
<dd>
</dd>
</dl>
dt 為 Definition Title (定義標題)的縮寫
dd 為 Definition Description (定義描述)的縮寫

⼩小筆電⽐比較表
⼯工⼈人舍（120G + 1G RAM） Eee PC（8G + 1G RAM）
配備： Intel 800MHz / 120G HDD / 1G RAM Intel Mobile / 8G HDD (Flash) / 1G RAM
價錢： 29,900 14,490
系統： Vista XP
攝影機： 130 萬 30 萬（不⽀支援上網 Web 視訊）
⿆麥克⾵風：有有
藍芽：有無
轉⼿手性：⾼高低
27
表格

<h3> </h3>
<table>
<tr>
<th></th><th>⼯工⼈人舍（120G + 1G RAM </th><th> Eee PC（8G + 1G RAM）</th>
</tr>
<tr>
<th>配備：</th><td>Intel 800MHz / 120G HDD / 1G RAM</td><td>Intel Mobile / 8G HDD (Flash) / 1G RAM</td>
</tr>
<tr>
<th>價錢：</th><td>29,900</td><td>14,4 90</td>
</tr>
<tr>
<th>系統：</th><td>Vista </td><td>XP</td>
</tr>
<tr>
<th>攝影機：</th><td>130 萬</td><td>30 萬（不⽀支援上網 Web 視訊）</td>
</tr>
<tr>
<th>⿆麥克⾵風：</th><td>有 </td><td>有</td>
</tr>
<tr>
<th>藍芽：</th><td>有 </td><td>無</td>
</tr>
<tr>
<th>轉⼿手性：</th><td>⾼高 </td><td>低</td>
</tr>
</table>
價錢： 29,900 14,490
系統： Vista XP
藍芽：有無
27
表格

<h3> </h3>
<table>
<tr>
<th></th><th>⼯工⼈人舍（120G + 1G RAM </th><th> Eee PC（8G + 1G RAM）</th>
</tr>
<tr>
<th>配備：</th><td>Intel 800MHz / 120G HDD / 1G RAM</td><td>Intel Mobile / 8G HDD (Flash) / 1G RAM</td>
</tr>
<tr>
<th>價錢：</th><td>29,900</td><td>14,4 90</td>
</tr>
<tr>
<th>系統：</th><td>Vista </td><td>XP</td>
</tr>
<tr>
<th>攝影機：</th><td>130 萬</td><td>30 萬（不⽀支援上網 Web 視訊）</td>
</tr>
<tr>
<th>⿆麥克⾵風：</th><td>有 </td><td>有</td>
</tr>
<tr>
<th>藍芽：</th><td>有 </td><td>無</td>
</tr>
<tr>
<th>轉⼿手性：</th><td>⾼高 </td><td>低</td>
</tr>
</table>
價錢： 29,900 14,490
系統： Vista XP
藍芽：有無
27
<table>...</table>
๏ 表格不能用來排版
๏ 類似 Excel 所存放的資料
表格


  <a href=”about.html”>關於作者</a>
  <a href=”forum.php”>討論區</a>

  <h1>這樣做就對了</h1>
  <p>歡迎來到 josephj.com，這裡與您分享前端的技術。<p>
28
換行區塊

  <div>
  </div>
  <div>
  </div>


28
換行區塊
<div>...</div>
Division, 將相關的 HTML 做群組化、將不相關 HTML 的做隔離

2011：
開始在 miiiCasa Inc. ⼯工作
29
單行區塊

<span>2011：</span>
<span>開始在 miiiCasa Inc. ⼯工作</span>
2011：
開始在 miiiCasa Inc. ⼯工作
29
單行區塊
<span>...</span>
與 div 相似是用來區分的，但是不會換行

<pre><code>
YUI_config = {
logInclude : {
     "ID3": true
    }
};
if (typeof console !== "undefined") {
console.log = function (m, t, s) {
     s = s || null;
        if (!s) {
        return false;
     }
        console.log(m, t, s)
    }
}
</code><pre>
30
讓結構更清楚的小秘訣
一段程式碼該如何表示呢？

30
Preserve，保留空白與換行
<pre>
YUI_config = {
logInclude : {
     "ID3": true
    }
};
     s = s || null;
        if (!s) {
        return false;
     }
    }
}
</pre>

30
標籤組合
<pre><code>
YUI_config = {
logInclude : {
     "ID3": true
    }
};
     s = s || null;
        if (!s) {
        return false;
     }
    }
}
</code><pre>
程式碼

<ol class="bibliography">
<li>
<cite>
"Colorimetry, Second Edition", CIE Publication 15.2-1986,
ISBN 3-900-734-00-3.
</cite>
</li>
<li>
<cite>
"Cascading Style Sheets, level 1", H. W. Lie, B. Bos,
17 December 1996.
</cite>
</li>
<li>
<cite>
"Cascading Style Sheets, level 2, CSS2 Specification",
B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998
</cite>
</li>
</ol>
31
書目 (bibliography) 可用 <ol/> 表現，但光這樣無法這就是「書目清單」

<li>
<cite>
ISBN 3-900-734-00-3.
</cite>
</li>
<li>
<cite>
17 December 1996.
</cite>
</li>
<li>
<cite>
</cite>
</li>
</ol>
31
class="bibliography"
class 屬性

<li>
<cite>
ISBN 3-900-734-00-3.
</cite>
</li>
<li>
<cite>
17 December 1996.
</cite>
</li>
<li>
<cite>
</cite>
</li>
</ol>
31
class="bibliography"
class 屬性
很清楚定義了「書⺫⽬目清單」

32
更清楚地表達結構與內容

32
更清楚地表達結構與內容
標籤組合 + class 屬性
<pre><code class=”javascript”>
YUI_config = {
logInclude : {
     "ID3": true
    }
};
     s = s || null;
        if (!s) {
        return false;
     }
    }
}
</code><pre>
更清楚地表明了是
哪一種程式語言

撰寫時注意事項
33

33
๏ 標籤與屬性名稱需一律小寫

33
๏ 屬性值需要用雙引號 “ 做包覆

33
๏ 特定標籤不應結尾 (非 XHTML)

33
❖ 例如 <br>, <link>, <img>
不應寫成 <br/>, <link/>, <img/>

33
๏ 可任意空格或換行

33
❖ 製作階層關係，可提昇維護性。

33
❖ 製作階層關係，可提昇維護性。
✦ 換行與 Tab (4 個 Space)。

34
課堂練習
http://f2eclass.com/lab/html/history.html
將連結中的文章，套上 HTML 所需結構與標籤

34
課堂練習
๏ 10 分鐘

34
課堂練習
๏ 10 分鐘
๏ 會用到的標籤：
h1, h2, ul, li, p, pre, code, em

34
課堂練習
๏ 10 分鐘
๏ 記得善用 class 與組合來輔助

34
課堂練習
๏ 10 分鐘
๏ 記得善用 class 與組合來輔助
๏ 存檔在桌面 history.html

35
建議閱讀文章

๏ W3Schools - HTML References
所有 HTML 標籤列表
http://www.w3schools.com/tags/default.asp
35
建議閱讀文章

๏ The Elements of Meaningful XHTML
有意義的 (X)HTML 標籤
http://tantek.com/presentations/2005/09/elements-of-xhtml/
35
建議閱讀文章

๏ The Elements of Meaningful XHTML
有意義的 (X)HTML 標籤
http://tantek.com/presentations/2005/09/elements-of-xhtml/
๏ Bring on the tables
Table 的正確使用法
http://www.456bereastreet.com/archive/200410/bring_on_the_tables/
35
建議閱讀文章

HTML 模組
36
偷偷告訴你 Yahoo! 是怎麼寫網頁的

頁是由許多模組構成
依照一個完整的結構化功能切分模組，是所謂模組化開發
37

<div id=”nav”>
<div class=”hd”>
<h2>標題</h2>
</div>
<div class=”bd”>
<p>內⽂文</p>
</div>
<div class=”ft”>
<a href=”...”>更多... </a>
</div>
</div>
38
標準模組結構

<div id=”nav”>
<h2>標題</h2>
</div>
<p>內⽂文</p>
</div>
<a href=”...”>更多... </a>
</div>
</div>
<div id=”nav”>
<h2>標題</h2>
</div>
<p>內⽂文</p>
</div>
<a href=”...”>更多... </a>
</div>
</div>
38
標準模組結構

<div id=”nav”>
<h2>標題</h2>
</div>
<p>內⽂文</p>
</div>
<a href=”...”>更多... </a>
</div>
</div>
<div id=”nav”>
<h2>標題</h2>
</div>
<p>內⽂文</p>
</div>
<a href=”...”>更多... </a>
</div>
</div>
id 代表一個模組，
不能重複使用。
38
標準模組結構

<div id=”nav”>
<h2>標題</h2>
</div>
<p>內⽂文</p>
</div>
<a href=”...”>更多... </a>
</div>
</div>
<div id=”nav”>
<h2>標題</h2>
</div>
<p>內⽂文</p>
</div>
<a href=”...”>更多... </a>
</div>
</div>
id 代表一個模組，
不能重複使用。
.hd, .bd, .ft 代表
模組的頭、身體、尾巴
38
標準模組結構

此模組叫 #ykpsb
#ykp 是專案縮寫、sb 是 Search Box 的縮寫
39
標準模組結構

<div id=”ykpsb”>
<div class=”bd clearfix”>
<form ...>
...
</form>
<div class=”extra”>
...
</div>
</div>
</div>
form .extra
[HTML]
此模組叫 #ykpsb
39
標準模組結構

<div id=”ykpsb”>
<div class=”bd clearfix”>
<form ...>
...
</form>
<div class=”extra”>
...
</div>
</div>
</div>
form .extra
[HTML]
<style>
#ykpsb {
margin-bottom:10px;
}
#ykpsb form {
float:left;
}
#ykpsb .extra {
float:right;
}
</style>
[CSS]
此模組叫 #ykpsb
39
標準模組結構

練習：HTML 模組
http://f2eclass.com/lab/html/module.html
1.替此文章模組取個適合的 id
2.加上 hd, bd, ft 的 class
3.利用前頁的方法設定 CSS
color:#369;
background:#ffe;
font:bold 16px;
40

搜尋引擎最佳化
41
SEO
Search Engine Optimization

41
SEO
提昇自己網站在搜尋引擎的排名

41
SEO
「教召」關鍵字第⼆二名

41
SEO
๏ 是一門很深的學問

41
SEO
๏ 正確的 HTML 讓
你贏在起跑點

41
SEO
๏ 正確的 HTML 讓
你贏在起跑點
๏ 方便搜尋引擎蒐集
資料

42

๏ title 標籤必須是本頁的標題
42

❖ title 的內容通常也是 h1 的內容
42

๏ 妥善規劃 h1 - h6 標籤的使用
42

๏ 越重要的內容、應盡早在 HTML 中出現
42

๏ 適當的使用 em, strong 等標籤
42

๏ 適當的使用 em, strong 等標籤
๏ 避免使用 table 做排版
42

43
無障礙網頁 Accessibility

沒有螢幕的工程師
43

沒有螢幕的工程師
43
HTML 寫的好與壞，跟弱勢族群息息相關

44
課堂練習 - 照片模組
http://f2eclass.com/lab/html/list.phps

44
๏ 請使用前面教的模塊結構

44
๏ 利用 ul, li 呈現

44
๏ 存檔在 C:AppServwww 下

44
๏ 附檔名改為 .php

44
๏ http://localhost/list.php

表單
๏ <input> - 輸入欄位
❖ 屬性 name
❖ 屬性 type="text"
❖ 屬性 type="password"
❖ 屬性 type="radio"
❖ 屬性 type="checkbox"
❖ 屬性 type="submit"
❖ 屬性 placeholder= "..."
๏ <textarea/> - 換行輸入
๏ <select/> - 下拉選單
❖ 從屬標籤 <option/>
✦ 屬性 value
๏ <label/>
❖ 屬性 for
๏ fieldset - 表單分區
๏ legend - 表單分區標題
45
將頁面上的資料傳送給伺服器 (留言、註冊...)

46
課堂練習 - 存檔表單
http://f2eclass.com/lab/html/save_form.phps

46

46
๏ 善用表單標籤 input

46

46
๏ http://localhost/save_form.php

47
Q & A

HTML 入門 - 前端工程開發實務訓練

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to HTML 入門 - 前端工程開發實務訓練 (20)

More from Joseph Chiang (20)

HTML 入門 - 前端工程開發實務訓練

Editor's Notes