Tweet
Tweet

Slide 1

Slide 1 text

H T M L / C S S 獮 ᒒ च 器 拻 ଷ - 1 W W C O D E TA I P E I F E S T U D Y G R O U P Friday, September 9, 2016
 Syntrend 11F
 
 Win.Wu (yiyingwu.1990{{at}}gmail.com)

Slide 2

Slide 2 text

֦ 磪 蕕 翥 蜉 瑊 㻟 ? ! 䋊聜 HTML/CSS ݝ襑ᥝ翥蜉瑊蚤倵薩瑊疰ݢ犥䋊聜牐 ٌ䋿螭磪 google

Slide 3

Slide 3 text

翥 蜉 瑊 https://www.sublimetext.com/ https://atom.io/ http://www.vim.org/

Slide 4

Slide 4 text

֦ 磪 犨 ֜ 㺔 氂 ? ! • 膐ಋ • 扇㺔ۗ硽 • 拻ଷ盅犨֜㺔氂/Ի֢禂
 - no facebook, twitter… other social network
 - Only email: yiyingwu.1990{{at}}gmail.com
 - ֦磪Ի֢禂౯疰䨝ࢧמ • (舙磪犋梊ጱ㺔氂䨝ࣁӥӞ稞拻ଷ獤Ձڊ㬵)

Slide 5

Slide 5 text

虻 碘 ӥ 斉 9/9, 9/23, 9/30, 10/7 ᮷ᥝ᯿碝ӥ斉 http://goo.gl/wC5a6l 蝱獈盅牧讨螡ݦӤ薫 Clone or download
 簁盅螡䢔 Download ZIP

Slide 6

Slide 6 text

䋊 H T M L / C S S ݢ 犥 . . . 肬႕咳疻 http://goo.gl/wC5a6l - Web 樄咳ૡ纷䒍 - 獮ᒒૡ纷䒍 - 䌘 Web ๅԧ薹ጱ翕殷戔懯䒍 ݝ䨝 HTML/CSS 䛑扗ฎ犋ॡ䄪አ....

Slide 7

Slide 7 text

S TA R T _ http://goo.gl/wC5a6l

Slide 8

Slide 8 text

ڡ 誢 涢 
 翕 殷 ฎ ெ 讕 叨 ኞ ጱ ? > w 1 / l a b / t e m p l a t e . h t m l source fron unsplash.com photo by Jay Wennington

Slide 9

Slide 9 text

Before after

Slide 10

Slide 10 text

碝 ी Ӟ 㮆 H T M L 䲆 礯 > w 1 / l a b / ࣁ w1/lab/ ӥ碝ीӞ㮆 index.html 䲆礯牐 • ဳ఺ۅ䲆ݷ傶 .html • 翥蜉 index.html 㪔Ӭے獈犥ӥ(ӥӞ殷ಭ୽粙)
 ጱ HTML 秂壆牧簁盅”ਂ䲆” • 倵薩瑊樄珸 index.html

Slide 11

Slide 11 text

֦ ጱ ᒫ Ӟ 㮆 Ḓ 殷 Document

XXXX胂犩磪褖獍ݪ

Slide 12

Slide 12 text

አ 倵 薩 瑊 嘦 藨 奾 ຎ

Slide 13

Slide 13 text

H T M L 墋 Օ • ፓ獮粚๜ጱ HTML5 • ۅ䲆ݷ .html (盄ԋ犥獮 .htm 犖ฎ蝢...) • 舣෈獊ݷ HyperText Markup Language ᩻෈կ秂纈承᥺
 , ᩻෈ਁ秂懿承᥺... ݱ圵... • 樄咳㻌֖傶 獊純虻懱翕㶧䨝 犥现 WHATWG • 咳疻稲ݥ፡ Wiki • 蕣֢翕殷ጱ秂伛承᥺ (ݢ犥藯秂懿(纈)承᥺牧֕ਙ犋ฎ纷 ୗ承᥺) • 倵薩瑊ݢ犥捝玲 HTML牧㪔疥ٌ獉਻憙憽玕 • ֵአ HTML 奾䯤玕虻懱獉਻

Slide 14

Slide 14 text

H T M L 墋 Օ • HTML 秂懿 (tag) 磪盄ग़圵 (䛑扗犋䨝磪Ո݄಩ਙ胙蚏㬵މ!?) http://www.html-5-tutorial.com/all-html-tags.htm

Slide 15

Slide 15 text

H T M L e l e m e n t ጱ 䯤 ౮ • 秂壆 (tag ) 蝢ଉฎ౮櫕౮䌘ڊ匍牧
 ই

