SOP 1Creation of website using HTML5 and CSS3.
<html>
<head>
<title>Create Website</title>
<style> h1
{background-color: aqua;}
b
{color: red;}
u{font-size: 20;}
i{text-decoration: overline;}
</style>
</head>
<body>
<h1 align="center">GLOBAL COLLEGE</h1>
<p>
<b>Global Public School And Junior College</b><br><br><br>
<u>It is One of the best Organization in Excellence in Education</u><br><br><br>
<i>Institute conducted various course</i>
</p>
<br> <br><br>
<img src="co.jpg" height="500" width="400" alt="college">
<br><br><br>
<a href="page2.html">Click here for next page</a>
</body>
</html>
Code for page2.html
<!DOCTYPE html>
<html>
<head>
<title>Registration form</title>
</head>
<body>
First Name:<input type="text" name="fname"><br><br>
Last Name:<input type="text" name="lname"><br><br>
Email:<input type="email" name="email"><br><br>
Gender:<input type="radio" name="r1">Male<br><br>
<input type="radio" name="r1">Female<br><br> Qualification:
<select>
<option>SSC</option>
<option>HSC</option>
<option>Graduation</option>
<option>Post Graduation</option>
</select><br><br>
<input type="submit" value="submit"><br><br></body></html>
SOP2 Create a website using HTML5 and CSS as the layout display.
Code for framset.html (page1)
<html>
<head>
<title>Framesaet</title>
</head>
<body>
<frameset rows=30%,70%>
<frame src=top.html>
<frameset cols=50%,50%>
<frame src=left.html>
<frame src=right.html>
</frameset>
</frameset>
</body>
</html>
Code for top.html(page2)
<html>
<head>
<title>top</title>
</head>
<body style="background-color: skyblue">
<center>
<h1 style="color: pink">Tourist Places</h1>
</center>
</body>
</html>
Code for left.html(page3)
<html>
<head>
<title>left</title>
<style> body
{
background-color: lightyellow;
}
h4
{
font-style: normal;
}
</style>
</head>
<body>
<h4>City</h4>
<ol type="1">
<li>Pune</li>
<li>Banglore</li>
<li>Hydrabad</li>
<li>Delhi</li></ol></body></html>
Code for right.html(page4)
<html>
<head>
<title>right</title>
<style> body
{
background-color: pink;
}
h3
{
font-style: normal;
}
</style>
</head>
<body>
<h3>Tourist Places in Pune
<ul type="disc">
<li>Shaniwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad Fort</li>
</ul>
</h3>
</body>
</html>
SOP5:Use of Audio on web pages using HTML5
Code for audio.html
<html>
<head>
<title>Audio ex</title>
</head>
<body>
<h1>Audio Example With Single Source File</h1>
<audio controls height="500" width="500" autoplay>
<source src="audio.mp3" type=" audio.mp3">
</audio>
</body>
</html>
Code for audio1.html
<html>
<head>
<title>Audio ex</title>
</head>
<body>
<h1>Audio Example With Multiple Source File</h1>
<audio controls height="500" width="500" autoplay>
<source src="audio1.ogg" type="audio/ ogg ">
<source src=" audio.mp3" type=" audio /mp3">
</audio>
</body>
</html>
SOP6:Use of Video on Web pages using HTML5 Code for video.html
<html>
<head>
<title>video ex</title>
</head>
<body>
<h1>Video Example With Single Source File</h1>
<video controls height="500" width="500" autoplay>
<source src="movie.mp4" type="video/mp4">
</video>
</body>
</html>
Code for video1.html
<html>
<head>
<title>video ex</title>
</head>
<body>
<h1>Video Example With Multiple Source File</h1>
<video controls height="500" width="500" autoplay>
<source src="movie1.ogg" type="video/ ogg ">
<source src="movie2.webm" type="video/ webm ">
<source src="movie.mp4" type="video/mp4">
</video>
</body>
</html>
SOP7:Navigation on an image using client side iamge mapping in web page using html5
Code for client.html
<html>
<head>
<title>Image Map</title>
</head>
<body>
<center>
<h1>Client side Image Mapping</h1>
<img src="home.jpg" height="500" width="500" usemap="#abc">
<map name="abc">
<area shape="rect coords=416,195,625,304" href="https://www.gmail.com">
<area shape="poly coords=473,391,427,480,558,481 "href="https://www.yahoo.com">
</map>
</center>
</body>
</html>
