web lab programs

Program 1:
<html>
<head>
<title>text formatting tags</title>
</head>
<body bgcolor=red>
<h1 align=center> different tag format </h1>
<br>
here the text with <b> bold</b> <br>
here the text with <i>italic</i> <br>
here the text with <u>underline</u> <br>
here the text with <small>small </small> <br>
here the text with <strong> strong </strong>
here the text with <em> emphasise </em><br>
here the text with <font size=6 color=red>font </font> <br>
here the text with <s> strike </s> <br>
here the text with <h1> header tag</h1>
</body>
</html>
Program 2:
<html>
<head>
<title> FONTS </title>
</head>
<body bgcolor=yellow>
<center>
<font color=red size=5 face="couriernew"><u>This is our college</u></font>
</center>
<br>
<font color=black size=4>located at Nacharam</font>
<p>we have have best faculty</p>
<br>
</body>
</html>
Program 3:
<html>
<body>
<h1>Ordered List </h1>
<OL>
<LI> APPLE </LI>
<LI> MANGO </LI>
<LI> BANANA </LI>
</OL>
<h1>Unordered List </h1>
<UL>
<LI> Apple </LI>
<LI> Mango </LI>
<LI> Banana </LI>
</UL>
<h1>Definition list</h1>
<dl>
<dt><b>Html:</b></dt>
<dd>hyper text mark up language is used to describe the format of documents</dd>
<dt><b>List:</b></dt>
<dd>Lists are used to define list of items</dd>
</dl>
</body>
</html>
Program 4:
<html>
<head>
<title>nested table to store curriculum</title>
</head>
<body>
<h1 align=center>
<table border=1 align=center>
<tr>
<td>
<b>Personal Details</b>
</tr>
<tr>
<td>
<ul><li><b>name:</b>geetha
<li><b>address:</b>st.pious college
<li><b>Email:</b>geetha@gmail.com
<li><b>father's name:</b>Mano<br>
<li><b>age:</b>20years<br>
<li><b>sex:</b>female<br>
<li><b>Marital status:</b>un-married<br>
</ul>
</tr>
<tr>
<td><b>Computer skills</b></td>
</tr>
<tr>
<td>
<ul><b>Languages Known:
<li>c
<li>c++
<li>java
<li>web programming
<li>oracle
</ul>
</tr>
<tr>
<td><b>Academic Qualification</b></tr>
<tr>
<td>
<table border=1>
<tr>
<th>sno
<th>class
<th>university
<th>percentage
<th>year of pass
</tr>
<tr><td>1<td>10th<td>s.s.c<td>75%<td>2008-2009</tr>
<tr><td>2<td>inter<td>board of inter<td>80%<td>2009-2011</tr>
<tr><td>3<td>degree<td>osmania university<td>85%<td>2011-2014</tr>
</table>
</tr>
</table>
</body>
</html>
Program 5:
<html>
<head>
<title>forms</title>
</head>
<body>
<h2 align="center">Subscriber Mailing System</h2>
<hr width="80%" size=5>
<form name="f1" action="mailto:geetha@gmail.com" method="get">
<p align="left"><b>your name:</b>
<input type="text" maxlength=40 size=20><br>
<p align="left"><b>your Email-id:</b>
<input type="text" maxlength=40 size=20><br>
<p align="left"><b>your password:</b>
<input type="text" maxlength=40 size=20><br>
<p align="left"><b>Address:</b>
<select name="country" size=3>
<option selected>India
<option>UK
<option>Canada
<option>Mexico
<option>Africa
</select>
<p align=left><b>Subscriber type</b>
<input type="radio" name=r1> monthly
<input type="radio" name=r1> yearly
<p align=left><b>What are your comments</b><br>
<textarea name="comments" rows=3 columns=20></textarea>
<p align=center>
<input type="submit" name=send value=send>
<input type="clear" name=clear value=clear>
</body>
</html>
Program 6:
<html>
<head>
<title>javscript</title>
</head>
<body>
<table align="center" border="1" height="100" width="600">
<caption> The Mobile AMBULANCE-EMRI 108 </caption>
<tr>
<th><b> Special Equipment</b></th>
<th colspan="2"><b> Specifications/performance data </b></th>
</tr>
<tr>
<td><center>rectractable protective armor</center></td>
<td><b>Engine type</b></td>
<td>Jet turbain</td>
</tr>
<tr>
<td> <center>Weapons System</center></td>
<td><b>Thrust</b></td>
<td>150lbs@103%ROS</td>
</tr>
<tr>
<td><center> Instrument aircraft won board computer</center></td>
<td> <b> Torque</b></td>
<td>170lbs/ft@98%ROS</td>
</tr>
<tr>
<td rowspan="9" align="center"><img src="Shiva.jpg" width="25%" height="75%" </td>
<td><b>0-60MPH</b></td>
<td>3.7sec</td>
</tr>
<tr>
<td><b>Top Speed</b></td>
<td> Unknown</td>
</tr>
<tr>
<td><b> Brake Rating</b></td>
<td> Excellent</td>
</tr>
<tr>
<td><b>Wheel base</b></td>
<td>141.0 in</td>
</tr>
<tr>
<td><b>length</b></td>
<td>260.7</td>
</tr>
<tr>
<td><b>width</b></td>
<td>94.4 in</td>
</tr>
<tr>
<td><b>height</b></td>
<td>51.2 in</td>
</tr>
<tr>
<td><b>wheels</b></td>
<td>cast alloy</td>
</tr>
<tr>
<td><b>fuel requirement </b></td>
<td> high oct 97% special</td>
</tr>
</table>
</body>
</html>
Program 7:
<html>
<head>
<title>javscript</title>
</head>
<body>
<table align="center" border="1" height="100" width="600">
<caption font size="5"> Alignment of images in table </caption>
<tr>
<td><img src="Image0161.jpg" height=100 width=150> </td>
<td><img src="shiva.jpg" height=100 width=150></td>
<td><img src="Image0161.jpg" height=100 width=150> </td>
<td><img src="shiva.jpg" height=100 width=150></td>
</tr>
<tr>
<td><img src="Image0161.jpg" height=100 width=150> </td>
<td colspan="2"> <h1> Buy"tweeties"On-line</td>
<td><img src="Image0161.jpg" height=100 width=150> </td>
</tr>
<tr>
<td><img src="Image0161.jpg" height=100 width=150> </td>
<td><img src="shiva.jpg" height=100 width=150></td>
<td><img src="Image0161.jpg" height=100 width=150> </td>
<td><img src="shiva.jpg" height=100 width=150></td>
</tr>
</table>
</body>
</html>
Program 8:
<html>
<head>
<title> frames</title>
</head>
<frameset rows="80%,20%">
<frameset cols="20%,80%">
<frame>
<frame>
</frameset>
<frame>
</frameset>
</html>
Program 9:
<html>
<head>
<title> page as follows</title>
</head>
<body>
<pre><img src="Image0161.jpg" height=200 width=200>
        <p> this is the picture of my 1972 corvette. Working on this corvetee is my hobby</p>
