Scribd
Upload
83 views33 pages

Xii Sci It Practicals

Uploaded by

kapadesagar12
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
83 views33 pages

Xii Sci It Practicals

Uploaded by

kapadesagar12
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

XII SCIENCE IT PRACTICALS

Group A
SOP 1
Use of Audio on web pages using HTML5.
Create a webpage named audio.html to set an audio
file in web page with controls such that it uses HTML5
elements. The audio file must play as soon as the
webpage loads in browser and it will start over again,
every time when it is completed.
Create another webpage named audio1.html which
provides multiple source file formats for the same
audio file that plays a sound automatically with
controls. The browser should display the message with
appropriate attribute, when audio file is not supported
by browser. The code must incorporate the list of
sound files formats (like wav, MP3 or ogg etc).
audio.html

<!Doctype html>
<html>
<head>
<title> Audio </title>
</head>
<body>
<center>
<h1> Audio with controls (single source file) </h1>
<audio controls loop=-1 autoplay>
<source src=”audio.mp3” type=”audio/mpeg”>
</source>
</audio>
</center>
</body>
</html>

audio1.html

<!Doctype html>
<html>
<head>
<title> audio </title>
</head>
<body>
<center>
<h1> Audio with controls (Multiple source file) </h1>
<audio controls autoplay>
<source src=”audio1.wav” type=”audio/wav”>
</source>
<source src=”horse.ogv” type=”audio/ogg”>
</source>
Your browser does not support the audio element.
</audio>
</center>
</body>
</html>
SOP 2
Use of video on web pages using html5.
Create a webpage named video.HTML to display a video
file on web page and plays automatically with controls.
The dimension of video area should be 150 * 150 pixels.
Create another webpage which provide multiple source
file formats for the same audio file that plays a sound
automatically with controls. The dimension of video area
should be 100*100 pixels. The browser should display the
message with appropriate attribute when audio file is not
supported by browser. The code must incorporate the list
of video files formats (like webM, MP4 or ogg etc).
video.html

<!Doctype html>
<html>
<head>
<title> Video </title>
</head>
<body>
<center>
<h1> Video with controls (single source file) </h1>
<video width=”150” height=”150” controls autoplay>
<source src=”movie.mp4” type=” video/mp4”>
</source>
</video>
</center>
</body>
</html>

video1.html

<!Doctype html>
<html>
<head>
<title> Video </title>
</head>
<body>
<center>
<h1> Video with controls (Multiple source file) </h1>
<video width=”100” height=”100” controls autoplay>
<source src=”video1.webm” type=”video/webm”>
</source>
<source src=”video.ogv” type=”video/ogg”>
</source>
Your browser does not support the video tag.
</video>
</center>
</body>
</html>
SOP 3
Navigation on an image using Client side image
Mapping in web page using html 5.
➢ Create a webpage named imagemap. html with an
inserted image having jpeg, png or gif extension. Create
3 different shapes (like rectangle, circle and polygon)
which do not overlap. Note the co-ordinates making use
of Ms- Paint/GIMP/IrfanView/Pinta. Each shape
should be mapped or navigate with a different URL
that should navigate to a local webpage.
Imagemap.html

<!Doctype html>
<html>
<head>
<title> Image Map </title>
</head>
<body>
<center>
<h1> Client Side Image Mapping </h1>
<img src=”desert.jpg” height=”70%” width=”70%” usemap=”#abc”>
<map name=”abc”>
<area shape=”rect” coords=”26,45,173,163”
href=”https://www.google.com”>

<area shape=”circle” coords=”350,106,90”


href=”https://www.gmail.com”>

<area shape=”poly” coords=”166,371,333,459,164,459”


href=”https://www.facebook.com”>

</map>
</center>
</body>
</html>
SOP 4
• Create a webpage using HTML and CSS code to design a web
page as the layout displayed below.
The top section will display the heading,‟Tourist places‟ in
header. The section on the left has list of cities. The right hand
side display tourist places in any one of the city.
Use Inline style sheet in the top section to display background
color for the text „Tourist places‟. Use internal stylesheet for the
left and right section with background color and font styles.

Tourist Places
City Tourist places in Pune
1. Pune • Shaniwarwada
2. Banglore • Kelkar Museum
3. Hyderabad • Sinhgad fort
4. Delhi
Page1.html
<!Doctype html> <html>
<head>
<title> Tourist Places </title>
<style>
section{background-color:pink;width:50%;height:50%;float:right}
aside{background-color:yellow;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:skyblue;height:100pt">
<h1 align="center"> Tourist Places </h1>
</header> <br>
<aside>
<h3> City </h3>
<ol>
<li> Pune </li>
<li> Banglore </li>
<li> Hyderabad </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>
SOP 5
Creation of website using HTML5
Create a website using HTML5 and CSS using any 4 CSS properties.
Write a code for 2 separate pages having different file names such as
first page as Index. html and second page as page2.html. Use any theme
such as college profile or company profile etc. Every page must contain
proper Meta information and design web page as follows

1) The index page must contain a heading which is highest among other
text on pages and must be at centre of the page. There must be a
paragraph which introduces general information about the theme chosen.
It must have at least 3 physical style tags and one image with alternate
text. This page must be connected to other page with proper navigational
links.
2) The 2nd page must contain the feedback or enrolment form related
with theme chosen with features of HTML5. The form must contain text
element and email address of the company or person. Include the submit
button.
index.html

