Scribd
Upload
175 views

Practical 12TH IT (Final)

Uploaded by

Monali Shah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
175 views

Practical 12TH IT (Final)

Uploaded by

Monali Shah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 38

CERTIFICATE

Class - Exam Seat No-

This to certify that work entered in this journal is the work of


Mr/Miss.
Subject - _
has satisfactory completed the required number of practical and worked for the 1st
term/2nd term both the terms of the year 20 - 20 in the college
laboratory as laid down by the HSC Board.
No. of experiments performed

Subject Teacher Internal Examiner External Examiner

Date : Principal
INDEX
Sr Title of the Experiment Page Date of Remarks Signature
No. No. Submission of In-
Charge
Experiment No. 1

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 paragraphwhich introduces general
information about the theme chosen must have at least 3 physical style tags and one
image with alternate text. This page must be connected to other two pages 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.

HTML SOURCE CODE :


Page 01 (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-
aligh: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>
Page02 ( Second.html )

<!DOCTYPE html>
<html>
<head>
<title>Form
</title>
<meta charset="utf-8">
<meta name="author" content="Physical Tags">
<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="emailid"><br><br>
<input type = "submit" name ="submitbtn" value= "Submit"
</form>
<a href ="index.html">First Page </a>
</body>
</html>
Experiment No. 2

Creation of a website with frames and css

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
HTML SOURCE CODE :

Page 01 (page1.html)
<!DOCTYPE html>
<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;}
</style>
</head>
<body>
<header style="background-color:lightblue;color:deeppink;text-align:center;
height:30%;width:100%;font-size:50px;outline-style:solid">Tourist places
</header>
<header>
<section>
<b> City </b>
<ol>
<li> Pune </li>
<li> Delhi </li>
<li> Banglore </li>
<li> Hyderabad </li>
</ol>

</section>
<aside>
<p> Tourist places in Pune </p>
<ul>
<li> Shaniwarwada </li>
<li> Sinhgad </li>
<li> Kelkar Museum </li>
</ul>
</aside>
</header>
</body>
</html>
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
usesHTML5 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 automaticallywith controls. The browser should display the message with appropriate
attribute, when audio file isnot supported by browser. The code must incorporate the list of
sound files formats (like wav, MP3or ogg etc).

HTML SOURCE CODE :


Page 01 (audio.html)
<!DOCTYPE html>
<html>
<body>
<p> Audio Example </p>
<audio controls>
<source src="C:\Users\Admin\Downloads\mixkit-a-very-happy-christmas-897.mp3" type="audio/mp3">
</audio>
</body>
</html>

Page02 (audio1.html)
<!DOCTYPE html>
<html>
<body>
<p> Audio Example Autoplay </p>
<audio controls muted>
<source src="C:\Users\Admin\Downloads\mixkit-a-very-happy-christmas-
897.mp3"type="audio/mp3">
</audio>

<audio Controls muted>


<source src="C:\Users\Admin\Downloads\mixkit-driving-in-the-rain-1242.wav"
type="audio/mp3">
</audio>

<audio Controls muted>


<source src="C:\Users\Admin\Downloads\mixkit-bad-weather-heavy-rain-and-thunder-1261.wav"
type="audio/mp3">
</audio>

</body>
</html>
OUTPUT
Page 01 (audio.html)

Page02 (audio1.html)
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 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).

HTML SOURCE CODE :


Page 01(video.html)
<!DOCTYPE html>
<html>
<body>
<p> Video Example </p>
<video controls>
<source src="C:\Users\Admin\Downloads\mixkit-waterfall-in-forest-2213-medium.mp4"
type="video/mp4">
</video>
</body>
</html>

Page02 (Video1.html)
<!DOCTYPE html>
<html>
<body>
<p> video Example Autoplay </p>
<Video height="420" width="460" controls>
<h2> First Video </h2>
<source src="C:\Users\Admin\Downloads\MS-Dhoni-Shorts-Status-Video.mp4"
type="video/mp4">
</video>

<Video height="420" width="460" controls>


<h2> Second Video </h2>
<source src="C:\Users\Admin\Downloads\MS-Dhoni-Haters-Must-Be-Watch-This-Video-DHONI-
LOVERS-_Mahi-_Mahendra-Singh-Dhoni720P_HD.mp4"
type="video/mp4">
</video>

<Video height="420" width="460" controls>


<h2> Third Video </h2>
<source src="C:\Users\Admin\Downloads\Welcome-To-The-Final-CSK-__-CSK-IPL-Final-2023-
Status-_shorts-_cricket-_cricketshorts720P_HD-1.mp4"
type="video/mp4">
</video>

