WT Lab Manual

Introduction HTML
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the
meaning and structure of web content. Other technologies besides HTML are generally used to
describe a web page's appearance/presentation (CSS) or functionality/behavior(java script).
"HyperText" refers to links that connect web pages to one another, either within a single website or
between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet
and linking it to pages created by other people, you become an active participant in the World
Wide Web.
HTML uses "markup" to annotate text, images, and other content for display in a Web browser.
HTML markup includes special "elements" such as
<head>,<title>,<body>,<header>,<footer>,<p>,<div>,<img>,<canvas> many others.
Tags in HTML are case insensitive. That is, they can be written in uppercase, lowercase, or a
mixture. Example <title> tag can be written as <Title>,<TITLE> or in any other way.
History
The history of hypertext markup language is a strange and interesting tale. From its simple start as
an online subset of SGML through political maneuverings of the huge browser companies to its
current piecemeal but growing compatibility, the language has weathered a storm of growth,
abuse, and innovation. Recently, the battle for control of the standard has focused on functionality.
Microsoft and Netscape are both touting W3C compliance as a crucial marketing advantage. And
the work being done on the latest HTML draft shows there may be light at the end of the tunnel.
The problem, however, turned out to be in the simplicity of Berners-Lee's language. Since it was
text-based, you could use any editor or word processor to create or convert documents for the
Web. And there was just a handful of tags anyone could master HTML in an afternoon. The Web
flourished. Everyone started publishing. The rest is history.
But as more and more content moved to the Web, those creating browsers realized the simple
markup language needed much improvement. How should the innovation take place? Tim Berners-
Lee certainly wasn't going to be the sole developer of HTML he never intended to be. So the
developers, in the long-held tradition of the Internet, implemented new features in their browsers
and then shipped them. If the Web community liked them, they stayed. If not, they were removed.
Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make effective presentation with HTML because it has a lot of formatting

tags.
3) It is a markup language so it provides a flexible way to design web pages along with the text.
1
4) It facilitates programmers to add link on the web pages (by html anchor tag) , so it enhances the
interest of browsing of the user.
5) It is platform-independent because it can be displayed on any platform like Windows, Linux

and Macintosh etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.
Basic Structure:
The basic structure of an HTML document consists of 5 elements:
1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>
5. <body>
1.<!DOCTYPE >
The DOCTYPE tells the web browser which version of HTML the page is written in. In this class,
we will be using XHTML Transitional, which allows us a little flexibility.
2.<html>
The <html> element tells the browser that the page will be formatted in HTML and, optionally,
which world language the page content is in.
3.<head>
The <head> element surrounds all the special behind the scenes elements of a web document.
Most of these elements do not get displayed directly on the web page.
4.<body>
The <body> element surrounds all the actual content (text, images, videos, links, etc.) that will be
displayed on our web page.
5.<title>
The <title> element defines what text will show in the web browsers title bar
2
Structure:
<!DOCTYPE html>
<html>
<head>
<title>Title here</title>
</head>
<body>
Web page contents goes here.
</body>
</html>
3
Lab-1:
Aim: Design the following static web pages required for online book store.
1.Home page:-
The static home page must contains three divisions
Top frame:- logo and college name and links to homepage, login page,
registration Page, catalogue page and cart page
Left frame:- at least four links for navigation which will display the
catalogue of Respective links
Right frame:- the pages to links in the left frame must be loaded here
initially it Contains the description of the website
Top frame:-
<html>
<head>
<title> Top Frame </title>
</head>
<body bgcolor=#bbffbb>
<table border="1" width="100%">
<tr> <th width="14%"> <img src="book.gif" width=100 height=50/></th>
<th> AMAZON.COM </th>
</tr>
</table>
<table border="1" width="100%">
<tr>
<th><a href="rightframe.html" target="rframe">Home</a></th>
<th><a href="login.html" target="rframe">Login</a></th>
<th><a href="register.html" target="rframe">Register</a></th>
<th><a href="catalogue.html" target="rframe">Catalogue</a></th>
<th><a href="cart.html" target="rframe">Cart</a></th>
</tr>
</table>
</body>
</html>
4
Left Frame:-
<html>
<head>
<title> Left Frame </title>
</head>
<body bgcolor=#ffffcc>
<center>
<h4><a href="cse.html" target="rframe">CSE</a> </h4>
<h4><a href="ece.html" target="rframe">ECE</a> </h4>
<h4><a href="eee.html" target="rframe">EEE</a> </h4>
<h4><a href="it.html" target="rframe">IT</a> </h4>
</center>
</body>
</html>
5
Right Frame:-
<html>
<head>
<title> Right Frame </title>
</head>
<body bgcolor="pink">
<center><h2>Description of the web site </h2></center>
</body>
</html>
Home Page:-
<frameset rows="18%,*">
<frame src="topframe.html" scrolling="no"/>
<frameset cols="15%,*">
<frame src="leftframe.html" noresize/>
<frame src="rightframe.html" name="rframe"/>
</frameset>
</frameset>
6
2) Login Page:-
<html>
<head>
<title> Login </title>
</head>
<center>
<form>
<b>Login: <input type="text" name="login"/> <br><br>
Password: <input type="password" name="password"/> <br><br>
<input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
</b>
7
</form>
</center>
</body>
</html>
3) Registration Page:-
Aim:-Create a registration form with the following fields
 Name(Text field)
 Password(password field)
 E-mail id(email field)
 Phone number(number field)
 Sex (radio button)
 Date of birth(3 select boxes)
 Languages known(check boxes-English, Telugu, Hindi, Tamil)
 Address(text area)
