Scribd
Upload
41 views30 pages

IT Journal Science 2024-25

Journal

Uploaded by

Sumit Patel
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
41 views30 pages

IT Journal Science 2024-25

Journal

Uploaded by

Sumit Patel
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/ 30

MAHARASHTRA STATE BOARD

INFORMATION TECHNOLOGY PRACTICALS


CLASS XII
STREAM: SCIENCE
Index
Sr. Name of Experiment Dates as per your
No batches
Advanced Web Designing

1 Create a webpage using HTML and CSS code to design a


web page as the layout displayed.

2 Create a website using HTML and CSS code to


design webpages

3 Use of Audio on web pages using HTML5

4 Use of video on web pages using html5.

5 Navigation on an image using Client side image


Mapping in a web page using html 5.

JavaScript
6 Creation of two web page in HTML to change
background color

7 Creation of event driven JavaScript program to


accept string from user and count number of vowels
in the given string..

8 Creation of event driven JavaScript program to


convert temperature to and from Celsius,
Fahrenheit.
9 JavaScript program to display result.

PHP
10 Use of PHP to check if a person is eligible to vote
or not.

11 Use of PHP to count the total number of


vowels(a,e,i,o,u) in the string.

12 Use of PHP to calculate Electricity bill by accepting


the limits.
The Format to write the content in the Journal.
BLANK PAGE RULED PAGE(Use only blue or black pen)

1. Paste output printout . • Practical number as in above List.


• Aim of Practical
• Program as given in document.
• Write page no on ruled and index page

Advanced Web Designing


Experiment 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.

<html>
<head>
<title> Tourist Place </title>
<style>
section{background-color:yellow;width:50%;height:50%;
float:left;color:black;font-size:30px;outline-style:solid;}
aside{background-
color:pink;width:50%;height:50%;float:right;color:black;
font-size:30px;outline-style:solid;}
ol{font-weight:bold;font-size:20px}
ul{font-weight:bold;font-size:20px}
</style>
</head>
<body>
<header
style="background-color:lightblue;text-align:center;height:30%;width:100
%;font-size:50px;outline-style:solid;color:deeppink;">Tourist
places</header>
<section>
<b>City</b>
<ol>
<li> Pune </li>
<li> Banglore</li>
<li>Delhi</li>
<li> Hydrabad </li>
</ol>
</section>
<aside>
<b>Tourist places</b>
<ul>
<li> Shaniwarwada </li>
<li> Sinhgad </li>
<li> Kelkar Museum </li>
</ul>
</aside>
</body> </html>
Output
Experiment No. 2 :
Create a website 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.

File Name: page 1.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>
Enter your name
<input type="text" name="name" autocomplete><br><br>
Select Date of Traveller
<input type="date" name="trvdate"><br><br>
Enter Telephone Number
<input type="tel" name="phone" pattern="[0-9]{2}-[0-9]{10}
required"><br><br>
</form>
<a href="D:\12th IT\page 2.html">
<img src=" D:\12th IT\Submit Button.jpg" width="150"></a>
</body>
</html>
File Name: page 2.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 the transporter - Air Asia</li>
<li>Time - 09:30 am</li>
<li>Seat no - B39</li>
<li>Destination - Delhi</li>
</ul>
<a href=" D:\12th IT\page 1.html ">Connect First Page</a>
</body>
</html>

File Name: external.css

h1{background-color:blue;border-style:double;co
lor:white} body{background-color:lightyellow}
ul{font-family:comic sans ms}
Output:
Experiment 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 with controls. The browser should display the message with
appropriate attribute, when audio tag is not supported by browser. The
code must incorporate the list of sound files formats (like wav, MP3 or
ogg etc).

File Name: audio.html


<!doctype html>
<html>
<body>
<h1 align=center>Audio File With Control</h1>
<audio src="C:\Users\Public\Music\Sample Music\Kalimba.mp3" controls
autoplay loop="-1">
</audio>
</body>
</html>

File Name: audio1.html


<!DOCTYPE html>
<html>
<head>
<title>Multiple Audio files with control</title>
</head>
<body>
<h1 align="center">Multiple Audio files with control</h1>
<h2>The text between the audio tags will only be displayed in
browser that do not support the audio element</h2>
<h3>List of sound files formats</h3>
<ol>
<li>mp3-audio/mp3</li>
<li>ogg-audio/ogg</li>
<li>wav-audio/wav</li>
</ol>
<audio controls autoplay>
<source src="C:\Users\PACE 07\Documents\12th IT\Experiment
No. 4\final\Jana Gana Mana.mp3" type="audio/mp3">
<source src="C:\Users\PACE 07\Documents\12th IT\Experiment No.
4\final\Jana-Gana-Mana-.ogg" type="audio/ogg">
<source src="C:\Users\PACE 07\Documents\12th IT\Experiment
No. 4\final\Jana Gana Mana.wav" type="audio/wav">
</audio>
</body>
</html>

