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


Now we know


2. Find the page

in HTTP

in HTTP


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!

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


Now we know


2. Find the page

in HTTP

in HTTP


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