Slide 1

Slide 1 text

講給設計師聽的 HTML Sammy

Slide 2

Slide 2 text

不要聽到HTML就怕

Slide 3

Slide 3 text

愛他可以不用背他

Slide 4

Slide 4 text

HTML是什麼？ ‧超文件標示語言（英文：HyperText Markup Language，HTML）

Slide 5

Slide 5 text

HTML是什麼？ ‧超文件標示語言（英文：HyperText Markup Language，HTML）做簡報之前我還不知道全名是什麼 orz

Slide 6

Slide 6 text

純文字檔，副檔名為.htm .html

Slide 7

Slide 7 text

所有的元素都是由標籤組成

Slide 8

Slide 8 text

了解正確的觀念

Slide 9

Slide 9 text

語意化 semantic

Slide 10

Slide 10 text

沒語意化

Slide 11

Slide 11 text

沒語意化完全看不懂呀.....

Slide 12

Slide 12 text

有話意化

Slide 13

Slide 13 text

有話意化可以⽐比較清楚知道網⾴頁架構

Slide 14

Slide 14 text

差在哪？

Slide 15

Slide 15 text

差在哪？ • 沒語意化HTML，就是醜爆了！

Slide 16

Slide 16 text

差在哪？ • 沒語意化HTML，就是醜爆了！ • 沒語意化HTML，在原始碼裡充滿了樣式 (顏⾊色、⼤大⼩小、字型...還有更多噁⼼心的東⻄西)

Slide 17

Slide 17 text

差在哪？ • 沒語意化HTML，就是醜爆了！ • 沒語意化HTML，在原始碼裡充滿了樣式 (顏⾊色、⼤大⼩小、字型...還有更多噁⼼心的東⻄西) • 有語意化的HTML，使⽤用適當的標籤，不放噁⼼心的東⻄西。

Slide 18

Slide 18 text

差在哪？ • 沒語意化HTML，就是醜爆了！ • 沒語意化HTML，在原始碼裡充滿了樣式 (顏⾊色、⼤大⼩小、字型...還有更多噁⼼心的東⻄西) • 有語意化的HTML，使⽤用適當的標籤，不放噁⼼心的東⻄西。 • 有語意化的HTML，更好被Google搜尋到

Slide 19

Slide 19 text

有語意化的好處

Slide 20

Slide 20 text

有語意化的好處 • 容易維護、DeBug

Slide 21

Slide 21 text

有語意化的好處 • 容易維護、DeBug • 檔案⼩小、速度快

Slide 22

Slide 22 text

有語意化的好處 • 容易維護、DeBug • 檔案⼩小、速度快 • 可以不⽤用⼀一定要⽤用frontpage、 dreamweaver來做網⾴頁

Slide 23

Slide 23 text

有語意化的好處 • 容易維護、DeBug • 檔案⼩小、速度快 • 可以不⽤用⼀一定要⽤用frontpage、 dreamweaver來做網⾴頁 • ⽐比較容易搜尋

Slide 24

Slide 24 text

有語意化的好處 • 容易維護、DeBug • 檔案⼩小、速度快 • 可以不⽤用⼀一定要⽤用frontpage、 dreamweaver來做網⾴頁 • ⽐比較容易搜尋 • 看起來帥氣專業

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

結構

Slide 27

Slide 27 text

結構樣式

Slide 28

Slide 28 text

結構樣式⾏行為

Slide 29

Slide 29 text

怎麼語意化?

Slide 30

Slide 30 text

怎麼語意化? • 由HTML來定義結構

Slide 31

Slide 31 text

怎麼語意化? • 由HTML來定義結構 • 由CSS來負責樣式

Slide 32

Slide 32 text

怎麼語意化? • 由HTML來定義結構 • 由CSS來負責樣式 • 由JavaScript來負責特效

Slide 33

Slide 33 text

HTML的組成

Slide 34

Slide 34 text

HTML的組成 • 由很多標籤(tag)組成的

Slide 35

Slide 35 text

HTML的組成 • 由很多標籤(tag)組成的 • 語法：<標籤名稱>內容

Slide 36

Slide 36 text

HTML的組成 • 由很多標籤(tag)組成的 • 語法：<標籤名稱>內容 • 範例：

今天天氣好

Slide 37

Slide 37 text

HTML的組成 • 由很多標籤(tag)組成的 • 語法：<標籤名稱>內容 • 範例：

今天天氣好

• 每個標籤可以有屬性(Attribute)

Slide 38

Slide 38 text

HTML的組成 • 由很多標籤(tag)組成的 • 語法：<標籤名稱>內容 • 範例：

今天天氣好

• 每個標籤可以有屬性(Attribute) • 語法：<標籤名稱屬性名稱=’屬性值’>內容

Slide 39

Slide 39 text

HTML的組成 • 由很多標籤(tag)組成的 • 語法：<標籤名稱>內容 • 範例：

今天天氣好

