Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2016 HTML CSS 前端基礎講座-1

B72258db4bea39b1ff31ca60725be83f?s=47 winwu
September 09, 2016

2016 HTML CSS 前端基礎講座-1

Friday, September 9, 2016
Syntrend 11F

B72258db4bea39b1ff31ca60725be83f?s=128

winwu

September 09, 2016
Tweet

Transcript

  1. 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)
  2. ֦ 磪 蕕 翥 蜉 瑊 㻟 ? ! 䋊聜

    HTML/CSS ݝ襑ᥝ翥蜉瑊蚤倵薩瑊疰ݢ犥䋊聜牐 ٌ䋿螭磪 google
  3. 翥 蜉 瑊 https://www.sublimetext.com/ https://atom.io/ http://www.vim.org/

  4. ֦ 磪 犨 ֜ 㺔 氂 ? ! • 膐ಋ

    • 扇㺔ۗ硽 • 拻ଷ盅犨֜㺔氂/Ի֢禂
 - no facebook, twitter… other social network
 - Only email: yiyingwu.1990{{at}}gmail.com
 - ֦磪Ի֢禂౯疰䨝ࢧמ • (舙磪犋梊ጱ㺔氂䨝ࣁӥӞ稞拻ଷ獤Ձڊ㬵)
  5. 虻 碘 ӥ 斉 9/9, 9/23, 9/30, 10/7 ᮷ᥝ᯿碝ӥ斉 http://goo.gl/wC5a6l

    蝱獈盅牧讨螡ݦӤ薫 Clone or download
 簁盅螡䢔 Download ZIP
  6. 䋊 H T M L / C S S ݢ

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

  8. ڡ 誢 涢 
 翕 殷 ฎ ெ 讕 叨

    ኞ ጱ ? > 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
  9. Before after

  10. 碝 ी Ӟ 㮆 H T M L 䲆 礯

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

    lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>XXXX胂犩磪褖獍ݪ</h1> </body> </html>
  12. አ 倵 薩 瑊 嘦 藨 奾 ຎ

  13. H T M L 墋 Օ • ፓ獮粚๜ጱ HTML5 •

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

    磪盄ग़圵 (䛑扗犋䨝磪Ո݄಩ਙ胙蚏㬵މ!?) http://www.html-5-tutorial.com/all-html-tags.htm
  15. H T M L e l e m e n

    t ጱ 䯤 ౮ • 秂壆 (tag ) 蝢ଉฎ౮櫕౮䌘ڊ匍牧
 ই <h1>some text</h1> <h1>some text</h1> 樄 ত 秂 壆 奾 ੲ 秂 壆 ز ᔰ ጱ 獉 ਻ • 磪犚秂壆 (tag)牧䷱磪奾ੲ秂壆牧ই <img/>
 ䷱磪獉਻ጱزᔰ牧݈圸傶绚زᔰ牐 ٌ犢ጱ猟ฎ <br>, <meta>, <input>…
  16. H T M L e l e m e n

    t ጱ 䯤 ౮ • 痀௔አ㬵䌘 Element 蝱ᤈ戔ਧ牧ֺই傶 a 秂壆ਧ嬝
 href 痀௔: <a href=“www.google.com”>google</a> 痀 ௔ ݷ 圸 痀 ௔ 独 • Ӟ㮆秂壆ݢ犥磪ग़圵痀௔牐 • 犋ݶጱ秂壆ݢ犥አጱ痀௔䨝磪犋ݶ牐
  17. HTML च๜奾䯤 <html>, <head>, <body> 秂壆 ౮䌘ጱ秂壆

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

  19. ૠ制: Ӟ㮆秂壆ݢ犥ٚ۱薟ٌ犢秂壆牧֕磪犚犋ᤈ牐 ই <br/>, <img/> 疰篷ဩٚ۱薟ٌ犢秂壆牐

  20. ෈կ秂懿觊ࣳ<!DOCTYPE html> ਯޞ粚๜傶 HTML5牧ᥝࣁ HTML ෈կጱᒫӞᤈ牐

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

  22. <body> 膏 </body> ԏ樌傶䋿褬䨝ᤩ氥纈ጱ獉਻

  23. HTML ෈կጱ奾䯤 D O C T Y P E ਯ

    ޞ h t m l h e a d b o d y
  24. Օ 奧 ٌ 犢 ଉ አ 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
  25. 媣 媲 翥 蜉 i n d e x .

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

    h t m l > ( 2 ) h 1 ~ h 6 秂 氂 秂 壆 • ࣁ <body> 秂壆愊ᶎ • 碝ीӞ奲 <h1>牧಑Ӥ獍ݪݷ圸౲ٌ犢 • 2奲 <h2> (๐率殻ፓ, 肥妏౯㮉) • 2奲 <h3> (Web Design, Marketing Survey)
  27. > ( 2 ) h 1 ~ h 6 秂

    氂 秂 壆 • <h1> य़秂氂 • <h2> ۅ秂氂 • <h3> ӣ羷秂氂 • <h4> ࢥ羷秂氂 • <h5> Բ羷秂氂 • <h6> م羷秂氂 • 毆戔眐丆ӥ牧hx 羬ڜጱ tag ਁ誢䨝ے罶牧֕犋ᥝࢩ傶 ے罶ᘒֵአ hx 羬ڜጱ秂壆牐 • HTML 疰猟ฎ䌃෈կӞ䰬牧ᥝ磪臑অጱ秂氂蚤ྦྷ苽牧 砰䌃ݳ螕 hx 羬ڜ秂壆磪ۗෝ SEO牐 (盄᯿ᥝ)
  28. 媣 媲 翥 蜉 i n d e x .

    h t m l > ( 3 ) p ྦྷ 苽 秂 壆 ࣁ <h2> 秂壆ԏ盅牧 碝ीӞ奲 p ྦྷ苽秂壆牧㪔ӬےӤ獉෈牐 http://generator.lorem-ipsum.info/
  29. 媣 媲 翥 蜉 i n d e x .

    h t m l > ( 4 ) s t ro n g , b 䔶 藲 ᯿ 讨 獉 ਻ ࣁ㴄㴄 (3) 碝ीጱ獉෈Ӿ牧ತ獋ӣ㮆獉෈㻌ਁ㪔Ӭ ֵአ <strong> ౲ᘏ <b> ۱薟蚏㬵牐
  30. > ( 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
  31. > ( 5 ) a 秂 壆 አ ෝ 蝫

    奾 a 秂壆ጱ皃㮆᯿ᥝጱ痀௔: • 痀௔ href - ஠ऴ牧蝢ଉ独傶翕࣎牧౲ฎ mailto:xxxx
 牧౲ฎ袏讨 (෈獉᪡旉ጱ᩻蝫奾)牐 • 痀௔ target - 蝫奾ڊ݄ጱොୗ牧独ݢ犥傶 _blank
 (target 磪盄ग़圵୵ୗ牧_blank ݝฎٌӞ) <a href=“蝫奾ොୗ” target=“_blank”>蝫奾෈ਁ</a>
  32. 媣 媲 翥 蜉 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
  33. 媣 媲 翥 蜉 i n d e x .

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

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

    h t m l > ( 5 - 3 ) a 秂 壆 አ ෝ 蝫 奾 ( m a i l ) ࣁ樄珸 Google Map ӥො碝ीӞ㮆᩻蝫奾牧
 ֖࣎傶 email牐 ݢ犥蝚螂 subject, body 癲獈Ԇ碫蚤毆戔獉෈: <a href="mailto:test@test.com?subject=㬵ᛔ肥妏౯㮉&body=懿஑Ի֢禂">Ӥ抓Ӿ</a>
  36. 媣 媲 翥 蜉 i n d e x .

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

    h t m l > ( 6 ) ֵ አ i f r a m e ્ 獈 ٌ 犢 翕 ᒊ ጱ 獉 ਻ ᛗ youtube 褰఺螡䢔Ӟ㮆୽粙牧螡䢔્獈牧蕦蕣 iframe 秂壆牧㪔Ӭ揳ک index.html ጱ <body> 奾ੲ獮牐 <iframe width=“560" height=“315" src=“https://www.youtube.com/embed/CKxA1vnZz0s" allowfullscreen></iframe>
  38. 媣 媲 翥 蜉 i n d e x .

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

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

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

    h t m l > ( 8 - 2 ) 碝 ी 瑽 粙 - 妃 䌘 ᪠ 䕩 ࣁ <h3>Web Design</h3> ԏ盅牧
 碝ी <img> 秂壆牧 Ӭ src 傶 https://source.unsplash.com/random/300x210 疝ṛ傶 500
  42. > ( 8 - 3 ) 妃 䌘 ᪠ 䕩

    膏 ፘ 䌘 ᪠ 䕩 • ፘ䌘᪠䕩 (Relative Path) ፘ䌘ෝ扗 html ෈կጱ᪠䕩牐 • 妃䌘᪠䕩 (Absolute Path) ፥䋿ጱ URL ᪠䕩牐 ࣁ覌眲殷ᶎӾ: / 蔭纈礬ፓ袅 ./ 蔭纈吚獮ፓ袅 (౲ฎፗ矑ֵአ䲆礯ݷ圸౲虻碘䄸ݷ圸犖ฎፘݶ) ../ 蔭纈ӤӞ䍅ፓ袅
  43. L A B 1 毆๗硳ຎ • 樄珸 lab1.html • ڥአ

    <h1>, <p>, <img>, <a>
 ࢥ圵秂壆牧矎ڊইݦ㯎硳ຎ牐 • 瑽粙藶አ source.unsplash.com • 瑽粙ᥝݢ犥蝫奾牧
 讨ԧ蝫ک google Ḓ殷牐 • 瑽粙疝ṛ傶 500 https://jsbin.com/cizeyerixe/1/edit?html,output
  44. 蔭 㻌 ጱ Օ 奧 > w 1 / l

    a b / c o n t a c t . h t m l photo by Jay Wennington
  45. 蔭㻌秂壆傶 <form>牧አ㬵۱薟ಅ磪蔭㻌ጱ獉਻ <form action=""> <input type="text"> </form> 蔭㻌獉ጱ砺֢獉਻磪蜍獈໛ (ই <input>,

    <textarea>)
 牧蝑ڊೲ衔 (button) 缛缛牐 䨝ᤩ硯ࣁ form 愊ᶎጱزᔰ: <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>
  46. 蕣֢肥妏౯㮉殷ᶎ https://jsbin.com/bifoxaraxu/edit?html

  47. 翥 蜉 c o n t a c t .

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

    h t m l > ( 2 ) ֵ አ < l a b e l > ਧ 嬝 䳱 ֖ ጱ 秂 氂 <label for=“”>username</label> • Ԇᥝአ㬵傶 <input> ਧ嬝秂懿 • for 痀௔䛑扗膏ፘ橕ጱزᔰጱ id 痀௔ፘݶ
  49. 翥 蜉 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=“” name=“” 痀௔=“独”> • input ጱ痀௔覍ଉग़ • 犋ݶጱ type ݢ胼䨝磪犋ݶጱ痀௔ݢ犥蟴ݳ
  50. 翥 蜉 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 ᗭ 奲 蚏 㬵 • <div> አ㬵疥ٍ磪橕肥௔ጱ element ᗭ奲蚏㬵 • ᗭ奲盅ๅො׎አ㬵蝱ᤈ CSS 戔懯膏粚ᶎ憒㴟 • <div> 痀ෝ璸羷زᔰ (block element)牧犥Ӟ碉璸ጱ୵
 ୗ珊匍牧ૢݦ砤笕牐
  51. None
  52. 翥 蜉 c o n t a c t .

    h t m l > ( 5 ) 手 茐 ᛔ ૩ g o o g l e 犥 ӥ 秂 壆 牧 蕣 ֢ ڊ 獵 ӥ ጱ 蔭 㻌 ز ᔰ : • <textarea> • <input type=“radio”> • <input type=“checkbox”> • <select>, <option> • <button> solution: https://jsbin.com/nosafazoho/2/edit?html,output
  53. H O M E W O R K I N

    T R O _
  54. 毆๗硳ຎ • ڥአ獮ᶎՕ奧螂ጱ秂壆牧
 矎ڊইݦ㯎硳ຎ牐 • 瑿瑽ጱ iframe ݢ犥ፗ矑蕦蕣: 
 <iframe

    src="https://www.google.com/maps/embed?pb=!1m18! 1m12!1m3!1d3614.6673776873113!2d121.5289202144145! 3d25.045359743991142!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1! 3m3!1m2!1s0x3442a97b582d5a73%3A0x9b1e56ab48807d62! 2z5LiJ5Ym155Sf5rS75ZyS5Y2A!5e0!3m2!1szh-TW!2stw! 4v1473238101917" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></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
  55. H O M E W O R K - 2

    藶ڥአ <ul>, <ol>, <li>, <hr> 矎粚犥ӥڜ蔭: 䲆ݷ藶አ homework-2.html https://output.jsbin.com/lusijosaha
  56. H O M E W O R K - 3

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

    ਠ౮ quiz 簁盅牧ੀ妔౯
  58. H T T P : / / T H E

    H T M L 5 Q U I Z . C O M / Բ獤楮獉ڜڊ֦Ꭳ螇ग़੝㮆 HTML 秂壆
  59. None
  60. None
  61. 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
  62. T H A N K Y O U !