Scribd
Upload
17 views20 pages

IT Practicals

Uploaded by

u94433551
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views20 pages

IT Practicals

Uploaded by

u94433551
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

SOP 1:Creation of website using HTML5.

Part:1
<!DOCTYPE html>

<head.

<title>

tata group

<meta charset="utf-8">

<meta name="author" content="Physical Tags">

<style>

h1{border-style:dotted}

p{color:red;font-size:15pt}

b{text-decoreation:overline}

u{text-align:right}

</style>

</head>

<body>

<h1 align="center">

Tata sons Private Limited </h1>

<p>

66% of the equity share capital of tata sons is held by philanthropic trust,

which support education,health,livehoode gnretion and art and culture.

</p>

<b>Governance Philosophy</b><br><br>

<i>Tata code of Conduct</i><br><br>

<u>Tata Businees Exellence Model(TBEM)</u><br><br>

<h3>image of tata Industries</h3>

<img src="C:\Users\Rutuja\OneDrive\Pictures\TAT.webp" width="200" height="250" alt="Tata


Industries">

<br><br>

<a href="C:\Users\Aj\Desktop\kdsop1b">second page</a>

</body>
Output:
SOP 1
Part:2
<!DOCTYPE html>

<html>

<head>

<title>

Forms

</title>

<meta charset="utf-8">

<meta name="authore content="form">

<style>

h1{border-style:dashed}

body{background-color:aqua}

</style>

</head>

<body>

<h1 align="center">Enrollment Form<h1>

<Form name="f1">

Enter Your Name:-

<input type="text" name="t1" required>

<br><br>

Enter Your Email ID:-

<input type="email" name="emailid"> <br><br>

<input type="submit" name="submitbtn" value="Submit">

</form>

<a href="C:\Users\Aj\Documents">First page</a>

</body>

</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><style>

aside{background-color:yellow;height:35%;width:49%;float:left;border:solid;}

section{background-color:pink;height:51%;width:50%;float:right;border:solid;}

header{background-color:#add8e6;color:pink;width:96%;height:98%;color:#e75480;text

align:center;padding:30px;}

body{font-size:35px;border:solid;}

</style></head><body>

<header>Tourist places</header>

<aside>City

<ol>

<li>Pune</li>

<li>Banglore</li>

<li>Hyderabad</li>

<li>Delhi</li>

</ol>

</aside>

<section>Tourist places in pune

<ul>

<li>Shanivarwada</li>

<li>Kelkar museum</li>

<li>Sinhgad fort</li>

<li></li>

</ul></section></body></html>
Output:
SOP 3: Create a website using HTML and CSS code to design
webpages as follows.
Part 1:
<!DOCTYPE html>

<html><head><style>

h1{font-size:38px;font-family:monotype corsiva;font-weight:bold;}

form{font-size:28px;font-weight:bold;font-style:italic;}

body{background-color:gold}

</style></head>

<h1 align="center">RK TRAVELLERS</h1>

<body><form>

Name of traveller:<input type="text"><br><br>

Date of travel: <input type="date"><br><br>

Telephone number:<input type="tel"><br><br>

<input type="image" src="C:\Users\Rutuja\OneDrive\Pictures\submit.jpg" alt="click here to submit"


height="50"

width="120"><br>

<a href="details.html">View details of your booking</a>

</body></form></html>
Output:
SOP 3:

Part 2:
<!DOCTYPE html>

<html><head>

<link rel="stylesheet" type="text/css" href="sop3e.css">

<style>

a:link{color:white;}

a:visited{color:orange;}

</style></head>

<body>

<h1>Transport Details</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>

<a href="sop3.html">Go back to home</a></body></html>

OUTPUT:
SOP 4:Creation of website using HTM5 and CSS
<!DOCTYPE html>

<html><head>

<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>(reporter name, date)</p>

<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>

<p>(reporter name, date)<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>
OUTPUT:
SOP 5: Use of Audio on web pages using HTML5
Part 1 :

<!DOCTYPE html>

<head>

<title>Single Audio with controls

</title>

</head>

<body>

<h1 align="center">Audio with controls</h1>

<audio controls autoplay loop="-1">

<source src="C:\Users\Rutuja\Music\16 - Ship Battle.mp3">

</audio>

</body>

</html>

OUTPUT:
SOP 5
Part 2:
<!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 tags will only be display in browser

that do not support the audio element</h2>

<h3>List of sound files format</h3>

<ol>

<li>mp3audio/mpeg</li>

<li>ogg-audio/ogg</li>

<li>wav-audio/wav</li>

</ol>

<audio control autoplay>

<source src="C:\Users\Rutuja\Downloads\12 - Black Warrior.wav" type="audio/wav">

<source src="C:\Users\Rutuja\Downloads\07 - Ninja In The Night.mp3" type="audio/mp3">

<source src="C:\Users\Rutuja\Music\16 - Ship Battle.ogg" type="audio/ogg">

Your browser does not suppport the audio element.

</audio>

</body>

</html>
OUTPUT:
SOP 7:Use of video on web pages using html5.
Part 1:
<!DOCTYPE html>

<head>

<title>Single Video flie on Web controls

</title>

</head>

<body>

<h1 align="center">Single Video file on Web page with controls</h1>

<video src="C:\Users\Rutuja\Downloads\Nature video.mp4" controls width="150"


hight="150"controls autoplay >

</video>

</body>

</html>

OUTPUT:
SOP 6:

Part 2:
<doctype html>

<html>

<head>

<title>

Multiple Audio File with control</title>

</head>

<body>

<h1 align=center>Multiple Audio Files with controls</h1>

<h2>

The text between the audio tags will only be displayed in browsers that do not support the audio
element.</h2>

<h3>List of ssound files format</h3>

<ol>

<li>mp3-audio/mpeg</li>

<li>ogg-audio/ogg</li>

<li>wav-audio/wav</li>

</ol>

<audio controls autoplay>

<source src=C:\Users\ADMIN\Desktop\12th IT 716 type=audio/mp3>

<source src=C:\Users\ADMIN\Desktop\12th IT 716 type=audio/ogg>

<source src=C:\Users\ADMIN\Desktop\12th IT 716 type=audio/wav>

Your browser does not support the audio element.

</audio>

</body>

</html>
OUTPUT:
SOP 7: Navigation on an image using client side image mapping in
web page using html5

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1 align="center">Click on an area(lung,heart,kidney)</h1>

<center><img src="Human cir sys.png" usemap="#imagemap" alt="image of human

circulatory system"></img>

<map name="imagemap">

<area href="lung.wiki.html" shape="rect" coords="112,45,193,100" alt="Lungs"/>

<area href="kidneys.wiki.html" shape="circle" coords="148,268,36" alt="Kidney"/>

<area href="heart.wiki.html" shape="poly"

coords="104,130,151,106,198,131,199,178,150,203,105,178" alt="Heart"/>

</map>

</body> </html>
OUTPUT

You might also like