Chapter 2: Application layer  2.1 Web, HTTP and HTML (We will continue…)  2.2 FTP  2.3 SMTP 9/22/2009 Lecture 7, MAT 279, Fall

FTP: the file transfer protocol  transfer file to/from remote host  client/server model  client: side that initiates transfer (either to/from remote)  server: remote host  ftp server: port 21 file transfer FTP server FTP user interface FTP client local file system remote file system user at host 9/22/2009 Lecture 7, MAT 279, Fall

FTP: separate control, data connections 1. FTP client contacts FTP server at port client authorized over control connection 3. client browses remote directory by sending commands over control connection. 4. when server receives file transfer command, server opens 2 nd TCP connection (for file) to client 5. after transferring one file, server closes data connection. FTP client FTP server TCP control connection port 21 TCP data connection port 20  Difference between HTTP and FTP? 9/22/2009 Lecture 7, MAT 279, Fall

Chapter 2: Application layer  2.1 Web and HTTP  2.2 FTP  2.3 SMTP 9/22/2009 Lecture 7, MAT 279, Fall

Electronic Mail Three major components:  user agents  mail servers  simple mail transfer protocol: SMTP User Agent  a.k.a. “mail reader”  composing, editing, reading mail messages  e.g., Outlook, Mozilla Thunderbird  outgoing, incoming messages stored on server user mailbox outgoing message queue mail server user agent user agent user agent mail server user agent user agent mail server user agent SMTP 9/22/2009 Lecture 7, MAT 279, Fall

Electronic Mail: mail servers Mail Servers  mailbox contains incoming messages for user  message queue of outgoing (to be sent) mail messages  SMTP protocol between mail servers to send messages  client: sending mail server  “server”: receiving mail server mail server user agent user agent user agent mail server user agent user agent mail server user agent SMTP 9/22/2009 Lecture 7, MAT 279, Fall

Electronic Mail: SMTP [RFC 2821]  uses TCP to reliably transfer message from client to server, port 25  direct transfer: sending server to receiving server  three phases of transfer  handshaking (greeting)  transfer of messages  closure 9/22/2009 Lecture 7, MAT 279, Fall

Scenario: Alice sends message to Bob 1) Alice uses UA to compose message and “to” 2) Alice’s UA sends message to her mail server; 3) Message placed in message queue 4) Client side of SMTP opens TCP connection with Bob’s mail server and sends Alice’s message 5) Bob’s mail server places the message in Bob’s mailbox 6)Bob invokes his user agent to read message user agent mail server mail server user agent /22/2009 Lecture 7, MAT 279, Fall

SMTP: comparison with HTTP  SMTP uses persistent connections Comparison with HTTP:  HTTP: pull  SMTP: push  HTTP: each object encapsulated in its own response msg  SMTP: multiple objects handled 9/22/2009 Lecture 7, MAT 279, Fall

Mail access protocols user agent sender’s mail server user agent SMTP access protocol receiver’s mail server Post Office Protocol (POP3) Internet Message Access Protocol (IMAP) 9/22/2009 Lecture 7, MAT 279, Fall

POP3 and IMAP: Comparison POP3  Uses “download and delete” mode.  Bob cannot re-read e- mail if he changes client  POP3 is stateless across sessions IMAP  Keep all messages in one place: the server  Allows user to organize messages in folders  IMAP keeps user state across sessions:  names of folders and mappings between message IDs and folder name 9/22/2009 Lecture 7, MAT 279, Fall

Back to HTML (cont.) 9/22/2009 Lecture 7, MAT 279, Fall

What we have learned so far:  2.1 Basic HTML page development  2.2 Tags… (example?)  2.3 Lists… (example?)  2.4 Attributes… (example?)  2.5 Single Tag… (example?) So far, we have learned text handling. How about Image? Image handling in HTML 9/22/2009 Lecture 7, MAT 279, Fall

Image tag  example:   tag: place images on Web Pages  src attribute: specifies name of image file  attribute_name: src  attribute_value: source file name  alt attribute, give your image a hidden name  attribute_value: a hidden name of your image 9/22/2009 Lecture 7, MAT 279, Fall

Image tag (cont.)  WIDTH, HEIGHT attribute: specifies size of image file  attribute_name: width, height  attribute_value: define the width or the height of a image  example: 9/22/2009 Lecture 7, MAT 279, Fall

Image tag (cont.)  place an image in center of a browser , … tag  example  Alternatively, 9/22/2009 Lecture 7, MAT 279, Fall

Remember:  use image files in.gif,.jpg,.png format  do NOT use.bmp,.tiff,.pict  use images with small size 9/22/2009 Lecture 7, MAT 279, Fall

NOTE  When insert an image, make sure that the image file is located at the same disk directory as shown in your src attribute in tag  Example  if is used in your html file, then the image file (logo.jpg) MUST be installed in the same disk and same file folder with your html file! 9/22/2009 Lecture 7, MAT 279, Fall

Creating a Hypertext Link 9/22/2009 Lecture 7, MAT 279, Fall

Hyperlinks  Hyperlink “A clickable HTML element that will direct the web browser to display a different Web page or a different location on the current Web page.” 9/22/2009 Lecture 7, MAT 279, Fall  use anchor tags …, and href attribute  href = “a link destination”  example Tutorial link label, visible on a Web page, where you will click link destination

Next Level: Developing a Web Site 9/22/2009 Lecture 7, MAT 279, Fall

Web Site Structures  A well-designed structure ensures users  navigate the site  not get lost or miss important information  A storyboard is a diagram of a Web site’s structure  shows all pages in a site  indicates how the pages are linked together  defines a structure works best for the type of information of the site 9/22/2009 Lecture 7, MAT 279, Fall

(1) Linear Structures  each page is linked with the page follows and the page precedes it in a chain  works best for Web pages with a clearly defined order  commonly, each page contains an additional link back to an opening page 9/22/2009 Lecture 7, MAT 279, Fall

Linear Structures 9/22/2009 Lecture 7, MAT 279, Fall

(2) Hierarchical Structures  pages are linked going from the home page down to more specific pages  users easily move from general to specific and back  a user can move quickly to a specific page without moving through each page in order 9/22/2009 Lecture 7, MAT 279, Fall

Hierarchical Structures 9/22/2009 Lecture 7, MAT 279, Fall

(3) Mixed Structures  overall form hierarchical, allowing the user to move from general to specific  in the same time, links allow users to move through the site in a linear fashion 9/22/2009 Lecture 7, MAT 279, Fall

Mixed Structures 9/22/2009 Lecture 7, MAT 279, Fall

(4) Protected Structures 9/22/2009 Lecture 7, MAT 279, Fall

Exercise? 9/22/2009 Lecture 7, MAT 279, Fall