Pratical no 1:
<!DOCTYPE html>
<html>
<head>
<title>Vivekanand Pratishtan Jr. College, Jalgaon </title>
<meta charset="utf-8">
<meta name="author" content="Physical Tags">
<style>
h1{border-style:dotted}
p{color:red;font-size:15pt}
body{background-color:pink}
b{text-decoration:overline}
u{text-align:right}
</style>
</head>
<body>
<h1 align="center">Vivekanand Pratishtan Jr. College, Jalgaon </h1>
<p>
Vivekanand Pratishtan Jr. College, Jalgaon, started in May 2016. The Jr. College follows the State Board Syllabus as
laid down by Maharashtra Government under the
Nashik Divisional Board. Higher Secondary Section offers Science and Commerce Stream prescribed by HSC.The
medium of instruction is English.
</P>
<h2>There are two faculties in the college is given below </h2>
<i>Commerce</i><br>
<u>Science</u><br>
<h3>The image of the college building</h3>
<img src="img1.jpg" alt="College Building" height="100" width="400">
<br><br>
<a href="page2.html">Second Page</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Vivekanand Pratishtan Jr. College, Jalgaon - Form</title>
<meta charset="utf-8">
<meta name="author" content="Form">
<style>
h1{border-style:dashed}
body{background-color:aqua}
</style>
</head>
<body>
<h1 align="center">Vivekanand Pratishtan Jr. College, Jalgaon - Enrollment Form</h1>
<form name="f1">
Enter Your Name :
<input type="text" name="n1" required>
<br><br>
Enter Your E-Mail ID :
<input type="email" name="mailid">
<br><br>
<input type="submit" name="sb" value="Submit">
</form>
<br><br>
<a href="index.html">First Page</a>
</body>
</html>
Pratical no 2:
<!DOCTYPE html>
<html>
<head>
<title> Tourist Places</title>
<style>
section{background-color:pink; width:50%;float:right}
aside{background-color:yellow;width:50%;float:left}
ol{font-style:italic; font-size:15pt}
ul{font-weight:bold; font-size:20pt}
</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>Banglore
<li>Delhi
</ol>
</aside>
<section>
<h3>Tourist places in Pune</h3>
<ul>
<li>Shanivarwada
<li> Kelkar Museum
<li> Aga Khan Palace
</ul>
<section>
</body>
</html>
Pratical no 3:
first page.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="button" value="Submit" id="Submit" onclick="window.location.href='second page.html';">
</td></tr>
</table>
</body>
</html>
Second Page.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="history.back();">
</div>
</body>
</html>
Style.css
ul
{
list-style-type: none;
}
div
{
margin-left: 230px;
margin-top: 130px;
font-size: 25px;
}
table
{
margin-left: auto;
margin-right: auto;
margin-top: 230px;
font-size: 25px;
}
Pratical no 4:
<html>
<head><style>
body{background-color: #E7E7E8; margin: 50px;}
nav,footer{background-color: #2E3192; margin: 10px;}
a,footer{color: #fff;}
a{margin: 15px;}
section{background-color: #BCBDC0; width: 65%;}
article{background-color: #fff; margin: 5px;}
section,article{padding: 10px;}
aside{float:right; width: 32.4%; background-color: #BCBDC0;}
section,aside{margin: 10px;}
header h1,p{margin: 10px;}
h1,p{margin: 5px;}
</style></head>
<body><header>
<h1 class="news">News</h1>
<p class="news">local and national news</p>
</header>
<nav><h2>
<a href="#">Home</a>
<a href="#">Archives</a>
<a href="#">About</a></h2>
</nav><aside>
<h2>BE A NEWS REPORTER</h2>
<p>If you see news happening. Send us a text</p>
</aside><section>
<h1>Local News</h1>
<article>
<h2>Fire fighters rescue man from building this is local news 1</h2>
<p>(reporter name, date)</p>
<p>This is the fighter details text. This is the story of fighter
<br>This is the detail of recue man. This is the story of how is rescued.</p>
</article>
<article>
<h2>New Library to be built this is local news 2</h2>
<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><h1>National News</h1>
<article>
<h2>Snow storm is making travel difficult</h2>
<p>(reporter name, date)</p>
<p>This is the story snow storm. This is the story distros of storm.
<br> This is the story part continued. This is the story text continued.</p>
</article>
<article><h2>Thousands are without power</h2>
<p>(reporter name, date)</p>
<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 destroyer of economy.</p>
</article></section>
<footer>
<h2>footer information</h2>
</footer>
</body></html>
Pratical no 5:
<!DOCTYPE html>
<html>
<head><title>Multiple Audio Files with controls</title></head>
<body>
<center>
<h1 align="center">Multiple Audio Files with controls</h1>
<h2>The text between the audio tags will only be displayed in browsers that do not support the audio
element.</h2>
<h3>List of sound files formats</h3>
<ol><center>
<li>wav-audio/wav</li>
<li>mp3-audio/mpeg</li>
<li>ogg-audio/ogg</li> </center></ol>
<h2> Audio with Wav format</h2>
<audio controls autoplay>
<source src="iphone_6.wav" type="audio/wav">
</audio>
<h2> Audio with Mp3 format</h2>
<audio controls autoplay>
<source src="iphone_6.mp3" type="audio/mp3">
</audio>
<h2> Audio with Ogg format</h2>
<audio controls autoplay>
<source src="iphone_6.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</center>
</body>
</html>
Pratical no 6:
<html>
<head><title>Image Mapping</title></head>
<body>
<img src="garden.jpg" alt="Garden Home" usemap="#garden" height="500" width="500">
<map name="garden">
<area shape="poly" coords="53,173,33,223,52,269,72,222" href="p1.html">
<area shape="rect" coords="132,374,157,394" href="p2.html">
<area shape="circle" href="p3.html">
</map>
</body>
</html>
Pratical no 7:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body id="background">
<h1>Background Color is being changed every 1 seconds</h1>
<script>
var i = 0;
function change()
{
var doc = document.getElementById("background");
var color = ["red", "blue", "brown", "green","yellow","pink","orange"];
doc.style.backgroundColor = color[i];
i = i+1;
if(i==7)
{
doc.style.backgroundColor = "white";
}
}
function click_btn()
{
window.status = "Background Color is being changed every 1 seconds";
}
</script>
<input type="button" name="b1" value="over here" onmouseover="setInterval(change, 1000)">
<input type="submit" name="b2" value="click here" onclick="click_btn()">
</body>
</html>
Pratical no 8:
<!doctype html>
<html>
<head>
<script>
var num, temp;
function fun()
{
num = parseInt(document.getElementById("num").value);
if(num)
{
temp = document.getElementById("resPara");
temp.style.display = "block";
if(num%2==0)
document.getElementById("res").innerHTML = "Even";
else
document.getElementById("res").innerHTML = "Odd";
}
}
</script>
</head>
<body>
<p>Enter the Number: <input id="num"><button onclick="fun()">Check</button></p>
<p id="resPara" style="display:none;">It is an <span id="res"></span> Number</p>
</body>
</html>
Pratical no 9:
<!DOCTYPE html>
<html><head> <title>Sop 2 JAVaScript</title></head>
<body>
<h1>Information Form</h1>
<form name="f1">
Your Name <input type="text" name="txt_name"><br><br>
Address <textarea name="txt_address" placeholder="Permanent Address"/></textarea><br><br>
Contact <input type="tel" name="telephone" maxlength="10"> <br><br>
Email <input type="email" name="txt_email" pattern="[A-Z a-z]{0-9}-[@]{1}-[.]{1}"><br><br>
<input type="button" name="b1" value="submit" onclick="validate_email()">
</form>
</body>
<script type="text/javascript">
function validate_email()
{
var x=f1.txt_email.value;
var at_pos=x.indexOf("@");
var last_pos=x.lastIndexOf("@");
var firstdot_pos=x.indexOf(".");
var dot_pos=x.lastIndexOf(".");
if (at_pos<1||dot_pos<at_pos+2||dot_pos+2>=x.length||firstdot_pos<at_pos||at_pos<last_pos)
{
alert("Not an Valid email address");
f1.txt_email.focus();
}
else
{
alert("Valid Email Address");
return true;
}
}
</script>
</html>
Pratical no 10:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function getVowels() {
var vowelsCount = 0;
var str = document.getElementById("t1").value;
var string = str.toString();
for (var i = 0; i <= string.length - 1; i++) {
if (string.charAt(i) == "a" || string.charAt(i) == "e" || string.charAt(i) == "i" || string.charAt(i) == "o" ||
string.charAt(i) == "u") {
vowelsCount += 1;
}
}
//document.write("Total Vowels : "+vowelsCount);
document.getElementById('demo').innerHTML = "Total Vowels : "+vowelsCount;
return vowelsCount;
}
</script>
<tr>
<td><input type="text" id="t1"></td>
<td><input type="submit" name="submit" onclick="getVowels()"></td>
</tr>
<p id="demo"></p>
</body>
</html>
Pratical no 11:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function reverse_String() {
var str = document.getElementById('s1').value;
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 Striing">
<input type="submit" name="" onclick="reverse_String()">
</body>
</html>
Pratical no 12:
<!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>
Comments
Post a Comment