SOP
SOP 1: Creation of website using HTML5.
PAGE 1[Index.html]
<!DOCTYPE html>
<html>
<head>
<title Save Environment save life></title>
<meta name="keyword" content="guift,nature">
<meta name="description" content="Earth Environment deals with many gift of nature">
<style>
h1{font-size:40; color:red; text-align:center; font-family:lucida sans;}
p{font-size:16pt; color:white;}
b{color:white;}
body {background-color:blue;}</style></head>
<body>
<h1>Environment-Gift of Nature</h1>
<p><u><b>Environment</b></u> refers to physical surroundings of
living things. Mother nature in her infinite wisdom, has gifted them to
man to live in harmony with him and to be the of great service to him. </p>
<a href='https://www.linkpicture.com/view.php?img=LPic63d3daee25c061782974014'><img src='https://www.linkpicture.com/q/OIP_23.jpg' type='image' height="200" width="250" alight="left" alt= "Earth's Environment"></a>
<p>The <b><big>nature</big></b>has provided us numerous gifts as
air,water,land,sunlight,minerals,plants, and animals. All these gifts of
nature make our earth a place worth living.</p>
<p>The main rivals for destruction of natures are cruel human being.
Other than this, various factors are responsible for <b>environmental damage</b>
one of the major factors is <a herf="Pollution.html">Pollution </a>
<p>To read more details about the environment please <a herf="Page2.html">registeer</a>your name
</body>
</html>
OUTPUT:
PAGE 2[Page2.html]
<!DOCTYPE html>
<html>
<head><title>Registration
from</title>
<meta charset="utf-8">
<meta name="keywords"
content="Member, register">
<meta name="description"
content="Membership registration
according to profession">
<style>
h1{font-size:30pt; color:navyblue;
text-align:center;}
body
{background-color:green;}</style></head>
<body bgcolor=orange>
<form name =f1><hr><img
src="logo.png" alt="Membere registration"
align="right" height=70 width=70>
<h1 align=center>Member Registration
form</h1><hr><table>
<tr><td>Full name:
<td><input typ[e=text name=t1 size=20
Placeholder="Enter name"
required>
<tr><td>Login
id:<td><input type=text name=11 maxlength=10
Placeholder="Enter username"
required>
<tr><td>Password:
<td><input type="Password name=pass maxlength=10
Placeholder="Enter password"
required>
<tr><td>Genderr:
<td><input type=radio name=r>Male
<input type=radio name=r>Female
<tr><td>Address:
<td<textarea name=a1
Placeholder="Enter address"></textarea>
<tr><td>Date of
Birth:<td><input type=text name=dob
placeholder="Enter date of
birth">
<tr><td>Profession:<td>
<select name=p1>
<option
value=t>Service
<option
value=b>Business
<option
value=f>Former
<option
value=o>Other
</select>
<tr><td>Mobile:<td><input
type=text name=ph Placeholder="Enter mobile number">
<tr><td>E-mail:<td><input
type=email name =email sixe=40
Placeholder="Enter email address"
requirerd>
</table><p><input type=submit
name=submit value=Submit>
<input type=reset name=reset
value=Cancel>
<hr></from>
</html>
OUTPUT:
SOP 2: Create
a webpage using html and css code to design a web page as the layout displayed below.
<!DOCTYPE html>
<html>
<head><title>Indian
Tourism</title><style>
.left{float:left; background-color:yellow;
font-family:Arial;
font-size20px; width:50%; height:300px;
border:ridge solid-black;}
.right{float:right; Background-color:pink;
font-family:Arial;
font-size:20px; width:50%; height:300px;
border:ridge solid-black}
</style></head>
<body>
<header
style="Background-color:skyblue; height:100pt">
<h1 style="Background-color:skyblue;
color:navyblue;
font-size:50px; text-align:center;">Tourist
Places</h1>
</header>
<div
class=left><h2>City</h2><ol>
<li>Pune</li>
<li>Banglore</li>
<li>Hyderabad</li>
<li>Delhi</li></ol>
</div><div class=right>
<h2>Pune</h2><ul>
<li>Shanivarwada</li>
<li>Kelkar
Museum</li>
<li>Sinhgad
fort</li></ul>
</div></body></html>
OUTPUT:
SOP 3: Create a website using html and css caod to design web pages
as follow –
PAGE 1[Traveler.html]
<!DOCTYPE html>
<html>
<head><title>Traveler
Info</title>
<link
rel="stylesheet" typr="text/css"
href="my.css">
</head><body>
<form
action="method="post">
<h1>Traveller Information</h1>
<b>Traveler name</b> : <input
type="text"-name="t1"<br><br>
<b>Travelling date </b>:
<input type="date" name="d1"><br><br>
<b>Telephone no. </b> : <input
type="numbers" name=m1"><br><br>
<input type="image"
name="submit" src"submit_button.jpg"
height="100px" alt="Submitting
form data">
<p><a
href="Transporter.html">Click here for Transport
details</a></p>
</form></body></html>
OUTPUT:
PAGE 2[Transporter.html]
<!DOCTYPE html>
<html>
<head>
<title>Transporter
Info.</title>
<link
rel="stylesheet" type="text/css"
href="my.css"></head>
<body><h1>Transporter
Information</h1>
<ul>
<li>Name
of Transporter: Air Asia</li>
<li>Time:09:30
AM</li>
<li>Seat
No.:b39</li>
<li>Destination:
Delhi</li></ul>
<p><a href="Traveler.html">Go
back to Traveler info.page</a></p>
</body></htmL>
OUTPUT:
SOP 4:Creation of website using
html5 and css.
<!DOCTYPE html>
<html>
<head><title>HTML5 Semantics</title>
<style type="text/css">
a{color:white}
</style></head>
<body style="margin:5px">
<article><header>
<h1>News</h1>
<h2>Local and National news</h2>
</header></article>
<nav style="background-color:blue;
padding:5px">
<a href="">Home</a>
<a href="">Archives</a>
<a href="">About</a></nav>
<article style="background-color:green;
padding:5px; margin:5px; width:60%; float:left;">
<h1>Local News</h1>
<p style="background-color:white;
padding:15px; margin:5px;">
<b>Vikrant sold goods worth ₹34,000 to
Vishwajeet</b><br><br>who paid ₹14,000 immediately and
accepted a bill for 4 months for the balance. After a month, Vikrant discounted
the bill with his bank at 15% p.a.On the due date, bank informed that the bill
was dishonoured and the noting charges of ₹ 250 were paid by them. Vishwajeet
paid ₹ 10,000 in cash along with noting charges to Vikrant and accepted a new
bill for the
balance amount with interest at 12%p.a. for 3
months.</p>
<p style="background-color:wite; padding:15px;
margin:5px;">
<b>Rohan sold goods to Mohan worth Rs
2,400.</b><br><br> Mohan accepted bill of same amount drawn
by Rohan for 2 months. Rohan discounted the bill after 1 month at 12% p a. The
bill was dishonoured& Mohan requested Rohan to renew it. Part payment was
made for Rs 1,000 along with interst of Rs 70. New bill was drawn for remaining
amount for 3 months. But M ohan became insolvent & only 25% of the amount
was recovered from his estate. Pass journal entries in books of
Rohan.</p>
</article>
<article style="background-color:grey;
paddding:15px; margin:5px;">
<aside>
<h3>Recent
Post</h3>
<ul style="list-style-type:square">
<li>Benefits of Drinking Warm Water At every
Age.</li>
<li>Why is Car Disinfectio Important During
COVID-19?</li>
</ul></aside></article>
<footer>
<p
style="background-color:blue;color:white;">Footer
information</p>
</footer></body></html>
OUTPUT:
SOP 5:Use of audio on web pages using html5.
Page 1:[Audio.html]
<!DOCTYPE html>
<html>
<head>
<title>Playing audio</title>
</head>
<body>
<h1 align="center">Audio with
controls</h1>
<audio controls autoplay
loop="1">
<source src="song.mp3
id="mp3Source" tyope="audio/mpeg">
</audio>
</body></html>
OUTPUT:
Page 2:[Audio1.html]
<!DOCTYPE html>
<html><head>
<title>Multiple source file
formats</title></head><body>
<h1
align="center">Multiple Audio files with controls</h1>
<p> The text between the
audio tags will only be displayed in browers
that do noit support the audio
element.</p>
<h3>List of audio file formats</h3>
<ol><li>mp3-audio/mpeg</li>
<li>ogg-audio/ogg</li>
<li>wav-audio/wav</li></ol>
<audio controls autoplay>
<source
src="audio.mp3" id="mp3Source"
type="audio/mpeg">
<source
src="audio.wav" id="wavSource"
type="audio/wav">
<source
src="audio.ogg" id="oggSource"
type="audio/ogg">
Your browser does not support the
audio element.</audio></body></html>
OUTPUT:
SOP 6:Use of video on web pages using html5.
Page 1:[Video.html]
<!DOCTYPE html>
<html>
<head><title>Playing video file</title></head>
<body>
<h1 align="center">Video file
on Web page with controls</h1>
<video src="clip_1080.mp4"
controls width="800" height="300"
loop"-1"autoplay>
</video></body>
<html>
OUTPUT:
Page 2:[Video.html]
<!DOCTYPE html>
<html><head>
<title>Multiple video file formats</title>
</head><body>
<h1 align="center">Multiple Video files with
controls</h1>
<p> The text between the video tags will only be
displayed in browers
that do not support the video element.</p>
<h3>List of video file formats</h3>
<ol><li>mp3-video/mpeg</li>
<li>ogg-video/ogg</li>
<li>webM-video/webM</li></ol>
<video controls width="800"
height="300" autoplay>
<source src="movie.mp3" id="mp3Source"
type="video/mpeg">
<source src="movie.wav" id="wavSource"
type="video/wav">
<source src="movie.ogg" id="oggSource"
type="video/ogg">
Your browser does not support the video tag.
</audio></body></html>
OUTPUT:
SOP 7: Navigation on an image
using Client side image Mapping in web page using html5.
<!DOCTYPE html>
<html>
<head><title>Image map</title></head><body>
<h2 align=center>Example of Image Map</h2>
<a href='https://www.linkpicture.com/view.php?img=LPic63d3e6f0e8e691191946280'>
<img src='https://www.linkpicture.com/q/marguerite-729510_960_720_1.jpg' type='image' width="1800" height="700" alt="flower image"></a>
<map name="circle">
<area shape="circle" coords="100,300,64" href="page1.html"
alt="Connect to page1">
<area shape="rect" coords="34,44,230,120" href="http://www.Google.com"
alt="Connecting to Google">
<area shape="poly" coords="430,100,430,200,500,200"
href="http://www.Sunriseonline.in" alt="Connecting to Sunrise">
</map></body>
</html>
OUTPUT:
Comments
Post a Comment