8
<html>
<head> </head>
<title> New User! </title>
<body bgcolor="cyan">
<form>
<center>
<h1> <font size="3"> Registration Form </font> </h1>
<hr witdh="50%">
<table align=center border=1>
<tr><td>User Name:</td><td><input type="text" name="un"/></td></tr>
<tr><td>Password:</td><td><input type="password" name="pw"/></td></tr>
<tr><td>E-mail ID:</td><td><input type="text" name="email"/></td></tr>
<tr><td>Phone:</td><td><input type="number" name="phone"/></td></tr>
<tr><td>Sex:</td><td><input type="radio" name="rb" checked/>Male
<input type="radio" name="rb"/>Female</td></tr>
<tr><td>DOB:</td><td><select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select>
<option>jan</option>
<option>feb</option>
<option>march</option>
<option>april</option>
<option>may</option>
9
</select>
<select>
<option>1991</option>
</select>
</td></tr>
<tr><td>Languages:</td><td><input type="checkbox" name=ck1>English
<input type="checkbox" name=ck1>Telugu
<input type="checkbox" name=ck1>Hindi
<input type="checkbox" name=ck1>Tamil
</td></tr>
<tr><td>Address:</td><td><textarea rows=3 cols=30>Enter Address</textarea></td></tr>
<tr><td></td><td><input type="submit" value="Submit"/>
<input type="reset" value="clear"/>
</td></tr>
</table>
</center>
</body>
</html>
10
4) Catalogue Page:-
Aim:-The Catalogue page should contain the details of all the books available in the web site in a
table
The details should contain in the following:-
 Snap shot of cover page.
 Author Name.
 Publisher.
 Price.
 Add to cart button.
11
<html>
<head></head>
<title> Catalogue </title>
<form>
<table border="1" width="50%" align="center">
<tr>
<td> <img src="java.jpg" width=100 height=100/></td>
<td> Book: JAVA <br> Author: Winston <br> Publication:wiley</td>
<td> $40.5    </td>
<td> <input type="button" value="Add to cart"/></td>
</tr>
<tr>
<td> <img src="php.jpg" width=100 height=100/></td>
<td> Book: PHP <br> Author: S.Russel <br> Publication:PrincetonHall</td>
<td> $63    </td>
</tr>
<tr>
<td> <img src="oracle.jpg" width=100 height=100/></td>
<td> Book: Oracle<br> Author: S.Russel <br> Publication:PrincetonHall</td>
<td> $63    </td>
</tr>
<tr>
<td> <img src="xml.jpg" width=100 height=100/></td>
<td> Book: PHP <br> Author: S.Russel <br> Publication:PrincetonHall</td>
<td> $63    </td>
12
</tr>
</table>
</form>
</body>
</html>
Cart Page:-
<html>
<head> </head>
<title> Cart page</title>
<body bgcolor=purple>
<center>
<table width="100%">
<tr>
<th>Book Name </th>
<th>Price </th>
<th>Quantity </th>
13
<th>Amount </th>
</tr>
<tr>
<td align="center">XML Bible </td>
<td align="center">$40.5 </td>
<td align="center">01 </td>
</tr>
<tr>
<td align="center">JAVA </td>
<td align="center">02 </td>
<td align="center">$70 </td>
</tr>
<tr>
<td> </td> <td> </td><th>Total Amount</th>
<td align="center">$110.5</td>
</tr>
</table>
</center>
</body>
</html>
14
15
Introduction to Javascript
JavaScript is a lightweight, interpreted programming language. It is designed for creating network-
centric applications. It is complimentary to and integrated with Java. JavaScript is very easy to
implement because it is integrated with HTML. It is open and cross-platform.
What is JavaScript ?
JavaScript is a dynamic computer programming language. It is lightweight and most commonly
used as a part of web pages, whose implementations allow client-side script to interact with the
user and make dynamic pages. It is an interpreted programming language with object-oriented
capabilities.
JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly
because of the excitement being generated by Java. JavaScript made its first appearance in
Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of the language has
been embedded in Netscape, Internet Explorer, and other web browsers.
The ECMA-262 Specification defined a standard version of the core JavaScript language.
 JavaScript is a lightweight, interpreted programming language.

 Designed for creating network-centric applications.
 Complementary to and integrated with Java.
 Complementary to and integrated with HTML.
 Open and cross-platform
Client-Side JavaScript
Client-side JavaScript is the most common form of the language. The script should be included in
or referenced by an HTML document for the code to be interpreted by the browser.
It means that a web page need not be a static HTML, but can include programs that interact with
the user, control the browser, and dynamically create HTML content.
The JavaScript client-side mechanism provides many advantages over traditional CGI server-side
scripts. For example, you might use JavaScript to check if the user has entered a valid e-mail
address in a form field.
The JavaScript code is executed when the user submits the form, and only if all the entries are
valid, they would be submitted to the Web Server.
16
JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and
other actions that the user initiates explicitly or implicitly.
Advantages of JavaScript
The merits of using JavaScript are −
 Less server interaction − You can validate user input before sending the page off to the
server. This saves server traffic, which means less load on your server.
 Immediate feedback to the visitors − They don't have to wait for a page reload to see if
they have forgotten to enter something.
 Increased interactivity − You can create interfaces that react when the user hovers over
them with a mouse or activates them via the keyboard.
 Richer interfaces − You can use JavaScript to include such items as drag-and-drop
components and sliders to give a Rich Interface to your site visitors.
Limitations of JavaScript
We cannot treat JavaScript as a full-fledged programming language. It lacks the following
important features −
 Client-side JavaScript does not allow the reading or writing of files. This has been kept for
