1. HTTP HTML Introduction to web development

2. elaborate SPARCS 07 Wheel Moodle TA 안병욱 CS101 TA The presenter is 바퀴짱 ? 3 월 신작 ? 밤의 제왕 ? 악명 높은 TA?

3. 복습 아무리 하라고 해도 안 하는 그 좀 해봅시다

4. Internet? Connection of Computers in the world

5. Web WWW

6. Server Client Response Request Today’s Topic! HTT P HTML

7. Server Client 3. Response Send Data Set Server-side Session Send Cookie in HTTP Now we know 1. Request GET, POST Send Cookie data 2. Find the page 4. Save Cookie Show data

8. yper ext ransfer rotocol 초월한 문서를 전달하는 ( 통신 ) 규약 ? HTTP

9. Let’s Think in Practice Why do we need? HTTP

10. Transferring Documentation & Data in Request - Response POST /login/index.php HTTP/1.1 Date: Thu, 22 Apr 2010 22:39:27 GMT Server: Apache/2.2.9 (Debian) Last-Modified: Thu, 22 Apr 2010 22:39:07 GMT ETag: "836-57-484dafa7bd8c0" Accept-Ranges: bytes Content-Length: 34 Vary: Accept-Encoding Connection: close Content-Type: text/html kaist_sso_url=elaborate&pw=******* HTTP-Transferring Username Password Preferences Image Date Other medias Etc…..

11. Transferring Request, How? GET POST HTTP-Transferring HEAD DELETE TRACE OPTION…..

12. Transferring Request-HOW? GET GET /jury_result/html/commentview.php?team=37&qid=28&qset=1&juryid=28 HTTP/1.1 Host: moodle.kaist.ac.kr User-Agent: Mozilla/5.0 Gecko/20100401 Firefox/3.6.3 Connection: keep-alive Cookie: MoodleSession=ee6ea60698d4ea3a5823d0edda53d95d; MOODLEID_=%25E6%25C0%251FN%25BCo%25B1%251A%25E5; MoodleSessionTest=SCxqtSZQa3; PHPSESSID=7200aeecff19312058d7f89872cea651 Cache-Control: max-age=0 GET HTTP-Transferring {directory}/{file} GET data

13. Transferring Request-HOW? POST POST /login/index.php HTTP/1.1 Host: moodle.kaist.ac.kr User-Agent: Mozilla/5.0 Gecko/20100401 Firefox/3.6.3 Date: Thu, 22 Apr 2010 22:39:27 GMT Server: Apache/2.2.9 (Debian) Last-Modified: Thu, 22 Apr 2010 22:39:07 GMT ETag: "836-57-484dafa7bd8c0" Accept-Ranges: bytes Content-Length: 34 Vary: Accept-Encoding Connection: close Content-Type: text/html kaist_sso_url=elaborate&pw=******* POST HTTP-Transferring {directory}/{file} POSTed data

14. Transferring Response HOW? HTTP-Transferring HTTP/1.1 200 OK Date: Thu, 22 Apr 2010 23:41:07 GMT Server: Apache/2.2.8 (Ubuntu) mod_fastcgi/2.4.6 PHP/5.2.4-2ubuntu5.6 with Suhosin-Patch X-Powered-By: PHP/5.2.4-2ubuntu5.6 Set-Cookie: MoodleSession=48aa8a6c158048a7d005be543db753ee; path=/ Set-Cookie: MoodleSessionTest=y9P4MVf6Rc; path=/ Set-Cookie: MOODLEID_=deleted; expires=Wed, 22-Apr-2009 23:41:06 GMT; path=/ Set-Cookie: MOODLEID_=%25ED%25C3%251CC%25B7d; expires=Mon, 21-Jun-2010 23:41:07 GMT; path=/ Cache-Control: private, pre-check=0, post-check=0, max-age=0 content-script-type: text/javascript content-style-type: text/css Content-Language: en Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=utf-8 Content body,,,,,, HTTP code HTML Session

15. HTTP-Stateless Stateless Request - Response Stateless ??? Request Response in a pair! Server forget your state after response! But I want a server remember my state! Sessio n

16. Stateless Session? Session A Semi-permanent interactive information interchange, such as Login session Server side session Client side session HTTP-Stateless Don’t be confused with Server session and Client session

17. Stateless Session? Server side Session Session which is saved in Server HTTP-Stateless Client side Session Session which is saved in User’s Computer Famous technique of client side session is Cookie

18. Stateless Server side Session Server side session Unique identifier to associate with a file, DB, or general block data to confirm the user. Cooperating with client side session HTTP-Stateless

19. Stateless Client side Session ( Cookie ) A text file which is saved in User’s Computer by Web Browser Session management Personalization Tracking Advertising (third party) HTTP-Stateless Send to the Server again

