[go: up one dir, main page]
Scribd
Upload
4K views21 pages

XII Science I.T Practicals

Uploaded by

ramzankhan04858
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
4K views21 pages

XII Science I.T Practicals

Uploaded by

ramzankhan04858
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/ 21

INDEX

1. HTML and CSS code to design a Tourist Places webpage.


2. HTML and CSS code to design a Traveller and Transporter Information web
page.
3. Use of audio on web page using HTML5.
4. Use of video on web page using HTML5.
5. Navigation on an image using Client-side image mapping.
6. JavaScript program to count number of vowels in the given string.
7. JavaScript program to determine palindrome string or not.
8. JavaScript program to convert the temperature into Celsius and Fahrenheit.
9. JavaScript program to determine the average marks and grades of students.
10.PHP program to check if a person is eligible to vote or not.
11.PHP program to count the total number of vowels from the string.
12.PHP program to display total marks and percentage using array.
Practical No. 1
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 displays tourist places of 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 • Shanivarwada
2. Banglore • Kelkar Museum
3. Hyderabad • Sinhgad fort
4. Delhi • Aga Khan Palace

Code:

<!DOCTYPE html>
<html>
<head>
<title>Tourist Places </title>
<style>
section{background-color:pink;
width:50%;
height:50%;
float:right
}
aside{ width:50%;
height:50%;
float:left;
background-color:lightgreen
}
ol{ font-style:italic;
font-size:20pt
}
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>
<h2> City</h2>
<ol>
<li>Pune</li>
<li>Banglore</li>
<li>Hyderabad</li>
<li>Delhi</li>
</ol>
</aside>
<section>
<h2> Tourist places in Pune</h2>
<ul>
<li>Shanivarwada</li>
<li>Kelar Museum</li>
<li>Sinhgad fort</li>
<li>Aga Khan Palace</li>
</ul>
</section>
<body>
</html>

Output:
Practical No. 2

Create a webpage using HTML and CSS code to design webpages as follows –
The first webpage will accept the name of the traveller, date of travel, telephone number. It also has
submit button as an image.
The second webpage has information about the name of transporter, time, seat no and destination
displayed one below the other in the form of unordered list as
Name of transporter – Air Asia
Time – 09:30 am
Seat no – B39
Destination – Delhi
Both pages should be interlinked. Create external stylesheet with relevant tags.

Code:
Travellerform.html
<!DOCTYPE html>
<html>
<head>
<title> Information Form </title>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
<h1 align="center">Traveller Information Form</h1>
<form action="Transporter.html">
Enter your name
<input type="text" name="name" autocomplete><br><br>
Select Data of Travel
<input type="date" name="trvdate"><br><br>
Enter Telephone Number
<input type="tel" name="phone" placeholder="123-456-7890"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required><br><br>
<input type="image" src="D:\submitbutton.png" width="100" >
</form><br><br>
</body>
</html>
Output:
Transporter.html
<!DOCTYPE html>
<html>
<head>
<title> Information about Transporter </title>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
<h1 align="center">Information about Transporter</h1>
<ul>
<li>Name of Transporter - Air Asia</li>
<li>Time - 09:30 am </li>
<li>Seat no - B39</li>
<li>Destination - Delhi</li>
</ul>
<a href="Travellerform.html">Connect First Page</a>
</body>
</html>

external.css
h1{background-color:green;border-style:double}
body{background-color:lightgreen}
ul{font-family:Algerian}

Output:
Practical No. 3

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 video files formats (like wav, MP3 or ogg etc.)

Code:
audio.html
<!DOCTYPE html>
<html>
<head>
<title>
Single Audio with controls
</title>
</head>
<body>
<h1 align="center">Audio with controls</h1>
<audio controls autoplay loop = "-1">
<source src= "D:\Audio\sampleaudio.mp3" type= "audio/mpeg">
</audio>
<body>
</html>

Output:
audio1.html
<!DOCTYPE html>
<html>
<head>
<title>
Multiple Audio File with controls
</title>
</head>
<body>
<h1 align="center">Multiple Audio File with controls</h1>
<h2> The text between the audio tags will only be displayed in browsers that do not support
the video element. </h2>
<h3>List of sound files formats</h3>
<ol>
<li>mp3 - audio/mpeg</li>
<li>ogg- audio/ogg</li>
<li>wav - audio/wav</li>
</ol>
<audio controls autoplay>
<source src=" D:\Audio\sampleaudio.mp3" type="audio/mp3">
<source src=" D:\Audio\sampleaudio.ogg" type="audio/ogg">
<source src=" D:\Audio\sampleaudio.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</body>
</html>

Output:
Practical No. 4

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 250*250 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 200 * 200 pixels. The
browser should display the message with appropriate attribute when video file is not supported by
browser. The code must incorporate the list of video files formats (like webM, MP4 or ogg etc.)

Code:
Video.html
<!DOCTYPE html>
<html>
<head>
<title>
Single Video File on Web Page with controls
</title>
</head>
<body>
<h1 align="center">Single Video File on Web Page with controls</h1>
<video src="D:\Videos\Train.mp4" controls
width="250"height="250" loop="-1" autoplay > </video>
<body>
</html>

