Lab1

Size: px

Start display at page:

Download "Lab1"

지선 이
6 years ago
Views:

1 Lab 1: HTML CSS 2015 Fall human-computer interaction + design lab. Joonhwan Lee

2 HTML Web Server

3 (World Wide Web: WWW)? (., FTP ). web 3

4 웹 구조의 이해 웹페이지 웹페이지는 HTML 이라는 언어로 만들어진 일종의 프로그램 웹페이지는 텍스트, 이미지, 동영상, 인터랙티브 미디어 (플래시) 등을 담을 수 있다 웹 브라우저가 HTML 의 내용을 해석하고 사용자가 볼 수 있는 형태로 렌더링 함 렌더링 엔진에 따라 브라우저 분류: Trident(Internet Explorer), Webkit (Safari, Chrome), Gecko (Firefox) HTML Code Web Browser Web Page 4

5 웹 구조의 이해 웹 서버 일련의 웹페이지를 저장하고 사용자에게 제공해 주는 공간 프로토콜 (규약, 절차)에 따라 웹 주소 해석 (http) GET /path/file.html HTTP/1.1 Host: /var/www/path/file.html (리눅스 서버의 경우) 5

6 HTML HTML: Hyper Text Markup Language 1989, Tim-Berners Lee HTML SGML SGML: Standard Generalized Markup Language (ISO 8879:1986 SGML) : IBM GML 6

7 HTML

8 HTML(Hyper Text Markup Language) HTML HTML (elements) (attributes), (arguments). HTML (tag), DTD (Document Type Definition). 8

9 HTML (Elements) HTML (tag) <p>html. </p> <img src=" test.jpg"> <div> <p> </p> </div> 9

10 HTML (Tag) (Elements) <p>html.</p> <img src=" test.jpg"> <div> <p> </p> </div> 10

11 HTML (Attributes) (Elements) <p align="center"> </p> (Arguments) <p align="center"> </p> 11

12 HTML Editor HTML HTML, DB (PC), Coda (Mac), TextMate (Mac), Sublime Text(PC/Mac) Sublime Text 12

13 HTML Editor / drag & drop HTML,, 13

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

15 HTML <!DOCTYPE> <html> <head> html: html head:, <title>hello HTML!</title> </head> <body> body: My First HTML Page! </body> </html> 14

16 HTML <p>... </p> paragraph <br> (line break) <hn>... </hn> (heading). <h1> </h1>, <h4> </h4> 15

17 HTML <img> HTML : width, height, border <img src=" " width=" " height= " "> <a>...</a>, : target, : _blank, _top <a href=" " target="_blank"> </a> 16

18 HTML <div>...</div> HTML <div id="nav">...</div> <span>...</span> HTML <span class="red">...</span> block inline 17

19 HTML <table>, <tr>, <td> <table>...</table> border ( : border=0 border=2): <tr>...</tr> row. row <tr>...</tr> <td>...</td> row cell. 18

20 HTML <table> <table border=2 width="400"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> 19

21 HTML <table> <table border=2 width="400"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td colspan="2">3</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> 20

22 HTML <table> <table border=2 width="400"> <tr> <td rowspan="2">1</td> <td>2</td> </tr> <tr> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> 21

23 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"> 22

24 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"> 23

25 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" " DTD/xhtml1-frameset.dtd"> 24

26 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"> HTML 5 HTML <!DOCTYPE html> 25

27 HTML HTML(5) Tutorial: html/ HTML Examples: html/html_examples.asp Build a Website Tutorial:

28 CSS

29 Appearance of CSS 28

30 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 29

31 CSS CSS (Cascading Style Sheet) HTML, XHTML ( ) HTML HTML CSS 30

32 CSS CSS, table 50% ( ) HTML (w3c.org ) 31

33 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%; } 32

34 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

35 CSS Font CSS font-family "Lucida Grande", Lucida, Verdana, sans-serif font-size 10pt, 10em font-weight bold, normal font-variant small-caps, none Small Caps font-style italic, none ( ) 34

36 CSS CSS background-color #FFFF80, Ivory background-image url(bg.gif) background-repeat backgroundposition backgroundattachment repeat, repeat-x, repeat-y, no-repeat top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right scroll, fixed 35

37 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 ) / / / 36

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

39 CSS HTML CSS <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 38

40 CSS HTML <head> <style type="text/css">  </style> </head> 39

41 CSS HTML CSS HTML (inline styles) <p style="color:gray;">color is gray.</p> 40

42 CSS (selector): (class). ( :.red,.italic...) <style type="text/css">  </style> <h3 class="red">color of heading3 set to red.</h3> <p class="red">paragraph is also red.</p> 41

43 CSS (selector): (id) # ( : #navigation, #footer...) <style type="text/css">  </style> <div id="navbar">... </div> <div id="footer">... </div> 42

44 Lab1 Example (HTML&CSS)

45 HTML Example Lab1-HTML Example <!DOCTYPE> <html> <head> <title>lab 1 - Example HTML Page</title> <link rel="stylesheet" type= text/css" href="sample.css"> </head> <body> <div id="nav-bar">my navigation</div> <p class="large-red">hello, CSS!</p> <p class="small-green">hello, CSS!</p> <a href=" infovis2015">course Website</a> </body> </html> 44

46 CSS Example Lab1-CSS Example #nav-bar { background-color: maroon; color: yellow; font: small-caps bold 30px "Lucida Grande", Lucida, Verdana, sans-serif; border-color: aqua; border-width: 3px; width: 300px; height: 100px; padding: 5px; } 45

47 CSS Example Lab1-CSS Example (continued).large-red { font-size: 24px; color: red; }.small-green { font-size: 10px; color: green; } 46

48 CSS Example Lab1-CSS Example (continued) a { text-decoration: line-through; color: orange; } a:hover { text-decoration: none; color: white; background-color: maroon; } 47

49 Assignment 1: JavaScript!

50 Assignment 1: JavaScript! JavaScript Study CodeCademy: tracks/javascript ( : 9/21) 49

51 Questions...?

Week8-Extra

Week8-Extra 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