Week 08 Extra HTML & CSS Joonhwan Lee human-computer interaction + design lab.
HTML CSS HTML, HTML 5
1. HTML
HTML HTML HTML (elements) (attributes), (arguments). HTML (tag), DTD (Document Type Definition).!4
HTML (Elements) HTML (tag) <p>html. </p> <img src= http://www.joonhwan.com/images/test.jpg > <div> <p> </p> </div>!5
HTML (Tag) (Elements) <p>html. </p> <img src= http://www.joonhwan.com/images/test.jpg > <div> <p> </p> </div>!6
HTML (Attributes) (Elements) <p align= center > </p> (Arguments) <p align= center > </p>!7
HTML HTML HTML, DB (PC), Coda (Mac), TextMate (Mac)!8
HTML HTML / drag & drop HTML,,!9
HTML <html> <head> <title>hello HTML!</title> </head> <body> My First HTML Page! </html> </body>!10
HTML <html> HTML <head> <title>hello HTML!</title> </head> <body> My First HTML Page! </html> </body>!10
HTML <html> HTML <head>, </head> <title>hello HTML!</title> <body> My First HTML Page! </html> </body>!10
HTML <html> HTML <head>, </head> <title>hello HTML!</title> <body> My First HTML Page! </html> </body>!10
HTML <p>... </p> paragraph <br> (line break) <hn>... </hn> (heading). <h1> </h1>, <h4> </h4>!11
HTML <img> HTML : width, height, border <img src= width= height= > <a>... </a>, : target, : _blank, _top <a href= target= _blank > </a>!12
HTML <font>, : color, size, face : red, blue, #123456, #FFFFFF, <img src= width= height= > <font color="red"> </font>!13
HTML DOCTYPE HTML 4.01 Strict 4.01 doctype. <font> deprecated. Frameset X <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" "http://www.w3.org/tr/html4/strict.dtd"> HTML 4.01 Transitional 4.01 deprecated. Frameset X <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/ loose.dtd">!14
HTML DOCTYPE HTML 4.01 Frameset 4.01 Transitional. Frameset content <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/ frameset.dtd"> XHTML 1.0 Strict 4.01 HTML. deprecated X. Frameset X XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/ xhtml1-strict.dtd">!15
HTML DOCTYPE XHTML 1.0 Transitional 4.01 HTML. deprecated. Frameset X XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/ xhtml1-transitional.dtd"> XHTML 1.0 Frameset XHTML 1.0 Transitional Frameset XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/ xhtml1-frameset.dtd">!16
HTML DOCTYPE XHTML 1.1 XHTML 1.0 Strict ( : ruby support for East-Asian language) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1// EN" "http://www.w3.org/tr/xhtml11/dtd/ xhtml11.dtd">!17
HTML HTML 4.0 : http://www.w3schools.com/html/ HTML Examples: http://www.w3schools.com/ html/html_examples.asp HTML Entity Names: http://www.w3schools.com/ tags/ref_entities.asp!18
2. CSS
Appearance of CSS
CSS (Cascading Style Sheets) Style Sheets 1970 SGML. HTML HTML W3C CSS (2 were chosen from 9 proposals) W3C (1997) HTML Working Group DOM Working Group CSS Working Group!21
CSS (Cascading Style Sheets) CSS 1 (12/1996) Font properties (typeface, emphasis...) Color (text, backgrounds, line...) Text attributes (spacing: word, letter, text line) Alignment (text, image, table, etc..) Margin, border, padding, positioning!22
CSS (Cascading Style Sheets) CSS 2 (5/1998), W3C ( 2.1) CSS 1 absolute, relate, fixed positioning of elements new font properties (e.g., shadow) CSS 3 12/2005 border style (round, image border), transparency, font embedding!23
CSS (Cascading Style Sheets) Browser 1996 CSS1 IE3 CSS Macintosh IE5 CSS1 MS Netscape Version 5 CSS IE Version 7 CSS CSS2 CSS3 IE9, Safari 4, FireFox 4 ( ) CSS3!24
CSS CSS (Cascading Style Sheet) HTML, XHTML HTML HTML CSS!25
CSS CSS, table 50% (DivLayout.html vs. TableLayout.html) ( ) HTML http://www.csszengarden.com (w3c.org )!26
CSS CSS. selector { property: value; } : body { color: black; } body { color: black; font-size: 12pt; } body { color: black; background-color: white; font-size: large; line-height: 140%; }!27
CSS HTML CSS <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>!28
CSS HTML CSS HTML <head> <style type="text/css"> <!-- body {font-size:9pt;} //--> </style> </head>!29
CSS HTML CSS HTML (inline styles) <p style="color:gray;">text color is gray.</p>!30
CSS (selector): (class) (id) (class). ( :.red,.italic...) <style type="text/css"> <!-- //--> </style>.red {color:red} <h3 class="red">color of heading3 set to red.</h3> <p class="red">paragraph is also red.</p>!31
CSS (selector): (class) (id) (id) # ( : #navigation, #footer...) <style type="text/css"> <!-- //--> </style> #navbar {... } #footer {... } <div id= navbar >... </div> <div id= footer >... </div>!32
CSS Text CSS color red, #FF0000 direction ltr, rtl line-height 150%, 10px letter-spacing -0.1px text-align left, right, center, justify text-decoration none, underline, overline, line-through, blink text-indent 20px text-transform none, capitalize, uppercase, lowercase word-spacing 1px!33
CSS Font CSS font-family "Lucida Grande", Lucida, Verdana, sansserif font-size 10pt, 10em font-weight bold, normal font-variant small-caps, none Small Caps font-style italic, none ( )!34
CSS pt (, 1pt= 1/72 in) in (, 1in = 25.4 mm) % ( ) em ( ) mm ( ) cm( ) pc (, 1pc=12pt) px (,1px= 1 )!35
CSS CSS background-color #FFFF80, Ivory background-image url(bg.gif) background-repeat repeat, repeat-x, repeat-y, norepeat backgroundposition top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right backgroundattachment scroll, fixed!36
CSS CSS border-style none, solid, dotted, hidden, dashed, double, groove, ridge, inset, outset border-width 1px, thin, medium, thick border-color #000000, silver border-top border-bottom border-left border-right border e.g.) border-top: 2px dotted silver; border-right: 4px double red; border-left: 4px groove green; (style, width, color ) / / /!37
CSS Box Model: Content, Margin, Padding, Border content padding: (border) border: margin margin: padding box : content block margin-left: 10px; padding-top: 5px; margin: 20px;!38
CSS Sample HTML/CSS TextExample.html / TextStyle.css BackgroundExample.html / BackgroundExample.css BoxExample.html / BoxExample.css property : http://www.w3.org/tr/css21/!39
Positioning p, h1, div: block element strong, span: inline element display block inline display: none, display: block block inline!40
Positioning Positioning 3 (relative):. (absolute): (0, 0). (floating):.!41
Positioning (relative positioning). (position). Lab2/w8-flow-01.html!42
Positioning (absolute positioning) (0,0) position ( ) Lab2/w8-flow-02.html!43
Positioning (floating).. clear clear: both; Lab2/w8-flow-03.html!44
3. HTML 5
HTML 5
HTML HTML /!47
WHATWG HTML XHTML 1998 W3C, HTML XHTML XHTML XHTML XHTML (HTML 4.01 ) XHTML MIME ( XHTML HTML ) Ajax, Web 2.0 HTML HTML...!48
WHATWG XHTML HTML W3C (XHTML ) 2004, Apple, Mozilla, Opera WHATWG (Web Hypertext Application Technology Working Group) HTML HTML ( )!49
W3C HTML5 2007, W3C WHATWG HTML5 2008 1, W3C HTML5 2009 Google I/O, 2009 Apple Steve Jobs,. HTML5 HTML5!50
HTML5 is not one big thing HTML5 ~= HTML + CSS + Native JS APIs Text
HTML5? Rich Internet Application Support Semantic Markup Better Accessibility Better Compatibility!52
Rich Internet Application HTML:. HTML5: API, (video/audio ) 2D (canvas ) (, e.g. Google Gears) (Cross Document Messaging )!53
Rich Internet Application (Web Storage, Web SQL Database) (Web Worker) (Web Sockets) (File API) HTML+JavaScript Java FLEX HTML!54
Semantic Markup HTML5 : <head> <footer> <section>!55
Semantic Markup <html> <body> <div id= header > </div> <div id= nav > </div> <div id= article > </div> <div id= sidebar > </div> <div id= footer > </div> </body> </html> <div id="header"> <div id = "article"> <div id="nav"> <div id = "sidebar"> <div id="footer">!56
Semantic Markup <html> <body> <header> </header> <nav> </nav> <section> <article> </article> </section> <footer> </footer> </body> </html> <header> <nav> <section> <aside> <article> <footer>!57
Semantic Markup Ordinary HTML markup vs. semantic markup <div id="header"> <header> <div id="nav"> <nav> <section> <div id = "article"> <div id = "sidebar"> <article> <aside> <div id="footer"> <footer>!58
Semantic Markup HTML class id HTML5 <head>, <footer>, <section> ( : <div> ) HTML!59
Better Accessibility Accessibility ( ) ( ) : / ( ) : (Section 508. http://www.section508.gov/ ) : Navigation Bar,,!60
Better Accessibility HTML5 (<head>, <footer>, <section>) (, ) WAI-ARIA (WAI Accessible Rich Internet Application) W3C,!61
Better Compatibility HTML : HTML ( )!62
Better Compatibility HTML HTML5 HTML5 : <progress value= 80 max= 100 >80%</progress> 80%!63
Better Compatibility HTML5 IE, FireFox, Safari : IE ruby, Safari Canvas!64
Questions?