1a444d5e-3d6e-48bd-a322-a77bfc80413b

1
XIIth Information Technology

Manual 2023-24
Sr. INDEX
No PRACTICALS
HTML
1 Creation of website using HTML5
2 Create a website using HTML & CSS code to design a webpage as the given layout
3 Create a website using HTML & CSS code to design webpages as per given data
4 Use of audio on web pages using HTML5
5 Use of video on web pages using HTML5
6 Navigation on an image using Client side Image mapping in webpage using HTML5
JAVASCRIPT
7 a)Create an event driven program in JavaScript client side to change
the background color automatically.
b) Create an event driven program in JavaScript to change the background color
8 Create an event driven JavaScript program to count the number of vowels in a string using
variables, inbuilt string functions & control structures
9 Create an event driven JavaScript program to reverse the given string and check whether it is
palindrome or not using variables, inbuilt string functions & control structures
10 Create an event driven program in JavaScript to convert temperature to and from Celsius
,Fahrenheit.
PHP
11 Write a PHP program to check if a person is eligible to vote or not
12 Write a PHP function to count the total number of vowels (a,e,i,o,u) from the string.
13 Write a PHP program to save marks of five subjects in an array & display marks of individual
subjects with total marks,percentage.
14 Write a program using PHP to calculate Electricity bill by accepting the
limits.
2
Practical:1
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 a 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 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 features of HTML5. The form must contain text element and email
address of the company or person. Include the submit button.
AIM:
Creation of website using HTML5
CODING:
index.HTML
<!DOCTYPE html>
<html>
<head>
<title>College Website</title>
<style>
h1{background-color:lime;text-align:center;}
h6{text-align:center}
p{font-size:20}
body{background-color:yellow;}
</style>
<meta name="description" content="College Website">
</head><body>
<h1> Champion Junior Science College</h1>
<p> Four years ago,<i> IIT-ian's Champion</i>
introduced the unique concept of integrated learning for Competitive Exams,
Board Exams through partnerships with the most reputed schools and colleges across
Mumbai.
3
In 2009, the<u> Government of Maharashtra </u>entrusted IIT<sub>ian's</sub>