security reason.
 JavaScript cannot be used for networking applications because there is no such support
available.
 JavaScript doesn't have any multi-threading or multiprocessor capabilities.
Once again, JavaScript is a lightweight, interpreted programming language that allows you to
build interactivity into otherwise static HTML pages.
JavaScript can be implemented using JavaScript statements that are placed within the <script>...
</script> HTML tags in a web page.
You can place the <script> tags, containing your JavaScript, anywhere within your web page, but
it is normally recommended that you should keep it within the <head> tags.
The <script> tag alerts the browser program to start interpreting all the text between these tags as
a script. A simple syntax of your JavaScript will appear as follows.
17
<script ...>
JavaScript code
</script>
The script tag takes two important attributes −
 Language − This attribute specifies what scripting language you are using. Typically, its
value will be javascript. Although recent versions of HTML (and XHTML, its successor)
have phased out the use of this attribute.
 Type − This attribute is what is now recommended to indicate the scripting language in
use and its value should be set to "text/javascript".
So your JavaScript segment will look like −
<script language = "javascript" type = "text/javascript">

JavaScript code
</script>
Your First JavaScript Code

Let us take a sample example to print out "Hello World". We added an optional HTML comment
that surrounds our JavaScript code. This is to save our code from a browser that does not support
JavaScript. The comment ends with a "//-->". Here "//" signifies a comment in JavaScript, so we
add that to prevent a browser from reading the end of the HTML comment as a piece of
JavaScript code. Next, we call a function document.write which writes a string into our HTML
document.
This function can be used to write text, HTML, or both. Take a look at the following code.
<html>
<body>
<script language = "javascript" type = "text/javascript">

</script>
</body>
18
</html>
This code will produce the following result −
Hello World!
5) Validations:-
Aim: Write a java script to validate the following fields in a registration page
1. Name (should contains alphabets and the length should not be less than 6 characters)
2. Password(should not be less than 6 characters)
3. E-mail(should not contain invalid addresses and must follow the standard pattern
name@domain.com)
4. Phone number(phone number should contain 10 digits only).
<html>
<head> <h1 align=center>Welcome to Validation Checking</h1>
<hr width=50%>
<script language="javascript">
function validation()
{
var x=f.un.value;
var len=x.length;
var val=x.charCodeAt(0);
var p=f.pw.value;
var c=f.cpw.value;
var a=f.email.value;
var atpos=a.indexOf("@");
var dotpos=a.lastIndexOf(".");
var ph=f.phone.value;
if(len<6 || x=='' || x==null)
{
alert("check your username! must be minimum 6 characters");
return false;
}
else if(val<65 || val>90 && val <97 || val>122)
{
19
alert("username must begin with an alphabet");
return false;
}
else if(p=='' || c=='' || p.length<6 || c.length<6 || p!=c)
{
alert("Password and Confirm Password should be same and greater than 6 characters!");
return false;
}
else if(atpos<6 || dotpos<atpos+6 || dotpos+2>=a.length)
{
alert("Not a valid email id");
return false;
}
else if(ph.length<10)
{
alert("Phone number should contain 10 digits only");
return false;
}
else
alert("Congragulations! you have submited successfully");
}
</script>
</head>
<title> Validation Check! </title>
<body>
<table align=center border=1>
<form name="f" action="success.html" onsubmit="return validation();" method="post">
<tr><td>User Name:</td><td><input type="text" name="un"/></td></tr>
<tr><td>Password:</td><td><input type="password" name="pw"/></td></tr>
<tr><td>Confirm Password:</td><td><input type="password" name="cpw"/></td></tr>
<tr><td>E-mail ID:</td><td><input type="text" name="email"/></td></tr>
<tr><td>Phone:</td><td><input type="number" name="phone"/></td></tr>
<tr><td></td><td><input type="submit" value="Submit"/></td></tr>
</form></table>
</body>
</html>
20
21
Introduction to CSS
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the
text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what
background images or colors are used, layout designs,variations in display for different devices
and screen sizes as well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of an
HTML document. Most commonly, CSS is combined with the markup languages HTML or
XHTML.
Advantages of CSS
 CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML
pages. You can define a style for each HTML element and apply it to as many Web pages
as you want.
 Pages load faster − If you are using CSS, you do not need to write HTML tag attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.
So less code means faster download times.
 Easy maintenance − To make a global change, simply change the style, and all elements
in all the web pages will be updated automatically.
 Superior styles to HTML − CSS has a much wider array of attributes than HTML, so
you can give a far better look to your HTML page in comparison to HTML attributes.
 Multiple Device Compatibility − Style sheets allow content to be optimized for more
than one type of device. By using the same HTML document, different versions of a
website can be presented for handheld devices such as PDAs and cell phones or for
printing.
 Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to
make them compatible to future browsers.
A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts −
22
 Selector − A selector is an HTML tag at which a style will be applied. This could be any
tag like <h1> or <table> etc.
 Property − A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border etc.
 Value − Values are assigned to properties. For example, colorproperty can have value
either red or #F1F1F1 etc.
You can put CSS Style Rule Syntax as follows −
selector { property: value }
Types of CSS:-
 Inline css
 Embedded css
 External css
Inline CSS - The style Attribute

You can use style attribute of any HTML element to define style rules. These rules will be applied
to that element only. Here is the generic syntax −
<element style = "...style rules....">
Attributes
Attribut Value Description
e
style style rules The value of style attribute is a combination of style declarations
23
separated by semicolon (;).
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;">
This is inline CSS
</h1>
</body>
</html>
This is inline CSS
Embedded CSS - The <style> Element

