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 2009 1

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 FTPserver

FTPuser

interface

FTPclient

local filesystem

remote filesystem

user at host

9/22/2009 Lecture 7, MAT 279, Fall 2009 2

FTP: separate control, data connections

1. FTP client contacts FTP server at port 21

2. 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 2nd TCP connection (for file) to client

5. after transferring one file, server closes data connection.

FTPclient

FTPserver

TCP control connection

port 21

TCP data connectionport 20

Difference between HTTP and FTP?

9/22/2009 Lecture 7, MAT 279, Fall 2009 3

Chapter 2: Application layer

2.1 Web and HTTP 2.2 FTP 2.3 SMTP

9/22/2009 Lecture 7, MAT 279, Fall 2009 4

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

mailserver

useragent

useragent

useragent

mailserver

useragent

useragent

mailserver

useragent

SMTP

SMTP

SMTP

9/22/2009 Lecture 7, MAT 279, Fall 2009 5

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 email messages client: sending mail

server “server”: receiving

mail server

mailserver

useragent

useragent

useragent

mailserver

useragent

useragent

mailserver

useragent

SMTP

SMTP

SMTP

9/22/2009 Lecture 7, MAT 279, Fall 2009 6

Electronic Mail: SMTP [RFC 2821]

uses TCP to reliably transfer email 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 2009 7

Scenario: Alice sends message to Bob1) Alice uses UA to compose

message and “to” bob@someschool.edu

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

useragent

mailserver

mailserver user

agent

1

2 3 4 56

9/22/2009 Lecture 7, MAT 279, Fall 2009 8

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 2009 9

Mail access protocols

useragent

sender’s mail server

useragent

SMTP SMTP accessprotocol

receiver’s mail server

• Post Office Protocol (POP3)

• Internet Message Access Protocol (IMAP)

9/22/2009 Lecture 7, MAT 279, Fall 2009 10

POP3 and IMAP: ComparisonPOP3 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 2009 11

Back to HTML (cont.)

9/22/2009 Lecture 7, MAT 279, Fall 2009 12

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 2009 13

Image tag

example: <IMG src=“dave_logo.jpg” alt=“Dave’s logo”>

<IMG> 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 2009 14

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:

<IMG src=“logo.jpg” width=“100” height=“200” alt=“Dave’s logo”>

9/22/2009 Lecture 7, MAT 279, Fall 2009 15

Image tag (cont.) place an image in center of a browser

<CENTER>, … </CENTER> tag example<CENTER><IMG src=“logo.jpg” width=“100” height=“200”

alt=“Dave’s logo”></CENTER>

Alternatively,<h1 style=“text-align:center”> <IMG src=“logo.jpg”

width=“100” height=“200” alt=“Dave’s logo”> </h1>

9/22/2009 Lecture 7, MAT 279, Fall 2009 16

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 2009 17

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 <IMG> tag

Example if <IMG src=“logo.jpg” …> 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 2009 18

Creating a Hypertext Link

9/22/2009 Lecture 7, MAT 279, Fall 2009 19

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 2009 20

use anchor tags <a>…</a>, and href attribute href = “a link destination”

example <a href = “tutorial.html”> Tutorial </a>

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 2009 21

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 2009 22

(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 2009 23

Linear Structures

9/22/2009 Lecture 7, MAT 279, Fall 2009 24

(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 2009 25

Hierarchical Structures

9/22/2009 Lecture 7, MAT 279, Fall 2009 26

(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 2009 27

Mixed Structures

9/22/2009 Lecture 7, MAT 279, Fall 2009 28

(4) Protected Structures

9/22/2009 Lecture 7, MAT 279, Fall 2009 29

Exercise?

9/22/2009 Lecture 7, MAT 279, Fall 2009 30