<!Doctype html>
<html>
<head>
<title>Tata Group</title>
<meta charset=”utf-8”>
<meta name=”author” content=”Physical Tags”>
<style>
h1{border-style:dotted}
p{color:red;font-size:15pt}
body{background-color:pink}
b{text-decoration:overline}
u{text-align:right}
</style>
</head>
<body>
<h1 align=”center”> Tata Sons Private Limited </h1>
<p>
66% of the equity share capital of Tata Sons is held by
philanthropic trusts, which support education, health,
livelihood generation, and art and culture. Each Tata
company or enterprise operates independently under the
guidance and supervision of its own Board of Directors.
</p>
<b> Governance Philosophy </b> <br><br>
<i> Tata Code of Conduct </i> <br><br>
<u> Tata Business Excellence Model (TBEM) </u><br><br>
<h3> Image of Tata Industries </h3>
<img src=”Tata.jpg” width=”200” height=”250” alt=”Tata Industries”>
<br> <br>
<a href=”second.html”> Second Page </a>
</body> </html>
second.html

<!Doctype html>
<html>
<head>
<title> Forms </title>
<meta charset=”utf-8”>
<meta name=”author” content=”Form”>
<style>
h1{border-style:dashed}
body{background-color:aqua}
</style>
</head>
<body>
<h1 align=”center”> Enrollment Form</h1>
<form name=”f1”>
Enter Your Name: <input type=”text” name=”t1” required> <br><br>

Enter Your Email-id:<input type=”Email” name=” emailed”> <br> <br>

<input type=”Submit” name=”Submitbtn” value=”Submit”>

</form>
<a href=”index.html”>First Page</a>
</body>
</html>
Group B
SOP 6
Create JavaScript program for the following form
validations. Make use of HTML5 properties to do the
following validations:
1) Name, address, contact number and email are
required fields of the form.
2) Address field should show the hint value which will
disappear when field gets focus or key press event.
3) Telephone number should be maximum 10 digit number
only.
4) Email field should contain valid email address, @
should appear only once and not at the beginning or at
end. It must contain at least one dot(.).
5) Make use of pattern attribute for email to accept
lowercase, uppercase alphabets, digits and specified
symbols.
e-mail validation.html

<!Doctype html>
<html>
<head>
<title> Javascript </title>
</head><body>
<h1> Information Form </h1>
<form name=”f1”>
Your name: <input type=”text” name=”t1”> <br> <br>
Address: <textarea name=”txt_address”
placeholder=”Permanent Address”> </textarea> <br> <br>
Contact: <input type=”tel” name=”telephone”
maxlength=”10”> <br> <br>
Email: <input type=”email” name=”txt_email”
pattern=”[A-Z a-z]-[@]{1}-[.]{1}”> <br> <br>
<input type=”button” name=”b1” value=”submit”
onClick=”validate_email()”>
</form>
</body>
<script type=”text/Javascript”>
function validate_email()
{
var x=f1.txt_email.value;
var at_pos=x.indexOf(“@”);
var last_pos=x.lastIndexOf(“@”);
var firstdot_pos=x.indexOf(“.”);
var dot_pos=x.lastIndexOf(“.”);
if(at_pos<1||dot_pos<at_pos+2||dot_pos+2>=x.length||
firstdot_pos<at_pos||at_pos<last_pos)
{
alert(“Not an Valid email address”);
f1.t3.focus();
}
else
{
alert(“Valid Email Address”);
return true;
}
}
</script>
</html>
SOP 7
Create event driven JavaScript program for the following.
Make use of appropriate variables, JavaScript inbuilt
string functions and control structures.
➢ To accept string from user and count number of vowels
in the given string.
Vowels.html
<!Doctype html>
<html>
<head>
<title> Javascript </title>
</head>
<body>
<form name=”form1”>
<h1> Enter the string whose vowel is to be counted </h1>
<input type=”text” name=”text1”>
<input type=”submit” name=”check vowel” value=”click to
count” onClick=”count()”>
</form> </body>
<script type=”text/Javascript”>
function count()
{
var i,ch,str,counter=0;
str=form1.text1.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')
counter ++;
}
alert(“Number of vowels in entered string
is:”+counter);
}
</script>
</html>
SOP 8
Create event driven JavaScript program for the following.
Make use of appropriate variables, JavaScript inbuilt
string functions and control structures.
➢ To accept string from user and reverse the given string
and check whether it is palindrome or not.
Palindrome.html
<!Doctype html>
<html>
<head>
<title>Palindrome</title>
</head>
<body>
<form name=”frm1”>
Enter Your Name:
<input type=”text” name=”t1”> <br> <br>
<input type=”button” name=”btncheck” value=”Check
Palindrome” onClick=”chk()”>
</form>
</body>
<script type=”text/javascript”>
function chk()
{
var a,s,i,ch,n;
a=frm1.t1.value;
s=a.toLowerCase();
n=s.length;
var p=1;
for(i=0;i<n/2;i++)
{
if(s.charAt(i)!=s.charAt(n-1-i))
{
p=0;
break;
}
}
if(p==1)
alert(“string is Palindrome”);
else
alert(“string is not a Palindrome”);
}
</script>
</html>
SOP 9

