Scribd
Upload
7 views

Lab Programs

The document contains code snippets from a web programming lab demonstrating various HTML tags. It includes 8 sections that each contain code for a different tag: 1. Lists (ol, ul, li) 2. Tables (table, tr, th, td) 3. Images (img) 4. Anchors (a) 5. Forms 6. Frames 7. JavaScript to validate age 8. JavaScript to calculate factorials The document provides code examples for common HTML tags like lists, tables, images, anchors and forms. It also includes JavaScript code snippets to demonstrate age validation and calculating factorials.

Uploaded by

muhammedshazin1234
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Lab Programs

The document contains code snippets from a web programming lab demonstrating various HTML tags. It includes 8 sections that each contain code for a different tag: 1. Lists (ol, ul, li) 2. Tables (table, tr, th, td) 3. Images (img) 4. Anchors (a) 5. Forms 6. Frames 7. JavaScript to validate age 8. JavaScript to calculate factorials The document provides code examples for common HTML tags like lists, tables, images, anchors and forms. It also includes JavaScript code snippets to demonstrate age validation and calculating factorials.

Uploaded by

muhammedshazin1234
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 49

WEB PROGRAMMING

LAB PROGRAMS
PART-B
B-1) Program to demonstrate list tag
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lists</title>
</head>
<body>
<h1>To show lists</h1>
</hr>
<h4>Nested</h4>
<ol>
<li>Karnataka</li>
<li>TN</li>
<ol type="a">
<li>Mysore</li>
<li>Chennai</li>
<ol type="i">
<li>Gunjur</li>
<li>Belladur</li>
<ul type="Square">
<li>Electronic city P1</li>
<li>Electronic city P2/li>
</ul>
<li>HSR</li>
</ol>
</ol>
<li>Delhi</li>
</ol>
<h3>Definition</h3>
<dl>
<dt>Bangalore</dt>
<dd>Capital city of karnataka</dd>
<dt>Mumbai</dt>
<dd>Capital city of Maharashtra</dd>
</dl>
</body>
</html>

OUTPUT
B-2) Program to demonstrate table tag
<?xml="1.0" encoding="utf-8"?>
<!DOCTYPE html public "-//w3c//dtd html 1.0 transitional //en"
"http://www.w3.org/tr/xhtml/dtd/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/tr/1999/xhtml/">
<head>
<title>Table Tags</title>
</head>
<body>
<table cellpadding="15" cellspacing="1" border="5" width="600" align="center">
<caption><h1>BCA 6th SEM TIME TABLE</h1></caption>
<tr>
<th>Day</th>
<th>I</th>
<th>II</th>
<th>III</th>
<th>IV</th>
<th>V</th>
<th>VI</th>
<th>VII</th>
</tr>
<tr>
<td>MON</td>
<td>WEB</td>
<td>TOC</td>
<td>SP</td>
<td rowspan="6">L<br>U<br>N<br>C<br>H</td>
<td>CNS</td>
<td>WEB</td>
<td>TOC</td>
</tr>
<tr>
<td>TUE</td>
<td>WEB</td>
<td>TOC</td>
<td>SP</td>
<td colspan="3">...WEB LAB...</td>
</tr>
<tr>
<td>WED</td>
<td>WEB</td>
<td>TOC</td>
<td>SP</td>
<td>TOC</td>
<td>CNS</td>
<td>WEB</td>
</tr>
<tr>
<td>THUR</td>
<td>WEB</td>
<td>TOC</td>
<td>SP</td>
<td colspan="2">...PROJECT...</td>
<td>TOC</td>
</tr>
<tr>
<td>FRI</td>
<td>WEB</td>
<td>TOC</td>
<td>SP</td>
<td>CNS</td>
<td colspan="2">...PROJECT...</td>
</tr>
<tr>
<td>SAT</td>
<td>WEB</td>
<td>TOC</td>
<td>SP</td>
<td>CNS</td>
</tr>
</table>
</body>
</html>

