際際滷

際際滷Share a Scribd company logo
Study Wordpress
Joo Dongwoo
- basic html5 -
HTML 蟲 
 (Elements):  蠏語 譬襭 蠏碁 企伎 覈 覈轟
蠏 (Tag):  朱,  蠏(襯 ) 譬襭 蠏(襯 )螳 .
 (Attributes): 覈轟 蟲豌危 る 蟆朱  蠏  .
覲 (Arguments): 炎骸 蟯 螳.
HTML 蠍磯蓋 蟲譟
<html>
<head>
(企 伎 蠍磯蓋 覲)
</head>
<body>
(企 伎 覲碁)
</body>
</html>
Filename.html
head?
るジ 覓語襯 郁屋
Css, js, php, etc
Example)
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
rel="stylesheet">
<script src=/slideshow/01-basic-html5/44911100/"/ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
覓語 覃一危磯ゼ 蠍磯
磯Μ  覲伎伎 讌襷 觚殊一 蟆讌 曙  
Example)
<meta charset="UTF-8">
<meta property="og:image" content="http://news.karts.ac.kr/wp/wp-
content/themes/KNUANEWS/image/logo_thumbnail2.png" />
Body?
れ  覲伎企 伎 蟲焔 
覲危旧 header, main, footer襦 蟲
覦 讌  
Example)
http://www.chairone.co.kr/NEW/
http://www.stevenholl.com/
HTML 蠍一 覓碁 (1)
覈  覯渚蟆 譴豌伎 
<p>This is a <strong>bad</p>example</strong> (X)
<p>This is a <strong>good</strong>example</p> (O)
覈 炎 煙 蟷 碁伎 .
<option value="wrong" selected>bad example</option> (X)
<option value="right" selected="selected">good example</option> (O)
覈  煙 覓語 .
<DIV ID="idbox">bad example.</DIV> (X)
<div id="idbox">good example.</div> (O)
覈  螳 語 覿("") 蠍壱.
<table border=1 cellpadding=0 cellspacing=0>..bad example..</table> (X)
<table border="1" cellpadding="0" cellspacing="0">..good example..</table> (O)
HTML 蠍一 覓碁 (2)
覈   .
<img src=/slideshow/01-basic-html5/44911100/"good_sample.gif" alt="譬  企語" />
<input type="text" /> <hr /> <br />
text URL, script  轟 覓語 escape .
<, ", &, >  & l t ; , & q u o t ; , & a m p ;, & g t ; 襦 escape
<a href="http://tab.search.daum.net/dsa/search?
nil_profile=g&nil_searchtitle=1&w=knowledge&q=">bad example</a> (X)
<a href="http://tab.search.daum.net/dsa/search?nil_profile=g & a m p ; nil_searchtitle=1 &
a m p ; w=knowledge & a m p ; q=">good example</a> (O)
HTML Elements
覃一危 貊豸 (Metadata Content)
覃一危磯 襾語 伎  覦  れ
るジ 覓語 蟯螻襯 れ蟇磯, 覩碁襯 覲企れ 
example)
base, command, link, meta, noscript, script, style, title
襦 貊豸 (flow content)
覓語覦 危襴貅伎 Body  覿覿  襦 貊豸襦 覿襯
example)
a, abbr, address, area (map    蟆曙), article, aside, audio, b, bdi, bdo,
blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em,
embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe,
img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol,
output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style
(scoped 煙 朱), sub, sup, svg, table, textarea, time, ul, var, video, wbr, text
轟 貊豸 (Section Conetnt)
轟 貊豸 る螻 誤一 覯襯 讌
覈螻 蠏 伎  覯襯 讌
Example)
article, aside, nav, section
る 貊豸 (Heading Content)
る 貊豸 轟(轟 貊豸  る 貊豸  朱 襷  )
る襯 
Example)
h1, h2, h3, h4, h5, h6, hgroup
伎 貊豸 (Phrasing Content)
伎 貊豸 覓語 ろ語企, 蠏 ろ碁ゼ  企覯 襷  

伎 貊豸螳 覈 覓碁 蟲
Example)
a (伎 貊豸襷  蟆曙), abbr, area (map   蟆曙), audio, b,
bdi, bdo, br, button, canvas, cite, code, command, datalist, del (伎 貊豸 
蟆曙), dfn, em, embed, i, iframe, img, input, ins (伎 貊豸襷  蟆曙), kbd,
keygen, label, map (伎 貊豸襷  蟆曙), mark, math, meter, noscript, object,
output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg,
textarea, time, var, video, wbr, text
覯 貊豸 (Embedded Content)
覯 貊豸 るジ 襴(,  )襯 覓語 曙 貊豸, 覓語 曙
 るジ   貊豸
