Scribd
Upload
6 views

HTML Lab Programs(MCA)

H

Uploaded by

11Rachana Gopu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

HTML Lab Programs(MCA)

H

Uploaded by

11Rachana Gopu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 34

1.

Create a simple html page with demonstrating different kinds


of list element

<html >

<head>

<title>

Demo on unordered list

</title>

</head>

<body bgcolor="blue" text="orange">

<h1> GREEN KART<h1>

<ol><h1> oredered list<h1>

<li>potatoes

<li>tomatoes

<li>cucumber

<li>bittergaurd

<li>bottlegaurd

<li>snakegaurd

<li>chillies

</ol>

<ol type="i"><h1> customized ordered list<h1>

<li>potatoes

<li>tomatoes

<li>cucumber

<li>bittergaurd
<li>bottlegaurd

<li>snakegaurd

<li>chillies

</ol>

<ul><h1> unordered list<h1>

<li>potatoes

<li>tomatoes

<li>cucumber

<li>bittergaurd

<li>bottlegaurd

<li>snakegaurd

<li>chillies

</ul>

<ul type="square"><h1> customized unordered list<h1>

<li>potatoes

<li>tomatoes

<li>cucumber

<li>bittergaurd

<li>bottlegaurd

<li>snakegaurd

<li>chillies

<ol type='a'>

<li> green chillies


<li> red chillies

</ol>

</ul>

</body>

</html>

Out put:

GREEN KART
ordered list
1. Potatoes
2. Tomatoes
3. Cucumber
4. Bittergaurd
5. Bottlegaurd
6. Snakegaurd
7. Chillies

customize Ordered list


d
i. Potatoes
ii. Tomatoes
Iii Cucumber
iv Bittergaurd
v. Bottlegaurd
vi Snakegaurd
vii Chillies

Unordere List
d
 potatoes
 tomatoes

cucumber

bittergaurd

bottlegaurd
 snakegaurd
 chillies

customized unoredered list


 potatoes
 tomatoes
 cucumber
 bittergaurd
 bottlegaurd
 snakegaurd
 chillies

a. green chillies
b. red chillies

2.create a table format shown below using Rowspan,colspan

<html>

<head>

<title>

demo on row span and col span

</title>

</head>

<body>
<table border="3" align="center">

<tr>

<th colspan="7"> student marks</th>

</tr>

<tr>

<th rowspan="2">sno</th>

<th rowspan="2">sname</th>

<th colspan="5">marks</th>

</tr>

<tr>

<th>m1</th>

<th>m2</th>

<th>m3</th>

<th>m4</th>

<th>m5</th>

</tr>

<tr>

<td>1</td>

<td>Ramau</td>

<td>60</td>

<td>70</td>

<td>80</td>
<td>70</td>

<td>80</td>

</tr>

<tr>

<td>2</td>

<td>Raju</td>

<td>55</td>

<td>70</td>

<td>80</td>

<td>75</td>

<td>85</td>

</tr>

<tr>

<td>3</td>

<td>Rani</td>

<td>65</td>

<td>75</td>

<td>85</td>

<td>95</td>

<td>85</td>

</tr>

</table>

</body>
</html>

Out put :

student marks
marks
sno sname m1 m2 m3 m4 m5
1 Ramau 60 70 80 70 80
2 Raju 55 70 80 75 85
3 Rani 65 75 85 95 85

3.Create a student bio data form using following format


<html >

<head>

<title>

Demo on Forms

</title>

</head>

<body>

<font face = "cambria" >

<h1 align="center"> Bio-Data form</h1>

<form>

<h3>

FullName of the Candidate &nbsp

<input type = "text" name = "fullname" value ="" size ="30" maxlength =
"30">

<br>

<br>
Father's Name

<input type = "text" name = "fname" value = "" size = "30" maxlength =
"30">

<br>

<br>

Mother'sName

<input type = "text" name = "mname" value = "" size = "30" maxlength =
"30" >

<br>

<br>

<fieldset>

<legend>

<font size="4">GENDER</font>

</legend>

<label> <input type="Radio" name="gender"


checked>male</label><br>

<label><input type="Radio" name="gender" >female</label><br>

</fieldset>

<fieldset>

<legend>

<font size="4">Date Of Birth</font>

</legend>
<label>

Day <select name= "day" size = "1" >

<option>

<option> 1</option>

<option> 2 </option>

<option> 3</option>

