Week8-Extra

Size: px

Start display at page:

Download "Week8-Extra"

혜란 함
5 years ago
Views:

1 Week 08 Extra HTML & CSS Joonhwan Lee human-computer interaction + design lab.

2 HTML CSS HTML, HTML 5

3 1. HTML

4 HTML HTML HTML (elements) (attributes), (arguments). HTML (tag), DTD (Document Type Definition).!4

5 HTML (Elements) HTML (tag) <p>html. </p> <img src= > <div> <p> </p> </div>!5

6 HTML (Tag) (Elements) <p>html. </p> <img src= > <div> <p> </p> </div>!6

7 HTML (Attributes) (Elements) <p align= center > </p> (Arguments) <p align= center > </p>!7

8 HTML HTML HTML, DB (PC), Coda (Mac), TextMate (Mac)!8

9 HTML HTML / drag & drop HTML,,!9

10 HTML <html> <head> <title>hello HTML!</title> </head> <body> My First HTML Page! </html> </body>!10

11 HTML <html> HTML <head> <title>hello HTML!</title> </head> <body> My First HTML Page! </html> </body>!10

12 HTML <html> HTML <head>, </head> <title>hello HTML!</title> <body> My First HTML Page! </html> </body>!10

13 HTML <html> HTML <head>, </head> <title>hello HTML!</title> <body> My First HTML Page! </html> </body>!10

14 HTML <p>... </p> paragraph <br> (line break) <hn>... </hn> (heading). <h1> </h1>, <h4> </h4>!11

15 HTML <img> HTML : width, height, border <img src= width= height= > <a>... </a>, : target, : _blank, _top <a href= target= _blank > </a>!12

16 HTML <font>, : color, size, face : red, blue, #123456, #FFFFFF, <img src= width= height= > <font color="red"> </font>!13

17 HTML DOCTYPE HTML 4.01 Strict 4.01 doctype. <font> deprecated. Frameset X <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" " HTML 4.01 Transitional 4.01 deprecated. Frameset X <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " loose.dtd">!14

18 HTML DOCTYPE HTML 4.01 Frameset 4.01 Transitional. Frameset content <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " frameset.dtd"> XHTML 1.0 Strict 4.01 HTML. deprecated X. Frameset X XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xhtml1-strict.dtd">!15

19 HTML DOCTYPE XHTML 1.0 Transitional 4.01 HTML. deprecated. Frameset X XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1-transitional.dtd"> XHTML 1.0 Frameset XHTML 1.0 Transitional Frameset XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " xhtml1-frameset.dtd">!16

20 HTML DOCTYPE XHTML 1.1 XHTML 1.0 Strict ( : ruby support for East-Asian language) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1// EN" " xhtml11.dtd">!17

21 HTML HTML 4.0 : HTML Examples: html/html_examples.asp HTML Entity Names: tags/ref_entities.asp!18

22 2. CSS

23 Appearance of CSS

24 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

25 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

26 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

27 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

28 CSS CSS (Cascading Style Sheet) HTML, XHTML HTML HTML CSS!25

29 CSS CSS, table 50% (DivLayout.html vs. TableLayout.html) ( ) HTML (w3c.org )!26

30 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

31 CSS HTML CSS <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>!28

32 CSS HTML CSS HTML <head> <style type="text/css">  </style> </head>!29

33 CSS HTML CSS HTML (inline styles) <p style="color:gray;">text color is gray.</p>!30

34 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

35 CSS (selector): (class) (id) (id) # ( : #navigation, #footer...) <style type="text/css">  </style> #navbar {... } #footer {... } <div id= navbar >... </div> <div id= footer >... </div>!32

36 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

37 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

38 CSS pt (, 1pt= 1/72 in) in (, 1in = 25.4 mm) % ( ) em ( ) mm ( ) cm( ) pc (, 1pc=12pt) px (,1px= 1 )!35

39 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

40 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

41 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

42 CSS Sample HTML/CSS TextExample.html / TextStyle.css BackgroundExample.html / BackgroundExample.css BoxExample.html / BoxExample.css property :

43 Positioning p, h1, div: block element strong, span: inline element display block inline display: none, display: block block inline!40

44 Positioning Positioning 3 (relative):. (absolute): (0, 0). (floating):.!41

45 Positioning (relative positioning). (position). Lab2/w8-flow-01.html!42

46 Positioning (absolute positioning) (0,0) position ( ) Lab2/w8-flow-02.html!43

47 Positioning (floating).. clear clear: both; Lab2/w8-flow-03.html!44

48 3. HTML 5

49 HTML 5

50 HTML HTML /!47

51 WHATWG HTML XHTML 1998 W3C, HTML XHTML XHTML XHTML XHTML (HTML 4.01 ) XHTML MIME ( XHTML HTML ) Ajax, Web 2.0 HTML HTML...!48

52 WHATWG XHTML HTML W3C (XHTML ) 2004, Apple, Mozilla, Opera WHATWG (Web Hypertext Application Technology Working Group) HTML HTML ( )!49

53 W3C HTML5 2007, W3C WHATWG HTML , W3C HTML Google I/O, 2009 Apple Steve Jobs,. HTML5 HTML5!50

54 HTML5 is not one big thing HTML5 ~= HTML + CSS + Native JS APIs Text

55 HTML5? Rich Internet Application Support Semantic Markup Better Accessibility Better Compatibility!52

56 Rich Internet Application HTML:. HTML5: API, (video/audio ) 2D (canvas ) (, e.g. Google Gears) (Cross Document Messaging )!53

57 Rich Internet Application (Web Storage, Web SQL Database) (Web Worker) (Web Sockets) (File API) HTML+JavaScript Java FLEX HTML!54

58 Semantic Markup HTML5 : <head> <footer> <section>!55

59 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

60 Semantic Markup <html> <body> <header> </header> <nav> </nav> <section> <article> </article> </section> <footer> </footer> </body> </html> <header> <nav> <section> <aside> <article> <footer>!57

61 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

62 Semantic Markup HTML class id HTML5 <head>, <footer>, <section> ( : <div> ) HTML!59

63 Better Accessibility Accessibility ( ) ( ) : / ( ) : (Section ) : Navigation Bar,,!60

64 Better Accessibility HTML5 (<head>, <footer>, <section>) (, ) WAI-ARIA (WAI Accessible Rich Internet Application) W3C,!61

65 Better Compatibility HTML : HTML ( )!62

66 Better Compatibility HTML HTML5 HTML5 : <progress value= 80 max= 100 >80%</progress> 80%!63

67 Better Compatibility HTML5 IE, FireFox, Safari : IE ruby, Safari Canvas!64

68 Questions?

Lab1

Lab1 Lab 1: HTML CSS 2015 Fall human-computer interaction + design lab. Joonhwan Lee HTML Web Server (World Wide Web: WWW)? (., FTP ). web 3 웹 구조의 이해 웹페이지 웹페이지는 HTML 이라는 언어로 만들어진 일종의 프로그램 웹페이지는 텍스트, 이미지, 동영상,