Create JavaScript program which compute the average


marks of students. Accept six subject marks of student
from user. Calculate average marks of student which
is used to determine the corresponding grades.
Range Grade
35 to 60 F
61 to 70 D
71 to 80 C
81 to 90 B
91 to 100 A
Marks.html

<!Doctype html>
<html>
<head>
<title> Marks </title>
</head>
<body>
<form name=”frm1”>
Enter Marks of English:
<input type="number" name="t1"> <br><br>
Enter Marks of Maths:
<input type="number" name="t2"> <br> <br>
Enter Marks of Physics:
<input type="number" name="t3"> <br><br>
Enter Marks of Chemistry:
<input type="number" name="t4"> <br><br>
Enter Marks of IT:
<input type="number" name="t5"> <br> <br>
<input type="button" name="btnclick" value="print
Grade" onClick="grade()">
</form>
</body>
<script type="text/javascript">
function grade()
{
var m1,m2,m3,m4,m5,a;
m1=parseInt(frm1.t1.value);
m2= parseInt (frm1.t2.value);
m3= parseInt (frm1.t3.value);
m4= parseInt (frm1.t4.value);
m5= parseInt (frm1.t5.value);
a=(m1+m2+m3+m4+m5)/5;
alert("Average Marks of Student is:"+a);
if(a>=91)
alert("Grade A");
else
{
if(a>=81)
alert("Grade B");
else
{
if(a>=71)
alert("Grade C");
else
{
if(a>=61)
alert("Grade D");
else
alert("Grade F");
} }
}
}
</script> </html>
SOP 10
Write a PHP program to check if a person is eligible to
vote or not. The program should include the following-
➢ Minimum age required for vote is 18.
➢ Use PHP functions.
➢ Use Decision making statement.
age.html

<!Doctype html>
<html>
<head>
<title> age </title>
</head>
<body>
<h1 align="center"> Check if a person is eligible to vote or not
</h1>
<form method="post" action="age.php">
Enter your age:<input type="text" name="age" id="age">
<br><br><br>
<input type=”submit” value="check eligibility for voting"
name="submit">
</form>
</body>
</html>
age.php
<?php
function check()
{
$age=$_POST["age"];
if($age>=18)
{
echo"<br><br>You are eligible to vote";
}
else
echo "<br><br>You are not eligible to vote";
}
check();
?>
SOP 11
Write a program using PHP to calculate Electricity
bill by accepting the limits.
➢ For first 100 units - Rs. 4
➢ For next 100 units - Rs. 5
➢ For next all units - Rs. 6
bill.html
<!Doctype html>
<html>
<head>
<title> Bill </title>
</head>
<body>
<h1 align="Center">Electricity Bill</h1>
<form method="post" action="bill.php">
Enter Number of Units (Limits):<input type="text"
name="units"><br><br>
<input type="submit" name="submit" value="Calculate Bill">
</form>
</body>
</html>

bill.php

<?php
$units=($_POST["units"]);
if($units<=100)
{
$b=$units*4;
echo "Your Bill amount is ".$b;
}
else
{
if($units<=200)
{
$b=400+($units-100)*5;
echo "Your Bill amount is ".$b;
}
else
{
$b=400+500+($units-200)*6;
echo "Your Bill amount is ".$b;
}
}
?>
SOP 12
Write a PHP function to count the total number of vowels
(a,e,i,o,u) from the string. Accept a string by using
HTML form.
Vowel.html

<!Doctype html>
<html>
<head>
<title> vowels </title>
</head>
<body>
<form method="post" action="vowel.php">
<h1>Enter a string :<input type=text name="str"><br>
<input type=submit value="count number of vowels"
name="submit">
</form>
</body>
</html>

Vowel.php
<?php
$str=($_POST["str"]);
$str=strtolower($str);
$c=substr_count($str,"a")+substr_count($str,"e")
+substr_count($str,"i")+
substr_count($str,"o")+substr_count($str,"u");
echo "Number of vowels in the string are ".$c;
?>

You might also like