Champion with the responsibility to manage two Junior Science colleges in collaboration
with the<b>MCGM. </b></p><br>
<img src="C:\Users\Ann\Pictures\pace.jpg " alt="college" height="150"
width="200"><br>
<br><a href="page2.html">Click here to go Second page for Student Enrollment</a>
</body></html>
page2.HTML
<!DOCTYPE html>
<html>
<head><title>second page</title>
<meta name="author" content="pace">
<style>
body{background-color:pink}
h1{text-align:center;font-family:cambria;text-decoration:underline}
h3{color:green}
</style></head>
<body>
<h1 align="center">Student Enrollment Form</h1>
<form name="f1">
<h3>
Enter your Name:<input type="text" name="n1" required><br>
Enter your Age:<input type="number" name="a1"><br>
Enter your Address:<textarea name="ta" placeholder="home
address"></textarea><br><br>
Enter your E-mail Id:<input type="email" name="e1"><br>
Contact Number:<input type="tel" name="tele" pattern=”[0-9]{2}-[0-9]{10}” ><br>
Gender:
<input type="radio" name="g1" value=”m”> male
<input type="radio" name="g1" value=”f” >female <br>
<input type="submit" value="Submit" >
</h3>
</form>
Click on the picture below to go to First Page:<br>
<a href="C:\Users\Ann\Desktop\index.html">
<imgsrc="C:\Users\Ann\Pictures\watersplash.jpg" alt="college"
border="5" width="80" height="100" ></a><br>
</body></html>
4
OUTPUT:
Practical:2
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 right section with background color and font
styles.
AIM:
Create ate a webpage using HTML and CSS code to design a web page as the layout
displayed.
CODING:
5
<!DOCTYPE html>
<html>
<head><title>tourist places</title>
<style>
section {float: left; width:50%; background-color: yellow}
aside {float: right; width:50%; background-color: pink}
ol{font-style:normal;font-size:20px}
ul{font-style:normal;font-size:20px}
</style></head>
<body>
<header style="background-color:lightblue;width:100%;font-weight:900;font-
size:35px;color:DeepPink;text-align:center">
Tourist places
</header>
<section>
<h3>City</h3>
<ol>
<li>Pune</li>
<li>Banglore</li>
<li>Hydreabad</li>
<li>Delhi</li>
</ol>
</section>
<aside>
<h3>Tourist places in Pune</h3>
<ul>
<li>Shanivarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad fort</li>
</ul></aside></body></html>
OUTPUT:
6
Practical:3
Create a website using HTML & CSS code to design webpage as follows:-
The first webpage will accept the name of the traveller ,date of travel, telephone number.It
also has a 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.
AIM:
Create a website using HTML & CSS code to design webpages as per given data
CODING:
traveller.html
<!DOCTYPE html>
<html>
<head><title>webpage 1</title>
<link type="text/css" rel="stylesheet" href="one.css">
</head>
<body bgcolor="silver">
<form name="f1">
<h1>Traveller's Details</h1>
<p>
Enter name of the traveller:<input type="text" value="enter full name"
name="t1"><br><br>
Enter date of travel:<input type="date" name="d1"><br><br>
Enter telephone number:<input type="tel" name="phone"><br><br>
<input type="image" src="C:\Users\Ann\Pictures\submit.png" width="70"
height="70" alt="submit"><br>
</p>
<br>click on flight details:
<a href="C:\Users\Ann\Desktop\sop1\transporter.html">Flight Details</a>
</form>
</body></html>
7
transporter.html
<!DOCTYPE html>
<html>
<head><title>web page creation</title>
<link type="text/css" rel="stylesheet" href="one.css">
</head>
<body bgcolor="lime" >
<h1>Transporter's Details</h1>
<ul> <li>Name of Transpoter- Air Asia</li>
<li>Time-09.30am</li>
<li>Seat No-B39</li>
<li>Destination-Delhi</li>
</ul>
<br>click on travellers details:
<a href="C:\Users\Ann\Desktop\sop1\traveller.html">Traveller's Details</a>
</body></html>
one.css
h1{text-align:center;color:blue;background-color:pink}
p{color:blue;text-align:center;}
a{border:dashed;}
OUTPUT:
8
Practical:4
SOP 5: A: Create a web page 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.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Audio with controls</TITLE>
</HEAD>
<BODY>
<H1 align="center">Audio with controls</H1>
<AUDIO controls autoplay loop>
<SOURCE src="D:\HP\Desktop\Symphony.mp3" type="audio/mp3">
</AUDIO>
</BODY>
</HTML>
SOP 5: B: Create another webpage named audio1.html which provides multiple source file
formats for the same audio file that plays a sound with controls.. The code must
incorporate the list of sound files formats (like wav, mp3 or oggetc).
<!DOCTYPE html>
<html>
<head>
<title> Multiple Audio Files with Controls </title>
</head>
<body>
9
<h1 align="center">Multiple Audio Files with Controls</h1>

<h3>List of audio files formats</h3>
<ol>
<li>mp3-audio/mp3</li>
<li>ogg-audio/ogg</li>
<li>wav-audio/wav</li>
<li>aac-audio/aac</li>
</ol>
<audio controls >
<source src="D:\HP\Desktop\ rocks.mp3" type="audio/mp3">
<source src="D:\HP\Desktop\sample audio files\rocks.ogg" type="audio/ogg">
<source src="D:\HP\Desktop\sample audio files\ rocks.wav" type="audio/wav">
<source src="D:\HP\Desktop\sample audio files\rocks.aac" type="audio/aac">
</audio>
</body>
</html>
Practical:5
SOP 6:A: Create a web page named video .HTML to display a video file on web page
and plays automatically .The dimension of video area should be 150*150 pixels.
AIM:
Program to play a video file automatically.
CODING:
<!DOCTYPE html>
<html>
<head>
10
<title> Play video file automatically </title>

</head>
<body>
<h1> Play video file automatically </h1>
<video src=" C:\Users\Ann\Videos\Captures\humans.mp4" type="video/mp4"
width="150" height="150" autoplay>
</video>
</body></html>
OUTPUT:
SOP 6:B: Create another web page which provide multiple source file formats for
the same video that plays a video with controls. The dimension of video area should
be 300*300 pixels. .The code must incorporate the list of video files format (like
webM,MP4,ogg etc)
Aim:
Program to play video file with multiple source formats with controls.
CODING:
<!DOCTYPE html>
<html><head><title>Video file with controls</title></head>
<body ><h3>List of video files formats</h3>
<ol>
<li>mp4</li>
<li>ogg</li>
<li>webm</li>
</ol>
11
<h1> Video file with multiple source file formats that plays a video with controls</h1>
<video controls width="300" height="300" >
<source src="C:\Users\Ann\Videos\Captures\humans.mp4" type="video/mp4">
<source src=" C:\Users\Ann\Videos\Captures\humans.ogg" type="video/ogg">
<source src="C:\Users\Ann\Videos\Captures\humans .webm" type="video/webm">
</video>
</body></html>
OUTPUT:
Practical:6
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/Irfan View/Pinta. Each
shape should be mapped or navigate with a different URL ,one of the clickable area should
navigate to a local webpage.
Aim :
To create a Client side Image Mapping using HTML5
Coding :
<!DOCTYPE HTML>
<html><head><title> Image Mapping </title></head>
<body>
<imgsrc="C:\Users\PC 32\Pictures\bridge.jpg" usemap="#test">
<map name="test">
12
<area shape="rect" coords="115,67,322,156" href="homepage.html">