some text

some text

樄 ত 秂 壆 奾 ੲ 秂 壆 ز ᔰ ጱ 獉 ਻ • 磪犚秂壆 (tag)牧䷱磪奾ੲ秂壆牧ই 
 ䷱磪獉਻ጱزᔰ牧݈圸傶绚زᔰ牐 ٌ犢ጱ猟ฎ
, , …

Slide 16

Slide 16 text

H T M L e l e m e n t ጱ 䯤 ౮ • 痀௔አ㬵䌘 Element 蝱ᤈ戔ਧ牧ֺই傶 a 秂壆ਧ嬝
 href 痀௔: google 痀 ௔ ݷ 圸 痀 ௔ 独 • Ӟ㮆秂壆ݢ犥磪ग़圵痀௔牐 • 犋ݶጱ秂壆ݢ犥አጱ痀௔䨝磪犋ݶ牐

Slide 17

Slide 17 text

HTML च๜奾䯤 , , 秂壆 ౮䌘ጱ秂壆

Slide 18

Slide 18 text

HTML ෈կฎኧૠ制ጱ HTML زᔰ奲౮牐 蝢ଉ䨝አ html 秂壆㬵蔭纈෈կጱ獉਻牐 lang 痀௔蔭纈෈կጱ承᥺蘷獨嘨牧耆誢Ӿ෈䨝䌃 zh-TW

Slide 19

Slide 19 text

ૠ制: Ӟ㮆秂壆ݢ犥ٚ۱薟ٌ犢秂壆牧֕磪犚犋ᤈ牐 ই
, 疰篷ဩٚ۱薟ٌ犢秂壆牐

Slide 20

Slide 20 text

෈կ秂懿觊ࣳ ਯޞ粚๜傶 HTML5牧ᥝࣁ HTML ෈կጱᒫӞᤈ牐

Slide 21

Slide 21 text

膏 ԏ樌懿斉殷ᶎ秂氂牧෈կ翥 嘨牧橕棎ਁ缛殷ᶎጱ虻懱虏倵薩瑊犥现矾疨୚砻 Ꭳ螇牐

Slide 22

Slide 22 text

膏 ԏ樌傶䋿褬䨝ᤩ氥纈ጱ獉਻

Slide 23

Slide 23 text

HTML ෈կጱ奾䯤 D O C T Y P E ਯ ޞ h t m l h e a d b o d y

Slide 24

Slide 24 text

Օ 奧 ٌ 犢 ଉ አ H T M L 秂 壆 > w 1 / l a b / i n d e x . h t m l source fron unsplash.com photo by Jay Wennington

Slide 25

Slide 25 text

媣 媲 翥 蜉 i n d e x . h t m l > ( 1 ) 傶 翕 殷 碝 ी f a v i c o n ੜ 瑽 纈 ࣁ 秂壆愊ᶎ牧ے獈 link 秂壆ইӥ: Favorites Icon ጱ婘䌃 <秂壆 痀௔1="独1" 痀௔2="独2"/>

Slide 26

Slide 26 text

媣 媲 翥 蜉 i n d e x . h t m l > ( 2 ) h 1 ~ h 6 秂 氂 秂 壆 • ࣁ 秂壆愊ᶎ • 碝ीӞ奲

牧಑Ӥ獍ݪݷ圸౲ٌ犢 • 2奲

(๐率殻ፓ, 肥妏౯㮉) • 2奲

(Web Design, Marketing Survey)

Slide 27

Slide 27 text

> ( 2 ) h 1 ~ h 6 秂 氂 秂 壆 •

य़秂氂 •

ۅ秂氂 •

ӣ羷秂氂 •

ࢥ羷秂氂 •

Բ羷秂氂 •
م羷秂氂 • 毆戔眐丆ӥ牧hx 羬ڜጱ tag ਁ誢䨝ے罶牧֕犋ᥝࢩ傶 ے罶ᘒֵአ hx 羬ڜጱ秂壆牐 • HTML 疰猟ฎ䌃෈կӞ䰬牧ᥝ磪臑অጱ秂氂蚤ྦྷ苽牧 砰䌃ݳ螕 hx 羬ڜ秂壆磪ۗෝ SEO牐 (盄᯿ᥝ)

Slide 28

Slide 28 text

媣 媲 翥 蜉 i n d e x . h t m l > ( 3 ) p ྦྷ 苽 秂 壆 ࣁ

秂壆ԏ盅牧 碝ीӞ奲 p ྦྷ苽秂壆牧㪔ӬےӤ獉෈牐 http://generator.lorem-ipsum.info/

Slide 29

