SOP 1: Creation of website using
HTML5
[Link]
<img src="tata [Link]" width="200"
<DOCTYPE!html>
height="250"><br><br>
<html> <head> <title> Tata Group</title>
<a href="[Link]">Second page</a>
<style>
</body>
h1{border-style:dotted}
</html>
p{color:red;font-size:15pt}
body{background-color:pink}
b{text-decoration:overline}
[Link]
u{text-align:right}
<!DOCTYPE html>
</style>
<html> <head> <title> Forms</title>
</head> <body>
<meta charset="utf-8"> <meta name="author"
content="form">
<h1 align="center">Tata Sons Private
<style>
Limited</h1>
h1{border-style:dashed}
<p>
body{background-color:aqua}
66% of the equity share capital of Tata Sons is
</style> </head> <body>
held by philanthrophic trusts,which support
<h1 align="center">Entrollment form</h1>
education,health,livelihood generation,and art and
<form name="f1">
[Link] Tata copany or enterprise operates
Enter your name
independently under the guidance and supervision
<input type="text" name="t1" required> <br><br>
of its own Board of Directors. </p>
Enter Your Email ID
<b>Governance Philosophy</b><br><br>
<input type="email" name="emailid"><br><br>
<i>Tata code of conduct</i><br><br>
<input type="submit name="submitbtn"
<u>Tata Buisness Excellence Model
value="Submit">
(TBEM)</u><br><br>
</form>
<h3>Image of Tata industries </h3>
<a href="[Link]">first page
</a>
</body> </html>
CHM COLLEGE | IT JOURNAL
SOP 2: Use of internal stylesheet
[Link]
<!DOCTYPE html>
<html>
<head> <title> Tourist Places </title>
<style>
section{background-color:pink;width:50%;height:50%;float:right}
aside{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>
<li>Benglore</li>
<li>Hyderabad</li>
<li>Delhi</li>
</ol>
</aside>
<section>
<h3>Tourist Places in Pune</h3>
<ul>
<li>Shanivarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad fort</li>
<li>Aga khan Palace</li>
</ul>
</section>
</body> </html>
CHM COLLEGE | IT JOURNAL
SOP 3: Use of External Stylesheet
[Link] [Link]
<!DOCTYPE html> <html>
<html> <head> <title> Information Form </title> <head> <title> Information about Transporter
<link </title>
rel="stylesheet"type="text/css"href="[Link]" <link
> rel="stylesheet"type="text/css"href="[Link]"
</head> <body> >
<h1 align="center">Traveller Information </head> <body>
form</h1> <h1 align="center">Information about
<form name="f1"> Transporter</h1>
Enter your name <ul>
<input type="text" name="name" <li>Name of Transporter-Air Asia</li>
autocomplete><br><br> <li>Time-09.30am</li>
Select Data of Travel <li>Seat no-B39</li>
<input type="date" name="trvdate"><br><br> </ul>
Enter Telephone Number <a href="[Link]">Connect First Page</a>
<input type="tel" name="phone" </body>
placeholder="123-456-7890"pattern="[0-9]{3}- </html>
[0-9]{3}[0-9]{4}"required><br><br>
<input type="image" src="[Link]" [Link]
width=150"> </form> <br><br> h1{background-color:green;border-style:double}
<a href="[Link]">click here to go to page2 body{background-color:lightgreen}
</body> ul{font-family:Algerian}
</html>
CHM COLLEGE | IT JOURNAL
SOP 4: Use of Audio on webpage
[Link]
<!DOCTYPE html>
<html> <head> <title>Single Audio with controls</title>
<body>
<h1 align="center">Audio with controls</h1>
<audio controls autoplay loop="-1">
<source src="Kalimba.mp3" type="audio/mpeg">
</audio>
</body> </html>
[Link]
<!DOCTYPE html>
<html>
<head> <title> Multiple Audio Files with controls</title> </head>
<body>
<h1 align="center">Multiple Audio Files with controls</h1>
<h2>
The text between the audio will only be displayed in browsers that do not support the audio element.</h2>
<h3>List of sound files formats</h3>
<ol>
<li>mp3-audio/mpeg</li>
<li>ogg-audio/ogg</li>
<li>wav-audio/wav</li>
</ol>
<audio controls autoplay>
<source src="[Link]" type="audio/wav">
<source src="test.mp3" type="audio/mp3">
<source src="[Link]" type="audio/ogg">
Your browser does not support the audio elemnt.
</audio>
</body>
</html>
CHM COLLEGE | IT JOURNAL
SOP 5: Use of video controls
[Link]
<!DOCTYPE html>
<html> <head> <title> Video file on webpage with controls </title>
</head>
<body>
<h1 align="center"> Single Video File on Webpage with controls</h1>
<video src ="demovid.mp4" controls width = "150" height ="150" loop = -1 autoplay>
</video>
</body> </html>
[Link]
<!DOCTYPE html>
<html>
<head> <title> Multiple Video Files on webpage with controls</title> </head>
<body>
<h1 align="center">Multiple video Files with controls</h1>
<h2>
The text between the video tags will only be displayed in browsers that do not support the video
element.</h2>
<h3>List of video files formats</h3>
<ol>
<li>mp3-video/mpeg</li>
<li>ogg-video/ogg</li>
<li>WebM-vfideo/WebM</li>
</ol>
<video controls width = "100" height = "100" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">
<source src="[Link]" type="video/ogg">
Your browser does not support the audio elemnt.
</video>
</body> </html>
CHM COLLEGE | IT JOURNAL
SOP 6: Client Side Image Mapping
[Link]
<!DOCTYPE html>
<html>
<head>
<title>
Client Side Image Mapping</title>
</head>
<body>
<h1 align="center">Client Side Image Mapping</h1>
<img src = "[Link]" width = "800" height = "800" usemap="#imagemap">
<map name = "imagemap">
<area shape="rect" coords="558,158,905,289" href="[Link]">
<area shape="circ" coords="277,191,60" href="[Link]">
<area shape="rect" coords="162,279,81,373,191,431,168,368,245,388" href="[Link]">
</map>
</body>
</html>
CHM COLLEGE | IT JOURNAL