<area shape="circle" coords="616,240,80" href="https://www.google.com">
<area shape="poly" coords="749,61,753,249,960,254" https://www.mu.ac.in">
</map></body></html>
homepage.html
<!DOCTYPE HTML>
<html><head><title>Homepage</title></head>
<body bgcolor="pink">
<h1> welcome to homepage</h1>
</body></html>
Output:
13
Practical:7
a)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
1200seconds. There should at least be 7 different and visibly distinct background colors
excluding the default color..
Aim:
Create an event driven program in JavaScript to change the background color when mouse
is placed over the button.
Coding:
<!DOCTYPE html>
<html><head>
<title> Change background color</title>
<script type="text/javascript">
function f1()
{
document.bgColor="cyan"
window.setTimeout("f2()",1200)
}
function f2()
{
document.bgColor="purple"
}
function f3()
{
document.bgColor="grey"
}
function f4()
{
document.bgColor="yellow"
}
function f5()
{
document.bgColor="orange"
14
}
function f6()
{
document.bgColor="blue"
}
function f7()
{
document.bgColor="red"
}
</script></head>
<body><form name="ff">
<input type="button" value="Colors" onmouseover="f1()"><br>
</form>
</body></html>
Output:
b)Create another page using JavaScript where the background color changes automatically
after every 1200 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.
AIM:
Create an event driven program in JavaScript to change the background color when the
page gets loaded in the browser.
15
Coding:
<!DOCTYPE html>
<html><head>
<title> Change in background color</title>
function f1()
{
document.bgColor="cyan"
}
function f2()
{
document.bgColor="purple"
}
function f3()
{
document.bgColor="black"
}
function f4()
{
document.bgColor="yellow"
}
function f5()
{
document.bgColor="orange"
}
function f6()
{
document.bgColor="blue"
}
function f7()
{
document.bgColor="red"
16
}
</script></head>
<body onload="f1()">
<h1> This changes background color automatically </h1>
</body></html>
Output:
Practical:8
Create event driven JavaScript program for the following. Make use of appropriate
variables, JavaScript inbuilt string functions & control structures to accept string from user
and count number of vowels in the given string.
AIM:
To accept string from user and count the number of vowels in the given string.
CODING:
<!Doctype html>
<html><head><title>count vowels in a string</title></head>
<body>
<form name="f1">
enter name:
<input type="text" name="t1" id="n1" >
<br>
<input type="button" value="check" onclick="count_vowel()">
</form>
function count_vowel()
{
var str=document.getElementById('n1').value
17
str=str.toLowerCase()
var len=str.length
var count=0
var ch
for(var n=0;n<len;n++)
{
ch=str.charAt(n)
if(ch=="a" ||ch=="e"||ch=="i"||ch=="o"||ch=="u")
count++
}
document.write("number of vowels in the string is:"+count)
}
</script></body></html>
OUTPUT:
Practical:9
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.
AIM : Write event driven program to accept string from user and reverse the given string
and check whether it is palindrome or not.
CODING :
<!DOCTYPE html>
<html><body>
<form name="f1">
<h1>Program to check the entered string is palindrome or not</h1>
enter string<input type="text" name="t1" id="n1"><br>
<input type="button" value="click" onclick="check()">
</form>
18
function check()
{
var n=document.getElementById('n1').value
document.write("Given string is:-"+n+"<br>")
n=n.toLowerCase()
var str=""
var len=n.length
for(var i=len-1;i>=0;i--)
{
str=str+n.charAt(i)
}
document.write("Reversed string is:-"+str+"<br>")
if(str==n)
document.write("Entered string is Palindrome")
else
document.write("Entered string is Not Palindrome")
}
OUTPUT:
19
Practical:10
Create event driven JavaScript program to convert temperature to and from Celsius,
Fahrenheit.Formula: c/5= (f-32)/9Where c=temperature in Celsius and f=temperature in
Fahrenheit.Output format: 40 Celsius=104 Fahrenheit
45 Fahrenheit = 7.22222222 Celsius
AIM:
To convert temperature to & from Celsius to Fahrenheit
CODING:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Celsius 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 Fahrenheit</p>
function convert(degree)
{
var x;
if (degree == "C")
{
x = (document.getElementById("c").value * 9 / 5) + 32
document.getElementById("f").value = x
}
if(degree=="F")
{
x = (document.getElementById("f").value -32) * 5 / 9
document.getElementById("c").value = x
} }
OUTPUT:
20
Practical:11
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.
AIM :
To check a person is eligible to vote or not using php functions &decision making
statement.
CODING :
age.html
<html><body>
<h1>Person eligible to vote or not</h1>
<form name="f1" method="post" action=”age.php”>
Enter your age:<input type="number" name="myage"><br>
<input type="submit" name=”submit” value="check">
</form></body></html>
age.php
<?php
if(isset($_POST['submit1']))
{
$no=$_POST["myage"];
if($no>=18)
echo "You are eligible to vote";
else
echo "You are not eligible to vote";
}
?>
OUTPUT:
21
Practical: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 an html form.
AIM:
To count the number of vowels using php function from a string accepted using an html
form
CODING:
vowel.html
<html><head><title>count vowel</title></head>
<body>
<form method="POST" action=”vowel.php”>
Enter the string:<input type="text" name="t1"><br>
<input type="submit"name=”submit” value="Count">
22
vowel.php
<?php
if(isset($_POST['submit']))
{
$str=$_POST['t1'];
$vCount = 0;
$str = strtolower($str);
for($i = 0; $i<strlen($str); $i++)
{
if( $str[$i] == 'a' || $str[$i] == 'e' || $str[$i] == 'i' || $str[$i] == 'o' || $str[$i] == 'u')
{ $vCount++; }
}
echo "Number of vowels : " , $vCount;
}
?>
OUTPUT:
Practical:13
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
AIM
To display individual subject marks with total marks & percentage.
CODING:
marks.php
<?php
$a=array(65,75,80,85,95);
$sub=array("English","Hindi","Marathi","Maths","Information Technology");
23
$t=0;
$x=0;
$c=count($a);
$d=count($sub);
for($x=0;$x<$c,$x<$d;$x++)
{ echo"<br>Marks in" .$sub[$x]. " is:".$a[$x];
$t=$t+$a[$x];
}
$p=$t*100/500;
echo"<br>Total is:".$t;
echo"<br>Percentage is:".$p;
?>
OUTPUT:
Practical:14
Write a program using PHP to calculate Electricity bill by accepting thelimits.

 For first 100 units - Rs. 4
 For next 100 units - Rs. 5
 For next all units - Rs. 6
