IT0322 Web Systems LAB Manual

DEPARTMENT OF INFORMATION TECHNOLOGY
FACULTY OF ENGINEERING & TECHNOLOGY
LAB MANUAL
FOR
SUBJECT: WEB TECHNOLOGY LAB

SUBJECT CODE: IT0322
PREPARED BY
N.J.SUBASHINI
Assistant Professor (Senior Grade)
Department of Information Technology
SRM University, SRM Nagar, Kattankulathur-603203

Kancheepuram District, Tamil Nadu
IT0322WebTechnologyLAB
SYLLABUS
IT 0322
WEB TECHNOLOGY LAB

Prerequisite
Nil
0 0 4 2
LIST OF EXERCISES:
1) Create a simple webpage using HTML.
2) Use frames to Include Images and Videos.
3) Add a Cascading Style sheet for designing the web page.
4) Design a dynamic web page with validation using JavaScript.
5) Design a catalogue in ASP.
6) Simple application to demonstrate Servlets.
7) Design a simple online test web page in PHP.
TOTAL 60
DepartmentofInformationTechnology,SRMUniversity
P a g e |2
LIST OF EXERCISES
1. HTML
I.
Simple HTML using
Heading elements
Text Elements
Logical Styles
Physical Styles
Ordered , Unordered and Definition list
II.
Hyper Links
Image Link Link to page containing Images and Videos
File Link Time table
Single Page Link Ex : NO 1 HTML Page
III.
Using Frames
Navigation Frame
Floating Frame
Inline Frame
IV.
Registration Form with Table
2. CSS
I.
Inline Style , Internal Style ,and External Style Sheets
3. DHTML
I.
Use user defined function to get array of values and sort them in ascending order
II.
Demonstrate String and Math Objects predefined methods
III.
Demonstrate Array Objects and Date Objects predefined methods
IV.
Exception Handling
V.
Calendar Creation : Display all month
VI.
Event Handling
Validation of registration form
Open a Window from the current window
Change color of background at each click of button or refresh of a page
Display calendar for the month and year selected from combo box
OnMouseover event
4. ASP
I.
Create a welcome Cookie (Hit for a page) and display different image and text
II.
III.
IV.
5. Java
I.
II.
III.
content each time when the user hit the page

List a table of content and navigate within the pages
Demonstrate Request and Response object using HTML Form
Database Connection to display all the values in the table
Servlets
Simple Servlets
Servlets with HTML form
Cookie creation and retrieval using servlet
6. XML
I.
II.
Create a any catalog

Display the catalog created using CSS or XSL
7. PHP
I.
II.
File operation
Regular Expression, Array, Math, String, Date functions
P a g e |3
TABLE OF CONTENT
SlNo
Topic
PageNo
HTML
Ia
SimpleHTML
Ib
HyperLinks
12
Ic
UsingFrames
23
Id
RegistrationFormwithTable
27
CSS
IIa
InlineStyle,InternalStyle,andexternalStyleSheets
30
JAVASCRIPT
IIIa
Use user defined function to get array of values and sort them in ascending order
33
IIIb
Demonstrate String and Math Objects predefined methods
36
IIIc
Demonstrate Array Objects and Date Objects predefined methods
38
IIId
Exception Handling
44
IIIe
Calendar Creation : Display all month
46
IIIf
Event Handling
Validation of registration form
OnMouseover event
49
52
54
54
57
ASP
IV a
Create a welcome Cookie (Hit for a page)
60
IV b
List a table of content and navigate within the pages
62
IV c
Demonstrate Request and Response object using HTML Form
66
IV d
Database Connection to display all the values in the table
68
JavaServlets
Va
Simple Servlets
73
Vb
Servlets with HTML form
74
Vc
Cookie creation and retrieval using servlet
77
XML
VI a
Create a any catalog
84
VI b
Display the catalog created using CSS and XSL
86
PHP
VII a
File operation
91
VII b
Regular Expression, Array, Math, Date functions
93
References
97
P a g e |4
QUESTIONS
&
SOLUTIONS
P a g e |5
HTML
P a g e |6
Sl No I a: Simple HTML
Question : To create a simple html file to demonstrate the use of different tags.
Prodedure :Create an html page named as Simple _html_tags.html
Add the following tags detail.
1. Set the title of the page as Simple HTML Tags
2. Within the body perform the following
a) Moving text = Simple HTML Tags
b) Different heading tags ( h1 to h6)
c) Paragraph
d) Horizontal line
e) Line Break
f) Block Quote
g) Pre tag
h) Different Logical Style ( <b>, <c>, <sub>, <sup>.)
i) Different Physical style ( <code>, <del>, <kbd>)
j) Listing tags ( 2 types with, & each type provide different type attribute)
Solution :In notepad type the necessary code & save with the file name mentioned with .html
extension.
File Name:Simple_html_tags.html
<html>
<title> Simple Html Tags</title>
<body>
<marquee> Simple HTML Tags</marquee>
<center><FONT COLOR="#0000FF"> Heading Tags</FONT></center>
<h1> Heading H1</h1>
<center><FONT COLOR="#0000FF"> Text Elements</FONT> </center>
<p>This is a praragrspg tag.
HTML 5
One of the most important technologies on this list doesn't fully exist yet HTML 5
but in 2008, key features started to trickle out.
HTML 5 will eventually replace HTML 4.01, the dominant programming language
currently used to build web pages. But the governing bodies in charge of the web are
still drafting the details, and nobody expects HTML 5 to fully emerge as the new
standard for at least a few more years.
P a g e |7
But HTML 5 is no vaporware. Many of the changes to the way the web operates as
outlined in early versions of the new specification are already being implemented in
the latest browsers, and some of the web's more adventurous site builders are already
incorporating HTML 5's magic into their pages.
HTML 5 will be great step forward, standardizing things like dragging and dropping
elements on web pages, in-line editing of text and images on sites and new ways of
drawing animations. There's also support for audio and video playback without plugins, a boon for usability and a worrisome sign for Adobe's Flash, Microsoft's
Silverlight and Apple's QuickTime. The language will also give a boost to web apps,
as there are new controls for storing web data offline on your local machine.
Want Gmail on your desktop? HTML 5 makes it possible. Alas, the blink tag isn't
invited to the party
</p>
<hr>
<center><FONT COLOR="#0000FF"> Line break Tags</FONT></center>
This is a long piece of text consisting of three<BR>
sentences and shows you the functions of the<BR>
Line Break tag. This tag is used quite frequently<BR>
to add line breaks in the HTML code. It is also used<BR>
to add blank lines to a document.<BR>
<hr>
<center><FONT COLOR="#0000FF"> BLOCK QUOTE Tags</FONT></center>
<p>This is some text before the quotation.</p>
<blockquote>This is a long blockquote created with the <blockquote>
tag.</blockquote>
</blockquote>
<hr>
<center><FONT COLOR="#0000FF"> PRE Tags</FONT></center>
<pre>
IT 206 JAVA
IT306 WEB SYSTEMS
IT322 WEB SYSTEMS LAB
</PRE>
<HR>
<center> <FONT COLOR="#0000FF"> Logical style </FONT></center>
This is <b>bold</b> This is bold<br>
This is <big>big font</big> This is big font<br>
This is <i>italic</i> This is italic<br>
Was <s>$50</s>; now $40 Was $50; now $40<br>
This is <small>small</small> This is small<br>
H<sub>2</sub>O H2O<br>
P a g e |8
May 5<sup>th</sup> 2005 May 5th 2005<br>
<tt>fixed-width font</tt> fixed-width font<br>
This is <u>underlined</u> This is underlined<br>
<br>
<hr>
<center> <FONT COLOR="#0000FF"> Physical Style </FONT></center>
This is used for a short <cite>quote</cite>. This is used for a short quote.<br>
<code>y = m * x + b</code> y = m * x + b<br>
<del>Deleted</del> text Deleted text<br>
<dfn>definition</dfn> text definition text<br>
This is <em> emphasized </em>. This is emphasized<br> .
<ins>inserted</ins> text inserted text<br>
<kbd>code</kbd> sample code sample<br>
<samp>code</samp> sample code sample<br>
This is <strong>strong</strong>. This is strong.<br>
<var>program</var> variable program variable<br>
<br>
<hr>
<center><FONT COLOR="#0000FF"> Listing Tags</FONT></center>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
P a g e |9
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
P a g e |10
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<hr>
Output:
P a g e |11
Sl No I b: Hyper Link
Question :- To create an html file to link to different html page which contains
images, tables, and also link within a page.
Procedure :
1. Create an html page named as Table.html to display your class time table.
a) Provide the title as Time Table.
b) Provide various color options to the cells ( High light the lab hours and
elective hours with different colors.)
2. Create an html page named as image.html to display image at various position &
size.
3. Create an html page named as video.html to display the audio and video files.
4. Create an html page named as pagelink.html , in this convert the file created in
the Exercise1 to single page link by providing the links at the top as well as to the
below screen/page.
5. Create an html page named as hyperlink.html to link to the above four files. For
image link alone give a image to be displayed as a link.
extension.
File Name:hyperlink.html
<html>
<body>
<a href=Pagelink.html>different Tags</a><br>
<br><a href=table.html>Time Table</a>
<br>
<br><a href=image.html><img src="web.gif"</a>
<br><a href=video.html>videos</a>
</body>
</html>
Output:
P a g e |12
File Name:Table.html
<html>
<head>
<title>Time Table</title>
</head>
<body>
<B><center><h3>
S.R.M UNIVERSITY,<br>
DEPARTMENT OF INFORMATION TECHNOLOGY<br>
EFFECTIVE FROM: 04.01.09<br></center></b></h3>
<table border="2" width="75%" cellspacing="2" cellpadding="25"
align=center><h3>
<caption align=left>Class: III ITC
           &nb
