V Sem - B.
Sc(Computer Science)
Web Interface Designing Technologies Lab Manual
Programes
[Link] a HTML document to create a <html>
webpage which shows the important <head>
countries of Asia. Make country India <title> India </title>
as hypertext. And write </head>
corresponding HTML document to <body>
show the States of India, make State <h1> India States</h1>
Andhra Pradesh as hypertext and <font size=6>
show the districts of Andhra Pradesh <b>States in India :- </b> [Link]
when the user clicks on it in a new Nicobar,
webpage. <a href="[Link]"> [Link] Pradesh
</a>, [Link] Pradesh, [Link],
[Link] [Link], [Link], [Link],
[Link] & Nagar Haveli, [Link] &
<html> Diu, [Link], [Link], [Link],
<head> [Link] Pradesh, [Link] &
<title> Asian Countries </title> Kashmir, [Link], [Link],
</head> [Link], [Link], [Link]
<body> Pradesh, [Link], [Link],
<h1> Asian Countries </h1> [Link], [Link],
<font size=6> [Link], [Link],
[Link], [Link], [Link],
[Link],[Link],[Link], [Link], [Link], [Link]
[Link], [Link], [Link] Nadu, [Link], [Link] Pradesh,
Darussalam,[Link],[Link], [Link], [Link] Bengal
[Link], [Link] Timor, [Link] Strip,
[Link] Kong,<a href="[Link]" > </body>
[Link]</a>,[Link],[Link],17.I </html>
raq,[Link],[Link],[Link],
[Link] [Link]
[Link],[Link], [Link], <html>
[Link], [Link], [Link], <head>
[Link], [Link], [Link], <title> Andhrapradesh </title>
[Link] Korea, [Link], </head>
[Link], [Link] Territory, <body>
[Link], [Link], [Link], <h1> AndhraPradesh Districts</h1>
[Link] Arabia, [Link], <font size=6>
[Link] Korea, [Link] Lanka, [Link], <b>Districts in Andhra Pradesh :-
[Link], [Link], [Link], </b>[Link], [Link],
[Link], [Link], [Link], [Link], [Link] Godavari,
[Link] Arab Emirates, [Link], [Link], [Link],
[Link], [Link], [Link] [Link], [Link], [Link],
</body> [Link], [Link],
</html> [Link], [Link] Potti Sreeramulu
Nellore, [Link], [Link],
[Link] [Link], [Link],
[Link], [Link],
[Link], [Link] Godavari
Basireddy Memorial Degree College , Nandikotkur 1
</B>
</body> </body>
</html>
</html>
2. Create a simple HTML
Output
program to illustrate three
types of lists.
HTML List Tags
<html> Ordered list
<head> 1. HTML
<title>HTML List Tags</title> 2. XML
</head> 3. ASP
<body>
Unordered list
<B>
- Java Script
<font color=Red size=6>Ordered - DHTML
list</font> - CSS
<ol type=1>
<li>HTML Definition list
<li>XML HTML
Hypertext Markup Language
<li>ASP
DHTML
</ol> Dynamic Hypertext Markup
<font color=Green Language
size=6>Unordered list</font> XML
<ul type=disk> Extensible Markup Language
<li>Java Script
<li>DHTML
<li>CSS 3. Create nested table to store
</ul> your curriculum.
<font color=Blue <html>
size=6>Defination <head>
list</font></center> <title>Nested Table
<dl> </title>
<dt> HTML </head>
<Dd> Hypertext Markup <body>
Language <table align="center" border=4
<dt>DHTML bordercolor=black
<Dd> Dynamic Hypertext
Markup Language width=500 cellspacing=0>
<dt> XML <tr>
<Dd> Extensible Markup <td><center><b>CURRICULUM
Language VITA<b></CENTER>
</dl>
Basireddy Memorial Degree College , Nandikotkur 2
<center><table border=1 <center><table border=1
width=450 height=0 width=450 height=0
bordercolor="blue" bordercolor="red"
cellspacing=0> cellspacing=0>
<tr> <tr>
<td> Name <td
<td> [Link] colspan=5><center><b>Educatio
</tr> nal
<tr>
<td> Father name Qualifications</b></center>
<td> [Link] </tr>
</tr> <tr>
<tr> <td><b>Course</b>
<td> Educational Qualification <td><b>Percentage</b>
<td> Degree in MPCs <td><b>Name of the
</tr> Institution</b>
<tr> <td><b>Year</b>
<td> Date of Birth&Age <td><b>Place</b>
<td> 10-10-2010 </tr>
</tr> <tr>
<tr> <td>Degree
<td> Gender <td>Pursuing
<td> MALE <td> Basireddy Degree College
</tr> <td> 2010-2013
<tr> <td> Nandikotkur
<td>Nationality </tr>
<td>Indian <tr>
</tr> <td> Inter
<tr> <td> 84
<td>Caste <td> Basireddy Junior College
<td>OC <td> 2008-2010
</tr> <td> Nandikotkur
<tr> </tr>
<td>Address <tr>
<td rowspan=3> <td>SSC
Sai baba Street , <td>85
Nandikotkur. <td>Navanandi High School
</tr> <td>2007-2008
</table></center> <td>Nandikotkur</tr>
Basireddy Memorial Degree College , Nandikotkur 3
</table> <center><b>The Batmobile</b>
</tr> <table border=2 cellspacing=5>
</table> <tr>
<table align=center> <th>Special Equipment
<tr fontsize=10> <th
<td width=220>Date:01-01- colspan=2>Specification/Perform
2013<br>Place:Nandikotkur ance data
<td width=220>Yours </tr>
obediently<br>[Link] <tr>
</tr> </table> </body> </html> <td >Retractable Protective
amount
Output
<td> Engine Type
<td>jet Turbine
</tr>
<tr>
<td>weapons system
<td>thrust
<td>150Ibs@103%ROS
</tr>
<tr>
<td> Instruments-Aircanft Won-
board computer
<td>Torque
<td> 1750Ibsft@98.7%ROS
</tr>
4 Design the page as follows: <tr>
<td rowspan=9><img
src="[Link]" >
<td >0 to 60MPH
<td> 3.7 sec
<tr>
<td> top speed
<td>unknown
<tr>
<td>brake rating
<td>excellent
<html> <tr>
<head><title>tables</title> <td>wheel base
</head> <td>141.0in
<body> <font face="arial">
Basireddy Memorial Degree College , Nandikotkur 4
<tr> <td>wheels
<td>length <td>cast alloy,15x6.5
<td>260.7in <tr>
<tr> <td>fuel requirement
<td>width <td>high oct 97%special
<td>94.4in </tr>
<tr> <table>
<td>height </body>
<td>51.2in </html>
<tr>
5. Using “table” tag, align the images as follows:
<html>
<head>
<title>images</title>
</head>
<body><center><br><br>
<table cellspacing=10 cellpadding=10>
<tr>
<td><img src="[Link]" height=100 width=150 border=1>
<td><img src="[Link]" height=100 width=150 border=1>
<td><img src="[Link]" height=100 width=150 border=1>
<td><img src="[Link]" height=100 width=150 border=1>
</tr>
<tr>
<td><img src="[Link]" height=100 width=150 border=1>
<td colspan=2><center> Buy "<b>Tweeties"</b>on-line</center>
<td ><img src="[Link]" height=100 width=150 border=1>
</tr>
<tr>
<td><img src="[Link]" height=100 width=150 border=1>
<td><img src="[Link]" height=100 width=150 border=1>
<td><img src="[Link]" height=100 width=150 border=1>
<td><img src="[Link]" height=100 width=150 border=1>
</tr>
</table>
</body>
</html>
Basireddy Memorial Degree College , Nandikotkur 5
6. Create a help file as follows:
Main .html
<html>
<head>
<title>Contents</title>
</head>
<frameset cols="25%,75%">
<frame src="[Link]"
name="f1">
<frame src="[Link]" name="f2">
</frameset>
</html>
[Link]:
<html>
<head><title>frame1</title></head>
<body>
<h2>Contents</h2>
<font size="3">
1.<a href="[Link]" target="f2">WWW</a><br/>
2.<a href="[Link]" target="f2">Browsers</a><br/>
3.<a href="[Link]" target="f2">Web Commerce</a><br/>
4.<a href="[Link]" target="f2">Extranet</a></font>
</body>
</html>
[Link]
<html>
<head><title>WWW</title></head>
<body text="white" bgColor="blue"><center>
<u><h1>WWW</h1></u>
<font size="4">The <i>World Wide Web</i>(WWW),or Web for short is a
software application that makes it easy and possible for nearly anyone to
publish and browse hypertext documents on the Internet .We can think of
the Web as encompassing all of the information available through Web
browsers. The Web has developed a huge following because of its ease of
use and visual appeal .It is called a "web" because the interconnections
between documents resemble a spade’s web..
</font>
</center>
</body>
</html>
Basireddy Memorial Degree College , Nandikotkur 6
[Link]
<html>
<head><title>Browsers</title></head>
<body text="white" bgColor="blue"><center>
<u><h1>Web Browser</h1></u>
<font size="4">
A Web browser is one of many software applications that functions as the
interface between a user and the [Link] browser not only sends
messages to Web servers to retrive our page requests,but also parses and
renders the HTML code once it [Link] is,browser interprets the code
and displays the result on the [Link] browsers hav built-in mail
clients and/or newsreaders.
</font>
</center>
</body>
</html>
[Link]
<html>
<head><title>Web Commerce</title></head>
<body text="white" bgColor="blue"><center>
<u><h1>Web Commerce</h1></u>
<font size="4">
A Web Commerce is one of the application on [Link] provides On-Line
services like
on-line shopping and on-line marketing etc...
</font>
</center>
</body>
</html>
[Link]
<html>
<head><title>Extranet</title></head>
<body text="white" bgColor="blue"><center>
<u><h1>Extranet</h1></u>
<font size="4">
Unlike Internet, Extranet is a network technology provided with in the
organization. In this the Organization/Company members are
communicated with each other on this network. Outside people con't use
this network..
</font>
Basireddy Memorial Degree College , Nandikotkur 7
</center>
</body> </html>
[Link]
<html>
<head><title>frame2</title></head>
<body>
<h3>Click on any topic shown in left frame to know more</h3>
</body>
</html>
7. Write a HTML document to implement a webpage which shows the information of
important Cricket Stadiums in the four Metropolitan cities of New Delhi, Kolkata,
Mumbai and Chennai using Unordered lists. And each Metropolitan city lists the
stadiums using Ordered lists, and the sequence is continued till the last city.
<html>
<head>
<title> Cricket Stadium's</title>
</head>
<body bgcolor="gray">
<h1 ALIGN="CENTER"> Important Cricket Stadiums in the four Metropolitan Cities of
India </H1>
<img src="[Link]" align="Right">
<UL >
<LI> New Delhi
<OL>
<LI> Feroz Shah Kotla Stadium
</OL>
<LI>Kolkata
<OL TYPE=1 START=2>
<LI> Eden Gardens Stadium
<LI> Ranji Stadium
</OL>
<LI>Mumbai
<OL TYPE=1 START=4>
<LI>Bombay Gymkhana Ground Stadium
<LI>Brabourne Stadium
<LI>Wankhede Stadium
</OL>
<LI>Chennai
<OL TYPE=1 START=7>
<LI>[Link] Stadium
<LI>Nehru Stadium
</OL>
</UL>
</body>
</html>
Basireddy Memorial Degree College , Nandikotkur 8
[Link] a HTML document to design a webpage as shown below using forms and
submit the data of employees to [Link] through get method.
<html>
<head>
<title>form creation</title>
</head>
<body bgcolor="blue">
<font size=6 face="Autumn" color="red"><h1
align="Center">
Application Form </h1></p></font>
<form action"[Link]" method="get"
name="Form1"><font size=5 color="white">
Name of the Employe:
<input type="text box" maxlength=40 >
<br><br>zip code:       
<input type="text" >
<br><br>occupation:       
<input type="text" >  <br><br>
Gender: 
<input type="radio" value="a1" checked>Male
<input type="radio" value="a1">Female
<br><br>Hobbis
<input type="checkbox" >Reading Books
<input type="checkbox" >Lisiting music
<input type="checkbox" >Coin collection
<input type="checkbox" >playing Games
<input type="checkbox" >Others
<p aling="left">Country
<select name-"counter" size="1">
<option value="us">Us
Basireddy Memorial Degree College , Nandikotkur 9
<option value="india">india
<option value="chaina">chaina
<option value="chaina">Srilanka
<option value="chaina">Africa
</select><br><br>
Address:<br>
           &n