Slide 29 text

媣 媲 翥 蜉 i n d e x . h t m l > ( 4 ) s t ro n g , b 䔶 藲 ᯿ 讨 獉 ਻ ࣁ㴄㴄 (3) 碝ीጱ獉෈Ӿ牧ತ獋ӣ㮆獉෈㻌ਁ㪔Ӭ ֵአ ౲ᘏ ۱薟蚏㬵牐

Slide 30

Slide 30 text

> ( 4 ) s t ro n g , b 䔶 藲 ᯿ 讨 獉 ਻ • b դ蔭 bold牧㻌奈ے罶ਁ誢 • strong አ㬵䔶藲ৼݙ牧֕ࣁ SEOӤ䨝磪斃ṛጱ稗᯿ • 獋ᘏࣁ “氥纈Ӥ” ䷱磪玟獨牧毆戔᮷䨝氥纈傶罶誢 • 膏 strong 觊犲ጱ螭磪 em 秂壆牧犖ฎአ㬵䔶藲獉਻
 http://stackoverflow.com/questions/1936864/strong-vs-em http://stackoverflow.com/questions/271743/whats-the-difference-between-b-and-strong-i-and-em

Slide 31

Slide 31 text

> ( 5 ) a 秂 壆 አ ෝ 蝫 奾 a 秂壆ጱ皃㮆᯿ᥝጱ痀௔: • 痀௔ href - ஠ऴ牧蝢ଉ独傶翕࣎牧౲ฎ mailto:xxxx
 牧౲ฎ袏讨 (෈獉᪡旉ጱ᩻蝫奾)牐 • 痀௔ target - 蝫奾ڊ݄ጱොୗ牧独ݢ犥傶 _blank
 (target 磪盄ग़圵୵ୗ牧_blank ݝฎٌӞ) 蝫奾෈ਁ

Slide 32

Slide 32 text

媣 媲 翥 蜉 i n d e x . h t m l > ( 5 - 1 ) a 秂 壆 አ ෝ 蝫 奾 ࣁ肥妏౯㮉ጱ h2 秂壆Ӥ牧碝ी痀௔ id 傶 contact ጱ 独牐 <秂壆 痀௔1="独1" 痀௔2="独2"/> http://stackoverflow.com/questions/484719/html-anchors-with-name-or-id

Slide 33

Slide 33 text

媣 媲 翥 蜉 i n d e x . h t m l > ( 5 - 1 ) a 秂 壆 አ ෝ 蝫 奾 ࣁ纸෱碝ीጱ p 愊ᶎ牧磧盅ො 碝ीӞ㮆᩻蝫奾(袏讨) 肥妏౯㮉牧Ӭ讨䢗盅䨝᪡ک肥妏౯㮉玟璸牐 肥妏౯㮉

Slide 34

Slide 34 text

媣 媲 翥 蜉 i n d e x . h t m l > ( 5 - 2 ) a 秂 壆 አ ෝ 蝫 奾 ࣁ h2 ጱ”肥妏౯㮉”ӥො牧碝ीӞ㮆᩻蝫奾牧獉਻
 傶樄珸 Google Map牧㪔Ӭ樄碝憙绯蝫ک google mapḒ殷牐 樄珸 Google Map

Slide 35

Slide 35 text

媣 媲 翥 蜉 i n d e x . h t m l > ( 5 - 3 ) a 秂 壆 አ ෝ 蝫 奾 ( m a i l ) ࣁ樄珸 Google Map ӥො碝ीӞ㮆᩻蝫奾牧
 ֖࣎傶 email牐 ݢ犥蝚螂 subject, body 癲獈Ԇ碫蚤毆戔獉෈: Ӥ抓Ӿ

Slide 36

Slide 36 text

媣 媲 翥 蜉 i n d e x . h t m l > ( 6 ) ֵ አ i f r a m e ્ 獈 ٌ 犢 翕 ᒊ ጱ 獉 ਻ iframe አ㬵્獈ٌ犢 HTML 殷ᶎ牧෱๗አဩ盄皞牧
 蜱皃ଙԆᥝአ㬵્獈ٌ犢ᒫӣොጱ獉਻牐

Slide 37

Slide 37 text

媣 媲 翥 蜉 i n d e x . h t m l > ( 6 ) ֵ አ i f r a m e ્ 獈 ٌ 犢 翕 ᒊ ጱ 獉 ਻ ᛗ youtube 褰఺螡䢔Ӟ㮆୽粙牧螡䢔્獈牧蕦蕣 iframe 秂壆牧㪔Ӭ揳ک index.html ጱ 奾ੲ獮牐

