Scribd
Upload
55 views17 pages

XII PRACTICAL IT Sci

Uploaded by

maestroedits69
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
55 views17 pages

XII PRACTICAL IT Sci

Uploaded by

maestroedits69
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/ 17

SOP 1

Aim: Creation of website using HTML5

Index.HTML

<!DOCTYPE html>
<html>
<head>
<title> SOP1
</title>
<style>
H1{background-color:green}
B{color:red}
U{font-size:20}
I{text-decoration:overline}
</style>
</head>
<Body>
<H1 align-center> Oswal Education </H1>
<P>
<B> Sevasadan Highschool & Jr. College</B><br><br><br>
<U> Sitaburdi Nagpur.</U><br><br><br>
<I> XII Commerce </I></P><br><br><br>
<img src=college.jpg height=50% width=50% alt=college><br><br><br>
<a href=Second.html> Click here for Second Page</a>
</body>
</html>

OUTPUT:

Second.HTML
<html>
<head>
<title> Second Page</title>
</head>
<body bgcolor="tan">
<h1> Registration Page</h1>
<form>
First Name:<input type="text" name="t1"><br><br>
Last Name:<input type="text" name="t2"><br><br>
Email:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input
type="email" name="e1"><br><br>
Gender:
<input type="radio" name="r1"> Male
<input type="radio" name="r1"> Female<br><br>
Qualification:
<select name="qualification">
<option> SSC</option>
<option> HSC</option>
<option> Graduation</option>
<option> Post Graduation</option>
</select><br><br>
<input type="submit" value="submit">
</form>
</body>
</html>

OUTPUT:

SOP 2
Aim: Create a webpage using HTML and CSS code to design a web
page as the layout displayed below.
Frameset.html

<html>
<head>
<title>frameset </title>
</head>
<frameset rows="30%,70%">
<frame src="top.html">
<frameset cols="50%,50%">
<frame src="left.html">
<frame src="right.html">
</frameset>
</frameset>
</html>

Left .html

<html>
<head>
<title> left</title>
<style>
body{background-color:lightyellow}
h4{font-style:normal}
</style>
<head>
<body>
<h4>
City
<ol type=1>
<li> Pune</li>
<li> Banglore</li>
<li> Hyderabad</li>
</ol>
</h4>
</body>
</html>

right.html

<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> Shaniwarwada </li>
<li> Kelkar Museum</li>
<li> Singhgad Fort</li>
</ul>
</h3>
</body>
</html>

top.html

<html>
<head>
<title> top</title>
</head>
<body style=background-color:skyblue>
<center>
<h1 style=color:pink> Tourist Places</h1>
</center>
</body>
</html>

OUTPUT:

SOP 3

Aim: Create a website using html and css code to design web pages
as follows-
The first webpage will accept the name of the traveler, date of travel,
telephone number. It also has submit button as an image.

The second webpage has information about the name of transporter, time,
seat no and destination displayed one below the other in the form of
unordered list as

Name of transporter-Air Asia

Seat no-B39

Destination-Delhi

Both pages should be interlinked. Create external stylesheet with relevant


tags.

Page1.html

<html>
<head>
<title>information form</title>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
<h1 align="center"> Traveller Information Form </h1>
<form name="f1">
Enter your name:
<input type="text" name="name" autocomplete><br><br>
Select Date of Travel:
<input type="date" name="tvrdate"><br><br>
Enter Telephone no:
<input type="tel" name="phone"pattern="[0-9]{2}-[0-9]
{10}"required><br><br>
<form>
<a href="page2.html">Click for next page</a>
<img src="submit.jpg" width="50">
</body>
</html>
Page2.html
<html>
<head>
<title>information form</title>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
<h1 align="center">Information about Transporter </h1>
<ul>
<li>Name of transporter-Air Asia</li>
<li>Seat no-B39</li>
<li>Destination-Delhi</li>
</ul>
<a href="page1.html">Connect with first page</a>
<img src="submit.jpg" width="150">
</body>
</html>

external.css
h1{background-color:green;border-style:double}

body{background-color:lightgreen}

ul{font-family:algerian}

OUTPUT:
SOP 4

Aim: Use of Audio on web pages using html5.

Html Code1:-

