DEPARTMENT OF INFORMATION TECHNOLOGY FACULTY OF ENGINEERING & TECHNOLOGY LAB MANUAL FOR

rouleaupromiseSecurity

Nov 5, 2013 (3 years and 11 months ago)

111 views


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

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 2 

SYLLABUS








IT 0322 WEB TECHNOLOGY LAB 0 0 4 2
Prerequisite
Nil







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













IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 3 
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 Object’s predefined methods
III.
Demonstrate Array Objects and Date Object’s 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
content each time when the user hit the page
II.
List a table of content and navigate within the pages
III.
Demonstrate Request and Response object using HTML Form
IV.
Database Connection to display all the values in the table

5.
Java Servlets
I.
Simple Servlets
II.
Servlets with HTML form
III.
Cookie creation and retrieval using servlet

6.
XML
I.
Create a any catalog
II.
Display the catalog created using CSS or XSL

7.
PHP
I.
File operation
II.
Regular Expression, Array, Math, String, Date functions


IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 4 
TABLE OF CONTENT
Sl No  Topic  Page No
HTML 
I a  Simple  HTML  7 
I b  Hyper Links  12 
I c  Using  Frames  23 
I d  Registration Form with Table  27 
CSS 
II a  Inline Style , Internal Style ,and external Style Sheets  30 
JAVA SCRIPT 
III a 
Use user defined function to get array of values and sort them in ascending order
33 
III b 
Demonstrate String and Math Object’s predefined methods
36 
III c 
Demonstrate Array Objects and Date Object’s predefined methods
38 
III d 
Exception Handling
44 
III e 
Calendar Creation : Display all month
46 
III f 
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
 
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 
Java Servlets 
V a Simple Servlets
73 
V b Servlets with HTML form
74 
V c 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 


IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 5 















QUESTIONS
&
SOLUTIONS

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 6 













HTML

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 7 
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>
<h2> Heading H1</h2>
<h3> Heading H1</h3>
<h4> Heading H1</h4>
<h5> Heading H1</h5>
<h6> Heading H1</h6>
<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.

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 8 

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 plug-
ins, 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>

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 9 
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>

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 10 
</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>

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 11 

<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<hr>
Output:





IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 12 
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.

Solution :-
In notepad type the necessary code & save with the file name mentioned with .html
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:





IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 13 
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 IT-
‘C’&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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>

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 14 
<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>

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 15 


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>









IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 16 
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>







IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 17 

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
Tags</a></FONT></center>

<center><FONT COLOR="#0000FF"><a href="#block
"> BLOCK QUOTE
Tags</a></FONT></center>

<center><FONT COLOR="#0000FF"><a href="#pre
"> PRE
Tags</a></FONT></center>

<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>
IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 18 
<h1> Heading H1</h1>
<h2> Heading H1</h2>
<h3> Heading H1</h3>
<h4> Heading H1</h4>
<h5> Heading H1</h5>
<h6> Heading H1</h6>
<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 plug-
ins, 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>
<a href="#top
">top </a>
<hr>
<a name="block"></a>

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 19 
<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>
<a href="#top
">top </a>
<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>
<a href="#top
">top </a>
<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>
<a href="#top
">top </a>
<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>

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 20 
<samp>code</samp> sample code sample<br>
This is <strong>strong</strong>. This is strong.<br>
<var>program</var> variable program variable<br>
<br>
<a href="#top
">top </a>
<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>

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 21 
<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>









IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 22 

Output:







IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 23 
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.

Solution :-
In notepad type the necessary code & save with the file name mentioned with .html
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>









IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 24 

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:





IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 25 
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>

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 26 

Output:





IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 27 
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

Solution :-
In notepad type the necessary code & save with the file name mentioned with .html
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>

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 28 


</body>
</html>

Output:



IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 29 
























CSS
























IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 30 
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>

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 31 
<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:


IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 32 
















JAVA SCRIPT








IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 33 

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.

Solution :-
In notepad type the necessary code & save with the file name mentioned with .html
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()
}

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 34 
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:





IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 35 


IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 36 
Ex No:IIIb Demonstrate String and Math Object’s 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.

Solution :-
In notepad type the necessary code & save with the file name mentioned with .html
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);");

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 37 
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:




IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 38 
Ex No:III c Demonstrate Array Objects and Date Object’s 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.

Solution :-
In notepad type the necessary code & save with the file name mentioned with .html
extension.

File Name: date.html