sp;           &
nbsp;          &nbsp
;           &n
bsp;
           &nb
sp;           &
nbsp;      R.No:306</caption></h3>
<thead>
<tr>
<th >Periods</th>
<th ROWSPAN=2>1 <br>8.30-9.20</th>
<th ROWSPAN=2>2<br>9.20-10.10</th>
<th ROWSPAN=2>3<br>10.20-11.10</th>
<th ROWSPAN=2>4<br>11.10-12.00</th>
<th ROWSPAN=2>5<br>1.30-2.20</th>
<th ROWSPAN=2>6<br>2.20-3.10</th>
<th ROWSPAN=2>7<br>3.10-4.00</th>
</tr>
<tr><th> Days</th>
</thead>
<tbody>
<tr>
<th>Monday</th>
<td>IT0302</td>
<td>IT0306</td>
<td>IT0304</td>
P a g e |13
<td>IT0306</td>
<td>IT0302</td>
<td COLSPAN=2><center>IT0324</td>
</tr>
<tr>
<th>TuesDay</th>
<td COLSPAN =4 bgcolor="cyan"><center>IT0320/IT0322</td>
<td>IT0310</td>
<td>IT0304</td>
<td>IT308</td>
</tr>
<tr>
<th>Wednesday</th>
<td COLSPAN =2 bgcolor="red"><center>ELETIVE - I</td>
<td>IT0306</td>
<td>IT310</td>
<td>IT304</td>
<td>IT308</td>
<td>COUN</td>
</tr>
<tr>
<th>Thursday</th>
<td>IT302</td>
<td>IT0304</td>
<td COLSPAN=2><center>PD0302</td>
<td COLSPAN=3 bgcolor="cyan"><center>IT0320/IT0322</td>
</tr>
<tr>
<th>Friday</th>
<td>IT0308</td>
<td>IT0306</td>
<td>IT0308</td>
<td>IT0302</td>
<td COLSPAN=2 bgcolor="red"><center>ELECTIVE - I</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
P a g e |14
Output:
File Name:image.html
<html>
<body>
<img src="img_tree.png" />
<br>
<p>
<img src="hackanm.gif" align="left" width="48" height="48" />
A paragraph with an image. The align attribute of the image is set to "left". The
image will float to the left of this text.
</p>
<p>
<img src="hackanm.gif" align="right" width="175" height="175" />
A paragraph with an image. The align attribute of the image is set to "right". The
image will float to the right of this text.
</p>
</body>
</html>
P a g e |15
Output:
File Name:video.html
<html>
<body><object width="560" height="340">
<param name="movie"
value="http://www.youtube.com/v/AGuniy5Ipc0&hl=en_US&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/AGuniy5Ipc0&hl=en_US&fs=1&"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="560" height="340"></embed>
</object>
<br>
</html>
</body>
P a g e |16
Output:
File Name :pagelink.html

<html>
<title> Simple Html Tags</title>
<body>
<marquee> Simple HTML Tags</marquee>
<a name="top"></a>
<center><FONT COLOR="#0000FF"><a href="#heading"> Heading
Tags</a></FONT></center>
<center><FONT COLOR="#0000FF"><a href="#text"> Text
Elements</a></FONT> </center>
<center><FONT COLOR="#0000FF"> <a href="#line">Line break
<center><FONT COLOR="#0000FF"><a href="#block"> BLOCK QUOTE
<center><FONT COLOR="#0000FF"><a href="#pre"> PRE
<center> <FONT COLOR="#0000FF"><a href="#logical"> Logical style</a>
</FONT></center>
<center> <FONT COLOR="#0000FF"><a href="#physical"> Physical style</a>
</FONT></center>
<center> <FONT COLOR="#0000FF"><a href="#List"> Listing Tags</a>
</FONT></center>
<a name="heading"></a>
<center><FONT COLOR="#0000FF"> Heading Tags</FONT></center>
P a g e |17
<a href="#top">Top </a>
<center><FONT COLOR="#0000FF"> Text Elements</FONT> </center>
<a name="text"></a>
<p>This is a praragrspg tag.
HTML 5
One of the most important technologies on this list doesn't fully exist yet HTML 5
but in 2008, key features started to trickle out.
HTML 5 will eventually replace HTML 4.01, the dominant programming language
currently used to build web pages. But the governing bodies in charge of the web are
still drafting the details, and nobody expects HTML 5 to fully emerge as the new
standard for at least a few more years.
But HTML 5 is no vaporware. Many of the changes to the way the web operates as
outlined in early versions of the new specification are already being implemented in
the latest browsers, and some of the web's more adventurous site builders are already
incorporating HTML 5's magic into their pages.
HTML 5 will be great step forward, standardizing things like dragging and dropping
elements on web pages, in-line editing of text and images on sites and new ways of
drawing animations. There's also support for audio and video playback without plugins, a boon for usability and a worrisome sign for Adobe's Flash, Microsoft's
Silverlight and Apple's QuickTime. The language will also give a boost to web apps,
as there are new controls for storing web data offline on your local machine.
Want Gmail on your desktop? HTML 5 makes it possible. Alas, the blink tag isn't
invited to the party
</p>
<a href="#top">top </a>
<hr>
<a name="line"></a>
<center><FONT COLOR="#0000FF"> Line break Tags</FONT></center>
This is a long piece of text consisting of three<BR>
sentences and shows you the functions of the<BR>
Line Break tag. This tag is used quite frequently<BR>
to add line breaks in the HTML code. It is also used<BR>
to add blank lines to a document.<BR>
<hr>
<a name="block"></a>
P a g e |18
<center><FONT COLOR="#0000FF"> BLOCK QUOTE Tags</FONT></center>
<p>This is some text before the quotation.</p>
<blockquote>This is a long blockquote created with the <blockquote>
tag.</blockquote>
</blockquote>
<hr>
<a name="pre"></a>
<center><FONT COLOR="#0000FF"> PRE Tags</FONT></center>
<pre>
IT 206 JAVA
IT306 WEB SYSTEMS
IT322 WEB SYSTEMS LAB
</PRE>
<HR>
<a name="logical"></a>
<center> <FONT COLOR="#0000FF"> Logical style </FONT></center>
This is <b>bold</b> This is bold<br>
This is <big>big font</big> This is big font<br>
This is <i>italic</i> This is italic<br>
Was <s>$50</s>; now $40 Was $50; now $40<br>
This is <small>small</small> This is small<br>
H<sub>2</sub>O H2O<br>
May 5<sup>th</sup> 2005 May 5th 2005<br>
<tt>fixed-width font</tt> fixed-width font<br>
This is <u>underlined</u> This is underlined<br>
<br>
<hr>
<a name="physical"></a>
<center> <FONT COLOR="#0000FF"> Physical Style </FONT></center>
This is used for a short <cite>quote</cite>. This is used for a short quote.<br>
<code>y = m * x + b</code> y = m * x + b<br>
<del>Deleted</del> text Deleted text<br>
<dfn>definition</dfn> text definition text<br>
This is <em> emphasized </em>. This is emphasized<br> .
<ins>inserted</ins> text inserted text<br>
<kbd>code</kbd> sample code sample<br>
P a g e |19
<samp>code</samp> sample code sample<br>
This is <strong>strong</strong>. This is strong.<br>
<var>program</var> variable program variable<br>
<br>
<hr>
<a name="list"></a>
<center><FONT COLOR="#0000FF"> Listing Tags</FONT></center>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
P a g e |20
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<hr>
<a href="#top">Top</a>
</html></body>
P a g e |21
Output:
P a g e |22
Sl No I c: Using Frames
Question : To create an html page with different types of frames such as floating
frame, navigation frame & mixed frame.
Procedure :
1. Create an html page named as mixedframe.html . Divide the page into two
columns of 25% & 75% size. In 25% display the image file created in exercise 1b and
divide the 75% into two rows. (50% & 50%). In the first 50% display the video file
created in exercise 1b, and other 50% the time table created in exercise 1b.
2. Create an html page named as navigationframe.html. Divide the page into two
columns of 25%, 75% size. In 25% size call the hyperlink file created in exercise 1b,
and make the page to be get displayed on the other column when the link is clicked.
3. Create an html page named as floatingframes.html. in this file include a
paragraph to explain floating frame, and in floating frame include the any html file
created in the above exercise.
extension.
File Name:ex3.html
<html>
<body>
<a href="frames.html" target="two">navigation frame</a><br>
<a href="floatingframe.html" target="two">floating frame</a><br>
<a href="Noframe.html" target="two">no frame</a><br>
<a href="mixedframe.html" target="two">mixed frame</a><br>
</body>
</html>
File Name: Frames.html

<html>
<frameset cols="30%,*" scrolling="no" noresize>
<frame name="one" src="ex3.html"></frame>
<frame name="two" ></frame>
</frameset>
</html>
P a g e |23
Output:
File Name:Navigationframes.html
<html>
<frameset cols="30%,*" scrolling="no" noresize>
<frame name="one" src="ex3.html"></frame>
<frame name="two" ></frame>
</frameset>
</html>
Output:
P a g e |24
File Name: floatingframe.html
<html>
<body>
<p> Explanation: There is a problem with the page you are trying to reach and it
cannot be displayed.
Try the following: * Refresh page: Search for the page again by clicking the Refresh
button. The timeout may have occurred due to Internet congestion.
* Check spelling: Check that you typed the Web page address correctly. The
address may have been mistyped.
* Access from a link: If there is a link to the page you are looking for, try accessing
the page from that link.
If you are still not able to view the requested page, try contacting you
<iframe src="htmlex1.html" height="50%" width="50%">
</iframe>
<embed src="video.avi" width="50%" height="50%" autostart="true">
</embed>
</body>
</html>
Output:
File Name: mixedframe.html