OUTPUT
B-3) Program to demonstrate image tag
<?xml="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns-"http://www.w3.org/1999/xhtml/">
<head><title>Image tag</title></head>
<body>
<h3 align="center">To illustrateimage tags</h3><hr/>
<p><img src="C:\HTMLPROGRAMS\pics\image1.jpg" align="right" height="100"
width="100"/>This image is right aligned with the test</img></p>
<br/><br/><br/><br/><br/><hr/>
<p><img src="C:\HTMLPROGRAMS\pics\image2.jpg" height="100" width="100"
style="boeder:10px solid yellow;"/>This image is right aligned with the test</img></p>
<br/><br/><br/><br/><br/><hr/>
<p><img src="C:\HTMLPROGRAMS\pics\image3.jpg" height="100" hspace="10"
vspace="10" align="middle"/>This image is right aligned with the test</img></p>
<br/><br/><br/><br/><br/><hr/>
</body>
</html>

OUTPUT
B-4) Program to demonstrate anchor tag.
<?xml="1.0" encoding="utf-8"?>
<!DOCTYPE html public "-//w3c//dtd html 1.0 transitional //en"
"http://www.w3.org/tr/xhtml/dtd/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/tr/1999/xhtml/">
<head>
<title>ANCHOR TAG</title>
</head>
<body>
<h3 align="center">TO ILLUSTRATE TAG</h3><hr/>
<h2><a name="top"><b><u>Top of the page</u></b></a></h2><hr/><hr/>
Test as a link to another page:
<a href="C:\HTMLPROGRAMS\1-lists.html">
click me!!!</a>
<hr/>
Image as a link to another page:
<a href="C:\HTMLPROGRAMS\2-Table tag.html">
<img src="C:\HTMLPROGRAMS\pics\image1.jpg" width="100" height="100"/></a>
<hr/>
Link to mail:<a href="mail to [email protected]">EMAIL ME!!!</a>
<hr/>
Link to download a file:<a href="C:\HTMLPROGRAMS\1-lists.html">
Click here to download a file!!!</a>
<hr/>
<p><a hred="#chapter 8">See also chapter 8 (link within the page)</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains pointers</p>
<h2>Chapter 2</h2>
<p>This chapter explains variables</p>
<h2>Chapter 3</h2>
<p>This chapter explains operators</p>
<h2>Chapter 4</h2>
<p>This chapter explains structures</p>
<h2>Chapter 5</h2>
<p>This chapter explains array</p>
<h2>Chapter 6</h2>
<p>This chapter explains linked list</p>
<h2>Chapter 7</h2>
<p>This chapter explains expression</p>
<h2><a name="Chapter 8"><u>Chapter 8</u></a></h2>
<p>This chapter explains binary tree</p>
<h2>Chapter 9</h2>
<p>This chapter explains unordered list</p>
<h2>Chapter 10</h2>
<p>This chapter explains statements</p>
<h2>Chapter 11</h2>
<p>This chapter explains searching</p>
<a href="#top">Click here to go to top of the page(link with a page)</a>
</body>
</html>
OUTPUT
B-5) Program to demonstrate anchor tag.
Form.html
<?xml="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FORM</title>
</head>
<body>
<h1 align="center"><u>Student Registration Form</u></h1>
<form action="file:C:\HTMLPROGRAMS\5-Form\sucess.html" name="Student"
method="get">
<label>Name:</label><input type="text" name="textnames" size="30"/>
<br/><br/>
<label>Father Name:</label><input type="text" name="fathername" size="30"/>
<label>Mother Name:</label><input type="text" name="mothername" size="30"/>
<br/><br/>
<label>Personal Address:</label><textarea rows="10" cols="50">Enter adress
here</textarea>
<br/><br/>
<fieldset>
<legend>Gender</legend>
<input type="radio" name="Gender"/>Male
<input type="radio" name="Gender"/>Female
</fieldset>
<br/><br/>
<fieldset>
<legend>Languages</legend>
<input type="checkbox" name="lang"/>Kannada
<input type="checkbox" name="lang"/>English
<input type="checkbox" name="lang"/>Hindi
<input type="checkbox" name="lang"/>Tamil
<input type="checkbox" name="lang"/>Telugu
</fieldset>
<label>Couse:</label>
<select name="Course">
<option selected="selected">Select....</option>
<optgroup label="DEGREE">
<option>BCOM</option>
<option>BCA</option>
<option>BSC</option>
</optgroup>
<optgroup label="PUC">
<option>I PUC</option>
<option>II PUC</option>
</optgroup>
</select>
<br/><br/>
<label>city:</label><select name="city">
<option selected="selected">Select.....</option>
<option>Bangalore</option>
<option>Mysore</option>
<option>Chennai</option>
<option>Mandya</option>
</select>
<br/><br/>
<label>Pincode:</label><input type="text" name="pincode" size="30"/>
<br/><br/>
<input type="reset"/>
<input type="submit" value="click here to proceed"/>
</form>
</body>
</html>