<br>
<br>
<p align="center"> More information can be found at website</p>
</body>
</html>
Program 10:
<html>
<head>
<title> page as follows</title>
</head>
<body>
<hr align="center" color="red" size=50 width=900>
<br>
<hr align="center" color="yellow" size=40 width=800>
<br>
<hr align="center" color="green" size=30 width=700>
<br>
<hr align="center" color="aqua" size=20 width=600>
<br>
<hr align="center" color="blue" size=10 width=500>
<br>
</body>
</html>
Program 11:
save as: frames.html
<html>
<head>
<title>frames</title>
</head>
<frameset cols="20%,80%">
<frame name="a" src="hyperlinks.html">
<frame name="b">
</frameset>

</html>
save as :hyperlinks.html
<html>
<head>
<title>hyperlinks</title>
</head>
<body>
<h1>Hyperlinks</h1>
<a href="content.html" target="b">html</a>
</body>

</html>
save as :content.html
<html>
<head>
<title>content</title>
</head>
<body>
<h1>HTML</h1>
<p>
HTML means hypertext markup language. It is the standard language for creating web pages and web applications.HTML elements

are the building blocks of HTML pages. HTML can embed programs written in a scripting language such as JavaScript which affect

the behavior and content of web pages
</p>
</body>

</html>
Program 12:
<html>
<head>
<title>Using the JavaScript </title>
</head>
<body>
<script language="javascript">
var fname=prompt("enter first name");
var Mname=prompt("enter middle name");
var Lname=prompt("enter last name");
document.writeln(fname);
document.writeln(Mname);
document.writeln(Lname);
</script>
</body>
</html>
Program 13:
<html>
<head>
<title>Using the javaScript </title>
</head>
<body>
<script language="javascript">
var i=2;
document.writeln("10"+"90" +"<br>");
var c=(10<8)?10:8;
document.writeln(c +"<br>");
var j=(i++)+(--i)+(++i)+(i++);
document.writeln(j);
</script>
</body>
</html>
Program 14:
<html>
<head>
<title>Using JavaScript</title>
 </head>
 <body>
