Unit 1 WEB SITE BASICS AND HTML

Web Essentials:

Server:

The software that distributes the information and the machine where the

• provides requested service to client

• e.g., Web server sends requested Web page

Client:

The software that resides on the remote machine, communicates with the server,
fetches the information, processes it, and then displays it on the remote machine is called
the client.

• initiates contact with server (“speaks first”)

• typically requests service from server
• Web: client implemented in browser

Web server:

Software that delivers Web pages and other documents to browsers using the
HTTP protocol

Web Page:
 A web page is a document or resource of information that is suitable for the World
Wide Web and can be accessed through a web browser.

Website:

A collection of pages on the World Wide Web that are accessible from the same
URL and typically residing on the same server.

URL:

Uniform Resource Locator, the unique address which identifies a resource on the Internet
for routing purposes.

Client-server paradigm:

The Client-Server paradigm is the most prevalent model for distributed computing
protocols. It is the basis of all distributed computing paradigms at a higher level of
abstraction. It is service-oriented, and employs a request-response protocol.

A server process, running on a server host, provides access to a service. A client

process, running on a client host, accesses the service via the server process. The
interaction of the process proceeds according to a protocol.

The primary idea of a client/server system is that you have a central repository of
information—some kind of data, often in a database —that you want to distribute on
demand to some set of people or machines.
The Internet:

• Medium for communication and interaction in inter connected network.

• Makes information constantly and instantly available to anyone with a connection.
Web Browsers:

• User agent for Web is called a

browser: o Internet Explorer

o Firefox

Web Server:

• Server for Web is called Web

server: o Apache (public
domain)
o MS Internet Information Server

Protocol:

Protocols are agreed formats for transmitting data between

devices. The protocol determines:

i. The error checking required

ii. Data compression method used
iii. The way the end of a message is signalled
iv. The way the device indicates that it has received the message
Internet Protocol:

There are many protocols used by the Internet and the WWW:
o TCP/IP
o HTTP
o FTP

o Electronic mail protocols IMAP

o POP

TCP/IP

The Internet uses two main protocols (developed by Vincent Cerf and Robert Kahn)
Transmission control protocol (TCP): Controls disassembly of message into packets at
the origin reassembles at the destination
 Internet protocol (IP): Specifies the addressing details for each packet Each packet
is labelled with its origin and destination.

Hypertext Transfer Protocol (HTTP)

• The hypertext transfer protocol (HTTP) was developed by Tim Berners- Lee
in 1991

• HTTP was designed to transfer pages between machines

• The client (or Web browser) makes a request for a given page and the Server
is responsible for finding it and returning it to the client

• The browser connects and requests a page from the server

• The server reads the page from the file system, sends it to the client and
terminates the connection.

Electronic Mail Protocols:

• Electronic mail uses the client/server model

• The organisation has an email server devote

ted to handling
email o Stores and forwards email messages
 • Individuals use email client software to read and send email
o (e.g. Microsoft Outlook, or Netscape Messenger)

• Simple Mail Transfer Protocol (SMTP)

o Specifies format of mail messages

• Post Office Protocol (POP) tells the email server to:

o Send mail to the user’s computer and delete it from the server

o Send mail to the user’s computer and do not delete it from the
server o Ask whether new mail has arrived.

Interactive Mail Access Protocol (IMAP)

Newer than POP, provides similar functions with additional features.

o e.g. can send specific messages to the client rather than all the
messages. A user can view email message headers and the
sender’s name before

downloading the entire message.

Allows users to delete and search mailboxes held on the email server.

The disadvantage of POP: You can only access messages from one PC.

The disadvantage of IMAP: Since email is stored on the email server, there is a need
for more and more expensive (high speed) storage space.

World Wide Web: comprises software (Web server and browser) and data (Web sites).

Internet Protocol (IP) Addresses:

 - Every node has a unique numeric address
- Form: 32-bit binary number
- New standard, IPv6, has 128 bits (1998)
- Organizations are assigned groups of IPs for their computers
- Domain names
- Form: host-name. domain-names
- First domain is the smallest (Google)
- Last domain specifies the type of organization (.com)
- Fully qualified domain name - the host name and all of the domain names
- DNS servers - convert fully qualified domain names to IPs

HTTP:
Hypertext Transfer Protocol (HTTP) is the communication protocol used by
the Internet to transfer hypertext documents.

A protocol to transfer hypertext requests and information between servers

and browsers

Hypertext is text, displayed on a computer, with references (hyperlinks) to

other text that the reader can immediately follow, usually by a mouse HTTP is behind
every request for a web do cument or graph, every click of a hypertext link, and every
submission of a form.

HTTP specifies how clients request data, and how servers respond to
these requests.

The client makes a request for a given page and the server is responsible
for finding it and returning it to the client.
 The browser connects and requests a page from the server.
The server reads the page from the file system and sends it to the client and
then terminates the connection

HTTP Transactions
HTTP Message:

HTTP message is the information transaction between the client and server.

Two types of HTTP Message:

1. Requests
a. Client to server
2. Responses
a. Server to client
Fields
· Request line or Response line
· General header
· Request header or Response header
· Entity header
· Entity body

Request Message:

Request Line:

• A request line has three parts, separated by

spaces o a methodname
 o the local path of the requested
resource o the version of HTTP being
used

• A typical request line is:

o GET /path/to/file/index.html HTTP/1.1

• Notes:

o GET is the most common HTTP method; it says "give me this resource".
Other methods include POST andHEAD. Method names are always uppercase

o The path is the part of the URL after the host name, also called
the request URI o The HTTP version always takes the form " HTTP/x.x",
uppercase.

Request Header:
Response Message:
Response Line:

• A request line has three parts, separated by

spaces o the HTTP version,

o a response status code that gives the result of the

request, and o an English reason phrase describing the
status code

• Typical status lines are:

 o HTTP/1.0 200 OK or
o HTTP/1.0 404 Not Found

• Notes:
o The HTTP version is in the same format as in the request line,HTTP/x.x
" ".

o The status code is meant to be computer- readable; the reason phrase is

meant to be human-readable, and may vary.

HTTP Request Header:

EXAMPLE

HTTP Method:

• HTTP method is supplied in the request line and specifies the operation that the
client has requested.

Some common methods:

• Options
• Get
• Head
• Post
• Put
• Move
• Delete
Two methods that are mostly used are the GET and
POST: o GET for queries that can be safely repeated

o POST for operations that may have side effects (e.g. ordering a book from an on- line
store).

The GET Method

• It is used to retrieve information from a specified URI and is assumed to be a

safe, repeatable operation by browsers, caches and other HTTP aware components

• Operations have no side effects and GET requests can be re-issued.

• For example, displaying the balance of a bank account has no effect on the
account and can be safely repeated.

• Most browsers will allow a user to refresh a page that resulted from a GET,
without displaying any kind of warning

• Proxies may automatically retry GET requests if they encounter a temporary

network connection problem.

• GET requests is that they can only supply data in the form of parameters
encoded in the URI (known as a Query String) – [downside]

Cannot be unused for uploading files or other operations that require large amounts of
data to be sent to the server.

The POST Method

 • Used for operations that have side effects and cannot be safely repeated.

• For example, transferring money from one bank ac count to another has side
effects and should not be repeated without explicit approval by the user.

If you try to refresh a page in Internet Explorer that resulted from a POST, it displays the
following message to warn you that there may be side effects:

The POST request message has a content body that is normally used
to send parameters and data

• The IIS server returns two status codes in its response for a POST request
o The first is 100 Continue to indicate that it has successfully received
the POST
request
o The second is 200 OK after the request has been processed.

HTTP response status codes

• Informational (1xx)
• Successful (2xx)
• Redirection (3xx)
o 301: moved permanently
 • Client error (4xx)

o 403 :
forbidden o
404: Not found
• Server error (5xx)
o 503: Service unavailable
o 505: HTTP version not supported

HTTP
1. Features

• Persistent TCP Connections: Remain open for multiple requests

• Partial Document Transfers: Clients can specify start and stop positions
• Conditional Fetch: Several additional conditions
• Better content negotiation
• More flexible authentication.

2. Web Browsers :

Mosaic - NCSA (Univ. of Illinois), in early 1993 First to use a GUI, led to Explosion of Web
use Initially for X-Windows, under UNIX, but was ported to other platforms by late 1993

• Browsers are clients -always initiate, servers react (although sometimes servers
require responses)

• Most requests are for existing documents, using Hypertext Transfer Protocol
• (HTTP) But some requests are for program execution, with the output being
returned as a document.
Browser: A web browser is a software application for retrieving,
presenting, and traversing information resources on the World Wide Web.

3. Web Servers:

- Provide responses to browser requests, either existing documents or

Dynamically Built documents.

- Browser-server connection is now maintained through more than one request -

Response
cycle
- All communications between browsers and servers use Hypertext Transfer
Protocol
- Web servers run as background processes in the operating system.

- Monitor a communications port on the host, accepting HTTP messages when

they appear All current Web servers came from either

1. The original from CERN

2. The second one, from NCSA
- Web servers have two main directories:
1. Document root (servable documents)
2. Server root (server system software)
- Document root is accessed indirectly by clients
- Its actual location is set by the server Configuration file
- Requests are mapped to the actual location
- Virtual document trees
- Virtual hosts
- Proxy servers
- Web servers now support other Internet protocols
- Apache (open source, fast, reliable)
- IIS
- Maintained through a program with a GUI interface.

4. Markup Language:

Mark-up Lan guage is used to identify elements of a page so that a browser can
render that page on your computer screen.

Content to be displayed is “marked up” or tagged to tell the browser how to display
it.

A markup language is a set of characters or symbols that define a document’s logical

structure or how a document should be printed or displayed.

5. Hyper Text Markup Language:

Hyper Text Mark-up Language, the language used to create documents on the
World Wide Web.

· HTML is a collection of styles (indicated by mark-up tags) that define the

various elements of a World Wide Web document.

· HTML is based on an older language called Standard Generalized

Markup Language, or SGML , which defines the data in a document independently of
how the data will be displayed.

· HTML document can be read and displayed by many different browsers

running on
different types of computers – platform independent!
 · HTML defines the structure and layout of the elements on a Web page with a
variety of tags.

· Each tag may have a set of attributes that modify the appearance or layout of the
visual element contained by the tag.

· HTML is a plain-text file that can be created using a text editor like Notepad.

· HTML is a programming language that allows you to tell the browser what you
want it to display and how you want it to be displayed, in simple terms, it is a Webpage.

· HTML there are certain markers, like commands, that tell the Browser what to do,
these are called tags. By using tags you can have tables, fonts, colors, pictures, links,
and almost anything you can think up, and experimentation with tags can lead to some
pretty cool WebPages.
HTML
History:

· The first version of HTML was created using the Standard Generalized Mark
up Language (SGML).

· In the early years of HTML, Web developers were free to define and modify
HTML in whatever ways they thought best.

· Competing browsers introduced some differences in the language. The changes

were called extensions.

· A group of Web developers, programmers, and authors called the World Wide
Web Consortium, or the WC3 , created a set of standards or specifications that all
browser manufacturers were to follow.

s
 · The WC3has no enforcement power.

· The recommendations of the WC3are usually followed since a uniform approach

to Web page creation is beneficial to everyone.

Comparison of HTML versions:

HTML Basics:

HTML is primarily composed of two types of markup:

• Elements or tags
o <html></html>

• Attributes that modify an element

 HTML Elements

• Elements are the fundamental building blocks of HTML.

• They are the tags that tell the browser what the enclosed text is.

HTML Tags:

• Container Tags

o <Begin formatting>some text</End

formatting> o For example:
<B>some bold text</B>
<H1>some heading </H1>

• Empty Element Tags

o For example <HR> <BR>

• Comment Tag
o <!-- Hi, I'm a comment. -->
o Use them document complicated layouts!
• Case insensitive
• Unrecognised tags are simply ignored by browser!!
• Container tags must be nested!!

• As a text document, your HTML in Notepad will contain elements, such as headers,
titles, paragraphs, etc.

• These elements must be denoted in your script, which is done using tags
• HTML tags consist of a left angle bracket (<), a name, and a right angle bracket(>)
• For example: <title>

• Tags must also close. To do so, you incorporate a slash (/). A starting and ending tag
would be: <title> </title>.

Attributes:

• You can add attributes to tags to enhance your page.

 • Added attribute s go inside the brackets of the opening tag(example: <p
align=center> would center the paragraph)

About HTML file Structure:

· HTML files .htm or .html extensions

· Name your files to describe their functionality file name of your home page should
be index.html

Common Tags (Elements):

· Always include the <HTML>…</HTML> tags
· Comments placed inside <!--…--> tags
· HTML documents
o HEAD section.
o Info about the document.

o Info in header not generally rendered in display

window. oTITLE element names your Web page.
o BODY section
Page content
Includes text, images, links, forms, etc.
Elements include backgrounds, link colors and font
faces Pelement forms a paragraph, blank line before
and after

Structure of HTML Tag (Element) Alignment

Text Styling

• Underline style<U>…</U>
• Align elements with ALIGN attributeright, left or center
• Close nested tags in the reverse order from which they were opened
• Emphasis (italics) style<EM>…</EM>
• Strong (bold) style<STRONG>…</STRONG>
• <B> and <I> t ags deprecated Overstep boundary between content and
presentation

• Logical Styles:
o <EM>, <STRONG> a add emphasis to text

o <BIG>, <SMALL> a increase or decrease text

size o <SUB>, <SUP> a subscript or superscript

• Physical styles:
o <B>, <I>, <U> a Bold, Italics, and Underline text

o <FONT SIZE=# FACE= “name” COLOR=“colorName or

#rgb” > o E.g., <FONT SIZE=+2 FACE = “arial” COLOR =
“darkblue”>

eXtensible Mark up Language (XHTML) :

 • To describe the general form and layout of documents
• An XHTML document is a mix of content and controls

• In XHTML tag names, attributes, and values are case sensitive and values must
be enclosed by double quotes.

• In XHTML all elements must have both beginning and ending tags.
• Controls are tags and their attributes

o Tags often delimit content and specify something about how the
content o should be arranged in the document.

o Attributes provide additional information about the content of a tag.

• Tools for creating XHTML documents

o XHTML editors - make document creation

easier o Shortcuts to typing tag names, spell -
checker,
o WYSIWYG XHTML editors

• Plug ins
o Integrated into tools like word processors,

o effectively converting them to

WYSIWYG o XHTML editors

• Filters
o Convert documents in other formats to XHTML

Advantages of both filters and plug-ins:

 • Existing documents produced with other tools
• can be converted to XHTML documents
• Use a tool you already know to produce XHTML

Disadvantages of both filters and plug-ins:

• XHTML output of both is not perfect - must be fine tuned

• XHTML may be non-standard
• You have two versions of the document, which are difficult to synchronize

Relative URL

HTML Link:

To create a link to a resource identifiable by a

URL o href: specify a URL of the target
resource
o target: specify where to display the target document

e.g.: <a href="index.htm"

target="_blank">Home</a> Open the document "index.htm" in
a new browser window

Can also be used to create an anchor within a

document o name: specify the anchor name

e.g.: <a name="chap1"></a><h2>Chapter

1</h2> The above anchor can be referred to in a URL as

<a href="http://host/file.html#chap1">Chapter 1</a>

URL (Uniform Resource Locator) in HTML:

URL is used to create a link in a web document.

Two Types of URL:

1. Absolute URL

• Absolute URL contains all the information necessary to identify files on the
internet (Example: in postal service, for sending letter to the destination it necessary to
have full information like, name, address, city etc.,)

• Likewise, an absolute URL contains the protocol, hostname, filename, which

are all essential to link the web document.

Example:

i. http://google.com/index.html
Relative URL

• Relative URL contains the only the folder name and filename or even just the file
name.

• Browser does not need protocol address or server name to identify the file in the
web.

• Relative URL to refer the documents in relation to the originating document.

Two types of Relative URL:

i. Document – Relative URL.

• Document Relative URL is used to relate the HTML document in the same folder,
just providing the name of the file (ex: Index.html).

• It contains only the folder name and file name.

ii. Server – Relative URL

• Server relative URL is relative to the server root.

• It contains the part of URL and relating to the host name.

Anchors and Links

This section discusses the A tag which is used to define anchors (places in a
document that can be linked to) and also to create links.

•A

A - (anchor or link)

The A tag lets you define anchors and links. An anchor defines a place in
adocument. A link displays a hypertext link that the user can click to display an anchor or
a document.

A as anchor

An anchor identifies a place in an HTML document. To indicate that an <A> tag is

being used as an anchor, specify the NAME attribute.
 Note that you can also use the ID attribute of any tag to identify that tag as an
anchor, as discussed in UNIVERSAL Attributes.

Do not nest an anchor within another A tag.

Syntax
<A

NAME="anchorName"
>.
..
</A>

Example
<A NAME=section2>
<H2>A Cold Autumn Day</H2></A>
If this anchor is in a file called "nowhere.htm," you could define a link that jumps to
the anchor as follows:

<P>Jump to the second section <A

HREF="nowhere.htm#section2"> A Cold Autumn Day</A> in
the mystery "A man from Nowhere."

A as link

• A hypertext link is a piece of content that the user can click to invoke an action.

• The most common actions are scrolling to a different place in the c urrent
document and opening a new document.
 • A hypertext link can contain text and/or graphics.

• To define a hypertext link, use the <A> tag with an HREF attribute to indicate the
start of the hypertext link, and use the </A> tag to indicate the end of the link.

• When the user clicks any content between the <A HREF> and </A> tags, the
link is activated.

• The value of the HREF attribute must be a URL.

• If you want the link to open a new document, the value of HREF should be the
URL for the destination document.

• If you want to scroll the current document to a particular place, the value of
HREF should be the name of the anchor to which to scroll, preceded by the # sign.

• If you want to open another document at an anchor, give the U RL for the
document, followed by #, followed by the name of the anchor.

• If you want the destination document or anchor to open in a separate browser

window, supply the name of the window as the value of the TARGET attribute.

• If the named window does not already exist, a new window opens.

• The link can also do actions other than opening and scrolling documents. It can
send mail messages, point to files located on FTP servers, run any arbitrary JavaScript
code, open local files, point to a gopher server, or read news groups.

• To do any of these actions, you specify an appropriate kind of URL, such as a

mailto URL to send a mail message or a news URL to read a news group.
 • Most browsers display hypertext links in a color different from that of the rest of
the document so that users can easily identify them.

• You can also define actions that occur when the mouse cursor enters or leaves
the region containing the link by specifying onMouseOver and onMouseOut event
handlers for the link.

• Additionally, you can specify an onClick event handler that determines the action
to occur when the user clicks a link.

• A link that has not been clicked is called an unvisited link.

• A link that has been clicked is known as a visited or followed link.
• A link that is in the process of being clicked is an active link.

Syntax

<A
HREF="location"
ONCLICK="clickJScode"
ONMOUSEOUT="outJScode"
ONMOUSEOVER="overJScode"
TARGET="windowName"
>
...
</A>

HREF="location" specifies a destination URL for the link. The most common value here
is a document name or an anchor. To specify a document to open, provide the URL for
the document, either as an absolute or relative URL.
 An example of an absolute URL is:
HREF="http://www.chennaikavigal.com/index.html"

An example of a relative URL is:

HREF="products/doc1.html"