<html>
<head>
<title>Sound File with Controls</title>
</head>
<body>
<h1><center>Sound File With Controls</center></h1>
<center><imgsrc="Winter.jpg" Width="100" height="100" alt="sound file
with controls"><br>
<embed src="Highway Blues.mp3" loop="_1">
</center>
</body>
</html>

OUTPUT:

Html Code2:-

<!DOCTYPE html>
<html>
<body>
<h1>The audio </h1>
<audio controls autoplay>
<source src="Side - A.mp3" type="audio/mp3">
<source src="Side - A.ogg" type="audio/ogg">
<source src="Side - A.wav" type="audio/wav"> Your browser does not
support the audio element.
</audio>
</body>
</html>

OUTPUT:
SOP 5

Aim: USE OF VIDEO ON WEB PAGES USING HTML5.

Html Code1:-
<html>
<head>
<title>Video Insert Practical</title>
</head>
<body>
<video src="waterfalls.mp4" type="video/mp4" height="150" width="150"
controls autoplay="autoplay">
</video>
</body>
</html>

OUTPUT:

Html Code2:-

<html>
<head>
<title>Video Insert Practical</title>
</head>
<body>
<video height="150" width="150" controls autoplay="autoplay">
<source src="waterfalls.ogg" type="video/ogg" >
<source src="waterfalls.mp4" type="video/mp4”> Your browser does not
support video tag
</video>
</body>
</html>

OUTPUT:
SOP 6

Aim: Create event driven javascript program for the following. Make
use of appropriate variables. Javascript inbuilt variables
string functions and control structures.

1. To accept string form user and count number of vowels in the given string.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Sop 3 JAVasript Count vowels</title>
</head>
<body>
<form name="form1">
<h1>Enter the String whose vowel isto be counted</h1>
<input type="text" name="text1">
<input type="button" name="btn_checkvowel" value="Click to count"
onclick="count()">
</form>
<script type="text/javascript">
function count()
{
var i,ch,str,counter=0;
str=form1.text1.value;
for(i=0;i<str.length;i++)
{
ch=str.charAt(i);
if(ch=='A'||ch=='a'||ch=='e'||ch=='E'||ch=='i'||ch=='I'||
ch=='o'||ch=='O'||ch=='u'||ch=='U')
counter++;
}
alert("Number of Vowels in Entered String is:"+counter);
}
</script>
</body>
</html>
OUTPUT:
SOP 7
Aim: Create event driven javascript program for the following. Make
use of appropriate variables., Javascript inbuilt variables
string functions and control structures.
Code:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript SOP 4 Example</title>
</head>
<body>
<form name="f1">
<b>Enter the string to check it is palindrome or not! </b> <br><br>
<input type="text" name="t1">
<br><br>
<input type="button" name="check_palin" value="Check String"
onclick="chk_palindrome()">
</form>
<script type="text/javascript">
function chk_palindrome()
{
var str,str_case,i,len;
str=f1.t1.value;
str_case=str.toLowerCase();
len=str_case.length;
var p=1;
for(i=0;i<len/2;i++)
{
if(str_case.charAt(i)!=str_case.charAt(len-1-i))
{
p=0;
break;
}
}
if(p==1)
{
alert("Entered string is Palindrome");
}
else
{
alert("Entered string is Not a Palindrome")
}

}
</script>
</body>
</html>
OUTPUT:
SOP 8
Create a event driven javascript program to convert temperature to
and from Celsius, Fahrenheit.

Code:

<!DOCTYPE html>
<html>
<head>
<title>SOP 5 Javascript</title>
<body>

<h2>JavaScript code to convert Celcius to Fahrenhiet or vice-versa</h2>


<br>
<p><b>Enter the Temperature:</b></p>

<p><input type="text" id="txt_celsius" onkeyup="convert('C')">


<b>Temperature in degree Celsius</b></p>
<br>
<p><input type="text" id="txt_fah" onkeyup="convert('F')">
<b>Temperature in degree Fahrenheit</b></p>

<script>
function convert(temperature) {
var t;
if (temperature == "C") //Celsius to fahrenit
{
t = document.getElementById("txt_celsius").value * 9 / 5 + 32;
document.getElementById("txt_fah").value = Math.round(t);
}
else //fahrenirt to celsius
{
t = (document.getElementById("txt_fah").value -32) * 5 / 9;
document.getElementById("txt_celsius").value = Math.round(t);
}
}
</script>
</body>
</html>
OUTPUT:

You might also like