Slide 38

Slide 38 text

媣 媲 翥 蜉 i n d e x . h t m l > ( 7 ) b r 矦 ᤈ ݢ犥ڥአ
秂壆螈کྦྷᤈጱ硳ຎ牐 br ䷱磪奾ੲ秂壆牐

Slide 39

Slide 39 text

媣 媲 翥 蜉 i n d e x . h t m l > ( 8 ) i m g 瑽 粙 秂 壆 秂壆አ㬵ے獈瑽粙吚֢獉਻ک殷ᶎӤ牐 • ䷱磪奾ੲ秂壆 • Ԇᥝ蝚螂 src 痀௔蔭螈瑽粙֖ᗝ牐 • alt አ㬵蔭纈磦դ෈ਁ牐 • width/height ݢ犥አ㬵瞲ਧ瑽粙疝ṛ牐 • title 秂氂

Slide 40

Slide 40 text

媣 媲 翥 蜉 i n d e x . h t m l > ( 8 - 1 ) 碝 ी 瑽 粙 - ፘ 䌘 ᪠ 䕩 ࣁ h1 ԏ獮牧碝ी 秂壆牧 Ӭ src 傶 images 虻碘䄸ጱ logo.png title 傶 “翕ᒊ logo” alt 傶 “some company ጱ logo” some company

Slide 41

Slide 41 text

媣 媲 翥 蜉 i n d e x . h t m l > ( 8 - 2 ) 碝 ी 瑽 粙 - 妃 䌘 ᪠ 䕩 ࣁ

Web Design

ԏ盅牧
 碝ी 秂壆牧 Ӭ src 傶 https://source.unsplash.com/random/300x210 疝ṛ傶 500

Slide 42

Slide 42 text

> ( 8 - 3 ) 妃 䌘 ᪠ 䕩 膏 ፘ 䌘 ᪠ 䕩 • ፘ䌘᪠䕩 (Relative Path) ፘ䌘ෝ扗 html ෈կጱ᪠䕩牐 • 妃䌘᪠䕩 (Absolute Path) ፥䋿ጱ URL ᪠䕩牐 ࣁ覌眲殷ᶎӾ: / 蔭纈礬ፓ袅 ./ 蔭纈吚獮ፓ袅 (౲ฎፗ矑ֵአ䲆礯ݷ圸౲虻碘䄸ݷ圸犖ฎፘݶ) ../ 蔭纈ӤӞ䍅ፓ袅

Slide 43

Slide 43 text

L A B 1 毆๗硳ຎ • 樄珸 lab1.html • ڥአ

,

, , 
 ࢥ圵秂壆牧矎ڊইݦ㯎硳ຎ牐 • 瑽粙藶አ source.unsplash.com • 瑽粙ᥝݢ犥蝫奾牧
 讨ԧ蝫ک google Ḓ殷牐 • 瑽粙疝ṛ傶 500 https://jsbin.com/cizeyerixe/1/edit?html,output

Slide 44

Slide 44 text

蔭 㻌 ጱ Օ 奧 > w 1 / l a b / c o n t a c t . h t m l photo by Jay Wennington

Slide 45

Slide 45 text

蔭㻌秂壆傶 牧አ㬵۱薟ಅ磪蔭㻌ጱ獉਻ 蔭㻌獉ጱ砺֢獉਻磪蜍獈໛ (ই , )
 牧蝑ڊೲ衔 (button) 缛缛牐 䨝ᤩ硯ࣁ form 愊ᶎጱزᔰ: <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>

Slide 46

Slide 46 text

蕣֢肥妏౯㮉殷ᶎ https://jsbin.com/bifoxaraxu/edit?html

Slide 47

Slide 47 text

翥 蜉 c o n t a c t . h t m l > ( 1 ) ے 獈 < h 1 > , < f o r m > • h1 獉਻傶 Contact Us • form 秂壆 ᥝ磪 action 痀௔牧犥现 method 痀௔ • action: 蔭㻌虻碘蝑ڊ݄ጱ URL • method: 独ݢ犥ฎ POST, GET, PUT 缛 HTTP ොဩ牧瞲ਧ HTTP ොဩ究ਧ蔭㻌虻碘㯽蝑ڊ ݄ጱොୗ

Slide 48

Slide 48 text

翥 蜉 c o n t a c t . h t m l > ( 2 ) ֵ አ < l a b e l > ਧ 嬝 䳱 ֖ ጱ 秂 氂 username • Ԇᥝአ㬵傶 ਧ嬝秂懿 • for 痀௔䛑扗膏ፘ橕ጱزᔰጱ id 痀௔ፘݶ

