TA-ta-TA-ta: dalla sillabazione alla percezione degli accenti in un ritmo
HTTP HTML Introduction to web development. elaborate SPARCS 07 Wheel Moodle TA 안병욱 CS101 TA...
-
Upload
christiana-warren -
Category
Documents
-
view
217 -
download
0
Transcript of HTTP HTML Introduction to web development. elaborate SPARCS 07 Wheel Moodle TA 안병욱 CS101 TA...
HTTP
HTMLIntroduction to web development
elabo-rateSPARCS
07
Wheel
Moodle TA
안병욱CS101 TA
The presenter is
바퀴짱 ?
3 월 신작 ?
밤의 제왕 ?
악명 높은 TA?
복습아무리 하라고 해도 안 하는 그
좀 해봅시다
Inter-net?Connection of Computers in the world
WebWWW
Server ClientResponse
Request
Today’s Topic!
HTTP
HTML
Server
Client
3. ResponseSend DataSet Server-side SessionSend Cookie
in HTTP
in HTTP
Now we know
1. RequestGET, POSTSend Cookie data
2. Find the page
4. Save CookieShow data
HTTP
yper
ext
ransfer
rotocol
초월한
문서를
전달하는
( 통신 ) 규약?
HTTP
Let’s Think in Prac-tice
Why do we need?HTTP
Transferring
Documentation &Data in Request - Re-sponse POST /login/index.php HTTP/1.1
Date: Thu, 22 Apr 2010 22:39:27 GMTServer: Apache/2.2.9 (Debian)Last-Modified: Thu, 22 Apr 2010 22:39:07 GMTETag: "836-57-484dafa7bd8c0"Accept-Ranges: bytesContent-Length: 34Vary: Accept-EncodingConnection: closeContent-Type: text/html
kaist_sso_url=elaborate&pw=*******
HTTP-Transferring
UsernamePasswordPreferencesImageDateOther mediasEtc…..
Transferring
Request, How?
GETPOST
HTTP-Transferring
HEADDELETETRACEOPTION…..
Transferring
Request-HOW? GET
GET /jury_result/html/commentview.php?team=37&qid=28&qset=1&juryid=28 HTTP/1.1Host: moodle.kaist.ac.krUser-Agent: Mozilla/5.0 Gecko/20100401 Firefox/3.6.3Connection: keep-aliveCookie: MoodleSession=ee6ea60698d4ea3a5823d0edda53d95d; MOODLEID_=%25E6%25C0%251FN%25BCo%25B1%251A%25E5; MoodleSes-sionTest=SCxqtSZQa3; PHPSESSID=7200aeecff19312058d7f89872cea651Cache-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.krUser-Agent: Mozilla/5.0 Gecko/20100401 Firefox/3.6.3Date: Thu, 22 Apr 2010 22:39:27 GMTServer: Apache/2.2.9 (Debian)Last-Modified: Thu, 22 Apr 2010 22:39:07 GMTETag: "836-57-484dafa7bd8c0"Accept-Ranges: bytesContent-Length: 34Vary: Accept-EncodingConnection: closeContent-Type: text/html
kaist_sso_url=elaborate&pw=*******
POST
HTTP-Transferring
{directory}/{file}POSTed data
Transferring
Response HOW?
HTTP-Transferring
HTTP/1.1 200 OKDate: Thu, 22 Apr 2010 23:41:07 GMTServer: Apache/2.2.8 (Ubuntu) mod_fastcgi/2.4.6 PHP/5.2.4-2ubuntu5.6 with Suhosin-PatchX-Powered-By: PHP/5.2.4-2ubuntu5.6Set-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=0content-script-type: text/javascriptcontent-style-type: text/cssContent-Language: enKeep-Alive: timeout=15, max=100Connection: Keep-AliveTransfer-Encoding: chunkedContent-Type: text/html; charset=utf-8
Content body,,,,,,
HTTP code
HTML
Session
HTTP-Stateless
Stateless Request - Re-sponseStateless ??? Request Response in a
pair!Server forget your state after re-sponse!
But I want a server remember my state!
Ses-sion
Stateless Session?
SessionA Semi-permanent interac-tive information inter-change, such as Login ses-sionServer side sessionClient side session
HTTP-Stateless
Don’t be confused with Server session and Client session
Stateless Session?
Server side SessionSession which is saved in Server
HTTP-Stateless
Client side SessionSession which is saved in User’s ComputerFamous technique of client side ses-sion is Cookie
Stateless Server side Session
Server side sessionUnique identifier to associate with a file, DB, or general block datato confirm the user.
Cooperating with client side ses-sion
HTTP-Stateless
Stateless Client side Session (Cookie)Client side Session (Cookie)
A text file which is saved in User’s Computer byWeb Browser
Session managementPersonalizationTrackingAdvertising (third party)
HTTP-Stateless
Send to the Server again
For an examplehttp://moodle.kaist.ac.kr/login/index.php
POST /login/index.php HTTP/1.1Host: moodle.kaist.ac.krUser-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-000000165677Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-us,en;q=0.5Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 115Connection: keep-aliveReferer: http://moodle.kaist.ac.kr/Cookie: MOODLEID_=%25EE%25C3%2511H%25BFx%25B1%250A%25EDN%25EF; MoodleSes-sion=ee6ea60698d4ea3a5823d0edda53d95d; MoodleSessionTest=prsMxDq6lVContent-Type: application/x-www-form-urlencodedContent-Length: 34kaist_sso_url=elaborate&pw=*******
HTTP/1.1 303 See OtherDate: Thu, 22 Apr 2010 14:26:29 GMTServer: Apache/2.2.8 (Ubuntu) mod_fastcgi/2.4.6 PHP/5.2.4-2ubuntu5.6 with Suhosin-PatchX-Powered-By: PHP/5.2.4-2ubuntu5.6Expires: Thu, 19 Nov 1981 08:52:00 GMTCache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0Pragma: no-cacheSet-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: 180Keep-Alive: timeout=15, max=99Connection: Keep-AliveContent-Type: text/html
http://moodle.kaist.ac.kr/
GET / HTTP/1.1Host: moodle.kaist.ac.krUser-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-000000165677Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-us,en;q=0.5Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 115Connection: keep-aliveReferer: http://moodle.kaist.ac.kr/Cookie: MoodleSession=ee6ea60698d4ea3a5823d0edda53d95d; MoodleSessionTest=prsMxDq6lV; MOODLEID_=%25E6%25C0%251FN%25BCo%25B1%251A%25E5
HTTP/1.1 200 OKDate: Thu, 22 Apr 2010 14:26:30 GMTServer: Apache/2.2.8 (Ubuntu) mod_fastcgi/2.4.6 PHP/5.2.4-2ubuntu5.6 with Suhosin-PatchX-Powered-By: PHP/5.2.4-2ubuntu5.6Cache-Control: private, pre-check=0, post-check=0, max-age=0Pragma: no-cachecontent-script-type: text/javascriptcontent-style-type: text/cssContent-Language: enAccept-Ranges: noneKeep-Alive: timeout=15, max=98Connection: Keep-AliveTransfer-Encoding: chunkedContent-Type: text/html; charset=utf-8
HTTP-Transferring
For an exampleHTTP-Stateless
SummarizeHTTP-Summarize
HTTP
Data TransferProtocolBasically StatelessRequests (GET, POST,,,,)ResponseSession (Server side, client side)Cookie
Server
Client
3. ResponseSend DataSet Server-side SessionSend Cookie
Now we know
1. RequestGET, POSTSend Cookie data
2. Find the page
in HTTP
in HTTP
4. Save CookieShow data
HTML
yper
ext
arkup
anguage
초월한
문서를
나타내주는
언어?
HTML
HTML
Version
Here,We are going to talk about
HTML 4.0
HTML
Mark up (tags)
All are Tags
Angle brackets <html>Come in pairs <b> </b>
Start tag End tag
ComposeHTML Documents = Web pages
Browsers read! And it shows familiarpages!
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> <link rel=“stylesheet” type=“text/css” href=“/stdtheme.css” /> <meta http-equiv="Content-Type“ content="text/html; charset=utf8" /> <title> Hell World! </title> </head> <body>
Talk later inside </body></html>
TAG
Attribute
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 -->
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>
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>
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>
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>
A variety TAGSA variety of expressions
Summarize
Server
Client
3. ResponseSend DataSet Server-side SessionSend Cookie
Now we know
1. RequestGET, POSTSend Cookie data
2. Find the page
in HTTP
in HTTP
4. Save CookieShow data
Further Study
CSS (Cascading Style Sheet)
JavascriptAjaxDOM
Beautiful Web page
HTML 5.0 & XMLA NEW, SIMPLE, GREAT
HTML
Tips & References
RFC documentsRequest for comments
All matters(protocols, conventrions, other promises)are included
WikipediaQuite reliable
HTML
Tips & References
FirefoxLive headersFirebug
ChromeDeveloper tools
$nc www.naver.com 80GET HTTP 1.0LF
守破離
?! Thank you!
HTML
Tips & References
http://en.wikipedia.org/wiki/Request_for_Commentshttp://robertdenton.org/reference/css-tables-tutorial.htmlhttp://www.w3schools.com/html/http://www.somacon.com/p141.phphttp://www.w3.org/TR/html5/semantics.html#semanticshttp://en.wikipedia.org/wiki/HTMLhttp://en.wikipedia.org/wiki/HTTPhttp://moodle.kaist.ac.kr