IT PRACTICAL SOP 1 TO SOP 7-1

SOP 1
<!DOCTYPE html>
<html>
<head><title>this is index page </title>
<meta name="authors" content="Ranjeet">
<meta name="description" content="reliance industries">
<meta name="keywords" content="telecom,power fiber, textile, chemical">
<meta name="copyright" content="copyright Reliance All right reserved">
<style>
h1{font-size: 75px; color: aquamarine; text-align: center;}
body{background-color: plum;}
</style>
</head>
<body>
<h1><b><u>RELEIANCE INDUSTRIES </u></b></h1>
<h2><i>MODEST BEGINNINGS</i></h2>
<h2><i>MAMMOTH ASPIRATIONS</i></h2>
<p>Dhirubhai Ambani returns to india in 1957 after a stint with A,<br>
Besse & Co. Aden, Yemen. He starts a yarn trading business from a small 500
sq.ft of office in Masjid Bunder, Mumbai, but dreams of establisher</p>
</p><br>
<img src="C:\Users\Om Computers\OneDrive\Documents\video\webpage
sop\dhirubhai.jpeg" height="500" width="450" alt="ambani"><br>
<a href="second page.html">click here to go second page</a>
</body></html>
<!DOCTYPE html>
<html>
<head><title>feedback form</title>
<body>
<form>
Name:<input type="text"><br><br>
Email:<input type="email"><br><br>
Subject:<input type="text"><br><br>
Message:<input type="text"><br><br>
<input type="image" src="C:\Users\Om
Computers\OneDrive\Documents\video\webpage sop\submit.png" alt="click here
to submit">
</form>
<a href="first page.html">click here to go first page</a>
</body>
</head>
</html>
SOP 5:
<!DOCTYPE html>
<html>
<head>
<title>audio tag play music automatically shows controls in
IE11.1282.17763.0</title>
<h1>audio tag</h1>
<audio src="C:\Users\Om Computers\OneDrive\Documents\video\audio
1\chin_tapak_dum_dum.mp3" autoplay controls loop>
your browser does not support
</audio>
</head>
</html>
OUTPUT:-
SOP 6:
<!DOCTYPE html>
<html>
<body>
<h1>The video autoplay attribute</h1>
<video width="420" height="340" controls autoplay>

<source src="illusion.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
OUTPUT:-
SOP :
<!DOCTYPE html>
<html>
<head><tite>client side image mapping</tite>
<body>
<img src="C:\Users\Om Computers\OneDrive\Documents\video\image
maping\india map.jpg" usemap="#india">
<map name="india">
<area shape="circle" coords="270,113,52" href="https://google.com"
alt="google link">
<area shape="rect" coords="61,358,240,461" href="https://yahoo.com"
alt="yahoo link">
<area shape="poly" coords="326,209,330,345,395,348"
href="https://gamerspoted.w3spaces.com" alt="game">
</map>
</body> </head></html>
OUTPUT:-
SOP:- 2
<!DOCTYPE html>
<html>
<head><title>sop 2 with section</title>
<meta charset="UTF-8">
<style>
*{
margin: 0px;
padding: 0px;
}<!--reset all rows and cols>
div#conatainer
{
border:5px solid black;
width: 80%;
}
section#topbar
{
background-color: lightblue;
height: 100px;
border: solid black;
}
section#rightcol
{
background-color:plum;
height: 300px;
width: 800px;
float: right;
}
section#leftcol
{
background-color: lightyellow;
height: 300px;
}
ol
{
margin-left: 5px;
list-style-type: number;
list-style-position: inside;
}
ul{
margin-left: 5px;
list-style-type:disc;
list-style-position: inside;
}
h1.a{color:red; top:50px; left: 500px;position: absolute;}
</style>
<body>
<div id="container">
<section id="topbar">
<h1 class="a">TOURIST PLACES</h1>
</section>
<section id="rightcol">
<h1>Tourist places in pune</h1>
<ul class="1">
<li>ShanivarWada</li>
<li>Kelkar Museum</li>
<li>Sinhagad fort</li>
<li>Ravet</li>
</ul>
</section>
<section id="leftcol">
<h1>City</h1>
<ol>
<li>Pune</li>
<li>Banglore</li>
<li>Hyderabad</li>
<li>Delhi</li>
</ol>
</section>
</div>
</body>
</head>
</html>
SOP:4
<!DOCTYPE html>
<html>
<head>
<title>Sop4 Demo practical</title>
<style type="text/css">
body
{
background-color: lightgrey;
}
nav
{
background-color: blue;
height:30px;
line-height: 30px;
font-size: 18px;
font-family: sans-serif;
}
span
{
font-size: 20px;
}
a
{
color:#FFFFFF;
padding: 15px;
}
section
{
float: left;
width: 70%;
background-color: grey;
margin: 5px 0;
}
article
{
background-color: white;
margin: 0 5px;
}
footer
{
background-color: blue;
line-height: 20px;
height:20px;
margin: 5px 0;
color: white;
padding:12px;
font-size: 20px;
font-family: sans-serif;
clear:both;
}
aside
{
float: right;
width: 29%;
margin: 5px 0;
background-color: grey;
}
h2,h3,h1,p
{
margin : 5px 0;
padding :0 10px;
}
</style>
</head>
<body>
<header>
<h1>News</h1>
<h3> Local and National News</h3>
<nav>
<a href="#"><span>H</span>OME</a>
<a href="#"><span>A</span>rchives</a>
<a href="#"><span>A</span>bout</a>
</nav>
</header>
<aside>
<h2>BE A NEWS REPORTER</h2>
<p>If you see news happening. Send us a Text.</p>
</aside>
<section>
<h2>Local News</h2>
<article>
<h3>Fire Fighters rescue man from building this is local news 1</h3>
<p>(reporter name, date)</p>
<p> This is the fighter details. This is the story of fighter.
<br>
This is the detail of rescue man. This is the story of how is rescued.
</p>
</article>
<article>
<h3>
New Library to be built this is local news 2
</h3>
<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>
<h2>
National News
</h2>
<article>
<h3>
Snow storm is making travel difficult </h3>
<p>This is the story snow storm. This is the story distoiral of storm.
<br>
This is the story part continued . This is the story text continued.</p>
</article>
<article>
<h3>Thousands are without power</h3>
<br>
<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 destroyal of economy.
</p>
</article>
</section>
<footer>
footer information
</footer>
</body>
</html>
SOP 3:
<!DOCTYPE html>
<html>
<head>
<title>SOP3 Demostration</title>
</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">
</td>
</tr>
<tr>
<td>
<input type="image" name="Submit" id="Submit" src="submit.png"
> </td>
</tr>
</table>
</body>
<style>
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;
}
</style>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Second Page Html</title>
</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" ></div>
</body>
<style>
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;
}
</style>
</html>

IT PRACTICAL SOP 1 TO SOP 7-1

Uploaded by

Copyright:

Available Formats

IT PRACTICAL SOP 1 TO SOP 7-1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IT PRACTICAL SOP 1 TO SOP 7-1

Uploaded by

Copyright:

Available Formats

SOP 1

<h1>The video autoplay attribute</h1>

<video width="420" height="340" controls autoplay>

You might also like