Success.html
<html>
<head>
<title>SUCESS</title>
</head>
<body>
<br/><br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h1 align="center">SUBMITTED</h1>
</body>
</html>
OUTPUT 1

OUTPUT 2
B-6) Program to demonstrate frame tag.
Frame.html
<?xml="1.0" encoding="utf-8"?>
<!DOCTYPE html public "-//w3c//dtd html 1.0 transitional //en"
"http://www.w3.org/tr/xhtml/dtd/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/tr/1999/xhtml/">
<head>
<title>FRAME TAG</title>
</head>
<frameset cols="20,60">
<frame src="C:\HTMLPROGRAMS\6-Frame\Leftpane.html">
<frame src="C:\HTMLPROGRAMS\6-Frame\Rightpane.html" name="rightpane"/>
</frameset>
</html>
Bangalore.html
<html>
<head><title>BANGALORE</title>
</head>
<body><bg color="blue">
<h1>WELCOME TO BANGALORE</h1>
</body>
</html>
Leftpane.html
<html>
<head><title>LEFTPANE</title></head>
<body>
<h3>Districts of Karnataka</h3>
<a href="C:\HTMLPROGRAMS\6-Frame\Bangalore.html"
target="rightpane">BANGALORE<br/></a>
<a href="C:\HTMLPROGRAMS\6-Frame\Mysore.html" target="rightpane">Mysore<br/></a>
<marquee>I AM LEFT PANE</marquee>
</body>
</html>
Mysore.html
<html>
<head><title>MYSORE</title>
</head>
<body><bg color="yellow">
<h1>WELCOME TO MYSORE</h1>
</body>
</html>
Rightpane.html
<html>
<head><title>Rightpane</title></head>
<body>
<h1>Click on any state to get a welcome message</h1>
<marquee>I Am RIGHTPANE</marquee>
</body>
</html>

OUTPUT 1:
OUTPUT 2:

OUTPUT 3:
B-7) Program to validate age.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>VALIDATE AGE</title>
<script type="text/javascript">
function Check()
{
var entervalue=document.getElementById("age").value;
if(entervalue>18 && entervalue<=100)
{
window.alert("You are eligible to vote.");
}
else
{
window.alert("Age cannot be less than 18 or greater than 100.");
}
}
</script>
</head>
<body>
<h1>Program to evaluate age for voting</h1>
<form>
<label>Enter Age:<input type="text" id="age"/>
<input type="button" value="Click Here" onclick="Check()"/>
</form>
</body>
</html>
OUTPUT
B-8) Program to calculate factorial.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FACTORIAL</title>
<script type="text/javascript">
var n=parseInt(window.prompt("Enter number"));
var fact=factorial(n);
document.write("<h1>Factorial of "+n+" is "+fact+" </h1>");
function factorial(n)
{
if(n<=1)
return 1;
else
return n*factorial(n-1);
}
</script>
</head>
</html>
OUTPUT
B-9) Program to demonstrate string
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>String Functions</title>
</head>
<body>
<script type="text/javascript">
var str = "WEB PROGRAMMING BOOK BY SEBESTA";
document.writeln("The string is: " + str);
document.writeln("<br/><hr/>The length of the string is: " + str.length);
document.writeln("<br/><hr/>The character at the 4th position is: " + str.charAt(4));
document.writeln("<br/><hr/>The index of 'B' is: " + str.indexOf('B'));
document.writeln("<br/><hr/>The last index of 'B' is: " + str.lastIndexOf('B'));
document.writeln("<br/><hr/>The uppercase of the string is: " + str.toUpperCase());
document.writeln("<br/><hr/>The lowercase of the string is: " + str.toLowerCase());
document.writeln("<br/><hr/>The substring found between two indexes is: " +
str.substring(4, 12));
document.writeln("<br/><hr/>The substring in a string beginning at the specified location to
the number of characters: " + str.substr(8, 12));
</script>
</body>
</html>
OUTPUT
B-10) Program to demonstrate array operations.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Array Functions</title>
</head>
<body>
<script type="text/javascript">
var myarr=new Array(5);
myarr[0]="Mango";
myarr[1]="Banana";
myarr[2]="Apple";
myarr[3]="Grapes";
myarr[4]="Chicko";
document.write("The array elements are");
for(var i=0;i<myarr.length;i++)
{
document.write("<br/>" + myarr[i]);
}
myarr=myarr.concat("Melon","Plum");
document.write("<br/><hr/>After concatenation the array is:" + myarr);
document.write("<br/><hr/>Poped element is:" + myarr.pop());
document.write("<br/><hr/>After push operation array elements are:" + myarr);
document.write("<br/><hr/>Shifter element is:" + myarr.shift());
myarr.unshift("Guava");
document.write("<br/><hr/>After unshift operation array elements are:" + myarr);
document.write("<br/><hr/>After slice operation array elements are:" + myarr.slice(2,5));
document.write("<br/><hr/>After join operation array elements are:" + myarr.join(">>"));
document.write("<br/><hr/>After reverse operation array elements are:" +
myarr.reverse());
document.write("<br/><hr/>After sort operation array elements are:" + myarr.sort());
</script>
</body>
</html>