<script language="JavaScript">
var a,b,c;
a=prompt("Enter the value of a :");
 b=prompt("Enter the value of b:");
 a=parseInt(a);
 b=parseInt(b);
c=a+b;
document.write("Sum= " + c);
 </script>
 </body>
</html>
Program 15:
<html>
<head>
<title>Using JavaScript</title>
<script language="JavaScript">
var f=1;
function fact(n)
 {
while(n>0)
{
f=f*n;
n=n-1;
}
return f;
}
</script>
 </head>
<body>
<script language="JavaScript">
var n;
n=prompt("Enter the number:");
document.write("Factorial of " + n + " is = " + fact(n));
 </script>
</body>
</html>
Program 16:
<html>
<head>
<title>Using JavaScript</title>
<script language="JavaScript">
var i,j,n,c=0;
n=prompt("enter the range");
for(i=1;i<n;i++)
{
for(j=1;j<n;j++)
{
if(i%j==0)
{
c=c+1;
}
}
if(c==2)
document.write(i+"<br>");
c=0;
}
</script>
</body>
</html>
Program 17:
<html>
<html>
<head>
<script language="javascript">
var array = new Array(15,23,1,69,45,36,7,64,99,5);
document.write("Array is "+ array);
var arrayLength = array.length;
var i;
var j;
var k;
for(i=0;i<arrayLength;i++)
{
    for(j=i+1;j<arrayLength;j++)
       {
           if(array[i]<array[j])
             {
               k=array[i];
               array[i]=array[j];
               array[j]=k;
              }
        }
}
document.write("<br/>After bubble sort in desending order " + array);
</script>
</head>
<body>
</body>

</html>

