1 / 40

HT TP

HT ML. HT TP. Introduction to web development. elaborate. Wheel. 바퀴짱 ?. SPARCS 07. 밤의 제왕 ?. 안병 욱. The presenter is . Moodle TA. CS101 TA. 악명 높은 TA?. 3 월 신작 ?. 아무리 하라고 해도 안 하는 그. 복 습. 좀 해봅시다. Internet?. Connection of Computers in the world. Web. WWW. Today’s Topic!. Server.

talisa
Download Presentation

HT TP

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML HTTP Introduction to web development

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

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

  4. Internet? Connection of Computers in the world

  5. Web WWW

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

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

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

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

  10. HTTP-Transferring Transferring Documentation & Data in Request - Response Username Password Preferences Image Date Other medias Etc….. 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=*******

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

  12. HTTP-Transferring Transferring Request-HOW? GET GET {directory}/{file} GET data GET /jury_result/html/commentview.php?team=37&qid=28&qset=1&juryid=28HTTP/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

  13. HTTP-Transferring Transferring Request-HOW? POST POST {directory}/{file} POSTed data 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=*******

  14. HTTP-Transferring Transferring Response HOW? 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 Session HTML

  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! Session

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

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

  18. HTTP-Stateless 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

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

  20. HTTP-Transferring 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

  21. HTTP-Stateless For an example

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

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

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

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

  26. HTML Mark up (tags) All are Tags Angle brackets <html> Come in pairs <b> </b> Start tag End 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">   <html> <head> <linkrel=“stylesheet” type=“text/css”href=“/stdtheme.css” /> <metahttp-equiv="Content-Type“ content="text/html; charset=utf8" /> <title>Hell World! </title> </head> <body> Talk later inside </body> </html> TAG Attribute

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

  29. HTML Mark up (tags) Basic Tags (table) <table> <tbody> <tr> <th> Table header1 </th> <th> Table header2 </th> </tr> <tr> <td> A </td> <td> B </td> </tr> </tbody> </table>

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

  31. HTML Mark up (tags) Basic Tags (strong, em) (link, image) <strong> Strong! </strong> <em>Emphasize</em> <br> <a href="www.naver.com">Welcome to naver</a> <img src="http://static.naver.com/www/u/2010/0402/nmms_201510131.gif"> <br><br> <a href="www.naver.com"> <img src="http://static.naver.com/www/u/2010/0402/nmms_201510131.gif"></a>

  32. HTML Mark up (tags) Basic Tags (Tags for HTTP) <form method="post" action="./ttt.php"> <select name="select"> <option value=1>1.1.1.1</option> <option value=2>2.2.2.2</option> <option value=3>3.3.3.3</option> </select><br> <input type="text" name="comment"><br> <input type="hidden" name="studentid" value=2000><br> <input type="checkbox" name="A" value="A“ > AA <br> <input type="checkbox" name="B" value="B“ > BB <br> <input type="checkbox" name="C" value="C“ > CC <br> <input type="radio" name="sex" value="M“ > Male <br> <input type="radio" name="sex" value="F“ > Female <br> <textarea> textarea </textarea> <br> <input type="submit" value="GOGOGO"> </form>

  33. Summarize A variety TAGS A variety of expressions

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

  35. Further Study CSS (Cascading Style Sheet) Beautiful Web page Javascript DOM Ajax 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 $nc www.naver.com 80 GET HTTP 1.0 LF Firefox Live headers Firebug Chrome Developer tools

  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

More Related