bsp   
<textarea name="comments" align="center" rows="5" columns="35">
</textarea>
<br><input type="Reset" value="reset">
<input type="Submit" value="submit"></p>
</form>
</body>
</html>
JavaScript
9. Write a Program in Java Script to add two numbers.
<html>
<head>
<title> jsp </title>
</head>
<body>
<script language="javascript">
Basireddy Memorial Degree College , Nandikotkur 10
var num1,num2,total;
num1=prompt("Enter First Number ");
num2=prompt("Enter Second Number ",0);
total=eval(num1)+eval(num2);
[Link]("<b>Total = "+total+"</b");
</script> </body>
</html>
Output
Enter 5 as the first number and 10 as the second, the output will show:
Total = 15
10. Write a script to find the factorial of a given number using
functions.
<html>
<head>
<title> jsp </title>
<script language="javascript">
function fact(x)
{
var fa=1;
for(var i=1;i<=x;i++)
{
fa=fa*i;
}
[Link]("<B>Factorial ="+fa+"<B>");
}
</script>
</head>
<body>
<script language="javascript">
var n;
n=prompt("Enter a Number for Factorial");
fact(n);
</script> </body> </html>
Basireddy Memorial Degree College , Nandikotkur 11
Output
Enter a Number = 5
Factorial = 120
11. Write a script to print Fibonacci series recursive functions.
<html>
<head>
<title>pro26</title></head>
<body>
<script language="javascript">
<!--
var n,f=1,s=1,r=0;
var n=prompt("enter the number");
[Link]("Fibonacci series <br>",f," ",s);
var i=2;
do
{
var r=f+s;
[Link](" "+r +" ");
f=s;
s=r;
i++;
}
while(i<n);
-->
</script>
</body>
</html>
Output
Enter Number = 9
Fibonacci series
1 1 2 3 5 8 13 21 34
12. Write a program to sort the array elements using “Bubble Sort”
technique.
<html>
<head>
<title> Sorting Values </title>
</head>
Basireddy Memorial Degree College , Nandikotkur 12
<body>
<script language="javascript">
var temp,len,i,j;
var a=new Array(6);
for(i=0;i<6;i++)
{
a[i]=prompt("Enter Array Element");
}
len=[Link];
for(i=0;i<len;i++)
{
[Link]("<br>"+a[i]);
}
[Link]("<h2> Buble Sort </h2>" );
for(i=0;i<len;i++)
{
for(j=0;j<len;j++)
{
if(a[j]>a[j+1])
{
temp=a[j];
a[j]=a[j+1];
a[j+1]=temp;
}
}
}
for(i=0;i<len;i++)
{
[Link]("<br>"+a[i]);
}
</script>
</body>
</html>
Output
Enter Array Elements = 3
Enter Array Elements = 1
Basireddy Memorial Degree College , Nandikotkur 13
Enter Array Elements = 5
Enter Array Elements = 9
Enter Array Elements = 2
Bubble Sort 1,2,3,5,9
13. Write a program to implement “Stack” operations.
<html>
<script language="JavaScript">
a=new Array(10);
var top=-1;
var n,i;
function push()
{
if(top==10)
alert("Stack is full");
else
{
n=eval(prompt("Enter number"));
a[++top]=n;
}
}
function pop()
{
if(top==-1)
alert("Stack is empty");
else
alert("Popped element is "+ a[top--]);
}
function list()
{
var i;
if(top==-1)
alert("Stack is empty");
else
{
[Link]("stack is ");
for(i=0;i<=top;i++)
[Link](a[i]+" ");
}
}
</script>
<body>
Basireddy Memorial Degree College , Nandikotkur 14
<h3>Stack operations </h3>
<form name=f1>
<input type=button value="Push" onClick='push();'>
<input type=button value="Pop" onClick='pop();'>
<input type=button value="List" onClick='list();'>
</form>
</html>
Output
Stack operations
Push Pop List
5
6
7
8
14. Using a ternary operator, write a script to validate the withdrawal
transaction of a customer. If he with draws more than his balance,
such a transaction should be disallowed.
<html>
<head<title>Ternary operator</title></head>
<script language="JavaScript">
function done()
{
var x=[Link];
var y=[Link];
var z=eval(x)-eval(y);
(eval(z)>0)?alert("Transaction is success!Current Balance
is:"+z):alert("transaction is failed");
[Link]="";
[Link]();
}
</script>
<body>
<center>
<h1>Account Transaction</h1>
<form name="ff">
<table>
<tr><td><b>Amount in Acccount:</b><td><input type="text" name="t1"
value="20000"></tr>
Basireddy Memorial Degree College , Nandikotkur 15
<tr><td><b>Withdrawal Amount:</b><td><input type="text"
name="t2"></tr>
<tr><td align="center" colspan=2><input type="button" value="Done"
name="b1" onClick="done()"></tr>
</form>
</center> </body> </html>
Output
15. Write a script to wish the user “Good Morning” at different hours
of the day using JavaScript/asp script
<html>
<head>
<title> Fun with Buttons</title>
<script type="text/javascript">
function Greeting()
{
var now = new Date();
if ([Link]() < 12)
{
alert("Good morning");
}
else if ([Link]() < 16)
{
alert("Good afternoon");
}
else if([Link]() < 18)
{
alert("Good evening");
}
else
{
alert("Good Night");
Basireddy Memorial Degree College , Nandikotkur 16
}
}
</script>
</head>
<body>
<form name="ButtonForm">
<input type="button" value="Click to Wish" onClick="Greeting();" />
</form>
</body>
</html>
Output
16. Create a customer profile for data entry of customers in a hotel.
The profile should prompt for the name, address, gender, age, room
type, mode of payment of the customer.
<html>
<head><script language="javascript">
[Link]("<h1><center>Customer Profile</h1></center>");
var name= prompt("Enter your name");
var address= prompt("Enter your address");
var gender= prompt("Enter you gender");
var age= prompt("enter you age");
var roomtype= prompt("Enter you roomtype");
var payment= prompt("Enter you payment ");
[Link]("<table border=2 align=center><tr>");
[Link]("<td>Customername:");
[Link]("<td>"+name);
Basireddy Memorial Degree College , Nandikotkur 17
[Link]("<tr><td>Customer Address:");
[Link]("<td>"+address);
[Link]("<tr><td>Customer Gender:");
[Link]("<td>"+gender);
[Link]("<tr><td>Customer Age:");
document
.write("<td>"+age);
[Link]("<tr><td>Customer Roomtype:");
[Link]("<td>"+roomtype);
[Link]("<tr><td>Customer Payment:");
[Link]("<td>"+payment);
[Link]("</table>");
</script></head></html>
[Link] a script to read information of ‘n’
students from the user and store them into
the table as follows:
<html>
Basireddy Memorial Degree College , Nandikotkur 18
<head><title>Student Report</title></head>
<script language="JavaScript">
var n=prompt("Enter how many student Information You want enter");
var sno=new Array(n);
var sna=new Array(n);
var m1=new Array(n);
var m2=new Array(n);
var m3=new Array(n);
var tot=new Array(n);
for(i=0;i<n;i++)
{
sno[i]=prompt("Enter "+eval(i+1)+" student Number");
sna[i]=prompt("Enter "+eval(i+1)+" student Name");
m1[i]=prompt("Enter "+eval(i+1)+" student marks in subject1");
m2[i]=prompt("Enter "+eval(i+1)+" student marks in subject2");
m3[i]=prompt("Enter "+eval(i+1)+" student marks in subject3");
}
for(i=0;i<n;i++)
tot[i]=eval(m1[i])+eval(m2[i])+eval(m3[i]);
[Link]("<center><h3>Student Information</h3><table bgColor=pink
border=1 cellspacing=3>")
[Link]("<tr><th>Number<th>Name<th>Marks1<th>Marks2<th>Mar
ks3<th>Total</tr>")
for(i=0;i<n;i++)
[Link]("<tr><td>"+sno[i]+"<td>"+sna[i]+"<td>"+m1[i]+"<td>"+m2[i]+
"<td>"+m3[i]+"<td>"+tot[i]+"</tr>")
[Link]("</table></center>")
</script>
</html>
Basireddy Memorial Degree College , Nandikotkur 19
18. Design a simple calculator.
<html>
<head>
<title> Caluculator </title>
</head>
<body ><font color="red">
<h1 align="center" > Caluculator </h1>
</font>
<FORM NAME="Calc">
<TABLE BORDER=4 bordercolor="black"
bgcolor=pink cellpadding=10 cellspacing=10
align="center" >
<TR>
<TD>
<INPUT TYPE="text" NAME="Input" Size="16">
<br>
</TD> </TR>
<TR>
<TD>
<INPUT TYPE="button" NAME="one" VALUE=" 1 " OnClick="[Link]
+= 1">
<INPUT TYPE="button" NAME="two" VALUE=" 2 " OnCLick="[Link]
+= 2">
<INPUT TYPE="button" NAME="three" VALUE=" 3 " OnClick="[Link]
+= 3">
<INPUT TYPE="button" NAME="plus" VALUE=" + " OnClick="[Link] +=
' + '">
<br>
<INPUT TYPE="button" NAME="four" VALUE=" 4 " OnClick="[Link]
+= 4">
<INPUT TYPE="button" NAME="five" VALUE=" 5 " OnCLick="[Link] +=
5">
<INPUT TYPE="button" NAME="six" VALUE=" 6 " OnClick="[Link] +=
6">
<INPUT TYPE="button" NAME="minus" VALUE=" - " OnClick="[Link]
+= ' - '">
Basireddy Memorial Degree College , Nandikotkur 20
<br>
<INPUT TYPE="button" NAME="seven" VALUE=" 7 " OnClick="[Link]
+= '7'">
<INPUT TYPE="button" NAME="eight" VALUE=" 8 " OnCLick="[Link]
+= '8'">
<INPUT TYPE="button" NAME="nine" VALUE=" 9 " OnClick="[Link]
+= '9'">
<INPUT TYPE="button" NAME="times" VALUE=" x " OnClick="[Link]
+= ' * '">
<br>
<INPUT TYPE="button" NAME="clear" VALUE=" c " OnClick="[Link] =
''">
<INPUT TYPE="button" NAME="zero" VALUE=" 0 " OnClick="[Link]
+= '0'">
<INPUT TYPE="button" NAME="DoIt" VALUE=" = " OnClick="[Link] =
eval([Link])">
<INPUT TYPE="button" NAME="div" VALUE=" / " OnClick="[Link] +=
' / '">
<br>
</TD>
</TR>
</TABLE> </FORM>
<br> <br>
<marquee behavior="alternate" bgcolor="#000000"><font color="#00FF00"
size=9>
Designed By : BASIREDDY MEMORIAL DEGREE COLLEGE NANDIKOTKUR
</marquee>
</font> </body> </html>
[Link] a script to Validate a Text field using Regular Expressions .
<html>
<head><title>Name Validaton </title>
<body>
Basireddy Memorial Degree College , Nandikotkur 21
<script type="text/javascript">
function val_name()
{
var namePattern = /[a-zA-Z]/;
if( )
alert("Enter valid name");
else
alert("Name entered successfully");
}
</script>
</head>
<body>
<form id="formname" name="formname" method="post" action=""
onsubmit="val_name()" >
Name*:<input id="name" name="name" />
<input type="submit" title="Submit" value="Submit" />
</form>
</body>
</html>
20. Illustrate the procedure of creating user-defined classes.
<html>
Basireddy Memorial Degree College , Nandikotkur 22
<head>
<title>Classes</title>
</head>
<style>
h3 {
background:gray;
text-align:center;
color:white
}
[Link]
{
text-align:center;
text-transform:uppercase;
font-family:Forte
}
.anyelement{
color:purple;
text-align:justify;
font-family:"Edwardian Script ITC";
font-size:30
}
</style>
<body bgcolor="#fffacb">
<center>
<h3>
Cascading Style Sheets:Classes
</h3>
<h4 class="some">A Sample Paragraph</h4>
<p class="anyelement">
This text should appear in italics on browsers that support style [Link] should
also appear justified along both [Link] could also use other properties in
order to create an even fancier paragraph.
</p>
<h5 style="background:gray;color:white">
©<a href="*">McGraw-Hill</a>
1997. All rights reserved.
</h5>
</center>
</body>
</html>
Basireddy Memorial Degree College , Nandikotkur 23
Basireddy Memorial Degree College , Nandikotkur 24