Practical - 1
Aim : Creation of website using HTML5
index.html
<!DOCTYPE html>
<html>
<head>
<title>NMV College,Markal</title>
</head>
<body>
<h1>N.M.V. & Jr. College,Markal</h1>
<p>
<u>Our College of Science, Arts and Commerce</u> is affiliated to University of Pune, it is one of
<u>the best college in the pune. </u>.
<i>Various courses conducted are of Arts, Commerce and IT</i>.
</p><br>
<img src="kes.jpg"><a href="page1.html">Click Here for Second Page</a>
</body>
</html>
page1.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Registration Page</h1>
<form>
First Name <input type="text" name="t1">
Last Name <input type="text" name="t2">
Email <input type="email" name="e1">
Gender <input type="radio" name="r1">MALE
<input type="radio" name="r1">FEMALE
Qualification
<select name="qua">
<option>10th Passed</option>
<option>12th Passed</option>
<option>Graduation</option>
<option>Post Graduation</option>
</select>
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
Practical - 2
Aim : Creation of website using HTML and CSS code to design webpages.
Page1.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">
Select Travel Date <input type="date" name="d1">
Enter telephone Number <input type="Number" name="n1">
<input type="submit" name="s1" value="submit">
</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>
</body>
</html>
my.css
h1{background-color:green;border-style:double}
body{background-color:lightgreen}
ul{font-family:Arial}
Practical - 3
Aim : Use of Audio on web pages using HTML5.
Audio1.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>
audio2.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>
Practical - 4
Aim : Use of Video on web pages using HTML5.
Video1.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>
video2.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>
Practical - 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="#myimmg">
<map name="myimmg">
<area shape="rect" coords="26,45,173,163" href="https://www.youtube.com" alt=Rectangle>
<area shape="circle" coords="350,106,100" href="http://practicalshub.com" alt=Circle>
<area shape="poly" coords="166,371,333,459,164,459" href="https://www.google.com" alt=Polygon>
</map>
</body>
</html>
Practical – 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>
Practical – 7
Aim : Write Javascript code to validate email address
<!DOCTYPE HTML>
<html>
<head>
<title>Practical 2</title>
</head>
<body>
<form name="f1">
Enter Name <input type="text" name="t1"><br>
Enter Address <textarea name="t2" placeholder="PERMANANT ADDRESS">
</textarea> <br>
Enter Phone Number <input type="tel" maxlength="10"><br>
Enter Email Address <input type="email" name="t3" pattern=”[A-Z a-z]{5}-[@]{1}-[.]{1}”> <br>
<input type="button" name="b1" value="Submit" onClick="chk()">
</form>
</body>
<script type="text/javascript">
function chk()
{
var x=f1.t3.value;
var atpos=x.indexOf("@");
var lastat=x.lastIndexOf("@");
var firstdot=x.indexOf(".");
var dotpos=x.lastIndexOf(".");
if(atpos<1||dotpos<atpos+2||dotpos+2>x.length||firstdot<atpos||atpos<lastat)
{
alert("Not a valid email address");
f1.t3.focus();
}
else
{
alert("Email address is accepted");
return true;
}
}
</script>
</html>
Practical – 8
Aim : Write Javascript code to accept string from user and count number of vowels in the given string
<!DOCTYPE HTML>
<html>
<head>
<title>String Function</title>
</head>
<body>
<form name="f1">
Enter Your Name <input type="text" name="t1" /><br>
<input type="button" name="btn" value="Count Vowels" onClick="cnt()" />
</form>
</body>
<script type="text/javascript">
function cnt()
{
var s,i,ch,c=0;
s=f1.t1.value;
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>
Practical – 9
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>
Practical – 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”;
}
?>
Practical - 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”;
}
?>
Practical – 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”;
?>