<option> 4 </option>

<option> 5</option>

<option> 6</option>

<option> 7</option>

<option> 8</option>

<option> 9</option>

<option> 10</option>

<option> 11</option>

<option> 12</option>

<option> 13</option>

<option> 14</option>

<option> 15</option>

<option> 16</option>

<option> 17</option>

<option> 18</option>

<option> 19</option>
<option> 20</option>

<option> 21</option>

<option> 22</option>

<option> 23</option>

<option> 24</option>

<option> 25</option>

<option> 26</option>

<option> 27</option>

<option> 28</option>

<option> 29</option>

<option> 30</option>

<option> 31</option>

</select>

</label>

<label>

Month <select name="month" size = "1" >

<option>

<option> 1</option>

<option> 2 </option>

<option> 3</option>

<option> 4 </option>

<option> 5 </option>

<option> 6</option>
<option> 7</option>

<option> 8</option>

<option> 9</option>

<option> 10</option>

<option> 11</option>

<option> 12</option>

</select>

</label>

<label>

Year <select name = "year" size = "1" >

<option> 1995</option>

<option> 1996</option>

<option> 1997</option>

<option> 1998</option>

<option> 1999</option>

<option> 2000</option>

<option> 2001</option>
<option> 2002</option>

<option> 2003</option>

<option> 2004</option>

<option> 2005</option>

</select>

<label>

</fieldset>

<fieldset>

<legend>

<font size="4">Address</font>

</legend>

<label>

<textarea name ="address" cols = "35" rows = "5" >

</textarea></label>

</fieldset>

<br>

<br>

Nationality

<input type = "text" name = "nationality" value = "" size = "20"


maxlength ="20" >

<br>

<br>
Catogery

<input type = "text" name = "catogery" value = "" size = "20" maxlength
="20" >

<br>

<br>

<hr>

<br>

Personal Information

<br>

Hobbies

<input type = "text" name = "hobbie" size = "20" maxlength = "25" >

<br>

<br>

Blood Group

<select name = "bg" size = "1" >

<option>

<option> A+</option>

<option> A-</option>

<option> B+</option>

<option> B-</option>

<option> O+</option>

<option> O-</option>
<option> AB+</option>

<option> AB-</option>

</select>

<br>

<br>

<fieldset>

<legend>

<font size="4">PHC</font>

</legend>

<label> <input type="Radio" name="pc" value="" >yes</label>

<label><input type="Radio" name="pc" value="" checked>No</label>

</fieldset>

<input type = "checkbox" name = "cb" >

&nbsp I do here by declare that the above mentioned details are


correct and accurate

<br>

<br>

<input type = "reset" value = "reset" >

<input type = "submit" name = "sb" value = "submit" >

</h3>

</Form>

</Body>

</Html>

Out put :
4. Write html programs to demonstrate different types of style sheets

A. Inline style sheet

<html>

<body>

<p style=”font-size:40pts;font-family:italic”>first style effect </p>

<p style=”font-size:20pts;color:silver”>second style effect </p>

</body>

</html>

Out put:

first style effect


second style effect

B. Embedded style sheet

<html>

<head>

<style type=”text/css”>

h1

Font-family:tahoma;

background:black;

color:white;

{
font-family:arial;

font-size:20pts;

p.color

color:blue;

</style>

</head>

<body>

<h1>normal Font</h1><br>

<p> first paragraph</p>

<p class=”color”> second paragraph</p>

</body>

</html>

Out put:

normal Font

first paragraph

second paragraph

C. External

<html>

<head>
<link rel=”stylesheet” type=”text/css” href=”extern.css”>

</head>

<body>

<h1>heading tag</h1>

<p> first paragraph</p>

<p class=”color”>second paragraph</p>

</body>

</html

extern.css:

h1

font-family:tahoma;

background:black;

color:white;

font-family:arial;

font-size:20pts;

p.color

color:blue;

}
Out put:

heading tag
first paragraph

second paragraph

D. Imported style sheet:

<html>

<head>

<title> demo on imported style sheet </title>

<style type=”text/css”>

