it 63 - unit i

IT 63 – WEB TECHNOLOGY LECTURE NOTES UNIT I – WEB ESSENTIALS, MARKUP LANGUAGES

Web Essentials: Clients, Servers, and Communication

World Wide Web

• Originally, one of several systems for organizing Internet-based information– Competitors: WAIS, Gopher, ARCHIE

• Distinctive feature of Web: support for hypertext (text containing links)– Communication via Hypertext Transport Protocol (HTTP)– Document representation using Hypertext Markup Language (HTML)

• The Web is the collection of machines (Web servers) on the Internet that provide information, particularly HTML documents, via HTTP.

• Machines that access information on the Web are known as Web clients. A Web browser is software used by an end user to access the Web.

Hypertext Transport Protocol (HTTP)

• HTTP is based on the request-response communication model:– Client sends a request– Server sends a response

• HTTP is a stateless protocol: – The protocol does not require the server to remember anything about the client

between requests.

• Normally implemented over a TCP connection (80 is standard port number for HTTP)

• Typical browser-server interaction:– User enters Web address in browser– Browser uses DNS to locate IP address– Browser opens TCP connection to server– Browser sends HTTP request over connection– Server sends HTTP response to browser over connection– Browser displays body of response in the client area of the browser window

• The information transmitted using HTTP is often entirely text• Can use the Internet’s Telnet protocol to simulate browser request and view server

response

Commands

Connect - $ telnet www.example.org 80Trying 192.0.34.166...Connected to www.example.com (192.0.34.166).Escape character is ’^]’.

DEPT OF IT SCAD CET 1

ftp://ftp.rfc-editor.org/in-notes/rfc2616.txt


Send Request - GET / HTTP/1.1 Host: www.example.org

Receive Response - HTTP/1.1 200 OK Date: Thu, 09 Oct 2003 20:30:49 GMT

HTTP Request

• Uniform Resource Identifier (URI)– Syntax: scheme : scheme-depend-part

• Ex: In http://www.example.com/the scheme is http

– Request-URI is the portion of the requested URI that follows the host name (which is supplied by the required Host header field)

• Ex: / is Request-URI portion of http://www.example.com/

• URI’s are of two types:– Uniform Resource Name (URN)

• Can be used to identify resources with unique names, such as books (which have unique ISBN’s)

• Scheme is urn– Uniform Resource Locator (URL)

• Specifies location at which a resource can be found• In addition to http, some other URL schemes are https, ftp, mailto, and

file.Web Clients

• Many possible web clients:– Text-only “browser” (lynx)– Mobile phones– Robots (software-only clients, e.g., search engine “crawlers”)– etc.

Web Browsers

• First graphical browser running on general-purpose platforms: Mosaic (1993)

• Primary tasks:– Convert web addresses (URL’s) to HTTP requests– Communicate with web servers via HTTP– Render (appropriately display) documents returned by a server

• Standard features– Save web page to disk– Find string in page– Fill forms automatically (passwords, CC numbers, …)– Set preferences (language, character set, cache and HTTP parameters)– Modify display style (e.g., increase font sizes)

DEPT OF IT SCAD CET2



http://www.example.com/something.html



– Display raw HTML and HTTP header info (e.g., Last-Modified)– Choose browser themes (skins)– View history of web addresses visited– Bookmark favorite pages for easy return

• Additional functionality:– Execution of scripts (e.g., drop-down menus)– Event handling (e.g., mouse clicks)– GUI for controls (e.g., buttons)– Secure communication with servers– Display of non-HTML documents (e.g., PDF) via plug-ins

Web Servers

• Basic functionality:– Receive HTTP request via TCP– Map Host header to specific virtual host (one of many host names sharing an

IP address)– Map Request-URI to specific resource associated with the virtual host

• File: Return file in HTTP response• Program: Run program and return output in HTTP response

– Map type of resource to appropriate MIME type and use to set Content-Type header in HTTP response

– Log information about the request and response

• httpd: UIUC, primary Web server c. 1995• Apache: “A patchy” version of httpd, now the most popular server (esp. on Linux

platforms)• IIS: Microsoft Internet Information Server• Tomcat :

– Java-based– Provides container (Catalina) for running Java servlets (HTML-generating

programs) as back-end to Apache or IIS– Can run stand-alone using Coyote HTTP front-end

• Some Coyote communication parameters:– Allowed/blocked IP addresses– Max. simultaneous active TCP connections– Max. queued TCP connection requests– “Keep-alive” time for inactive TCP connections

• Modify parameters to tune server performance

• Some Catalina container parameters:– Virtual host names and associated ports– Logging preferences– Mapping from Request-URI’s to server resources– Password protection of resources– Use of server-side caching


http://tomcat.apache.org/tomcat-5.0-doc/config/


Tomcat Web Server

• HTML-based server administration• Browse to

http://localhost:8080 and click on Server Administration link– localhost is a special host name that means “this machine”

Secure Servers

• Since HTTP messages typically travel over a public network, private information (such as credit card numbers) should be encrypted to prevent eavesdropping

• https URL scheme tells browser to use encryption• Common encryption standards:

– Secure Socket Layer (SSL)– Transport Layer Security (TLS)



http://localhost:8080/


Markup Languages

Introduction

Two types of information:Markup information: <tag>Character data: outside, displayed by browser

element: <start tag>+ content+ <end tag> (tree) xmlns=“...” – defines attribute name, attribute value HTML is a special language which tells the browser how to format text in a www

document. HTML stands for HyperTextMarkup Language. An HTML file consists of text and tags. XHTML includes minor code changes, and stricter rules for coding.

Syntax:

Contains tags that dictate how the content will appear, i.e. formatting. Examples:

