Slpractical

Ex.No.
1 HTML5 MEDIA ELEMENTS
Main.html
<html>
<body bgcolor="cyan" text="#00cc00">
<font face="monotype corsiva" size=30>
<h1>This page displays Audio and Video files</h1>
<hr>
<ul>
<li><a href="audio.html">Audio File</a>
<li><a href="video.html">Video File</a>
</ul>
</font>
<body>
</html>
Audio.html
<html>
<body bgcolor="pink" text="#00cc00">
<h1>Audio File</h1>
<hr>
<audio src="/home/elcot/Desktop/686827338.mp3" type="audio/mp3"
controls>
</audio>
<br>
<a href="prg1.html">Back</a>
</font>
</body>
</html>
Video.html
<html>
<body bgcolor="cyan" text="#00cc00">
<h1>Video File</h1>
<hr>
<video controls width=200 height=200>
<source src="/home/elcot/Desktop/1651679383323.mp4"
type="video/mp4">
</video>
<br>
<a href="prg1.html">Back</a>
</font>
</body>
</html>
Ex.No. 2 DATA VALIDATION
<html>
<head>
<title>Display different background colors</title>
<style>
header{
background-color:red;
margin:0px;
padding:10px;
height:25px;
width:600px;
}
nav{
background-color:grey;
margin:0px;
padding:10px;
height:120px;
width:200px;
}
section{
background-color:palegreen;
margin:0px;
padding:10px;
float:middle;
width:50%;
}
aside{
margin:0px;
padding:10px;
height:100px;
width:600px;
font-style:italic;
background-color:lightgray;
}
footer{
background-color:orange;
margin:0px;
padding:10px;
height:20px;
width:600px;
}
input:invalid{
background-color:red;
}
input:valid{
background-color:lightgreen;
}
</style>
</head>
</body>
<header><p>This is the header</p></header>
<nav><p>Navigation
<ul>
<li><a href="prg1.html">Multimedia Files</a>
<li><a href="prg3.html">Mathematical expression</a>
<li><a href="prg4.html">Natural Numbers</a>
</ul>
</p></nav>
<section>
<h1>HTML5 Data Validation</h1>
<style>
</style>
<body>
<h1>Testing for Invalid Data</h1>
<fieldset>
<legend>You must be over 18 to participate</legend>
<label>
Age:<input type="number" name="Age" min="18">
</label>
</fieldset>
</section>
<aside>
<h4>Aside</h4>
<p>This program check for the age. If the age is above 18 it displays green
color else displays red color</p>
</aside>
<footer><p>This is the footer</p></footer>
</html>
OUTPUT
Ex.No.3 MATHEMATICAL EXPRESSION
<html>
<head>
<title>Mathematical Expression</title>
<script type="text/javascript">
function math_exp()
{
var x=document.form1.exptext.value;
var result=eval(x);
document.form1.resulttext.value=result;
}
</script>
</head>
<body>
<form name="form1">
<table>
<tr>
<td>Expression</td>
<td><input type="text" name="exptext"/></td>
</tr>
<tr>
<td>Result</td>
<td><input type="text" name="resulttext"/></td>
</tr>
<tr>
<td><input type="button" value="calculate"
onclick="math_exp()"/></td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT
Ex.No.4 TO FIND THE SUM OF N NATURAL NUMBERS
<html>
<head>
<title>JavaScript program to find the sum of n natural numbers</title>
</head>
<body>
<table>
<tr>
<td><input type="text" name="a" id="first" placeholder="Enter a
number"/></td>
</tr>
<tr>
<td><button onclick="sum()">Sum</button></td>
</tr>
</table>
<div id="num"></div>
</body>
function sum(){
var n,i,sum=0;
n=parseInt(document.getElementById("first").value);
for(i=1;i<=n;i++)
{
sum=sum+i;
}
document.getElementById("num").innerHTML="sum of "+n+" natural
numbers is : "+sum;
}
</script>
</html>
OUTPUT
Ex.No.5 USE MOUSEOVER AND MOUSEOUT EVENT HANDLER
<html>
<head>
function mouseOver(){
document.getElementById("img").src="/home/elcot/Desktop/BO4Mk3M-56
43453054 (copy).jpg";
document.body.style.backgroundColor="#DC7633";
}
function mouseOut()
{
document.getElementById("img").src="/home/elcot/Desktop/BBkekyk-
5961699354.jpg";
document.body.style.backgroundColor="#5B2C6F";
}
</script>
</head>
<body>
<img src="/home/elcot/Desktop/B0D5baPM-7395364754.jpg" id="img"
onmouseOver="mouseOver()" onmouseOut="mouseOut()"/>
</body>
</html>
OUTPUT
Ex.No.6 COUNT NUMBER OF ELEMENT IN A FORM
<html>
<head>
<title>Registration Form</title>
function display(){
alert(document.getElementById("form1").length);
}
</script>
</head>
<body onload="display()">
<form id="form1">
<table border="1">
<tr>
<td>Name</td>
<td><input type="text" value="firstname" /></td>
</tr>
<tr>
<td>Choose Your Username</td>
<td><input type="text" value="Username" /></td>
</tr>
<tr>
<td>Creat Passeword</td>
<td><input type="password" value="password" /></td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input type="password" value="Confirm Pass" /></td>
</tr>
<tr>
<td>Birthday</td>
<td><select name="date"><option value="7">11</td>
<td><select name="month"><option
value="November">November</td>
<td><select name="year"><option value="2004">2004</td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" value="gender" />Male</td>
<td><input type="radio" value="gender" />Female</td>
</tr>
<tr>
<td>Mobile</td>
<td><input type="text"></td>
</tr>
<tr>
<td>Location</td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="checkbox"/>I agree the terms and policy</td>
</tr>
<tr>
<td><input type="button" value="creat"/></td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT
Ex.No.7 VERIFIES NON EMPTY TEXTBOXES
<html>
<head>
function validate()
{
if(document.myForm.Name.value=="")
{
alert("please Provide Your Name");
document.myForm.Name.focus();
return false;
}
if(document.myForm.Email.value=="")
{
alert("please Provide Your Email ID");
document.myForm.Email.focus();
return false;
}
if((document.myForm.Zip.value=="")||
(document.myForm.Zip.value.length !=6))
{
alert("please Provide a valid zip code format ######");

document.myForm.Zip.focus();
return false;
}
if(document.myForm.Country.value=="-1")
{
alert("please Provide Your Country Name");
return false;
}
return true;
}
function validateEmail()
{
var emailID=document.myForm.Email.value;
atpos=emailID.indexOf("@");
dotpos=emailID.lastIndexOf(".");
if(atpos<1\\(dotpos-atpos<2))
{
alert("Please Enter Correct Email ID");
document.myForm.Email.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return(validate());">
<table cellspacing="2" cellspacing="2" border="1">
<tr>
<td>Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td>Email ID</td>
<td><input type="text" name="Email" onchange="validateEmail();"
/></td>
</tr>
<tr>
<td>Zip code</td>
<td><input type="text" name="Zip" /></td>
</tr>
<tr>
<td>District</td>
<td><select name="dist">
<option value="-1" selected>[Choose Yours]</option>
<option value="1">Tirunelveli</option>
<option value="2">Thoothukudi</option>
<option value="3">Kanyakumari</option>
<option value="4">Madurai</option>
<option value="5">Viruthunagar</option>
<option value="6">Dindigul</option>
</select>
</td></tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit"/></td>
</tr></table>
</form></body></html>
OUTPUT
Ex.No.8 STUDENT INFORMATION
<!DOCTYPE html>
<html>
<head>
function calc()
{
var m1,m2,m3,m4,m5,avg=0,total=0,result="",grade="";
m1=parseInt(document.form1.jp.value);
m2=parseInt(document.form1.dd.value);
m3=parseInt(document.form1.bd.value);
m4=parseInt(document.form1.sl.value);
m5=parseInt(document.form1.nm.value);
total=m1+m2+m3+m4+m5;
avg=total/5;
if(m1<40||m2<40||m3<40||m4<40||m5<40)
{
result="fail";
grade="D";
}
else if(avg>=75)
{
result="Distinction";
grade="A+";
}
else if(avg>=60&&avg<75)
{
result="First class";
grade="A";
}
{
result="Second class";
grade="B";
}
{
result="Pass class";
grade="C";
}
else if(avg<40)
{
result="Fail";
grade="D";
}
document.form1.result.value=result;
document.form1.grade.value=grade;
document.form1.total.value=total;
document.form1.average.value=avg;
}
</script>
</head>
<body>
<form name="form1">
<table border="1">
<tr>
<td>Student Name</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Register Number</td>
<td><input type="text" /></td>
</tr>
<tr>
<td colspan="2" align="center">Subject Marks</td>
</tr>
<tr>
<td>Java Programming</td>
<td><input type="text" name="jp"/></td>
</tr>
<tr>
<td>Digital Design</td>
<td><input type="text" name="dd"/></td>
</tr>
<tr>
<td>Big Data Analytics</td>
<td><input type="text" name="bd" /></td>
</tr>
<tr>
<td>Scripting Languages</td>
<td><input type="text" name="sl" /></td>
</tr>
<tr>
<td>Fundamental of Statistics II</td>
<td><input type="text" name="nm"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" onclick="calc()"
value="calculate" /></td>
</tr>
<tr>
<td>Total</td>
<td><input type="text" name="total"/></td>
</tr>
<tr>
<td>Average</td>
<td><input type="text" name="average"/></td>
</tr>
<tr>
<td>Result</td>
<td><input type="text" name="result"/></td>
</tr>
<tr>
<td>Grade</td>
<td><input type="text" name="grade"/></td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT

Slpractical

Uploaded by

Document Information

Original Description:

Original Title

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

Slpractical

Uploaded by

Copyright:

Available Formats

Ex.No.

1 HTML5 MEDIA ELEMENTS

alert("please Provide a valid zip code format ######");

You might also like