<html>
<frameset cols="25%,*">
<frame src="registration.html"></frame>
<frameset rows="30%,*">
<frame src="liht.jpg">
<frame src="htmlex1.html">
</frameset>
</frameset>
</html>
P a g e |25
Output:
P a g e |26
Sl No 1d: Registration Form with Table
Question : To create a registration form as mentioned below.

Procedure :
Create an html page named as registration.html
a) set background colors
b) use table for alignment
c) provide font colors & size
extension.
File Name:registrationform.html
<html>
<head>
<title>Registration Form Sample</title>
</head>
<body bgcolor="lightblue" text="red" style="font-size:15pt;font-family:Garamond"
><center>
<h2>ENTRY FORM</h2></center>
<form name=form1 >
<table name=tab cellspacing=30pt>
<tr><td align=left><h2>Enter your Name :</h2> </td><td align=right><input
type=text name=t1 size=18>
<tr><td align=left><h2>Enter your Age :</h2> </td><td align=right><input
type=text name=t2 maxlength=3 size=18>
<tr><td align=left><h2>Enter your Address :</h2> </td><td align=right><textarea
name=ta rows=5 cols=15></textarea>
<tr><td align=left><h2>Sex :</h2> </td><td align=left><input type=radio name=r1
value="female">Female<br>
<input type=radio name=r1 value=male>Male</td>
<tr><td align=left><h2>Languages Known :</h2> </td><td
align=left><center>(select more than one)</center>
<input type=checkbox name=c1 value=c>C<br>
<input type=checkbox name=c2 value=c++>C++<br>
<input type=checkbox name=c3 value=vb>VB<br>
<input type=checkbox name=c4 value=java>JAVA<br>
<input type=checkbox name=c5 value=asp>ASP<br>
<input type=checkbox name=c6 value=others>OTHERS<br></td>
<tr><td align=left><h2>Enter your Password :</h2> </td><td align=right><input
type=password name=t3 size=18>
</table><center>
<input type=reset value=" Reset " >
<input type=submit value=" Submit " >
</form>
P a g e |27
</body>
</html>
Output:
P a g e |28
CSS
P a g e |29
Sl No IIa: Inline, Internal and External Style sheet
Question : To create an html file by applying the different styles using inline,
external & internal style sheets.
Procedure :1. Create a external style sheet named as external_css.css and provide some styles
for h2, hr, p & a tags.
2. Create an html file named as Style_sheet.html
a) Include the external style sheet with necessary tag.
b) Include the internal style sheet for body tags & also use class name, so that
the style can be applied for all tags.
c) include a <p> tags with inline style sheet.
Solution :1. Create a css file in a notepad & save it with the .css extension.
2. In notepad type the necessary code & save with the file name mentioned with .html
extension.
File Name: Style_Sheet.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="external_style.css" />
<style type="text/css">
body
{
margin-left:200px;
background:#5d9ab2 url('img_tree.png') no-repeat top left;
}
.container
{
text-align:center;
}
.center_div
{
border:1px solid gray;
margin-left:auto;
margin-right:auto;
width:90%;
background-color:#d0f0f6;
text-align:left;
padding:8px;
}
</style>
</head>
<body>
<div class="container">
<div class="center_div">
<h1>Hello World!</h1>
P a g e |30
<p>This example contains some advanced CSS methods you may not have learned
yet. But, we will explain these methods in a later chapter in the tutorial.</p>
</div>
</div>
<p style="border-style:dotted solid dashed double">This is some text in a
paragraph.</p>
<p style="border-style:dotted solid dashed">This is some text in a paragraph.</p>
<p style="border-style:dotted solid">This is some text in a paragraph.</p>
<p style="border-style:dotted">This is some text in a paragraph.</p>
<h2>This is a header 1</h2>
<hr />
<p>You can see that the style
sheet formats the text</p>
<p><a href="cd_catalog.xml" target="_blank">This is a link</a></p>
</body>
</html>
File Name: external_style.css