Output:
Experiment 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. The dimension of video area should be 150 * 150 pixels.
Create another webpage which video provide multiple source file formats for the
same video file that plays a video with controls. The dimension of video area should
be 300*300 pixels. The browser should display the message with appropriate
attribute when video tag is not supported by browser. The code must incorporate
the list of video files formats (like webM, MP4 or ogg etc).

File Name: video.html


<!DOCTYPE html>
<html>
<head>
<title>Video Insert Practical</title>
</head>
<body>
<h1 align = "center"> Single Video File on web Page with Controls</h1>
<video src="Jana Gana Mana.mp4" type="video/mp4"
height="150" width="150" controls autoplay="autoplay">
</video>
</body>
</html>

File Name: video2.html


<!Doctype html>
<html>
<head>
<title>Multiple Video File on web page with controls</title>
</head>
<body>
<h1 align = "center"> This page contains a video with dimention 100 by
100 px</h1>
<h2>The text between the video tags will only be displayed in
browsers that do not support the video element</h2>
<video width = "100" height = "100" controls autoplay >
<source src = "Jana Gana Mana.mp4" type = "video/mp4">
<source src = "Jana Gana Mana.ogg" type = "video/ogg">
<source src = "Jana Gana Mana.webm" type = "video/webm">
Your browser does not support give audio file format.
</video>
<body>
</html>
Output
Experiment No. 5 :
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 down
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.

<!DOCTYPE HTML>
<html>
<head><title>image map</title>
</head>
<body>
<h1>An example of Image Map</h1>
<img src="C:\Users\PACE 07\Pictures\sky.jpg"
usemap="#imagemap" alt="Image " height="500" width="550">
<map name="imagemap">
<area href="http://www.google.com" shape="rect"
coords="57,230,223,277" alt="google site"/>
<area href=" C:\Users\PACE 07\Documents\12th IT\Chapter 1
Advanced Web Designing\float property.html" shape="circle"
coords="266,92,40" alt="html file"/>
<area href="http://mahahsscboard.in"
shape="poly"coords="360,255,438,311,406,413,309,412,278,312"
alt="maharashtra stateboard site"/>
</map>
</body></html>
Output:
JavaScript
Experiment No. 6 :
Create a web page in HTML having a white background and one Button Object.
Write code using JavaScript such that when the mouse is placed over the first
button object without clicking, the color of the background of the page should
change after every seconds. There should at least be 7 different and visibly
distinct background colors excluding the default color. Create another web page
using JavaScript where the background color changes automatically after every
seconds. This event must be triggered automatically after the page gets loaded in
the browser. There should at least be 7 different and visibly distinct background
colors.
File Name: chang background color page1.html
<!doctype html>
<html>
<head>
<script type="text/javascript">
function red()
{
document.bgColor="red"; window.setTimeout("yellow()",5000)
}
function yellow()
{
document.bgColor="yellow"; window.setTimeout("pink()",5000)
}
function pink()
{
document.bgColor="pink"; window.setTimeout("green()",5000)
}
function green()
{
document.bgColor="green"; window.setTimeout("orange()",5000)
}
function orange()
{
document.bgColor="orange"; window.setTimeout("purple()",5000)
}
function purple()
{
document.bgColor="purple"; window.setTimeout("blue()",5000)
}
function blue()
{
document.bgColor="blue"; window.setTimeout("red()",5000)
}
</script>
</head>
<body>
<center>
<h1>CHANGE BACKGROUND COLOR AFTER EVERY FIVE SECONDS</h1>
<input type="button" value="CHANGE BACKGROUND COLOR" onmouseover="red()">
<center>
</body>
</html>
Output:
File Name: File Name: chang background color page2.html

<!doctype html>
<html>
<head>
<script type="text/javascript">
function f1()
{
document.bgColor="red";
window.setTimeout("f2()",5000);
}
function f2()
{
document.bgColor="yellow";
window.setTimeout("f3()",5000);
}
function f3()
{
document.bgColor="blue";
window.setTimeout("f4()",5000);
}
function f4()
{
document.bgColor="pink";
window.setTimeout("f5()",5000);
}
function f5()
{
document.bgColor="purple";
window.setTimeout("f6()",5000)
}
function f6()
{
document.bgColor="orange";
window.setTimeout("f7()",5000)
}
function f7()
{
document.bgColor="brown";
window.setTimeout("f1()",5000);
}
</script>
</head>
<body onload="f1()">
<h1 align="center">CHANGE BACKGROUND COLOR AFTER 5 SECONDS
AUTOMATICALLY</h1>
</body>
</html>

Output:
Experiment No. 7 :
Create an 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.

File Name: vowel count.html


