Lab1 - PDF Free Download

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

HTML Web Server

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

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

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

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

HTML

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

HTML (Elements) HTML (tag) <p>html. </p> <img src="http://www.joonhwan.com/images/ test.jpg"> <div> <p> </p> </div> 9

HTML (Tag) (Elements) <p>html.</p> <img src="http://www.joonhwan.com/images/ test.jpg"> <div> <p> </p> </div> 10

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

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

HTML Editor / drag & drop HTML,, 13

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML HTML(5) Tutorial: http://www.w3schools.com/ html/ HTML Examples: http://www.w3schools.com/ html/html_examples.asp Build a Website Tutorial: https:// www.codecademy.com/en/skills/make-awebsite 26

CSS

Appearance of CSS 28

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

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

CSS CSS, table 50% ( ) HTML http://www.csszengarden.com (w3c.org ) 31

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

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, sans-serif font-size 10pt, 10em font-weight bold, normal font-variant small-caps, none Small Caps font-style italic, none ( ) 34

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

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

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

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

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

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

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

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

Lab1 Example (HTML&CSS)

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="http://hcid.snu.ac.kr/courses/ infovis2015">course Website</a> </body> </html> 44

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

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

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

Assignment 1: JavaScript!

Assignment 1: JavaScript! JavaScript Study CodeCademy: https://www.codecademy.com/en/ tracks/javascript ( : 9/21) 49

Questions...?