<style>
h2 {color:maroon; font-size:20pt}
hr {color:navy}
p {font-size:11pt; margin-left: 15px}
a:link {color:green}
a:visited {color:yellow}
a:hover {color:black}
a:active {color:blue}
</style>
Output:
P a g e |31
JAVA SCRIPT
P a g e |32
Sl No IIIa: Use user defined function to get array of values and sort them
in ascending order
Question : To write a Javascript program to define a user defined function for sorting
the values in an array.
Procedure :
Create an html page named as Sorting.html
1. Within the script tag
a) define a function called as array_size() to get the size of array.
b) define a function called as get_number() to get numbers from user.
c) define a function called as Sorting() to sort the numbers.
2. within the body tag
Display the message to click the button & display a button to cll the
array_size() method.
array_size() method calls get_number() method which in turn calls the
sorting() method.
extension.
File Name: Sorting.html
<html>
<head>
<script type="text/javascript">
var num=0;
number=0;
var numarray=new Array();
function array_size()
{
num=prompt("Enter how many number to be sorted","000");
number=parseInt(num);
get_numbers();
}
function get_numbers()
{
if (number!=null && number!="")
{
for( i=0;i<number;i++)
{
n=prompt("Enter the number to be sorted","1");
numarray[i]=parseInt(n);
}
}
sorting()
}
P a g e |33
function sorting()
{
document.writeln("<h1>Sorted Array<h1>");
document.writeln(numarray.sort(sortNumber));
}
function sortNumber(a,b )
{
return a - b;
}
</script>
</head>
<body>
<h1> Click the button to get the Number sorted</h1>
<input type="button" onclick="array_size()" value="Get Array Size" />
</body>
</html>
Output:
P a g e |34
P a g e |35
Ex No:IIIb Demonstrate String and Math Objects predefined methods
Question : To create an html page to explain the use of various predefined functions
in a string and math object in java script.
Procedure :
Create an html page named as String_Math.html and within the script tag define
some string variables and use different string function to demonstrate the use of the
predefined functions. Do the same for the Math function.
extension.
File Name: String_Math.html
<html>
<head></head>
<body>
<script language="javascript">
var a="This is a Car is";
var b="Luxurious";
var c="Honda";
var d=[a,b,c];
for(i=0;i<=2;i++){
document.writeln("<br>"+(i+1)+" string is=="+d[i]);}
document.writeln("<br>length of 1st,2nd and 3rd strings
are=="+a.length+","+b.length+","+c.length+" respectively");
document.writeln("<br>character at 5th position of 1st string=="+a.charAt(5));
document.writeln("<br>last index of \'is\' in 1st string=="+a.lastIndexOf("is"));
document.writeln("<br>last index of \'is\' in 1st string after
offset=="+a.lastIndexOf("is",13));
document.writeln("<br>index of \'u\' in 2nd string=="+b.indexOf("u"));
document.writeln("<br>index of \'u\' in 2nd string after offset=="+b.indexOf("u",13));
document.writeln("<br>concatenation of 1st string and 2nd string=="+a.concat(b));
document.writeln("<br>concatenation of 1st string ,2nd string and 3rd
string=="+a.concat(b,c));
document.write("<br>"+a.split(" "));
document.write("<br>Upper case conversion of 1st string=="+a.toUpperCase());
document.write("<br>lower case conversion of 3rd string=="+c.toLowerCase());
document.write("<br>substring at 5th position of 1st string=="+a.substr(5));
document.write("<br>substring at 5th position till 6 offset of 1st
string=="+a.substr(5,6));
document.write("<br>substring at 5th position till 11th position of 1st
string=="+a.substring(6,11));
var str="123+1";
var x,y,i;
document.write("<br>string=="+str);
document.write("<br>evaluate function=="+eval(str)+"<br>");
eval("x=10;y=10;document.writeln(x*100);");
P a g e |36
document.write("<br>eval inside document=="+eval(x*10));
document.write("<br>ceil of 10.4 is=="+Math.ceil(10.4));
document.write("<br>ceil of10.8 is=="+Math.ceil(10.8));
document.write("<br>floor of 10.4 is=="+Math.floor(10.4));
document.write("<br>round 10.5 is=="+Math.round(10.5));
document.write("<br>maximum among 10,5,7 is=="+Math.max(10,5,7));
document.write("<br>minimum of 10,5,7 is=="+Math.min(10,5,7));
document.write("<br>power is=="+Math.pow(2,5));
document.write("<br>square root=="+Math.sqrt(16));
document.write("<br>absolute of -10=="+Math.abs(-10));
for(i=0;i<10;i++)
{document.write("<br>random"+i+"=="+Math.random());}
document.write("<br>"+parseInt(5.6));
document.write("<br>=="+isNaN(a));
</script>
</body>
</html>
Output:
P a g e |37
Ex No:III c Demonstrate Array Objects and Date Objects predefined
methods
Question: To create an html page to explain the use of various predefined functions
in a array & Date object in Javascript.
Procedure: Create an html page named as date.html & array.html. within the
script tag define the various date object and array object functions & display the
output.
extension.
File Name: date.html
<html>
<head>
<title> Date Functions</title>
document.write("<h2 style=\"color:red;\">Date Constructor</h2>");
var date1=new Date();
document.write("<br><B style=\"color:red;\">Date1 Constructor without
parameter==</b>"+date1.toGMTString());
parameter==</b>"+date1.toLocaleString());
parameter==</b>"+date1);
var date2=new Date(999);
document.write("<br><br><B style=\"color:red;\">Date2 Constructor with
millisecond as parameter==</b>"+date2);
var date22=new Date(1000000000);
document.write("<br><B style=\"color:red;\">Date22 Constructor with millisecond as
var date3=new Date("Mon 9 April 2001 14:15:30");
document.write("<br><br><B style=\"color:red;\">Date3 Constructor with string as
var date33=new Date("Mon 9 April 2001");
document.write("<br><B style=\"color:red;\">Date33 Constructor with string as
var date333=new Date("14:15:30");
document.write("<br><B style=\"color:red;\">Date333 Constructor with string as
var date4=new Date(2011, 3, 3,13, 12, 56);
P a g e |38
document.write("<br><br><B style=\"color:red;\">Date4 Constructor with string as
document.write("<h2 style=\"color:purple;\">Date Methods for Retrieve Date
values</h2>");
document.write("<br><b style=\"color:purple;\">getDate() Method in
date1==</b>"+date1.getDate());
document.write("<br><b style=\"color:purple;\">getDay() Method in
date1==</b>"+date1.getDay());
document.write("<br><b style=\"color:purple;\">getFullYear() Method in
date1==</b>"+date1.getFullYear());
document.write("<br><b style=\"color:purple;\">getHours() Method in
date3==</b>"+date3.getHours());
document.write("<br><b style=\"color:purple;\">getMilliseconds() Method in
date2==</b>"+date2.getMilliseconds());
document.write("<br><b style=\"color:purple;\">getMinutes() Method in
date3==</b>"+date3.getMinutes());
document.write("<br><b style=\"color:purple;\">getSeconds() Method in
date3==</b>"+date3.getSeconds());
document.write("<br><b style=\"color:purple;\">getMonth() Method in
date4==</b>"+date4.getMonth());
document.write("<br><b style=\"color:purple;\">getTime() Method in
date33==</b>"+date33.getTime());
document.write("<h2 style=\"color:purple;\">Date Methods for Setting
values</h2>");
date1.setDate(23);
document.write("<br><b style=\"color:purple;\">setDate() Method in
date1==</b>"+date1);
date1.setFullYear(2012)
document.write("<br><b style=\"color:purple;\">setFullYear() Method in
date1==</b>"+date1);
</script>
</head>
</html>
P a g e |39
Output:
File Name: Array.html

<html>
<head>
<title>Array program</title>
</head>
<body>
<script language"javascript">
var days=["Monday","Tuesday","Wednesday","Thursday","Friday"];
var day=new Array("Mon","tues","Wed","Thrus","fri");
var mixed=["monday",34,13.78,"tuesday"];
var mix=new Array("mon",1,12.1,"tues");
document.write("<br><h3>Printing/Accessing the values in array using
LOOP</h3>");
for(i=0;i<mixed.length;i++)
{
document.write("<br>Array element "+i+" == "+mixed[i]);
P a g e |40
}
document.write("<br><h3>Enhanced array </h3>");
mixed[4]="Wednesday";
mixed[10]="Friday";
{
document.write("<br>Array element "+i+" == "+mixed[i]);
}
document.write("<br><h3>Searching an Element in an array </h3>");
{
if(mixed[i]==34)
{
document.write("<br>Array element "+i+" == "+mixed[i]+" is found");
break;
}
}
document.write("<br><h3>Removing an Element from an array </h3>");
var remove=prompt("Enter an element that to be removed from array");
var temp=new Array(mixed.length-1);
var count=0;
{
if(mixed[i]!=remove)
{
temp[count]=mixed[i];
count++;
}
}
mixed=temp;
document.write("<br><h3>New Array element after removing</h3>");
{
document.write("<br>Element "+i+" == "+mixed[i]);
}
document.write("<br><h3>OBJECT BASED ARRAY FUNCTION</h3>");
document.write("<br><b>Concatenation</b>");
var newarray=days.concat(day,mix);
for(i=0;i<newarray.length;i++)
{
document.write("<br>Element "+i+" == "+newarray[i]);
}
document.write("<br><br><b>Joining with some string</b>");
document.write("<br>"+mix.join("-"));
P a g e |41
document.write("<br><br><b>POPing one element from array</b>");
document.write("<br>"+mix.pop());
document.write("<br>Array after pop is");
document.write("<br><br><b>PUSHing one or more element into an array</b>");
mix.push(10,"suba",234.8);
document.write("<br>Array after push is");
document.write("<br><br><b>Reversing an array</b>");
document.write("<br>Array after reverse is");
document.write("<br>"+mix.reverse());
document.write("<br><br><b>Shifting in an array</b>");
document.write("<br>Array after shifting one element is");
document.write("<br>"+mix.shift());
document.write("<br>New mix array is =="+mix.join("-"));
document.write("<br><br><b>UNShifting in an array</b>");
document.write("<br>Array after unshifting one element is");
day.unshift("suba","satheesh");
document.write("<br>New day array is =="+day.join("-"));
document.write("<br><b>Extracting a part of array</b>");
document.write("<br>"+mixed.slice(3));
document.write("<br>"+mixed.slice(4,11));
document.write("<br><b>Sorting an array</b>");
document.write("<br>"+days.sort());
var num=[1,4,2,3,11,33,3.4,99];
document.write("<br><b>Sorting an number array</b>");
//document.write("<br>"+num.sort(function(a,b){return a-b;}));
document.write("<br>"+num.sort(nr));
function nr(a,b)
{
return a-b;
}
document.write("<br><br><b>Splice-removing and adding element in an array at the
same time</b>");
day.splice(2,2,"Kaushik","Kaushika","Akshitha");
document.write("<br>New day array is =="+day.join("--"));
var str="123+5";
x=20;
P a g e |42
document.write("<br><br><b>Eval function :--</b></br>");
document.write("<br>Value of str =="+eval(str)+"<br>");
document.write("<br />" + eval(x+17));
eval("x=10;y=20;document.write(\"<br>x*y == \"+x*y)");
document.write("<br><h3>Global functions</h3>");
document.write("<ol> <li>escape()<li>eval()<li>isFinite()<li>isNaN()");
document.write("<li>Number()<li>parseFloat()<li>parseInt()<li>String()</ol>");
</script>
</body>
</html>
Output:
P a g e |43
Ex No:III d Exception Handling
Question: To create an html page to demonstrate exception handling in javascript.
Procedure:
Create an html page named as exception.html and do the following.
1. within the script tag write code to handle exception
a) define a method RunTest() to get any string values(str) from the user and cll
the method Areletters(str).
b) In Areletters(str) method check whether str contain only alphabets (a-z, AZ), if not throw exception.
c) Define a exception method Input Exception(str) to handle the exception
thrown bythe above method.
2. Within the body tag define a script tag to call Runtest() method defined.
extension.
File Name: exception.html
<html>
<head>
<script type="text/javascript" language="javascript">
function InputException(msg)
{
this.val = msg;
this.toString = function()
{ return "Input Exception in = "+this.val;}
}
function AreLetters(msg)
{
var input = msg;
var re = new RegExp("[^a-zA-Z]");
if(input.match(re))
{
oops = new InputException(input);
throw oops;
}
else{document.write("<br>"+input);}
}
function RunTest()
{
var input = prompt("type something","");
try{AreLetters(input);}
catch(e){document.write("<br>exception occured and caught"+e.toString());}
document.write("<h1>Exception Handling</h1>");
}
P a g e |44
</script>
</head>
<body>
<script language="javascript" type="text/javascript">
RunTest();
</script>
</body>
</html>
Output
P a g e |45
Ex No:III e Calendar Creation : Display all month
Question: To display the calendar using javascript code by getting the year from the
user.
Procedure:
Create an html page named as calendar.html
1. Define a method called day_title(days) to fill the days in the table.
2. Define a method called fill_table(month,len) to fill the table with date, according
to the month & number of dates (len).
3. Define a prompt() method to get the year from the user.
extension.
File Name: calendar.html
<html>
<head>
function day_title(day_name)
{
document.write("<td align=center width=35>"+day_name+"</td>")
}
function fill_table(month,month_len)
{
day=1
document.write("<table border=1 cellspacing=3 cellpadding=3%>")
document.write("<td colspan=7 align=center><b>"+month+" "+year+"</b><tr>")
day_title("Sun")
day_title("Mon")
day_title("Tue")
day_title("Wed")
day_title("Thu")
day_title("Fri")
day_title("Sat")
document.write("</tr><tr>");
for(var i=1; i<start_day;i++)
{
document.write("<td>")
}
for(var i=start_day; i<8;i++)
{
document.write("<td align=center>"+"<a
href=DAILYFORM.html>"+day+"</a>"+"</td>")
day++
}
P a g e |46
document.write("<tr>")
while(day<=month_len)
{
for(var i=1; i<=7 && day<=month_len;i++)
{
document.write("<td align=center>"+"<a href=index.html>"+day+"</a>"+"</td>")
day++
}
document.write("<tr>")
start_day=i;
}
document.write("</tr></table><br>")
}
year=prompt("enter 4 digit year ");
today=new Date("January 1, "+year)
start_day=today.getDay()+1
fill_table("January", 31)
if (year%4==0)
fill_table("February", 29)
else
fill_table("February", 28)
fill_table("March", 31)
fill_table("April", 30)
fill_table("May", 31)
fill_table("June", 30)
fill_table("July", 31)
fill_table("August", 31)
fill_table("September", 30)
fill_table("October", 31)
fill_table("November", 30)
fill_table("December", 31)
</script>
</head>
</html>
P a g e |47
Output:
P a g e |48
Ex No:III f Event Handling
1.Validating Registration Form
Question: To create a html registration form and to validate the form using javascript
code.
Procedure:
Create an html page named as validate_registration.html
1. Define a method name as reset() to be called when reset button is clicked and
manually set all values of fields to default.
2. Define a method name as check() to be called when check button is clicked.
a) here check for blank entry, name, age, email, phone no, radio button,
checkbox.
b) Once all the valuables are properly filled make the submit button to be
visible.
3. Define the various fields in form using table.
extension.
File Name: validate_registration.html
<html>
<script >
function reset1()
{
x=confirm("It will clear all the text entered")
if(x==true)
{
document.form1.t1.value=""
document.form1.ta.value=""
document.form1.r1[0].checked=false
document.form1.r1[1].checked=false
document.form1.c1.checked=false
document.form1.t1.focus()
}
}
function check()
{
if((document.form1.t1.value=="")||(!(isNaN(document.form1.t1.value))))
{
P a g e |49
alert("please enter the correct name")
}
else if((document.form1.t2.value=="")||(isNaN(document.form1.t2.value)))
{
alert("please enter the age correctly")
}
else if(document.form1.t2.value>40)
{
alert("Sorry you age is beyound the limit")
}
else if(document.form1.ta.value=="")
{
alert("please enter the address")
document.form1.ta.focus()
}
else
if((document.form1.r1[0].checked==false)&&(document.form1.r1[1].checked==false
))
{
alert("please select the radio button")
document.form1.r1[0].focus()
}
else
if((document.form1.c1.checked==false)&&(document.form1.c2.checked==false)&&(
document.form1.c3.checked==false)&&(document.form1.c4.checked==false)&&(do
cument.form1.c5.checked==false))
{
alert("please select the the languages known")
document.form1.c1.focus()
}
else if(document.form1.t3.value=="")
{
alert("please enter the password")
}
else
if((document.form1.t1.value!="")&&(document.form1.t2.value!="")&&(document.fo
rm1.t3.value!="")&&(document.form1.ta.value!="")&&((document.form1.r1[0].chec
ked!=false)||(document.form1.r1[0].checked!=false))&&((document.form1.c1.checke
d!=false)||(document.form1.c2.checked!=false)||(document.form1.c3.checked!=false)||
(document.form1.c4.checked!=false)||(document.form1.c5.checked!=false)))
{
x=confirm("you have entered the datas correctly,want to submit the form")
if(x)
P a g e |50
{
document.lay.visibility="show"
}
}
}
</script>
<body bgcolor="lightblue" text="red" style="font-size:15pt;fontfamily:Garamond" onload=document.form1.t1.focus()><center>
<h2>ENTRY FORM</h2></center>
<form name=form1 method=post >
<table name=tab cellspacing=30pt>
<tr><td align=left><h2>Enter your Name :</h2> </td><td align=right><input
type=text name=t1 size=18>
<tr><td align=left><h2>Enter your Age :</h2> </td><td align=right><input
type=text name=t2 maxlength=3 size=18>
<tr><td align=left><h2>Enter your Address :</h2> </td><td align=right><textarea
name=ta rows=5 cols=15></textarea>
<tr><td align=left><h2>Sex :</h2> </td><td align=left><input type=radio name=r1
value="female">Female<br>
<input type=radio name=r1 value=male>Male</td>
<tr><td align=left><h2>Languages Known :</h2> </td><td
align=left><center>(select more than one)</center>
<input type=checkbox name=c1 value=c>C<br>
<input type=checkbox name=c2 value=c++>C++<br>
<input type=checkbox name=c3 value=vb>VB<br>
<input type=checkbox name=c4 value=java>JAVA<br>
<input type=checkbox name=c5 value=asp>ASP<br>
<input type=checkbox name=c6 value=others>OTHERS<br></td>
<tr><td align=left><h2>Enter your Password :</h2> </td><td align=right><input
type=password name=t3 size=18>
</table><center>
<input type=button value=" reset " onClick=reset1()>
<input type=button value=" check " onClick=check()>
<h3>Before submitting the datas please click the check Button</h3>
<input type="submit" value="
submit
"></center>
</form>
</body>
</html>
P a g e |51
Output

Question: To create a html file. To open new window from the current window using
javascript.
Procedure:
Create a html page named as openwindow.html
Define a method called as openwin() which is to be called when a button is
clicked. Within this method specify the necessary code to open a new window
with some message as well as images.
extension.
P a g e |52
File Name: openwindow.html
<html>
<head>
function openwin()
{
msg=window.open("","Displaywindow","height=200,width=200,status=yes,to
olbar=yes,directories=no,menubar=yes,location=yes");
msg.document.write("<html><title>A new Window</title>");
msg.document.write("<img src='nathan.gif'><p><form><input type=button
value=close onclick=self.close()></form></html>");
}
</script>
</head>
<body bgcolor="blue">
<form>
<input type=button value=click name=b1 onclick=openwin()>
</form>
</body>
</html>
Output:

Question: To create an html page to change the background color for every click of a
button using javascript.
Procedure:
Create a html page named as changebackground_color.html
define a method named as random_color() which is to be called when you click on
the body. This method should generate random number, which is used to set the
background color.
extension.
P a g e |53
File Name:ChangeBackground_color.html
<html>
<head>
<script type="text/javascript">
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
document.body.style.background= color;
}
</script>
</head>
<body onclick="get_random_color()">
<b>Click me to change my color!</b>
</body>
</html>
Output
Question: To create an html page with 2 combo box populated with month & year, to
display the calendar for the selected month & year from combo box using javascript.
Procedure:
Create a html file named as Claendar_month.html
-- add two combo box one to display month & another for year and one button.
-- when the button is clicked display the calendar for the selected values.
P a g e |54
extension.
File Name: Calendar_month.html
<html>
<head>
<script language="javascript" type="text/javascript">
var i=0,j,cnt=0,c;
var days=["sun","mon","tue","wed","thu","fri","sat"];
var yr,k,mon;
var last=[31,28,31,30,31,30,31,31,30,31,30,31];
var
mn=["January","February","March","April","May","June","July","August","S
eptember","October","November","December"];
function my()
{
yr=document.form1.qual.value;
k=document.form1.qual1.value;
if(yr%4==0&&yr%100==0||yr%400){last[1]=29;}
document.write("<table width='50%' height='60%' border='9'
bgcolor='cyan'>");
document.write("<tr><td colspan='7'><center>"+ mn[k]+"
"+yr+"</center></td></tr>");
document.write("<tr>");
for(i=0;i<=6;i++)
{document.write("<td>"+days[i]+"</td>");}
document.write("</tr>");
var date2=new Date(yr,k,1);
var daz=date2.getDay();
cnt=0;
for(i=0;i<=daz-1;i++)
{document.write("<td></td>");
cnt=cnt+1;
}
for(j=1;j<=last[k];j++)
{
c=cnt%7;
if(c==0)
{
document.write("</tr><tr><td><a href=\"diary.html\"
target=\"new\">"+j+"</a></td>");cnt++;
}
else
{
P a g e |55
document.write("<td><a href=\"diary.html\"
target=\"new\">"+j+"</a></td>");
cnt++;
}
}
document.write("</tr></table>");
}
</script>
</head>
<body bgcolor="green">
<form name="form1">
<select name="qual">
<option>2011</option>
<option> </option>
</select>
<select name="qual1">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option> </option>
</select>
<input type="button" value="ok" onclick=my()></input></form>
</body>
</html>
Output
P a g e |56
OnMouseover event
Question: To create a html page to display a new image & text when the mouse
comes over the existing content in the page.
Procedure:
Create an html file named as mouse.html
define two methods mouseOn() & mouseOff() to be called when the mouse pointer
comes upon the text & out the text respectively.
extension.
File Name: mouse.html
<html>
<head>
function preload()
{
topon=new Image(100,50);
topon.src="E:\\IT0306-WebSystems and Technology\\Web LAB\\img_tree.png";
topoff=new Image(260,280);
topoff.src="E:\\IT0306-WebSystems and Technology\\Web LAB\\web.gif";
}
function myMouseOn(n)
P a g e |57
{
preload();
imageON=eval(n+"on.src");
document.images[n].src=imageON;
}
function myMouseOff(n)
{
imageOFF=eval(n+"off.src");
document.images[n].src=imageOFF;
}
</script>
</head>
<body >
<h1> Demo for mouse over</h1>
<a href="#" onMouseOut="myMouseOff('top')";
onMouseOver="myMouseOn('top')";>
<img src="E:\Web Technology\nathan.gif" alt="Show Next" name="top">
</a>
</body>
</html>
Output
P a g e |58
ASP
P a g e |59
Sl No:IV a Create a welcome Cookie (Hit for a page)
Question:- To create an ASP file to find the no of hits on the page and to have
rotating banner content.
Procedure:
1. Create a file named as textads.txt which contains different images and text to be
displayed for each hit of a page.
2. Create an ASP file named as cookie_image_text.asp to display the number of hit
and to call the file created above.
Solution :In notepad type the necessary code & save with the file name mentioned with .asp
extension
To execute ASP file activate IIS server as mentioned in execution step below and in
URL type localhost/Foldername/Filename.asp to run
File Name : textads.txt
%% #4
<h2>This is a great day!!</h2>
%% #3
<img src="/yourewelcometop[1].gif">
%% #1
<h1>This is displayed randomly!!</h1>
%% #1
<h6><center>This is displayed at center!!</center></h1>
%% #1
<img src="/mathew.gif">
%% #1
<img src="/sun.gif">
File Name : cookie_image_text.asp
<%
dim numvisits
response.cookies("NumVisits").Expires=date+365
numvisits=request.cookies("NumVisits")
if numvisits="" then
response.cookies("NumVisits")=1
response.write("Welcome! This is the first time you are visiting this Web page.")
else
response.cookies("NumVisits")=numvisits+1
response.write("You have visited this ")
response.write("Web page " & numvisits)
P a g e |60
if numvisits=1 then
response.write " time before!"
else
response.write " times before!"
end if
end if
%>
<%
set cr=server.createobject("MSWC.ContentRotator")
response.write(cr.ChooseContent("/textads.txt"))
%>
<html>
<body>
Output:
P a g e |61
Sl No : IV b List a table of content and navigate within the pages
Question: To create a table of content using ASP program & navigate within the
pages.
Procedure:
Create 3 .asp file named as Page1.asp, Page2.asp, Page3.asp with some content.
Create another .asp file named as tablecontent_navigation.asp file with some text
content and a link to the table of content and to next page.
Create a .txt file named as links.txt which contains all the four .asp file information.
extension
File Name:table_links.txt
table_content.asp
Table_content ASP File
cookie_image_text.asp
Cookie_Image_Text ASP File
File Name:links.txt
tablecontent_navigation.asp Page 1
page1.asp
Page 2
page2.asp
Page 4
page3.asp
Page 3
File Name:page1.asp
<html>
<body>
<h1>
This is page 2
</h1>
</body>
</html>

File Name:page2.asp
<html>
<body>
<h1>
This is page 3
</h1>
</body>
</html>
P a g e |62
File Name:page3.asp
<html>
<body>
<h1>
This is page 3
</h1>
</body>
</html>
File Name:nlcode.inc
<%
dim nl
Set nl=Server.CreateObject("MSWC.NextLink")
if (nl.GetListIndex("links.txt")>1) then
Response.Write("<a href='" & nl.GetPreviousURL("links.txt"))
Response.Write("'>Previous Page</a>")
end if
Response.Write("<a href='" & nl.GetNextURL("links.txt"))
Response.Write("'>Next Page</a>")
%>
File Name: tablecontent_navigation.asp
<html>
<body>
<h1>
This is page 1!
</h1>
<%
Set nl=Server.CreateObject("MSWC.NextLink")
If (nl.GetListIndex("/links.txt")>1) Then
%>
<a href="<%Response.Write(nl.GetPreviousURL("/links.txt"))%>">Previous
Page</a>
<%End If%>
<a href="<%Response.Write(nl.GetNextURL("/links.txt"))%>">Next Page</a>
<p>The example uses the Content Linking Component
to navigate between the pages in a text file.</p>
<p>
The example below builds a table of contents.
</p>
<%
P a g e |63
dim c
dim i
set nl=server.createobject("MSWC.Nextlink")
c = nl.GetListCount("\table_links.txt")
i=1
%>
<ul>
<%do while (i <= c) %>
<li><a href="<%=nl.GetNthURL("\table_links.txt", i)%>">
<%=nl.GetNthDescription("\table_links.txt", i)%></a>
<%
i = (i + 1)
loop
%>
</ul>
<p>
The text file contains a list of page urls
and link descriptions. It contains one line of text for each page. Note that the url and
description MUST be separated by the TAB character.
</p>
</body>
</html>
Output:
P a g e |64
P a g e |65
Sl No : IV c Demonstrate Request and Response object using HTML
Form
Question: To create ASP program to demonstrate request & response object method.
Procedure:
Create an ASP file named as request.asp
a) Create a simple form to get the first name & last name and a button submit.
When the button is clicked the values in the text box are printed by response object by
Request.QueryString
b) Create a hyperlink with some values defined in the tag & display the same
using request & response object.
extension
File Name : request.asp
<%@language="javascript"%>
<html>
<body>
<a href="request.asp?color=green">Example</a>
<%var str=Request.QueryString;
Response.Write(str);%>
<form action="request.asp" method="get">
First name: <input type="text" name="fname"><br />
Last name: <input type="text" name="lname"><br />
<input type="submit" value="Submit">
</form>
<%
Response.Write(Request.QueryString)
%>
</body></html>
P a g e |66
Output
P a g e |67
Sl No : IV d Database Connection to display all the values in the table
Question: To display all the content in the database using ASP program.
Procedure:
Create a database with the name Student.mdb as shown below
File Name: Student.mdb
Create ASP program named as db.asp and write the necessary database connection
code & display all the content in the database using html <table>.
extension
File Name : db.asp
<html>
<body>
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("Student.mdb"))
set rs = Server.CreateObject("ADODB.recordset")
rs.Open "SELECT * FROM Stud ORDER BY Student_Name", conn
%>
<table border="1" width="100%" bgcolor="#fff5ee">
<tr>
<%for each x in rs.Fields
response.write("<th align='left' bgcolor='#b0c4de'>" & x.name & "</th>")
next%>
P a g e |68
</tr>
<%do until rs.EOF%>
<tr>
<%for each x in rs.Fields%>
<td><%Response.Write(x.value)%></td>
<%next
rs.MoveNext%>
</tr>
<%loop
rs.close
conn.close
%>
</table>
</body>
</html>
Output
P a g e |69
Execution of ASP code:
Activate IIS server by following step
Start control panel programs(uninstall)Programs and Features Turn window
features on and off
Will get the following screen. Select IIS in it and others inside that IIS and click ok
To check whether IIS is activated just type the following in the browser url, will
display the following page as shown below
localhost/
P a g e |70
Once the IIS is properly installed a folder named inetpub will be created in the C:/
Drive.
Within this folder a subfolder called wwwroot will be there. This is the folder where
we want to save all our asp files. (OR u can save file in any folder and create a virtual
directory linked to this folder from service as shown below)
P a g e |71
JAVA SERVLETS
P a g e |72
Ex No: V a Simple Servlet
Question: To create a simple servlet program to display the date (using Tomcat
server).
Procedure:
Create a java file named as Simple_Servlet.java
import necessary packages.
inside the doGet() method create a Date object and display it using html tags.
Solution :See execution steps for servlet given below
File Name: Simple_Servlet.java
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class Simple_Servlet extends HttpServlet {
public void doPost(HttpServletRequest request,HttpServletResponse response)
throws IOException, ServletException{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
Date d=new Date();
out.println("<html><title>Date Display</title>" +
"<body><h1> Date = "+ d.toString()+"</h1></body></html>");
}
}
Output:
P a g e |73
Ex No: V b Servlet with HTML form
Question: To create a servlet program to retrieve the values entered in the html file
(Using NetBeans IDE).
Procedure:
Create a html file named as Servlet_Html.html. Add 3 text box to get First,
Middle& Last name and a submit button. When submit button is clicked it should
redirect to the servlet program to print the values.
Create a java file named Servlet_HTML.java and use necessary methods to
retrieve the data from HTML file and display them.
Solutions:
See execution steps for servlet given below
File Name: Servlet_Html.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body><b><font color="blue">Please Enter your First Name, Last Name and
Middle Name:</font></b><br><br>
<form name="frm" method="post"
action="http://localhost:8080/Simple_Servlet/Servlet_HTML ">
<table border = "0">
<tr align="left" valign="top">
<td>First Name:</td>
<td><input type="text" name ="firstname" /></td>
</tr>
<td>Middle Name:</td>
<td><input type="text" name ="middlename" /></td>
</tr>
<td>Last Name:</td>
<td><input type="text" name ="lastname" /></td>
</tr>
<td></td>
<td><input type="submit" name="submit"/></td>
</tr>
</table>
</form>
</body>
</html>
P a g e |74
File Name: Servlet_HTML.java
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class Servlet_HTML extends HttpServlet {
public void doPost(HttpServletRequest request,HttpServletResponse response)
throws IOException, ServletException{
String firstName = request.getParameter("firstname");
String middleName = request.getParameter("middlename");
String lastName = request.getParameter("lastname");
out.println("<b><font color='blue'>Your FirstName is : </font></b>"
+ "<b>"+ firstName +"</b>" + "<br>");
out.println("<b><font color='blue'>Your Middle Name is : </font></b>"
+ "<b>"+ middleName +"</b>" + "<br>");
out.println("<b><font color='blue'>Your Last Name is : </font></b>"
+ "<b>"+ lastName +"</b>");
}
}
Output:
P a g e |75
P a g e |76
Sl No: V c Cookie creation and retrieval from HTML page
Question: To display the cookie values that are entered in the html page using servlet
program. (using NetBean IDE).
Procedure:
Create a html file named as getCookie.html with 3 textbox to enter any data & a
submit button. When the submit button is clicked the values in the textbox should be
set as a cookie value in AddCookieServlet.jav file.
In AddCookieServlet.Java file write the necessary code to get the cookie values
from .html file and store them in the cookie predefined class & display the values that
are retrieved from html.
Create another servlet program named as getCookie.java to get the values added
to the cookie predefined class & display all the values.
Solution:
See execution steps for servlet given below
File Name: getcookie.html
<html>
<body>
<form name="Form1" method="post"
action="http://localhost:13105/SERVLETS/AddCookieServlet">
<table>
<tr>
<td><b>Employee</b></td>
<td><input type=textbox name="Name" size="25" value=""></td>
</tr>
<tr>
<td><b>Phone</b></td>
<td><input type=textbox name="Phone" size="25" value=""></td>
</tr>
</table>
<B>Enter a value for MyCookie:</B>
<input type=textbox name="data" size=25 value="">
<input type=submit value="Submit">
</form> </body></html>
Output
P a g e |77
File Name: AddCookieServlet.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AddCookieServlet extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
try {
} finally {
out.close();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse
response)
// processRequest(request, response);
// Get parameter from HTTP request.
String data1 = request.getParameter("Name");
String data2= request.getParameter("Phone");
String data = request.getParameter("data");
// Create cookie.
//Cookie cookie = new Cookie("MyCookie", data);
Cookie cookie[]=new Cookie[10];
cookie[0] = new Cookie("Name", data1);
cookie[1] =new Cookie("Phone", data2);
cookie[2] = new Cookie("MyCookie", data);
// Add cookie to HTTP response.
// response.addCookie(cookie);
response.addCookie(cookie[0]);
// Write output to browser.
PrintWriter pw = response.getWriter();
pw.println("<B>MyCookie has been set to");
pw.println(data);
pw.println(data1);
pw.println(data2);
P a g e |78
pw.close();
}
public String getServletInfo() {
return "Short description";
}
}
Output
File Name: getcookie.java

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class GetCookiesServlet extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse
response)
response.setContentType("text/html;charset=UTF-8");
try {
} finally {
out.close();
}
}
P a g e |79
protected void doGet(HttpServletRequest request, HttpServletResponse response)
// Get cookies from header of HTTP request.
Cookie[] cookies = request.getCookies();
// Display these cookies.
PrintWriter pw = response.getWriter();
pw.println("<B>");
for(int i = 0; i < cookies.length; i++) {
String name = cookies[i].getName();
String value = cookies[i].getValue();
pw.println("name = " + name + "; value = " + value);
pw.println("<br>");
}
pw.close();
}
public String getServletInfo() {
return "Short description";
}// </editor-fold>
}
Output
P a g e |80
Execution Step for servlet
From dos command and Tomcat Server
------------------------------------To Compile the servlet program
--------------------------------------D:\SUBA 2008 - 2009\Advance java\servlets>javac -classpath "c:\Program
Files\Apache Software Foundation\Tomcat 5.5\common\lib\servlet-api.jar"
HelloWorldExample.java
.class file is generated
now open
C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps
create a new folder in it( example Servlet)
Within this folder create another folder called as WEB-INF
within this folder create another folder called as classes and one web.xml file
containing the following code in it
-------------------------------------------------------------------<?xml version = "1.0" encoding = "ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<servlet>
<servlet-name>Hello Servlet</servlet-name>
<servlet-class>HelloWorldExample</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Hello Servlet</servlet-name>
<url-pattern>/servlet1</url-pattern>
</servlet-mapping>
</web-app>
-------------------------------------------------------------------in classes folder copy and paste the .class file of servlet
-------------------------------------------------------------------now start ur tomcat
to check this
in Explorer type http://localhost:8080
is installed and running properly means tomcat will run.
P a g e |81
to execute
------------------http://localhost:8080/Servlet(Foldername)/servlet1(Url-pattern)
Using Net Beans 6.5
-----------------------Open the Net Beans IDE File New Project Select Java web from categories and
Web application from projects
Click next and give the project name as required and the path where to save your
servlet program, click next and select the server, but by default Glass fish server will
be selected leave as such and click finish
Now in the project right click and click New servlet from the list
Type the necessary code right click compile and run the code
P a g e |82
XML
P a g e |83
Sl No VI a Create any catalog
Question: To create a CD catalog using XML file.
Procedure:
Create an Xml file named as cd_catalog.xml with the following details.
<catalog>
<cd>
<title></title>
<artist></artist>
<country></country>
<company></company>
<price></price>
<year></year>
</cd>
<!-Add 3 to 4 <cd> data.-->
</catalog>
Solution :In notepad type the necessary code & save with the file name mentioned with .xml
extension.
File Name: cd_catalog.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
<cd>
<title>Greatest Hits</title>
<artist>Dolly Parton</artist>
<company>RCA</company>
<price>9.90</price>
<year>1982</year>
P a g e |84
</cd>
<cd>
<title>Still got the blues</title>
<artist>Gary Moore</artist>
<company>Virgin records</company>
<year>1990</year>
</cd>
</catalog>
Output
P a g e |85
Sl No: VI b XML with CSS and XSL Style sheet
Question: To create external style sheet and using the style sheet in xml file.
Procedure:
Create a style sheet named as cd_catalog.css and provide necessary style for the
tags used in cd_catalog.xml file
Create an xml file named as cd_catalog_css.xml and include the .css file created
above.
extension.
File Name: cd_catalog.css
CATALOG
{
background-color: #ffffff;
width: 100%;
}
CD
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
TITLE
{
color: #FF0000;
font-size: 20pt;
}
ARTIST
{
color: #0000FF;
font-size: 20pt;
}
COUNTRY,PRICE,YEAR,COMPANY
{
display: block;
color: #000000;
margin-left: 20pt;
}
File Name: cd_ctalog.xml

<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
P a g e |86
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
</CATALOG>
Output:
P a g e |87
XML with XSL Style sheet
Question: To create a xsl style sheet to display the data in the xml using html table.
Procedure:
Create a xsl style sheet named as cd.xsl and write necessary code to access the data
from cd_catalog.xml file and display the datas using html table tag.
create an xml file named as cd.xml & include the .xsl file created above.
extension.
File Name: cd.xsl

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
File Name: cd.xml

<?xml-stylesheet type="text/xsl" href="cd.xsl"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
P a g e |88
<company>Columbia</company>
<year>1985</year>
</cd>
<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
<cd>
<title>Greatest Hits</title>
<artist>Dolly Parton</artist>
<company>RCA</company>
<price>9.90</price>
<year>1982</year>
</cd>
<cd>
<title>Still got the blues</title>
<artist>Gary Moore</artist>
<company>Virgin records</company>
<year>1990</year>
</cd>
</catalog>
Output
P a g e |89
PHP
P a g e |90
Sl No: VII a File operation
Question: To create a php program to demonstrate the different file handling
methods.
Procedure:
Create a php file named as files.php and define the different predefined functions and
demonstrate the use of the predefined functions.
Solution:
Use PHP Designer 7 or WAMP server for ex3cuting the Php Program. Save the
program with .php extension
File Name: files.php

<?php
echo "<h3>Using file() method</h3>";
$lines = file('typecaste.txt');
foreach ($lines as $line_num => $line)
{
print "<font color=red>Line #{$line_num}</font> : " . $line . "<br />\n";
}
$ar1=file("typecaste.txt");
for($x=0;$x<count($ar1);$x++)
echo "<br>".$ar1[$x];
echo "<br>";
echo "<h3>Using fopen(), fclose() and fread(){ return value as a single string}
method</h3>";
$YourFile = "typecaste.txt";
$handle = fopen($YourFile, 'r');
$Data = fread($handle, 512); //maximum 8192 bytes can be read
fclose($handle);
print $Data;
echo"<br>";
echo "<h3>Using file_get_contents() similar to fread() method</h3>";
$file = file_get_contents ('typecaste.txt');
echo $file;
echo "<h3>Using fopen(), feof(), fgets(){read line by line default it read 1024 byte of
line value}, fgetss() method</h3>";
$YourFile = "sample.txt";
$handle = fopen($YourFile, 'r');
while (!feof($handle))
P a g e |91
{
$Data = fgets($handle, 256); //$Data = fgets($handle, 256); //Skip the HTML tags
and dipsly the content alone
print $Data;
print "<p>";
}
fclose($handle);
echo "<h3>Using copy()method return 1 if copied else 0</h3>";
echo copy("typecaste.txt","target.txt");
echo "<br><b>file exists-----</b>". file_exists("typecaste.txt");
echo "<br><b>file exists-----</b>". file_exists("typecasteee.txt");
?>
Output
P a g e |92
Sl No: VII b Regular Expression, Array, Math, String, Date functions
Question: To create a php program to demonstrate the different predefined function
in array, Math, Data & Regular Expression.
Procedure:
Create php file named as
Regularexpression.php for demonstrating the method for handling various
strings with regular expression
Array.php for demonstrating the methods for handling the array values
Math_function.php to demonstrate the predefined in math objects.
Date_time.php to demonstrate the predefined function in date subject
Solution :Use PHP Designer 7 or WAMP server for ex3cuting the Php Program. Save the
program with .php extension
File Name: regularexpression.php
<?php
// solution for validate email syntax is using filter_var.
if (filter_var('suba.satheesh@gmail.com', FILTER_VALIDATE_EMAIL)) {
echo "<br>Your email is ok.";
} else {
echo "<br>Wrong email address format.";
}
//Validate username, consist of alpha-numeric (a-z, A-Z, 0-9), underscores, and has
minimum 5 character and maximum 20 character.
//You could change the minimum character and maximum character to any number
you like.
$username = "user_name12";
if (preg_match('/^[a-z\d_]{5,20}$/i', $username)) {
echo "<br>Your username is ok.";
} else {
echo "<br>Wrong username format.";
}
//Highlight a word in the content
$text = "Sample sentence from Web, regex has become popular in web programming.
Now we learn regex.
According to wikipedia, Regular expressions (abbreviated as regex or regexp, with
plural forms regexes, regexps, or regexen)
are written in a formal language that can be interpreted by a regular expression
processor";
$text = preg_replace("/\b(regex)\b/i", '<span style="background:blue">\1</span>',
$text);
echo "<br>".$text;
$test="Cookies::multipack::Choco::brown::SRM";
$parts=preg_split("/::/",$test);
echo "<ul>";
while(list($key,$val)=each($parts))
P a g e |93
{
echo "<li>".$val."</li>";
}
echo"<ul>";
?>
Output
File Name: array.php

<?php
$days=array("mon",1,2,"tues","thurs");
$days[6]="friday";
$days[4]="wednes";
$day[]=$days[6].$days[4];
$day[2]=123;
foreach($days as $values)
echo $values."<br>";
foreach($day as $values)
$ages = array("Peter"=>32, "Quagmire"=>30, "Joe"=>34);
foreach($ages as $values)
echo "Peter is " . $ages['Peter'] . " years old.";
$sam[0]=$ages["Peter"].$ages["Joe"];
echo "<br>sam[0] value is =====".$sam[0];
P a g e |94
$array=array("Pen1"=>array
("name"=>"Fido","color"=>"brown"),"Pen2"=>array
("name"=>"Joe","color"=>"white"));
echo "<br>Multi array value=====". $array["Pen1"]["name"];
$array2=array(array(1,2,3),array("a","b","c"));
echo "<br>Multi basic array ====". $array2[1][2];
$names=array();
$message="Hello ";
$prefix1="Mr.";
$prefix2="Mrs.";
$names[0]="John";
$names[1]="George";
$names[2]="James";
$names[3]="Anna";
$names[4]="Robert";
$names[5]="John";
$names[6]="James";
$names[7]="George";
$names[8]="Maria";
$names[9]="Peter";
$names[10]="James";
print('<br>sort function sorts array<br>');
sort($names);
$asize=sizeof($names);
echo "<br>Size of array name===".$asize;
echo "<br>";
for($i=0; $i<$asize; $i++)
{
if(($names[$i]=="Anna")||($names[$i]=="Maria"))
{
print($message.$prefix2.$names[$i]."<br>");
}
else
{
print($message.$prefix1.$names[$i]."<br>");
}
}
print('<br>');
echo "function array_unique removes duplicate values<br>";
$array=array();
$array=array_unique($names);
foreach($array as $key => $value)
{
echo $key . "-". $value . "<br>";
}
print('<br>');
rsort($array);
print("rsort function sorts array in reverse order<br>");
P a g e |95
{
}
print('<br>array_pop($array) functions returns the last
element<br>');
$lastelement=array_pop($array);
print('<br>Last element='.$lastelement.'<br>');
print('<br>Array after caling array_pop($array): The last element
removed<br><br>');
{
}
array_push($array, "Chris", "Colin");
print('<br>Array after calling array_push($array, "Chris",
"Colin") and print_r: Chris and Colin are added to the end of
array<br><br>');
{
}
$names=array();
$message="Hello ";
$prefix1="Mr.";
$prefix2="Mrs.";
$names[0]="John";
$names[1]="George";
$names[2]="James";
$names[3]="Anna";
$names[4]="Robert";
$names[5]="John";
$names[6]="James";
$names[7]="George";
$names[8]="Maria";
$names[9]="Peter";
$names[10]="James";
print('<b>Is an array or not</b>');
$n="suba";
print('<br>Check whether the given variable is an array or not -'.is_array($n));
print('<br>Check whether the given variable is an array or not -'.is_array($names));
print('<br><b>Find values belong to an array or not ---</b> ');
$nam=$names[3];
echo in_array($nam,$names);
$assarray2=array("Aarthi"=>21,"Joe"=>15, "Annie"=>18);
echo "<br><b> Sorting Associative array</b><br>";
asort($assarray2);
foreach($assarray2 as $key => $value)
P a g e |96
{
}
echo "<h3>Print_r method </h3>";
$a = array ('a' => 'apple', 'b' => 'banana', 'c' => array ('x', 'y', 'z'));
print_r ($a);
$a1=array(0=>"Cat",1=>"Dog",2=>"Horse");
$a2=array(3=>"Horse",2=>"Dog",5=>"Fish",6=>"Cat");
echo"<h3> Array intersect - compare two array key value pair</h3>";
print_r("<br>");
print_r(array_intersect($a1,$a2));
//echo "<br>".array_intersect($a1,$a2);
echo"<h3> Array keys - function returns an array containing the
keys</h3>";
$a=array("a"=>"Horse","b"=>"Cat","c"=>"Dog");
print_r(array_keys($a));
print_r("<br>");
//echo array_keys($a);
print_r(array_keys($a,"Dog"));
print_r("<br>");
echo"<h3> Array merge - function merges one ore more arrays into one
array</h3>";
print_r(array_merge($a1,$a2));
print ("<h3> Reverse printing</h3>");
$a=array("a"=>"Dog","b"=>"Cat","c"=>"Horse");
print_r(array_reverse($a));
echo"<br>";
foreach($a as $key => $value)
{
}
print ("<h3> Shift method</h3>");
echo array_shift($a)."<br>";
print_r ($a);
$a1=array(0=>"Dog",1=>"Cat",2=>"Horse");
echo "<br>".array_shift($a1)."<br>";
print_r ($a1);
echo "<br>";
print ("<h3> Slice Method</h3>");
$a=array(0=>"Dog",1=>"Cat",2=>"Horse",3=>"Bird");
print_r(array_slice($a,1,2));
echo "<br>";
$a=array("a"=>"Dog","b"=>"Cat","c"=>"Horse","d"=>"Bird");
print_r(array_slice($a,1,2));
print ("<h3> UnShift method</h3>");
echo "<br>";
array_unshift($a,"Horse");
print_r($a);
print ("<h3> count method</h3>");
echo "<br>";
P a g e |97
$result = count($a);
echo $result;
?>
Output
P a g e |98
P a g e |99
P a g e |100
File Name: math_function.php

<?php
echo "<br>Absolute value====".abs(-2.5);
echo "<br>Absolute value====".abs(2.5);
echo "<br>acos value====".acos(.75);
echo "<br>asin value====".asin(1);
echo "<br>atan value====".atan(2);
echo "<br>cos value====".cos(1);
echo "<br>sin value====".sin(1);
echo "<br>tan value====".tan(2);
echo "<br>ceil value====".ceil(1.75);
echo "<br>ceil value====".ceil(1.25);
P a g e |101
echo "<br>floor value====".floor(1.75);
echo "<br>floor value====".floor(1.25);
echo "<br>exp value====".exp(2);
echo "<br>log value====".log(2.75);
echo "<br>log10 value====".log10(2.75);
echo "<br>pi value====".pi();
echo "<br>pow value====".pow(2,3);
echo "<br>round value====".round(12.55);
echo "<br>sqrt value====".sqrt(81);
echo "<br>max value====".max(12,34,23,67,33,56);
echo "<br>min value====".min(12,34,23,67,33,56);
echo "<br>Random number=====".rand(0,10);
echo "<br>Random number=====".rand();
?>
Output
P a g e |102
File Name: date time.php
<?php
echo("<h3>Result with date():</h3><br />");
echo("<br><b>".date("l") . "</b><br />");
echo("<br><b>".date("l dS \of F Y h:i:s A") . "</b><br />");
echo("<br><b>".date("l dS F Y") . "</b><br />");
echo("<h3>Oct 3,1975 was on a ".date("l", mktime(0,0,0,10,3,1975))."</h3><br />");
echo("<h3>Result with gmdate():</h3><br />");

echo("<br><b>".gmdate("l") . "</b><br />");
echo("<br><b>".gmdate("l dS \of F Y h:i:s A") . "</b><br />");
echo("<h3>Oct 3,1975 was on a </h3><b>".gmdate("l",
mktime(0,0,0,10,3,1975))."</b><br />");
echo("<br><b>TIME".time() . "</b><br />");
?>
Output
P a g e |103
References
Stephen Wynkoop, Running a perfect website, QUE, 1999
Chris Bates, Web Programming - Building Intranet applications,

Wiley Publications, 2004
Deitel, Deitel & Nieto, Internet and World Wide Web - How to
Program, Pearson Education Asia, 2000
Eric Ladd, Jim O' Donnel, Using HTML 4, XML and Java,
Prentice Hall of India- QUE, 1999
www.W3Schools.org
P a g e |104

IT0322 Web Systems LAB Manual

Uploaded by

Document Information

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

IT0322 Web Systems LAB Manual

Uploaded by

Copyright:

Available Formats

DEPARTMENT OF INFORMATION TECHNOLOGY

FACULTY OF ENGINEERING & TECHNOLOGY

SUBJECT: WEB TECHNOLOGY LAB

SRM University, SRM Nagar, Kattankulathur-603203

WEB TECHNOLOGY LAB

Inline Style , Internal Style ,and External Style Sheets

content each time when the user hit the page

Create a any catalog

Demonstrate String and Math Objects predefined methods

Demonstrate Array Objects and Date Objects predefined methods

Calendar Creation : Display all month

Validation of registration form

Open a Window from the current window

Change color of background at each click of button or refresh of a page

Create a welcome Cookie (Hit for a page)

List a table of content and navigate within the pages

Demonstrate Request and Response object using HTML Form

Database Connection to display all the values in the table

Servlets with HTML form

Cookie creation and retrieval using servlet

Create a any catalog

Display the catalog created using CSS and XSL

Regular Expression, Array, Math, Date functions

File Name :pagelink.html

File Name: Frames.html

File Name: mixedframe.html

Question : To create a registration form as mentioned below.

File Name: external_style.css

File Name: Array.html

Open a Window from the current window

Change color of background at each click of button or refresh of a page

File Name: getcookie.java

File Name: cd_ctalog.xml

File Name: cd.xsl

File Name: cd.xml

File Name: files.php

File Name: array.php

File Name: math_function.php

echo("<h3>Result with gmdate():</h3><br />");

Stephen Wynkoop, Running a perfect website, QUE, 1999

Chris Bates, Web Programming - Building Intranet applications,

You might also like