AIM
To calculate Electricity bill by accepting the limits for different units.
CODING:
Electricity.html
<html>
<head><title>Electricity Bill</title></head>
<body>
<h1> Electricity Bill</h1>
24
<form method="post" action="countbill.php">

Enter number of Limits<input type="text" name="customerunits">
<input type="submit" name="submit" value="Calculate bill">
countbill.php
?php
if(isset($_POST["submit"]))
{
$units=$_POST["customerunits"];
if($units<=100)
echo "Your bill amount is: ".$units*4;
else
{
if($units<=200)
else
}
}
?>
OUTPUT:
25

1a444d5e-3d6e-48bd-a322-a77bfc80413b

Uploaded by

Copyright:

Available Formats

1a444d5e-3d6e-48bd-a322-a77bfc80413b

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1a444d5e-3d6e-48bd-a322-a77bfc80413b

Uploaded by

Copyright:

Available Formats

1

XIIth Information Technology

5 Use of video on web pages using HTML5

Creation of website using HTML5

In 2009, the<u> Government of Maharashtra </u>entrusted IIT<sub>ian's</sub>

<h1 align="center">Multiple Audio Files with Controls</h1>

Program to play a video file automatically.

<title> Play video file automatically </title>

To create a Client side Image Mapping using HTML5

<area shape="rect" coords="115,67,322,156" href="homepage.html">

To display individual subject marks with total marks & percentage.

Write a program using PHP to calculate Electricity bill by accepting thelimits.

To calculate Electricity bill by accepting the limits for different units.

<form method="post" action="countbill.php">

You might also like