World Wide Web1 Applications World Wide Web. 2 Introduction What is hypertext model? Use of hypertext in World Wide Web (WWW) – HTML. WWW client-server

World Wide Web 1

Applications

World Wide Web

World Wide Web 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.

World Wide Web 3

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

World Wide Web 4

Hypertext/Hypermedia

• Documents linked together – Nondistributed - all documents stored locally

(like CD-ROM) – Distributed - documents stored on remote

servers

• Why Hypertext for the Web?

World Wide Web 5

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

World Wide Web 6

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

World Wide Web 7

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

World Wide Web 8

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)

World Wide Web 9

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

World Wide Web 10

HTML

• Page is represented in ASCII text with embedded HTML tags formatting instructions – Tags have format <TAGNAME> – End of formatted section is </TAGNAME>

World Wide Web 11

Example

<HTML><HEAD>

<TITLE> CS363 - Example Page

</TITLE> </HEAD>

World Wide Web 12

Example

<BODY> <HR> Lecture notes for today go here! <HR><CENTER><TABLE BORDER=3>

<TR><TD> <AHREF="./chap32_6.html">Previous</A> <TD><A HREF="./chap32_8.html">Next</A>

World Wide Web 13

Example

<TD><A HREF="./chap32_0.html">Top of chapter</A> <TD><A HREF="../lecture_notes.html"> Lecture notes</A><TD><A HREF="../../index.html">Top of CS363</A></TABLE> </CENTER> </BODY> </HTML>

World Wide Web 14

HTML Tags

• Headings - <H1>, <H2> • Lists

– <OL> - Ordered (numbered) list – <UL> - Unordered (bulleted) list – <LI> - List item

• Tables – <TABLE>, <THEAD> <TBODY> – <TR> - Begin row – <TD> - Body data item in row – <TH> - header data item

World Wide Web 15

Other HTML Tags

• Parameters: tags have parameters or attributes– Keyword-value pairs e.g. <TABLE BORDER=3>

• Text Styling and Formatting– <U>, <STRONG>, <EM>, <SUB>, <SUP>, <DEL>,

<FONT>, <BR>, <HR>, <CENTER> etc. Special chars: &lt, &frac14, etc.

• Linking– <A HREF = http://www.askjeeves.com> Ask Jeeves

</A>– Internal Linking <A NAME = “xyz”></A>

http://www.askjeeves.com/

World Wide Web 16

Other HTML Tags

• Embedded Graphics– <IMG> 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)

World Wide Web 17

Other HTML Tags

• Forms– <FORM METHOD = “POST” ACTION = “/CGI-

BIN/FORMAIL”>– METHOD indicates how server will send output of the

form. POST—server data updated, GET– no server data updated.

– <INPUT TYPE = “hidden” NAME = “rec” VALUE = “main.html”>

– TYPE: hidden, text, submit, reset, checkbox, radio– <TEXTAREA>, <SELECT>.

World Wide Web 18

Other HTML Tags

• Image Maps– <MAP>, <AREA> Converts areas on an image into

links.

• <META> Tags– Used to provide information to the search engines for

cataloging.

• <FRAMESET> Tag– Used to display more than one file in the same window.

World Wide Web 19

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

<HTML><HEAD>

<META NAME = "keywords" CONTENT = “..">

<META NAME = "description" CONTENT = “..">

<FRAMESET COLS = "110,*">

<FRAME NAME = "nav" SRC = "nav.html">

<FRAME NAME = "main" SRC = "main.html">

</FRAMESET> <NOFRAMES>

<P>This page uses frames, but your browser doesn't support them.</P> </NOFRAMES></HTML>

World Wide Web 20

Other HTML Tags

• Grouping Elements: <SPAN>, <DIV>– SPAN groups a block of text to apply styles to

it.– DIV forms a box of text.

World Wide Web 21

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

World Wide Web 22

Identifying a Page

– Computer name is DNS name – (Optional) port is TCP port – document_name is path on computer to page

World Wide Web 23

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.

World Wide Web 24

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.

World Wide Web 25

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

World Wide Web 26

Response Header

World Wide Web 27

Server Architecture

• Much like an ftp server – Waits for incoming connection.– Accepts command from connection.– Writes page to connection.

• Performance is an important issue.

World Wide Web 28

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)

World Wide Web 29

Browser Architecture

World Wide Web 30

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

World Wide Web 31

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.

World Wide Web 32

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