• 每個標籤可以有屬性(Attribute) • 語法：<標籤名稱屬性名稱=’屬性值’>內容 • 範例：前往Google

Slide 40

Slide 40 text

HTML的組成 • 由很多標籤(tag)組成的 • 語法：<標籤名稱>內容 • 範例：

今天天氣好

• 每個標籤可以有屬性(Attribute) • 語法：<標籤名稱屬性名稱=’屬性值’>內容 • 範例：前往Google • 註解(在網⾴頁看看不到)

Slide 41

Slide 41 text

HTML的組成 • 由很多標籤(tag)組成的 • 語法：<標籤名稱>內容 • 範例：

今天天氣好

• 每個標籤可以有屬性(Attribute) • 語法：<標籤名稱屬性名稱=’屬性值’>內容 • 範例：前往Google • 註解(在網⾴頁看看不到) • 範例：

Slide 42

Slide 42 text

了解HTML結構標題

Slide 43

Slide 43 text

了解HTML結構標題此為HTML5⽂文件宣告，不可省略

Slide 44

Slide 44 text

了解HTML結構標題 HTML的內容

Slide 45

Slide 45 text

了解HTML結構標題不會出現在網⾴頁的內容，例如編碼、作者、關鍵字、標題...等。

Slide 46

Slide 46 text

了解HTML結構標題不會出現在網⾴頁的內容，例如編碼、作者、關鍵字、標題...等。

Slide 47

Slide 47 text

了解HTML結構標題實際會出現在網⾴頁的內容

Slide 48

Slide 48 text

標題

...

快快樂樂學HTML

什麼是HTML

HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）

HTML的基本知識

blablabla....

HTML的觀念

就是要合乎語意化

Slide 49

Slide 49 text

標題

...

快快樂樂學HTML

什麼是HTML

HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）

HTML的基本知識

blablabla....

HTML的觀念

就是要合乎語意化

Slide 50

Slide 50 text

標題

...

快快樂樂學HTML

什麼是HTML

HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）

HTML的基本知識

blablabla....

HTML的觀念

就是要合乎語意化

• h = heading, 標題的意思

Slide 51

Slide 51 text

標題

...

快快樂樂學HTML

什麼是HTML

HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）

HTML的基本知識

blablabla....

HTML的觀念

就是要合乎語意化

• h = heading, 標題的意思 • 書、⽂文章必有標題的層次

Slide 52

Slide 52 text

標題

...

快快樂樂學HTML

什麼是HTML

HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）

HTML的基本知識

blablabla....

HTML的觀念

就是要合乎語意化

• h = heading, 標題的意思 • 書、⽂文章必有標題的層次 • 使⽤用h1~h6來標⽰示

Slide 53

Slide 53 text

標題

...

快快樂樂學HTML

什麼是HTML

HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）

HTML的基本知識

blablabla....

HTML的觀念

就是要合乎語意化

• h = heading, 標題的意思 • 書、⽂文章必有標題的層次 • 使⽤用h1~h6來標⽰示 • h1就是⽂文件的標題

Slide 54

Slide 54 text

標題

...

快快樂樂學HTML

什麼是HTML

HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）

HTML的基本知識

blablabla....

HTML的觀念

就是要合乎語意化

• h = heading, 標題的意思 • 書、⽂文章必有標題的層次 • 使⽤用h1~h6來標⽰示 • h1就是⽂文件的標題 • 可以清楚了解結構

Slide 55

Slide 55 text

標題

...

快快樂樂學HTML

什麼是HTML

HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）

HTML的基本知識

blablabla....

HTML的觀念

就是要合乎語意化

• h = heading, 標題的意思 • 書、⽂文章必有標題的層次 • 使⽤用h1~h6來標⽰示 • h1就是⽂文件的標題 • 可以清楚了解結構 • SEO很重要的地⽅方

Slide 56

Slide 56 text

段落

....

快快樂樂學HTML

什麼是HTML

HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）

HTML的基本知識

blablabla....

HTML的觀念

就是要合乎語意化

Slide 57

Slide 57 text

段落

....

快快樂樂學HTML

什麼是HTML

HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）

HTML的基本知識

blablabla....

HTML的觀念

就是要合乎語意化

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

Slide 61

Slide 61 text

Slide 62

Slide 62 text

h1 h2

Slide 63

Slide 63 text

h1 h2

Slide 64

Slide 64 text

h1 h2 p

Slide 65

Slide 65 text

h1 h2 p

Slide 66

Slide 66 text

h1 h2 p p

Slide 67

Slide 67 text

強調 .... em = emphasize 快快樂樂學HTML

什麼是HTML

HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）

HTML的基本知識

blablabla....

HTML的觀念

就是要合乎語意化

Slide 68

Slide 68 text

快快樂樂學HTML

什麼是HTML

HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）

HTML的基本知識

blablabla....

HTML的觀念

就是要合乎語意化

強調 .... em = emphasize