You can put your CSS rules into an HTML document using the <style> element. This tag is
placed inside the <head>...</head> tags. Rules defined using this syntax will be applied to all the
elements available in the document. Here is the generic syntax −
<!DOCTYPE html>
<html>
<head>
<style type = "text/css" media = "all">
body {
background-color: linen;
24
h1 {
color: maroon;
margin-left: 40px;
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
This is a heading
This is a paragraph.
External CSS - The <link> Element

The <link> element can be used to include an external stylesheet file in your HTML document.
An external style sheet is a separate text file with .css extension. You define all the Style rules
within this text file and then you can include this file in any HTML document using <link>
element.
Here is the generic syntax of including external CSS file −
<head>
<link type = "text/css" href = "..." media = "..." />
</head>
mystyle.css
h1, h2, h3 {
color: #36C;
25
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
External.html
<html>
<head>
<link type = "text/css" href = "mystyle.css" media = " all" />
</head>
<body>
<h1>welcome</h1>
<h2>CSS</h2>
<h3>javascript</h3>
</body>
</html>
26
6) CSS
Aim:- Design a web page using CSS(cascading style sheets) which includes the following:
a) Use different font, styles
b) In the style definition you define how each selector should work (font, color etc..). Then, in the
body of your pages, you refer to these selectors to activate the styles.
External.css
.header{
position:fixed;
top:0;
left:0;
z-index:999;
width:100%;
height:80px;
text-align:center;
background-color:#0d47a1;
}
.center{
padding-top:10px;
margin-top:100px;
background-color:#f3e5f5;
font-family:times;
font-size:20px;
text-align:left;
}
.footer{
27
position:fixed;
bottom:0;
text-align:center;
width:100%;
background-color:#0d47a1;
height:30px;
color:white;
}
h1{
font-family:times;
font-size:150%;
text-align:center;
color:white;
}
Demo1.html
<head>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
<div class="header">
<h1>ADITYA INSTITUTE OF TECHNOLOGY AND MANAGEMENT</h1>
</div>
<div class="center">
<h2>About AITAM </h2></br>
Aditya Institute of Technology and Management is located at K.
Kotturu, Tekkali, Srikakulam District, Andhra Pradesh.
28
It is located in an extent of 50 acres of clean, green and serene area.
The institute has the beauty of modern day Gurukul.
It is situated on the banks of the river Vamsadhara at a short distance and having the sea at an
hours journey.
The institute is provided with an enjoyable coastal climate.
</div>
<div class="footer">
© All Rights reserved
</div>
</body>
</html>
29
Introduction to XML
XML stands for Extensible Markup Language. It is a text-based markup language derived from
Standard Generalized Markup Language (SGML).
XML tags identify the data and are used to store and organize the data, rather than specifying how
to display it like HTML tags, which are used to display the data. XML is not going to replace
HTML in the near future, but it introduces new possibilities by adopting many successful features
of HTML.
There are three important characteristics of XML that make it useful in a variety of systems and
solutions −
 XML is extensible − XML allows you to create your own self-descriptive tags, or
language, that suits your application.
 XML carries the data, does not present it − XML allows you to store the data
irrespective of how it will be presented.
 XML is a public standard − XML was developed by an organization called the World
Wide Web Consortium (W3C) and is available as an open standard.
XML Usage
A short list of XML usage says it all −
 XML can work behind the scene to simplify the creation of HTML documents for large
web sites.
 XML can be used to exchange the information between organizations and systems.
 XML can be used for offloading and reloading of databases.
 XML can be used to store and arrange the data, which can customize your data handling
needs.
 XML can easily be merged with style sheets to create almost any desired output.
 Virtually, any type of data can be expressed as an XML document.
30
What is Markup?
XML is a markup language that defines set of rules for encoding documents in a format that is
both human-readable and machine-readable. So what exactly is a markup language? Markup is
information added to a document that enhances its meaning in certain ways, in that it identifies
the parts and how they relate to each other. More specifically, a markup language is a set of
symbols that can be placed in the text of a document to demarcate and label the parts of that
document.
Following example shows how XML markup looks, when embedded in a piece of text −
<message>
<text>Hello, world!</text>
</message>
This snippet includes the markup symbols, or the tags such as <message>...</message> and
<text>... </text>. The tags <message> and </message> mark the start and the end of the XML
code fragment. The tags <text> and </text> surround the text Hello, world!.
The following diagram depicts the syntax rules to write different types of markup and text in an
XML document.
31
XML Declaration
The XML document can optionally have an XML declaration. It is written as follows −
<?xml version = "1.0" encoding = "UTF-8"?>
Where version is the XML version and encoding specifies the character encoding used in the
document.
Syntax Rules for XML Declaration

 The XML declaration is case sensitive and must begin with "<?xml>" where "xml" is
written in lower-case.
 If document contains XML declaration, then it strictly needs to be the first statement of
the XML document.
 The XML declaration strictly needs be the first statement in the XML document.
 An HTTP protocol can override the value of encoding that you put in the XML
declaration.
Tags and Elements

An XML file is structured by several XML-elements, also called XML-nodes or XML-tags. The
names of XML-elements are enclosed in triangular brackets < > as shown below −
<element>
Syntax Rules for Tags and Elements

