HTTP HTML Introduction to web development

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

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

Internet? Connection of Computers in the world

Web WWW

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

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

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

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

Transferring Documentation & Data in Request - Response POST /login/index.php HTTP/1.1 Date: Thu, 22 Apr :39:27 GMT Server: Apache/2.2.9 (Debian) Last-Modified: Thu, 22 Apr :39:07 GMT ETag: " dafa7bd8c0" 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…..

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

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/ Firefox/3.6.3 Connection: keep-alive Cookie: MoodleSession=ee6ea60698d4ea3a5823d0edda53d95d; MOODLEID_=%25E6%25C0%251FN%25BCo%25B1%251A%25E5; MoodleSessionTest=SCxqtSZQa3; PHPSESSID=7200aeecff d7f89872cea651 Cache-Control: max-age=0 GET HTTP-Transferring {directory}/{file} GET data

Transferring Request-HOW? POST POST /login/index.php HTTP/1.1 Host: moodle.kaist.ac.kr User-Agent: Mozilla/5.0 Gecko/ Firefox/3.6.3 Date: Thu, 22 Apr :39:27 GMT Server: Apache/2.2.9 (Debian) Last-Modified: Thu, 22 Apr :39:07 GMT ETag: " dafa7bd8c0" 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

Transferring Response HOW? HTTP-Transferring HTTP/ OK Date: Thu, 22 Apr :41:07 GMT Server: Apache/2.2.8 (Ubuntu) mod_fastcgi/2.4.6 PHP/ ubuntu5.6 with Suhosin-Patch X-Powered-By: PHP/ ubuntu5.6 Set-Cookie: MoodleSession=48aa8a6c158048a7d005be543db753ee; path=/ Set-Cookie: MoodleSessionTest=y9P4MVf6Rc; path=/ Set-Cookie: MOODLEID_=deleted; expires=Wed, 22-Apr :41:06 GMT; path=/ Set-Cookie: MOODLEID_=%25ED%25C3%251CC%25B7d; expires=Mon, 21-Jun :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

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

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

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

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

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

For an example 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: ) Gecko/ Firefox/3.6.3 IPMS/8BEAF88F-14BD0306AFA 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 ,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Connection: keep-alive Referer: 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/ See Other Date: Thu, 22 Apr :26:29 GMT Server: Apache/2.2.8 (Ubuntu) mod_fastcgi/2.4.6 PHP/ ubuntu5.6 with Suhosin- Patch X-Powered-By: PHP/ ubuntu5.6 Expires: Thu, 19 Nov :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 :26:29 GMT; path=/ Set-Cookie: MOODLEID_=%25E6%25C0%251FN%25BCo%25B1%251A%25E5; expires=Mon, 21-Jun :26:30 GMT; path=/ Location: Content-Length: 180 Keep-Alive: timeout=15, max=99 Connection: Keep-Alive Content-Type: text/html GET / HTTP/1.1 Host: moodle.kaist.ac.kr User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv: ) Gecko/ Firefox/3.6.3 IPMS/8BEAF88F-14BD0306AFA 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 ,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Connection: keep-alive Referer: Cookie: MoodleSession=ee6ea60698d4ea3a5823d0edda53d95d; MoodleSessionTest=prsMxDq6lV; MOODLEID_=%25E6%25C0%251FN%25BCo%25B1%251A%25E5 HTTP/ OK Date: Thu, 22 Apr :26:30 GMT Server: Apache/2.2.8 (Ubuntu) mod_fastcgi/2.4.6 PHP/ ubuntu5.6 with Suhosin- Patch X-Powered-By: PHP/ ubuntu5.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

For an example HTTP-Stateless

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

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

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

Version Here, We are going to talk about HTML 4.0

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!

HTML Mark up (tags) Basic Tags <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ " Hell World! Talk later inside TAG Attribute

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!

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

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

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

HTML Mark up (tags) Basic Tags (Tags for HTTP) AA BB CC Male Female textarea

A variety TAGS A variety of expressions Summarize

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

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

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

HTML Tips & References Firefox Live headers Firebug Chrome Developer tools $nc 80 GET HTTP 1.0 LF

守破離

? ! Thank you!

HTML Tips & References