Program 21;
<html>
<head>
<title>bubble sort</title>
</head>
<body>
<script language="javascript">
var cprice,sprice,profit,loss;
cprice=prompt("enter cost price");
cprice=parseInt(cprice);
sprice=prompt("enter selling price");
sprice=parseInt(sprice);
if(cprice<sprice)
document.write("profit percentage:"+[(sprice-cprice)/100]);
else
document.write("loss percentage:"+[(cprice-sprice)/100]);
</script>
</body>
</html>
Program 22:
<html>
<head>
<title>customer profile</title>
</head>
<body>
<script language="javascript">
var name,address,age,gender,roomtype,typeofpayment;
name=prompt("enter name");
address=prompt("enter address");
age=prompt("enter age");
gender=prompt("enter gender");
roomtype=prompt("enter roomtype");
typeofpayment=prompt("enter type of payment");
document.writeln("<H1><CENTER>A CUSTOMER PROFILE</H1></CENTER>");
document.writeln("<BR> <B>CUSTOMER NAME:</B>" +name);
document.writeln("<BR> <B>CUSTOMER AGE:</B>" +age);
document.writeln("<BR> <B>CUSTOMER ADDRESS:</B>" +address);
document.writeln("<BR> <B>CUSTOMER GENDER:</B>" +gender);
document.writeln("<BR> <B>CUSTOMER ROOMTYPE:</B>" +roomtype);
document.writeln("<BR> <B>CUSTOMER TYPE OF PAYMENT:</B>" +typeofpayment);
</script>
</body>
</html>
Program 25:
<html>
<head>
<title>head colors</title>
</head>
<body>
<h1 onmouseover="style.color='red'" onmouseout="style.color='yellow'">
this text changes its color</h1>
<h2 onmouseover="style.color='blue'" onmouseout="style.color='pink'">
this text changes its color</h2>
<h3 onmouseover="style.color='green'" onmouseout="style.color='black'">
this text changes its color</h3>
<h4 onmouseover="style.color='black'" onmouseout="style.color='red'">
this text changes its color</h4>
<h5 onmouseover="style.color='red'" onmouseout="style.color='olive'">
this text changes its color</h5>
</body>
</html>
Program 26:
<html>
<head>
<title>Invert behaviour</title>
</head>
<body>
<h1 onmouseover="style.fontSize='10';style.color='red'">this text inverts to h6</h1>
<h2 onmouseover="style.fontSize='15';style.color='red'">this text inverts to h5</h2>
<h3 onmouseover="style.fontSize='20';style.color='red'">this text inverts to h4</h3>
<h4 onmouseover="style.fontSize='25';style.color='red'">this text inverts to h3</h4>
<h5 onmouseover="style.fontSize='30';style.color='red'">this text inverts to h2</h5>
<h6 onmouseover="style.fontSize='35';style.color='red'">this text inverts to h1</h6>
</body>
</html>
Program 30:
<html>
<head>
<title>class as selecter example</title>
<style type="text/css">
.xyz
{
font-style:italic;
color:green;
font-size:22pt;
}
.abc
{
font-weight:bold;
color:blue;
font-size:22pt;
font-family:helvetica;
}
</style>
</head>
<body>
<h1 class="xyz">user defined classes for h1 tag</h1>
<p class="abc">user defined classes for paragraph tag</p>
</body>
</html>

 program 23:

<html>
<head>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<form action="#" name="employeeRegistration" onsubmit="return(validate());">

<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"
cellspacing="2">

<tr>
<td colspan=2>
<center><font size=4><b>Employee Registration Form</b></font></center>
</td>
</tr>

<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>


<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>

<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>

<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>

<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="hyd">HYD</option>
</select></td>
</tr>


<tr>
<td>Designation</td>
<td><select name="Designation">
<option value="-1" selected>select..</option>
<option value="ceo">CEO</option>
<option value="functional manager">FUNCTIONAL MANAGER</option>
<option value="project manager">PROJECT MANAGER</option>
<option value="supervisor">SUPERVISOR</option>
</select></td>

</tr>

<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="ap">AP</option>
<option value="telangana">TELANGANA</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>

</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>

<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>

<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
</body>
</html> (save as prg23.html)
-----------------------------------------------------------------------------
function validate()     // save as (validate.js) //
{
   if( document.employeeRegistration.textnames.value == "" )
   {
     alert( "Please provide your Name!" );
     document.employeeRegistration.textnames.focus() ;
     return false;
   }
   
   if( document.employeeRegistration.paddress.value == "" )
   {
     alert( "Please provide your Postal Address!" );
     document.employeeRegistration.paddress.focus() ;
     return false;
   }
   if( document.employeeRegistration.personaladdress.value == "" )
   {
     alert( "Please provide your Personal Address!" );
     document.employeeRegistration.personaladdress.focus() ;
     return false;
   }
   if ( ( employeeRegistration.sex[0].checked == false ) && ( employeeRegistration.sex[1].checked == false ) )
   {
   alert ( "Please choose your Gender: Male or Female" );
   return false;
   } 
   if( document.employeeRegistration.City.value == "-1" )
   {
     alert( "Please provide your City!" );
     document.employeeRegistration.City.focus() ;
     return false;
   } 
      if( document.employeeRegistration.Designation.value == "-1" )
   {
     alert( "Please provide your Select Designation!" );
 
     return false;
   } 
   if( document.employeeRegistration.State.value == "-1" )
   {
     alert( "Please provide your Select State!" );
   
     return false;
   }
   if( document.employeeRegistration.pincode.value == "" ||
           isNaN( document.employeeRegistration.pincode.value) ||
           document.employeeRegistration.pincode.value.length != 6 )
   {
     alert( "Please provide a pincode in the format ######." );
     document.employeeRegistration.pincode.focus() ;
     return false;
   }
 var email = document.employeeRegistration.emailid.value;
  atpos = email.indexOf("@");
  dotpos = email.lastIndexOf(".");
 if (email == "" || atpos < 1 || ( dotpos - atpos < 2 ))
 {
     alert("Please enter correct email ID")
     document.employeeRegistration.emailid.focus() ;
     return false;
 }
  if( document.employeeRegistration.dob.value == "" )
   {
     alert( "Please provide your DOB!" );
     document.employeeRegistration.dob.focus() ;
     return false;
   }
  if( document.employeeRegistration.mobileno.value == "" ||
           isNaN( document.employeeRegistration.mobileno.value) ||
           document.employeeRegistration.mobileno.value.length != 10 )
   {
     alert( "Please provide a Mobile No in the format 123." );
     document.employeeRegistration.mobileno.focus() ;
     return false;
   }
   return( true );

}