Element Syntax − Each XML-element needs to be closed either with start or with end elements
as shown below −
<element>....</element>
or in simple-cases, just this way −
<element/>
Nesting of Elements − An XML-element can contain multiple XML-elements as its children, but
the children elements must not overlap. i.e., an end tag of an element must have the same name as
that of the most recent unmatched start tag.
32
The Following example shows incorrect nested tags −
<?xml version = "1.0"?>
<contact-info>
<company>TutorialsPoint
<contact-info>
</company>
The Following example shows correct nested tags −
<?xml version = "1.0"?>
<contact-info>
<company>TutorialsPoint</company>
<contact-info>
Root Element − An XML document can have only one root element. For example, following is
not a correct XML document, because both the x and yelements occur at the top level without a
root element −
<x>...</x>
<y>...</y>
The Following example shows a correctly formed XML document −
<root>
<x>...</x>
<y>...</y>
</root>
Case Sensitivity − The names of XML-elements are case-sensitive. That means the name of the
start and the end elements need to be exactly in the same case.
For example, <contact-info> is different from <Contact-Info>
33
7) Write an XML file which will display the book information which includes the following:
a) Title of book
b) Author name
c) ISBN number
d) Publisher name
e) Edition
f) Price
Write a DTD to validate the above XML file and display the details in a table (to do this use XSL).
Book.dtd
<!ELEMENT bookdetails (books+)>
<!ELEMENT books (title,author,isbn,publisher,edition,price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT isbn (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
<!ELEMENT edition (#PCDATA)>
<!ELEMENT price (#PCDATA)>
Book.xml
<?xml version="1.0"?>
<!DOCTYPE bookdetails SYSTEM "book.dtd">
<?xml-stylesheet type="text/xsl" href="book.xsl"?>
<bookdetails>
34
<books>
<title> C </title>
<author> Balaguruswamy </author>
<isbn>isbn-12</isbn>
<publisher>Black book</publisher>
<edition> Edition-II </edition>
<price>$30.00</price>
</books>
<books>
<title> C++ </title>
<author> yaswanth kanethkar </author>
<publisher>tata mcgraw hill</publisher>
<edition> Edition-I </edition>
</books>
<books>
<title> JAVA </title>
<author> Herbert Schildt </author>
<publisher>McGraw Hill Education</publisher>
<edition> Edition-IV </edition>
</books>
</bookdetails>
35
Book.xsl
<?xml version="1.0"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head> <center>Book Details</center> </head>
<body>
<hr width="50%"/>
<table border="1" align="center">
<tr>
<th> TITLE </th>
<th> AUTHOR </th>
<th>ISBN</th>
<th>PUBLISHER</th>
<th> EDITON </th>
<th> PRICE </th>
</tr>
<xsl:for-each select="bookdetails/books">
<tr>
<td> <xsl:value-of select="title"/></td>
<td> <xsl:value-of select="author"/></td>
<td> <xsl:value-of select="isbn"/></td>
<td> <xsl:value-of select="publisher"/></td>
<td> <xsl:value-of select="edition"/></td>
<td> <xsl:value-of select="price"/></td>
</tr>
36
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
37
8) Install TOMCAT web server
While installation assign port number 4040 to TOMCAT and 8080 to APACHE. Make sure
that these ports are available i.e., no other process is using this port.
2) Access the above developed static web pages for books web site, using these servers by
putting the web pages developed in experiment-1 and experiment-2 in the document root.
Access the pages by using the urls : http://localhost:4040/online/books.html (for tomcat)
http://localhost:8080/books.html
Aim: Install TOMCAT web server and APACHE
How to install and Configure the Tomcat Server

Step 1: Installation of JDK: Don't forget to install JDK on your system (if not installed) because
any tomcat requires the Java 1.5 (Java 5) and Java 1.6 (Java 6) and then set the class path
(environment variable) of JDK.
Step 2: Setting the class path variable for JDK: Two methods are there to set the classpath.
Set the class path using the following command.
set PATH="C:\Program Files\Java\jdk1.5.0_08\bin";%PATH%
The other way of setting the class path variable is:

First right click on the My Computer->properties->advance->Environment
Variables->path.
Set bin directory path of JDK in the path variable.
Step 3: Now it's time to shift on to the installation process of Tomcat 6.0.10. It takes various steps
for installing and configuring the Tomcat 6.0.
For Windows, Tomcat comes in two forms : .zip file and the Windows installer (.exe file). Here
we are exploring the installation process by using the .exe file. The directory C:\apache-tomcat-
6.0.10 is the common installation directory as it is pre-specified C:\ as the top-level directory. First
unpack the zipped file and simply execute the .exe file.
38
The above shown screen shot is the first one shown in the installation process. Just click on the
Next button to proceed the installation process
click "I Agree" button to continue the installation process.
Click next to go with the default components choosen.

39
Choose the location for the Tomcat files as per your convenience. You can also choose the default
location.
Now choose the port number on which you want to run the tomcat server. Tomcat uses the port
number 8080 as its default value. But Most of the people change the port number to 80 because in
this case the user is not required to specify the port number at request time. But we are using here
the default port number as 8080. Choose the user name and password as per your convenience.
We can change the port number even the installation process is over. For that, go to the specified
location as " Tomcat 6.0 \conf \server.xml ". Within the server.xml file choose "Connector" tag
and change the port number.
e.g While using the port number 8080, give the following request in the address bar as:
Default Port: http//localhost:8080/index.jsp
In case of port number number 80 just type the string illustrated below in the address bar:
New Port: http://localhost/index.jsp
Note that we do no need to specify any port number in the URL.
Now click on the Next button to proceed the installation process.
40
The installation process shows the above screen as the next window. This window asks for the
location of the installed Java Virtual Machine. Browse the location of the JRE folder and click on
the Install button. This will install the Apache tomcat at the specified location.
To get the information about installer click on the "Show details" button
41
After completion of installation process it will display the window like the above one.
On clicking at Finish button, a window like the above one will display a message printed on the
window given below.
After successfully installing, a shortcut icon to start the tomcat server appears in the icon tray of
the task bar as shown above. Double clicking the icon, displays the window of Apache Manager
for Tomcat. It will show the "Startup type" as manual since we have changed the destination folder
for tomcat during the installation process. Now we can configure the other options like "Display
name" and "Description" .We can also start, stop and restart the service from here.
42
If installation process completes successfully then a window as shown below will appear.
Step 4: Setting the JAVA_HOME Variable: Purpose of setting the environment variable

JAVA_HOME is to specify the location of the java run time environment needed to support the
Tomcat else Tomcat server does not run. This variable contains the path of JDK installation
directory. Note that it should not contain the path up to bin folder.
set JAVA_HOME=C:\Program Files\Java\jdk1.5.0_08

Here, we have taken the URI path according to our installation convention
43
For Windows XP, Go through the following steps:
Start menu->Control Panel->System->Advanced tab->Environment Variables->New->set the

Variable Name as JAVA_HOME and Variable Value as C:\Program Files\Java\jdk1.6.0 and then
click on all the three ok buttons one by one. It will set the JDK path.
Now , Start the Tomcat Server : Start the tomcat server from the bin folder of Tomcat 6.0
directory by double clicking the " tomcat6.exe " file. You can also create a shortcut of this .exe
file at your desktop.
Stop the Tomcat Server: Stop the server by pressing the "Ctrl + c" keys.
44
Introduction to Servlets
Java Servlets are programs that run on a Web or Application server and act as a middle layer
between a requests coming from a Web browser or other HTTP client and databases or
applications on the HTTP server.
Using Servlets, you can collect input from users through web page forms, present records from a
database or another source, and create web pages dynamically.
Java Servlets often serve the same purpose as programs implemented using the Common Gateway
Interface (CGI). But Servlets offer several advantages in comparison with the CGI.
 Performance is significantly better.
 Servlets execute within the address space of a Web server. It is not necessary to create a
separate process to handle each client request.
 Servlets are platform-independent because they are written in Java.
 Java security manager on the server enforces a set of restrictions to protect the resources
on a server machine. So servlets are trusted.
 The full functionality of the Java class libraries is available to a servlet. It can
communicate with applets, databases, or other software via the sockets and RMI
mechanisms that you have seen already.
Servlets Architecture
The following diagram shows the position of Servlets in a Web Application.
45
Servlets Tasks
Servlets perform the following major tasks −
 Read the explicit data sent by the clients (browsers). This includes an HTML form on a
Web page or it could also come from an applet or a custom HTTP client program.
 Read the implicit HTTP request data sent by the clients (browsers). This includes cookies,
media types and compression schemes the browser understands, and so forth.
 Process the data and generate the results. This process may require talking to a database,
executing an RMI or CORBA call, invoking a Web service, or computing the response
directly.
 Send the explicit data (i.e., the document) to the clients (browsers). This document can be
sent in a variety of formats, including text (HTML or XML), binary (GIF images), Excel,
etc.
 Send the implicit HTTP response to the clients (browsers). This includes telling the
browsers or other clients what type of document is being returned (e.g., HTML), setting
cookies and caching parameters, and other such tasks.
Life cycle of Servlet:-
A servlet life cycle can be defined as the entire process from its creation till the destruction. The
following are the paths followed by a servlet.
 The servlet is initialized by calling the init() method.
 The servlet calls service() method to process a client's request.
 The servlet is terminated by calling the destroy() method.
 Finally, servlet is garbage collected by the garbage collector of the JVM.
Now let us discuss the life cycle methods in detail.
The init() Method

The init method is called only once. It is called only when the servlet is created, and not called for
any user requests afterwards. So, it is used for one-time initializations, just as with the init method
of applets.
The servlet is normally created when a user first invokes a URL corresponding to the servlet, but
you can also specify that the servlet be loaded when the server is first started.
46
When a user invokes a servlet, a single instance of each servlet gets created, with each user
request resulting in a new thread that is handed off to doGet or doPost as appropriate. The init()
method simply creates or loads some data that will be used throughout the life of the servlet.
The init method definition looks like this −
public void init() throws ServletException {
// Initialization code...
The service() Method

The service() method is the main method to perform the actual task. The servlet container (i.e.
web server) calls the service() method to handle requests coming from the client( browsers) and to
write the formatted response back to the client.
Each time the server receives a request for a servlet, the server spawns a new thread and calls
service. The service() method checks the HTTP request type (GET, POST, PUT, DELETE, etc.)
and calls doGet, doPost, doPut, doDelete, etc. methods as appropriate.
Here is the signature of this method −
public void service(ServletRequest request, ServletResponse response)
throws ServletException, IOException {
The service () method is called by the container and service method invokes doGet, doPost,
doPut, doDelete, etc. methods as appropriate. So you have nothing to do with service() method
but you override either doGet() or doPost() depending on what type of request you receive from
the client.
The doGet() and doPost() are most frequently used methods with in each service request. Here is
the signature of these two methods.
The doGet() Method

A GET request results from a normal request for a URL or from an HTML form that has no
METHOD specified and it should be handled by doGet() method.
public void doGet(HttpServletRequest request, HttpServletResponse response)
47
// Servlet code
The doPost() Method

A POST request results from an HTML form that specifically lists POST as the METHOD and it
should be handled by doPost() method.
public void doPost(HttpServletRequest request, HttpServletResponse response)
// Servlet code
The destroy() Method

The destroy() method is called only once at the end of the life cycle of a servlet. This method
gives your servlet a chance to close database connections, halt background threads, write cookie
lists or hit counts to disk, and perform other such cleanup activities.
After the destroy() method is called, the servlet object is marked for garbage collection. The
destroy method definition looks like this −
public void destroy() {
// Finalization code...
48
9) Write servlet program to read parameters from web.xml
Parameter.java
import javax.servlet.ServletException;
import javax.servlet.ServletConfig;
import javax.servlet.http.*;
import java.io.*;
public class ParamValues extends HttpServlet

{
public void service( HttpServletRequest req, HttpServletResponse res ) throws ServletException,
IOException
{
res.setContentType("text/html");
PrintWriter pw = res.getWriter();
// obtain an object of ServletConfig interface

ServletConfig config = getServletConfig();
String str = config.getInitParameter("city");
pw.print("city: " + str);
pw.close();
}
Web.xml
<web-app>
<servlet>
<servlet-name>hello</servlet-name>
<servlet-class>ParamValues</servlet-class>
<init-param>
<param-name>city</param-name>
49
<param-value>Hyderabad</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>hello</servlet-name>
<url-pattern>/values</url-pattern>
</servlet-mapping>
</web-app
50
10) Write a servlet program using cookie management
Index.html
<form action="login">
User Name:<input type="text" name="userName"/><br/>
Password:<input type="password" name="userPassword"/><br/>
<input type="submit" value="submit"/>
</form>
MyServlet1.java
import java.io.*;
import javax.servlet.*;
public class MyServlet1 extends HttpServlet
{
public void service(HttpServletRequest request,
HttpServletResponse response) {
try{
response.setContentType("text/html");
PrintWriter pwriter = response.getWriter();
String name = request.getParameter("userName");

String password = request.getParameter("userPassword");
pwriter.print("Hello "+name);
//Creating two cookies

Cookie c1=new Cookie("userName",name);
Cookie c2=new Cookie("userPassword",password);
51
//Adding the cookies to response header
response.addCookie(c1);
response.addCookie(c2);
pwriter.print("<br><a href='welcome'>View Details</a>");
pwriter.close();
}catch(Exception exp){
System.out.println(exp);
}
}
}
MyServlet2.java
import java.io.*;
public class MyServlet2 extends HttpServlet {
public void doGet(HttpServletRequest request,
HttpServletResponse response){
try{
PrintWriter pwriter = response.getWriter();
//Reading cookies
Cookie c[]=request.getCookies();
//Displaying User name value from cookie
pwriter.print("Name: "+c[0].getValue());
//Displaying user password value from cookie
52
pwriter.print("Password: "+c[1].getValue());
pwriter.close();
}catch(Exception exp){
System.out.println(exp);
}
}
}
Web.xml
<servlet>
<servlet-name>Servlet1</servlet-name>
<servlet-class>MyServlet1</servlet-class>
</servlet>
<servlet-mapping>
<url-pattern>/login</url-pattern>
</servlet-mapping>
<servlet>
<servlet-class>MyServlet2</servlet-class>
</servlet>
<servlet-mapping>
<url-pattern>/welcome</url-pattern>
</servlet-mapping>
</web-app>
53
54
11) Write servlet program to illustrate HttpSession.
Index.html
<form action="servlet1">
Name:<input type="text" name="userName"/><br/>
<input type="submit" value="go"/>
</form>
FirstServlet.java
import java.io.*;
public class FirstServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response){
try{
PrintWriter out = response.getWriter();
String n=request.getParameter("userName");
out.print("Welcome "+n);
HttpSession session=request.getSession();
session.setAttribute("uname",n);
out.print("<a href='servlet2'>visit</a>");
out.close();
}catch(Exception e){System.out.println(e);}
}
}
55
SecondServlet.java
import java.io.*;
public class SecondServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
{
try{
PrintWriter out = response.getWriter();
HttpSession session=request.getSession(false);
String n=(String)session.getAttribute("uname");
out.print("Hello "+n);
out.close();
}catch(Exception e){System.out.println(e);}
}
}
Web.xml
<web-app>
<servlet>
<servlet-name>s1</servlet-name>
<servlet-class>FirstServlet</servlet-class>
</servlet>
<servlet-mapping>
<url-pattern>/servlet1</url-pattern>
</servlet-mapping>
56
<servlet>
<servlet-class>SecondServlet</servlet-class>
</servlet>
<servlet-mapping>
<url-pattern>/servlet2</url-pattern>
</servlet-mapping>
</web-app>
Introduction to JSP
57
Java Server Pages (JSP) is a server-side programming technology that enables the creation of
dynamic, platform-independent method for building Web-based applications. JSP have access to
the entire family of Java APIs, including the JDBC API to access enterprise databases.
What is JavaServer Pages?

