NIRMALA MEMORIAL FOUNDATION JUNIOR COLLEGE OF COMMERCE AND SCIENCE
INFORMATION TECHNOLOGY
XII SCIENCE
INSTRUCTIONS:
1. Student have to use 200 pages journal (one side blank & one side ruled).
2. Html code has to be written on ruled side.
3. Output picture color printout has to be stick on blank side .
4. New program has to be written on new page.
5. Use only blue pen.
1|Pa ge
INDEX
PRACTICAL DATE OF
Sr.NO
EXPERIMENT
ADVANCED WEB DESIGNING
1. Creation of website using HTML5
2. Use of video on web pages using html5
3. Navigation on an image using Client side image
Mapping in web page using html 5.
4. Create a webpage using HTML and CSS code to
design a web page as the layout displayed
5. Use of Audio on web pages using HTML5
JAVASCRIPT
6. Create event driven java script program for color
change (Part 1 and Part II)
7.
Create event driven JavaScript program to convert
temperature to and from Celsius, Fahrenheit.
8. Create JavaScript program which compute the
average marks of students.
9. Create event driven JavaScript program To accept
string from user and reverse the given string and
check whether it is palindrome or not
SERVER SIDE SCRIPTING(PHP)
10 Write a PHP program to check if a person is
eligible to vote or not.
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.
12. 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
2|Pa ge
1. ADVANCED WEB DESIGNING
PRACTICAL 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 name such first page as index.html, 2nd page as
page2.html as form.html. Use any theme such as college profile or company profile etc.
Every page must contain proper Meta information and design webpage as follows-
1. The index page must contain a heading which is highest among other text on pages and must
be at center of the page. There must be a paragraph which 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 enrollment form related with theme chosen with
feature 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>NMFC</title>
<meta name = "keywords" content = "jrcollege,kandivali,degree, ">
<meta name = "description" content = "top college in kandivali">
</head>
<body>
<h1 align="center">Nirmala Memorial Foundation College Of Commerce And Science</h1>
<p><b>NMF College of Science and Commerce</b> is affiliated to University of Mumbai, it
is one of <u>the best organization in the mumbai suburbs.</u> <br>
<i>Degree courses offered by colleges are Bcom. BA, BAF, BBI, BFM, BMS, BMM, BScIT.
</i> </p> <br>
<img src="C:\Users\Sharma\Desktop\IT TEXT BOOK\nmfc.jpg" alt="college logo"><br>
<a href="page2.html">Goto Second Page</a>
</body>
</html>
3|Pa ge
PAGE2.HTML
<!DOCTYPE html>
<html>
<head>
<title> page2</title>
<meta name = "keywords" content = "jrcollege, kandivali, degree">
<meta name = "description" content = "login page, registration page">
</head>
<body>
<h1 align="center">Registration page</h1>
<form name="f1" method="get " action=" welcome.html" >
First Name:<input type="text" id="na" name="first"><br>
Last Name: <input type="text" id="ln" name="last"><br>
Email: <input type="email" name="email"><br>
DOB: <input type="date" name="dob"><br>
Gender:
<input type="radio" name="r1">MALE
<input type="radio" name="r1">FEMALE<br>
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
4|Pa ge
Output of Practical Number:1
[Don’t draw output,cut and stick on blank/left side of the respective practical]
Index.html
PAGE2.HTML
5|Pa ge
PRACTICAL NO: 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>
<h1> Video with control (single track) </h1>
<video width="150" height="150" controls autoplay>
<source src="C:\Users\Sharma\Desktop\XII COMMERCE PRACTICAL\videoplayback.mp4"type="video/mp4">
</video>
</body>
</html>
Video1.HTML
<! DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<h1> Video with control (multiple track) </h1>
<video width="100" height="100" controls autoplay>
<source src="C:\Users\Sharma\Desktop\XII COMMERCE PRACTICAL\videoplayback.mp4" type="video/mp4">
<source src="C:\Users\Sharma\Desktop\XII COMMERCE PRACTICAL\Best Learning Video for Toddlers
Learn Colors with Crayon Surprises!.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body></html>
Output of Practical Number:2
[Don’t draw output, cut and stick on blank/left side of the respective practical]
Video.html
Video1.html
7|Pa ge
PRACTICAL NO 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.
SOLUTION:
imagemap.html
<html>
<head>
<title>Image mapping</title>
</head>
<body>
<img src="C:\Users\Test\Pictures\high-definition-desktop-download-9.jpg" usemap="#text">
<map name="text">
<area shape="rect" coords="45,34,24,65" href="pg1.html" alt="page1">
<area shape="circle" coords="256,138,45" href="page2.html" alt="page2">
<area shape="poly" coords="49,78,98,80,65,34" href="http//www.yahoo.com" alt="yahoo">
</map>
</body>
</html>
Pg1.html
<html>
<head><title>page3</title></head>
<body bgcolor="pink"> client side image mapping
</body>
</html>
8|Pa ge
Output of Practical Number:3
[Don’t draw output,cut and stick on blank/left side of the respective practical]
IMAGEMAP.Html
Pg1.html
9|Pa ge
PRACTICAL NO 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 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 style sheet for the left and right section with background color and font styles.
Olul.html
<!DOCTYPE html>
<html>
<head>
<title>Practicals SOP 2</title>
<style type="text/css">
#a1{
float: left; width: 50%; height: 500px;
background-color: lightyellow;
}
#a2{
float: right;
width: 50%;
height: 500px;
background-color: pink;
}
</style>
</head>
<body>
<header style="background-color:skyblue;color: hotpink;text-align: center;font-size: 50px;height: 100px">
Tourist Place
</header>
<section>
<aside id="a1">
<h1>City</h1>
<ol>
<li>Pune</li>
<li>Banglore</li>
<li>Hyderabad</li>
10 | P a g e
<li>Delhi</li>
</ol>
</aside>
<aside id="a2">
<h1>Tourist Place in Pune</h1>
<ul>
<li>Shaniwarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad Fort</li>
</ul>
</aside>
</section>
</body>
</html>
Output of Practical Number:4
[Don’t draw output,cut and stick on blank/left side of the respective practical]
11 | P a g e
PRACTICAL NO 5:
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).
SOLUTION:
audio.html
<!DOCTYPE html>
<html>
<head>
<title> audio with single track</title>
</head>
<body>
<audio controls loop="-1">
<source src="songs.mp3" type="audio/mpeg">
</audio>
</body>
</html>
audio1.html
<!DOCTYPE html>
<html>
<head>
<title>Audio with multiple track</title>
</head>
<body>
<audio controls autoplay>
<source src="songd.ogg" type="audio/ogg">
<source src="songs.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
12 | P a g e
Output of Practical Number:5
[Don’t draw output,cut and stick on blank/left side of the respective practical]
audio.html
Audio1.html
13 | P a g e
2. JAVASCRIPT
PRACTICAL NO: 6
CREATE A web PAGE in HTML HAVING A white BACKGROUND AND two
Button Objects. 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. When the second button object is clicked,
APPROPRIATE MESSAGE should be DISPLAYED in Browsers
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 gets LOADED in the browser.
Thereshould AT LEAST be7different AND
Visibly distinct BACKGROUND colors. When the PAGE is UNLOADED, the
APPROPRIATE ALERT MESSAGE should be DISPLAYED.
SOLUTION :
COLOR.HTML
<html>
<head>
<title>Color change</title>
<script language="Javascript"> function
C1()
{
document.bgColor="orange"
window.setTimeout("C2()",800)
}
function C2()
{
document.bgColor="red"
window.setTimeout("C3()",800)
}
function C3()
{
document.bgColor="purple"
window.setTimeout("C4()",800)
}
function C4()
{
document.bgColor="green"
14 | P a g e
window.setTimeout("C5()",800)
}
function C5()
{
document.bgColor="pink"
window.setTimeout("C6()",800)
}
function C6()
{
document.bgColor="black"
window.setTimeout("C7()",800)
}
function C7()
{
document.bgColor="yellow"
window.setTimeout("C1()",800)
}
function show()
{
window.status="Welcome"
}
</script></head>
<body>
<form>
<input type="button" value="Mouseover" onMouseover=C1()>
<input type="button" value="Click" onClick=show()>
</form>
</body>
</html>
COLOR1.HTML
<html>
<head>
<title>Color change</title>
<script language="Javascript"> function
C1()
{
document.bgColor="orange"
window.setTimeout("C2()",800)
}
function C2()
{
document.bgColor="red"
window.setTimeout("C3()",800)
}
function C3()
{
document.bgColor="purple"
window.setTimeout("C4()",800)
}
function C4()
{
document.bgColor="green"
15 | P a g e
window.setTimeout("C5()",800)
}
function C5()
{
document.bgColor="pink"
window.setTimeout("C6()",800)
}
function C6()
{
document.bgColor="black"
window.setTimeout("C7()",800)
}
function C7()
{
document.bgColor="yellow"
window.setTimeout("C1()",800)
}
function show()
{
alert("page is unloaded")
}
</script>
</head>
<body onLoad=C1() onUnload=show()>
</body>
</html>
16 | P a g e
Output of Practical Number:6
[Don’t draw output,cut and stick on blank/left side of the respective practical]
COLOR.HTML
COLOR1.HTML
17 | P a g e
PRACTICAL NO:7
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.22222222Celsius
SOLUTION
TEMPERATURE.HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function get_Fahrenheit()
{
var c = parseInt(document.getElementById('c1').value);
var f;
f = c/5*(9)+32;
document.write("Fahrenheit : "+f);
}
function get_Celsius()
{
var f = parseInt(document.getElementById('f1').value);
var c;
c = ((f-32)/9)*5;
document.write("Celsius : "+c);
}
</script>
</head>
<body>
<input type="text" id="c1" placeholder="Temperature in Celsius">
<input type="submit" onclick="get_Fahrenheit()">
<br>
<input type="number" id="f1" placeholder="Temperature in Fahrenheit">
<input type="submit" onclick="get_Celsius()">
</body>
</html>
18 | P a g e
Output of Practical Number:7
[Don’t draw output, cut and stick on blank/left side of the respective practical]
TEMPERATURE.HTML
Celsius TO Fahrenheit
Fahrenheit TO Celsius
19 | P a g e
PRACTICAL NO 8:
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
SOLUTION:
<!doctype html>
<html>
<head>
</head>
<body>
<form name="f1">
English<input type="number" name="e1"><br>
maths<input type="number" name="e2"><br>
Bio<input type="number" name="e3"><br>
Chem<input type="number" name="e4"><br>
Phy<input type="number" name="e5"><br>
IT<input type="number" name="e6"><br>
<input type="button" name="s1" value="calculate" onclick="calculate()">
</form>
<script type="text/javascript">
function calculate()
{
debugger;
var a, b, c, d, e, grade, avg;
a = parseInt(f1.e1.value);
b = parseInt(f1.e2.value);
c = parseInt(f1.e3.value);
d = parseInt(f1.e4.value);
e = parseInt(f1.e5.value);
f = parseInt(f1.e6.value);
grade = (a + b + c + d + e + f);
avg = grade / 6;
alert("average" + avg);
if (avg >= 91) {
alert("A");
}
else {
if (avg >= 81) {
alert("B");
20 | P a g e
}
else {
if (avg >= 71) {
alert("c");
}
else {
if (avg >= 61) {
alert("D");
}
else {
if (avg >= 51) {
alert("E");
}
else {
alert("f");
}
}
}
}
}
}
</script>
</body>
</html>
Output of Practical Number:8
[Don’t draw output, cut and stick on blank/left side of the respective practical]
21 | P a g e
22 | P a g e
PRACTICAL NO 9:
Create event driven JavaScript program for the following.
Make use of appropriate variables, JavaScript, inbuilt string functions and control structure.
To accept string from user and reverse the given string and check whether it is palindrome or not.
SOLUTION:
<html>
<head> <title> JavaScript Palindrome </title>
</head>
<body>
<script>
function validatePalin(str)
{
const len = string.length;
for (let i = 0; i < len / 2; i++)
{
if (string[i] !== string[len - 1 - i])
{
alert( 'It is not a palindrome');
}
}
alert( 'It is a palindrome');
}
const string = prompt('Enter a string or number: ');
const value = validatePalin(string);
console.log(value);
</script>
</body>
</html>
23 | P a g e
Output of Practical Number:9
[Don’t draw output, cut and stick on blank/left side of the respective practical]
24 | P a g e
3. Server-Side Scripting (PHP)
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.
Solution:
age.html
<!doctype 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>You are Eligible to vote"; else
echo "<br>You are not Eligible to vote";
}
?>
25 | P a g e
Output of Practical Number:10
[Don’t draw output, cut and stick on blank/left side of the respective practical]
26 | P a g e
PRACTICAL 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.
Solution:
vowel.html
<!doctype 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";
}
?>
27 | P a g e
Output of Practical Number:11
[Don’t draw output, cut and stick on blank/left side of the respective practical]
28 | P a g e
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 along with total marks and percentage.
Solution:
<?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;
?>
29 | P a g e
Output of Practical Number:12
[Don’t draw output, cut and stick on blank/left side of the respective practical]
30 | P a g e
