S.H.V.O.V & JR.
COLLEGE, BHIWANDI
Skill Set-1
SOP-1
S.H.V.O.V & JR. COLLEGE, BHIWANDI SUNIL SHUKLA & PRIYA PAL
S.H.V.O.V & JR. COLLEGE, BHIWANDI
AIM: Creation of website using HTML and CSS. (Internal CSS)
index.html
<!DOCTYPE html><html>
<head><title> College Website</title>
<meta name="authors" content="S.H.V.O.V">
<meta name="keyword" content="college, oswal, bhiwandi">
<style>
h1{color:red;
background-color:yellow;
text-align:center;
text-decoration:underline;
}
</style>
</head>
<body>
<H1>S.H.V.O.V & JR COLLEGE </H1>
<img src="school2.jpg" height=300 width=500 alt="College image">
<p> This college is one of the <b>best</b> college in
<u>Bhiwandi</u>. This college have Science, Science-IT
and Commerce, Commerce-IT. This college started in
<i>1988</i>. </p>
<a href="page2.html"> Registration Form </a>
</body>
</html>
S.H.V.O.V & JR. COLLEGE, BHIWANDI SUNIL SHUKLA & PRIYA PAL
S.H.V.O.V & JR. COLLEGE, BHIWANDI
page2.html
<!DOCTYPE html><html>
<head><title> Css</title>
<meta name="authors" content="shvov">
<meta name="keyword" content="registration, oswal, form">
</head>
<body>
<H1>S.H.V.O.V & JR COLLEGE </H1>
<form name="f1">
Name<input type="text" name="t1"><br>
Email<input type="email" name="t2"><br>
Gender<input type="radio" name="t3"> Male
<input type="radio" name="t3">Female<br>
Date of Birth<input type="date" name="t4"><br>
<input type="button" name="t5" value="Submit"><br>
</form>
<a href="index.html"> Home Page </a>
</body>
</html>
S.H.V.O.V & JR. COLLEGE, BHIWANDI SUNIL SHUKLA & PRIYA PAL
S.H.V.O.V & JR. COLLEGE, BHIWANDI
S.H.V.O.V & JR. COLLEGE, BHIWANDI SUNIL SHUKLA & PRIYA PAL
S.H.V.O.V & JR. COLLEGE, BHIWANDI
Skill Set-1
SOP-2
S.H.V.O.V & JR. COLLEGE, BHIWANDI SUNIL SHUKLA & PRIYA PAL
S.H.V.O.V & JR. COLLEGE, BHIWANDI
AIM: Creation of website using HTML and CSS. (External CSS)
traveller.html
<!DOCTYPE html><html>
<head><title> external css</title>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
<body><h1 align="center"> traveller information </h1>
<form name="f1">
Name of the traveller<input type="text" name="name"><br><br>
date of traveller<input type="date" name="trvdate"><br><br>
telephone no<input type="tel" name="phone"><br><br>
<input type="image" src="submit.png" height="100" width="100">
</form><br>
<a href="transporter.html"><b>tranporter form<b></a>
</body>
</html>
S.H.V.O.V & JR. COLLEGE, BHIWANDI SUNIL SHUKLA & PRIYA PAL
S.H.V.O.V & JR. COLLEGE, BHIWANDI
transporter.html
<!doctype html>
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
<h1> Transporter Information </h1>
<form name="f1">
<ul>
<li>Name of transporter – Air Asia</li>
<li>Seat no – B39</li>
<li>Destination - Delhi</li>
</ul>
<a href="traveller.html">traveller page
</form>
</body>
</html>
external.css
body{background-color:yellow;text-align:center;}
h1{color:green;}
ul{list-style-type:none;}
S.H.V.O.V & JR. COLLEGE, BHIWANDI SUNIL SHUKLA & PRIYA PAL
S.H.V.O.V & JR. COLLEGE, BHIWANDI
Skill Set-1
SOP-3
S.H.V.O.V & JR. COLLEGE, BHIWANDI SUNIL SHUKLA & PRIYA PAL
S.H.V.O.V & JR. COLLEGE, BHIWANDI
AIM: Use of Audio using HTML5.
audio.html
<!DOCTYPE html>
<html>
<head> <title> Audio autoplay </title> </head>
<body>
<h1> Audio autoply </h1>
<audio controls autoplay loop="-1">
<source src="mangal.mp3" type="audio/mpeg">
</audio>
</body>
</html>
audio1.html
<!DOCTYPE html>
<html>
<head> <title> Audio autoplay </title> </head>
<body>
<h1> Audio with multiple source. </h1>
<audio controls>
<source src="mangal.ogg" type="audio/ogg">
<source src="mangal.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
S.H.V.O.V & JR. COLLEGE, BHIWANDI SUNIL SHUKLA & PRIYA PAL
S.H.V.O.V & JR. COLLEGE, BHIWANDI
S.H.V.O.V & JR. COLLEGE, BHIWANDI SUNIL SHUKLA & PRIYA PAL
S.H.V.O.V & JR. COLLEGE, BHIWANDI
Skill Set-1
SOP-4
S.H.V.O.V & JR. COLLEGE, BHIWANDI SUNIL SHUKLA & PRIYA PAL
S.H.V.O.V & JR. COLLEGE, BHIWANDI
AIM: Use of Video using HTML5.
Video.html
<!DOCTYPE html>
<html>
<head>
<title> Video 1 </title>
</head>
<body>
<h1> Video with controls </h1>
<video controls autoplay height=350 width=350>
<source src="sandeshe.mp4" type="video/mp4">
</video>
</body>
</html>
video1.html
<!DOCTYPE html>
<html>
<body>
<h1>The video controls attribute</h1>
<video height="300" width="300" controls>
<source src="hindi.mp4" type="video/mp4">
<source src="hindi.ogg" type="video/ogg">
Your browser does not support the video tag.
S.H.V.O.V & JR. COLLEGE, BHIWANDI SUNIL SHUKLA & PRIYA PAL
S.H.V.O.V & JR. COLLEGE, BHIWANDI
</video>
</body>
</html>
S.H.V.O.V & JR. COLLEGE, BHIWANDI SUNIL SHUKLA & PRIYA PAL
S.H.V.O.V & JR. COLLEGE, BHIWANDI
Skill Set-1
SOP-5
S.H.V.O.V & JR. COLLEGE, BHIWANDI SUNIL SHUKLA & PRIYA PAL
S.H.V.O.V & JR. COLLEGE, BHIWANDI
AIM: Image Mapping.
index.html
<!DOCTYPE html>
<html>
<head>
<title> Image Mapping. </title>
</head>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go
to a new page and read more about the topic:</p>
<img src="workplace.jpg" alt="Workplace" height="379" width="400" usemap="#shvov">
<map name="shvov">
<area shape="rect" coords="34,44,270,350" href="laptop.html" alt="Laptop">
<area shape="rect" coords="290,172,333,250" href="phone.html" alt="Phone">
<area shape="circle" coords="337,300,44" href="coffee.html" alt="Cup of coffee">
</map>
</body>
</html>
S.H.V.O.V & JR. COLLEGE, BHIWANDI SUNIL SHUKLA & PRIYA PAL
S.H.V.O.V & JR. COLLEGE, BHIWANDI
coffee.html
<!DOCTYPE html>
<html>
<head>
<title> Coffee </title>
</head>
<body>
<h2>Coffee</h2>
This is coffee page.
</body>
</html>
S.H.V.O.V & JR. COLLEGE, BHIWANDI SUNIL SHUKLA & PRIYA PAL
S.H.V.O.V & JR. COLLEGE, BHIWANDI
laptop.html
<!DOCTYPE html>
<html>
<head>
<title> Laptop </title>
</head>
<body>
<h2>Laptop</h2>
This is laptop page.
</body>
</html>
phone.html
<!DOCTYPE html>
<html>
<head>
<title> Mobile Phone </title>
</head>
S.H.V.O.V & JR. COLLEGE, BHIWANDI SUNIL SHUKLA & PRIYA PAL
S.H.V.O.V & JR. COLLEGE, BHIWANDI
<body>
<h2>Phone</h2>
This is phone page.
</body>
</html>
S.H.V.O.V & JR. COLLEGE, BHIWANDI SUNIL SHUKLA & PRIYA PAL