JavaServer Pages (JSP) is a technology for developing Webpages that supports dynamic content.
This helps developers insert java code in HTML pages by making use of special JSP tags, most of
which start with <% and end with %>.
A JavaServer Pages component is a type of Java servlet that is designed to fulfill the role of a user
interface for a Java web application. Web developers write JSPs as text files that combine HTML
or XHTML code, XML elements, and embedded JSP actions and commands.
Using JSP, you can collect input from users through Webpage forms, present records from a
database or another source, and create Webpages dynamically.
JSP tags can be used for a variety of purposes, such as retrieving information from a database or
registering user preferences, accessing JavaBeans components, passing control between pages,
and sharing information between requests, pages etc.
Why Use JSP?

JavaServer Pages often serve the same purpose as programs implemented using the Common
Gateway Interface (CGI). But JSP offers several advantages in comparison with the CGI.
 Performance is significantly better because JSP allows embedding Dynamic Elements in

HTML Pages itself instead of having separate CGI files.
 JSP are always compiled before they are processed by the server unlike CGI/Perl which
requires the server to load an interpreter and the target script each time the page is
requested.
 JavaServer Pages are built on top of the Java Servlets API, so like Servlets, JSP also has
access to all the powerful Enterprise Java APIs, including JDBC, JNDI, EJB, JAXP, etc.
 JSP pages can be used in combination with servlets that handle the business logic, the