Slide 69

Slide 69 text

更強調 .... 與em有程度的差別，更強調的意思快快樂樂學HTML

什麼是HTML

HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）

HTML的基本知識

blablabla....

HTML的觀念

就是要合乎語意化

Slide 70

Slide 70 text

更強調 .... 與em有程度的差別，更強調的意思快快樂樂學HTML

什麼是HTML

HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）

HTML的基本知識

blablabla....

HTML的觀念

就是要合乎語意化

Slide 71

Slide 71 text

連結連結字樣快快樂樂學HTML

什麼是HTML

HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）

HTML的基本知識

blablabla....

HTML的觀念

就是要合乎語意化

如果需要參考請到Google搜尋

Slide 72

Slide 72 text

連結連結字樣快快樂樂學HTML

什麼是HTML

HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）

HTML的基本知識

blablabla....

HTML的觀念

就是要合乎語意化

如果需要參考請到Google搜尋

Slide 73

Slide 73 text

圖⽚片

Slide 74

Slide 74 text

圖⽚片

⾼高度說明 src 圖⽚片網址 alt 破圖時的⽂文字 title 提⽰示⽂文字 width 寬度 height 屬性

Slide 75

Slide 75 text

無順序的清單

unordered list HTML Result

Slide 76

Slide 76 text

有順序的清單

ordered list HTML Result

Slide 77

Slide 77 text

表格 table HTML Result

名單

編號姓名電話 001 ⿈黃⼩小⺠民 097644324 002 林⼤大同 0212313041

Slide 78

Slide 78 text

表格 table HTML Result

名單

編號姓名電話 001 ⿈黃⼩小⺠民 097644324 002 林⼤大同 0212313041

Slide 79

Slide 79 text

表格 table HTML Result

名單

編號姓名電話 001 ⿈黃⼩小⺠民 097644324 002 林⼤大同 0212313041

Slide 80

Slide 80 text

表格 table HTML Result

名單

編號姓名電話 001 ⿈黃⼩小⺠民 097644324 002 林⼤大同 0212313041 •不要拿table來排版

Slide 81

Slide 81 text

表格 table HTML Result

名單

編號姓名電話 001 ⿈黃⼩小⺠民 097644324 002 林⼤大同 0212313041 •不要拿table來排版 •類似Excel來存放資料

Slide 82

Slide 82 text

換⾏行區塊 division

...

把相關的HTML，群組化，不相關的隔離

這是連結⼀一

這是連結⼆二

Slide 83

Slide 83 text

換⾏行區塊 division

...

把相關的HTML，群組化，不相關的隔離

這是連結⼀一

這是連結⼆二

Slide 84

Slide 84 text

單⾏行區塊 span ... 跟div⼀一樣是區分HTML，但是不會換⾏行這是連結⼀一這是連結⼆二

Slide 85

Slide 85 text

單⾏行區塊 span ... 跟div⼀一樣是區分HTML，但是不會換⾏行這是連結⼀一這是連結⼆二

Slide 86

Slide 86 text

注意

Slide 87

Slide 87 text

注意 • 標籤與屬性都要⼀一律⼩小寫

Slide 88

Slide 88 text

注意 • 標籤與屬性都要⼀一律⼩小寫 • 屬性值需要⽤用雙引號” 包覆

Slide 89

Slide 89 text

注意 • 標籤與屬性都要⼀一律⼩小寫 • 屬性值需要⽤用雙引號” 包覆 • 特定標籤不應結尾(⾮非XHTML)

Slide 90

Slide 90 text

注意 • 標籤與屬性都要⼀一律⼩小寫 • 屬性值需要⽤用雙引號” 包覆 • 特定標籤不應結尾(⾮非XHTML) • 例如:
, ,

Slide 91

Slide 91 text

注意 • 標籤與屬性都要⼀一律⼩小寫 • 屬性值需要⽤用雙引號” 包覆 • 特定標籤不應結尾(⾮非XHTML) • 例如:
, , • 可以任意空⽩白、換⾏行

Slide 92

Slide 92 text

注意 • 標籤與屬性都要⼀一律⼩小寫 • 屬性值需要⽤用雙引號” 包覆 • 特定標籤不應結尾(⾮非XHTML) • 例如:
, , • 可以任意空⽩白、換⾏行 • 製作階層關係，可以提⾼高維護性

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

看到想吐了....

Slide 96

Slide 96 text

練習 • 連結：http://goo.gl/mEeFx • 建⽴立test1.html，把內容貼上 • 10分鐘 • 會⽤用到的連結： • h1, h2, ul, li, p, em

Slide 97

Slide 97 text

• 解答 http://goo.gl/lJu38 練習

Slide 98

Slide 98 text

參考 • 本簡報資料⼤大部分來⾃自於 • http://www.slideshare.net/josephj/ html-14701114

Slide 99

Slide 99 text

Q&A 簡報網址： http://goo.gl/OnXW6