Last Time

1
Last Time
2
Last Time

• A Computer Network is a physically connected
  network of computers (hosts), often called a LAN.
• An/The Internet is a giant virtual network
  consisting of individual LANS that are connected
• For communication, networks employ protocols
  strict communication rulesets
• A protocol-stack is a good way of looking at all
  the protocols used in certain communication and
  shows how they depend and provide services to
  each other.

3
Last time

• IP is the protocol, that takes care of
  establishing the virtual internet-network.
  Including addressing and packets.
• Routers take care of the actual packet routing
  through the internet
• TCP is the protocol that takes care of reliable
  communication
• A server is an often dedicated machine that runs
  software that provides network services eg
  webserver
• A client is a piece of software that runs on a
  host and uses server-provided services

4
Last Time

• The WWW is a network of documents rather than
  computers, linked by hyperlinks in hypertext
  documents.
• HTTP is its application layer protocol.
• SMTP is a mail sending application layer protocol.

5
Laboratory (Part 1)
6
Laboratory Part 1

• Area
• Goal
• Assignment
• Facilities
• Notes

• Goal being able to develop a interactive website
  and getting experience in working with HTML and
  embedded scripts
• We will employ JavaScript for this goal (Lecture
  3).

7
Laboratory Part 1

• Area
• Goal
• Assignment
• Facilities
• Notes

• Assignment
• The idea of the assignment is that you write a
  simple game in JavaScript. You can use an
  existing game, such as Mastermind or Tic-tac-toe,
  but you may also come up with your own game idea.
• Limitations
• No two couples can create the same game.
  Therefore all couples must check with the staff
  if their choice is unique before starting to work
  on the assignment. If there are multiple couples
  that want to program the same idea, the requests
  will be handled on a first come-first serve
  basis.
• All assignment proposals will need
  staff-approval. They will be judged mainly on
  difficulty level.

8
Laboratory Part 1

• Area
• Goal
• Assignment
• Facilities
• Notes

• Assignment can be done in duos
• If experienced, go for Assignment X
• See the website for Specs
• All couples will get an account from Sylvain
• You can also use your own webspace

9
Laboratory Part 1

• Area
• Goal
• Assignment
• Facilities
• Notes

• Grading
• Coding Quality
• Demand Compliance
• Spec Compliance
• Hand in your own Specs
• ½ A4
• Idea / Suitability
• Deadline Tuesday 5th February
• Assistance starts today

10
The WWW
11
Overview

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• What is
• An URL
• HTML
• A Tag
• Web-evolution
• CSS
• Headers
• POST GET
• A Cookie?

12
History of WWW

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• it was invented in 1989 by Tim Berners-Lee at
  CERN
• he created HTTP, URLs, HTML (sort of), and the
  first web-server and web-browser as we know it
  (1990)
• in 1991 it was available on the Internet
• he is now director of W3C the organization that
  manages the World Wide Web, and a researcher at
  MIT
• in 2004 he won the first Millennium Technology
  Prize and was made Sir Tim by the British Queen
• he never made any (commercial) profits from his
  invention
• he considered calling it The Information Mine
  (TIM)

13
URLs

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• within the www, all resources are identified by
  aUniform Resource Locator (URL)
• it is the address of a resource on the www
• usually a webpage, an image, a sound file,
• it consists of a scheme or protocol to use
  (usually HTTP), a hostname, and pathname, e.g.
  http//www.dale .liacs.nl/index.html
• sometimes a port number is included, e.g.
  http//www.dale.liacs.nl80/index.html
• URLs can be relative to the source that they are
  mentioned in a mention of /edu/index.html in the
  above document is short for http//www.dale.liacs.
  nl80/edu/index.html

14
URL Example

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• We follow following address
• http//en.wikipedia.org80/wiki/Data_mining
• Are we on wikipedia.org? DNS
• Are we on .org? DNS
• Get Addr. of wikipedia.org DNS
• Get Addr. of en.wikipedia.org DNS
• HTTP connection Addr. Browser
• Use Server there on port 80 Server
• Request File in wiki folder Server
• Request data_mining file Server
• View file Browser