To scroll the current document to an anchor, give the name of the anchor preceded
by the pound (#) sign. For example:

HREF="#anchor1"

To open a different document at an anchor, give the URL for the document,
followed by the # sign followed by the name of the anchor. For example:

HREF="products/doc1.html"

The HREF attribute can also be a URL that sends a message, points to files
located on an FTP server, runs arbitrary JavaScript code, ope ns local files, points to a
gopher server, or reads news groups.

ONCLICK="clickJScode" specifies JavaScript code to execute when a user clicks the

link. If you supply a value for the ONCLICK attribute, the specified action overrides the
default link behavior.

ONMOUSEOUT="outJScode" specifies JavaScript code to execute when a user moves

the mouse cursor out of the link or anchor.

ONMOUSEOVER="overJScode" specifies JavaScript code to execute when a user

moves the mouse pointer over the image or link text.
TARGET="windowName" specifies a window in which to show the destination
document (if the link's action is to scroll or open a document). If the named window is not
already open, a new window with that name opens.

Special target values are:

blank opens the destination document in a new unnamed window.

parent opens the destination document in the parent window of the one displaying the
current document.

self opens the destination document in the same window as the one in which the
link was clicked.

top opens the destination document in the full body of the current window. This
value can be used to ensure that the destination document takes over the full window
even if the original document was displayed in a frame.

Example

<P>You can find all the latest news from Chennai Kavigal at

<A HREF="http://www.chennaikavigal.com/index.html">Chennai
Kavigal's Home Page</A>.

HTML List:

Lists can add a lot to a WebPage, there are different types of lists and
different types of bullets or numbers that can be used.

You can have an ordered list (a, b, c, etc.) unordered lists (with bullets)
or you can have definition lists.
 This section describes the tags for displaying lists:
DIR, DL, DT, DD, MENU, OL, UL, LI

DIR - (directory list)

The DIR tag i s intended to display a list of short items such as in a directory
listing. In practice, the DIR tag usually does the same thing as the UL (unordered list)
tag.

To mark the individual items within the list, use the LI tag. A single list item can
contain additional paragraphs, marked with the P tag.

This tag is being deprecated; that is, it has become obsolete.

Syntax
<DIR>

...
</DIR>

Example

<P>The directory structure

is:</P> <DIR>

<LI>PRODUCTS
<DIR>
<LI>SHAKTHI.htm
<LI>TYPING
TUTOR.htm </DIR>

<LI>MULTIMEDIA
<DIR>

<LI>KURALAMUDHU.htm
<LI>ARIVODU VILAYADU.htm
</DIR>

<DIR>

DL - (definition list)

The DL tag encloses a definition list. A definition list contains terms, which are
defined with the DT tag, and definitions, which are defined with the DD tag. By default,
Nadodi aligns terms on the left and indents each definition on a new line. However, you
can use the COMPACT attribute to display a definition on the same line as the preceding
term, if it fits on one line.

The intent of a definition list is to display lists of terms and their corresponding
definitions, such as in a glossary.

Syntax
<DL COMPACT>

...
</DL>

COMPACT compacts the definition list by placing the term defined by the DT tag on the
same line as the definition defined by the DD tag, provided the term is short enough.

Definition List Example

The following example defines six HTML

terms. <DL>

<DT>HTML

<DD>This tag marks a text file as an HTML

document. <DT>HEAD

<DD>This tag encloses the heading for t he HTML

document. <DT>BODY

<DD>This tag displays the body for the HTML

document. <DT>DL

<DD>This tag displays a definition list in the HTML

document. <DT>DT

<DD>This tag displays a term in a definition

list. <DT>DD

<DD>This tag displays a definition

description. </DL>
DT - (definition term)

The DT tag specifies a term in a definition list. The DT tag must be used in a DL
tag. Usually a DT tag is followed by a DD tag that describes the term in the DT tag.

The DT tag does not require a closing tag.

Syntax <DT>
Used Within <DL>

DD – (Definition description)

The DD tag displays a definition description in a definition list. The DD tag must be
used within a DL tag and usually follows immediately after a DT tag that indicates the
term being defined. The DD tag does not require a closing tag.

See DL for more details and an example.

Syntax <DD>
Used Within <DL>

MENU - (list of simple items)

The MENU tag displays a list of simple items. This tag works just like the UL tag.
Use the LI tag to designate the individual menu items.

This tag is being deprecated because it has become obsolete in favor of the UL
tag.
Syntax
<MENU>

...
</MENU>

Example

The following example creates a list of three short

items: <P>Menu Example:</P>

<MENU>
<LI> Windows 9x
<LI> Windows NT

<LI> Windows
2000 </MENU>

1. Unordered List:

• In an unordered list each item has the same leading symbol.

• The item in the list will be rendered in the same order that they are entered.
• <ul> tag is used to unordered the list.
• <li> tag is used to list the items.

Syntax
1. <UL TYPE="CIRCLE"|"DISC"|"SQUARE">

TYPE defines the type of bullet used for each list item. The value can be one of the
following: CIRCLE specifies a hollow bullet.
DISC specifies a solid round bullet (Nadodi's
default).SQUARE specifies a square bullet.

Example

<ul
type=”disc”><li
>Item 1</li>
<li>Item 2</li>
</ul>

<ul
type="square">
<li>Item 1</li>
<li>Item 2</li>
</ul>

<ul
type="circle">
<li>Item 1</li>
<li>Item 2</li>
</ul>

2. Ordered List:

• In an ordered list, each item has a sequential leading symbol.

• The browser assigns this sequence automatically.
• <ol> tag is used to ordered the list.
• <li> tag is used to list the item.

Syntax
<OL
START="value"
TYPE="A"|"a"|"I"|"i"|"1"
>
...
</OL>

START="value" indicates the starting number for the list. The number must be a
positive integer.

TYPE defines the type of numbering sequence used for each list
item. The value can be one of the following:

A specifies a sequ ence of uppercase

letters aspecifies a sequence of
lowercase letters

I specifies a sequence of uppercase Roman

numerals ispecifies a sequence of lowercase
Roman numeral 1specifies a sequence of
numbers.

Example
<ol>

<li>Item
1</li>
<li>Item
2</li> </ol>

<ol type="A"
start="5"> <li>Item
1</li>
<li>Item
2</li> </ol>

<ol type="i"
start="10"> <li>Item
1</li>

<li>Item 2</li>
</ol>

3. Definition List

• A definition list is a sequence of terms and description of these terms.

• <dl> tag is used to implement definition list.
• <dt> tag is used for defining the item.
• <dd> tag is used for defining the description.

LI - (list item)

The LI tag indicates an itemized element, which is usually preceded by a bullet, a

number, or a letter. The LI tag i s used inside list elements such as OL (ordered list) and
UL (unordered list).

A single itemized element can contain other tags such as the

P tag. The LI tag does not require a closing tag.

Syntax
<LI
TYPE="DISC"|"CIRCLE"|"SQUARE"|"A"|"a"|"I"|"i"|"1"
VALUE="number"
>
TYPE specifies the type of symbol or numbering sequence to use before each
item.
· DISC specifies a solid bullet.
· CIRCLE specifies a hollow bullet.
· SQUARE specifies a square bullet.
· A specifies a sequence of uppercase letters.
· a specifies a sequence of lowercase letters.
· I specifies a sequence of uppercase Roman numerals.
· i specifies a sequence of lowercase Roman numeral.
· 1 specifies a sequence of numbers.

The values DISC, CIRCLE, and SQUARE can be used in unordered lists,while the values
A, a, I, i, and 1 can be used in ordered lists that have a numerical sequence.

VALUE="number" indicates the starting number for an item in an ordered list. This
attribute is valid only in an ordered list. See OL for information on the types of numbering
available.

Used Within DIR, DL, OL, UL, MENU

Example
<UL>

<LI>Identify items in a numbered

list <LI>Identify items in an
unordered list <LI>Identify items in
 a directory list <LI>Identify items in
a menu

</UL>

HTML Table:

• Tables in HTML are easy to program if you know what you are trying to do.
Tables look like the charts present on many of these slides.

• Tables in browsers by default have no borders, if you want to see the edges of
your table, you have to place a border command inside the table tag.

• You can also use tables to format pages.

• Inside tables, the text is always the default of the browser (black and small), if
you want to change this font, you must add a <font color=“color” and/or size=“x”> inside
each cell to make the change.

· TABLE
· CAPTION
· TR
· TD
· TH
TABLE
TABLE - (table): The TABLE tag defines a table. Inside the TABLE tag, use the TR tag
to define rows in the table, use the TH tag to define row or column headings, and use the
TD tag to define table cells.

The TABLE tag can also contain a CAPTION tag, which specifies the
caption for the table.
 You can specify the width of the border surrounding the table and the default
background color of the table. (Individual rows and cells in the table can have their own
background color.) You can use the CELLSPACING attribute to specify the distance
between cells in the table and the CELLPADDING attribute to specify the distance
between the border and content of every cell. If you specify the width and height of the
table, the browser will do its best to make the table fit the specified dimensions, but in
some cases this may not be possible. For example, if the table contains cells that contain
non-wrapping long lines, the table may not fit in a specified width.

Syntax
<TABLE

ALIGN="LEFT|RIGHT"
BGCOLOR="color"
BORDER="value"
CELLPADDING="value"
CELLSPACING="value"

HEIGHT="height"
WIDTH="width"
COLS="numOfCols"
HSPACE="horizMargin"
VSPACE="vertMargin"
>
...
</TABLE>

ALIGN specifies the horizontal placement of the table.

· LEFT aligns the table on the left (the default). The content following the table flows to
the right of the table.

· RIGHT aligns the table on the right. The content following the table flows to the
left of the table.

· CENTER aligns the table in the center. Content does not flow on either side.

BGCOLOR="color"sets the color of the background for the table. This color can be
overridden by a BGCOLOR tag in the TH, TR, or TD tags.

BORDER="value" indicates the thickness, in pixels, of the border to draw around the
table. Give the value as an integer. A value of 0 means the table has no border. You can
also supply the BORDER attribute without specifying a value for it to indicate that the
table has a border of the default thickness.

CELLPADDING="value" determines the amount of space, in pixels, between the border

of a cell and the contents of the cell. The default is 1.

CELLSPACING="value"determines the amount of space, in pixels, between individual

cells in a table. The default is 2.

HEIGHT="height" specifies the height of the table. The default is the optimal
height determined by the contents of each cell. The height value can be a number of
pixels, given as an integer, or a percentage of the height of the page or parent element,
given as an integer followed by the percent sign. The table is scaled to fit the specified
height and width.

WIDTH="width" defines the width of the table. The default is the optimal width
determined by the contents of each cell.
 The width val ue can be a number of pixels, given as an integer, or a percentage
of the width of the page or parent element, given as an integer followed by the percent
sign. The table is scaled to fit the specified height and width.

COLS="numOfCols" indicates how man y virtual columns of equal width fit in the width
of the window. Each actual column in the table occupies a virtual column. You would
typically set the COLS attribute to be equal to the number of columns in the table to
indicate that all the columns in the table have the same width.

If the WIDTH attribute is supplied, the COLS attribute indicates how many virtual
columns fit in the specified width. If the WIDTH attribute is not supplied, the COLS
attribute indicates how many virtual columns fit in the cur rent window or frame. Each
column in the table occupies one of the virtual columns. Suppose that the WIDTH attribute
is "80%" and the COLS attribute is 4.

In this case, each virtual column takes up 20% of the width of the window. Each
actual column in th e table occupies a virtual column, so it occupies 20% of the width of
the window, so long as the table has from 1 to 4 columns inclusive. Note, however, that
if the minimum width needed to display the contents of an actual column is greater than
the width of a virtual column, then the width of the column is expanded to fit its contents.

If the table has more actual columns than the COLS value, then the columns in
excess of the COLS value are displayed in the minimum width required to fit their
contents, and the other columns divide the remaining space equally between them.

For example, suppose the table has 4 columns, the WIDTH attribute is "80%", and
the COLS value is 3. What happens here is that the table takes up 80% of the width of
the window. The fourth column uses the minimum width necessary to display the contents
of the column. The other 3 columns divide the remaining width of the table equally
between them.

HSPACE="horizMargin" specifies the distance between the left and right edges of the
table and any surrounding content.
VSPACE="vertMargin" specifies the distance between the top and bottom edges of the
table and any surrounding content.

Example 1. A Simple Table.

The following example creates a three-column, four- row table, with a yellow
background. The caption "Tables are as easy as one, two, three" is displayed at the
bottom of the table.

<TABLE BORDER CELLPADDING="8"

CELLSPACING="4" BGCOLOR=yellow>

<TR><TH> English </TH><TH> Spanish </TH><TH>

German </TH></TR>

<TR><TD> one </TD><T D> uno </TD><TD> ein </TD></TR>

<TR><TD> two </TD><TD> dos </TD><TD> zwei </TD></TR>
<TR><TD> three </TD><TD> tres </TD><TD> drei </TD></TR>
<CAPTION ALIGN="BOTTOM"> <B>Table 1</B>: Tables are as
easy as one, two, three

</CAPTION>
</TABLE>

Example 2: A More Complex Table.

The following example creates a four- column table. Each row has a different
background color. The last row contains only two cells, which both span two rows, and
the second cell spans three columns.

<TABLE CELLPADDING=3 CELLSPACING=6 BORDER=2>

 <CAPTION ALIGN=TOP>
<BIG><BIG>Furniture Mart's Top Selling
Furniture </BIG></BIG>

</CAPTION>
<!-- heading row -->

<TR BGCOLOR=#CCCCFF> <TH>NAME</TH> <TH>SKU</TH>

<TH>PRICE</TH> <TH>DESCRIPTION</TH> </TR>

<!-- end of heading row --> <!-- furniture rows -->

<TR BGCOLOR=#DDEEAA> <TH>Harriet Smythe Armchair</TH>

<TD>100584</TD><TD>$2150</TD><TD>description goes here</TD> <TR>

<TR B GCOLOR=#CCFFCC>

<TH>St. Michael Sofa</TH> <TD>100789</TD><TD>$5000</TD><TD>description

goes here</TD> <TR>

<TR
BGCOLOR=#BBDDFF>
<TH>Variety of prints</TH>

<TD>-</TD><TD>$100 to $5000</TD><TD>description goes

here</TD> <TR>

<!-- more furniture rows go here -->

 <!-- last row has cells that span rows and columns -->
<TR BGCOLOR=CYAN>

<TH ALIGN=CENTER VALIGN=MIDDLE

ROWSPAN=2> <FONT SIZE=+3>JULY
SALE!!</FONT></TH>

<TD ROWSPAN=2 COLSPAN=3

ALIGN=CENTER> <FONT SIZE=+1>

Don't miss our annual July sale.

All these prices will be slashed by 50%!!!

But on Aug 1, they go back up, so don't be

late!! </FONT>

</TD>
<TR>
</TABLE>

CAPTION - (table caption)

The CAPTION tag defines a caption for a table. Place the CAPTION tag within the
TABLE tag but not inside the TD or the TR tags, which indicate table cells and table rows
respectively.Navigator 1.1.

Syntax

<CAPTION
ALIGN="BOTTOM"|"TOP">...</CAPTION> ALIGN specifies
the placement of the caption within a table.
 · BOTTOM places the caption at the bottom of the table.
· TOP places the caption at the top of the table. TOP is the default.
Used Within TABLE
Example See example 1. Simple Table.

TR - (table row) The TR tag specifies a table row. Use the TR tag inside a TABLE tag.
The TR tag can contain TH tags, which indicate table headings, and TD tags, which
indicate table cells.

Syntax
<TR

ALIGN="CENTER|LEFT|RIGHT"
VALIGN="BASELINE|BOTTOM|MIDDLE|TOP"
BGCOLOR="color"
>
...
</TR>
ALIGN specifies the horizontal placement of the table:
· CENTER centers the table .
· LEFT aligns the table to the left (the default).
· RIGHT aligns the table to the right.

VALIGN specifies the vertical placement of the content in the cell:·

BASELINE aligns the content with the cell's baseline.

· BOTTOM aligns the content with the cell's bottom.

 · MIDDLE centers the content within the cell (the default).
· TOP aligns the content with the cell's top.

BGCOLOR="color" sets the default color of the background of the table row. Table
cells defined with the TD tag inside the row can set their own background color.

Used within TABLE

Example See example 1. Simple Table.

TD - (table data)

The TD tag specifies text in a cell in a table. Use the TD tag inside a
TR tag inside a TABLE tag.

You can set the background color of a cell by specifying its BGCOLOR attribute.
For each cell, you can use the COLSPAN and ROWSPAN attributes to specify how many
columns and rows the cell spans.

To specify the distance between cells, set the CELLSPACING attribute in the
TABLE tag. To specify the distance between the borders of each cell and its contents, set
the CELLPADDING attribute in the TABLE tag. All cells in a table have the same padding
and spacing.

If a cell is empty, that is, the <TD> tag is immediately followed by the </TD> tag,
the space occupied by the cell in the table is completely empty. That is, the cell has no
content, no background color, and no border. However, suppose you have a four column
table, but you have no data for the second column in one of the rows. You should still
provide the second TD tag for that row, because if you leave it out the table will close the
gap and move the third cell into the second column. The row will end up having three
columns only, and it will not be aligned with the rest of the table
 If you want an empty cell to look like other cells in the table, you can give it a period
or a dash to indicate that the data is unknown, for example, <TD> -

</TD>.

Syntax
<TD

ALIGN="CENTER|LEFT|RIGHT"
VALIGN="BASELINE|BOTTOM|MIDDLE|TOP"
BGCOLOR="color"

COLSPAN="value"
ROWSPAN="value"
HEIGHT="pixelHeight"
WIDTH="pixelWidth"
NOWRAP="value"
>
...
</TD>
ALIGN specifies the horizontal placement of the contents of the table cell:
· CENTER centers the content within the cell.
· LEFT aligns the content with the cell's left edge (the default).
· RIGHT aligns the content with the cell's right edge.
VALIGN specifies the vertical placement of the contents of the cell:
· BASELINE aligns the content with the cell's baseline.
· BOTTOM aligns the content with the cell's bottom.
· MIDDLE centers the content within the cell (the default).
 · TOP aligns the content with the cell's
top. BGCOLOR="color" sets the color of the background of the
table cell.

COLSPAN="value" indicates the number of columns the cell spans. Give the number as
an integer.

ROWSPAN="value" indicates the number of rows the cell spans. Give the value as an
integer. HEIGHT="pixelHeight"specifies the suggested height of the table cell, in
pixels.WIDTH="pixelWidth" specifies the suggested width of the table cell, in pixels.

NOWRAP specifies that the lines within a cell cannot be broken (that is, they do not wrap
onto the next line).

Used Within TABLE and TR

Example See example 1. Simple Table.

TH - (table heading) The TH tag specifies a table cell whose contents are usually
displayed in a bolder font than those of regular table cells. The intent of the TH tag is that
you use it for column or row headings.

Syntax
<TH

ALIGN="CENTER|LEFT|RIGHT"
VALIGN="BASELINE|BOTTOM|MIDDLE|TOP"
BGCOLOR="color"
COLSPAN="value"
ROWSPAN="value"
HEIGHT="pixelHeight"
 WIDTH="pixelWidth"
NOWRAP
>
...
</TH>
ALIGN specifies the horizontal placement of the heading in the table cell:
· CENTER centers the content within the cell.

· LEFT aligns the content with the cell's left edge (the default).

· RIGHT aligns the content with the cell's right

edge. VALIGN specifies the vertical placement of the contents
of the cell:

· BASELINE aligns the content with the cell's baseline.

· BOTTOM aligns the content with the cell's bottom.
· MIDDLE centers the content within the cell (the default).
· TOP aligns the content with the cell's top.

BGCOLOR="color" sets the color of the background of the table heading. This color can
be overridden by a BGCOLOR tag in the TD tags within the TH tag.

COLSPAN="value" indicates the number of columns the cell

spans. ROWSPAN="value" indicates the number of rows the cell
spans. HEIGHT="pixelHeight" specifies the suggested height of the table cell, in pixels.
WIDTH="pixelWidth"specifies the suggested width of the table cell, in
pixels. NOWRAP specifies that the lines within a cell cannot be broken; that is, they
do not wrap onto the next line.

Table's Attributes
border (example)

This specifies the width in pixels of the border around the table
This is in addition to the border around each cell (the
"cellspacing"). The default is zero

cellspacing (example)

This gives the space in pixels between adjacent

cells. The default is usually about 3

cellpadding (example)

Specifies the space between the cell walls and

contents The default is usually about 1

width

This specifies the width of the

table In pixels (<table
width="250">), or

As a percentage of the current browser window width

(<table width="75%">)

rules (example) Specifies the horizontal/vertical divider

lines. Must be used in conjunction with the "border"
attribute!

frame (e xample) Specifies which outer borders are drawn.All four are drawn if this
attribute is omitted.
Table Row (tr) Define each row in the table

Each row may contain table header (th) and table data (td)
elements Attributes:

align: Horizontal alignment

Values: "left", "center", "right", "justify",

"char" valign: Vertical alignment

Values: "top", "middle", "bottom"

Table Header (th) and Table Data (td)

Define a table
cell Attributes

Colspan: Defines a heading or cell data entry that spans multipl e

columns Rrowspan:Defines a heading or cell data entry that spans
multiple rows align: "left", "right", "center", "justify", "char"

e.g.:, the following aligns entries on a decimal

point <td align="char" char=".">…</td>

valign:"top", "bottom", "middle"

width, height: Cell width and height in pixels only (no percentages officially
allowed)
HTML Frames:

Frames and Framesets

This section discusses the tags for creating frames and frame sets. A frame is
region of a window that acts as a window itself. The main window can contain multiple
frames, so that different regions of the window display different contents. A frame set is
a set of frames.

· FRAME
· FRAMESET
· NOFRAMES

FRAME - (window region)

The FRAME tag creates a frame, which is an individual , independently scrollable

region of a web browser. You can think of it as a window within a window. The FRAME
tag must be used within a FRAMESET tag.

The FRAMESET tag contains a set of FRAME tags, which each define a frame in
the main window.

Each frame has a distinct URL that determines the content displayed by the frame.

You can specify whether or not a frame has a border, whether or not it has margins,
whether or not the user can resize it dynamically, and whether or not it is scrollable.

Syntax
<FRAME

BORDERCOLOR="color"
FRAMEBORDER="YES"|"NO"
MARGINHEIGHT="marginHeight"
MARGINWIDTH="marginWidth"
NAME="frameName"
 NORESIZE
SCROLLING="YES"|"NO"|"AUTO
" SRC="URL"

>
The URL tag is required.

BORDERCOLOR="color" specifies the color of the fram e's borders. Because frames
share borders, Navigator must resolve any border color conflicts.

FRAMEBORDER determines whether or not the frame has visible borders.

· YES results in an outline-3D border.
· NO suppresses the 3D border.

When the FRAMEBORDER attribute appears in a FRAMESET tag, it sets a default

FRAMEBORDER value for all frames in the frameset. When the FRAMEBORDER
attribute appears in the FRAME tag, it applies only to that particular frame, overriding any
FRAMEBORDER attribute established b y an outer FRAMESET tag. A border shared
between frames is plain only if all adjacent frames have the FRAMEBORDER attribute
set to NO.

When neither a FRAME nor a FRAMESET tag governing that FRAME

has set the FRAMEBORDER attribute, the default setting is YES.

MARGINHEIGHT="marginHeight" specifies a margin, in pixels, between the top and

bottom edges of the frame and the frame contents.

MARGINWIDTH="marginWidth" specifies a margin, in pixels, between the left and

right edges of the frame and the frame contents.
NAME="frameName" specifies the name of the frame. The value of the NAME attribute
must begin with an alphanumeric character.
NORESIZE specifies that users cannot resize the frame. If a frame adjacent to an edge
is not resizable, the entire edge is not resizable, and consequently other frames adjacent
to that edge are not resizable.

SCROLLING specifies whether scrollbars are available on a frame:

· YES specifies that scrollbars are always available.
· NO specifies that scrollbars are never available.

· AUTO specifies that the browser determines whether to display scroll bars
based on the size of the frame and its content. If you do not specify a value for
SCROLLING, the default value is AUTO.

SRC="URL" specifies the URL for the document to be displayed in the frame. The URL
cannot include an anchor name; for example FRAME SRC="doc2.html#colors" is invalid.
If you do not specify the SRC attribute, the frame is displayed with no content

Used Within FRAMESET

Example See Framest example 1. Simple Frameset with two frames.

FRAMESET - (set of frames)

The FRAMESET tag defines a set of frames that appear in a web browser
window. The FRAMESET tag contains one or more FRAME tags that each
describe a frame.

The only place the FRAMESET tag can be used is in a frame definition document,
which is an HTML document that contains the FRAMESET and FRAME tags that describe
the framesets and frames that make up a Navigator window.

An HTML document that contains a FRAMESET tag cannot contain a BODY tag.
 A frameset can specify that its frames are laid out in rows or columns. If youwant
your frameset to have rows and columns, rather than just rows or columns, you can use
FRAMESET tags nested inside FRAMESET tags.

For example, you could define a frameset t hat has two columns, where the first
column contains a frameset that has two rows and the second column contains a frameset
that has 4 rows. You can specify the border thickness for all frames in a top- level
frameset. You can also specify whether or not al l frames in a set display their border by
default and what color the border uses. Individual frames in the set can override the
default to specify whether or not they display their border, and what color their border
uses.

You can specify actions to occur when the window displaying the frameset gets or
loses focus, and you can specify actions to occur when the frameset is loaded or
unloaded.

When you define a link, (using the <A HREF> tag) you can specify in which frame
the destination document is displ ayed, by giving the name of the frame as the value of
the link's TARGET attribute. It is possible to define a link to change the content of multiple
frames in one go by using the ONCLICK attribute of the link. To do this, set the value of
the link's ONCLICK attribute to JavaScript code that changes the location (source) of one
or more frames.

For example, the file frameset.htm opens a web page that has three frames. If you
click a link in the left frame, both the other frames update. You can open the file
framtoc.htm and view its source to see the code for the links that update multiple frames.

The NOFRAMES tag is used inside a FRAMESET tag to provides alternative

content for browsers that cannot display frames.

Syntax
<FRAMESET
 COLS="columnWidthList"
ROWS="rowHeightList"
BORDER="pixWidth"
BORDERCOLOR="color"
FRAMEBORDER="YES"|"NO"
ONBLUR="JScode"
ONFOCUS="JScode"
ONLOAD="JScode"
ONUNLOAD="JScode"
>
...
</FRAMESET>
You must supply at least one of the COLS or ROWS attribues.

COLS="columnWidthList" specifies a comma- separated list of values giving the width

of each frame in the frameset. If one of the values is missing, the browser sizes the
corresponding frame to fit the space available.

The browser may approximate some values to make the total width of the columns
equal to the width of the window.

The value of each item in the columnWidthList can be one of the following:
· Width of a frame in pixels.
· Width of a frame as a percentage of its parent frame or window.

· An asterisk (*), which mea ns "as much space as possible," which is the
space left over after space has been allocated to all columns that specify their
width as pixel value or a percentage value . The total available left- over space is
divided equally between all columns that use an asterisk.
ROWS="rowHeightList" specifies a comma-separated list of values giving the height of
each frame in the frameset. If one of the values is missing, the corresponding frame is
sized to fit the space available. The browser may approximate some va lues to make the
total height of the rows equal to the height of the window. Each item in rowHeightList can
be one of the following:

· Height of a frame in pixels.

· Height of a frame as a percentage of the parent frame or window.

· An asterisk (*) whi ch means "as much space as possible," which is the
space left over after space has been allocated to all rows that specify their height
as pixel value or a percentage value . The total available left-over space is divided
equally between all rows that use an asterisk.

BORDER="pixWidth" specifies the thickness of frame borders for all frames in an

outermost frameset. A setting of 0 causes all frames in the frameset to have no border
between them. A setting of 3 causes a border of 3 pixels. If no BORDER tag is present,the
default is 5 pixels. The BORDER tag can be used only on an outermost FRAMESET tag.

BORDERCOLOR="color" specifies the color of a frame's borders. Because frame

borders are shared, Navigator must resolve any border color conflicts.

1. A ny BORDERCOLOR attribute appearing in the outermost FRAMESET has

the lowest priority.

2. This attribute is overridden by any attribute used in a nested FRAMESET tag.

3. Finally, any BORDERCOLOR attribute in the current FRAME tag overrides all
previous FRAMESET tag settings. If there is a conflict for two colors of equal priority both
set on the same edge, the behavior is undefined.

FRAMEBORDER determines how frame borders are displayed.

 · YES results in an outline-3D border.
· NO suppresses the 3D border.

When the FRAMEBORDER attribute appears in the FRAMESET tag, it sets a

default FRAMEBORDER value for all frames in that frameset. When the
FRAMEBORDER attribute appears in a FRAME tag, it applies only to that particular
frame, overriding any FRAMEB ORDER attribute specified by an outer FRAMESET tag.
A border shared between frames is plain only if all adjacent frames have the
FRAMEBORDER attribute set to NO. When neither a FRAME nor a FRAMESET tag
governing that FRAME has set the FRAMEBORDER attribute, the default setting is YES.

ONBLUR="JScode" specifies JavaScript code to execute when the window containing

the frameset loses focus.

ONFOCUS="JScode" specifies JavaScript code to execute when the window containing

the frameset gets focus.

ONLOAD="JScode" specifies JavaScript code to execute when the frameset is loaded

into the frame.

ONUNLOAD="JScode" specifies JavaScript code to execute when the frameset is

unloaded (exited).

Frameset Example 1. Simple Frameset With Two Frames

The following example creates a set of two frames. The frameset is kept in a
document file, such as index.html, that contains no other information. When users open
this page in their web browser, the FRAMESET tag loads the individual URLS referenced
in the FRAME tags.

<HTML>
 <HEAD> <TITLE>Simple Frame Set
Example</TITLE></HEAD> <FRAMESET COLS="20%,80%"
BORDER=10>

<FRAME SRC="simpltoc.htm" NAME="exampletoc">

<FRAME SRC="forms.htm" NAME="examplecontent">

<NOFRAMES>You must use a browser that can display
frames to see this page. </NOFRAMES>

</FRAMESET>
</HTML>

The two frames appear as columns because COLS is specified within the FRAMESET
tag. The left frame uses 30% of the available space, and the right frame uses the
remaining 70% of the space. By default, the f rames in this example have scrollbars and
are resizable, because no values are specified for the SCROLLING and NORESIZE
attributes.

Example 2: Nested Frames

The following example creates a frameset that contains a nested frameset.

Theoutermost frameset has two columns. The second column contains a nested frameset
that has two rows.

<HTML><HEAD><TITLE>Frame Set
Example</TITLE></HEAD> <FRAMESET COLS="20%,*">

<NOFRAME>You must use a browser that can display

frames to see this page.</NOFRAME>
<FRAME SRC="frametoc.htm"
NAME="noname"> <FRAMESET
ROWS="30%,*">
<FRAME SRC="frtoc1.htm" NAME="toptoc">

<FRAME SRC="frstart.htm"
NAME="outer"> </FRAMESET>

</FRAMESET>
</HTML>

NOFRAMES - (alternative text for frames)

The NOFRAMES tag specifies content tha t is displayed by browsers that do not
know how to display frames. Browsers that can display frames ignore all text in the
NOFRAMES tags unless a file called by a frame tag is missing or unreachable by the
browser.

Place the NOFRAMES tag within the FRAMESET tag.

Syntax
<NOFRAMES>...</NOFRAMES>

Used Within <FRAMESET>

HTML Forms:

• Form is a layout component used in web page to interact the user.

• Form is also used to link the another page or another form based on the action .
 • List of compo nent
Text

Text Area
Label Button
Check box
Radio button
Menus

1. Text

• Text component is used to insert a text in web page.

• <Input> tag is used to insert a text component in document.
• General form
<input type=”text” size=25 value= “ “>
2. Text Area

• Text Area component is used to feed multiple line of text.

• Attribute in text area component.
• Row: Row attribute used to denote the total number of rows in the text area.
• Column: Column attribute is used to denote the number of column in the tex t
area.

• Name: Name attribute is used to denote the name of the text area.
• Wrap: Wrap attribute is used to wrap the text inside the text area.
• <text area> tag is used to insert the text area in the web document.
• General form:
o <text area cols=”value” rows=”values” >----</text area>
• Example:
o <text area cols=”50” rows=”40” name=”name”>---</text area>
3. Label
 • Label tag is used to create text box to fill the text.
• This tag has starting tag (<label>) and ending tag (</label>).
• Example
o<label> Name <input type=text size=40>--</label>
4. Check box

• Check box component is used to place the checkbox in the web document.
• General form:
o<input type=checkbox> ----- </input>
MENU - (list of simple items)

The MENU tag displays a list of simpl e items. This tag works just like the
UL tag. Use the LI tag to designate the individual menu items.

This tag is being deprecated because it has become obsolete in favor of the UL
tag.

Syntax
<MENU>

...
</MENU>

Example

The following example creat es a list of three short

items: <P>HTML Menu Example:</P>

<MENU>
 <LI> Windows 9x
<LI> Windows NT

<LI> Windows
2000 </MENU>

Forms
This section discusses the tags for creating forms.

FORM
INPUT

INPUT TYPE="BUTTON"
INPUT TYPE="CHECKBOX"
INPUT TYPE="FILE"
INPUT TYPE="HIDDEN"
INPUT TYPE="IMAGE"
INPUT TYPE="PASSWORD"
INPUT TYPE="RADIO"
INPUT TYPE="RESET"
INPUT TYPE="SUBMIT"
INPUT TYPE="TEXT"
SELECT
OPTION
ISINDEX

FORM - (form for user input)

The FORM tag creates an HTML form. The form can contain int erface elements such as
text fields, buttons, checkboxes, radio buttons, and selection lists that let users enter text
and make choices. Each interface element in the form must be defined with an
appropriate tag, such as <INPUT> or <SELECTION>. All element s in the form must be
defined between the <FORM> and </FORM> tags. As well as user input elements, the
form can contain other elements such as headings, paragraphs, tables, and so on.

When the form is displayed in a web browser, the user can fill it out by making
choices and entering text using the interface elements, and then submit the form by
clicking a "Submit" button.

Kinds of Interface Elements

Several kinds of form elements can be defined using the INPUT tag, which uses
the TYPE attribute to indicate the type of element, such as button, checkbox, and so on.

Two other kinds of interface elements you can put in a form are selection lists and
text areas. Selection lists act as menus and are defined with the SELECT tag. Multi- line
text-entry fields are defined with the TEXTAREA tag.

Submit Buttons and CGI Programs

To enable the form to process the data that the user enters, it must have a "Submit"
button, which is a button defined by an <INPUT TYPE="SUBMIT"> or an <INPUT
TYPE="IMAGE"> tag.

The action invoked when the user clicks a "Submit" button is defined by the
ACTION attribute of the FORM tag. The value of the ACTION attribute is usually a URL
that points to a CGI program. A CGI program runs on a server, processes arguments sent
by the form, and returns data to the browser.

The value of the form's METHOD attribute also affects the way the CGI program
is invoked. It is beyond the scope of this reference to provide details of CGI programming,
but many fine books are available on the subject, and also lots of information is available
on the web.
ONCLICK and ONSUBMIT

You can also define OnClick event handlers for several kinds of input elements.
An OnClick event handler is a piece of JavaScript code that is executed when the element
is cli cked. The FORM tag has an optional ONSUBMIT attribute, whose value is a
JavaScript event handler that executes when a "Submit" button in the form is pressed. If
the JavaScript code returns false, the form's action ends there, and the URL specified by
the ACTION attribute is not invoked.

If the JavaScript code returns anything else, the URL specified by the ACTION
attribute is invoked. For example, you could use the ONSUBMIT attribute to check
whether or not the user really wants to submit the form.

Name/Value Pairs

When a form is submitted, the data contained in the form is sent to the invoked
CGI program as a series of name/value pairs. The name portion of each pair is the name
of an interface element as specified by its NAME attribute. In most casesthe value portion
is the value displayed by the element, for example, the text displayed in a text field.

Nesting Forms

A document can have multiple forms, but forms cannot be nested -- you cannot
have a form within a form. If your document uses positi oned HTML content, each form
must be completely contained within one positioned block.

Syntax
<FORM

ACTION="serverURL"
ENCTYPE="encodingType"
METHOD="GET"|"POST"
 NAME="formName"
ONRESET="JScode"
ONSUBMIT="JScode"
TARGET="windowName"
>
...
</FORM>

The ACTION attribute is required if any action is to occur when the user presses a
"Submit" button in the form.

ACTION="serverURL" specifies the URL of the program to be invoked when the form
is submitted. The action can also be a mailto: URL if the form r esults are to be mailed to
someone.ENCTYPE="encodingType" specifies the MIME encoding of the data sent:

"application/x-www-form-urlencoded" (the default), is usually used if the METHOD

attribute has the value POST.

"multipart/form-data" is used when the form contains a file upload element (INPUT
TYPE="FILE").

METHOD specifies how information is sent to program invoked by submitting the form.

GET (the default) appends the input information to the URL which on most
receiving systems becomes the value of the environment variable QUERY_STRING.

POST sends the input information in a data body that is available on stdin with the
data length set in the environment variable CONTENT_LENGTH.
NAME="formName" specifies the name of the form. The name is not di splayed on the
form. JavaScript can use the NAME attribute to differentiate different forms if there are
multiple forms on a page.

ONRESET="JScode" specifies JavaScript code that executes when a user resets the
form by using a RESET button.

ONSUBMIT="JScode" specifies JavaScript code that executes when a user submits the
form by clicking a "Submit" button.You can use the ONSUBMIT attribute to prevent a form
from being submitted; to do so, put a return statement that returns false in the JavaScript
code. Any other returned value lets the form submit. If you omit the return statement, the
form is submitted.TARGET="windowName" specifies the window that displays the data
returned by the invoked program.

Example

The following example creates a form called LoginForm that contains text fields for
user name and password, a submit button, and a cancel button.

<FORM NAME="LoginForm" METHOD=POST ACTION="urltoInvoke"> <P>User name:

<INPUT TYPE="text" NAME="userName"

SIZE="10"> <P>Password:

<INPUT TYPE="password" NAME="password"

SIZE="12"> <P><INPUT TYPE="submit" VALUE="Log
in">

<INPUT TYPE="button" VALUE="Cancel"

onClick="window.close()"> </FORM>

INPUT - (input element in a form)

o The INPUT tag defines a form element that can receive user input. The
TYPE attribute determines the specific sort of form element to be created.
TYPE can be one of the following:

o BUTTON places a button on an HTML form. Use JavaScript code to make

the button perform an action you define.

o CHECKBOX places a toggle switch on an HTML form, letting the user set a
value on or off.

o FILE places an element on an HTML form letting the user supply a file as
input. When the form is submitted, the content of the specified file is sent to
the server along with the other form data.

o HIDDEN specifies an invisible text element. A hidden element is used for

passing information to the server when a form is submitted.

o IMAGE places an image, serving as a custom button, on an HTML form.

When a user clicks an image element, the form is submitted to the server.

o PASSWORD places a text input field on an HTML form. Each character

typed in the field is displayed as a character such as * or a black dot to
conceal the actual value.

o RADIO places a radio button on an HTML form. Radio buttons can be

grouped into sets, and only one button per set can be selected at a time.

o RESET places a reset button on an HTML form. When a user clicks a reset
button, all elements in the form are reset to their default values.

o SUBMIT places a submit button on an HTML form. When a user presses a

submit button, the form is submitted.
 o TEXT places a single line text input field on an HTML form. A text field lets
the user enter text.

INPUT TYPE="BUTTON"

A button apears in the form. You must specify JavaScript code as the value of the
ONCLICK attribute to determine what happens when the user clicks the

button.

Syntax

<INPUT
TYPE="BUTTON"
NAME="buttonName"
VALUE="buttonText"
ONCLICK="JScode"
>
NAME="buttonName" specifies the name of the button. The name does not appear in
the form.

VALUE="buttonText" specifies the text to be displayed in the

button. ONCLICK="JScode" specifies JavaScript code to execute when a user
clicks the button.

Example

<FORM METHOD=POST ACTION="/cgi-

bin/example.cgi"> <INPUT TYPE="button"
VALUE="Close Window" onClick="window.close();">
 </FORM>

INPUT TYPE="CHECKBOX" A checkbox is a toggle that the user can select (switch on)
or deselect (switch off.)

Syntax
<INPUT TYPE="CHECKBOX"

CHECKED
NAME="name"
ONCLICK="JScode"
VALUE="checkboxValu
e"

>

CHECKED indicates that the checkbox is displayed with a tick mark to indicate
that it is selected.

NAME="name" specifies the name of the input element. This value is the name portion
of the name/value pair for this element that is sent to the server when the form is
submitted. The name is not displayed on the form.

ONCLICK="JScode" specifies JavaScript code to execute when a user clicks the

checkbox. VALUE="checkboxValue" specifies the value to be returned to the server if
the checkbox is selected when the form is submitted. The default value is ON, but you
can specify a different value if you want. When the form is submitted, only the name/value
pairs for selected checkboxes are sent to the invoked CGI program.

Example
 <P>Specify your music preferences (check all that apply):</P>
<BR><INPUT TYPE="checkbox" NAME="musicpref_rnb"
CHECKED> R&B

<BR><INPUT TYPE="checkbox" NAME="musicpref_jazz"

CHECKED> Jazz

<BR><INPUT TYPE="checkbox" NAME="musicpref_blues"

CHECKED> Blues

<BR><INPUT TYPE="checkbox" NAME="musicpref_newage"

CHECKED> New Age

INPUT TYPE="FILE" This places an element on an HTML form that lets the user supply
a file as input. When the form is submitted, the content of the specified fi le is sent to the
server as the value portion of the name/value pair for this input element.

If a form contains a file input element, the value of the ENCTYPE attribute of the
FORM tag should be "multipart/form-data".

Syntax

<INPUT
TYPE="FILE"
NAME="name"
VALUE="filename"
>

NAME=name specifies the name of the input element. This value is used as the name
portion of the name/value pair for this element that is sent to the server when the form is
submitted. The name is not displayed on the form.

VALUE=filename specifies the initial value of the input element.

Example

<FORM ENCTYPE="multipart/form-data"
ACTION="/cgi-bin/example.cgi"
METHOD="POST"> <P>File name:

<INPUT
TYPE="file">
</FORM>
INPUT TYPE="HIDDEN"

A hidden input element is an invis ible element whose main purpose is to contain
data that the user does not enter. This data gets sent to the invoked CGI program when
the form is submitted.

This tag provides a mechanism for delivering a value to the CGI program without
the user having entered it, but note that it is not very hidden because the user can discover
it by viewing the document source.

Syntax

<INPUT
TYPE="HIDDEN"
NAME="name"
VALUE="value"

>

NAME="name" specifies the name of the input element. This value is the name port ion
of the name/value pair sent to the invoked CGI program when the form is submitted. The
name is not displayed on the form.

VALUE="value" specifies the initial value of the input element.

Example

This example creates a form with a hidden element, D efaultPass, that stores the
initial value of the password field.

<FORM NAME="LoginForm" METHOD=POST

ACTION="/cgibin/ example.cgi">

<P>Password:

<INPUT TYPE="password" NAME="password"

SIZE="12" VALUE="treasure">

<INPUT TYPE="hidden" NAME="DefaultPass"

VALUE="treasure"> </FORM>

INPUT TYPE="IMAGE"

This places an image, serving as a custom button, on an HTML form. When a user
clicks the image, the form is submitted to the server.

Syntax

<INPUT TYPE="IMAGE"
ALIGN="LEFT"|"RIGHT"|"TOP"|"ABSMIDDLE"|"ABSBOTTOM"
| "TEXTTOP"|"MIDDLE"|"BASELINE"|"BOTTOM"
NAME="name"
SRC="location"
>
ALIGN specifies the alignment of the image in relation to the surrounding text. If you do
not specify a value for ALIGN, Navigator uses BOTTOM as the default. The possible
values are LEFT, RIGHT, TOP, ABSMIDDLE, ABSBOTTOM, TEXTTOP, MIDDLE,
BASELINE, and BOTTOM. See the section "IMG" for a description of the values.

NAME=name specifies the name of the input element. This value is used as the name
portion of the name/value p air for this element that is sent to the invoked CGI program
when the form is submitted. The name is not displayed on the form.When Navigator sends
the offsets of the image to the server, it sends them as name.x and name.y.

SRC="location" specifies the URL of the image to be displayed in the document.

Example
<CENTER><INPUT TYPE="image" SRC="signnow.gif"></CENTER>

INPUT TYPE="PASSWORD" A password element is a text input field in which

each character typed is displayed as a character such as * or a bla ck dot to conceal the
actual value.

Syntax

<INPUT
TYPE="PASSWORD"
MAXLENGTH="maxChar"
NAME="name"
ONSELECT="JScode"
SIZE="charLength"
VALUE="textValue"
>

MAXLENGTH="maxChar" specifies the maximum number of characters a password box

can accept.
NAME="name" specifies the name of the input element. This value is used as the name
portion of thename/value pair for this element that is sent to the server when the form

is submitted. The name is not displayed on the form.

ONSELECT="JScode” specifies JavaScript code to execute when a user selects some

of the text in the text element.

SIZE="charLength" specifies the length of the input field, in characters. The value should
be an integer.

VALUE="textValue"specifies the initial value of the password, if any.

Example
<P>Password:

<INPUT TYPE="password" NAME="password" VALUE="" SIZE="25">

INPUT TYPE="RADIO" A radio element is a radio button. A set of radio buttons consists
of multiple radio buttons that all have the same NAME attribute. Only one radio button in
the set can be selected at one time. When the user selects a button in the set, all other
buttons in the set are deselected. If one radio button in a set has the CHECKED attribute,
that one is selected when the set is first laid out on the window.

Syntax
<INPUT TYPE="RADIO"

CHECKED
NAME="name"
ONCLICK="JScode"
VALUE="buttonValue
"
 >
CHECKED indicates that the radio button is selected.

NAME="name" specifies the name of the input element. This value is used as the name
portion of the name/v alue pair for this element that is sent to the invoked CGI program
when the form is submitted. The name is not displayed on the form. All radio buttons that
have the same name constitute a radio group; only one radio button of a group can be
set at one time.

ONCLICK="JScode" specifies JavaScript code to execute when a user clicks the radio
button. VALUE="value” specifies the value that is returned to the server when the radio
button isselected and the form is submitted. Only name/value pairs for radio but tons that
are selected are sent to the invoked CGI program. The value defaults to ON.

Example

The following example creates a radio button

group. <P>Category:

<BR><INPUT TYPE="radio" NAME="category" VALUE="liv"

CHECKED> Living

<BR><INPUT TYPE="radi o" NAME="category" VALUE="din"> Dining

<BR><INPUT TYPE="radio" NAME="category" VALUE="bed">
Bedroom

INPUT TYPE="RESET" When a user presses a reset button, all elements in the form are
reset to their default values

Syntax

<INPUT
TYPE="RESET"
 NAME="name"
ONCLICK="JScode"
VALUE="label"
>
NAME="name"specifies the name of the input element.

ONCLICK="JScode" specifies JavaScript code to execute when a user clicks the

button. VALUE="label" specifies the text to display on the face of the reset button.

Example

This example displays a text element with the default value CA and a reset button
labelled Clear Form. If the user types a state abbreviation in the text element and then
clicks the Clear Form button, the original value of CA is restored.

<FORM>

<P>State: <INPUT TYPE="text" NAME="state" VALUE="CA"

SIZE="2"> <P><INPUT TYPE="reset" VALUE="Clear Form">

</FORM>

INPUT TYPE="SUBMIT" When a user clicks a submit button, the form is submitted,
which means that the ACTION specified for the form is invoked.

Syntax

<INPUT
TYPE="SUBMIT"
NAME="name"
VALUE="label">
NAME="name" specifies the name of the input element. The name is not displayed on
the form.

VALUE="label" specifies the text to display on the face of the submit button.

Example
<INPUT TYPE="submit" NAME="SubmitButton" VALUE="Done">

INPUT TYPE="TEXT" A text element is a single line text input field in which the user
can enter text.

Syntax

<INPUT TYPE="TEXT"
MAXLENGTH="maxChars
" NAME="name"
ONBLUR="Scode"
ONCHANGE="JScode"
ONFOCUS="Scode"
ONSELECT="JScode"
SIZE="lengthChars"
VALUE="text"
>

MAXLENGTH="maxChars" specifies the maximum number of characters a text box

can accept.

NAME="name" specifies the name of the input element. This value is used as the name
portion of the name/ value pair for this element that is sent to the invoked CGI program
when the form is submitted. The name is not displayed on the form.

ONBLUR="JScode" specifies JavaScript code to execute when the text element loses
keyboard focus.
ONCHANGE="JScode" specifies JavaScript code to execute when the text element
loses focus and its value has been modified.

ONFOCUS="JScode" specifies JavaScript code to execute when a user clicks the text
element. See the JavaScript Guide forSee the JavaScript Guide for more
information. ONSELECT="JScode"specifies JavaScript code to execute when a user
selects some of the text in the text element.

SIZE="lengthChars" specifies the length of the input field, in

characters. VALUE="text"specifies the initial value of the text
element.

Example
<P>Last name:

<INPUT TYPE="text" NAME="last_name" VALUE="" SIZE="25">

SELECT - (selection list in a form)

The SELECT tag defines a selection list on an HTML form. A selection list displays
a list of options from which the user can sel ect an item. If the MUTLIPLE attribute is
supplied, users can select multiple options from the list at a time. If the MULTIPLE
attribute is not supplied users can select only one option in the list at a time.

The SIZE attribute specifies how many optionsin the list are displayed at one time.
For multiple-selection lists, if you do not specify the SIZE attribute, the browser displays
some, maybe all, of the options. For single- selection lists, by default Navigator displays
the list as a drop-down menu tha t initially shows only one option. The user can click the
list to display the rest of the options. If you specify the SIZE attribute, the list is displayed
as a scrolling list that shows the specified number of options, regardless of whether the
list allows single or

multiple selection..
 The SELECT tag should be used between <FORM> and </FORM> tags. Use the
OPTION tag to define options in the list. When the form containing the selection list is
submitted to the server, a name/value pair is sent for each selected option in the list.

Syntax
<SELECT

NAME="selectName"

MULTIPLE
ONBLUR="JScode"
ONCHANGE="JScod
e"
ONCLICK="JScode"
ONFOCUS="fScode"
SIZE="listLength"

>
<OPTION...>
...

<OPTION
...>
</SELECT>

MULTIPLE specifies that multiple items can b e selected. If this attribute is omitted, only
one item can be selected from the list. If multiple selection is enabled, the user usually
needs to hold down the Shift key to select additional items.

NAME="selectName" specifies the name of the select elem ent. This value is the name
portion of the name/value pair sent to the invoked CGI program when the form is
submitted. The name is not displayed on the form.
ONBLUR="blurJScode specifies JavaScript code to execute when the select element
loses focus.

ONCHANGE="changeJScode" specifies JavaScript code to execute when the select

element loses focus and its value has been modified.

ONCLICK="JScode" specifies JavaScript code to execute when a user clicks an item in

the list.

ONFOCUS="focusJScode" specifies JavaScript code to execute when the element gets

focus.
SIZE="ListLength" specifies the number of options visible when the form is displayed. If
the list contains more options than specified by size, the list is displayed with scrollbars.

Used WithinFORM

Select Example 1:Single Item Selection

<FORM>

<B>Shipping
method:</B><BR>
<SELECT>

<OPTION> Standard
<OPTION SELECTED> 2-
day <OPTION> Overnight
</SELECT>

</FORM>

Example 2: Multiple Selection

 <FORM>

...

<B>Music types for your free CDs:</ B><BR>

<SELECT NAME="music_type_multi"
MULTIPLE> <OPTION> R&B

<OPTION> Jazz
<OPTION> Blues

<OPTION>
Reggae
</SELECT>
</FORM>

Example 3: Multiple Selection With Default

In the following example, all seven options can be chosen, but bananas
areselected by default. The list is displayed as a scrollable menu that fits four options at
a time.

<FORM>

<SELECT NAME="fruit_choices"
MULTIPLE> <OPTION>Apples

<OPTION
SELECTED>Bananas
<OPTION>Cherries
<OPTION>Oranges
<OPTION>Pineapple
 <OPTION>Figs
<OPTION>Guava
</SELECT>
</FORM>

OPTION - (option in a SELECT list) The OPTION tag specifies an option in a selection
list. Use the OPTION tag inside a SELECTION tag. When the form containing the
selection list is submitted to the server, a name/value pair is sent for each selected option
in the list. The value portion of an option is the value of the VALUE attribute, if it has one,
otherwise, it is the text that follows the <OPTION> tag.

Syntax

<OPTION
VALUE="optionValue"
SELECTED
>
...
</OPTION>

VALUE="OptionValue" specifies a value that is returned to the server when the option
is selected and the form is submitted. When no VALUE attribute is present, the value
returned

is the same as the text following the <OPTION>

tag. SELECTEDspecifies that the option is selected by
default.
Used within FOR
Example See example 1:Single Item Selection.

ISINDEX - (searchable index)

 The ISINDEX tag causes the web page to display a text entry field in which the
user can type a string. The intent of this tag is that it "switches on searching" in the page,
but in reality, this tag is useful only if the page is generated by a CGI program.

The intent is that when the user enters text into the text entry field and presses the
Return key (or clicks an appropriate button on the browser), the CGI program is invoked
again, with the arguments generated from the data in the text field. The browser outputs
a new page whose content is determined by what the user entered in the text field.

The CGI program should test for the pres ence of arguments. If there are none, it
should display a default page that includes the ISINDEX tag in the header. If there are
arguments, the script does whatever it needs to do. The string entered by the user is the
first argument, and the language your script uses determines how you access the first
argument.

It is beyond the scope of this reference to provide details on CGI programming, but
many fine books are available on the subject, and lots of information is available on the
web.

Note that ISINDEX does not require a closing tag.

Syntax
<ISINDEX PROMPT="text" >

PROMPT="text" specifies the text that appears as the search prompt in the browser.

Used Within HEAD

Example
The following snippet of code from a CGI program generates the header for an HTML
page. When the page is displayed, it has a text entry field whose prompt is "Enter a search
keyword:".

cat << EOF <HEAD>

<ISINDEX PROMPT="Enter a search keyword:"> </HEAD>

Unit 2 CSS AND CLIENT SIDE SCRIPTING

Introduction to Cascading Style Sheets

Cascading Style Sheets (CSS) is a slightly misleading term, since a website might
have only one CSS file (style sheet), or the CSS might be embedded within an HTML file.
It is better to think of CSS as a technology (in the singular). CSS is comp rised of
statements that control the styling of HTML documents. Simply put, an HTML document
should convey content. A CSS document should control the styling of that content.

<div align="center"></div> <img src="this.gif" border="0" alt="" /> <table height="200">...

<td width="30"></td>

An HTML file points to one or more external style sheets (or in some cases a list
of declarations embedded within the head of the HTML file) which then controls the style
of the HTML document. These style declarations are called CSS rules.
Features

The latest version of Cascade Style Sheets, CSS 3, was developed to make Web
design easier but it became a hot topic for a while because not all browsers supported it.
However, trends change quickly in technology and all brow ser makers currently are
implementing complete CSS 3 support. Making that process easier for the browser
manufacturers is CSS 3's modularized specification, which allows them to provide support
for modules incrementally without having to perform major refa ctoring of the browsers'
codebases. The modularization concept not only makes the process of approving
individual CSS 3 modules easier and faster, but it also makes documenting the spec
easier.

Eventually, CSS 3 -- along with HTML5 -- are going to be the future of the web.
You should begin making your Web pages compatible with these latest specifications. In
this article, I explore 10 of the exciting new features in CSS 3, which is going to change
the way developers who used CSS2 build websites. Some of the features are:

CSS
TextShadow
CSS Selectors
CSS Rounded
Corners CSS Border
Image
Core Syntax

import

Perhaps the most commonly used of the at-rules, @import, is used to import an external
style sheet into a document. It can be used to replace the LI NK element, and serves the
same function, except that imported style sheets have a lower weight (due to having less
proximity) than linked style sheets.

<style type="text/css" media="screen"> @import url(imported.css);

</style> import url(addonstyles.css); @import "addonstyles.css";

Relative and absolute URLs are allowed, but only one is allowed per instance of
import. One or more comma-separated target media may be used here.

charset

charset is used to specify the character encoding of a document,and must appear

no more than once. It must be the very first declaration in the external style sheet, and
cannot appear in embedded style sheets.
 charset is used by XML documents to define a
character set. charset "utf-8";

namespace

The namespace rul e allows the declaration of a namespace prefix to be used by

selectors in a style sheet. If the optional namespace prefix is omitted, then the URL
provided becomes the default namespace. Any namespace rules in a style sheet must
come after all import and charset at-rules, and come before all CSS rule-sets.

namespace foo url("http://www.example.com/");

namespace can be used together with the new CSS3 selectors (see below). It
defines which XML namespace to use in the CSS. If the XML document doesn't have
matching XML namespace information, the CSS is ignored.

font-face

This was removed from the CSS2.1 specification, but is still used to describe a
font face for a document..

font-face
{ font-family: "Scarborough Light"; src: url("http://www.font.com/scarborough-lt"); }

font-face
{ font-family: Santiago; src: local ("Santiago"),
url("http://www.font.com/santiago.tt"), format("truetype"); unicode-range: U+??,U+100 -
220; font-size: all; font-family: sans-serif; }

media
 This at-rule is used within a style sheet to target specific media. For example, after
defining how an element is to be displayed (in this example for the screen), the declaration
can be overwritten for print, in which case we often want to hide navigation.

p {font-size: 0.8em;} /* for the screen */ @media print { p {font- size: 10pt;} #nav, #footer
{display: none;} } @media screen, handheld { p {font-size: 14px; text-align: justify;} }
The media types are as follows.

all

aural (for speech

synthesizers) handheld

print
projectio
n sc reen
braille
embosse
d tty

tv

page

This at-rules declaration is used to define rules for page sizing and orientation rules
for printing.

page {size: 15cm 20cm; margin: 3cm; marks: cross;}

You may specify how pages will format if they are first, on the left- hand side, or on the
right.
 page :first {margin-top: 12cm;} @page :left {margin- left: 4.5cm;} @page :right
{margin-right: 7cm;}

fontdef

This is an old Netscape-specific at-rule which we should ignore.

Selectors refer to elements in an HTML document tree. Using CSS, they are
pattern-matched in order to apply styles to those elements. A selector consists of one or
more elements, classes, or IDs, and may also contain pseudo-elements and/or pseudo -
classes.

Type Selector

The type selector is the simplest selector of all, and matches all occurrences of an
element. In this example, all <p> tags throughout the document will have the following
style applied, unless overridden.

p {color: #666;}

Universal Selector

The universal selector, used alone, matches all elements in the document tree,
and thus will apply styles to all elements. It is in effect a wildcard.

* {margin: 0; padding: 0;}

In this example, all tags are reset to have no padding or margin. This, by the way,
is a practice to ga in control over all the default padding and margin inherent in the way
User Agents (UAs) display HTML.

Class Selector
 The class selector matches a classname.
.largeFont {font-size: 1.5em;} h3.cartHeader {text-align: center;}

The "largeFont" class wil l apply to all elements into which it is called. The
"cartHeader" class will only function as styled if called into an H3 element. This is useful
if you have another "cartHeader" declaration that you wish to override in the context of an
H3 element, or if you wish to enforce the placement of this class.

ID Selector

The ID selector matches an ID. IDs are identifiers unique to a page. They bear a
resemblance to classes, but are used a bit differently. IDs will be treated more fully below.
The first two ID examples below refer to sections of a web page, while the last refers to a
specific occurrence of an item, say, an image in a DHTML menu. IDs have a higher
specificity than classes.
#header {height: 100px;} #footer {color: #F00;} #xyz123 {font-size: 9px;}

Descendant Selector

A selector can itself be a chain of one or more selectors, and is thus sometimes
called a compound selector. The descendant selector is the only compound selector in
CSS1, and consists of two or more selectors and one or more white space combinators.
In the example below, the white space between the H1 and EM elements is the
descendant combinator. In other words, white space conveys a hierarchy. (If a comma
were to have intervened instead, it would mean that we were styling H1 and E M elements
alike.) Selectors using combinators are used for more precise drill-down to specific points
within the document tree. In this example <em> tags will have the color red applied to
them if they are within an <h1> tag.

h1 em {color: #F00;}
 Other combinators convey greater precision. They include the direct adjacent
sibling combinator (+), the indirect adjacent sibling (or general) combinator (~), and the
child combinator (>). These combinators will be treated below because they are part of
the CSS2.1 specification, and are not supported in IE6.

EXAMPLE:
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd"> <html>

<head>
<style type="text/css">
div.ex
{
width:220px;

padding:10px;
border:5px solid
gray; margin:0px;
}
</style>

</head>
STYLE SHEETS AND HTML STYLE RULE

To apply a style, CSS uses the HTML document tree to match an element,
attribute, or value in an HTML file. For an HTML page to properly use CSS, it should be
well-formed and valid, and possess a valid doctype. If these conditions are not met the
CSS match may not yield the desired results.There are two types of CSS statements:
rule-sets and at- rules. A rule set, also known simply as a rule, is the more common
statement, and consists of a selector and a declaration block, sometimes simply called a
block. The selector can be an element, class, or ID, and may include combinators,
pseudo-elements, or pseudo-classes.
STYLE RULE CASCADING AND INHERITANCE

CSS are probably wondering what exactlycascades about cascading style sheets.
In this section we look at the idea of cascading, and a related idea, that of inheritance.
Both are important underlying concepts that you will need to grasp, and understand the
difference between, in order to work properly with style sheets.

Rule Cascade

A single style sheet associated with one or more web pages is valuable, but in
quite a limited way. For small sites, the single style sheet is sufficient, but for larger sites,
especially sites managed by more than one person (perhaps several teams who may
never communicate) single style sheets don't provide the ability to share common styles,
and extend these styles where necessary. This can be a significant limitation.

Cascading sty le sheets are unlike the style sheets you might have worked with
using word processors, because they can be linked together to create a hierarchy of
related style sheets.

Font Family

The font family of a text is set with the font-family property.The font-family property
should hold several font names as a "fallback" system. If the browser does not support
the first font, it tries the next font.Start with the font you want, and end with a generic
family, to let the browser pick a similar font in the gene ric family, if no other fonts are
available.

Example

p{font-family:"Times New Roman", Times, serif;}

Font Style
 The font- style property is mostly used to
specify italic text. This property has three values:

normal - The text is shown

normally italic - The text is shown
in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

Font Size

The font-size property sets the size of the text. Being able to manage the text size
is important in web design. However, you should not use font size adjustments to make
paragraphs look like headings, or headings look like paragraphs. Always use the proper
HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.

The font-size value can be an absolute, or

relative size. Absolute size:

Sets the text to a specified size

Does not allow a user to change the text size in all browsers (bad for accessibility
reasons)

Absolute size is useful when the physical size of the output is known Relative
size: Sets the size relative to surrounding elements
Allows a user to change the text size in browsers

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is
used when talking about design and layout.
 The CSS box model is essentially a box that wraps around HTML elements, and it
consists of: margins, borders, padding, and the actual content.

The box model allows us to place a border around elements and space elements
in relation to other elements.

Explanation of the different parts:

Margin - Clears an area around the border. The margin does not have
a background color, it is completely transparent

Border - A border that goes around the padding and content. The border
is affected by the background color of the box

Padding - Clears an area around the content. The padding is affected by thebackground
color of the box

Content - The content of the box, where text and images appear

In order to set the width and height of an element correctly in all browsers, you
need to know how the box model works.

CSS Background

CSS background properties are used to define the background effects of an

element. CSS properties used for background effects:

background-color
 background-image

background-repeat

background-attachment
background-position

Background Color

The background-color property specifies the background color of an element. The

background color of a page is defined in the body selector:

Example

body {background-color:#b0c4de;}

The background color can be specified by:

name - a color name, like "red"

RGB - an RGB value, like

"rgb(255,0,0)" Hex - a hex value, like
"#ff0000"

Background Image

The background-image property specifies an image to use as the background

of an element. By default, the image is repeated so it covers the entire element. The
background image for a page can be set like this:
Example

body {background-image:url('paper.gif');}

Background Image - Repeat Horizontally or Vertically

By default, the background-ima ge property repeats an image both horizontally and

vertically. Some images should be repeated only horizontally or vertically, or they will look
strange, like this:

Exampl
ebody
{

background-image:url('gradient2.png');

}
If the image is repeated only horizontally (repeat-x), the background will look better:

Exampl
ebody
{

background-
image:url('gradient2.png')
; background-
repeat:repeat-x;
}
Background - Shorthand property

As you can see from the examples above, there are many properties to consid er
when dealing with backgrounds.

To shorten the code, it is also possible to specify all the properties in one single
property. This is called a shorthand property.

The shorthand property for background is simply

"background": body {background:#ffffff url('img_tree.png')
no-repeat right top;}

When using the shorthand property the order of the property

values are: background-color
NORMAL FLOW BOX LAYOUT

Understanding the box model is critical to developing web pages that don't rely on
tables for layout. In the early days of writing HTML, before the advent of CSS, using tables
was the only way to have discreet content in separate boxes on a page. But tables were
originally conceived to display tabular information. With the advent of CSS floating and
positioning, there is no longer a need to use tables for layout, though many years later
many, if not most, sites are still using tables in this manner.

The box model, as defined by the W3C "describes the rectangular boxes that are
generated for elements in the document tree and laid out according to the visual
formatting model". Don't be confused by the term "boxes". They need not appear as
square boxes on the page. The term simply refers to discreet containers for content. In
fact, every element in a document is considered to be a rectangular box.
Padding, Borders, Margins

Padding immediately surrounds the content, between content and borders. A

margin is the space outside of the borders. If there are no borders both paddng and
margin behave in roughly the same way, except that you can have negative margins,
while you cannot have negative padding. Also padding does not collapse like margins.
See below for the section on collapsing margins.

Margin Collapse

Vertical margins collapse when they meet. Tho ugh it may seem like a strange
thing, if you have assigned top and bottom margins to the P element of, say, 10px each,
you will not have 20px of margin between paragraphs, but rather 10px. This is considered
to be desirable and expected behavior, and not a bug. Now consider the following
declaration.

p {margin: 10px 0 16px;}

Display Property

This is one of the most useful properties. The complete list of values is in the
appendix of this document, but the most useful ones follow.

block

Block displ ay provides behavior similar to a default DIV element. A line break
occurs at the close of the tag. Elements that are block by default are DIV, P,
BLOCKQUOTE, H1 through H6, UL, OL, LI, ADDRESS, etc. Block elements accept
width, height, top and bottom marg ins, and top and bottom padding. A block element
constitutes a separate block box.

inline

Inline display creates no such line break. Elements that are inline by default are
SPAN, IMG, INPUT, SELECT, EM, STRONG, etc. Inline elements do not accept width,
height, top and bottom padding, and top and bottom margins, which makes good sense,
since they are used for part of a line of text (i.e. of a block box).

They do, however, accept left and right padding, left and right margins, and line -
height. Line-heig ht can then be used to approximate height. If you need to apply width,
height or other block properties to an inline element, consider assigning the element block
display and/or floating it. Block display, of course, will force the element on to a separate
line (unless the element is floated). Alternatively you can assign the inline- block value to
make an inline element take block properties (see below).

none

Display set to none sets the element to invisible similar to the hidden value of
the visibility property (see below). However, unlike the visibility property, this value takes
up no space on the page. This is very useful for DHTML hidden tools and for other
instances when you need items to expand and collapse based on whether they contain
content to be viewed on demand. Moreover, when you generate content, items whose
display is set to none will not be included in the loop. (For more on generated content,
see below.) Display set to none will also be hidden from most screen readers. If you are
trying to make something readable only for those with sight disabilities, use an off-screen
class like this:

.offScreen {position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow:
hidden;}
inline-block

This value causes the element to generate a block element box that will be flowed
with surrounding content as if it were a single inline box. It lets you place a block inline
with the content of its parent element. It also allows you to assign properties associated
with block display, such as width and height to an element that naturally takes inline
display. This property is also used to trigger hasLayout in IE6, which is a difficult concept,
but briefly means making IE6 assume CSS certain properties.

run-in
 This display mode causes th e element to appear as an inline element at the start
of the block immediately following it. If there is no block following a run- in element, it is
displayed as a normal block instead. Currently, there seems to be no browser support for
this value except f or IE8, but here is an example of how it is coded, and how it should
look.

list-item

Unordered lists are traditionally used to list bulleted items vertically. But you can
assign bullets to other elements using the list-item value.

div {display: list-item;}

Beyond the Normal Flow

Positioning

The CSS positioning properties allow you to position an element. It can also place
an element behind another, and specify what should happen when an element's content
is too big.Elements can be positioned usi ng the top, bottom, left, and right properties.
However, these properties will not work unless the position property is set first. They also
work differently depending on the positioning method.There are four different positioning
methods.

Static Positioning

HTML elements are positioned static by default. A static positioned element is

always positioned according to the normal flow of the page.Static positioned elements
are not affected by the top, bottom, left, and right properties.

Fixed Positioning
An element with fixed position is positioned relative to the browser window.It will not move
even if the window is scrolled

Relative Positioning
A relative positioned element is positioned relative to its normal position.

Example
h2.pos_l
ef t
{

position:relati
v e; left:-
20px;
}

h2.pos_right
{
position:relative;
left:20px;
}

The content of a relatively positioned elements can be moved and overlap other
elements, but the reserved space for the element is still preserved in the normal flow.

Absolute Positioning
 An absolute position element is positioned relative to the first parent element that
has a position other than static. If no such element is found, the containing block is
<html>:

Example

h2
{

position:absolute;
left:100px;

top:150px;
}

Absolutely positioned elements are removed from the normal flow. The document
and other elements behave like the absolutely positioned element does not
exist.Absolutely positioned elements can overlap other elements.

Overlapping Elements

When elements are positioned outside the normal flow, they can overlap other
elements.The z- index property specifies the stack order of an element (which element
should be placed in front of, or behind, the others).An element can have a positive or
negative stack order:

Exampl
e
img
{
position:absolute;
left:0px;
top:0px;
z-
index:-1
}
Table Borders

To specify table borders in CSS, use the border property.The example below
specifies a black border for table, th, and td elements:Notice that the ta
ble in the example
above has double borders. This is because both the table, th, and td elements have
separate borders.

Exampl
etable,
th, td
{
border: 1px solid black;
}
To display a single border for the table, use the border-collapse property.

Collapse Borders

The border- collapse property sets whether the table borders are collapsed into a
single border or separated:
table
{
border-collapse:collapse;
}

table,th, td
{

border: 1px solid black;

}

Table Width and Height

Width and height of a t able is defined by the width and height properties.The
example below sets the width of the table to 100%, and the height of the th elements to
50px:
table

{
width:100%;

}
th
{
height:50px;

}
CSS CURSORS

Although the cursors will not have the customized look in other browsers it usually
doesn't ruin anything. These browsers will simply show the normal arrow- cursor which
would be same case as if you refrained from cus tomizing cursors at all.So unless the
page really doesn't work without the customi zed cursor there shouldn't be technical
reasons for choosing not to.However there might be other reasons for thinking twice
before adding custom cursor to your pages. Many users are easily confused or irritated
when a site breaks the standard user interface.

Adding A Customized Cursor

The syntax for a customized cursor is this:

(Position the mouse over each link to see the
effect)

Selector {cursor:value}
For

example:
<html>
<head>

<style type="text/css">
.xlink {cursor:crosshair}
.hlink{cursor:help}
</style>

</head>

<body>
<b>

<a href="mypage.htm" class="xlink">CROSS

LINK</a> <br>

<a href="mypage.htm" class="hlink">HELP

LINK</a> </b>
</body>
</html>

Unit 3 SERVER SIDE SCRIPTING

INTRODUCTION TO THE DOCUMENT OBJECT MODEL

The Document Object Model (DOM) is the model that describes how all
elements in an HTML page, like input fields, images, paragraphs etc., are related to
the topmost structure: the document itself.

By calling the element by its proper DOM name, we can influence it. The
Document Object Model, or DOM, is the interface that allows you to programmatically
access and manipulate the contents of a web page (or document).

It provides a structured, object- oriented representation of the individual

elements and content in a page with methods for retrieving and setting the properties
of those objects.
 It also provides methods for adding and removing such objects, allowing you
to create dynamic content.

The DOM also provides an interface for dealing with events, allowing you to
capture and respond to user or browser actions. This feature is briefly covered here
but the details are saved for another article.

For this one, the discussion will be on the DOM representation of a document
and the methods it provides to access those objects.

Nodes

The DOM is a Document Object Model, a model of how the various objects
of a document are related to each other. In the Level 1 DOM, each object, whatever
it may be exactly, is a Node. So if you do
<P>This is a paragraph</P>

you have created two nodes: an element P and a text nodewith content 'This is
a paragraph'. The text node is inside the element, so it is considered a child
node of the element. Conversely, the element is considered theparent node of
the text node.

The 2 traditional ways of assigning event handlers

1) Via HTML, using attributes

2) Via scripting

Change the Text of an HTML Element - innerHTML

 The easiest way to get or modify the content of an element is by using
the innerHTML property.
The following example changes the text of a <p> element:
Example
<html>

<body>

<p id="p1">Hello World!</p>

<script type="text/javascript">
document.getElementById("p1").innerHTML="New
text!"; </script>
</body>

</html>

Change an HTML Element Using Events

An event handler allows you to execute code when an event occurs.Events

are generated by the browser when the user clicks an element, when the page
loads, when a form is submitted, etc. The following example changes the
background color of the <body> element when a button is clicked:

Example

<html>
<body>
<input type="button"
onclick="document.body.bgColor='lavender';"
value="Change background color" />
</body>
</html>

Change the Text of an Element - with a Function

The following example uses a function to cha nge the text of the <p> element
when a button is clicked:

Example
<html>

<head>

<script
type="text/javascript">
function ChangeText()
{

document.getElementById("p1").innerHTML="New text!";
}
</script>

</head>
<body>

<p id="p1">Hello world!</p>

<input type="button" onclick="ChangeText()" value="Change text" /> </body>
</html>

Using the Style Object

The Style object of each HTML element represents its individual style.

The following example uses a function to change the style of the <body> e lement
when a button is clicked:

Example
<html>
<head>

<script
type="text/javascript"
> function
ChangeBackground()
{

document.body.style.backgroundColor="lavender";
}
</script>

</head>

<body>
<input type="button"
onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>

Change the font and color of an Element

The following example uses a function to change the style of the <p> element
when a button is clicked:

Example
<html>

<head>

<script
type="text/javascript"
> function
ChangeStyle()
{

document.getElementById("p1").style.color="blue
";
document.getElementById("p1").style.fontFamily
="A rial";
}

</script>
</head>

<body>

<p id="p1">Hello world!</p>

<input type="button" onclick="ChangeStyle()" value="Change style" />
THE DOCUMENT TREE

When a browser loads a page, it creates a hierarchical representation of its

contents which closely resembles its HTML structure. This results in a tree- like
organization of nodes, each representing an element, an attribute, content or some
other object.

Nodes

Each of these different object types will have their own unique methods
and properties. But each also implements the Node interface. This is a common
set of m ethods and properties related to the document tree structure. To
understand this interface better, take a look a the diagram below which
represents a simple node tree.

The Document Root

The document object serves as the root of this node tree. It toomplements
i
the Node interface. It will have child nodes but no parent node or sibling nodes,
as it is the starting node. In addition to being a Node, it also implements the
Document interface.

This interface provides methods for accessing and creating oth er nodes
in the document tree. Some methods are:
 +
getElementById()
+
getElementsByTagName()

+
createElement()

+
createAttribute()

+
createTextNode()
HTML Tag Attributes

Many HTML tags have intrinsic events associated with them. You can define script
code to be executed when one of these events occurs using the event name as an
attribute. For example,

<span style="background-color:yellow;"
onmouseover="this.style.backgroundColor='black';this.style.color='white'"
onmouseout="this.style.backgroundColor='yellow';this.style.color=''"> Sample element
with mouse event handlers.

</span>

Scripting

You can also assign event handlers to elements in the DOM using client- side
scripting. Like other element attributes, events are represented as properties of the
element object so you can set their value just like any other attribute.The main difference
is that unlike most attributes, which take a string value, event handlers must be set using
a function reference. Here's an example,

<span id="sample1" style="background -color:yellow;">Sample element with mouse

event handlers.</span>
... JavaScript code ...

function highlight(event) {

this.style.backgroundColor='black';

this.style.color='white';
}

function normal(event) {

this.style.backgroundColor='yellow';

this.style.color='';
}

document.getElementById('sample1').onmouseover = highlight;
document.getElementById('sample1').onmouseout = normal;

\
Event Listeners

DOM objects can also be registered as event listeners. This feature can be used to assign
multiple handlers for a given event. It also allows you to capture events during either one
of two phases in the event flow, capture or bubble.

The difference between these two phases will be covered later on in the discussion
on event flow. But for now we'll just look at how to register an event listener.
 The basic methods and syntax are node.addEventListener(eventType, function,
useCapture);node.removeEventListener(eventType, function);

Event Flow

Before going into event processing, it's helpful to understand event flow in the
DOM. HTML documents (and XML or XHTML documents) are hierarchical in nature.
lements and text are nested within other elements. Becauseof this, when an event occurs
on a particular object, it effectively occurs on any containing objects as well.

To illustrate, consider the following HTML: <div>

<p>Some text in a paragraph element.</p> <p>Another paragraph element with

text.</p> <p>Yet another paragraph with text and also a

<a
href="blank.html">link</a>.</p>
</div>

If you click on the link defined in this code sample, it will trigger a onclick event on
the A tag. But you're also clicking on the paragraph that contains that link, and the DIV
that contains that P element and so on up to the document object itself.Any o f the
elements in this chain can have an event handler assigned to it to capture the onclick
event, regardless of which element it originated at.

Event Bubbling

The DOM event model provides for this using a concept calledevent bubbling. For
example, suppose an onclick event handler were assigned to the DIV tag above.
 Clicking on the link would fire the event first on the A element, it would then
"bubble" up to the containing P element and then up to the DIV where the handler function
would be called. It's possible for the handler to cancel the event, but assuming it doesn't
the event would continue bubbling on up to the document root and finally, the browser
would follow the default action of loading the link's URL in the window.

Event Capture

You can also catch events during the capture phase using the event listener detailed
previously. The capture phase compliments the bubble phase. The capture phase runs
first. The event flows down from the root of the document tree to the target element, then
it bubbles back up.

In this phase, outer elements will receive the event before it reaches its intended
target. This can be useful if you want to intercept an event for some element even if it was
initially targeted at one of its children or other descendants.

It should be noted that the term "event capture" is often used loosely to describe
the act of setting an event handler or listener, during either phase. Here it specifically
means intercepting an event during this downward phase of the event fl ow, before it
reaches its intended target.

The Event Object

Within an event handler, you can do pretty much anything you want with your script
code. Chances are, you'll want to perform some action related to that event depending
on one or more factors.

Mouse Events

Mouse-related events include:

` click mousedown mouseup mouseover mouseout
Handling Events

With dozens of different events constantly firing and moving up and down the document
tree, the real trick to using event handlers is in figuring out what event to catch, where to
attach the handler and how to process it.

ADDITIONAL PROPERTIES OF WINDOWS

Window Object
 The window object represents an open window in a browser.

If a document contain frames (<frame> or <iframe> tags), the browser

creates one window object for the HTML document, and one additional window
object for each frame.
Window Object Methods
The Event Object

Within an event handler, you can do pretty much anything you want with your script
code. Chances are, you'll want to perform some action related to that event depending
on one or more factors.

Mouse Events

Mouse-related events include:

` click mousedown mouseup mouseover mouseout
Handling Events

With dozens of different events constantly firing and moving up and down the document
tree, the real trick to using event handlers is in figuring out what event to catch, where to
attach the handler and how to process it.
THE BASIC SERVLET ARCHITECTURE

A Servlet, in its most general form, is an instance of a class which implements

the javax.servlet.Servlet interface. Most Servlets, however, extend one of the
standard implementations of that interface, namely javax.servlet.GenericServlet and
javax.servlet.http.HttpServlet. In this tutorial we'll be discussing only HTTP Servlets
which extend the javax.servlet.http.HttpServlet class.

Servlets make use of the Java standard extension classes in the packages
javax.servlet (the basic Servlet framework) and javax.servlet.http (extensions of the
Servlet framework for Servlets tha t answer HTTP r equests). Since Servlets are
written in the high ly portable Java language and follow a standard framework, they
provide a means to create sophisticated server extensions in a server and operating
system independent way.

Typical uses for HTTP Servlets include:

Processing and/or storing data submitted by an HTML form.

Providing dynamic content, e.g. returning the results of a database query to

the client.

Managing state information on top of the stateless HTTP, e.g. for an online
shopping cart system which manages shopping carts for many concurrent
customers and maps every request to the right customer.

Servlets vs CGI
 The traditional way of adding functionality to a Web Server is the Common
Gateway Interface (CGI), a language- independent interface that allows a server to
start an external proce ss which gets information about a request through
environment variables, the command line and its standard input stream and writes
response data to its standard output stream. Each request is answered in a separate
process by a separate instance of the CGIprogram, or CGI script (as it is often called
because CGI programs are usually written in interpreted languages like Perl).

Servlets have several advantages over CGI:

A Servlet does not run in a separate process. This removes the overhead of
creating a new process for each request.

A Servlet stays in memory between requests. A CGI program (and probably

also an extensive runtime system or interpreter) needs to be loade d and
started for each CGI request.

There is only a single instance which answers all requests concurrently. This
saves memory and allows a Servlet to easily manage persistent data.
A Servlet can be run by a Servlet Engine in a restrictive Sandbox (just like an
Applet runs in a Web Browser's Sandbox) which allows secure use of
untrusted and potentially harmful Servlets.

In order to initialize a Servlet, a server application loads the Servlet class (and
probably other classes which are referenced by the Servlet) and creates an instance
by calling the no-args constructor. Then it calls the Servlet's init(ServletConfig config)
method. The Servlet should performe one-time setup procedures in this method and
store the ServletConfig object so that it can be retrieved later by calling the Servlet's
getServletConfig() method. This is handled by GenericServlet. Servlets which extend
GenericServlet (or its subclass HttpServlet) should call super.init(config) at the
beginning of the init method to make use of this feature. The ServletConfig object
contains Servlet parameters and a reference to the Servlet's ServletContext.
SERVLETS GENERATING DYNAMIC CONTENT
This section shows how to process form data manage persistent data use init parameters

The next Servlet that we are going to write provides a user interface to a mailing
list through HTML forms. A user should be able to enter an email address in a text field
and press a button to subscribe to the list or another button to unsubscribe.
The Servlet consists of two major parts: Data managment and client interaction.

Client interaction

The client interaction is handled by two of the standard HttpServlet methods, doGet
and doPost.

The doGet method replies to GET requests by sending an HTML page which
contains the list of the currently subscribed addresses and the form that is used to
subscribe or unsubscribe an address:

protected void doGet(HttpServletRequest req, HttpServletResponse res)

throws ServletException, IOException

res.setContentType("text/html"); res.setHeader("pragma", "no- cache"); PrintWriter out

= res.getWriter();

out.print("<HTML><HEAD><TITLE>List
Manager</TITLE></HEAD>");
out.print("<BODY><H3>Members:</H3><UL>");

for(int i=0; i<addresses.size(); i++) out.print("<LI>" + addresses.elementAt(i));

 You can monitor and react to events in a servlet's life cycle by defining
listener objects whose methods get invoked when life cycle events occur. To use
these listener objects, you must define the listener class and specify the listener
class.

Defining The Listener Class

You define a listener class as an implementation of a listener interface. Table 10-3 lists
the events that can be monitored and the corresponding interface that must be
implemented. When a listener method is invoked, it is passed an event that contains
information appropriate to the event. For example, the methods in the
HttpSessionListener interface are passed an HttpSessionEvent, which contains an
HttpSession.
Unit 4 JSP AND XML
Representing Web Data: XML

XML: XML stands for eXtensible Markup Language, developed by W3C in 1996.
XML 1.0 was officially adopted as a W3C recommendation in 1998. XML was designed
to carry data, not to display data. XML is designed to be self-descriptive. XML is a subset
of SGML that can define your own tags. A Meta Language and tags describe the content.
XML Supports CSS, XSL, DOM.

The Difference between XML and HTML

1. HTML is about displaying information, where as XML is about carrying

information. In other words, XML was created to structure, store, and transport
information. HTML was designed to display the data.

2. Using XML, we can create own tags where as in HTML it is not possible instead
it offers several built in tags.

3. XML is platform independent neutral and language independent.

 4. XML tags and attribute names are case sensitive where as in HTML it is not.

5. XML attribute values must be single or d ouble quoted where as in HTML it is

not compulsory

6. XML elements must be properly nested

7. All XML elements must have a closing tag

8. XML is used to create new internet languages. Here are some examples:
- WSDL for describing available web services
- WAP and WML as markup languages for handheld devices

- RSS languages for news feeds

- RDF and OWL for describing resources and ontology
- SMIL for describing multimedia for the web
Well Formed XML Documents

XML with correct syntax is "Well Formed" XML. XML validated against a DTD is
"Valid" XML.

A "Well Formed" XML document must have the following correct XML syntax:
- XML documents must have a root element
- XML elements must have a closing tag
- XML tags are case sensitive
- XML elements must be properly nested
- XML attribute values must be quoted
Example for XML Document

<?xml version="1.0" encoding="ISO -8859-

1"?> <note>

<to>Tove</to>
<from>Jani</from>

<heading>Reminder</headin
g> <body> Don't forget me!
</body> </note>

Xml document begins with XML declaration statement: <? xml version="1.0"
encoding="ISO-8859-1"?> . The next line describes the root element of the document:
<note>. This element is "the parent" of all other elements. The next 4 lines describe 4
child elements of the root: to, from, heading, and body. And finally the last line defines the
end of the root element : < /note>
XML Element

An XML element is everything from (including) the element's start tag to

(including) the element's end tag. An element can contain:

- other elements
- text
- attributes
- Or a mix of all of the above...

XML vocabulary:

XML vocabulary is used to define - element and attribute names

- element content
- Semantics of elements and attributes

Some of the xml vocabularies are XHTML, RSS, XSL, DTD, and Schema

XML DTD:

Document Type Definition purpose is to define the structure of an XML document.

It defines the structure with a list of defined elements in the xml document.

<!DOCTYPE note
[

<!ELEMENT note
(to,from,heading,body)> <!ELEMENT to
(#PCDATA)> <!ELEMENT from
(#PCDATA)> <!ELEMENT heading
(#PCDATA)> <!ELEMENT body
(#PCDATA)>

]>

Where PCDATA refers parsed character data. In the above xml document the
elements to, from, heading, body carries some text, so that, these elements are declared
to carry text in DTD file.

This definition file is stored with .dtd extension.

XML Schema:
 It is an alternative to DTD to define the structure of an XML
document. <xs:element name="note">

<xs:complexType>
<xs:sequence>

<xs:element name="to" type="xs:string"/>

<xs:element name="from" type="xs:string"/>
<xs:element name="heading"
type="xs:string"/> <xs:element
name="body" type="xs:string"/>
</xs:sequence>

</xs:complexType>

</xs:element>
This definition file is stored with .xsl extension.

XML DTD vs XML Schema:

The schema has more advantages over DTD. A DTD can have two types of data
in it, namely the CDATA and the PCDATA. The CDATA is not parsed by the parser
whereas the PCDATA is parsed. In a schema you can have primitive data types and
custom data types like you have used in programming.

XML Parsers:

An XML parser converts an XML document into an XML DOM object - which can
then be manipulated with a JavaScript.\

Two types of XML parsers:

– Validating Parser
 • It requires document type declaration
• It generates error if document does not
– Conform with DTD and
– Meet XML validity constraints
– Non-validating Parser
• It checks well-formedness for xml document
• It can ignore external DTD

XML Namespaces

It is a collection of element and attribute s names associated with an XML

vocabulary. XML Namespaces provide a method to avoid element name conflicts.

XML document 1

<table>
<tr>
<td>Apples</td>
<td>Bananas</td>
</tr>
</table>

XML document2

<table>

<name> Coffee
Table</name>
<width>80</width>
 <length>120</length>
</table>

If these XML fragments were added together, there would be a name conflict. Both
contain a <table> element, but the elements have different content and meaning. Such
name conflicts in

XML can easily be avoided us ing a name prefix as shown

below: <h:table>

<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>

<f:table>

<f:name>African Coffee
Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>

</f:table>

When using prefixes in XML, a so-called namespace for the prefix must be defined.
The namespace is defined by the xmlns attribute in the start tag of an element. The
namespace declaration has the following syntax.

xmlns:prefix="URI"
For example,

<h:table
xmlns:h="http://www.w3.org/table">
<h:tr>

<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>

<f:table
xmlns:f="http://www.w3.org/furniture">
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>

</f:table>

Default namespace
Default xml namespace uri for elements of a document is
xmlns:http://www.w3.org/1999/xhtml

RSS
RSS stands for Rich Site Summary.
RSS is a format for delivering regularly changing web content. Many news- related sites
and other online publishers syndicate their content as an RSS Feed to whoever wants it.

RSS allows you to syndicate your site content.

 RSS defines an easy way to share and view headlines and content.

With RSS it is possible to distribute up-to- date web content from one web site to
thousands of other web sites around the world.

RSS allows fast browsing for news and updates. RSS was des igned to show
selected data.

Distributing your content using RSS will involve creating one file that contains your
content.

This file will reside on your server to enable other web sites to display your channel.
You
can update your channel simply by updating your file.

Without RSS, users will have to check your site daily for new updates. This may
be too timeconsuming for many users. With an RSS feed, they can check your site faster
using an RSS aggregator (a site or program that gathers and sorts out RSS feeds) since
RSS data is small and fast-loading

RSS is useful for web sites that are updated frequently, like:
1. News sites - Lists news with title, date and descriptions
2. Companies - Lists news and new products
3. Calendars - Lists upcoming events and important days
4. Site changes - Lists changed pages or new pages

RSS files can be automatically updated

RSS allows personalized views for different sites

 RSS is written in XML

With RSS it is possible to distribute up-to- date web content from one web site to
thousands of other web sites around the world.

RSS allows fast browsing for news and updates. RSS was designed to show
selected data.

Distributing your content using RSS will involve creating one file that contains your
content.

This file will reside on your server to enable other web sites to display your channel.
You can update your channel simply by updating your file.

Without RSS , users will have to check your site daily for new updates. This may
be too time consuming for many users. With an RSS feed, they can check your site faster
using an RSS aggregator (a site or program that gathers and sorts out RSS feeds) since
RSS data is small and fast-loading

RSS is useful for web sites that are updated frequently, like:

1. News sites - Lists news with title, date and descriptions

2. Companies - Lists news and new products
3. Calendars - Lists upcoming events and important days
4. Site changes - Lists changed pages or new pages

Creating an RSS File

Your first step will be to identify your file. To do this, place the following code at the
top of your text file.
 <?xml
version="1.0"?> <rss
version="0.91">

Your next step will be to create your channel header. The "channel" tag indicates
that you are beginning a new channel.

<channel>

<title>Web-Source.net
Syndication</title>
<link>http://www.web-
source.net</link>

<description>Web Development article syndication

feeds!</description> <language>en-us</language>

The "title" tag indicates the name of your channel. The "link" tag will contain a link
to your website. The "description" tag describes your channel and the "language" tag
indicates that you're writing in US English.

<item>

<title> Creating A Customized Marquee

</title>
<link>http://www.example.com/tips.htm</lin
k> <description>

Learn how to create a customized marquee for your

web </description>

</item>
Your final step will be to close your channel by adding the following tags:

</channel>
</rss>

Save your new file with .rss file extension and upload it to your server. And now, you're
ready to share your content.

JavaScript and XML: AJAX

AJAX:
- AJAX stands for Asynchronous JavaScript and XML

- AJAX allows web pages to be updated asynchronously by exchanging small

amounts of data with the server behind the scenes. This means that it is possible to
update parts of a web page, without reloading the whole page.

- Using Ajax,

o Update a web page with new data without reloading the

page o Request data from a server after the page has
loaded

o Receive data from a server after the page has

loaded o Send data to a server in the background

- AJAX allows updating parts of a web page, without reloading the whole page.

- With Ajax, web applications can also retrieve data from the server
asynchronously in the background without interfering with the display and behavior of the
existing page.
 - Ajax is combination of

o HTML
o XML
o CSS
o JavaScript

o JavaScript DOM
o XMLHttpRequest in asynchronous mode.

1. Asynchronous: This means that when you send a request, you wait for the
response to come back, but are free to do other things while you wait. The
response probably won’t come back immediately, so you set up a function that will
wait for the response to be sent back by the server, and react to it once that
happens.

2. JavaScript JavaScript is used to make a request to the server. Once the

response is returned by the server, you will generally use some more JavaScript
to modify the current page’s document object model in some way to show the user
that the submission went through successfully.

3. XML The data that you receive back from the server will often be packaged up
as a snippet of XML, so that it can be easily processed with JavaScript. This data can be
anything you want, and as long as you want.

How AJAX works?

XMLHttpRequest - Constructor for other host objects allow a JavaScript program

to send
an
HTTP request to a server and receive back a response containing an XML document.
The following program illustrates the use of XMLHttpRequest.

Example
<html
>
<head
>

<script
type="text/javascript">
function dataData()
{

var xmlhttp=new XMLHttpRequest(); // create XMLHttpRequest to

exchange data with server

var obj= getElementById("myDiv");

xmlhttp.onreadystatechange=functi
on()

{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
obj=xmlhttp.responseText;
}
}

xmlhttp.open("GET",”data.txt”,
true); xmlhttp.send();

}
</script>
 </head>
<body><form>
<div id="myDiv">Let AJAX change this text</div>

<input type="button" value=”Change Content”

onclick=”getData()”; /> </form></body>

</html>
XML DOM

Document Object Model is for defining the standard for accessing and
manipulating XML documents. XML DOM is used for
Loading the xml document
Accessing the xml
document

Deleting the elements of xml

document Changing the elements of
xml document

According to the DOM, everything in an XML document is a node. It

considers The entire document is a document node

Every XML element is an element node

The text in the XML elements are text
nodes Every attribute is an attribute node
Comments are comment nodes

DOM Levels

Level 1 Core: W3C Recommendation, October 1998

 o It has feature for primitive navigation and m anipulation of XML
trees o other Level 1 features are: All HTML features

Level 2 Core: W3C Recommendation, November 2000

o It adds Namespace support and minor new features

o other Level 2 features are:

Events, Views, Style,
Traversal and Range Level
3 Core: W3C Working Draft,
April 2002

o It supports: Schemas, XPath, XSL,

XSLT We can access and parse the XML document
in two ways:

o Parsing using DOM (tree

based) o Pars ing using SAX
(Event based)

Parsing the XML doc. using DOM methods and properties are called as tree based
approach whereas using SAX (Simple Api for Xml) methods and properties are called as
event based approach.

1. DOM based XML Parsing:(tree based)

JAXP is a tool, stands for Java Api for Xml Processing, used for accessing and
manipulating xml document in a tree based manner.

In this approach, to access XML document, the document object model

implementation is defined in the following packages:
 javax.xml.parsers
org.w3c.dom

The following DOM java Classes are necessary to process the XML
document: DocumentBuilderFactory class creates the instance of
DocumentBuilder. DocumentBuilderproduces a Document (a DOM) that
conforms to the DOM

specification
The following methods and properties are necessary to process the XML
document:

To Count the Elements in a XML File

This program takes a file name from the console and checks its availability. If the file
exists then a parser is created using Document Builder. This object parses the given
XML document. It searches the specified element name and counts its occurrence in the
xml file. If the given element doesn't exist it displays the ' 0' element.

Step 1: Create an xml file : Employee-

Detail.xml <?xml version = "1.0" ?>
<Employee-
Detail>
<Employee>

<Emp_Id> E-001 </Emp_Id>

<Emp_Name> Vinod </Emp_Name> <Emp_E -
mail> [email protected] </Emp_E-mail>
</Employee>

<Employee>

<Emp_Id> E-002 </Emp_Id>

<Emp_Name> Arun
</Emp_Name>

<Emp_E-mail> [email protected] </Emp_E -

mail> </Employee>

</Employee-Detail>

Step 2: Create a java based dom for counting the number of elements in
xml file. import org.w3c.dom.*;

import
javax.xml.parsers.*;
import java.io.*;
public class CountNodes
{
public static void main(String[] args)
{
try
{

File file = new File(args[0]); // Employee_Detail.xml is a file to be parsed is

given as //input from command prompt

DocumentBuilderFactory factory =
DocumentBuilderFactory.newInstance(); DocumentBuilder builder =
factory.newDocumentBuilder(); // parser is created Document doc =
builder.parse(file); // file is parsed

NodeList list = doc.getElementsByTagName(“Emp_Id”); // the element to be

searched is specified

System.out.println("Number of nodes: " + list.getLength()); // counting no. of

occurrences }catch (Exception e){ }

}
}
Output:
Number of nodes: 2
Event oriented XML Parsing: SAX
SAX stands for Simple API for XML

SAX provides a mechanism for reading data from an XML document, SAX parsers
operate on each piece of the XML document sequentially.

It is a kind of event oriented approach for parsing the xml document.

An XML tree is not viewed as a data structure, but as a stream of
events generated
by the
parser.
The kinds of events are:

the start of the document is

encountered the end of the document
is encountered the start tag of an
element is encountered theend tag of
an element is encountered
character data is encountered

a processing instruction is encountered

Scanning the XML file from start to end, each event invokes a
corresponding callback method that the programmer writes.

1 SAX packages

javax.xml.parsers: Describing the main classes needed for

parsing org.xml.sax: Describing few interfaces for parsing

2 SAX classes

SAXParser Defines the API that wraps an XMLReader implementation class

SAXParserFactory Defines a factory API that enable s applications to configure
and

obtain a SAX based parser to parse XML documents

ContentHandler Receive notification of the logical content of a

document. DTDHandler Receive notification of basic DTD- related
events. EntityResolver Basic interface for resolving entities.
 ErrorHandler Basic interface for SAX error handlers.
DefaltHandler Default base class for SAX event
handlers.

3 SAX parser methods

startDocument() and endDocument() – methods called at the start and end of

an XML document.

startElement() and endElement() – methods called at the start and end of a

document element.

characters() – method called with the text contents in between the start and end
tags of an XML document element.

4 Understanding SAX Parser

At the very firs t, create an instance of the SAXParserFactory class which

generates an instance of the parser. This parser wraps a SAXReader object. When the
parser's parse() method is invoked, the reader invokes one of the several callback
methods (implemented in the app lication). These callback methods are defined by the
interfaces ContentHandler, ErrorHandler, DTDHandler, and EntityResolver.

5 SAX Example :Selecting XML data

Step 1. Create a XML file

Create a simple XML file as

following <?xml
version="1.0"?> <company>

<staff>
<firstname>Ram</firstname>
<salary>100000</salary>
 </staff>

<staff>
<firstname>Kumar</firstname>
<salary>200000</salary>
</staff>
</company>

Transforming XML document

It is process of extracting one info. From one xml doc. and uses that info to create
another xml doc.
XSL

XSL is stands for eXtensible Style sheet Language which is an xml vocabulary. It
contains two

Types of information:Template data: Which is text that is copied to output xml

document with change or no change.

XSL markup: which controls transformation

process. It uses two namespaces:

o http://www.w3.org/1999/xsl/Transform is the namespace name for xsl

namespace

o http://www.w3.org/1999/xhtml is the xhtml namesapce name

1. XSL components:
Three components
 1. XSLT
2. XPATH
3. XSL-FO

XSLT – XSL Transformations (XSLT) is a language to specify transformations of

XML documents. A transformation expressed in XSLT describes rules for transforming
a source tree into a result tree

XPATH- is used to find information in an XML document. It na vigates through

elements and attributes in XML documents.

XSL-FO is a XSL Formatter an xml vocabulary for defining style properties of xml
document.

To transform xml document the following things are required:

a. Source xml document

b. Xslt style sheet that defines the information of source xml program to be
transformed

c. Xslt processor that performs transformation

The following program illustrates that.

The JAXP is a tool which is used as XSLT processor. The XSLT processor
receives xslt and xml program as its input and generates another xml program as its
output where we can see the content retrieved from source xml program.

Example for XSLT

Step 1. Create an XML file and save as
myXML.xml The code for the emp.xml file is given
below:

<?xml version = "1.0" ? >

<Employee-Detail>
<Employee>

<Emp_Id> E-001 </Emp_Id>

<Emp_Name> Nisha
</Emp_Name>

<Emp_E-mail> [email protected] </Emp_E-

mail> </Employee>

<Employee>

<Emp_Id> E-002 </Emp_Id>

<Emp_Name>
Amit</Emp_Name>

<Emp_E-mail> [email protected] </Emp_E-

mail> </Employee>

</Employee-Detail>

Step 2: Create an XSLT Stylesheet and save as myXSL.xsl

extension <?xml version="1.0" ?>

<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0"> <xsl:template match="/">
 <html><head><title> XSL for Transforamtion </title>
<body><p>

<xsl:for-each select="Employee">
<xsl:value-of select="child::Emp_Id"/>
<xsl:value-of s elect="child::Emp_Name"/>
<xsl:value-of select="child::Emp_E-
mail"/> </xsl:for-each>

</p></body></html>
</xsl:template>
</xsl:stylesheet>

Step 3: Create XML Transformer program in java and give input both .xml and .xsl
file importjavax.xml.transform.Transformer;

importjavax.xml.transform.TransformerFactory;
importjavax.xml.transform.stream.StreamSourc
e;importjavax.xml.transform.stream.StreamRes
ult;importjavax.xml.transform.Source;

importjavax.xml.transform.Result;impo
rtjavax.xml.transform.OutputKeys;publi
c classXMLwithXSLT
{

public static void main(String[] args) throwsException

{

Source source
= newStreamSource("myXML.xml"); Source xsl
= newStreamSource("myXSL.xsl");
TransformerFactory factory =
TransformerFactory.newInstance();
 Transformer transformer =
factory.newTransformer(xsl); new
StreamResult(System.out);
}
}
XPATH:
Is the syntax for specifying a collection of elements on other info contained within
xml doc.

XPATH expression will be applied to parse the xml doc. which constructs a tree
like representation of xml doc. similar to DOM tree. The root of the XPath parse tree is
‘document’.

Location Paths

<xsl:template match="/"> which represents the XPath document root. An XPath

expression such as this represents one or more nodes within XPath parse tree is known
as location path.

This location path consists a ‘location step’

Location step has two parts:

An axis name followe d by

(::) Node test

child::Emp_Id is an example of a location step and has two parts:

Axis name specifies the direction to which we can search a node
Node test specifies an element name selected for transformation

Predicate:

XPath uses some predicate which constructs the node test. Predicate can
be either child::<element name>

(Or)

Attribute::<value>
Absolute and Relative Location
Path

A location path can consists of several location steps separated by / character.

Displaying XML in the browser: (XML+CSS program)

XMLuses a processing instruction which is a special xml rag that gas syntax similar
to that of xml declaration. The tag be gins with <? and ends with ?>. Each processing
instruction begins with the name as the target of the processing instruction. The tag “xml-
stylesheet” is used to link the xml document with the css file.

Helloworld.xml
 <? xml version=”1.0” encoding=”UTF -8” ?>

<? xml-stylesheet type=”text/html” href=”helloworld.css”

?> <message> Hello World! </message>

Hellowworld.css
message {
display:block;
margin: 8pt;
font-
weight=bold;

When xml doc. Helloworld.xml is executed, the xml doc is linked to the
specified “Helloworld.css” file and displays the output after applying css specifications.

Separating Programming and Presentation: JSP

Technology What is JSP?

JSP Stands for "Java Server Pages". Using "JSP" we can use both, static HTML
with dynamically- generated HTML. Web pages created using CGI programs are mostly
static , dynamic part is limited to a few small locations. But using CGI and servlet , you
can generate entire page thr ough one program. Using JSP, you can built two parts
separately.

JSP is the product of Sun Microsystems Inc.JSP has more advance features than
Servlet . JSP separates the presentation logic from the business logic ,provide facility to
developers to work separately without any trouble.JSP have the properties of Cold fusion
and ASP and hence provide the flexibility to embed the business logic efficiently within
the HTML content (presentation logic).

Advantages of JSP:-
JSP is useful for server side programming
 JSP are translated and compiled into JAVA servlets but are easier to develop
than JAVA servlets.

JSP uses simplified scripting language based syntax for embedding HTML
into JSP. JSP containers provide easy way for accessing standard objects
and actions.

JSP reaps all the benefits provided by JAVA servlets and web container
environment, but they have an added advantage of being simpler and more natural
program for web enabling enterprise developer

JSP use HTTP as default request /response communication paradigm and thus
make JSP ideal as Web Enabling Technology

JSP and Servlets

• JSP documents are not executed directly

– When a JSP document is first visited,
1. first the server translates the JSP document to a servlet
2. Compiles the servlet

– Then the servlet is executed

– If any error occurs while executing, the exception will occur which gives
the information for the servlet not for the JSP

– A JSP-generated servlet has a _jspService() method rather than doGet() or doPost()

– This method begins to access the java code by creating a number of

implicit objects.
Implicit Objects in JSP
JSP Implicit Objects
are:

Pre-defined variables that can be included in JSP expressions and

scriptlets. Implemented from servlet classes and interfaces.

OBJECT CLASS
Out JSP writer

Request HttpServletRequest
Response HttpServletRespose
Session HttpSession
Application ServletContext
Config Sevlet Config
Page Object

Difference between servlet and JSP:

In servlets both the presentation and business logic are place it together where
as in jsp both are separated by defining by java beans.

Servlet is a java code where HTML code can be embedded whereas in jsp, it is
a kind of HTML where java code can be embedded by using special tags.

JSP allows creating and using custom tag libraries.

Example
 <%@page language=”java” content Type="text/ html" %> // jsp
element <html><body>

<% out.println(“JSP = HTML+JAVA”) %> // jsp element

Today date is:

<% = new Date().toString() %> // jsp element and java

method </body> </html>

In this code, jsp elements that use java code are merged with HTML code.

Scoped Variables

Four different types of variable scopes within the JSP page can be used:

Page Scope : Objects stored in page scope can only be retrieved during the
processing of that page for a specific request.

Request Scope : Objects stored in request scope can be retrieved during the
processing of all pages taking part in the processing of a request.

Session Scope : Object stored in session scope can be retrieved by any page s
accessed by a user during a single interactive session with the Web application.

Application Scope : Object stored in application scope is accessible from all pages
and for all users, until the Web application itself is unloaded

Display "Hello JSP" using Jsp expression

 In this section, We will simply output "Hello JSP" in a web browser using Jsp
expression. JSP expressions insert values directly into the output. The syntax to include
a JSP expressions in the

JSP file is:

<%= expression %>.

In JSP page, we can use both, static HTML with dynamically- generated HTML. In
this program, we produce output "hello Jsp" using this tag :

<%= "Hello World!" %>

All the other content except this is simple HTML code. Code of this program:

<html>

<head><title>Hello World JSP

Page.</title></head> <body>

<<%= "Hello JSP!"

%> </body>

</html>

Output : Hello JSP!

Web Applications

• A web application is a collection of resources that are used together to implement some
web-based functionality
• To develop a web applications the following resources are needed:
• Server side Programming
• Servlets /JSP,

• Client side programming : HTML documents, style sheets, XML , images, non servlet
java classes etc,

• Web form validation: JavaScript, non-servlet Java classes, etc.

• Other resources:

• Databases: MS-Access, MySQL/SQL

• Web server: Appache Tiomcat/ Java Web server/ Glass fish,
• Browser: IE/Netscape/Chrome/FireFox

Running JSP Applications

The following section explains the steps you must take to run sample JSP into
TomCat The steps involved

1. Preparation
2. Deploy
3. Run

1. Preparation
 Step 1: Create required jsp flies like
ExcelCalculatorJSP.html, and
ExcelCalculatorExample.jsp files

Step 2. Creare a folder under webapp directory in tomcat

installation path eg:C:\Tomcat5.5\webapps\test

Step 3. Copy all your JSP files in a folder by name "test".

2. Deploy

1. In the test directory, create two directories named META-INF and WEB -INF.
Now you should have a directory structure that looks like this:

2. Create the XML descriptor: Here is the sample XML descriptor you can use to
deploy this example. Save this file as web.xml in the WEB-INF directory.

<?xml version="1.0"
encoding="Cp1252"?><web-app> <display-
name>ExcelCalculatorJSP</display-
name> <servlet>

<servlet-name>ExcelCalculatorJSP</servlet-
name> <display-
name>ExcelCalculatorJSP</display-
name> <jsp-file>/ExcelCalculatorExample.jsp
</jsp-file> </servlet>

<session-config><session-
timeout>30</session-
timeout></session-config>

</web-app>
 3. Create a manifest file : Create a file called Manifest.mf (it can be an empty file)
and
Save it in the META-INF directory.
4. After you finished putting these files on the correct place, your directory structure looks
like this:

5. Now you need to add this new JSP to server.xml. Go to the conf directory and
open server.xml.

6. Add the following lines at the bottom of server.xml

<Context path="/test" docBase="webapps/test"

crossContext="true" debug="0" reloadable="true"
trusted="false" >

</Context>

3. Run
1. Shut down the server by issuing this command: shutdown

2. Re-start server by issuing this command: startup

3. In browser, enter:http://localhost:8080/test/ExcelCalculatorJSP.html
Basic JSP
JSP page has the following components(contents)

Directives
Declarations
Expressions
Standard Actions
Scriplets

1.Directives

The directives are used to specify the attributes of the JSP page. Also it can be
used to import java packages in to the jsp page. For example,

<%@ page language=”java” contentType=”text/html”

%> <% @page import =”java.util.*” %>

Where language=”java” tells tha the page is contains java code, the code
contentType=”text/html” specifies the MIME type, the code import =”java.util.*” used to
import all the classes of java’s utility package into this page.

2.Declarations:

Provide a mechanism to define variables and methods. Declarative statements are

placed within <%! and %> symbols and always end with a semicolon.

Syntax: <%! Declare all the variables here

%> For example, <% int a, b %>

3.Scriplets: Consists of valid Java code snippets that are enclosed within <% and %>
symbols. The syntax to declare JSP scriptlets to include valid Java code is:
 <% Java code %>

Scriplets can't generate HTML itself. Using "out" variable, it can generate HTML.
This variable does not need to be declared. It is already predefined for Scriplets, along
with some other variables. The "out" variable is of type "javax.servlet.jsp.JspWriter".

For example,
<HTML>
<BODY
> <%

java.util.Date date = new java.util.Date();

%>

Hello! The time is

now <%

out.println( String.valueOf( date ));

%>
</BODY>
</HTML>

Output: Hello! The time is now 12/12/2010 12:10:02

4.Expression:
Insert values directly into the output. The syntax to include a JSP expression in the
JSP

file is:
<%= expression %>.
For example, <%= "Hello World!" %>
5.Actions: The elements which are used to access the java bean in a jsp page is called
jsp action elements.JSP defines the following action elements:

Standard action and Custom action

JSTL

Java Bean classes and JSP

Java Beans are reusable components. They are used to separate Business logic
from the Presentation logic. Internally, a bean is just an instance of a class. JSP’s provide
three basic tags for working with Beans.

<jsp:useBean i d=“bean name ” class=“bean class” scope = “page |

request | session |application ”/>
bean name = the name that refers to the bean.
Bean class = name of the java class that defines the bean.

<jsp:setProperty name = “id” property = “someProperty” value =

“someValue” /> id = the name of the bean as specified in the useBean
tag.

property = name of the property to be passed to the

bean. value = value of that particular property .

An variant for this tag is the property attribute can be replaced by an “*”. What this
does is that it accepts all the form parameters and thus reduces the need for writing
multiple setProperty tags. The only consideration is that the form parameter names
should be the same as that of the bean property names.

<jsp:getProperty name = “id” property = “someProperty” />

 Here the property is the name of the property whose value is to be obtained from
the

bean.

JSTL

JSTL: JSP Standard Tag Libraries is a c ollection of JSP custom tags The goal of
JSTL, is to help simplify Java Server Pages page authoring tasks. To achieve this goal,
JSTL has provided custom tags for many common JSP page authoring tasks that require
scripting statements to manipulate server side dynamic data.

JSTL offers tags through 4 functional

areas: core - Basic scripting

xml - XML processing

fmt - Internationalization of
formatting sql - Data base
accessing
functions – for using functions
Core tag:
<c:set>

<c:remove>
<c:forEach>
<c:if>
<c:choose>
<c:when>

<c:set>
The <c:set> action provides a tag- based mechanism for creating and setting scoped
variables. <c:set var="variable_name" scope="page | request | session
| application"
value="expression"/>

<c:remove>
The <c:remove> action is used to delete a scoped variable. For example,
<c:remove var="variable_name" scope="page | request | session | application" />

<c:forEach>

The <c:forEach> custom tag is used to fetch and display collections of data,
typically in the form of a list or sequence of rows in a table. This tag supports two different
styles of

iteration:
<c:forEach var="variable_name" varStatus="name" begin="expression"
end="expression" step="expression">
--------------
</c:forEach>

The index of the iteration starts at the value of the beginattribute, is incremented
by the value of the step attribute, and halts iteration when it exceeds the value of
the end attribute. If thestep attribute is omitted, the step size defaults to 1.

For example,

<c:forEach var=”i” begin=”10” end=”20”

step=”2”> <c:out value=”${i}” />
 </c:forEach>

Output: 10 12 14 16 18 20

<c:if>:

<c:if> evaluates a single test expression and then processes its body content
only if that expression evaluates to true. If not, the tag's body content is ignored.

Syntax for the <c:if> conditional action:

<c:if test="expression" var="name" scope="scope">
</c:if>

For example,

<c:set var=”fruit” />

<c:if test=”${fruit==’Apple’}” />

I like <c:out value=”${fruit}”/>very much!

</c:if>

<c:set var=”fruit” />

<c:if test=”${fruit==’Mango’}” />

I like <c:out value=”${fruit}”/> very much!

</c:if>

<c:choose>:

<c:choose> is provided for cases in which mutually exclusive tests are required
to determine what content should be displayed.
Syntax for the <c:choose>
action: <c:choose>

<c:when test="expression">
------------
</c:when>
-------------
<c:otherwise>
-------------
</c:otherwise>

</c:choose
> For example,

<c:set var=”fruit”
/> <c:choose>

<c:when test=”${fruit==’Apple’}”> I
like <c:out value=”${fruit}”/> much
</c:when>

<c:when test=”${fruit==’Mango’}” >

I like <c:out value=”${fruit}”/> very

much </c:when>

<c:otherwise>

I do not like <c:out value=”${fruit}”/>

</c:otherwise>
 </c:choose>

<c:out>

The <c:out> tag evaluates the expression specified by its value attribute, then
prints the result. If the optional default attribute is specified, this action will instead print
its value if the value attribute's expression evaluates either to null or an empty String.

<c:out value="expression" default="expression" />

Expression Language (EL)

This is one of the most important features of the JSTL and is a prominent feature of the
JSP 2.0 specification.

The Expression Language or EL as it is known is used by JSP developers to

access and use application data without using java code. In other words, EL is the
replacement for java codewithin the jsp page.

The JSP 2.0 expression language helps to simplify t he presentation layer by

replacing hard-tomaintain Java scripting elements in jsp page.

The EL statements are always used within ${….}

Basic syntax
The syntax of expression language is very simple. EL expressions are invoked
with this
syntax:
 ${expr}, where expr represents an any valid
expression. For example,

${20 * 2}
For example,

Step 1: create a html file to get a user

name <html> <body>

<form method=”post” action=”ElDemo.jsp”>

Enter user name: <input type=”text” name=”t1”
/> < input type=”submit” value=”submit” />
</form>

</body></html>

Step 2: Create a jsp file to obtain user name from the above html file
using EL <%@ page contentType=”text/html” %>

<%@ taglib prefix=”c” uri=http://java.sun.som/jsp/jstl/core

%> <html><body>

Entered user name is <c:out

value=”${param.t1}” /> </body></html>

EL Reserved Words:
Following words are EL keywords and hence must not be used as identifiers:

and eq gt true instanceof mod

or ne le false empty not
lt ge null div

EL Operators:
EL includes several operators to manipulate and compare data accessed by EL
expressions:

Unit 5 AJAX AND WEB SERVICES

Web Application vs Web Services

A web application uses Web technologies to provide functionality to an end user. A web
service uses Web technologies to provide functionality to another software application.

Web Services

Web services are open standard based Web applications that interact with other
web applications for the purpose of exchanging data.

XML is used to encode all communications to a web service. For example, a client
invokes a web service by sending an XML m essage, and then waits for a corresponding
XML response. Because all communication is in XML, web services are platform neutral
and language neutral. Java can talk with Perl;

Windows applications can talk with UNIX applications. Web services conceptuallyare just
specialized web applications:
 Body of web services request and response will be SOAP message which defines
a protocol for message exchange between applications.

Popular examples for Web Services

1. Currency Converter
2. Temperature conversion
3. Weather Forecast system
4. Credit card validation system

Standard web services technologies:

SOAP
WDSL
XML Schema

Higher-level API’s such as JAX -RPC and others are often used to automatically
generate web services client and server communication software. Microsoft .NET
framework is one popular alternative to JAX-RPC

JAX-RPC

It stands for Java API for XML-based RPC. JAX- RPC is a technology for building
web services and clients that use remote procedure calls (RPC) and XML. Often used in
a distributed client-server model, an RP C mechanism enables clients to execute
procedures on other systems.

With JAX- RPC, clients and web services have a big advantage: the platform
independence of the Java programming language. In addition, JAX-RPC is not restrictive:
a JAX-RPC client can access a web service that is not running on the Java platform, and
vice versa. This flexibility is possible because JAX-RPC uses technologies defined by the
World Wide Web Consortium (W3C) such as:

SOAP defines message format

WSDL describes the various services offered by web service application as

xml
file
XML Schema – defines data types used in WSDL doc.

Writing Web Service using JAX-RPC (Currency Converter):

These are the basic steps for creating the web service and client:

1. Create an interface
2. Code the implementation class.

3. Use wscompile to generate wsdl doc.

4. Create deployment descriptor file
5. Package the files into a WAR file.
6. Deploy the WAR file.
7. Create a client file to access the web service
 8. Use wscompile to generate and compile the web service artifacts needed
to connect to the service.

9. Compile the client class.

10. Run the client.

Example for Creating Web service software:

To write web service using JAX- RPC, we need JWSDP(Java Web Server
Development Package). This package has wscompile and wsdeploy tools.

wscompile is used to convert java file into wsdl file whereas wsdeploy is used to
package our web service.

To Create a web server file:

Create a directory in the name of CurrencyConverter and create a sub

director myCurCon under WEB-INF/Src folder

Step 1: Create a service end point interface

Rules for creating service end point interface are as follows:

1. The interface must extend java.rmi.Remote interface
2. Every method in this interface must throw java.rmi.Remote exception

3. Every method return type and its parameter data type in this interface
must be java primitive data types
 4. The interface must not contain any public static final declarations.

package myCurCon;
public class ExchangeValues
{

public docuble
dollars; public
double euros; publci
doubel yens;
}

package myCurCon;
public interface CurCon extends java.rmi.Remote
{

public ExchangeValues fromDollars(double dollars) throws

java.rmi.RemoteException;

public ExchangeValues fromEuros(double dollars) throws

java.rmi.RemoteException;

public ExchangeValues fromYens(double dollars) throws

java.rmi.RemoteException;

Step 2: Create a class to implement this interface

public class CurConImpl implements
CurCon
{
 public ExchangeValues
fromDollars(Double Dollars) thorws
java.rmi.RemoteException
{

ExchangeValues ev=new
ExchangeValues(); ev.dollars=dollars;

ev.euros=dollars*100;

ev.yens=dollars*20
0; return ev;
}
}

Step 3: Compile using javac to create respective classes for

ExchangeValues.java, CurCon.java and CurConImpl.java

Step 4: Use wscompile to create WSDL doc. Inputs to wscompile are

supplied via the following configuration file called config.xml file.

<? xml version="1.0" ?>

<configuration xmlns="url"
>

<service name="HistoricCurrencyConverter"
targetNameSpace="url" typeNameSpace="url"
packageName="myCurCon">

<interface
name="muCurCon.CurCon" />
</service>
 </configuration>

- Save this file as config.xml and use the following command to create wsdl doc.

wscompile –define – d WEB-INF –classpath WEB-INF/classes – model WEB -

INF/model.xml.gz config.xml

-d specifies the directory to receive the generated wsdl doc. which will be
named as Historic Currencyconverter.wsdl

Step 5: Create another configuration file called jaxrpc- ri.xml which is

used as deployment descriptor file as shown below

<? xml version="1.0" ?>

<webServices xmlns="url"
targetNameSpace="url" typeNameSpace="url"
urlPatternBase="/converter" >

<endpoint name="CurrConverter"
displayName="Currency Converter"
description="Converts b/w dollars, yens and
euros" interface="myCurCon.curCon"
model="/WEB-INF/model.xm.gz"
implementation="myCurCon.CurConImpl"/>
<enpointMapping
endPointName="CurrConverter"

urlPattern="/Currency"
/> </webServices>
 The tag <endpoint> gives the information to web server including name
of the service end point interface, implementation file model generated by
wscompile etc.

Step 6: Package and deploying the web service crea ted Create WAR(Web
Archive) file. Add the deployment descriptor and service files to the WAR file. The
following command is used:

jar cf converter-temp.war WEN-INF

Deploy the war file using the following command wsdeploy –o converter.war converter -
temp.war

Step 7: Start tomcat server

Step 8: Browse to http://localhost:8080/Converter/Currency to see the status of the

currency converter web service. The output will be:

To write a client program

To access the currency converter web service it is necessary to have a

java client program

Step 1: Create xml file named

config.xml <? xml
version="1.0" ?>

<configuration xmlns="url" wsdl location

=http://localhost:8080/Converter/Currency?wsdl
packageName="myCurConClient" />

</configuration
 Step 2: Use wscompile to load wsdl from the url specified in the location attribute
of config.xml. Use the following command for that wscomplie –gen –keep –d classes –s
src config.xml

This instructs to generate a class file from the wsdl and keep the jav a source file
in src
folder.

Step 3: Create java client program for accessing the web services as
shown below package mycurConClient;

public class CurConBean

{
private double value=1.0;

private String
Currency="dollars"; public void
setValue(double value)

{
this.value=value;
return;
}

public void setCurrency(String currency)

{
this.currency=currency;
return;
}
public ExchangeValues getExValues()
 {
ExchangeValues ev=null;

CurCon=(new
HistoricCurrencyConverter_impl().getCurConPort()); try

{
if(currecny.equals("euros")
{
ev=curcon.fromEuros(value);
}
else if(currency.equals("yens")
{
ev=curcon.fromYens(value);
}

}catch(Exception
e){} return ev;

}
}

Step 4: Compile using javac

Step 5: Create a jsp for using this bean class to perform a currency conversion
class and display the result in a HTML file

<html>
 <jsp:useBean id="client"
class="myCurConClient.CurConBean" /> <body>

<%

String
value=request.getPArameter(val);
%>

<jsp:setProperty name="client" property="Currency"

value="curr" /> <jsp:setProperty name="client"
property="Currency" value="cur" /> Converted amount:

</jsp:getProperty name="Client"
property=ExValue" /> </body>

</html>

Step 6: In the browser location bar type

http://localhost:8080/ConverterClient/Conver.jspx?cur=”euros” val=”500.30”

This invokes the web service from the server

and converts the euros value 500.30 to
equivalent dollars and yens value and displays
the result.

WSDL

Web Services Description Language is the standard format for describing a web
service in XML format.

WSDL definition describes how to access a web service and what operations it will
perform.
 WSDL is often used in combination with SOAP and XML Schema to provide web
services over the Internet. A client program connecting to a web service can read the
WSDL to determine what functions are available on the server. Then the client can then
use SOAP to actually call one of the functions listed in the WSDL.

The WSDL Document Structure

The main structure of a WSDL document looks like

this: <definitions>

<types>
definition of types........
</types>
<message>
definition of a message....
</message>
<portType>
<operation>
definition of a operation.......
</operation>
</portType>
<binding>
definition of a binding....
</binding>
<service>
definition of a service....
</service>
 </definitions>

A WSDL document can also contain other elements, like exten sion elements and
a service element that makes it possible to group together the definitions of several web
services in one single WSDL document.

A WSDL document describes a web service using these major elements:

Element Defines
<types> The data types used by the web service
<message> The messages used by the web service
<portType> The operations performed by the web service
<binding> The communication protocols used by the
web service

A WSDL document can also contain other elements, like extension elements, and
a service element that makes it possible to group together the definitions of several web
services in one single WSDL document.

Note: The second set of lines of the WSDL document is optional

First lines of the WSDL document

<?xml version=”1.0” encoding=”UTF-8” ?>

<definitions name=" "
targetNamespace="uri" xmlns:tns=”uri”

xmlns=”uri”
 xmlns:ns2=”uri”

xmlns:xsd=”uri”
xmlns:soap=”uri”
>

Second set of lines of the WSDL

document <types>

<schema>

<import namespace="uri"
location="uri"/> <complexType name=”
“>

<sequence>

<element name=” “ type=” “ />

::
</sequence>
</complexType>
</schema>
</types>

The types element defines data type definitions that are relevant for the exchanged
messages. The content of types is normally XML schema markup. The data type can be
either complex type or simple type.

The sequence element is a collection of <element> t ags. Each element tag

specifies name of the operation (service or method) provided by the web service and its
data type of the return value.

Third set of lines of the wsdl document <message name=" " >
 <part name=" " type=" " /> </message>

::

<message name=" " > <part name=" " type=" " /> </message>

The message name attribute provides a unique name among all messages defined within
the enclosing WSDL document.

Messages consist of one or more logical parts. Parts are a flexible mechanism for
describing the logical abstract content of a message.

Each part is associated with a type attribute. Type attribute value can be either
complex type or simple type

Fourth set of lines of the wsdl

document <portType name="
">

<operation name=" " parameterOrder=“

“> <input message=” “ />

<output message=” “
/> </operation>

-----------
-----------
-----------
</portType>
 A portType is a named set of abstract operations and the abstract messages
involved. The portType name attribute provides a unique name among all port
types defined within

in the enclosing WSDL document.

An operation is named via the name attribute.

The message attribute of the input and output elements provides a unique name
among all input and output elements within the enclosing portType.

parameterOrder attribute reflects the order of the parameters in the RPC

signature.

Fifth set of lines of wsdl document

<binding name=" " type="
"> <operation name=" ">
<input>

<soap:body encodingStyle=”uri “ use=”encoded”

namespace=”uri” /> </input>

<output>

<soap:body encodingStyle=”uri “ use=”encoded”

namespace=”uri” /> </output>

<soap:operation soapAction=” “
/> </operation>

<soap:binding transport=uri” style=”rpc”

/> </binding>
 A binding defines message format and protocol details for operations and
messages defined by a particular portType. The name attribute provides a uniqu e name
among all bindings defined within in the enclosing WSDL document. A binding references
the portType that it binds using the type attribute

An operation element within a binding specifies binding information for the

operation with the same name within the binding's portType.

The content of operation element in a binding is a pair of input and output elements. The
soap:body element specifies how the message parts appear inside the SOAP Body
element.

The required use attribute indicates whether the message parts are encoded using
some encoding rules, or whether the parts define the concrete schema of the message.
If use is encoded, then each message part references an abstract type using the type
attribute. These abstract types are used to produce a concrete message by applying an
encoding specified by the encodingStyle attribute.

The soap:operation element provides information for the operation

The style attribute indicates whether the operation is RPC-oriented or not.

The soapAction attribute specifies the value of the SOAPAction header for
this operation.

Final lines of wsdl

document <service
name=" ">

<port name=" " binding="internet address

"> <soap:address location=” ” />

</port>
</service>
 </definitions>

A service groups a set of related ports together. This provides a name for overall
web service. Each port associates a binding with an internet address. This address is
specified by including a soap: address element in the content of the port as shown.

WSDL Document Example

Following is the WSDL file that is provided to demonstrate a simple WSDL

program. Assuming the service provides a single publicly available function,
called sayHello. This function expects a single string parameter and returns a single string
greeting. For example if you pass the parameter world then service
functionsayHello returns the greeting, "Hello, world!".

Content of HelloService.wsdl file

First set of lines of WSDl doc

<definitions name="HelloService"
targetNamespace="uri" xmlns="uri"

xmlns:soap="uri"
xmlns:tns="uri"

xmlns:xsd="uri">

Second set of lines of WSDL doc

<types>

<schema>
 <import namespace="uri"
location="uri"/> <complexType name=”
“>

<sequence>

<element name=” “ type=” “ />

::
</sequence>
</complexType>

</schema>
</types>

Third set of lines of WSDl doc

<message name="SayHelloRequest">

<part name="firstName"
type="xsd:string"/> </message>

<message name="SayHelloResponse">
<part name="greeting"
type="xsd:string"/> </mess age>

Fourth set of lines of WSDl doc

<portType
name="Hello_PortType">
<operation name="sayHello">
 <input message="tns:SayHelloRequest"/>
<output
message="tns:SayHelloResponse"/>
</operation>

</portType>

Fifth set of lines of WSDl doc

<binding name="Hello_Binding"
type="tns:Hello_PortType"> <soap:binding style="rpc"
transport="uri"/>

<operation name="sayHello">
<soap:operation
soapAction="sayHello"/> <input>

<soap:body encodingStyle="uri"
namespace="uri" use="encoded"/>

</input>
<output>

<soap:body encodingStyle="uri"
namespace="uri" use="encoded"/>

</output>
</operation>
</binding>

The last set of lines of WSDl doc

<service name="Hello_Service">
 <port binding="tns:Hello_Binding"
name="Hello_Port"> <soap:address location="uri">

</port>
</service>
</definitions>

Analysis of the Example Definition : HelloService

Type : Using built-in data types and they are defined in XMLSchema.

Message : 1. sayHelloRequest : firstName

parameter 2. sayHelloresponse:
greeting return value

Port Type: sayHello operation that consists of a request and response

service. Binding: Direction to use the SOAP HTTP transport protocol.

Service: Service available at the URI

Port: Associates the binding with the URI where the running service can be
accessed. A detailed description of these elements is given in subsequent
sections.

SOAP

SOAP is a simple XML-based protocol that allo ws applications to exchange

information over HTTP.
WSDL Definition Element
 The <definition> element must be the root element of all WSDL documents.
It defines the name of the web service. Here is the example piece of code from last
session which uses definitionelement.

<definitions name="HelloService"
targetNamespace="uri" xmlns="uri"

xmlns:soap="uri"
xmlns:tns="uri"
xmlns:xsd="uri">
........................
<definitions>

The definitions element is a container of all the other elements.

The definitions element specifiesthat this document is the HelloService.

The definitions element specifies a targetNamespaceattribute.

The targetNamespace is a convention of XML Schema thatenables the WSDL document
to refer to itself. It also specifies numerous namespaces that will be used throughout the
remainder of the document.
WSDL Types Element

A Web service needs to define its inputs and outputs and how they are mapped
into and out of services. WSDL <types> element takes care of defining the data types
that are used by the web service. In other words, the types element describes all the data
types used between the client and server. The types element in WSDL doc is optional.

WSDL Message Element

The <message> element describes the data being exchanged between the Web
service providers and consumers.
 Each Web Service has two messages: input and output.

The input describes the parameters for the Web Service and the output describes
the return data from the Web Service.

Each message contains zero or more <part> parameters, one for each parameter of t he
Web Service's function.

Each <part> parameter associates with a concrete type defined in the <types>
container element. Lets take a piece of code from the Example:

<message name="SayHelloRequest">

<part name="firstName"
type="xsd:string"/> </message>

<message
name="SayHelloResponse"> <part
name="greeting" type="xsd:string"/>
</message>

Here, two message elements are defined. The first represents a request
message SayHelloRequest, and the second represents a response
message SayHelloResponse . Each of these messages contains a single part element.
For the request, the part specifies the function parameters; in this case, we specify a
single firstName parameter. For the response, the part specifies the function return
values; in this case, we specify a single greeting return value.
WSDL portType Element

<portType> can combine one request and one response message into a single
request/response operation. This is most commonly used in SOAP services. A portType
can define multiple operations.
Lets take a piece of code from the Example:
<portType
name="Hello_PortType">
<operation name="sayHello">

<input
message="tns:SayHelloRequest"/>
<output
message="tns:SayHelloResponse"/>
</operation>

</portType>

The portType element defines a single operation, calledsayHello.

The operation itself consists of a single input messageSayHelloRequest

The operation itself consists of a single output messageSayHelloResponse

tns prefix indicates a namespace called targetNameSpace

WSDL Binding Element

The <binding> element provides specific details on how

a portType operation will actually be transmitted over the wire.

The bindings provide concrete information on what prot ocol is being used
to transfer portType operations.

The bindings provide information where the service is located.

 For SOAP protocol, the binding is <soap:binding>, and the transport is
SOAP messages on top of HTTP protocol.

soap:binding

This element indicates that the binding will be made available via SOAP.
The style attribute indicates the overall style of the SOAP message format. A style value
of rpc specifies an RPC format. Thetransport attribute indicates the transport of the SOAP
messages.

soap:operation

This element indicates the binding of a specific operation to a specific SOAP

implementation. The soapAction attribute specifies that the SOAPAction. HTTP header
be used for identifying the service.

soap:body

This element enables you to specify the details of the input and output messages.
In the case of HelloWorld, the body element specifies the SOAP encoding style and the
namespace URN associated with the specified service.

Here is the piece of code from Example:

<binding name="Hello_Binding"
type="tns:Hello_PortType"> <soap:binding style="rpc"

transport="uri"/>
 <operation name="sayHello">
<soap:operation
soapAction="sayHello"/> <input>

<soap:body encodingStyle="uri"
namespace="uri" use="encoded"/>

</input>
<output>

<soap:body encodingStyle="uri"
namespace="uri" use="encoded"/>

</output>
</operation>
</binding>
WSDL Service Element

The <service> element defines the ports supported by the Web service. For eachof
the supported protocols, there is one port element. The service element is a collection of
ports.

Web service clients can learn from the service element where to access the service,
through which port to access the Web service, and how the communication messages
are defined.

A <port> element defines an individual endpoint by specifying a single

address for a binding. Here is the pice of code from Example:

<service name="Hello_Service">
<documentation>WSDL File for HelloService</documentation> <port
binding="tns:Hello_Binding" name="Hello_Port"> <soap:address

location="http://www.examples.com/SayHello/">
</port>
</service>
XML Schema:

The purpose of an XML Schema is to define the legal building blocks of an XML
document. It is used to represent data types of an XML document. I t is an alternative to
DTD (Document Type Definition). XML Schema defines elements, attributes and vales of
elements and attributes.

An XML Schema:

defines elements that can appear in a

document defines attributes that can
appear in a document defines which
elements are child elements

defines the order of child

elements defines the number of
child elements

defines whether an element is empty or can include

text defines data types for elements and attributes

defines default and fixed values for elements and attributes

XML Schemas Data Types

 One of the greatest strength of XML Schemas is the support for data types. Using
XML schema it is easier to describe allowable document content; it is easier to validate
the correctness of data; it is easier to convert data between different data types.

Built in data types supported by XML schema

XML Schema has a lot of built- in data types. The most common
types are: xs:string

xs:decimal
xs:integer
xs:boolean
xs:date
xs:time

XML schema defines in the namespace http://www.w3.org/2001/XMLschema that

contains built in data types. There are two classes of XML schema data types:

Complex type is a data type is represented using markup.

Simple type is a data type whose values are represented in XML doc by character data.
XML markup such as <types> is known as XML schema that conforms to W3C defined
XML schema vocabulary which defines all or part of the vocabulary for another XML
document. The <schema> is the root element for any XML schema document. The child
elements of schema define the data types.

Example for writing a simple XML Schema

Step 1: Write a xsd file in which the desired structure of the XML document is
defined and named it as StudentSchema.xsd.
 <?xml version=”1.0”?>

<xs:schema xmlns:xs=”
http://www.w3.org/2001/XMLSchma”> < xs:element
name=”student” >

<xs:complexType>
<xs:sequence>

<xs:element name=”name”
value=”xs:string” />

<xs:element name=”regno”
value=”xs:string” /> <xs:element
name=”dept” value=”xs:string” />
</xs:sequence>

</xs:complexType>
</xs:element>
</xs:schema>

The xs qualifier used to identify the schema elements and its types. The xs:schema
is the root element. It takes the attributes xmlns:xs which has the value,
“http://www.w3.org/2001/XMLSchema. This declaration indicates that the document
follows the rule o f XMLSchema defined by W3 in year 2001. The xs:element is used to
define the xml element. The Student element is complexType which has three child
elements:name, regno and dept. All these elements are of simple type string.

Step 2: Write a XML document a nd reference the xsd file. Named it as

myXML.xml <?xml version=”1.0”?>

<student xmlns:xsi=”http://www.w3.org/2001/XMLSchema -instance”

 xsi:schemaLocation=”StudentSchema.xsd”>

<name> Raj </name>

<regno>3212654556</reg
no> <dept>CSE</dept>
</student>

The following fragment:

xmlns:xsi=”http://www.w3.org/2001/XMLSchemainstance” tells the XML Schema
Instance namespace available.

The following code, xsi:schemaLocation=”StudentSchema.xsd” is used to

reference the XML schema document (xsd) file which conta ins the definition of this xml
document. Various xml validation tools are available which can be used to validate xml
and its schema document.

Advantages:

Supports data
types Supports
namespaces

XML schemas support a set of data types, similar to the ones used in most
common programming languages

Provides the ability to define custom data types

Easy to describe allowable content in the

document Easy to validate the correctness of
data
 Object oriented approach like inheritance and encapsulation can be used in
creating the document

Easier to convert data between different data

types Easy to define data formats

Easy to define restrictions on data

It is written in xml so any xml edito r can be used to edit xml schema Xml
Parser can be used to parse the schema file

XML schemas are more powerful than DTDs. Everything that can be
defined by the DTD can also be defined by schemas, but not vice versa.

Disadvantages:

Complex to design and learn

Maintaining XML schema for large XML document slows down the
processing of XML document DTD for the above xml file instead of XML
schema

The purpose of a DTD (Document Type Definition) is to define the legal

building blocks of an XML document.

A DTD defines the document structure with a list of legal elements and
attributes.

Step 1: Create a DTD. Name it as student.dtd

 <!ELEMENT student(name, regno,
dept)> <!ELEMENT
name(#PCDATA)> <!ELEMENT
regno(#PCDATA)> <!ELEMENT
dept(#PCDATA)>

!ELEMENT student defines that the note element contains three elements:
"name.
regno, dept"

PCDATA means parsed character data which is the text found between
the start tag and the end tag of an XML element.

Step 2: Write the XML document and reference the DTD file in it. Name it as myXML.xml

<?xml version=”1.0”?>

<!DOCTYPE student SYSTEM

student.dtd> <student>
<name> Raj </name>

<regno>3212654556</regno>
<dept>CSE</dept>
</student>

!DOCTYPE student de fines that the root element of this document is student and
links the myXML.xml file with the student.dtd file.
SOAP:

SOAP is an acronym for Simple Object Access Protocol. SOAP defines a protocol
for message exchange between applications. SOAP provides a way to communicate
between applications running on different operating systems, with different technologies
and programming languages.

SOAP describes envelope and message formats, and has a basic

request/response SOAP is a communication protocol

SOAP is for communication between

applications SOAP is a format for sending
messages

SOAP communicates via

Internet SOAP is platform
independent

SOAP is language
independent SOAP is based
on XML

SOAP is simple and extensible

SOAP is a W3C
recommendation SOAP
Building Blocks

A SOAP message is an ordinary XML document containing the following elements:

An Envelope element that identifies the XML document as a SOAP

message A Header element that contains header information

A Body element that contains call and response

information A Fault element containing errors and
status information

Structure of SOAP Message

 The following code fragment gives an outline of the SOAP
message // code for HTTP binding

HTTP binding
// used to directs the message

Envelop
// helps the server to identify the message as SOAP

Header
// Optional. It adds features to SOAP message such as authentication, message
route etc.

Body
// contain actual message

<soap:Envelope xmlns:soap="uri" soap:encodingStyle="uri">

<soap:Header>

... ... ...

</soap:Header>
<soap:Body>
... ... ...
<soap:Fault>
... ... ...
</soap:Fault>
</soap:Body>
</soap:Envelope>
 The SOAP Envelope element is the root element of a SOAP message. This
element defines the XML document as a SOAP message. The xmlns:soap namespace
defines the Envelope as a SOAP Envelope. The encodingStyle attribute is used to define
the data types used in the document.

The SOAP Header element contains header information. If the Header element is
present, it must be the first child element of the Envelope element.

The SOAP Body element contains the actual SOAP message intended for the
ultimate endpoint of the message.

The SOAP Fault element holds errors and status information for a SOAP
message.

A SOAP Example
In the example below, a GetStockPrice request is sen t to a server. The request
has

a StockName and Price parameters that will be returned in the response. The namespace
for the function is defined in "http://www.example.org/stock".

A SOAP request:

POST /InStock
HTTP/1.1 Host:
www.example.org

Content-Type: application/soap+xml;
charset=utf-8 Content-Length: n bytes

<?xml version="1.0"?>
 <soap:Envelope xmlns:soap="uri"
soap:encodingStyle="uri"> <soap:Body
xmlns:m="http://www.example.org/stock">
<m:GetStockPrice>

<m:StockName>IBM</m:StockName>
</m:GetStockPrice>
</soap:Body>
</soap:Envelope>

The SOAP response:

HTTP/1.1 200 OK

Content-Type: application/soap+xml;
charset=utf-8 Content-Length: n bytes

<?xml version="1.0"?>

<soap:Envelope xmlns:soap="uri"
soap:encodingStyle="uri"> <soap:Body
xmlns:m="http://www.example.org/stock">
<m:GetStockPriceResponse>

<m:Price>34.5</m:Price>
</m:GetStockPriceResponse>
</soap:Body>
</soap:Envelope>

SOAP and HTTP

 A SOAP method is an HTTP request/response that complies with the SOAP
encoding rules. SOAP message is HTTP + XML = SOAP.

A SOAP request could be an HTTP POST or an HTTP GET request.

Java support for SOAP

Java provides support for creating and manipulating SOAP documents through
SAAJ which is an acronym of Soap with Attachments Api for Java. This API is part of
JWSDP. Related technologies

The alternative for creating web services using JSWDP is sun J2EE p latform,
Apache
Axis.

Also, IBM, WebSphere, BEA and WebLogic development platforms are alternative
tools for developing java based web services.

Personal Home Page (PHP) development platform can also be used for creating
web services. It contains PEAR (Personal home page Extension and Application
Repository) for parsing a WSDL document.

UDDI (Universal Discovery Description and Integration) is used to register and

locate web services. Alternative to UDDI is JAXR (Java Api for Xml Registry)

WS-I Basi c Profile (Web Service Interoperability Basic Profile) is a tool which helps the
developers how to use various web service technologies.