SOP1
index.html
<HTML>
<HEAD>
<TITLE>St. Mary's College</TITLE>
</HEAD>
<META CHARSET="UTF-8">
<META NAME="author" content="physical tags">
<STYLE>
h1{border-style:dotted;border-color:blue} p{color:yellow;font-size:40px}
body{background-color:pink}
b{text-decoration:overline} u{font-family:Arial}
</STYLE>
<BODY>
<H1 align="center">St. Mary's Convent High School & Jr. College, Uran</H1>
<P>
One of the renowed college in Uran, where education is the first priority.
It is acquanted with the well qualified teachers. Various types of facilities are
provided to students that include labs, library and sports.
</P>
<B> St. Mary's convent High School & Jr. college</B><br>
<I>Bazar peth Mora road</I><br>
<U> Uran</U><br>
<h3> Image of the college</h3>
<Img src="college.jpg" height="400" width="400" alt="college pic"><br>
<A href="second.html">Second Page</A>
</BODY>
</HTML>
page2.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Creation of Form</TITLE>
<META CHARSET="UTF-8">
<META NAME="author" content="form">
<STYLE>
h1{border-style:dashed;border-color:green}
body{background-color:pink}
</STYLE>
</HEAD>
<BODY>
<h1 align="center">Enrollment Form</h1>
<Form name="f1">
Enter your Name :<Input type="text" name="mn"><br>
Enter your Email ID "<Input type="email" name="email"><br>
<Input type="submit" name="submit" value="submit">
</form>
<A href="index.html">First Page</A>
</BODY>
</HTML>
SOP3
page1.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Information</TITLE>
<link rel="stylesheet" type="text/css" href="travel.css".
</head>
<body>
<h1 align="center">Traveller Informationform</h1>
<form name="f1">
Enter your Name : <Input type="text" name="mn" autocomplete><br>
Select the Date of Travel : <Input type="date" name="dt"><br>
Enter the Telephone number : <Input type="tel" name="num" pattern="[0-9]{3}-[0-9]
{2}-[0-9]{3}" required><br>
<input type="image" name="submit" src="flower.jpg" height="100" width="100">
</form><br>
<a href="page2.html">Page 2</a>
</body>
</html>
page2.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Information</TITLE>
<link rel="stylesheet" type="text/css" href="travel.css".
</head>
<body>
<h1 align="center">Information about Transporter</h1>
<ul>
<li>Name of the Transporter - Emirates</li>
<li> Seat No - 999 </li>
<li> Time - 09.30 am</li>
<li> Destination - Andaman Nicobar</li>
</ul>
<a href="page1.html">First Page</a>
</body>
</html>
travel.css
h1{background-color:green;border-style:double}
body{background-color:lightblue}
ul{font-family:Ariel}
SOP 5
audio1.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>SINGLE AUDIO WITH CONTROL</TITLE>
</HEAD>
<BODY BGCOLOR="YELLOW">
<CENTER>
<img src="baby.gif" height="200" width="200" alt="baby">
</center>
<audio controls autoplay loop="-1">
<source src="melody.ogg" type="audio/ogg">
</audio>
</body>
</html>
audio2.html
<!doctype html>
<html>
<head>
<title>AUDIO WITH CONTROL</title>
</head>
<body bgcolor="PINK">
<center>
<img src="baby.gif" height="200" width="200" alt="baby">
</center>
<h3> List of Sound files formats</h3>
<ol>
<li>mp3-audio/mp3</li>
<li>ogg-audio/ogg</li>
<li>wav-audio/wav</li>
</ol>
<audio controls autoplay>
<source src="melody.ogg" type="audio/ogg">
<source src="melody.mp3" type="audio/mp3">
<source src="melody.wav" type="audio/wav">
Your Browser does not support the audio element
</audio>
</body>
</html>
SOP 6
video1.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>SINGLE VIDEO FILE</TITLE>
</HEAD>
<BODY BGCOLOR="ORANGE">
<video width="400" height="400" controls autoplay>
<source src="clock.mp4" type="video/mp4">
</video>
</body>
</html>
video2.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> VIDEO WITH MULITPLE SOURCES</TITLE>
</HEAD>
<BODY BGCOLOR="ORANGE">
<h4> List of video files formats </h4>
<ol>
<li>mp4- video/mp4</li>
<li>webm - video/webm</li>
<li>ogg - video/ogg</li>
</ol>
<video width="400" height="400" controls autoplay>
<source src="clock.mp4" type="video/mp4">
<source src="clock.webm" type="video/webm">
<source src="clock.ogg" type="video/ogg">
Your browser does not support the VIDEO element.
</video>
</body>
</html>
SOP 7
map.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>CLENT SIDE IMAGE MAPPING</TITLE>
</HEAD>
<BODY BGCOLOR="LIGHTBROWN">
<img src="a.jpg" usemap="#map1">
<map name="map1">
<area shape="rect" coords="182,170,481,302" href="audio1.html">
<area shape="poly" coords="804,327,926,127,1045,324" href="video1.html">
<area shape="circle" coords="622,505,103" href="audio2.html">
</map>
</body>
</html>