<Video height="420" width="460" controls>


<h2> Fourth Video </h2>
<source src="C:\Users\Admin\Downloads\CSK-INTO-THE-FINALS-_shorts-_csk-_ipl2023-
_finals720P_HD-1.mp4"
type="video/mp4">
</body>
</html>
Output :

Page 01

Page02 :
Experiment No. 5

Javascript Program – use of image mapping

Navigation on an image using Client side image Mapping in web page using html 5.

<!doctype html>
<html>
<head><title>Image mapping</title>
<body>
<p> Program of Image Mapping</p>

<img src="System.jpg" usemap="#workmap">


<map name="workmap">
<area shape="circle" coords="170,160,36" alt="Coffee" href="syst.html">
<area shape="rect" coords="15,142,64,226" alt="CPU" href="cpu.html">
<area shape="rect" coords="31,38,95,98" alt="Applications" href="app.html">

<area shape="rect" coords="100,240,236,270" alt="Keyboard" href="key.html">


<area shape="rect" coords="258,58,346,140" alt="Printer" href="print.html">
<area shape="rect" coords="140,20,214,85" alt="Monitor" href="moni.html">
<area shape="rect" coords="260,200,300,224" alt="Mouse" href="mou.html">
</map>

</body>
</html>
Page2 moni.html

<!doctype html>
<html>
<head><title>Image mapping</title></head>
<body>
<p>this program of Image Mapping>
</p><br>
<p>all detail about</p>

<img src="monitor.jpg">
</body>
</html>

Page3 mou.html

<!doctype html>
<html>
<head><title>Image mapping</title></head>
<body>
<p>this program of Image Mapping>
</p><br>
<p>all detail about</p>

<img src="mouse.jpg">
<img src="mouse1.jpg">
</body>
</html>

Page4 print.html

<!doctype html>
<html>
<head><title>Image mapping</title></head>
<body>
<p>this program of Image Mapping>
</p><br>
<p>all detail about</p>
<img src="print.jpg">
</body>
</html>
Page5 syst.html

<!doctype html>
<html>
<head><title>Image mapping</title></head>
<body>
<p>this program of Image Mapping</p>
</p><br>
<p>all detail about</p>
<img src="supporting-science.jpg">
</body>
</html>

Page6 cpu.html

<!doctype html>
<html>
<head><title>Image mapping</title></head>
<body>
<p>this program of Image Mapping>
</p><br>
<p>all detail about</p>
<img src="cpu.jpg">
</body>
</html>

Page7 app.html

<!doctype html>
<html>
<head><title>Image mapping</title></head>
<body>
<p>this program of Image Mapping>
</p><br>
<p>all detail about</p>
<img src="app.jpg">
</body>
</html>
Experiment No. 6

Javascript Program - Event Handling

Create a web page in HTML having a white background and two button objects. Write docume
code using Javascript such that wehen the mouse is placed over the first button objectnt.bgCo
without clicking, the color of background of the page should change after every seconds.lor="sky
There should at least 7 different and visibly distinct background colors excluding theblue";
defacultcolor. When the second button object is clicked, appropriate message should be
displayed in browser status bar.
Create another web page using JavaScript where the background color changes
automatically after every seconds. This event must be triggered automatically after the page
get loaded in the browser. There should at least 7 different and visibly distict background
colors. When the page is unloaded, the appropriate alert message should be displayed.

HTML SOURCE CODE :


color.html
<!DOCTYPE html>
<html>
<head>
<title> Background colors
</title>
</head>
<body>
<h1 align="center"> 7 Different & visibly distinct background colors</h1>
<form name="frm1">
<center>
<input type="button" name="btncolor" value="Change Colors" onMouseOver="f1()">
<input type="button" name="btnmsg" value="Message Display" onClick=msg()">
<form>
</body>
<script type="text/javascript">
function f1()
{
document.bgColor="red";
window.setTimeout("f2()",1500);
}
function f2()
{
document.bgColor="green";
window.setTimeout("f3()",1500);
}
function f3()
{
document.bgColor="pink";
window.setTimeout("f4()",1500);
}
function f4()
{
document.bgColor="orange";
window.setTimeout("f5()",1500);
}
function f5()
window.setTimeout("f6()",1500);
}
function f6()
{
document.bgColor="violet";
window.setTimeout("f7()",1500);
}
function f7()
{
document.bgColor="aqua";
window.setTimeout("f1()",1500);
}
function msg()
{
window.status="Display of 7 different colors";
}
</script>
</html>
color1.html
<!DOCTYPE html>
<html>
<head>
<title> Background colors
</title>
</head>
<body onLoad="f1()" onUnload="msg()">
<h1 align="center"> 7 Different & visibly distinct background colors</h1>
</body>
<script type="text/javascript"> function
f1()
{
document.bgColor="red";
window.setTimeout("f2()",1500);
}
function f2()
{
document.bgColor="green";
window.setTimeout("f3()",1500);
}
function f3()
{
document.bgColor="pink";
window.setTimeout("f4()",1500);
}
function f4()
{
document.bgColor="orange";
window.setTimeout("f5()",1500);
}
function f5()
{
document.bgColor="skyblue";
window.setTimeout("f6()",1500);
}
function f6()
{
document.bgColor="violet";
window.setTimeout("f7()",1500);
}
function f7()
{
document.bgColor="aqua";
window.setTimeout("f1()",1500);
}
function msg()
{
alert("Display of 7 different colors");
}
</script>
</html>
Output :

