12th Science Practical

INDEX
A] Advanced Web Designing Pg no Sign

1) Create a webpage using HTML code to display video file on webpage and play
automatically with controls.
2) Create webpage using HTML code with an inserted image having jpeg or jpg
extension.
3) Create webpage using HTML and CSS code to show index page of college profile.
4) Create webpage using HTML and CSS codeto design web page as the layout display.
5) Create webpage name Audio file with controls.
B] JavaScript
1) Create webpage of JavaScript program where background color change
automatically.
2) Create event driven JavaScript program to accept string from user and count
number of vowels in the given string.
3) Create JavaScript program of form validation, with the help of HTML properties.
4) Create event driven JavaScript program to make use of variable, inbuilt string
functions and control structure.
C] Server‐Side Scripting (PHP)

1) Write a PHP program to check if a person is eligible to vote or not. Using functions
and decision making statement.
2) Write a PHP program to check Electricity Bill.
3) Write a PHP program to save marks of subjects in an array and display total and
percentage.
<!DOCTYPE html>
<html>
<head>
<title>Single Audio with Control</title>
</head>
<body>
<h1 align="center">Audio with Control</h1>
<audio controls autoplay loops="-1">
<source src="C:\users\public\music\sample music\kalimba.mp3" type="audio/mpeg">
</audio>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Information form</title>
<Script type="text/javascript">
function validate_email()
{
var x = form1.em.value;
var at = x.indexOf("@");
var at_last = x.lastIndexOf("@");
var dot = x.indexOf(".");
var last_dot = x.lastIndexOf(".");
if(at<1||at<at_last||last_dot+2>x.length||last_dot<at)
{
alert("Not a Valid Email Address");
}
else
{
alert("Valid Email Address");
}
}
</script>
</head>
<body>
<h1>Information form</h1>
<from name="form1">
Your Name
<input type="text" name="t1" required>
<br><br>
Address
<textarea name="text_address" placeholder="Permanant address" required></textarea>
<br><br>
contact
<input type="tel" name="telephone" maxlength="10">
<br><br>
Email
<input type="text" name="em" pattern="[A‐Z a‐z]{0‐9}‐[@]{1}‐[.]{1}">
<br><br>
<input type="button" name="b1" value="submit" onClick="validate_email()">
</form>
</body>
</html>
<?php
$marks=array(75,88,91,79,83);
$total=0;
$i=0;
echo "<b>Marks in English:"
.$marks[0] . ",<br> Marks in Hindi:"
.$marks[1] . ",<br> Marks in Marathi:"
.$marks[2] . ",<br> Marks in Maths:"
.$marks[3] . ",<br> Marks in Information Technology:"
.$marks[4] . ".";
for($i=0;$i<count($marks);$i++)
$total=$total+$marks[$i];
$per=$total*100/500;
echo "<br>Total marks obtain by Students:$total";
echo "<br>Percentage obtained is:$per";
?>
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
</head>
<body>
<form name="f1">
Enter the string to check it is palindrome or not !
<br>
<input type="text" name="t1">
<br><br>
<input type="button" name="check_palin" value="check string"
onClick="chk_palindrome()">
</form>
<script type="text/javascript">
function chk_palindrome()
{
var str,str_case,i,len;
str=f1.t1.value;
str_case=str.toLowerCase();
len=str_case.length:
var p=1;
for(i=0;i<len/2;i++)
{
if(str_case.charAt(i)!=str_case.charAt(len‐1‐i))
{
p=0;
break:
}
}
if(p==1)
{
alert("Entered string is palindrome");
}
else
{
alert("entered string is not palindrome");
}
</script>
</html>
htmlsop1
htmlsop1
100%
10
Screen reader support enabled.
<!DOCTYPE html5>
<html>
<head>
<title>
Sancheti English School
</title>
<meta charset="utf-8">
<meta name="author" content="Physical Tags">
<style>
h2{border-style:dotted}
b{color:red;font-size:15pt}
body{background-color:pink}
u{text-decoration:overline}
p{text-align:right}
</style>
</head>
<body>
<h1 align="center">Sancheti English School & Jr. College</h1>
<p>
Sancheti English School & Jr. College was established in the year 1939. Sancheti English School & Jr.
College
is providing quality education to students. </p>
<b>Sancheti English School and Junior College</b><br><br>
<i>A person who never made a mistake never tried anything new</i><br><br> <u>There are no
shortcuts to any place worth going.</u><br><br> <h2>All the best for your bright future</h2>
<img src="C:\Users\admin\Desktop\Tulips.jpg" width="200" height="250" alt="Sancheti">
<br><br>
<a href="C:\XII New Programs\Textbook\sop1\page2.html">Second Page</a> </body>
</html>
************************************************************* <!DOCTYPE html5>
<html>
<head>
<title>
Form
</title>
<meta charset="utf-8">
<meta name="author" content="Form">
<style>
h2{border-style:dashed}
body{background-color:aqua}
</style>
</head>
<body>
<H2 align="center">Feedback form</H2>
<Form method="post">
<p>
<font size="5">First name:<input type="text" name="firstname"><Br><br> Last name:<input
type="text" name="lastname"><Br><br>
Email Address:<input type="text name="email"><Br><br>
Contact No.:<input type="text name="C no."><br><br>
please enter your comment below:<br>
<textarea name=a rows=10 cols=20></textarea><BR>
<input type="submit" value="Send">
<input type="reset" value="Clear Form">
</p></font>
</Form>
Turn on screen reader support

<!DOCTYPE html>
<html>
<head>
<title>Tourisht Place</title>
<style>
section {background-color:pink;width:50%;height:50%;float:right}
aside{width:50%;float:left}
ol{font-style:italic;font size:15pt}
ul{font-weight:bold;font size:20pt}
</style>
</head>
<body>
<header style="background-color:green;height:40pt">
<h1 align="center">Tourist Place</h1>
</header>
<br>
<aside>
<h3>City</h3>
<ol>
<li>Pune</li>
<li>Banglore</li>
<li>Hydrabad</li>
<li>Delhi</li>
</ol>
</aside>
<section>
<h3>Tourist Places In Pune</h3>
<ul>
<li>Shanivarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad Fort</li>
<li>Aga Khan Palace</li>
</ul>
</section>
</body>
</html>
<!DOCTYPE html5>
<html>
<head>
<title>
Single Video File
</title>
</head>
<body>
<h2 align="center">Single Video File </h2>
<video src="C:\XII New Programs\Textbook\sop6\earth.mp4" controls
width="150" height="150" loop="-1" autoplay>
</video>
</body>
</html>
**********************************************************************
<!DOCTYPE html5>
<html>
<head>
<title>
Multiple Video File
</title>
</head>
<body>
<h2 align="center">
Multiple Video File on Web Page with controls
</h2>
<h2>
The text between the video tags will only be displayed in browsers that do not
support the video element.</h2>
<h3>List of video files formats</h3>
<ol>
<li>mp4 - video/mpeg</li>
<li>ogg - video/ogg</li>
<li>WebM - vfideo/webM</li>
</ol>
<video controls width="100" height="100" autoplay="">
<source src="C:\XII New Programs\Textbook\sop6\foo.mp4" type="video/mp4">
<source src="C:\XII New Programs\Textbook\sop6\earth.webm" type="video/webm">
<source src="C:\XII New Programs\Textbook\sop6\earthogg.ogg" type="video/ogg">
browser does not support the video element
</video>
</body>
</html>
<!DOCTYPE html5>
<html>
<head>
<title>
Client Side Image Mapping
</title>
</head>
<body>
<h2 align="center">Client Side Image Mapping</h2>
<img src="C:\Users\admin\Desktop\penguins.jpg"
usemap="#a">
<map name="a">
<area shape="rect" coords="105,47,360,148" href="a1.html" alt="a1"> <area shape="circle"

coords="611,283,81" href="a2.html" alt="a2"> <area shape="poly" coords="329,365,381,250,426,369"
href="a3.html" alt="a3"> </map>
</body>
</html>
<html>
<body>
<h1 align="center">Person Eligible to vote or not</h1>
<form method="post" action="voteage.php">
Enter Your age
<input type="number" name="age"><br>
<input type="submit" name="submit" value="Check Eligible">
</form> </body>
</html>
**************************************************
<?php
if(isset($_POST['submit']))
{
$age = $_POST['age'];
if($age>=18)
echo "<br><br>You are Eligible to vote";
else
echo "<br><br>You are not Eligible to vote";
}
?>
<html>
<body>
<h1 align="center">Electricity Bill</h1>
<form method="post" action="lightbill.php">
Enter number of Limits (limits)
<input type="text" name="units"><br><br>
<input type="submit" name="submit" value="Calculate LightBill">
</form>
</body>
</html>
*******************************************************
<?php
if(isset($_POST['submit']))
{
$units = ($_POST['units']);
if($units<=100)
{
$bill=$units*4;
echo "Your bill Amount is .$bill";
}
else
{
if($units<=200)
{
$bill=400+($units-100)*5;
}
else
{
$bill=400+500+($units-200)*6;
}
}
}
?>
<!DOCTYPE html5>
<html>
<head>
<title>
Count Vowels
</title>
<script type="text/javascript">
function test()
{
var str,i,ch,count;
count=0;
str=document.frm.t1.value;
for(i=0;i<=str.length;i++)
{
ch=str.charAt(i);
if(ch=="A" || ch=="a" || ch=="E" || ch=="e" || ch=="I" || ch=="i" || ch=="O"
|| ch=="o" || ch=="U" || ch=="u")
count++;
}
alert("Number of Vowels in string are "+count);
}
</script></head>
<body bgcolor="pink"><center>
<h1>To accept string from user and count number of
vowels</h1>
<form name="frm">
Enter string<input type="text" name="t1"
required><br><br>
<input type="button" name="b" value="Counting of Vowels"
onClick="test()"></center>
</form>
</body>
</html>
<!DOCTYPE html5>
<html>
<head><title></title>
<h1>background color changes automatically</h1>
<script language="JAVASCRIPT">
function f1()
{
window.setTimeout('document.bgColor="blue"',1000);
window.setTimeout('document.bgColor="pink"',1200);
window.setTimeout('document.bgColor="green"',1400);
window.setTimeout('document.bgColor="grey"',1600);
window.setTimeout('document.bgColor="black"',1800);
window.setTimeout('document.bgColor="yellow"',2000);
window.setTimeout('document.bgColor="cyan"',2200);
}
function m()
{
window.status="It is a magic!!";
}
</script>
<body >
<center>
<form name="frm">
<input type="button" value="colors" OnMouseOver="f1()">
<input type="button" value="msg" onClick="m()">
</form>
</body>
</html>
*****************************************************
<html>
<body onLoad="f1()" onunLoad="m()">
<h1>background color changes automatically</h1>
<script language="JAVASCRIPT">
function f1()
{
window.setTimeout('document.bgColor="blue"',1000);
window.setTimeout('document.bgColor="pink"',1200);
window.setTimeout('document.bgColor="green"',1400);
window.setTimeout('document.bgColor="grey"',1600);
window.setTimeout('document.bgColor="black"',1800);
window.setTimeout('document.bgColor="yellow"',2000);
window.setTimeout('document.bgColor="cyan"',2200);
}
function m()
{
alert("UnloadPage!!");
}
</script>
</body>
</html>

12th Science Practical

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

12th Science Practical

Uploaded by

Copyright:

Available Formats

INDEX

A] Advanced Web Designing Pg no Sign