Example)
audio, canvas, embed, iframe, img, math, object, svg, video
れ旧 螳
http://c9.io/

More Related Content

01. basic html5

  • 2. HTML 蟲 (Elements): 蠏語 譬襭 蠏碁 企伎 覈 覈轟 蠏 (Tag): 朱, 蠏(襯 ) 譬襭 蠏(襯 )螳 . (Attributes): 覈轟 蟲豌危 る 蟆朱 蠏 . 覲 (Arguments): 炎骸 蟯 螳.
  • 3. HTML 蠍磯蓋 蟲譟 <html> <head> (企 伎 蠍磯蓋 覲) </head> <body> (企 伎 覲碁) </body> </html> Filename.html
  • 4. head? るジ 覓語襯 郁屋 Css, js, php, etc Example) <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <script src=/slideshow/01-basic-html5/44911100/"/ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 覓語 覃一危磯ゼ 蠍磯 磯Μ 覲伎伎 讌襷 觚殊一 蟆讌 曙 Example) <meta charset="UTF-8"> <meta property="og:image" content="http://news.karts.ac.kr/wp/wp- content/themes/KNUANEWS/image/logo_thumbnail2.png" />
  • 5. Body? れ 覲伎企 伎 蟲焔 覲危旧 header, main, footer襦 蟲 覦 讌 Example) http://www.chairone.co.kr/NEW/ http://www.stevenholl.com/
  • 6. HTML 蠍一 覓碁 (1) 覈 覯渚蟆 譴豌伎 <p>This is a <strong>bad</p>example</strong> (X) <p>This is a <strong>good</strong>example</p> (O) 覈 炎 煙 蟷 碁伎 . <option value="wrong" selected>bad example</option> (X) <option value="right" selected="selected">good example</option> (O) 覈 煙 覓語 . <DIV ID="idbox">bad example.</DIV> (X) <div id="idbox">good example.</div> (O) 覈 螳 語 覿("") 蠍壱. <table border=1 cellpadding=0 cellspacing=0>..bad example..</table> (X) <table border="1" cellpadding="0" cellspacing="0">..good example..</table> (O)
  • 7. HTML 蠍一 覓碁 (2) 覈 . <img src=/slideshow/01-basic-html5/44911100/"good_sample.gif" alt="譬 企語" /> <input type="text" /> <hr /> <br /> text URL, script 轟 覓語 escape . <, ", &, > & l t ; , & q u o t ; , & a m p ;, & g t ; 襦 escape <a href="http://tab.search.daum.net/dsa/search? nil_profile=g&nil_searchtitle=1&w=knowledge&q=">bad example</a> (X) <a href="http://tab.search.daum.net/dsa/search?nil_profile=g & a m p ; nil_searchtitle=1 & a m p ; w=knowledge & a m p ; q=">good example</a> (O)
  • 9. 覃一危 貊豸 (Metadata Content) 覃一危磯 襾語 伎 覦 れ るジ 覓語 蟯螻襯 れ蟇磯, 覩碁襯 覲企れ example) base, command, link, meta, noscript, script, style, title
  • 10. 襦 貊豸 (flow content) 覓語覦 危襴貅伎 Body 覿覿 襦 貊豸襦 覿襯 example) a, abbr, address, area (map 蟆曙), article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style (scoped 煙 朱), sub, sup, svg, table, textarea, time, ul, var, video, wbr, text
  • 11. 轟 貊豸 (Section Conetnt) 轟 貊豸 る螻 誤一 覯襯 讌 覈螻 蠏 伎 覯襯 讌 Example) article, aside, nav, section
  • 12. る 貊豸 (Heading Content) る 貊豸 轟(轟 貊豸 る 貊豸 朱 襷 ) る襯 Example) h1, h2, h3, h4, h5, h6, hgroup
  • 13. 伎 貊豸 (Phrasing Content) 伎 貊豸 覓語 ろ語企, 蠏 ろ碁ゼ 企覯 襷 伎 貊豸螳 覈 覓碁 蟲 Example) a (伎 貊豸襷 蟆曙), abbr, area (map 蟆曙), audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, del (伎 貊豸 蟆曙), dfn, em, embed, i, iframe, img, input, ins (伎 貊豸襷 蟆曙), kbd, keygen, label, map (伎 貊豸襷 蟆曙), mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr, text
  • 14. 覯 貊豸 (Embedded Content) 覯 貊豸 るジ 襴(, )襯 覓語 曙 貊豸, 覓語 曙 るジ 貊豸 Example) audio, canvas, embed, iframe, img, math, object, svg, video