Scribd
Upload
14 views34 pages

HTML Lab Programs(MCA)

H

Uploaded by

11Rachana Gopu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views34 pages

HTML Lab Programs(MCA)

H

Uploaded by

11Rachana Gopu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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