color.html
color1.html
Experiment No.7

Javascript Program - Event Handling

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.

HTML SOURCE CODE :


count.html
<!DOCTYPE html>
<html>
<head>
<title>Sop 3 JAVasript Count vowels</title>
</head>
<body>
<form name="form1">
<h1>Enter the String whose vowel isto be counted</h1>
<input type="text" name="text1">
<input type="button" name="btn_checkvowel" value="Click to count" onclick="count()">
</form>
<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>
</body>
</html>
Output :
Experiment No.8

Javascript Program - Event

Handling

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
palindromeor not.

HTML SOURCE CODE :


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="Count Palindrome" onClick="chk()">
</form>
</body>
<script
type="text/javascript">
function chk()
{
var a,s,i,ch,n;
a=frm1.t1.valu
e;
s=a.toLowerC
ase();
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:
Experiment No.9

Javascript Program – use of function

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

HTML SOURCE CODE :

grade.html
<html>
<head>
<title>Sop6</title>
<script type="text/javascript">
function calculate_grade()
{
var m1,m2,m3,m4,m5,m6,avg;
m1=parseInt(form1.txt_eng.value);
m2=parseInt(form1.txt_phy.value);
m3=parseInt(form1.txt_chem.value);
m4=parseInt(form1.txt_it.value);
m5=parseInt(form1.txt_bio.value);
m6=parseInt(form1.txt_math.value);
avg=(m1+m2+m3+m4+m5+m6)/6;
alert("Average marks of Six subject:" +avg);
if(avg>=91 && avg<=100)
{
grade='A';
}
else if(avg>=81 && avg<=90)
{
grade='B';
}
else if(avg>=71 && avg<=80)
{
grade='C';
}
else if(avg>=61 && avg<=70)
{
grade='D';
}
else if(avg>=35 && avg<=60)
{
grade='F';
}
alert("Grade is:" +grade);
}
</script>
</head>
<body>
<form name="form1">
<p>Enter The Six Subjects Marks</p>
English Marks:<input type="text" name="txt_eng"><br><br>
Physics Marks:<input type="text" name="txt_phy"><br><br>
Chemistry Marks:<input type="text" name="txt_chem"><br><br>
IT Marks:<input type="text" name="txt_it"><br><br>
Biology Marks:<input type="text" name="txt_bio"><br><br>
Maths Marks:<input type="text" name="txt_math"><br><br>
<input type="Submit" value="calculate avg marks and grades" onClick="calculate_grade()">
</form>
</body>
</html>
var
f=parseInt(m5);
a=(b+c+d+e+f)/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>
Experiment No.10

PHP Program – use of if statement

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.

SOURCE 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["ag
e"]; if($age>=18)
echo "<br><br>You are Eligible to
vote" else
echo "<br><br>You are not Eligible to vote"
}
?>

Output :
Enter Your age : 19
You are Eligible to vote
Experiment No. 11

PHP Program –use of function.

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.

SOURCE CODE :

vowel.html

<html>
<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:
Enter String-english
Number of vowels: 2
Experiment No.12

PHP Program –use of an array.

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

SOURCE CODE :
marks.php:

<!doctype html>
<html>
<body>
<?php
$a=array(60,78,74,85,96);
$t=0;
$x=0;
$c=count($a);
for($x=0;$x<$c;$x+
+)
{
echo"<br><br>Marks in subject.$a[$x]";
$t=$t+$a[$x];
}
$p=$t*100/500;
echo"<br><br> Total is:
.$t";
echo"<br><br> Percentage is: .$p";
?>
</body>
</html>

Output:

Marks in subject English


Marks in subject Hindi
Marks in subject Marathi
iMarks in subject Maths
Marks in subject Information Technology
Total is : 393
Percentage is : 78.6

You might also like