Scribd
Upload
29 views41 pages

WT LAB1 New

The document is a lab manual for web technologies, detailing various HTML, JavaScript, XML, and JSP exercises. It includes tasks for creating lists, hyperlinks, tables, static web pages, forms, and servlets. Each exercise is accompanied by example code and expected outputs.

Uploaded by

z7t21daunu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
29 views41 pages

WT LAB1 New

The document is a lab manual for web technologies, detailing various HTML, JavaScript, XML, and JSP exercises. It includes tasks for creating lists, hyperlinks, tables, static web pages, forms, and servlets. Each exercise is accompanied by example code and expected outputs.

Uploaded by

z7t21daunu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

WEB TECHNOLOGIES LAB MANUAL

Lab Exercises
1. Write a HTML program for the demonstration of Lists.
a. Unordered List
b. Ordered List
c. Definition List
d. Nested List
2. Write a HTML program for demonstrating Hyperlinks.
a. Navigation from one page to another.
b. Navigation within the page.
3. Write a HTML program for time-table using tables.

4. Write a HTML program to develop a static Home Page using frames.

5. Write a HTML program to develop a static Registration Form.


6. Write a HTML program to develop a static Login Page.

7. Write a HTML program to develop a static Web Page for Catalog.


8. Write a HTML program to develop a static Web Page for Shopping Cart.

9. Write HTML for demonstration of cascading stylesheets.


a. Embedded stylesheets.
b. External stylesheets.
c. Inline styles.
10. Write a javascript program to validate USER LOGIN page.
11. Write a javascript program for validating REGISTRATION FORM

12. Write a program for implementing XML document for CUSTOMER DETAILS.

2
WEB TECHNOLOGIES LAB MANUAL

17. Write a program to display contents of XML file in a table using Extensible Style
Sheets.

18. Write a simple servlet that displays a message.

19. Write a servlet that reads parameters from employee login page.

20. Write a servlet for creating a cookie and retrieving it.

21. Write a servlet for session tracking.

22. Write a JSP that reads parameters from user login page.

23. Write a JSP that reads a value, creates a cookie and retrieves it.

24. Write a JSP for session tracking.

25.

3
WEB TECHNOLOGIES LAB MANUAL

1. Write a HTML program for the demonstration of Lists.


e. Unordered List
f. Ordered List
g. Definition List
h. Nested List Unordered List:
<html>
<head>
<title> Creating Unorder List </title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”> Creating Unorder List</h1>
<h1 align=”center”>List of Colleges in Kurnool</h1>
<ul type=”square”>
<li>GPREC</li>
<li>RGMCET</li>
<li>GPCET</li>
</ul>
</body>
</html>
Output:

4
WEB TECHNOLOGIES LAB MANUAL

Ordered List:
<html>
<head>
<title> Creating Order List </title> </head>
<body bgcolor=”pink”>
<h1 align=”center”> Creating Order List</h1>
<h1 align=”center”>List of branches in RGMCET</h1>
<ol type=”A”>
<li>CSE</li>
<li>IT</li>
<li>ECE</li>
<li>EEE</li>
<li>CIVIL</li>
<li>ME</li>
</ol>
</body>
</html>
Output:

5
WEB TECHNOLOGIES LAB MANUAL

Definition List:
<html>
<head>
<title>Creating Definition List</title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”>Definition List</h1>
<dl>
<dt>CSE<dd>Computer Science & Engineering
<dt>ECE<dd>Electronics & Communication Engineering
<dt>IT<dd>Information Technology
<dt>EEE<dd>Electrical & Electronics Engineering
<dt>CE<dd>Civil Engineering
</dl>
</body>
</html>
Output:

6
WEB TECHNOLOGIES LAB MANUAL

Nested List:
<html>
<head>
<title>Nested Lists</title> </head>
<body bgcolor=”pink”>
<h1 align=”center”>List of Colleges in Kurnool</h1>
<ol>
<li>Kurnool</li>
<ul>
<li>GPREC</li>
<li>BITS</li>
<li>GPCET</li>
</ul>
<li>Nandyala</li>
<ul>

7
WEB TECHNOLOGIES LAB MANUAL

<li>RGMCET</li>
<li>SREC</li>
</ul>
</ol>
</body>
</html>
Output:

2. Write a HTML program for demonstrating Hyperlinks.


c. Navigation from one page to another.
d. Navigation within the page.
Navigation from one page to another:
<html>
<head>
<title>Setting Hyperlink colors</title>
</head>
<body bgcolor="pink" link=”green” vlink=”blue” alink=”red”>
<center><h1>Setting Hyperlink colors</h1>
<a href=”login.html”>Click here</a>to goto login page
</body>
</html>
Output:

8
WEB TECHNOLOGIES LAB MANUAL

Navigation within the page:


<html>
<head>
<title>Nested Lists</title>
</head>
<body bgcolor="pink">
<center><h1>Linking to a section in a page</h1>
<a name=”top”>This is the top of the page</a>
Click here to goto the <a target=”#bottom”>bottom</a>of the page
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br>
<a name=”bottom”>This is the bottom of the page</a> Click here
to goto <a target=”#top”>top</a>of the page
</center>
</body>
</html>
Output:

9
WEB TECHNOLOGIES LAB MANUAL

10
WEB TECHNOLOGIES LAB MANUAL

3. Write a HTML program for time-table using tables.


<html>
<head>
<title>Timetable</title>
</head>
<body>
<h1 align="center"><font color="Salmon">Timetable of III
CSE</font></h1><br>
<table align="center" border="2" cellspacing="0" cellpadding="15">
<tr align="center" valign=="middle">
<th>DAY</th>
<th>I</th>
<th>II</th>
<th
rowspan="7"><b>T<br>E<br>A<br><br>B<br>R<br>E<br>A<br>K</b></th>
<th>III</th>
<th>IV</th>
<th
rowspan="7"><b>L<br>U<br>N<br>C<br>H<br><br>B<br>R<br>E<br>A<br>K</
b></th>
<th>V</th>
<th>VI</th>
<th>VII</th>
</tr>
<tr align="center">
<th>MON</th>
<td>IS</td>
<td>WT</td>
<td>SEM</td>

11
WEB TECHNOLOGIES LAB MANUAL

<td>OOAD</td>
<td>SCI</td>
<td>C#</td>
<td>COMP</td>
</tr>
<tr align="center">
<th>TUE</th>
<td>AP</td>
<td>AP Lab</td>
<td colspan="2">AP Lab</td>
<td>WT</td>
<td>IS</td>
<td>OOAD</td>
</tr>
<tr align="center">
<th>WED</th>
<td>WT</td>
<td>IS</td>
<td>C#</td>
<td>SCI</td>
<td colspan="3">MOOC'S</td>
</tr>
<tr align="center">
<th>THU</th>
<td>IS</td>
<td>LIB</td>
<td>OOAD</td>
<td>WT</td>
<td colspan="3">WT Lab</td>

12
WEB TECHNOLOGIES LAB MANUAL

</tr>
<tr align="center">
<th>FRI</th>
<td>AP</td>
<td>AP</td>
<td>C#</td>
<td>OOAD</td>
<td colspan="3">C# Lab</td>
</tr>
<tr align="center">
<th>SAT</th>
<td>OOAD</td>
<td>SCI</td>
<td>WT</td>
<td>SEM</td>
<td>AP</td>
<td>AP</td>
<td>C#</td>
</tr>
</table>
</body>
</html> Output:

13
WEB TECHNOLOGIES LAB MANUAL

14
WEB TECHNOLOGIES LAB MANUAL

4. Write a HTML program to develop a static Home Page using frames.


<html>
<head>
<title>RGM ENGINEERING COLLEGE</title>
</head>
<frameset cols="30%,70%">
<frameset rows="25%,25%,50%">
<frame src="e:\cse546\logo.html">
<frame src="e:\cse546\home1.html">
<frame src="e:\cse546\courses.html">
</frameset>
<frameset rows="25%,25%,50%">
<frame src="e:\cse546\name.html">
<frame src="e:\cse546\table.html">
<frame src="e:\cse546\default.html" name="display">
</frameset>
</frameset>
</html>
Output:

15
WEB TECHNOLOGIES LAB MANUAL

5. Write a HTML program to develop a static Registration Form.


<html>
<head>
<title>Registration</title>
</head>
<body bgcolor=lightblue>
<h1 align=center><u>Registration Form</u></h1>
<br><br><br>
<div>
<strong>
First Name &nbsp <input type=text value=" " name="txt1"><br><br>
Last Name &nbsp <input type=text value=" " name="txt2"><br><br>
UserName &nbsp <input type=text value="" name="txt3"><br><br>
Password &nbsp <input type=password value="" name="pwd1"><br>
Confirm Password &nbsp <input type=password value="" name="pwd2"><br><br>
Address &nbsp <textarea rows=3 cols=60></textarea><br><br>
Date of Birth &nbsp dd<select name="sel1"> <option>--
</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>