Slide 49

Slide 49 text

翥 蜉 c o n t a c t . h t m l > ( 3 ) ֵ አ < i n p u t > 碝 ी Ӟ 㮆 t y p e 痀 ௔ 傶 t e x t ጱ 䳱 ֖ 牧 Ӭ n a m e 痀 ௔ 傶 u s e r n a m e 牧 Ӭ i d 犖 傶 u s e r n a m e • input ጱ痀௔覍ଉग़ • 犋ݶጱ type ݢ胼䨝磪犋ݶጱ痀௔ݢ犥蟴ݳ

Slide 50

Slide 50 text

翥 蜉 c o n t a c t . h t m l > ( 4 ) ֵ አ < d i v > 疥 i n p u t , l a b e l ᗭ 奲 蚏 㬵 •
አ㬵疥ٍ磪橕肥௔ጱ element ᗭ奲蚏㬵 • ᗭ奲盅ๅො׎አ㬵蝱ᤈ CSS 戔懯膏粚ᶎ憒㴟 •
痀ෝ璸羷زᔰ (block element)牧犥Ӟ碉璸ጱ୵
 ୗ珊匍牧ૢݦ砤笕牐

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

翥 蜉 c o n t a c t . h t m l > ( 5 ) 手 茐 ᛔ ૩ g o o g l e 犥 ӥ 秂 壆 牧 蕣 ֢ ڊ 獵 ӥ ጱ 蔭 㻌 ز ᔰ : • • <input type=“radio”> • <input type=“checkbox”> • <select>, <option> • <button> solution: https://jsbin.com/nosafazoho/2/edit?html,output

Slide 53

Slide 53 text

H O M E W O R K I N T R O _

Slide 54

Slide 54 text

毆๗硳ຎ • ڥአ獮ᶎՕ奧螂ጱ秂壆牧
 矎ڊইݦ㯎硳ຎ牐 • 瑿瑽ጱ iframe ݢ犥ፗ矑蕦蕣: 
 https://jsbin.com/ripoxiwedi/1/edit?output 獮ᒒच器拻ଷ FE Coach: Win 獮ᒒૡ纷䒍 ้犨肬ෝ urAD 猻眢盓, UniSharp 眃瓲凟ᑀದ. ࡅ稭䌃獮ᒒ犥现 PHP牧犖ଉଉᑏ眐獨䜀݄ग़፡፡ٌ犢ጱ纷ୗ承᥺牐 ፓ獮㳷ฎۘێ౮傶ๅ胼䄪䌕ဳ奞℄Ӭኞ叨ێๅṛጱ Web ૡ纷䒍 Ӥ抓瑿࣎: 䁭ݷ翕࣎ ෈礯 H O M E W O R K - 1 䲆ݷ藶አ homework-1.html

Slide 55

Slide 55 text

H O M E W O R K - 2 藶ڥአ
    ,
      ,
    1. ,
      矎粚犥ӥڜ蔭: 䲆ݷ藶አ homework-2.html https://output.jsbin.com/lusijosaha

Slide 56

Slide 56 text

H O M E W O R K - 3 ֦ฎӞݷၚ㵕翕ᒊጱ獮ᒒૡ纷䒍牧ࢩ傶翕ᒊ㴄Ӥ娄牧窕ᰁ犖盄犋梊牐聲樿屷碻
 ૶磭֦狶ڊӞ殷蔭㻌牧ݢ犥虏ਮ䜛玱䛑犢㮉ጱ఺憎牧藶֦蕣֢Ӟ㮆 form牧
 ᥝ虏ਮ䜛ݢ犥ऴ犥ӥ蝡䰬ጱ虻懱: • নݷ • Email • 瑽粙Ӥ㯽 • ఺憎獉਻ • ௔獨 • Ӟ毼蝑ڊೲ衔 䲆ݷ藶አ homework-3.html

Slide 57

Slide 57 text

H O M E W O R K - 4 ਠ౮ quiz 簁盅牧ੀ妔౯

Slide 58

Slide 58 text

H T T P : / / T H E H T M L 5 Q U I Z . C O M / Բ獤楮獉ڜڊ֦Ꭳ螇ग़੝㮆 HTML 秂壆

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

S O U R C E ! • https://www.codeschool.com/ • https://www.codecademy.com/ • https://jsbin.com/ • https://github.com/sergeche/emmet-sublime • https://validator.w3.org • https://chrome.google.com/webstore/detail/html5- outliner/afoibpobokebhgfnknfndkgemglggomo?hl=zh-TW

Slide 62

Slide 62 text

T H A N K Y O U !