<!DOCTYPE html>
<html>
<head><title>Experiment No. 7 count vovals</title>
<script type="text/javascript">
function countvovals()
{
var a,count=0,l,v;
a=form1.t1.value;
l=a.length;
for(i=0;i<=l;i++)
{
v=a.charAt(i);
if(v=="A" || v=="E" || v=="I" || v=="O" || v=="U" || v=="a" || v=="e" || v=="i" ||
v=="o" || v=="u")
{
count=count+1;
}
else
{
continue;
}
}
alert("Vovals are "+count);
}
</script>
</head>
<body>
<form name="form1">
<h1>Program to count vovals</h1>
Enter String:<input type="text" name="t1"><br><br>
<input type="button" value="Submit" onclick="countvovals()">
</form></body></html>
Output:

Experiment 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
File Name:temperature.html
<!DOCTYPE html>
<html>
<head><title>Experiment No. 8 TEMPERATURE</title>
<script type="text/javascript">
function temperature()
{
var c,f,ctof,ftoc;
c=form1.t1.value;
f=form1.t2.value;
ctof=c*9/5+32; ftoc=(f-32)*5/9;
document.form1.t3.value=ctof;
document.form1.t4.value=ftoc;
}
</script>
</head>
<body>
<form
name="form1">
Enter number in
Celcious:
<input type="text" name="t1"><br><br> Enter number in Fahrenheit:
<input type="text" name="t2"><br><br> Result in Celcious to Fahrenheit:
<input type="text" name="t3"><br><br> Result in Fahrenheit to Celcious:
<input type="text" name="t4"><br><br>
<input type="button" value="Convert" onclick="temperature()">
</form>
</body>
</html>
Output:
Experiment 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

File Name: result.html


<!DOCTYPE html>
<html>
<head><title>Average marks of students</title>
<script type="text/javascript"> function student()
{
var eng,phy,chem,math,bio,it,avg; eng=parseInt(form1.t1.value);
phy=parseInt(form1.t2.value); chem=parseInt(form1.t3.value);
math=parseInt(form1.t4.value); bio=parseInt(form1.t5.value);
it=parseInt(form1.t6.value); total=eng+phy+chem+math+bio+it; avg=total/6;
alert("Average is "+avg); if(avg>=35 && avg<=60)
{
grade = 'F';
}
else if(avg>=61 && avg<=70)
{
grade = 'D';
}
else if(avg>=71 && avg<=80)
{
grade = 'C';
}
else if(avg>=81 && avg<=90)
{
grade = 'B';
}
else if(avg>=91 && avg<=100)
{
grade = 'A';
}
alert ("Grade of student is "+grade);
}
</script>
</head>
<body>
<form name="form1">
Enter English marks: <input type="text" name="t1"><br><br> Enter Physics marks:
<input type="text" name="t2"><br><br> Enter Chemistry marks: <input type="text"
name="t3"><br><br>
Enter Mathematics marks: <input type="text" name="t4"><br><br> Enter Biology marks:
<input type="text" name="t5"><br><br> Enter IT marks: <input type="text"
name="t6"><br><br>
<input type="button" value="Result" onClick="student()">
</form>
</body>
</html>
Output:
Server-Side Scripting (PHP)
Experiment 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.

File Name: vote.php


<!DOCTYPE html>
<html>
<head> <title>Eligible to Vote or not</title></head>
<body>
<form action="" method="post">
Enter a no :
<input type="text" name="t1" placeholder="Enter a number">
<br><input type="submit" name="submit" value="submit">
</form>
<?php
if (isset($_POST['submit'])) {
vote();
}
function vote() {
$a = $_POST['t1'];
intval($a);
if($a>=18){
echo "You are Eligible for Vote";
}
else{
echo "You are not Eligible for Vote";
}
}
?>
</body>
</html>
Output:
Experiment No. 11:
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.

File Name: Vowel Count.php


<!doctype html>
<html>
<body>
<h2>Find Number of Vowels in a string</h2>
<form action=""method="post">
<input type="text" name="string"/>
<input type="submit"/>
</form>
</body>
</html>
<?php if($_POST)
{
$string = strtolower($_POST['string']);
$vowels = array('a','e','i','o','u');
$len = strlen($string);
$num = 0;
for($i=0; $i<$len; $i++){
if(in_array($string[$i], $vowels))
{
$num++;
}
}
echo"Number of vowels : ".$num;
}?>

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

File Name: percentage.php


<?php
$subject_marks = array('English'=>56,'Hindi'=>76,
'Marathi'=>56,'Maths'=>57,'IT'=>78);
$total_marks = $subject_marks['English']+
$subject_marks['Hindi']+$subject_marks['Marathi']+
$subject_marks['Maths']+$subject_marks['IT'];
echo "English : ".$subject_marks['English'];
echo "<br>Hindi : ".$subject_marks['Hindi'];
echo "<br>Marathi : ".$subject_marks['Marathi'];
echo "<br>Maths : ".$subject_marks['Maths'];
echo "<br>IT : ".$subject_marks['IT'];
echo "<br><br>Total :".$total_marks;
$percentage = $total_marks/5;
echo"<br>Percentage : ".$percentage;
?>
Output:

You might also like