HTML PRACTICALS
Practical 1
FIRST.HTML
<!DOCTYPE.HTML>
<HTML>
<head><title>Tata Group</title>
<meta charset="utf-8">
<meta name="author" contents="Physical Tags">
<style>
h1{border-style:dotted}
p{color:red;font-size:15pt}
body{background-color:aqua}
b{text-decoration:overline}
u{text-align:right}
</style>
</head>
<body>
<h1 align="center"> Tata Sons Private Ltd.</h1>
<p>We are the authorized supplier of TATA POWER SOLAR SYSTEMS.
With the Net Metering policy in force in Maharashtra,
Customers can install Solar Power Systems on their roof tops and generate
electricity for their self-consumption Furthermore, the surplus can be transported to the
grid in return for credit in their bills or monetized at the end of the
So, it is a step towards Zero Electricity bills.
</p>
<br>
<b> Governance Philosophy</b>
<br>
<br>
<i>TATA POWER SOLAR </i>
<br>
<u>Looking for Tata Power Solar System</u>
<br>
<br>
<img src="tata solor.jpeg" height="350" width="250">
<br>
<a href="Second.html">Next</a>
</body>
</html>
SECOND.HTML
<!DOCTYPE.HTML>
<HTML>
<head>
<title>Forms</title>
<meta charset="utf-8">
<meta name="author" contents="Forms">
<style>
h1{border-style:dashed}
body{background-color:aqua}
</style>
</head>
<body>
<h1 align="center"> Enrollment form</h1>
<form name="f1">
Enter your Name <input type="text" name="t1" required>
<br>
<br>
Enter your email-Id <input type="email" name="emailid">
<br>
<br>
<input type="submit" name="submitbtn" value="SUBMIT">
</form>
<br>
<a href ="Index.html">Back</a>
</body>
</html>
Practical 2
<!DOCTYPE html>
<html>
<head>
<title>
Tourist Places
</title>
<style>
section{background-color:yellow;width:50%;height:50%;float:right}
aside{background-color:red;width:50%;float:left}
ol{font-style:italic;font-size:25pt}
ul{font-weight:bold;font-size:25pt}
</style>
</head>
<body>
<header style="background-color:pink;height:100pt">
<h1 align="center"><u>Tourist Places</u></h1>
</header>
<br>
<aside>
<h1><u>City</u></h1>
<ol type="1">
<li>Pune</li>
<li> Banglore</li>
<li>Hyderabad </li>
<li>Delhi</li>
</ol>
</aside>
<section>
<h1><u>Tourist places in Pune</u></h1>
<ul type="circle">
<li>Shanivarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad fort</li>
<li>Aga khan Palace</li>
</ul>
</section>
</body>
</html>
Practical 3
FIRST.HTML
<!DOCTYPE html>
<html>
<head>
<title>SOP3 Demostration</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="lightyellow">
<table>
<tr>
<td>
<label for="name">
Traveller Name:
</label>
<input type="text" name="Traveller_name" id="name">
</td>
</tr>
<tr>
<td>
<label for="date">Travelling Date:</label>
<input type="date" name="Travelling_date" id="date">
</td>
</tr>
<tr>
<td>
<label for="phone_no">
Telephone No:
</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{2}-[0-9]{10}">
</td>
</tr>
<tr>
<td>
<input type="image" name="Submit" id="Submit" src="tata solor.jpeg"
onclick="href="second page.html"">
</td>
</tr>
</table>
</body>
</html>
Second.HTML
<!DOCTYPE html>
<html>
<head>
<title>Second Page Html</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<ul>
<li>
Name of Transporter - Air Asia
</li>
<li>
Time - 09:30 AM
</li>
<li>
Seat No - B39
</li>
<li>
Destination - Delhi
</li>
</ul>
<input type="submit" name="submit" value="Back" onclick="first.html">
</div>
</body>
</html>
Practical 4
<!DOCTYPE html>
<html>
<head>
<title>Sop4 Demo practical</title>
<style type="text/css">
body
{
background-color: lightgrey;
}
nav
{
background-color: blue;
height:30px;
line-height: 30px;
font-size: 18px;
font-family: sans-serif;
}
span
{
font-size: 20px;
}
a
{
color:#FFFFFF;
padding: 15px;
}
section
{
float: left;
width: 70%;
background-color: grey;
margin: 5px 0;
}
article
{
background-color: white;
margin: 0 5px;
}
footer
{
background-color: blue;
line-height: 20px;
height:20px;
margin: 5px 0;
color: white;
padding:12px;
font-size: 20px;
font-family: sans-serif;
clear:both;
}
aside
{
float: right;
width: 29%;
margin: 5px 0;
background-color: grey;
}
h2,h3,h1,p
{
margin : 5px 0;
padding :0 10px;
}
</style>
</head>
<body>
<header>
<h1>News</h1>
<h3> Local and National News</h3>
<nav>
<a href="#"><span>H</span>OME</a>
<a href="#"><span>A</span>rchives</a>
<a href="#"><span>A</span>bout</a>
</nav>
</header>
<aside>
<h2>BE A NEWS REPORTER</h2>
<p>If you see news happening. Send us a Text.</p>
</aside>
<section>
<h2>Local News</h2>
<article>
<h3>Fire Fighters rescue man from building this is local news 1</h3>
<p>(reporter name, date)</p>
<p> This is the fighter details. This is the story of fighter.
<br>
This is the detail of rescue man. This is the story of how is rescued.
</p>
</article>
<article>
<h3>
New Library to be built this is local news 2
</h3>
<p>(reporter name,date)</p>
<p> This is the story text. This is the story text.
<br>
This is the story text. This is the story text.</p>
</article>
</section>
<section>
<h2>
National News
</h2>
<article>
<h3>
Snow storm is making travel difficult </h3>
<p>(reporter name, date)</p>
<p>This is the story snow storm. This is the story distoiral of storm.
<br>
This is the story part continued . This is the story text continued.</p>
</article>
<article>
<h3>Thousands are without power</h3>
<p>(reporter name, date)</p>
<br>
<p>This is the story of not having power. This is the story text continued.
<br> This is the story bad effect. This is the story about destroyal of economy.
</p>
</article>
</section>
<footer>
footer information
</footer>
</body>
</html>
Practical 5
Audio.HTML
<html>
<head><title>Audio File</title></head>
<body>
<audio src="sample-3s.mp3" type="mp3" controls>
</audio>
</body>
</html>
Audio1.HTML
!DOCTYPE html>
<html>
<body>
<h1>Audio Sample</h1>
<audio controls autoplay>
<source src="sample-9s.mp3" type="audio/mp3" />
<source src="sample-3s.mp3" type="audio/mp3" />
<source src="sample-15s.opus" type="audio/ogg" />\
Your Audio file not supported in this browser!!
</audio>
</body>
</html>
PRACTICAL 6
VEDIO.HTML
!DOCTYPE html>
<html>
<body>
<p>Video Sample</p>
<video controls autoplay>
<source src="aveTube.App-Raanjhana Ve (slowed reverb)(360p).mp4"
type="audio/mp3">
<source src="test.ogg"
type="audio/o<gg">
<source src="test.opus"
type="audio/ogg">
</audio>
</body>
</html>
PRACTICAL 7
IMAGEMAP.HTML
<!DOCTYPE html>
<html>
<head>
<title>
Client Side Image Mapping </title>
</head>
<body>
<h1 align="center">Client Side Image Mapping</h1>
<img src="tatapower.png" height="300" width="300" usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="44,29,244,81" href="https://google.com" alt="Page1.html">
<area shape="circ" coords="380,271,60" href="https://in.search.yahoo.com/"
alt="Page2.html">
<area shape="poly" coords="162,279,81,373,191,431,168,368,245,388"
href="/home/hp/Downloads/12 sci/p1/Index.html" alt="page3.html" >
</map>
</body>
</html>
JAVASCRIPT PRACTICALS
PRACTICAL 1
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function ValidateEmail(inputText)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(inputText.value.match(mailformat))
{
document.form1.text1.focus();
return true;
}
else
{
alert("You have entered an invalid email address!");
document.form1.text1.focus();
return false;
}
}
</script>
</head>
<body>
<h1>Information Form</h1>
<form action="" method="" name="f1">
<table>
<tr>
<td>Your Name</td>
<td><input type="text" name="t1" required></td>
</tr>
<tr>
<td>Address</td>
<td><textarea rows="5" cols="20" name="a1" required placeholder="Enter
Address"></textarea></td>
</tr>
<tr>
<td>Contact</td>
<td><input type="number" name="n1" maxlength="10" required></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="email" name="e1" required></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="submit"
onclick="ValidateEmail(document.f1.e1)"></td>
</tr>
</table>
</form>
</body>
</html>
PRACTICAL 2
<!DOCTYPE html>
<html>
<head>
<title>
String functions
</title>
</head>
<body>
<form name="frm1">
Enter Your Name <input type="text" name="t1"><br><br>
<input type="button" name="btncheck" value="Count Vowels" onClick="cnt()">
</form>
</body>
<script type="text/javascript">
function cnt()
{
var s,i,ch,c;
c=0;
s=frm1.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 3
<!DOCTYPE html>
<html>
<head>
<title>
Palindrome
</title>
</head>
<body>
<form name="frm1">
Enter Your Name <input type="text" name="t1"><br><br>
<input type="button" name="btncheck" value="Check Palindrome" onClick="chk()">
</form>
</body>
<script type="text/javascript">
function chk()
{
var a,s,i,ch,n;
a=frm1.t1.value;
s=a.toLowerCase();
n=s.length;
var p=1;
for(i=0;i<n/2;i++)
{
if(s.charAt(i)!=s.charAt(n-1-i))
{
p=0;
break;
}
}
if(p==1)
alert("String is Palindrome");
else
alert("String is not a Palindrome");
}
</script>
</html>
PRACTICAL 4
<!DOCTYPE html>
<html>
<head>
<title>Enter Marks</title>
<script type="text/javascript">
function submit_marks() {
var sub1 = parseInt(document.getElementById('s1').value);
var sub2 = parseInt(document.getElementById('s2').value);
var sub3 = parseInt(document.getElementById('s3').value);
var sub4 = parseInt(document.getElementById('s4').value);
var sub5 = parseInt(document.getElementById('s5').value);
var sub6 = parseInt(document.getElementById('s6').value);
var total = sub1+sub2+sub3+sub4+sub5+sub6;
var per = total/6;
var grade;
if (per>=35 && per<=60) {
grade = 'F';
}
else if(per>=61 && per<=70){
grade = 'D';
}
else if(per>=71 && per<=80){
grade = 'C';
}
else if(per>=81 && per<=90){
grade = 'B';
}
else if(per>=91 && per<=100){
grade = 'A';
}
else{
grade = "Invalid or Failed";
}
document.getElementById("demo").innerHTML = "Your Total Marks :
"+total+"<br>Your Percentage : "+per+"<br>Your Grade : "+grade;
// document.write("Your Total Marks : "+total);
// document.write("<br>Your Percentage : "+per);
// document.write("<br>Your Grade : "+grade);
}
</script>
</head>
<body>
<h1>Enter Students Marks</h1>
<input type="text" id="s1" placeholder="Enter English Marks"><br>
<input type="text" id="s2" placeholder="Enter IT Marks"><br>
<input type="text" id="s3" placeholder="Enter OCM Marks"><br>
<input type="text" id="s4" placeholder="Enter Economics Marks"><br>
<input type="text" id="s5" placeholder="Enter Maths Marks"><br>
<input type="text" id="s6" placeholder="Enter Account Marks"><br>
<input type="submit" onclick="submit_marks()">
<div id="demo"></div>
</body>
</html>
PHP PRACTICALS
PRACTICAL 1
<!DOCTYPE html>
<html>
<head>
<title>Eligible to Vote or not</title>
</head>
<body>
<form action="" method="post">
Enter a no :
<input type="text" name="t1" placeholder="Enter a number">
<br><input type="submit" name="submit" value="submit">
</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>
PRACTICAL 2
<html>
<body>
<h2>Find Number of Vowels in a String</h2>
<form action="" 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');
$len = strlen($string);
$num = 0;
for($i=0; $i<$len; $i++){
if(in_array($string[$i], $vowels))
{
$num++;
}
}
echo "Number of vowels : ".$num;
} ?>
PRACTICAL 3
<?php
$subject_marks = array('English' =>56 ,'Hindi' =>76,
'Marathi'=>56,'Maths' =>57 ,'IT'=>78);
$total_marks = $subject_marks['English'] +
$subject_marks['Hindi'] + $subject_marks['Marathi'] +
$subject_marks['Maths'] + $subject_marks['IT'];
echo "English : ".$subject_marks['English'];
echo "<br>Hindi : ".$subject_marks['Hindi'];
echo "<br>Marathi : ".$subject_marks['Marathi'];
echo "<br>Maths : ".$subject_marks['Maths'];
echo "<br>IT : ".$subject_marks['IT'];
echo "<br><br>Total : ".$total_marks;
$percentage = $total_marks/5;
echo "<br>Percentage : ".$percentage;
?>
PRACTICAL 4
<!DOCTYPE html>
<head>
<title>Calculate Electricity Bill</title>
</head>
<?php
$result_str = $result = '';
if (isset($_POST['unit-submit'])) {
$units = $_POST['units'];
if (!empty($units)) {
$result = calculate_bill($units);
$result_str = 'Total amount of ' . $units . ' - ' . $result;
}
}
function calculate_bill($units) {
$unit_cost_first = 4;
$unit_cost_second = 5;
$unit_cost_third = 6;
if($units <= 100) {
$bill = $units * $unit_cost_first;
}
else if($units > 100 && $units <= 200) {
$temp = 100 * $unit_cost_first;
$remaining_units = $units - 100;
$bill = $temp + ($remaining_units * $unit_cost_second);
}
else {
$temp = (100 * 4) + (100 * $unit_cost_second) + (100 * $unit_cost_third);
$remaining_units = $units - 200;
$bill = $temp + $remaining_units ;
}
return number_format((float)$bill, 2, '.', '');
}
?>
<body>
<div id="page-wrap">
<h1>Php - Calculate Electricity Bill</h1>
<form action="" method="post" id="quiz-form">
<input type="number" name="units" id="units" placeholder="Please enter no. of
Units" />
<input type="submit" name="unit-submit" id="unit-submit" value="Submit" />
</form>
<div>
<?php echo '<br />' . $result_str; ?>
</div>
</div>
</body>
</html>
PRACTICAL 5
<!DOCTYPE html>
<html>
<body>
<h1>Students Detail</h1>
<form action="" method="post">
Enter roll no : <br>
<input type="text" name="r1"><br>
Enter your name : <br>
<input type="text" name="t1"><br>
<input type="submit" name="submit" value="submit">
</form>
<?php
$host_name="localhost";
$user_name="root";
$password="";
$connect = mysqli_connect($host_name,
$user_name,$password);
if (isset($_POST['submit'])) {
$roll_no=$_POST['r1'];
$name=$_POST['t1'];
$sql = "insert into students_table values('".$roll_no."','".$name."')";
$result = mysqli_query($connect,$sql);
if ($result) {
echo "Data inserted";
}
else{
echo "Not inserted";
}
}
?>
</body>
</html>
