Sr.
Name of Experiment Date Page
No. No.
1. Advanced Web Designing
1 SOP : 1 Create a website using HTML5 and CSS code
SOP: 2 Create a webpage using HTML and CSS code to
design a web page as the layout displayed below.
2
SOP 3 : Use of Audio on web pages using HTML5.
SOP 4: Use of video on web pages using HTML5
SOP 5: Navigation on an image using Client side image
Mapping in web page using HTML5
5
2. JavaScript
6 SOP 1 : Create a web page in HTML having a white
background and two Button Objects
SOP 2 : TO accept string from user and count number of
vowels in the given string
7
SOP 3 : To accept string from user and reverse the given
string and check whether it is palindrome or not.
8
SOP :4 Create event driven JavaScript program to
9 convert temperature to and from Celsius, Fahrenheit.
Page 1
3. Server-Side Scripting (PHP)
SOP 1 Write a PHP program to check if a person is eligible to vote
or not. The program should include the following-Minimum age
10 required for vote is 18.
Use PHP functions.
Use Decision making statement.
11 SOP 2: 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
SOP 3: 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.
Page 2
1. Advanced Web Designing
Experiment No. : SOP 1
Experiment Name: 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 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 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.
Page 3
Index.html
<!DOCTYPE html>
<html>
<head><title>TMVJC COLLEGE ICHALKRANJI</title>
<Style>
h1{background-color:green}
B{color:red}
U{font-size:20}
I{text-decoration:overline}
</Style>
</head>
<body>
<h1 align=center>Tatyasaheb Musale Vidyalya & Jr.College,Ichalkaranji </h1><br> <br>
<p><B>100% Results,Computer science,Electronics,Information Technology
subjects,Guest Lectures, Carrere Counseling, Individual Attention
</B> <br>
<br>
<U> It is Affiliated to MAHARASHTRA STATE BOARD of Mumbai,</U> <br>
<br><br>
<I>It is one of the best College in the ICHALKARANJI.. </I>
</p><br><br><br>
<img src="tmvjc.png" height="300" width="300" alt=" TMVJC COLLEGE "><br> <br>
<a href="page2.html">Click Here for Second Page</a>
</body></html>
Page 4
Page2.html
<! DOCTYPE html>
<html>
<head>
<title>Enrolment Page</title>
<style>
h1{border-style: dashed}
</style>
</head>
<body bgcolor=aqua>
<h1 align="center">ENROLLMENT FORM</h1>
<form action="" method="">
Enter Name <input type="text" name="t1"><br><br>
Enter Email <input type="email" name="e1"><br><br>
<input type="Submit" name="submit" value="Submit">
</form>
<br><br>
<a href="Index.html">First Page </a>
</body>
</html>
Page 5
OUTPUT SOP : 1
Page 6
Experiment No. : SOP 2
Experiment Name: - 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.
Page 7
Touristplaces.html
<!DOCTYPE html>
<html>
<head>
<title>
Torist Places
</title>
<style>
section{background-color:pink;float:right;width:50%;font-size:25px;}
aside{width:50%;float:left;background-color:yellow;}
ol{font-style:italic;font-size:21px}
ul{font-style:oblique;font-size:20px}
</style>
</head>
<body>
<header style="background-color:skyblue;height:100pt">
<h1 align="center">Tourist Places</h1>
</header>
<br>
<aside>
<h3>City</h3>
<ol>
<li>Pune</li>
<li>Banglore</li>
<li>Hyderabad</li>
<li>Delhi</li>
</ol>
</aside>
Page 8
<section>
<h4>Tourist places in Pune</h4>
<ul>
<li>Shanivarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad fort</li>
</ul>
</section>
</body>
</html>
Page 9
OUTPUT : Experiment No. : 02
SOP : 2
Page 10
Experiment No. : SOP 3
Experiment Name: - Use of Audio on web pages using HTML5.
1) 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.
2) 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).
Page 11
HTML Code
1] Insert audio file in webpage (Single Source File)
<!DOCTYPE html>
<html>
<head>
<title>Audio</title>
</head>
<body>
<center>
<h1> Audio with Controls (single Source File )</h1>
<audio src="abhal.mp3" Controls loop autoplay>
</audio>
</center>
</body>
</html>
Page 12
2] Insert audio file in webpage (Multiple Source File)
<!DOCTYPE html>
<html>
<head>
<title>Multiple Source File</title>
</head>
<body>
<center>
<h1 > Audio with Controls (Multiple Source File) </h1>
<audio controls autoplay>
<source src="song2.wav" type="audio/wav">
<source src="song3.ogg" type="audio/ogg">
<source src="abhal.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</center>
</body>
</html>
Page 13
OUTPUT SOP : 3
Page 14
Experiment No. : SOP 4:
Experiment Name: - Use of video on web pages uses html5.
1) 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.
2) Create another webpage which provide multiple source file formats
for the same video 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 video file is not supported by browser. The code must
incorporate the list of video files formats (like webM, MP4 or ogg
etc).
Page 15
1. Insert video file in webpage(single Source File )
video.html
<!DOCTYPE html>
<html>
<head>
<title> Single Video File On Web Page With Control </title>
</head>
<body>
<center>
<h1> Single Video File On Web Page With Control </h1>
<video src="tmvjc.mp4" width="150" height="150" controls
autoplay loop>
</video>
</center>
</body>
</html>
Page 16
2) Insert video file in webpage (Multiple Source File)
video1.html
<!DOCTYPE html>
<html>
<head>
<title> Video Multiple Source File </title>
</head>
<body>
<center>
<h1> Video with controls (Multiple Source File) </h1>
<video width="100" height="100" controls autoplay loop>
<source src="abc.webm" type="video/webm">
<source src="abc.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</center>
</body>
</html>
Page 17
OUTPUT SOP : 4
Single Video File On Web Page With Control
Page 18
OUTPUT SOP : 4
Video with controls (Multiple Source File)
Page 19
Experiment No. SOP 5:
Experiment Name: - 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.
Page 20
Imagemap.html
<!DOCTYPE html>
<html>
<head>
<title> Client Side Image Mapping </title> </head>
<body>
<center>
<h1> Client Side Image Mapping </h1>
<img src="Tulips.jpg" alt="image" height=300 width=600 usemap="#abc">
<map name="abc">
<area shape="rect" coords="65,35,297,139" alt="rectangle" href="www.google.com">
<area shape="circle" coords="406,38,30" alt="circle" href="www.yahoo.com">
<area shape="poly" coords="48,169,142,234,50,248" alt="polygon"
href="form.html">
</map>
</center>
</body>
</html>
Page 21
OUTPUT SOP : 5
Page 22
2. JAVASCRIPT
Experiment No. SOP 1 :
1) 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.
2) 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. When the page is unloaded, the appropriate alert message
should be displayed.
Page 23
js1.html
<!doctype html>
<html>
<head>
<title>color change</title>
<script>
function myFunction()
{
setTimeout(function(){document.body.style.backgroundColor="red";},1000);
setTimeout(function(){document.body.style.backgroundColor="blue";},2000);
setTimeout(function(){document.body.style.backgroundColor="green";},3000);
setTimeout(function(){document.body.style.backgroundColor="yellow";},4000);
setTimeout(function(){document.body.style.backgroundColor="orange";},5000);
setTimeout(function(){document.body.style.backgroundColor="black";},6000);
setTimeout(function(){document.body.style.backgroundColor="pink";},7000);
}
function myFunction1()
{window.status = "You have done it Successfully!!";
}
</script>
</head>
<body>
<h1>Background Color is being changed every 1 seconds</h1>
<input type="button" onMouseover="myFunction()" value="change
color">
<input type="button" onClick="myFunction1()" value="click for
message">
</body>
</html>
Page 24
js2.html
<!doctype html>
<html>
<head>
<title>color change</title>
<script>
function myFunction()
setTimeout(function(){document.body.style.backgroundColor="red";},1000);
setTimeout(function(){document.body.style.backgroundColor="blue";},2000);
setTimeout(function(){document.body.style.backgroundColor="green";},3000);
setTimeout(function(){document.body.style.backgroundColor="yellow";},4000);
setTimeout(function(){document.body.style.backgroundColor="orange";},5000);
setTimeout(function(){document.body.style.backgroundColor="black";},6000);
setTimeout(function(){document.body.style.backgroundColor="pink";},7000);
function msg()
{ alert("You have done it successfully");
</script>
</head>
<body onload="myFunction()" onunload="msg()">
<h1>Background Color is being changed every 1 seconds</h1>
</body></html>
Page 25
OUTPUT SOP : 1 (JAVA SCRIPT)
Page 26
Experiment No. : SOP 2
Experiment Name: 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 .
Page 27
Vowels.html -
<!DOCTYPE html>
<html>
<script type="text/javascript">
var n,i,ch,cnt=0;
n=prompt("Enter the String ");
for(i=0;i<n.length;i++)
ch=n.charAt(i); if(ch=='a'||ch=='A'||ch=='e'||ch=='E'||ch=='i'||ch=='I'||
ch=='o'||ch=='O'
||ch=='u'||ch=='U')
cnt=cnt+1;
alert("number of Vowels in String Are "+cnt);
</script>
</html>
Page 28
OUTPUT SOP : 2 (JAVA SCRIPT)
To count Number of Vowels in Given String
Page 29
Experiment No. : SOP 3
Experiment Name : 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.
Page 30
Palindrome.html –
<!DOCTYPE html>
<html>
<head>
<title> String is Palindrome Or Not </title>
</head>
<body>
<script type="text/javascript">
function reverse_String()
{
var str = document.getElementById('s1').value;
var str=str.toLowerCase();
var final_str = str;
var split = str.split("");
var reverse = split.reverse();
var reverse_data = reverse.join("");
document.write("Reverse : "+reverse_data);
if (final_str==reverse_data)
{
document.write("<br>It is palindrome ");
}
else{
document.write("<br>not palindrome ");
}
}
</script>
<input type="text" id="s1" placeholder="Enter a String">
<input type="submit" onclick="reverse_String()">
</body>
</html>
Page 31
OUTPUT SOP : 3(JavaScript)
Page 32
Experiment No. : SOP 4
Experiment Name :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
Page 33
Temperature.html -
<!DOCTYPE html>
<html>
<head>
<title>Temperature conversion</title>
<script type="text/javascript">
function convertCtoF()
{
var c = document.getElementById('cel').value;
var f=(c*9/5)+32;
document.getElementById('res').innerText =
`${c} Celsius = ${f}Fahrenheit`;
}
function convertFtoC()
{
var f = document.getElementById('far').value;
var c=(f-32)*5/9;
document.getElementById('abc').innerText =
`${f} Fahrenheit= ${c} Celsius`;
}
</script>
</head>
<body>
<h1 align="center">Converting Temperature</h1>
<br>
Enter any temperature in Celsius : <input type="" id="cel">
<button onclick="convertCtoF()"> Click to Convert Celsius to Fahrenheit
</button>
<h3 id="res"></h3>
Page 34
Enter any temperature in Fahrenheit : <input type="" id="far">
<button onclick="convertFtoC()">Click to Convert Fahrenheit to Celsius
</button>
<h3 id="abc"></h3>
</body>
</html>
Page 35
OUTPUT SOP : 4(JavaScript)
Page 36
3. Server-Side Scripting (PHP)
Experiment No. : SOP 1 :
Experiment Name: -Write a PHP program to check if a person is eligible
to vote or not. The program should include the following-
1) Minimum AGE required for vote is 18.
2) Use PHP functions.
3) Use Decision making statement.
Page 37
index.php
<!DOCTYPE html>
<html>
<head>
<title>Eligible to Vote or not</title>
</head>
<body>
<form action="" method="post">
Enter Age :
<input type="text" name="t1" placeholder="Enter your Age">
<br><input type="submit" name="submit" value="Check For Eligible">
</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>
Page 38
OUTPUT SOP : 1 (PHP)
Person is eligible to vote or not
Page 39
Experiment No. : SOP 2 :
Experiment Name: - 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
Page 40
index.html
<html>
<body>
<h2>Find Number of Vowels in a String</h2>
<form 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','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;
}
?>
Page 41
OUTPUT SOP : 2 (PHP)
Page 42
Experiment Number : SOP 3
Experiment Name:-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.
Page 43
<?php
$subject_marks = array('English' =>66 ,'Hindi' =>76,
'Marathi'=>86,'Maths' =>80 ,'IT'=>82);
$total_marks = $subject_marks['English'] + $subject_marks['Hindi'] +
$subject_marks['Marathi'] + $subject_marks['Maths'] +
$subject_marks['IT'];
echo "<br><br>English : ".$subject_marks['English'];
echo "<br><br>Hindi : ".$subject_marks['Hindi'];
echo "<br><br>Marathi : ".$subject_marks['Marathi'];
echo "<br><br>Maths : ".$subject_marks['Maths'];
echo "<br><br>IT : ".$subject_marks['IT'];
echo "<br><br>Total : ".$total_marks;
$percentage = $total_marks/5;
echo "<br><br>Percentage : ".$percentage;
?>
Page 44
OUTPUT SOP : 3 (PHP)
Page 45