5) Create webpage name Audio file with controls.

C] Server‐Side Scripting (PHP)

2) Write a PHP program to check Electricity Bill.

<title>Single Audio with Control</title>

<h1 align="center">Audio with Control</h1>

<audio controls autoplay loops="-1">

<source src="C:\users\public\music\sample music\kalimba.mp3" type="audio/mpeg">

echo "<b>Marks in English:"

.$marks[0] . ",<br> Marks in Hindi:"

.$marks[1] . ",<br> Marks in Marathi:"

.$marks[2] . ",<br> Marks in Maths:"

.$marks[3] . ",<br> Marks in Information Technology:"

echo "<br>Total marks obtain by Students:$total";

echo "<br>Percentage obtained is:$per";

Screen reader support enabled.

Sancheti English School

<meta name="author" content="Physical Tags">

<h1 align="center">Sancheti English School & Jr. College</h1>

is providing quality education to students. </p>

<b>Sancheti English School and Junior College</b><br><br>

<img src="C:\Users\admin\Desktop\Tulips.jpg" width="200" height="250" alt="Sancheti">

<a href="C:\XII New Programs\Textbook\sop1\page2.html">Second Page</a> </body>

************************************************************* <!DOCTYPE html5>

<meta name="author" content="Form">

<H2 align="center">Feedback form</H2>

<font size="5">First name:<input type="text" name="firstname"><Br><br> Last name:<input

Email Address:<input type="text name="email"><Br><br>

Contact No.:<input type="text name="C no."><br><br>

please enter your comment below:<br>

<textarea name=a rows=10 cols=20></textarea><BR>

<input type="submit" value="Send">

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

Turn on screen reader support

<h1 align="center">Tourist Place</h1>

<h3>Tourist Places In Pune</h3>

<li>Aga Khan Palace</li>

Client Side Image Mapping

<h2 align="center">Client Side Image Mapping</h2>

<area shape="rect" coords="105,47,360,148" href="a1.html" alt="a1"> <area shape="circle"

You might also like