OUTPUT
PART A PROGRAMS
A-1) Program to find sum of n natural numbers.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml//DTD/xhtml1.Transitional//EN">
<html xmlns="http://w3.org/1999/xhtml">
<head>
<title>Sum of Natural Number</title>
<script type="text/javascript">
function natural()
{
var n=parseInt(window.prompt("Enter n value"));
var sum=(n*(n+1))/2;
window.alert("Sum of first "+n+" natural number is:"+sum);
}
</script>
</head>
<body>
<h1>Sum of N natural numbers</h1>
<form>
<input type="button" value="FIND SUM" onClick="natural()"/>
</form>
</body>
</html>
OUTPUT
A-2) Javascript to count number of elements.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml//DTD/xhtml1.Transitional//EN">
<html xmlns="http://w3.org/1999/xhtml">
<head>
<title>Number of Elements</title>
<script type="text/javascript">
function count()
{
window.alert("The number of elements are:"+document.myform.length);
}
</script>
</head>
<body>
<form name="myform">
Name:<input type="text"/><br/><br/>
Password:<input type="password"/><br/><br/>
Address:<textarea cols="J" rows="10"></textarea><br/><br/>
Gender:<input type="radio"/>Male
<input type="radio"/>Female<br/><br/>
Newsletters:<input type="checkbox"/><br/><br/>
<input type="button" value="Send Data" onClick="count()"/>
<br/>
</form>
</body>
</html>
OUTPUT
A-3) Javascript code to count number of empty elements
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml//DTD/xhtml1.Transitional//EN">
<html xmlns="http://w3.org/1999/xhtml">
<head>
<title>Number of Elements</title>
<script type="text/javascript">
function validate()
{
var myarray=new Array();
for(var i=0;i<document.myform.length;i++)
{
if(document.myform.elements[i].value.length==0)
myarray.push(document.myform.elements[i].name);
}
if(myarray.length!=0)
window.alert("The following text boxes are empty:\n"+myarray);
}
</script>
</head>
<body>
<form name="myform">
<pre>
Name:<input type="text" name="Name"/><br/>
Class:<input type="text" name="Class"/><br/>
Age:<input type="text" name="Age"/><br/>
<input type="submit" value="Send Message" onClick="validate()"/><br/>
</pre>
</form>
</body>
</html>

OUTPUT
A-4) Javascript code to evaluate the expression and display.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://w3.org/1999/xhtml">
<head>
<title>Evaluate</title>
<script type="text/javascript">
function math_evaluate()
{
var exp=document.getElementById("expr").value;
document.getElementById("result").value=eval(exp);
}
</script>
</head>
<body>
<form>
<pre>
<label>Enter any valid Expression:</label><input type="text" id="expr"/><br/>
<input type="button" value="Evaluate" onClick="math_evaluate()"/>
<br/>
<label>Result of expression:</label><input type="text" id="result"/>
<br/>
</pre>
</form>
</body>
</html>
OUTPUT
A-5) Javascript code to display current month, date and year.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml/">
<head>
<script type="text/javascript">
var days = ["", "First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh", "Eight",
"Nineth", "Tenth", "Eleven", "Twelth", "Thirteenth", "Fourteenth", "Fifteenth", "Sixteenth",
"Seventeenth", "Eighteenth", "Nineteenth", "Twentyeth", "Twentyone", "Twentysecond",
"Twentythird", "Twentyfourth", "Twentyfifth", "Twentysixth", "Twentyseveth",
"Twentyeight", "Twentynineth", "Thirtyeth", "Thirtyfirst"];
var months = ["January", "February", "March", "April", "May", "June", "July", "August",
"September", "October", "November", "December"];
var year = "Two Thousand Twenty";
var dateObj = new Date();
var currMonth = dateObj.getMonth();
var currDate = dateObj.getDate();
var currYear = dateObj.getFullYear();

