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

2. 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 2009 2

3. 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 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 2009 3

4. 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

5. 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 2009 5

6. 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 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 2009 6

7. 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

8. Scenario: Alice sends message to Bob 1) 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 user agent mail server mail server user agent 1 2 3 4 5 6 9/22/2009 Lecture 7, MAT 279, Fall 2009 8

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

10. 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 2009 10

11. 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 2009 11

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

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

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

15. 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 2009 15

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

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

18. 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 2009 18

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

20. 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 …, and href attribute  href = “a link destination”  example Tutorial link label, visible on a Web page, where you will click link destination

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

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

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

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

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

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

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

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

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

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