<b>Chris</b> Applies bold the the word<br/>Breaks the line

Some tags include attributes that alter the basic command, for example:

<h1 align=center>Welcome</h1>

Lists

unordered list<ul>、ordered list<ol>、definition list<dl>

<li>list item、<dt>definition term、<dd>definition description



Tables

Frames

Use one or more frameset elements rather than one body element

Forms

There are many uses of forms on Web As surveys. Online order forms. Feedback. As a means to search a database. Or other functions for which user input is required.

Forms can be created with the following features: Selectable lists. Radio buttons. Checkboxes.



Text Fields. Submit and Reset buttons.

General form of FORM tag

EXAMPLE:<FORMACTION="URL" METHOD="GET" >... Form Element tags ... </FORM>.<FORM ACTION =http://www.ncsi.iisc.ernet.in/ncsi/test.pl METHOD ="POST">... </FORM>.

ACTION attribute tells the URL where the information in the form is to be sent. Default method is GET (Takes the information entered into the form, and adds this

information to the URL specified by the ACTION attribute. POST method sends the information from the form as an encoded stream of data to

the web (Difference with GET method)

<INPUT TYPE="text" NAME="name" VALUE ="value" SIZE=size> - Creates Text Field<INPUT TYPE="password “NAME="name" VALUE="value" SIZE=size> - Password Field<INPUT TYPE="hidden" NAME="name" VALUE="value"> - Hidden Field<INPUT TYPE="checkbox" NAME="name" VALUE="value"> - Checkbox

Example HTML Coding:

<HTML> <BODY> <H1 ALIGN=CENTER><FONT SIZE=+2>USER INFORMATION FORM</FONT></H1> <FORM ACTION="/Scripts/simple.pl" METHOD="post" > User Name: <INPUT TYPE="text" NAME ="uname" SIZE=30> <BR> Service Type:<SELECT NAME="service"><OPTION>CAS<OPTION>CDRS <OPTION>COPSAT<OPTION>DDS<OPTION>FDSS<OPTION>ISS <OPTION>OSS<OPTION>SAS<OPTION>DA </SELECT> <BR> <H4><NOBR>SUBJECT AREA:</H4> <INPUT TYPE="checkbox" NAME="agriculture" >Agriculture <INPUT TYPE="checkbox" NAME="biology" >Biology <INPUT TYPE="checkbox" NAME="biomedicine" >Biomedicine <INPUT TYPE="checkbox" NAME="chemistry" >Chemistry <BR> <BR> <INPUT TYPE="radio" NAME="database">AGRIS <INPUT TYPE="radio" NAME="database">AHEAD <INPUT TYPE="radio" NAME="database">BIOSIS <INPUT TYPE="radio" NAME="database">CAB <BR> <BR> Date Entered:<INPUT TYPE="text" NAME ="entrydate" SIZE=10">(dd/mm/yyyy) <BR> <BR> <CENTER> <INPUT TYPE= "submit" VALUE="Submit Form"> <INPUT TYPE= "reset" VALUE="Clear Form"> <CENTER> </FORM></BODY> </HTML>



Relative URLs

A relative doesn’t contain any protocol or machine information. Its path generally refers to a resource on the same machine as the current document.

Relative URLs may contain relative path components (".." means one level up in the hierarchy defined by the path), and may contain fragment identifiers.

Relative URLs are resolved to full URLs using a base URL. defines the normative algorithm for this process.

As an example of relative URL resolution, assume we have the base URL "http://www.acme.com/support/intro.html". The relative URL in the following markup for a hypertext link:

<A href="suppliers.html">Suppliers</A>

Would expand to the full URL "http://www.acme.com/support/suppliers.html", while the relative URL in the following markup for an image

<IMG src="../icons/logo.gif" alt="logo">

Would expand to the full URL "http://www.acme.com/icons/logo.gif".

Basic XHTML Syntax and Semantics

Document Type Declaration

3 flavors of specifications:

Strict: The W3C’s ideal for HTML as of late 1997 Transitional: Strict + deprecated elements and attributes

Frameset: Transitional + frames


Special Characters

white space are treated as word separators unrecognized elements

Entity reference: ex. “<“ = “<” character reference: ex. “<“ = “<”

&nbsp (nonbreaking space): no word wrapping, multiple spaces

Attributes

Followed by equal sign (=), value enclosed in a pair of quotes (ex. “He said, “She said”, then signed.” should be ..."she said",...)

Multiple attribute included in a single tag are separated by white space

Normalized attribute value

Spacing’s

pre: used to override browser’s normal white space processing (almost identical to the HTML src)

still considered to be HTML (ex. “<“ = beginning of a tag)

empty elements: no content is contained (ex. <br />, <br/>, <br></br>)

Various elements

comments:


img: viewed as a single character

links: a (anchor), src: <a href..></a>; dest: <a id=“..”></a>

fragment:

ex. <a href = “...URL#section1”>

Nesting elements

Inner element must ended before its enclosing outer element block element: w/ preceding & trailing automatic line breaks (ex. p)

inline element: no automatic line breaks (ex. strong)

children of inline elements must be inline

File Transfer Protocol (FTP)• Downloading

– Transfer files from remote servers over the Internet to a local computer

• Usually applications, browser plug-ins or files

• Plug-ins

– Applications which work with Web browsers to add functionality

• Shockwave (www.shockwave.com)

• Adobe Acrobat (www.adobe.com)

– Use FTP (File Transfer Protocol)

• ftp://

• FTP site

– May require login and password

– Right click file in FTP directory and copy to hard drive


http://www.adobe.com/

http://www.shockwave.com/

it 63 - unit i

Documents