16
WEB TECHNOLOGIES LAB MANUAL

mm<select name="sel2">
<option>--</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select> yyyy<select
name="sel3">
<option>----</option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>

17
WEB TECHNOLOGIES LAB MANUAL

<option>1999</option> <option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
</select><br><br>
Sex &nbsp
<input name="rb1" type="radio" value="radiobutton">Male
<input name="rb1" type="radio" value="radiobutton">Female
<br><br>
Martial Status &nbsp
<input name="rb2" type="radio" value="radiobutton">Single
<input name="rb2" type="radio" value="radiobutton">Married
<br><br>
Mobile Number &nbsp <input type=text name="txt4"><br><br>
Branch &nbsp

18
WEB TECHNOLOGIES LAB MANUAL

<input name="rb3" type="radio" value="radiobutton">CSE <input name="rb3"


type="radio" value="radiobutton">IT
<input name="rb3" type="radio" value="radiobutton">ECE
<input name="rb3" type="radio" value="radiobutton">EEE
<input name="rb3" type="radio" value="radiobutton">MECH
<br><br>
Languages Known &nbsp
<input name="cb1" type="checkbox" value="checkbox">English
<input name="cb1" type="checkbox" value="checkbox">Telugu
<input name="cb1" type="checkbox" value="checkbox">Hindi
<input name="cb1" type="checkbox" value="checkbox">Kannada
<input name="cb1" type="checkbox" value="checkbox">Tamil
<br><br>
<center>
<input type=submit value="SUBMIT" name="btn1">&nbsp
<input type=reset value="CANCEL" name="btn1">
</center>
</strong>
</body>
</html>

Output:

19
WEB TECHNOLOGIES LAB MANUAL

20
WEB TECHNOLOGIES LAB MANUAL

6. Write a HTML program to develop a static Login Page.


<html>
<head>
<title>login</title>
</head>
<body>
<br><br><br><br>
<h1 align=center><u>LOGIN</u></h1>
<br><br><br>
<h4>
<center> username&nbsp&nbsp<input type=text><br>
password&nbsp&nbsp<input type=password><br><br><br>
</h4>
<input type=submit value=submit>
&nbsp&nbsp
<input type=reset value=cancel>
</center>
</body>
</html>
Output:

21
WEB TECHNOLOGIES LAB MANUAL

22
WEB TECHNOLOGIES LAB MANUAL

7. Write a HTML program to develop a static Web Page for Catalog.


<html>
<head>
<title>catalouge</title>
</head>
<body>
<center>
<table border=2 cellpadding=10 cellspacing=10>
<tr>
<td> <img src="D:\cse546\image.jpg"height=100 width=100></td>
<td>Book:XML Bible<br>
Author:Wingston<br>
Publication:wiely</td>
<td>$40.5</td>
<td><input type="button"value="add to cart"></td>
</tr>
<tr>
<td> <img src="D:\cse546\image1.jpg"height=100 width=100></td>
<td>Book:A1<br>
Author:S.Rusell<br>
Publication:Princeton hall</td>
<td>$63</td>
<td><input type="button"value="add to cart"></td>
</tr>
<tr>
<td> <img src="D:\cse546\image2.jpg"height=100 width=100></td>
<td>Book:JAVA 2<br>
Author:Watson<br>
Publication:BPB</td>

23
WEB TECHNOLOGIES LAB MANUAL

<td>$35.5</td>
<td><input type="button"value="add to cart"></td>
</tr>
<tr>
<td> <img src="D:\cse546\image3.jpg"height=100 width=100></td>
<td>Book:Html in 24 hrs<br>
Author:Sam Peter<br>
Publication:SAM</td>
<td>$50</td>
<td><input type="button"value="add to cart"></td>
</tr>
</table>
</center>
</body>
</html>
Output:

24
WEB TECHNOLOGIES LAB MANUAL

8. Write a HTML program to develop a static Web Page for Shopping Cart.
<html>
<head>
<title>Cart</title>
</head>
<body>
<center>
<table border=0 width=50 height=10 cellpadding=10 cellspacing=10>
<tr>
<th>Book name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr>
<td>JAVA 2</td>
<td>$35.5</td>
<td>2</td>
<td>$70</td>
</tr>
<tr>
<td>XML Bible</td>
<td>$40.5</td>
<td>1</td>
<td>$40.5</td>
</tr>
</table>

25
WEB TECHNOLOGIES LAB MANUAL

<h3>total amount-130.5</h3>
</center>
</body>
</html> Output:

26
WEB TECHNOLOGIES LAB MANUAL