program 24:
<html>
<form name="calculator">
<table border=4>
<tr>
<td>
<input type="text" name="text" size="18">
<br>
</td>
</tr>
<tr>
<td>
<input type="button" value="1" onclick="calculator.text.value += '1'">
<input type="button" value="2" onclick="calculator.text.value += '2'">
<input type="button" value="3" onclick="calculator.text.value += '3'">
<input type="button" value="+" onclick="calculator.text.value += ' + '">
<br>
<input type="button" value="4" onclick="calculator.text.value += '4'">
<input type="button" value="5" onclick="calculator.text.value += '5'">
<input type="button" value="6" onclick="calculator.text.value += '6'">
<input type="button" value="-" onclick="calculator.text.value += ' - '">
<br>
<input type="button" value="7" onclick="calculator.text.value += '7'">
<input type="button" value="8" onclick="calculator.text.value += '8'">
<input type="button" value="9" onclick="calculator.text.value += '9'">
<input type="button" value="*" onclick="calculator.text.value += ' * '">
<br>
<input type="button" value="c" onclick="calculator.text.value = ''">
<input type="button" value="0" onclick="calculator.text.value += '0'">
<input type="button" value="=" onclick="calculator.text.value = eval(calculator.text.value)">
<input type="button" value="/" onclick="calculator.text.value += ' / '">
<br>
</td>
</tr>
</table>
</form>

</html>

program 27:

 <html>
<head>
<title>Inline style sheet</title>
<body>
<h1 style="color:blue">This is a Blue Heading</h1>
<p style="border:ridge;color:green;font-size:13">this is a paragraph</p>
</body>

</html>


program 28:

 <html>
<head>
<style>
body
 {
background-color: powderblue;
}
h1
  {
color: blue;
}
p
    {
color: red;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

</html>






Comments

  1. Unknown14 May 2018 at 00:20

    Great post! I am actually getting ready to across this information, is very helpful my friend. Also great blog here with all of the valuable information you have. Keep up the good work you are doing here.
    http://starmax.org/index.php/services/

    ReplyDelete

Post a Comment

Popular posts from this blog

DS unit-wise important questions

UNIT-I 4m questions(short type): 1) Define data structure 2) What is an ADT 3) Define algorithm, steps and characteristics 4) Define 1-D, 2-D and n-D arrays 5) Pros and cons of arrays 6) Briefly write about Stack ADT 7) Write how to convert infix to postfix expression 15m questions(essay): 1) Explain various types of data structures 2) Explain in detail analysis of algorithms 3) Algorithm design tools(pseudocode & flowchart) 4) Explain about string manipulation using arrays 5) Define stack. Explain different operations performed on stack 6) Describe in brief applications of stack 7) Pseudocode notations UNIT-II Short type: 1) Write in brief about recursion and its advantages 2) Write an algorithm on fibonacci series and factorial of given number 3) Iteration vs recursion 4) Define queue, circular queue and deque 5) Define Queue ADT 6) Define linked list, DLL and CLL 7) Advantages and disadvantages of linked list 8) Advantag...
Read more