@import URL(“http://WWW.html help.com/style.css”)

</style>

</head>

<body>

<h1> vaagdevi degree and pg college </h1>

<h2> 22/02/2023</h2>

</body>

</html>

Out put:

vaagdevi degree and pg college


22/02/2023
5.write a java script program to demonstrate different kinds of operators available in javascript.
A. Arithmetic operators:
<html>
<head>
<title>
demo arithmetic operations</title>
</head>
<body>
<script>
var x=11;
var y=2;
document.write("sum="+(x+y)+"<br>");
document.write("difference="+(x-y)+"<br>");
document.write("product="+(x*y)+"<br>");
document.write("quotient="+(x/y)+"<br>");
document.write("remainder="+(x%y)+"<br>");
</script>
</body>
</html>
Out put:
sum=13
difference=9
product=22
quotient=5.5
remainder=1
B. Increment and Decrement operations:
<html>
<head>
<title>
demo arithmetic operations</title>
</head>
<body>
<script>
var x=11;
var y;
document.write("x="+x+"<br>");
y=x++;
document.write("values of x,y after post increment<br>x="+x+"<br>y="+y+"<br>");
y=++x;
document.write("values of x,y after pre increment<br>x="+x+"<br>y="+y+"<br>");
y=x--;
document.write("values of x,y after post decrement<br>x="+x+"<br>y="+y+"<br>");
y=--x;
document.write("values of x,y after pre decrement<br>x="+x+"<br>y="+y+"<br>");
</script>
</body>
</html>
Output:
x=11
values of x,y after post increment
x=12
y=11
values of x,y after pre increment
x=13
y=13
values of x,y after post decrement
x=12
y=13
values of x,y after pre decrement
x=11
y=11
C. Logical operators:
<html>
<head>
<title>
demo logical operaters</title>
</head>
<body>
<script>
var x=6;
var y=3;
document.write("x="+x+"<br>");
document.write("y="+y+"<br>");
document.write("value of (x<10)&&(y<10) ="+((x<10)&&(y<10))+"<br>");
document.write("value of (x>10)||(y>10) ="+((x>10)||(y>10))+"<br>");
document.write("value of !(x>10)="+!(x>10)+"<br>");
var z="6";
document.write("value of (x==z)="+(x==z)+"<br>");
document.write("value of (x===z)="+(x===z)+"<br>");
y=6;
document.write("value of (y==z)="+(y==z)+"<br>");
document.write("value of (y===z)="+(y===z)+"<br>");
</script>
</body>
</html>
Out put :
x=6
y=3
value of (x<10)&&(y<10) =true
value of (x>10)||(y>10) =false
value of !(x>10)=true
value of (x==z)=true
value of (x===z)=false
value of (y==z)=true
value of (y===z)=false
D. Terinary operator:
<html>
<head>
<title>demo ternary operators</title>
</head>
<body>
<script>
var x=11;
var y=12;
var z=(x>y)?x:y;
document.write("greater of "+x+","+y+"is ="+z+"<br>");
</script>
</body>
</html>

Out put:
greater of 11,12is =12

6. Write a JavaScript program to demonstrate alert, confirm and prompt boxes


A. Alert box:
<!DOCTYPE html>
<html>
<head>
<title>demo on alert box</title>
</head>
<body>
<h2>JavaScript Alert</h2>
<script>
alert("I am an \n alert box!");
</script>

</body>
</html>
Out put:

JavaScript Alert
B. Conform Box:
<html>
<head>
<title>demo on confirm box</title>
</head>
<body>
<script type="text/javascript">
var r=confirm("press a button")
if(r==true)
document.write("<h1>you pressed ok!</h1>");
else
document.write("<h1>you pressed cancel!</h1>");
</script>
</body>
</html>
Out put:

you pressed ok!


C. Prompt Box:
<html>
<head>
<title>
demo terinary operators</title>
</head>
<body>
<script>
var x;
var y;
var x=parseInt(prompt("enter x value",20));
var y=parseInt(prompt("enter y value"));
var z=(x>y)?x:y;
document.write("greater of "+x+","+y+"is ="+z+"<br>");
</script>
</body>
</html>
Out put:

greater of 20,20is =20

7. Write a JavaScript on looping statements

A. Palindrome using while loop:


<html>
<head>
<title>demoonwhile</title>

</head>
<body >
<script type="text/javascript">
var n=parseInt(prompt("enter a number",10));
document.write( "<br>the given number=" +n);
var r;
var rev=0;
var temp=n;
while (n>0) {
r=n%10;
rev=rev*10+r;
n=Math.floor(n/10);
}
if(temp==rev)
document.write( "<br>the given number is polindrome");
else
document.write( "<br>the given number is not polindrome");
</script>
</body>
</html>
Out put:

the given number=10


the given number is not palindrome

B. binary numbers using do while loop:


<html>
<head>
<title>demoon do..while</title>

</head>
<body >
<script type="text/javascript"> decimal to
var n=parseInt(prompt("enter a number",10));
document.write( "<br>decimal number=" +n);
var r;
var bn="";
do{
r=n%2;
bn=bn+r;
n=Math.floor(n/2);
}
while (n>0);
document.write("<br>binary number=")
var i=bn.length-1;
while(i>=0){
document.write(bn.substr(i,1));
i=i-1;
}
</script>
</body>
</html>
Out put :

decimal number=10
binary number=1010
C. for loop in the following format
1
12
123
1234
<html>
<head>
<title>demoon nested for</title>

</head>
<body >
<script type="text/javascript">
var i,j;
for(i=1;i<=4;i++)
{
var k=1;
for(j=1;j<=i;j++){
document.write(k+"&nbsp&nbsp&nbsp");
k=k+1;
}
document.write("<br>");
}
</script>
</body>
</html>
Out put:
1
1 2
1 2 3
1 2 3 4

8. Write a JavaScript program to demonstrate different kinds of functions


A. function without return value with out arguments:
<html>
<head>
<title>
demo on function without return value without arguments
</title>
</head>
<body>
<script type="text/javascript">
function add()
{
var a=10;
var b=20;
var c=a+b;
document.write(c+"<br>");
}
add();
add();
add();
</script>
</body>
</html>
Out put :
30
30
30
B. function without return value with arguments:
<html>
<head>
<title>
demo on function without returning value with arguments
</title>
</head>
<body>
<script type="text/javascript">
function add(a,b)
{
var c=a+b;
document.write(c+"<br>");
}
add(10,20);
add(14,13);
</script>
</body>
</html>
Out put:
30
27
C. function with return value with out arguments:
<html>
<head>
<title>
demo on function with return value without arguments
</title>
</head>
<body>
<script type="text/javascript">
function add()
{
var a=10;
var b=20;
return (a+b);

}
var c=add();
document.write("sum="+c+"<br>");
document.write("sum="+add()+"<br>");

</script>
</body>
</html>
Out put :
sum=30
sum=30
D. function with return value with arguments:
<html>
<head>
<title>
demo on function with return value with arguments
</title>
</head>
<body>
<script type="text/javascript">
function add(a,b)
{
return(a+b);
}
var x=parseInt(prompt("enter 1st number"));
var y=parseInt(prompt("enter 2nd number"));
document.write("sum="+add(x,y)+"<br>");
</script>
</body>
</html>
sum=90
Out put:

sum=90
9Q: Write a sample php program to print values of variables using HTML?

<HTML>
<head>

<title> Sample Program</title>

</head>

<body>

<?PHP

$sname="Raju";

$class="MCA";

$rollno=23;
?>

Name:<?PHP echo $sname; ?> <br> Class:<?


PHP echo $class; ?> <br>

RNO: <?PHP echo $rollno; ?>


</body>

</html>
10: Write a php script to calculate and display a simple catalog of fruits shop?

<?PHP
$prod1="apple";

$prod2="banana";

$prod1_price=20;

$prod2_price=30;

$prod1_qty=10;

$prod2_qty=20;

$prod1_total=$prod1_price*$prod1_qty;

$prod2_total=$prod2_price*$prod2_qty;

$grand_total=$prod1_total+$prod2_total;

$discount=$grand_total*0.02;

$net_amount=$grand_total-$discount;

?>
<h1> Sahadev Fruits...</h1>

<table border=2>
<tr>

<td>SNO</td>
<td>Product</td>

<td>Price</td>

<td>Quantity</td>

<td>Total</td>

</tr>
<tr>

<td>01</td>

<td><?PHP echo $prod1; ?></td>

<td><?PHP echo $prod1_price; ?></td>

<td><?PHP echo $prod1_qty; ?></td>

<td><?PHP echo $prod1_total; ?> </td>

</tr>

<tr>

<td>02</td>
<td><?PHP echo $prod2; ?></td>

<td><?PHP echo $prod2_price; ?></td>


<td><?PHP echo $prod2_qty; ?></td>
<td><?PHP echo $prod2_total; ?></td>

</tr>

</table>
<?PHP

echo "Discount=".$discount;
echo "<br>";
echo "Net Bill=".$net_amount;
?>

You might also like