if (currYear == 2020) {
year = "2020"; // Changed the year to display properly in the alert message.
window.alert("Today's Date is " + days[currDate] + " " + months[currMonth] + " " +
year);
} else {
window.alert("Today's Date is " + days[currDate] + " " + months[currMonth] + " " +
currYear);
}
</script>
</head>
</html>
OUTPUT
A-6) Create a form for student information.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function showresult()
{
var n = document.getElementById("name").value;
var cls = document.getElementById("class").value;
var mark1 = parseInt(document.getElementById("sub1").value);
var mark2 = parseInt(document.getElementById("sub2").value);
var mark3 = parseInt(document.getElementById("sub3").value);
var total = mark1 + mark2 + mark3;
var avg = total / 3;
var grade, result;

if (avg >= 60)


{
grade = "A";
result = "First class";
}
else if (avg >= 50)
{
grade = "B";
result = "Second Class";
}
else if (avg >= 40)
{
grade = "C";
result = "Third class";
}
else
{
grade = "D";
result = "Fail";
}

document.write("<pre><b><h2> Results </h2>");


document.write("Name: " + n + "<br/><br/>");
document.write("Class: " + cls + "<br/><br/>");
document.write("Total Marks: " + total + "<br/><br/>");
document.write("Average: " + avg + "<br/><br/>");
document.write("Grade: " + grade + "<br/><br/>");
document.write("Result: " + result + "<br/><br/> </b></pre>");
}
</script>
</head>
<body>
<form id="myForm">
<table border="1" cellspacing="0">
<tr><td> Name:</td><td><input type="text" id="name" /></td></tr>
<tr><td>Class:</td><td><input type="text" id="class"/></td></tr>
<tr><td>Subject mark1:</td><td><input type="text" id="sub1"/></td></tr>
<tr><td>Subject mark2:</td><td><input type="text" id="sub2"/></td></tr>
<tr><td>Subject mark3:</td><td><input type="text" id="sub3"/></td></tr>
<tr><td><input type="button" value="View Result" onclick="showresult()"/> </td></tr>
</table>
</form>
</body>
</html>

OUTPUT
A-7) Create a form for employee information.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function calculate() {
var empname = document.getElementById("en").value;
var empid = document.getElementById("eid").value;
var basic = parseInt(document.getElementById("eb").value);
var hra = basic * 0.4;
var da = basic * 0.6;
var gross = hra + da + basic;
var pf = gross * 0.13;
var tax = gross * 0.20;
var deduction = pf + tax;
var netsalary = gross - deduction;

document.write("<pre> <b><h1>Employee Details</h1>");


document.write("Employee name: " + empname + "<br/><br/><br/>");
document.write("Employee id: " + empid + "<br/><br/><br/>");
document.write("Basic salary: " + basic + "<br/><br/><br/>");
document.write("HRA (40% of basic): " + hra + "<br/><br/><br/>");
document.write("DA (60% of basic): " + da + "<br/><br/><br/>");
document.write("Gross Salary: " + gross + "<br/><br/><br/>");
document.write("PF (13% of gross): " + pf + "<br/><br/><br/>");
document.write("Tax (20% of gross): " + tax + "<br/><br/><br/>");
document.write("Deduction: " + deduction + "<br/><br/><br/>");
document.write("Net salary: " + netsalary + "<br/><br/><br/></b></pre>");
}
</script>
</head>
<body>
<form>
<table border="1">
<tr>
<td>Employee name:</td>
<td><input type="text" id="en" /></td>
</tr>
<tr>
<td>Employee Id:</td>
<td><input type="text" id="eid" /></td>
</tr>
<tr>
<td>Basic Pay:</td>
<td><input type="text" id="eb" /></td>
</tr>
<tr>
<td><input type="button" value="SHOW SALARY" onclick="calculate()" /></td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT
A-8) Create a page with dynamic effect.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic Animated</title>
<style type="text/css">
#layer1 {position:absolute; top: 50px; left:50px; }
#layer2 {position:absolute; top:150px; left:150px;}
#layer3 {position:absolute; top: 250px; left:250px; }
</style>
<script type="text/javascript">
function moveImage(layer) {
var top = window.prompt("Enter top value");
var left = window.prompt("Enter left value");
document.getElementById(layer).style.top = top + 'px';
document.getElementById(layer).style.left = left + 'px';
}
</script>
</head>
<body>
<div id="layer1"><img src="C:\HTMLPROGRAMS\pics\image1.jpg" width="100"
height="100" onclick="moveImage('layer1')" alt="My Image" /></div>
<div id="layer2"><img src="C:\HTMLPROGRAMS\pics\image2.jpg" width="100"
height="100" onclick="moveImage('layer2')" alt="My Image" /></div>
<div id="layer3"><img src="C:\HTMLPROGRAMS\pics\image3.jpg" width="100"
height="100" onclick="moveImage('layer3')" alt="My Image"/></div>
</body>
</html>
OUTPUT
A-9) Create a webpage using two image files switches between one another.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Count</title>
<style type="text/css">
#image1 { position:absolute; top: 50px; left: 50px; border: thin; visibility: visible; }
#image2 { position:absolute; top: 50px; left: 50px; border: thin; visibility: hidden; }
</style>
<script type="text/javascript">
function change() {
var img1 = document.getElementById("image1").style;
var img2 = document.getElementById("image2").style;

if (img1.visibility == "visible") {
img1.visibility = "hidden";
img2.visibility = "visible";
}
else {
img1.visibility = "visible";
img2.visibility = "hidden";
}
}
</script>
</head>
<body>
<form>
<img src="C:\HTMLPROGRAMS\pics\image1.jpg" width="300" height="300" id="image1"
onmouseover="change()" onmouseout="change()" />
</form>
<img src="C:\HTMLPROGRAMS\pics\image2.jpg" width="300" height="300" id="image2"
onmouseover="change()" onmouseout="change()" />
</body>
</html>