Output:
Video1.html
<!DOCTYPE html>
<html>
<head>
<title>
Multiple Video File on Web Page with controls
</title>
</head>
<body>
<h1 align="center">Multiple Video File on Web Page with controls</h1>
<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 - video/webm</li>
</ol>
<video controls width="200" height="200" autoplay>
<source src="D:\Videos\Train.mp4" type="video/mp4">
<source src="D:\Videos\Train.ogg" type="video/ogg">
<source src="D:\Videos\Train.webm" type="video/webm">
Your browser does not support the video tag
</video>
</body>
</html>

Output:
Practical No. 5

Navigation on an image using Client side image Mapping in web page using html5.
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/Irfan View/Pinta. Each shape should be mapped or navigate
with a different URL that should navigate to a local webpage.

Code:
imagemap.html
<!doctype html>
<html>
<head>
<title>Client Side Image mapping</title>
</head>
<body>
<h1 align="center">Client Side Image Mapping</h1>
<img src="computer1.jpg" usemap="#Imagemap1">
<map name=Imagemap1>
<area shape="rect" coords="0,0,190,292" href="page1.html">
<area shape="circle" coords="328,389,57" href="video.html">
<area shape="poly" coords="540,66,628,115,450,115,450,211,540,259,628,211"
href="age.html">
</map>
</body>
</html>

Output:
Practical No. 6

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.
.
Code:
<!doctype html>
<html>
<head>
<title>String functions</title>
<script type="text/javascript">
function cnt()
{
var s,i,ch,c;
c = 0;
s = frm1.t1.value;
for(i=0;i<=s.length;i++)
{
ch=s.charAt(i);
if(ch=="A"|| ch=="a"|| ch=="E"||ch=="e"||ch=="I"||ch=="i"||
ch=="O"||ch=="o"||ch=="U"||ch=="u")
{ c++; }
}
alert("Number of Vowels in string are " +c);
}
</script>
</head>
<body>
<form name="frm1">
Enter Your Name
<input type="text" name="t1"><br><br>
<input type="button" name="btncheck" value="Count Vowels" onClick="cnt()">
</form>
</body>
</html>

Output:
Practical No. 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 reverse the given string and check whether it is palindrome or
not.

Code:
palindrome.html
<!DOCTYPE html>
<html>
<head>
<title> Palindrome </title>
</head>
<body>
<form name="frm1">
Enter a text
<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>
Output:
Practical No. 8

Create event driven JavaScript program to convert temperature to and from Celsius,
Fahrenheit.
Formula: c/5 = (f-32)/9
[where c = Temperature in Celsius and f = Temperature in Fahrenheit.]
Output format: 40 Celsius = 104 Fahrenheit
45 Fahrenheit = 7.22222222 Celsius

Code:
celsius.html
<!DOCTYPE html>
<html>
<head>
<title> Convert Temperature </title>
</head>
<body>
<h2>JavaScript Celcius to Fahrenheit</h2>
<p>Insert a number into one of the input fields below:</p>
<p><input type="text" id="c" onkeyup="convert('C')"> Degrees Celsius </p>
<p><input type="text" id="f" onkeyup="convert('F')"> Degrees Farenheit </p>
<p>Note that the <b>Math.round( )</b> method is used, so that the result will be returned as
an integer.</p>
<script type="text/javascript">
function convert(degree)
{
var x;
if(degree == "C")
{
x=document.getElementById("c").value*9/5+32;
document.getElementById("f").value = Math.round(x);
}
else
{
x=(document.getElementById("f").value-32)*5/9;
document.getElementById("c").value = Math.round(x);
}
}
</script>
</body>
</html>
Output:
Practical No. 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

Code:
grade.html
<!doctype html>
<html>
<head>
<title>Grade of Students</title>
<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 Students 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>
</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>
</html>

Output:
Practical No. 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.

Code:
age.html
<html>
<body>
<h1 align="center">Person Eligible to vote or not</h1>
<form method="post" action="age.php">
Enter Your age
<input type="text" name="age"><br><br>
<input type="submit" name="submit" value="Check Eligible">
</form>
</body>
</html>

age.php
<?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";
}
?>

Output:
Practical No. 11

Write a PHP program to count the total number of vowels (a, e, i, o, u) from the string. Accept
a string by using HTML form.

Code:
vowel.html
<html>
<body>
<h1 align="center">String Functions</h1>
<form method="post" action="vowel.php">
Enter String
<input type="text" name="str"><br><br>
<input type="submit" name="submit" value="Count Vowels">
</form>
</body>
</html>

vowel.php
<?php
if(isset($_POST['submit']))
{
$str = strtolower($_POST['str']);
$vowels = array('a','e','i','o','u');
$len = strlen($str);
$num = 0;
for($i=0; $i<$len; $i++)
{
if(in_array($str[$i],$vowels))
{ $num++; }
}
echo "Number of vowels: ". $num;
}
?>

Output:
Practical No. 12

Write a PHP program to save marks of English, Hindi, Marathi, Maths and Information
Technology in an array. Display marks of individual subject with total marks and percentage.

Code:
marks.php
<?php
$a=array(60,78,74,85,96);
$subject = array("English","Hindi","Marathi","Maths","Information Technology");
$t=0;
$x=0;
$c=count($a);
for($x=0;$x<$c;$x++)
{
echo "<br><br>Marks in $subject[$x] is $a[$x]";
$t=$t+$a[$x];
}
$p=$t*100/500;
echo "<br><br>Total is: $t";
echo "<br><br>Percentage is : $p";
?>

Output:

You might also like