2016 HTML CSS 前端基礎講座-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)

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

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

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

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

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

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

ڡ 誢涢   翕殷 ฎ ெ 讕叨
ኞ ጱ ? > 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

Before after

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

֦ ጱ ᒫ Ӟ 㮆 Ḓ 殷 <!DOCTYPE html> <html
lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>XXXX胂犩磪褖獍ݪ</h1> </body> </html>

አ 倵薩瑊嘦藨奾 ຎ

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

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

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

H T M L e l e m e n
t ጱ 䯤 ౮ • 痀௔አ㬵䌘 Element 蝱ᤈ戔ਧ牧ֺই傶 a 秂壆ਧ嬝  href 痀௔: <a href=“www.google.com”>google</a> 痀 ௔ ݷ 圸痀 ௔ 独 • Ӟ㮆秂壆ݢ犥磪ग़圵痀௔牐 • 犋ݶጱ秂壆ݢ犥አጱ痀௔䨝磪犋ݶ牐

HTML च๜奾䯤 <html>, <head>, <body> 秂壆 ౮䌘ጱ秂壆

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

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

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

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

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

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

Օ 奧 ٌ 犢 ଉ አ 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

媣媲翥蜉 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"/>

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

> ( 2 ) h 1 ~ h 6 秂
氂秂壆 • <h1> य़秂氂 • <h2> ۅ秂氂 • <h3> ӣ羷秂氂 • <h4> ࢥ羷秂氂 • <h5> Բ羷秂氂 • <h6> م羷秂氂 • 毆戔眐丆ӥ牧hx 羬ڜጱ tag ਁ誢䨝ے罶牧֕犋ᥝࢩ傶 ے罶ᘒֵአ hx 羬ڜጱ秂壆牐 • HTML 疰猟ฎ䌃෈կӞ䰬牧ᥝ磪臑অጱ秂氂蚤ྦྷ苽牧砰䌃ݳ螕 hx 羬ڜ秂壆磪ۗෝ SEO牐 (盄᯿ᥝ)

h t m l > ( 3 ) p ྦྷ 苽秂壆 ࣁ <h2> 秂壆ԏ盅牧碝ीӞ奲 p ྦྷ苽秂壆牧㪔ӬےӤ獉෈牐 http://generator.lorem-ipsum.info/

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

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

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

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

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

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>

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

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

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>

h t m l > ( 7 ) b r 矦 ᤈ ݢ犥ڥአ <br/> 秂壆螈کྦྷᤈጱ硳ຎ牐 br ䷱磪奾ੲ秂壆牐

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

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"/>

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

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

L A B 1 毆๗硳ຎ • 樄珸 lab1.html • ڥአ
<h1>, <p>, <img>, <a>  ࢥ圵秂壆牧矎ڊইݦ㯎硳ຎ牐 • 瑽粙藶አ source.unsplash.com • 瑽粙ᥝݢ犥蝫奾牧  讨ԧ蝫ک google Ḓ殷牐 • 瑽粙疝ṛ傶 500 https://jsbin.com/cizeyerixe/1/edit?html,output

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

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

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

翥蜉 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 ොဩ究ਧ蔭㻌虻碘㯽蝑ڊ ݄ጱොୗ

h t m l > ( 2 ) ֵ አ < l a b e l > ਧ 嬝䳱 ֖ ጱ 秂氂 <label for=“”>username</label> • Ԇᥝአ㬵傶 <input> ਧ嬝秂懿 • for 痀௔䛑扗膏ፘ橕ጱزᔰጱ id 痀௔ፘݶ

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 ݢ胼䨝磪犋ݶጱ痀௔ݢ犥蟴ݳ

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

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

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

毆๗硳ຎ • ڥአ獮ᶎՕ奧螂ጱ秂壆牧  矎ڊইݦ㯎硳ຎ牐 • 瑿瑽ጱ 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

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

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

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

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

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

T H A N K Y O U !

2016 HTML CSS 前端基礎講座-1

2016 HTML CSS 前端基礎講座-1

More Decks by winwu

Other Decks in Programming

Featured

Transcript