OUTPUT
A-10) Create a form to display menu.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Restaurant Details</title>
<script type="text/javascript">
function Findcost() {
var major = document.getElementById("major1");
var starters = document.getElementById("starters1");
var soft = document.getElementById("softl");
var selectedItem = "Items\t\t\tprice\n-------\n";
var totalcost = 0;

for (var i = 0; i < major.options.length; i++) {


var option = major.options[i];
if (option.selected == true) {
var price = parseInt(option.value);
totalcost += price;
selectedItem += option.text + "\t\t" + price + "\n";
}
}

for (var i = 0; i < starters.options.length; i++) {


var option = starters.options[i];
if (option.selected == true) {
var price = parseInt(option.value);
totalcost += price;
selectedItem += option.text + "\t\t" + price + "\n";
}
}

var softdrinkIndex = soft.selectedIndex;


if (softdrinkIndex !== -1) {
var selectedsoftdrink = soft.options[softdrinkIndex].text;
var price = parseInt(soft.options[softdrinkIndex].value);
totalcost += price;
selectedItem += selectedsoftdrink + "\t\t\t" + price + "\n";
}

selectedItem += "\n\nTotal cost \t\t" + totalcost;


document.getElementById("Ordereditems").value = selectedItem;
}
</script>
</head>
<body>
<form name="menuform">
<table border="10">
<tr>
<th colspan="2" align="center">
<h2>Restaurant Menu Details</h2>
</th>
</tr>
<tr>
<td>Major Dishes:</td>
<td>
<select id="major1" size="3" multiple="multiple">
<option value="100">Vegetable Pulav</option>
<option value="150">Hyderabad Biryani</option>
<option value="50">Roti With Curry</option>
</select>
</td>
</tr>
<tr>
<td>Starters:</td>
<td>
<select id="starters1" size="3" multiple="multiple">
<option value="80">Gobi Manchurian</option>
<option value="40">Veg Clear Soup</option>
<option value="30">Masala Papad</option>
</select>
</td>
</tr>
<tr>
<td>Soft Drink:</td>
<td>
<select id="softl" size="3">
<option value="20">Pepsi</option>
<option value="20">Coke</option>
<option value="30">Lime Soda</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<textarea id="Ordereditems" rows="10" cols="50"></textarea>
</td>
</tr>
<tr>
<td>
<input type="button" value="FindTotalCost" onclick="Findcost()" />
</td>
<td>
<input type="reset" value="Clear" />
</td>
</tr>
</table>
</form>
</body>
</html>

OUTPUT

You might also like