9. Write HTML for demonstration of cascading stylesheets.


d. Embedded stylesheets.
e. External stylesheets.
f. Inline styles.
Embedded stylesheets:
<html>
<head>
<title>Embedded Style sheets</title>
<style type=”text/css”>
body{backgroun
d-color: pink;}
h1 {color:orange;
text-align: center;
}p
{
font-family: "Times New
Roman";
font-size: 20px;
}
</style>
</head>
<body>
<h1>Embedded Style Sheets</h1><br>
<p>This is a paragraph
</body>
</html>
Output:

27
WEB TECHNOLOGIES LAB MANUAL

External Stylesheets: extern.css:


body {background-color: #d0e4fe;}
h1 { color: orange; text-align:
center;
} p { font-family: "Times New Roman"; font-size:
20px;
} extern.html:
<html>
<head>
<title>External Style Sheets</title>
<link rel=”stylesheet” type=”text/css” href=”extern.css”>
</head>
<body>
<h1>External Style Sheets</h1><br>
<p>This is a paragraph
</body>
</html>
Output:

28
WEB TECHNOLOGIES LAB MANUAL

Inline styles:
<html>
<head>
<title>HTML Tables</table>
</head>
<body bgcolor=‟pink‟>
<center>
<h1>Creating HTML Tables</h1><br>
<table border=”2” cellpadding=”4” cellspacing=”4”>
<tr>
<th colspan=”2” style=”background-color:red”>
WebSites</th>
</tr> <tr>
<th
style=”backgroundcolor:blue”
>MailSites</th> <th

29
WEB TECHNOLOGIES LAB MANUAL

style=”backgroundcolor:green”
>JobSites</th> </tr>

<tr>
<td style=”background-color:grey”>Gmail</td>
<td style=”background-color:aqua”>Naukri</td>
</tr> <tr>
<td
style=”backgroundcolor:yello
w”>Yahoo</td> <td
style=”backgroundcolor:purpl
e”>JobStreet</td>
</tr>
</table>
</center>
</body>
</html> Output:

30
WEB TECHNOLOGIES LAB MANUAL

10. Write a javascript program to validate USER LOGIN page.


<html>
<head>
<title>Login Validation</title>
<script language="javascript">
function formValidator()
{
var username=document.getElementById('uname');
var password=document.getElementById('pwd');
if(isEmpty(username)&&isEmpty(password))
{
alert("enter something");
document.form1.uname.focus();
}
if(!isEmpty(username)&&isEmpty(password)&&isAlphabet(username))
{
alert("Please enter password");
document.form1.pwd.focus();
}
if(!isEmpty(username)&&!isEmpty(password)&&isAlphabet(username))
{
return true;
}
else
{
if(!isEmpty(username)&&!isEmpty(password)&&!isAlphabet(username))
{

31
WEB TECHNOLOGIES LAB MANUAL

alert("Please Enter only alphabets for username");


document.form1.uname.focus();
}
}
return false;
}
function isEmpty(elem)
{
if(elem.value.length==0)
{
return true;
}
return false;
}
function isAlphabet(elem)
{
var alphaExp=/^[a-z A-Z]+$/;
if(elem.value.match(alphaExp))
{
return true;
}
}
</script>
</head>
<body bgColor=megastar>
<h1 align=center>USER LOGIN VALIDATION</h1>
<br><br>
<form name="form1" onSubmit="return formValidator()">
<center>

32
WEB TECHNOLOGIES LAB MANUAL

<table border=0 colsSpacing=4>


<tr>
<td>Username:</td>
<td><input type=text value="" name="uname"></td> </tr>
<tr>
<td>Password:</td>
<td><input type=password value="" name="pwd"></td>
</tr>
<tr>
<td><input type=submit value="SUBMIT" name="btn1"></td>
<td><input type=reset value="CANCEL" name="btn2"></td>
</tr>
</table>
</center>
</form>
</body>
</html>
Output:

33
WEB TECHNOLOGIES LAB MANUAL

11. Write a javascript program for validating REGISTRATION FORM.


<html>
<head>
<title>JavaScript sample registration from validation </title>
<script type='text/javascript'> function
formValidation()
{ var uid = document.form1.userid; var
passid = document.form1.passid; var
uname = document.form1.username; var
uadd = document.form1.address; var
uzip = document.form1.zip; var uemail
= document.form1.email; var umsex =
document.form1.msex; var ufsex =
document.form1.fsex;
if(userid_validation(uid,5,12))
{ if(userid_validation(passid,7,12))
{ if(allLetter(uname))
{
if(alphanumeric(uadd))
{ if(allnumeric(uzip))
{ if(ValidateEmail(uemail))
{ if(validsex(umsex,ufsex))
{
}
}
}
}
}

34
WEB TECHNOLOGIES LAB MANUAL

} } return
false;
} function userid_validation(uid,mx,my)
{ var uid_len = uid.value.length; if (uid_len == 0
|| uid_len >= my || uid_len < mx)
{ alert("It should not be empty / length be between "+mx+" to
"+my); uid.focus(); return false; } return true; } function
allLetter(uname)
{
var letters = /^[A-Za-z]+$/; if(uname.value.match(letters))
{ return true; } else { alert('Please input
alphabet characters only'); uname.focus();
return false;

} } function
alphanumeric(uadd)
{ var letters = /^[0-9a-zA-
Z]+$/;
if(uadd.value.match(letters))
{ return true; } else { alert('Please input
alphanumeric characters only'); uadd.focus();
return false;
} } function
allnumeric(uzip)
{ var numbers = /^[0-9]+$/;
if(uzip.value.match(numbers))
{ return true; } else { alert('Please input
numeric characters only'); uzip.focus();
return true;
}

35
WEB TECHNOLOGIES LAB MANUAL

}
function ValidateEmail(uemail)
{ var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-
]?\w+)*(\.\w{2,3})+$/; if(uemail.value.match(mailformat))
{ return true; } else { alert("You have entered an
invalid email address!"); uemail.focus(); return
false;
}
} function validsex(umsex,ufsex)
{ x=0;

if(umsex.checked)
{ x++;
} if(ufsex.checked)
{ x++; } if(x==0) {
alert('Select Male/Female');
umsex.focus(); return false;
}
else {
return true;

}
}
</script>
</head>
<body>
<form name='form1' onsubmit='return formValidation()' >
<table width="500" cellpadding="3" style="border-collapse: collapse;">
<tr>

36
WEB TECHNOLOGIES LAB MANUAL

<td>User id </td>
<td><input type="text" name="userid" size="12" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="passid" size="12" /></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" name="username" size="50" /></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address" size="50" /></td>
</tr>
<tr>
<td>ZIP Code </td>
<td><input type="text" name="zip" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" size="50" /></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="msex" value="Male" /> Male
<input type="radio" name="fsex" value="Female" /> Female</td>
</tr>
<tr>

37
WEB TECHNOLOGIES LAB MANUAL

<td>Language preference</td>
<td><input type="checkbox" name="en" value="en" checked />English
<input type="checkbox" name="nonen" value="noen" />Non English</td>
</tr>
<tr>
<td>Write about yourself<br>
(optional)</td>
<td><textarea name="desc" rows="4" cols="40"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="submit" value="Submit" /></td>
<td>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

Output:

38
WEB TECHNOLOGIES LAB MANUAL

39
WEB TECHNOLOGIES LAB MANUAL

12. Write a program for implementing XML document for CUSTOMER DETAILS.
<?xml version="1.0"?>
<DOCUMENT>
<CUSTOMER>
<NAME>
<FIRST_NAME>Hari</FIRST_NAME>
<LAST_NAME>Krishna</LAST_NAME>
</NAME>
<DATE>10/09/2008</DATE>
<ORDERS>
<ITEM>
<PRODUCT>Mobile Set</PRODUCT>
<NUMBER>1</NUMBER>
<PRICE>Rs.14000/-</PRICE>
</ITEM>
<ITEM>
<PRODUCT>Mp3 Player</PRODUCT>
<NUMBER>1</NUMBER>
<PRICE>Rs.1300/-</PRICE>
</ITEM>
</ORDERS>
</CUSTOMER>
<CUSTOMER>
<NAME>
<FIRST_NAME>Anil</FIRST_NAME>
<LAST_NAME>Kumar</LAST_NAME>
</NAME>
<DATE>10/09/2008</DATE>

40
WEB TECHNOLOGIES LAB MANUAL

<ORDERS>
<ITEM>
<PRODUCT>Monitor</PRODUCT>
<NUMBER>1</NUMBER>
<PRICE>Rs.14000/-</PRICE>
</ITEM>
<ITEM>
<PRODUCT>Washing Machine</PRODUCT>
<NUMBER>1</NUMBER>
<PRICE>Rs.17000/-</PRICE>
</ITEM>
</ORDERS>
</CUSTOMER>
</DOCUMENT>
Output:

41
WEB TECHNOLOGIES LAB MANUAL

42

You might also like