<html>
<head>
<title> Date Functions</title>
<script language="javascript">
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());
document.write("<br><B style=\"color:red;\">Date1 Constructor without
parameter==</b>"+date1.toLocaleString());
document.write("<br><B style=\"color:red;\">Date1 Constructor without
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
parameter==</b>"+date22);

var date3=new Date("Mon 9 April 2001 14:15:30");
document.write("<br><br><B style=\"color:red;\">Date3 Constructor with string as
parameter==</b>"+date3);

var date33=new Date("Mon 9 April 2001");
document.write("<br><B style=\"color:red;\">Date33 Constructor with string as
parameter==</b>"+date33);

var date333=new Date("14:15:30");
document.write("<br><B style=\"color:red;\">Date333 Constructor with string as
parameter==</b>"+date333);

var date4=new Date(2011, 3, 3,13, 12, 56);

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 39 
document.write("<br><br><B style=\"color:red;\">Date4 Constructor with string as
parameter==</b>"+date4);

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;\">getMilliseconds() Method in
date22==</b>"+date22.getMilliseconds());
document.write("<br><b style=\"color:purple;\">getMilliseconds() Method in
date3==</b>"+date3.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("<br><b style=\"color:purple;\">getTime() Method in
date333==</b>"+date333.getTime());
document.write("<br><b style=\"color:purple;\">getTime() Method in
date4==</b>"+date4.getTime());
document.write("<br><b style=\"color:purple;\">getTime() Method in
date1==</b>"+date1.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>





IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 40 

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]);
IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 41 
}

document.write("<br><h3>Enhanced array </h3>");
mixed[4]="Wednesday";
mixed[10]="Friday";
for(i=0;i<mixed.length;i++)
{
document.write("<br>Array element "+i+" == "+mixed[i]);
}

document.write("<br><h3>Searching an Element in an array </h3>");
for(i=0;i<mixed.length;i++)
{
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;
for(i=0;i<mixed.length;i++)
{
if(mixed[i]!=remove)
{
temp[count]=mixed[i];
count++;
}
}
mixed=temp;
document.write("<br><h3>New Array element after removing</h3>");
for(i=0;i<mixed.length;i++)
{
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("-"));

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 42 

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>"+mix.join("-"));

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>"+mix.join("-"));

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;

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 43 
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:




IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 44 
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, A-
Z), 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.

Solution :-
In notepad type the necessary code & save with the file name mentioned with .html
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>");
}

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 45 


</script>
</head>
<body>
<script language="javascript" type="text/javascript">
RunTest();
</script>
</body>
</html>

Output

























IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 46 
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.

Solution :-
In notepad type the necessary code & save with the file name mentioned with .html
extension.

File Name: calendar.html

<html>
<head>
<script language="javascript">

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++
}

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 47 
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>











IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 48 

Output:


IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 49 
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.

Solution :-
In notepad type the necessary code & save with the file name mentioned with .html
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.t2.value=""
document.form1.ta.value=""
document.form1.t3.value=""
document.form1.r1[0].checked=false
document.form1.r1[1].checked=false
document.form1.c1.checked=false
document.form1.c2.checked=false
document.form1.c3.checked=false
document.form1.c4.checked=false
document.form1.c5.checked=false
document.form1.c6.checked=false
document.form1.t1.focus()
}
}
function check()
{
if((document.form1.t1.value=="")||(!(isNaN(document.form1.t1.value))))
{

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 50 
alert("please enter the correct name")
document.form1.t1.value=""
document.form1.t1.focus()
}
else if((document.form1.t2.value=="")||(isNaN(document.form1.t2.value)))
{
alert("please enter the age correctly")
document.form1.t2.value=""
document.form1.t2.focus()
}
else if(document.form1.t2.value>40)
{
alert("Sorry you age is beyound the limit")
document.form1.t2.value=""
document.form1.t2.focus()
}
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")
document.form1.t3.focus()
}
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)

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 51 
{
document.lay.visibility="show"
}
}
}
</script>
<body bgcolor="lightblue" text="red" style="font-size:15pt;font-
family: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>













IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 52 


Output


Open a Window from the current window

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.
Solution :-
In notepad type the necessary code & save with the file name mentioned with .html
extension.




IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 53 
File Name: openwindow.html

<html>
<head>
<script language="javascript">
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:


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

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.

Solution :-
In notepad type the necessary code & save with the file name mentioned with .html
extension.

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 54 

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



Display calendar for the month and year selected from combo box

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.

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 55 

Solution :-
In notepad type the necessary code & save with the file name mentioned with .html
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
{

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 56 
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>2012</option>
<option>2013</option>
<option>2014</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


IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 57 



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.

Solution :-
In notepad type the necessary code & save with the file name mentioned with .html
extension.

File Name: mouse.html

<html>
<head>
<script language="javascript">
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)

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 58 
{
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



IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 59 









ASP

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 60 
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)

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 61 
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:





IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 62 
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.

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: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>
<!-- #include file="nlcode.inc"-->

File Name:page2.asp

<html>
<body>
<h1>
This is page 3
</h1>
</body>
</html>
<!-- #include file="nlcode.inc"-->

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 63 

File Name:page3.asp

<html>
<body>
<h1>
This is page 3
</h1>
</body>
</html>
<!-- #include file="nlcode.inc"-->

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>

<%

IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 64 
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:



IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 65 




IT0322 –Web Technology LAB 

Department of Information Technology, SRM University  P a g e  | 66 
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.

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 : 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 />