15
URLs

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• Modern browsers support more protocols in URLs
• web-resource http//mediatechnology.liacs.nl
• remote login (telnet) telnetkrypton.wi.leidenuniv
  .nl
• file transfer (ftp) ftp//ftp.cs.uu.nl/pub/
• Usenet newsgroups newscomp.lang.javascript
• e-mail mailtomaarten_at_proton.nl
• local file filec\maarten\mypage.html
• If not protocol is specified http// is
  usually assumed as a default.

16
Browser

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• optional interpreter can be JavaScript
  interpreter,Flash plugin, XML parser,
• optional client can be ftp client, news client,
  mail client,

17
Communication

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• user types a URL into her browser
  (http//www.server1.com), the browser sends
  request to that machine
• the server responds with an HTML homepage
• user clicks hyperlink http//www.server2.com on
  the page,a request is sent
• the server responds with its HTML homepage

18
Communication

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• Remember
• we are talking about communication at the
  Application Layer
• all this relies on having access to a network,
  through the lower layers in the protocol stack
• HTTP runs on top of TCP, which runs on top of IP
• HTTP, or the web, is just one way of using the
  Internet

19
HTML HyperText Markup Language

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• A (the) language for writing hypertext documents
• HTML markup specifies the structure of the
  document not its presentation!
• Nowadays mostly unwanted. Solution CSS
• philosophy the author of an HTML document only
  determines its structure, the browser determines
  its presentation
• Browser knows screen resolution, color depth
  etc.
• documents can be rendered (made visible) on
  various devices e.g. graphical browsers, textual
  browsers (e.g. Lynx), printers, mobile devices,
• HTML is strictly defined by www consortium
  (w3c)http//www.w3.org/MarkUp/html-spec/html-pub
  text.html
• however, implementations are often of poor
  quality and may differ from the w3c definition
• This is the browsers implementation!

20
HTML

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• markup is composed of tags, attributes, and
  entity references
• tags are usually written ltxgt and lt/xgt, where x is
  the tag name
• tags specify a specific markup, e.g. ltPgt for
  paragraphs, ltH1gt for headings, ltAgt for anchors
  (hyperlinks)
• attributes specify additional parameters to tags,
  e.g. href for hyperlink target URLs
• entity references encode special characters, and
  are written between and characters, e.g.
  lt for character lt
• for example lta hrefindex.htmlgtltltlt/agt

21
HTML Tag Types

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• Tags are cap-independent
• There are two different tag-types
• Enclosing
• Begin and end tag
• ltXXXgt for begin
• lt/XXXgt for end
• Can sometimes be left out ? please dont!
• Same except for /
• In between is the element the markup is defined
  for
• Single
• No specific element
• Just begin tag, e.g.ltbrgt, lthrgt

22
HTML Attributes

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• Attributes specify details for a specific
  element
• lttable size9 width18gtelementlt/tablegt
• All possible attributes are defined per element.
• Dutch www.handleidinghtml.nl for a comprehensive
  list
• Problem not all wanted attributes are defined
• Possible solution (again) CSS

23
HTML Structure

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• A HTML document consists of two parts
• Head
• Contains all information that is not put into the
  viewer, mainly
• Scripts
• lttitlegt attribute
• mandatory
• Body
• Conatins all visible elements
• A HTML document begins and ends with the
  lthtmlgt-tag so the browser knows this document is
  written in html.

24
HTML simple example

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• ltHTMLgtltHEADgt ltTITLEgtMy Homepagelt/TITLEgtlt/HEADgt
  ltBODYgt Welcome to my homepage.ltBRgt
• You are probably the first visitor.lt/BODYgt
• lt/HTMLgt
• Remember to use this kind of layouting for your
  lab assignment!
• Important All layout in source file will be
  ignored. This includes excess spaces and all
  line-breaks!

25
HTML Important Tags

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• ltBRgt Linebreak
• ltPgtlt/Pgt Paragraph
• ltHxgtlt/Hxgt Headings
• The smaller x, the larger the text
• ltIMGgt Image
• Important attributes
• SRCpath Actual image
• ALTtext Alternative text
• NOT included, but linked!

26
HTML Important Tags

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• ltAgtlt/Agt Hyperlink
• Important attributes
• HREFaddress address of document
• before address means internal link
• NAMEname position name
• TARGETtarget display window
• Body attributes
• bgcolor color of background
• Text color of text
• Link color of link
• Colors are (again) specified names or RGB

27
HTML Text-Tags

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• ltIgtlt/Igt Italics
• ltBgtlt/Bgt Bold-face
• ltCENTERgtlt/CENTERgt center

28
HTML Lists

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• ltOLgtlt/OLgt Ordered List
• ltULgtlt/ULgt Unordered List
• ltLIgtlt/LIgt List Item

• Ordered 1
• Ordered 2
• Ordered 3

• Unordered 1
• Unordered 2
• Unordered 3

29
HTML Tables

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• Used for structuring elements
• ltTABLEgtlt/TABLEgt table
• Important attributes
• WIDTHx HEIGHTx size
• CELLPADDINGx cellmargins
• CELLSPACINGx space between cells
• ltTRgtlt/TRgt table row
• ltTDgtlt/TDgt table cell
• Structure
• All cells must be in a row
• ltTRgtltTDgtNamelt/TDgtltTDgtTim Cocxlt/TDgtlt/TRgt
• All cells have their own alignment

30
HTML FRAMES

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• Used to make subdocuments that independently
  change when following links.
• Defined instead of body!
• Structure
• ltFRAMESET COLS",650," FRAMEBORDER0
  FRAMESPACING0 BORDER0gt
• ltFRAME NAME"left" SRC"nothing.html"gt
• ltFRAMESET ROWS"120," FRAMEBORDER0
  FRAMESPACING0 BORDER0gt
• ltFRAME NAME"top" SRC"top.html"gt
• ltFRAME NAME"mainscreen" SRC"persinfo.htm
  l"gt
• lt/FRAMESETgt
• ltFRAME NAME "right" SRC"nothing.html"gt
• lt/FRAMESETgt

31
HTML Forms

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• Very important for dynamic websites!
• Other class
• when surfing the web, you request web-pages from
  servers
• but how do you get information to the server?
• for example, when you buy a book online
• normally data is sent from server to client
  (browser) for display
• sometimes you want to submit information from
  client to server
• one way is through an HTML form
• provides interactivity between web-user and web
  application

32
HTML Form example

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• ltFORM ACTION"http//www.liacs.nl/joostd/form.cgi
  "gt
• Your Name ltINPUT TYPE"text" NAME"surname"gt
• Male ltINPUT TYPE"radio" NAME"sex"
  VALUE"male"gt
• Female ltINPUT TYPE"radio" NAME"sex"
  VALUE"female"gt
• Dutch Citizen ltINPUT TYPE"checkbox"
  NAME"dutch"gt
• Age
• ltSELECT NAME"age"gt
• ltOPTION VALUE"young"gt0-18lt/OPTIONgt
• ltOPTION VALUE"middle"gt18-65 lt/OPTIONgt
• ltOPTION VALUE"old"gt65lt/OPTIONgt
• lt/SELECTgt
• ltINPUT TYPE"submit"gt
• lt/FORMgt

33
Web Evolution

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• initially, only very simple client/server
  architecture
• client sends requests for a document
• server retrieves document form local storage and
  sends contents to the client
• documents contain static HTML
• need for more dynamic content
• Based upon date / orders / logged in person
• server side SSI (server-side includes), CGI,
  PHP,
• need for interaction
• Moving buttons / select all / Warning boxes
• client side HTML Forms, JavaScript, Java
  Applets, ActiveX

34
Web Evolution

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• need for static layout
• Integrated logos / link colors / quick layout
  change
• CSS
• need for data exchange
• Sharing between different databses
• XML,

35
CSS Cascading StyleSheets

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• Designers wanted stricter layouts
• New tags were devised by browser-builders
• Not widely carried
• Artifacts came to be
• Tables to position stuff
• Text in images
• Etc..
• Back to HTML as structre
• Add CSS for presentation

36
CSS

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• Basic structure
• ltH1 CLASSchaptergtChapter 1lt/H1gt
• This class is defined in the document
  head-section or in a separate file
• Separation is encouraged
• Change one file? change entire set of multiple
  documents
• Clear separation of structure and presentation
• Usage in HTML
• ltHEADgt
• ltLINK RELstylesheet HREF"wt2007.css"
  TYPE"text/css"gt
• lt/HEADgt

37
CSS

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• Change appearance of all elements of a type
• H3
• font-family sans-serif
• font-size 16px
• Change appearance of a class
• .special
• font-weight bold
• Define a class for a specific tag
• H3.special
• font-decoration underline

38
CSS

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• Special tag-events
• Hover / visited / etc
• A.speciallink
• font-decoration none
• font-weight bold
• A.speciallinkhover
• font-decoration underline
• A.speciallinkvisited
• color firebrick

39
CSS Attributes

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• There are a lot of different attributes.
• Main categories
• Color and background
• Text
• Fonts
• Size
• Padding
• Border
• Margin
• Visual
• Lists
• Table
• Interface
• Comprehensible list at (again)
• http//www.handleidinghtml.nl

40
HTTP

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• application layer protocol basis of World Wide
  Web
• transfers hypertext documents (written in HTML)
  between clients and servers
• also other type of documents
• HTTP client browser, HTTP server web-server
• HTTP runs on top of TCP/IP
• HTTP servers by default run on TCP port 80
• one could say that the World Wide Web is all the
  resources and users on the Internet that are
  using the Hypertext Transfer Protocol (HTTP)

41
HTTP

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• typical HTTP scenario
• client browser connects to server, using TCP
• client sends HTTP request to server, using HTTP
• server responds by sending HTTP response, using
  HTTP
• server disconnects the TCP connection

42
HTTP Request Methods

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• GET retrieve a document
• HEAD retrieve information about the document,
  not the document itself!
• POST provide information for the server
  (generally used for fill-in web-forms)
• PUT provide a new or replacement document to be
  stored on the server
• DELETE remove a document from the server
• TRACE asks that proxies declare themselves in
  the headers, so the client can learn the path
  that the document took
• OPTIONS what other methods can be used?

43
HTTP/0.9

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• HTTP/0.9 is the basic protocol described by Tim
  B-L in 1991
• very basic, only GET request method, nothing else
• simply returns the HTML content only
• request
• GET /joostd/WebTech/
• response
• lth1gtWebtechnologielt/h1gt
• lth2gtInleiding Internetlt/h2gt
• ltulgt
• ltligtlta href"Day1/internet.htm"gtSlideslt/agt
• ltligtlta href"Day1/tutorial.html"gtTutoriallt/agt
• lt/ulgt

44
HTTP/1.0

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• an HTTP request contains
• request method (usually GET retrieve a
  document)
• a URL, identifying the document to be retrieved
• an HTTP version number HTTP/1.0
• additional information in header lines
• an empty line
• optionally, a request body (when request method
  is POST)
• an HTTP response contains
• an HTTP version number HTTP/1.0
• a status code (e.g. 200), indicating success or
  failure, and a textual annotation (e.g. OK)
• additional information in header lines
• an empty line
• a response body the data to be retrieved

45
HTTP/1.1

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• currently common version
• works pretty much the same as HTTP/1.0
• most importantly (for this course)it offers
  persistent connections (HTTP sessions)
• discussed later in this lecture

46
HTTP Transaction

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• request
• GET /joostd/WebTech/ HTTP/1.0ltempty linegt
• response
• HTTP/1.1 200 OKDate Wed, 14 Nov 2001 224545
  GMTServer Apache/1.3.12 (Unix) (Red Hat/Linux)
  PHP/3.0.18 mod_perl/1.23Last-Modified Mon, 12
  Nov 2001 202014 GMTETag "69f43-148-3bf02efeA
  ccept-Ranges bytesContent-Length
  328Connection closeContent-Type
  text/htmlltHTMLgtltH1gtWebtechnologielt/H1gt

response header
responsebody
47
HTTP Transaction

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

48
HTTP Transaction

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

49
HTTP Status Codes

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• HTTP status codes are organized in ranges
• Code Response Meaning100-199 informational200-29
  9 client request successful300-399 client
  request redirected, further action
  necessary400-499 client request
  incomplete500-599 server errors
• most famous are 200 OK, 404 Not found
• the myth about 404 being Tim Berners-Lees
  room-number at CERN is not true. There is no room
  04 in CERN building 4

50
MIME Multipurpose Internet Mail Extension

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• originally developed for sending non-text mail
  attachments
• remember, HTTP was originally meant for hypertext
• MIME is used from HTTP/1.0 to enable sending
  hypermedia instead of simply hypertext
• for example, an image file or sound file
• based on mime types
• sent as HTTP response header, e.g. Content-type
  text/html
• CSS file!
• used by server to indicate type of media
  (associates filename extensions of resources with
  mime types)
• used by client to interpret the response body (or
  let a plugin or external program handle it)

51
MIME Types

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• text/plain
• text/html
• text/css
• text/xml
• text/vnd.wap.wml
• image/gif
• image/jpeg
• video/mpeg
• audio/wav
• application/msword

52
HTTP Headers

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• they contain (meta-)information about
• the server
• the client
• the body (which is called entity in HTTP)
• and are used for
• handling multimedia content
• internationalization
• redirection
• logging
• session maintenance

53
HTTP Client Request

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

54
HTTP Server Response

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

55
HTTP Request Headers

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• Accept specifies which media formats the client
  accepts
• Accept-Language specifies the language in which
  the client prefers the data
• Cookie used to convey data stored for the
  specific server
• From indicates the e-mail address of the user
• Host specifies the host and port number that the
  client connected to (required for all clients in
  HTTP/1.1)
• If-Modified-Since requests the document only if
  newer than the specified date
• Referer specifies the URL of the document that
  contained the link to this one (i.e. the previous
  document)
• User-Agent identifies the client program
• note how referer is misspelled in the protocol!

56
HTTP Entity Headers

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• Content-Language specifies the language used in
  the document (entity) being returned
• Content-Length specifies the length of the
  entity
• Content-Type specifies the media type of the
  entity (MIME)
• Expires gives a date and time that the contents
  may change
• Last-Modified gives the date and time that the
  entity was last changed
• Location specifies the location of a created or
  moved document

57
HTTP Request Header Example

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• example retrieving a cached document
• GET / HTTP/1.1
• If-Modified-Since Thu, 03 May 2001 160118
  GMT
• response
• HTTP/1.1 304 Not Modified
• Date Wed, 18 Dec 2002 221702 GMT
• Server Apache/2.0.43 (Win32)
• Connection close
• ETag "1f164-5d6-8ba74f801f180-9c0-f1868a00
• Content-Location index.html.en
• Last-Modified Wed, 15 Nov 1995 045808 GMT
• Expires Wed, 18 Dec 2002 221702 GMT
• ...

58
HTML forms passing data

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• Q how can we pass data from a form to a web
  application?
• A all data entered in the form is collected by
  the browser and transferred from the client to
  the server using either
• a GET request with the encoded data in the URL
  query string (after a ? character)GET
  /cgi-bin/ice.cgi?scoops2flavorcherry HTTP/1.0
• a POST request with the encoded data in the
  entity bodyPOST /cgi-bin/ice.cgi
  HTTP/1.0Content-type application/x-www-form-urle
  ncodedContent-length 22
• scoops2flavorcherry
• The data is now ready to be read out by the
  referred file
• See later class!

59
POST Method

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• The POST method is most often used in
  client-server communication
• Variables hidden for user
• Not save-able
• For example the sending of a hotmail
• Still a nice URL in the bar
• Why GET
• Save-able is wanted
• For example ?languageEN
• You want to link to a specific dynamic page

60
HTML Forms Encoding

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• to prepare data for transfer to a web-app (via a
  POST or GET request), the web client encodes the
  data for you.
• collects all form element names and values
• glues each name/value pair together with
• glues resulting pairs together with
• replaces each space character by
• replaces all non-alphanumeric (weird) characters
  by xx, where xx is their hexadecimal ASCII
  code
• example Han la Poutré wants 2 scoops of cherry
  ice cream
• namelaPoutrE9scoops2flavorcherry

61
HTTP Remembering Users

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• IP-addresses may change
• You would want to remember users
• Automatic login
• Special orders based upon profile
• Or even remember some-ones shoppingbasket when
  browsing for next article.
• Solution
• Cookies
• Sessions

62
Cookies

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• an HTTP cookie is a packet of textual information
  sent by a web server for storage on a client
  machine, and then sent back by the client each
  time it accesses that same server
• a HTTP server uses the Set-cookie response
  header field
• Set-cookie cart2242 items198234 expire
  Wed,
• Set-cookie sexmale car1991-Peugeot-205-1.1
• when the client requests another page from the
  same server, the cookie value is returned via the
  HTTP requests Cookie header field
• Cookie cart2242 items198234 Cookie
  sexmale car1991-Peugeot-205-1.1

63
Cookies Privacy

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• cookies can only take very little space on your
  PC
• cookies are good for storing useful information,
  however
• they can also be abused to compromise a users
  privacy
• data about the user can be stored for future use,
  without the user (usually) knowing this
• for example
• when viewing a web-page, images from a
  third-party server, say www.spam.com, are loaded
  automatically without the user being aware
• each resulting HTTP request to www.spam.com
  includes a cookie, containing information that
  uniquely identifies the client to the server
  www.spam.com
• when visiting other web-pages later, images from
  the same server www.spam.com may be used to
  identify you, log your web-surfing habits, ban
  you, or give you custom adds

64
Sessions

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• HTTP is a stateless protocolan HTTP response
  depends on its corresponding request only. Not on
  previous requests from that same client
• after a server sends an HTTP response, the TCP
  connection is terminated immediately (well, up to
  HTTP/1.0 at least)
• on a next request, the client must reestablish a
  new connection
• the server has no way of knowing which client
  made which previous requests
• sessions are required to create for instance a
  shopping kart on an e-commerce website
• Q how can a server relate subsequent requests
  from a specific client in order to create the
  notion of a session?

65
Sessions

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• simulating a persistent connection (a.k.a.
  session) requires a mechanism to relate separate
  client requests by maintaining a session ID
  throughout HTTP communication
• three commonly used mechanisms exist
• cookies include the session ID as a text value
  in HTTP request and response header fields. The
  server maintains a list of cookie values to
  simulate state between multiple HTTP transactions
• URL rewriting each URL linking to the next page
  is rewritten to include the session ID in the
  query string (after the ? character)
  www.liacs.nl/hello.index?id19680128
• hidden fields include a form in each page with a
  hidden field containing the value of the session
  ID (user is unaware of the form)
• POST!!
• These methods van be easily eployed via server
  sided scripting
• later class

66
Next Time

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• Client Side technology
• JavaScript
• Etc

67
Homework

• Area
• Overview
• WWW History
• URLs
• Communication
• HTML
• Evolution
• CSS
• HTTP
• POST GET
• Cookies
• Sessions
• Next Week
• Homework

• The material for Lecture 2
• This will appear on the site today!