1. World Wide Web1 Applications World Wide Web

2. 2 Introduction What is hypertext model? Use of hypertext in World Wide Web (WWW) – HTML. WWW client-server model. Use of TCP/IP protocols in WWW: HTTP.

3. World Wide Web3 Hypertext/Hypermedia Linear & Hypertext (or Hypermedia) Documents. Hypermedia system allows interactive access to collections of documents. Document can hold: –Text (hypertext) –Graphics –Sound –Animations –Video

4. World Wide Web4 Hypertext/Hypermedia Documents linked together –Nondistributed - all documents stored locally (like CD-ROM) –Distributed - documents stored on remote servers Why Hypertext for the Web?

5. World Wide Web5 Hypermedia Pointers How are the documents linked together? Each document contains links (pointers) to other documents –Link represented by "active area" on screen Graphic - button Text - highlighted –Selecting link fetches referenced document for display Links may become invalid –Remote document may be removed while name in link remains in place

6. World Wide Web6 Browser Interface How are the hypertext docs viewed? Browser provides interactive, "point-and- click" interface to hypermedia documents. Each document is loaded and displayed on the screen. User can select and follow links - "point- and-click“.

7. World Wide Web7 Document Representation Each WWW document is called a page. Initial page of a website is called a home page. Page can contain many different types of information; page must specify –Content –Type of content –Location –Links

8. World Wide Web8 Document Representation Rather than fixed WYSIWYG representation (e.g., Word), pages are formatted with a mark up language (like TeX) –Allows browser to reformat to fit display –Allows text-only browser to discard graphics Standard is HyperText Markup Language (HTML)

9. World Wide Web9 HTML HTML specifies –Major structure of document –Formatting instructions –Hypermedia links –Additional information about document contents Two parts to document: –Head contains details about the document –Body contains information/content

10. World Wide Web10 HTML Page is represented in ASCII text with embedded HTML tags formatting instructions –Tags have format –End of formatted section is

11. World Wide Web11 Example CS363 - Example Page

12. World Wide Web12 Example Lecture notes for today go here! Previous Next

13. World Wide Web13 Example Top of chapter Lecture notes Top of CS363

14. World Wide Web14 HTML Tags Headings -, Lists – - Ordered (numbered) list – - Unordered (bulleted) list – - List item Tables –, – - Begin row – - Body data item in row – - header data item

15. World Wide Web15 Other HTML Tags Parameters: tags have parameters or attributes –Keyword-value pairs e.g. Text Styling and Formatting –,,,,,,,,, etc. Special chars: &lt, &frac14, etc. Linking – Ask Jeeves http://www.askjeeves.com –Internal Linking

16. World Wide Web16 Other HTML Tags Embedded Graphics – tag specifies insertion of graphic –Parameters: SRC="filename" ALIGN= alignment relative to text ALT, BORDER, WIDTH, HEIGHT, etc. –Image must be in format known to browser, e.g., Graphics Interchange Format (GIF)

17. World Wide Web17 Other HTML Tags Forms – –METHOD indicates how server will send output of the form. POST—server data updated, GET– no server data updated. – –TYPE: hidden, text, submit, reset, checkbox, radio –,.

18. World Wide Web18 Other HTML Tags Image Maps –,  Converts areas on an image into links. Tags – Used to provide information to the search engines for cataloging. Tag –Used to display more than one file in the same window.

19. World Wide Web19 Example This page uses frames, but your browser doesn't support them.

20. World Wide Web20 Other HTML Tags Grouping Elements:, –SPAN groups a block of text to apply styles to it. –DIV forms a box of text.

21. World Wide Web21 Identifying a Page Page identified by: –Protocol used to access page –Computer on which page is stored –TCP port to access page –Pathname of file on server Specific syntax for Uniform Resource Locator (URL): protocol://computer_name:port/document_name –Protocol can be http, ftp, file, mailto

22. World Wide Web22 Identifying a Page –Computer name is DNS name –(Optional) port is TCP port –document_name is path on computer to page

23. World Wide Web23 Client-Server Model Browser is client, WWW server is server Browser: –Makes TCP connection –Sends request for page –Reads page Each different item - e.g., IMG - requires separate TCP connection. This can introduce an overhead if browser has to download many items on the page from the same server.

24. World Wide Web24 HTTP Browser (client) – Web server interaction follows the Hyper-Text Transfer Protocol (HTTP). HTTP requests are sent as ASCII text. HTTP supports four basic operations: – GET requests item from server. Server returns the item, with a header containing status information.

25. World Wide Web25 HTTP – HEAD requests status info about an item. Server returns the info without the item. – POST sends data to the server. Server appends the data to a specified item. – PUT send data to the server. Server replaces a specified item with this data. Format of GET request. GET item version CRLF

26. World Wide Web26 Response Header

27. World Wide Web27 Server Architecture Much like an ftp server –Waits for incoming connection. –Accepts command from connection. –Writes page to connection. Performance is an important issue.

28. World Wide Web28 Browser Architecture Browser has more components: (i) a controller (ii) a set of clients (iii) a set of interpreters. (iv) driver –Controller to accept input from user –Display driver for painting screen. –HTML interpreter for HTML-formatted documents –Other interpreters (e.g., Shockwave) for other items –HTTP client to fetch HTML documents from WWW server –Other clients for other protocols (e.g., ftp )

29. World Wide Web29 Browser Architecture

30. World Wide Web30 Caching in Browsers Downloading HTML documents from servers may be slow –Internet congested –Dialup connection –Server busy Returning to previous HTML document requires reload from server Local cache can be used to hold copies of visited pages

31. World Wide Web31 Caching in Browsers An HTTP proxy server can cache documents for multiple users. HTTP has features that support caching. –HTTP specifies cache timeout for the page. –HTTP specifies that a page may not be cached.

32. World Wide Web32 Summary WWW is based on hypermedia HTML is markup language for WWW documents HTML can specify links to other documents WWW based on client-server model –Browser - client –WWW server - server