SOP 1
Aim : Creation of website using HTML5.
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Markal College</title>
<meta name="keywords" content="HTML5,CSS">
<style>
b{color:red}
i{background-color:cyan}
u{color:green}
</style>
</head>
<body>
<center>
<h1>My College</h1>
</center>
<p>
<u>N.M.V. & JR. College, Markal</u> <br>
<b>It is one of the best school in the this Area.</b><br>
<i>It is managed by Keshavraj Shikshan Sanstha</i>
</P><br>
<img src="college.jpg" alt="My College" height=100 width=100><br><br>
<a href="page1.html">Click Here for Second Page</a>
</body>
</html>
Page1.html
<!DOCTYPE html>
<html>
<head>
<meta name=author content=form>
</head>
<body>
<h1>Registration Page</h1>
<form>
Name <input type="text" name="t1"><br>
Email <input type="email" name="e1"><br>
<input type="submit" name="submit" value="submit"><br>
<a href="index.html">Click Here for First Page</a>
</form>
</body>
</html>
SOP 2
Aim : Creation of website using HTML and CSS code to design webpages.
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Traveller Info</title>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>
<h1>Traveller Information</h1>
<form action="page2.html" method="">
Enter Traveller Name
<input type="text" name="t1"><br>
Select Travel Date
<input type="date" name="d1"><br>
Enter telephone Number
<input type="Number" name="n1"><br>
<input type="image" src=1.jpg height=100 width=100><br>
</form>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>
<h1>Transporter Information</h1>
<ul>
<li>Name of transporter : Air Asia </li>
<li>Time : 09:30 am</li>
<li>Seat no : B39 </li>
<li>Destination : Delhi</li>
</ul><br>
<a href=index.html>Go to First Page</a>
</body>
</html>
My.css
h1{color: green}
body{background-color: pink}
li{color: white}
ul{background-color: red}
SOP 3
Aim : Use of Audio on web pages using HTML5.
Audio.html
<!DOCTYPE html>
<html>
<head>
<title>Single Audio with controls</title>
</head>
<body>
<audio controls autoplay loop="-1">
<source src="Sleep Away.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Audio1.html
<!DOCTYPE html>
<html>
<head>
<title>Multiple Audio Files with controls</title>
</head>
<body>
<audio controls autoplay>
<source src="Sleep Away.ogg" type="audio/ogg">
<source src="Sleep Away.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
SOP 4
Aim : Use of Video on web pages using HTML5.
Video.html
<!DOCTYPE html>
<html>
<head>
<title>Single Video with controls</title>
</head>
<body>
<video width="150" height="150" controls autoplay loop=”-1”>
<source src="gmail.mp4" type="video/mp4">
</video>
</body>
</html>
Video1.html
<!DOCTYPE html>
<html>
<head>
<title>Multiple video with controls</title>
</head>
<body>
<video width="100" height="100" controls autoplay>
<source src="gmail.mp4" type="video/mp4">
<source src="gmail.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
SOP 5
Aim : Navigation on an image using Client side image Mapping in web page using
HTML5.
Imagemap.html
<!DOCTYPE html>
<html>
<head>
<title>Client Side Image Mapping</title>
</head>
<body>
<img src="1.jpg" usemap="#a">
<map name="a">
<area shape="rect" coords="26,45,173,163" href="https://www.youtube.com" alt=Rectangle>
<area shape="circle" coords="350,106,100" href="http://gmail.com" alt=Circle>
<area shape="poly" coords="166,371,333,459,164,459" href="https://www.google.com"
alt=Polygon>
</map>
</body>
</html>
SOP 6
Aim : Write Event driven Javascript code to display different background colours
color.html
<!DOCTYPE HTML>
<html><head>
<title>Background Colours</title>
</head><body>
<form name="fr1">
<input type="button" name=btn value=Colours onMouseOver="f1()" />
<input type="button" name=btn1 value="Message" onClick="msg()" />
</form>
</body>
<script type="text/javascript">
function f1()
{
document.bgColor="red";
window.setTimeout("f2()",1500);
}
function f2()
{
document.bgColor="yellow";
window.setTimeout("f3()",1500);
}
function f3()
{
document.bgColor="pink";
window.setTimeout("f4()",1500);
}
function f4()
{
document.bgColor="gray";
window.setTimeout("f5()",1500);
}
function f5()
{
document.bgColor="orange";
window.setTimeout("f6()",1500);
}
function f6()
{
document.bgColor="violet";
window.setTimeout("f7()",1500);
}
function f7()
{
document.bgColor="green";
window.setTimeout("f1()",1500);
}
function msg()
{
window.status="Display of 7 different colors";
}
</script> </html>
color1.html
<!DOCTYPE HTML>
<html>
<head>
<title>Background Colours</title>
</head>
<body onLoad="f1()" onUnload="msg()">
Display 7 different colors in background
</body>
<script type="text/javascript">
function f1()
{
document.bgColor="red";
window.setTimeout("f2()",1500);
}
function f2()
{
document.bgColor="yellow";
window.setTimeout("f3()",1500);
}
function f3()
{
document.bgColor="pink";
window.setTimeout("f4()",1500);
}
function f4()
{
document.bgColor="gray";
window.setTimeout("f5()",1500);
}
function f5()
{
document.bgColor="orange";
window.setTimeout("f6()",1500);
}
function f6()
{
document.bgColor="violet";
window.setTimeout("f7()",1500);
}
function f7()
{
document.bgColor="green";
window.setTimeout("f1()",1500);
}
function msg()
{
alert("Display different 7 colors");
}
</script>
</html>
SOP : 7
Aim : Write Javascript code to accept string from user and count number of vowels in
the given string.
<!doctype html>
<html>
<head>
<title> Vowels</title>
</head>
<body>
<form name="f1">
name : <input type="Text" name="t1"><br>
<input type="button" name="b1" value="Count" onClick="cnt()">
</form>
</body>
<script type="text/javascript">
function cnt()
{
var s,c,ch,i;
s=f1.t1.value;
c=0;
for(i=0;i<s.length;i++)
{
ch=s.charAt(i);
if(ch=="A"||ch=="a"||ch=="E"||ch=="e"||ch=="I"||ch=="i"||ch=="O"||ch=="o"||ch=="U"||ch=="u")
c++;
}
alert("Number of Vowels in String are :"+c);
}
</script>
</html>
SOP 8
Aim : Write Javascript code to calculate average marks of students and determine the
corresponding grades.
<!DOCTYPE HTML>
<html>
<head>
<title>GRADE</title>
</head>
<body>
<form name="f1">
English <input type="number" name=t1><br>
Maths <input type="number" name=t2> <br>
Phy <input type="number" name=t3>
chem<input type="number" name=t4>
bio<input type="number" name=t5>
<input type="button" name=btn value= grade onClick="g1()"/>
</form>
</body>
<script type="text/javascript">
function g1()
{
var a,b,c,d,e,f,g=0;
a=parseInt(f1.t1.value);
b=parseInt(f1.t2.value);
c=parseInt(f1.t3.value);
d=parseInt(f1.t4.value);
e=parseInt(f1.t5.value);
f=(a+b+c+d+e)/5;
alert("Avarage is :" +f);
if(f>=91)
alert("Grade A");
else
{
if(f>=81)
alert("Grade B");
else
{
if(f>=71)
alert("Grade C");
else
{
if(f>=61)
alert("Grade D");
else
alert("Grade F");
}
}
}
}
</script>
</html>
SOP : 9
Aim : Write Javascript code to validate email address
<!DOCTYPE html>
<html>
<head>
<script>
function chk() {
var x = f1.email.value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
}
else
{
alert("a valid e-mail address");
}
}
</script>
</head>
<body>
<form name="f1">
Name: <input type="text"><br>
Address: <textarea placeholder="Write Address"> </textarea><br>
Contact Number:<input type="tel" maxlength="10"><br>
Email: <input type="text" name="email" pattern=[A-Z a-z]{5}[@]{1}[.]{1}>
<input type="submit" value="Submit" onClick="chk()">
</form>
</body>
</html>
SOP : 10
Aim: Write a PHP program to check if a person is eligible to vote or not.
Age.html
<html>
<body>
<form 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”;
}
?>
SOP : 11
Aim : 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.
Vow.html
<html>
<body>
<form action=”vowel.php”>
Enter String <input type=”text” name=”str”> <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”;
}
?>
SOP : 12
Aim : Write a PHP program to save and display marks along with total marks and
percentage.
<?php
$a=array(60,78,74,85,96);
$t=0;
$x=0;
$c=count($a);
for($x=0;$x<$c;$x++)
{ echo “<br> Marks in subject.$a[$x]”;
$t=$t+$a[$x];
}
$p=$t*100/500;
echo “<br> Total is : .$t”;
echo “<br> Percentage is : .$p”;
?>