20. For an example http://moodle.kaist.ac.kr/login/index.php POST /login/index.php HTTP/1.1 Host: moodle.kaist.ac.kr User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 IPMS/8BEAF88F-14BD0306AFA-000000165677 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Connection: keep-alive Referer: http://moodle.kaist.ac.kr/ Cookie: MOODLEID_=%25EE%25C3%2511H%25BFx%25B1%250A%25EDN%25EF; MoodleSession=ee6ea60698d4ea3a5823d0edda53d95d; MoodleSessionTest=prsMxDq6lV Content-Type: application/x-www-form-urlencoded Content-Length: 34 kaist_sso_url=elaborate&pw=******* HTTP/1.1 303 See Other Date: Thu, 22 Apr 2010 14:26:29 GMT Server: Apache/2.2.8 (Ubuntu) mod_fastcgi/2.4.6 PHP/5.2.4-2ubuntu5.6 with Suhosin- Patch X-Powered-By: PHP/5.2.4-2ubuntu5.6 Expires: Thu, 19 Nov 1981 08:52:00 GMT Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Pragma: no-cache Set-Cookie: MOODLEID_=deleted; expires=Wed, 22-Apr-2009 14:26:29 GMT; path=/ Set-Cookie: MOODLEID_=%25E6%25C0%251FN%25BCo%25B1%251A%25E5; expires=Mon, 21-Jun- 2010 14:26:30 GMT; path=/ Location: http://moodle.kaist.ac.kr/ Content-Length: 180 Keep-Alive: timeout=15, max=99 Connection: Keep-Alive Content-Type: text/html http://moodle.kaist.ac.kr/ GET / HTTP/1.1 Host: moodle.kaist.ac.kr User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 IPMS/8BEAF88F-14BD0306AFA-000000165677 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Connection: keep-alive Referer: http://moodle.kaist.ac.kr/ Cookie: MoodleSession=ee6ea60698d4ea3a5823d0edda53d95d; MoodleSessionTest=prsMxDq6lV; MOODLEID_=%25E6%25C0%251FN%25BCo%25B1%251A%25E5 HTTP/1.1 200 OK Date: Thu, 22 Apr 2010 14:26:30 GMT Server: Apache/2.2.8 (Ubuntu) mod_fastcgi/2.4.6 PHP/5.2.4-2ubuntu5.6 with Suhosin- Patch X-Powered-By: PHP/5.2.4-2ubuntu5.6 Cache-Control: private, pre-check=0, post-check=0, max-age=0 Pragma: no-cache content-script-type: text/javascript content-style-type: text/css Content-Language: en Accept-Ranges: none Keep-Alive: timeout=15, max=98 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=utf-8 HTTP-Transferring

21. For an example HTTP-Stateless

22. Summarize HTTP-Summarize HTTP Data Transfer Protocol Basically Stateless Requests (GET, POST,,,,) Response Session (Server side, client side) Cookie

23. Serve r Client 3. Response Send Data Set Server-side Session Send Cookie Now we know 1. Request GET, POST Send Cookie data 2. Find the page in HTTP 4. Save Cookie Show data

24. yper ext arkup anguage 초월한 문서를 나타내주는 언어 ? HTML

25. Version Here, We are going to talk about HTML 4.0

26. HTML Mark up (tags) All are Tags Angle brackets Come in pairs Start tagEnd tag Compose HTML Documents = Web pages Browsers read! And it shows familiar pages!

27. HTML Mark up (tags) Basic Tags <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ "http://www.w3.org/TR/html4/loose.dtd"> Hell World! Talk later inside TAG Attribute

28. HTML Mark up (tags) Basic Tags (headings) This is h1 This is h2 This is h3 This is h4 This is h5 This is h6 This is just text!

29. HTML Mark up (tags) Basic Tags (table) Table header1 Table header2 A B

30. HTML Mark up (tags) Basic Tags (block and inline) 더 멋진 내가 되는 날 다 값아 주겠어 ! 논 자유의 몸이 아냐 요태까지 그래왔꼬, 아패로도 캐속. 똑바로 해 넌 정말 BAD BOY! 사랑보단 호기심 뿐 똑바로 해 넌 정말 BAD BOY! 사랑보단 호기심 뿐

31. HTML Mark up (tags) Basic Tags (strong, em) (link, image) Strong! Emphasize Welcome to naver

32. HTML Mark up (tags) Basic Tags (Tags for HTTP) 1.1.1.1 2.2.2.2 3.3.3.3 AA BB CC Male Female textarea

33. A variety TAGS A variety of expressions Summarize

34. Serve r Client 3. Response Send Data Set Server-side Session Send Cookie Now we know 1. Request GET, POST Send Cookie data 2. Find the page in HTTP 4. Save Cookie Show data

35. Further Study CSS ( Cascading Style Sheet ) Javascript AjaxDOM Beautiful Web page HTML 5.0 & XML A NEW, SIMPLE, GREAT

36. HTML Tips & References RFC documents Request for comments All matters (protocols, conventrions, other promises) are included Wikipedia Quite reliable

37. HTML Tips & References Firefox Live headers Firebug Chrome Developer tools $nc www.naver.com 80 GET HTTP 1.0 LF

38. 守破離

39. ? ! Thank you!

40. HTML Tips & References http://en.wikipedia.org/wiki/Request_for_Comments http://robertdenton.org/reference/css-tables-tutorial.html http://www.w3schools.com/html/ http://www.somacon.com/p141.php http://www.w3.org/TR/html5/semantics.html#semantics http://en.wikipedia.org/wiki/HTML http://en.wikipedia.org/wiki/HTTP http://moodle.kaist.ac.kr