model supported by Java servlet template engines.
Finally, JSP is an integral part of Java EE, a complete platform for enterprise class applications.
This means that JSP can play a part in the simplest applications to the most complex and
demanding.
Advantages of JSP
58
Following table lists out the other advantages of using JSP over other technologies −
vs. Active Server Pages (ASP)

The advantages of JSP are twofold. First, the dynamic part is written in Java, not Visual Basic or
other MS specific language, so it is more powerful and easier to use. Second, it is portable to
other operating systems and non-Microsoft Web servers.
vs. Pure Servlets

It is more convenient to write (and to modify!) regular HTML than to have plenty of println
statements that generate the HTML.
vs. Server-Side Includes (SSI)

SSI is really only intended for simple inclusions, not for "real" programs that use form data, make
database connections, and the like.
vs. JavaScript
JavaScript can generate HTML dynamically on the client but can hardly interact with the web
server to perform complex tasks like database access and image processing etc.
vs. Static HTML

Regular HTML, of course, cannot contain dynamic information.
59
12) Create tables in the database which contain the details of items (books in our case like
book name, price ,quantity, amount) of each category. Modify your catalogue page in such a
way that you should connect to the database and extract data from the tables and display
them in the catalogue page using JDBC.
<%@page import="java.sql.*"%>
<%
Connection con = null;
String url = "jdbc:mysql://localhost:3306/";
String db = "test";
String driver = "com.mysql.jdbc.Driver";
String user = "root";
String pass = "";
try{
Class.forName(driver).newInstance();
con = DriverManager.getConnection(url+db, user, pass);
try{
Statement st = con.createStatement();
ResultSet res = st.executeQuery("SELECT * FROM catalogue"); %>
<table border=1 align="center">
<tr>
<th>cover</th>
<th>author</th>
<th>publisher</th>
<th>price</th>
</tr>
<%
60
while (res.next()) { %>
<tr>
<td><img src="<%= res.getString("cover") %>.jpg" height="100" width="100" /></td>
<td><%= res.getString("author") %></td>
<td><%= res.getString("publisher") %></td>
<td><%= res.getInt("price")%></td>
</tr>
<% } %>
</table>
<%
catch (SQLException s){
catch (Exception e){
%>
61
62

WT Lab Manual

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WT Lab Manual

Uploaded by

Copyright:

Available Formats

Introduction HTML

1) It is a very easy and simple language. It can be easily understood and modified.

2) It is very easy to make effective presentation with HTML because it has a lot of formatting

5) It is platform-independent because it can be displayed on any platform like Windows, Linux

The basic structure of an HTML document consists of 5 elements:

The ECMA-262 Specification defined a standard version of the core JavaScript language.

 JavaScript is a lightweight, interpreted programming language.

 Complementary to and integrated with Java.

 Complementary to and integrated with HTML.

 Open and cross-platform

 JavaScript doesn't have any multi-threading or multiprocessor capabilities.

So your JavaScript segment will look like −

<script language = "javascript" type = "text/javascript">

Your First JavaScript Code

<script language = "javascript" type = "text/javascript">

This code will produce the following result −

You can put CSS Style Rule Syntax as follows −

selector { property: value }

Inline CSS - The style Attribute

<element style = "...style rules....">

style style rules The value of style attribute is a combination of style declarations

<h1 style = "color:#36C;">

This is inline CSS

This is inline CSS

Embedded CSS - The <style> Element

<style type = "text/css" media = "all">

External CSS - The <link> Element

Here is the generic syntax of including external CSS file −

<link type = "text/css" href = "mystyle.css" media = " all" />

 XML can be used for offloading and reloading of databases.

 Virtually, any type of data can be expressed as an XML document.

<?xml version = "1.0" encoding = "UTF-8"?>

Syntax Rules for XML Declaration

Tags and Elements

Syntax Rules for Tags and Elements

or in simple-cases, just this way −

<?xml version = "1.0"?>

The Following example shows correct nested tags −

<?xml version = "1.0"?>

The Following example shows a correctly formed XML document −

For example, <contact-info> is different from <Contact-Info>

<!ELEMENT bookdetails (books+)>

<!ELEMENT books (title,author,isbn,publisher,edition,price)>

<!ELEMENT title (#PCDATA)>

<!ELEMENT author (#PCDATA)>

<!ELEMENT isbn (#PCDATA)>

<!ELEMENT publisher (#PCDATA)>

<!ELEMENT edition (#PCDATA)>

<!ELEMENT price (#PCDATA)>

<!DOCTYPE bookdetails SYSTEM "book.dtd">

<?xml-stylesheet type="text/xsl" href="book.xsl"?>

<author> Balaguruswamy </author>

<edition> Edition-II </edition>

<title> C++ </title>

<author> yaswanth kanethkar </author>

<publisher>tata mcgraw hill</publisher>

<edition> Edition-I </edition>

<title> JAVA </title>

<author> Herbert Schildt </author>

<publisher>McGraw Hill Education</publisher>

<edition> Edition-IV </edition>

<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<head> <center>Book Details</center> </head>