[go: up one dir, main page]
Scribd
Upload
2K views27 pages

Information and Technology

The document provides code snippets for using various HTML5 features like audio, video, and forms. It includes two code snippets that demonstrate adding audio to a webpage, with one that plays automatically with controls and another that provides fallback options for different audio formats. It also includes two code snippets for adding video to a webpage, with one that plays a video automatically at a specified size and another that provides multiple format fallback options for video playback. Finally, it provides JavaScript code snippets to count vowels in a user-entered string, and to reverse a string and check if it is a palindrome. The code makes use of variables, string functions, and control structures.

Uploaded by

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

Information and Technology

The document provides code snippets for using various HTML5 features like audio, video, and forms. It includes two code snippets that demonstrate adding audio to a webpage, with one that plays automatically with controls and another that provides fallback options for different audio formats. It also includes two code snippets for adding video to a webpage, with one that plays a video automatically at a specified size and another that provides multiple format fallback options for video playback. Finally, it provides JavaScript code snippets to count vowels in a user-entered string, and to reverse a string and check if it is a palindrome. The code makes use of variables, string functions, and control structures.

Uploaded by

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

XII INFORMATION

TECHNOLOGY
PRACTICAL
HANDBOOK
SOP 1
Aim: Creation of website using HTML5
Create a website using html5 and CSS using any 4 css properties. Write a
code for 2 separate pages having different file name such first page as
index.html, 2nd page as page2.html as form.html. Use any theme such as
college profile or company profile etc. Every page must contain proper
Meta information and design webpage as follows-
1) The index page must contain a heading which is highest among
other text on pages and must be at center of the page. There must be a
paragraph which introduces general information about the theme chosen
must have at least 3 physical style tags and one image with alternate text.
This page must be connected to other two pages with proper navi-
gational links.
2) The 2nd page must contain the feedback or enrollment form related
with theme chosen with feature of html5. The form must contain text
element and email address of the company or person .Include the submit
button.
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> M.K.H Sancheti Public School & Jr. College</B><br><br><br>
<U> Wardha Road, 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.
The top section will display the heading,’Tourist places’ in header. The section
on the left has list of cities. The right hand side display tourist places in any
one of the city.
Use Inline style sheet in the top section to display background color for the
text ‘Tourist places’. Use internal style sheet for the left and right section with
background colors and font styles.
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.


1. Create a webpage named audio.html to set an audio file in web page
with controls such that it uses html 5 elements. The audio file must
play as soon as the webpage loads in browser and it will start over
again, every time when it is completed.
2. Create another webpage named audio1.html which provides multiple
source file formats for the same audio file that plays a sound
automatically with controls. The browser should display the message
with appropriate attribute when audio file is not supported by browser.
The code must incorporate the list of sound files formats (like wav, MP3
or ogg etc).

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.
1. Create a webpage named video.html to display a video file on web page
and plays automatically with controls. The dimension of video area
should be 150* 150 pixels.
2. Create another webpage which provide multiple source file formats for
the same video file that plays a video automatically with controls. The
dimension of video area should be 100* 100 pixels. The browser should
display the message with appropriate attribute when video file is not
supported by browser. The code must incorporate the list of video files
formats (like webM, MP4 or ogg etc).
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.
To accept string from user and reverse the given string and check whether it is
palindrome or not.
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:
SOP 9
Aim: Create javascript program which compute average marks of students
accepts from user and display the corresponding grades.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Sop 6 Javascript program</title>
</head>
<body>
<h1>
Javascript program to compute average marks of students
</h1>
<form name="form1">
<p> <b>Enter Marks of subjects of students:</b><br><br>
<b>English Marks: </b>
<input type="text" name="txt_eng">
<br><br>
<b>Physics Marks: </b>
<input type="text" name="txt_phy">
<br><br>
Chemistry Marks
<input type="text" name="txt_chem">
<br><br>
IT Marks
<input type="text" name="txt_it">
<br><br>
Maths Marks
<input type="text" name="txt_maths">
<br><br>
Biology Marks
<input type="text" name="txt_bio">
<br><br>
<input type="submit" value="Calculate Average & print grade"
onclick="calculate_grade()">
</form>
<script type="text/javascript">
function calculate_grade()
{
var m1,m2,m3,m4,m5,m6,avg;
m1=parseInt(form1.txt_eng.value);
m2=parseInt(form1.txt_phy.value);
m3=parseInt(form1.txt_chem.value);
m4=parseInt(form1.txt_it.value);
m5=parseInt(form1.txt_maths.value);
m6=parseInt(form1.txt_bio.value);
avg=(m1+m2+m3+m4+m5+m6)/6; //computes the average of six
subjects of students
alert("Average marks of students for six subjects is:"+ avg);
if(avg>=91 && avg<=100)
{
grade = 'A';
}
else if(avg>=81 && avg<=90)
{
grade = 'B';
}
else if(avg>=71 && avg<=80)
{
grade = 'C';
}
else if(avg>=61 && avg<=70)
{
grade = 'D';
}
else if (avg>=35 && avg<=60)
{
grade = 'F';
}
alert ("Grade of the student is: "+ grade);
}
</script>
</body>
</html>
OUTPUT:
SOP 10
Aim: Write a PHP program to check if a person is eligible to vote or not.
The minimum age required is 18. Use PHP functions. Use decision-making
statements.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Eligible to Vote or not</title>
</head>
<body>
<form action="" method="post">
Enter a no :
<input type="text" name="t1" placeholder="Enter a number">
<br><input type="submit" name="submit" value="submit">
</form>
<?php
if (isset($_POST['submit'])) {
vote();
}
function vote() {
$a = $_POST['t1'];
intval($a);
if($a>=18){
echo "You are Eligible for Vote";
}
else{
echo "You are not Eligible for Vote";
}
}
?>
</body>
</html>
OUTPUT:
SOP 11
Aim: Write a PHP function to count the total number of vowels (a,e,i,o,u)
from the string. Accept a string by using HTML form.
Code:
<html>
<body>
<h2>Find Number of Vowels in a String</h2>
<form action="" method="post">
<input type="text" name="string" />
<input type="submit" />
</form>
<?php
if($_POST)
{
$string = strtolower($_POST['string']);
$vowels = array('a','e','i','o','u');
$len = strlen($string);
$num = 0;
for($i=0; $i<$len; $i++){
if(in_array($string[$i], $vowels))
{
$num++;
}
}
echo "Number of vowels : ".$num;
} ?>
</body>
</html>
OUTPUT:
SOP 12
Aim: Write a PHP program to save marks of English, Hindi, Marathi, Maths
and Information Technology in an array. Display marks of individual
subject along with total marks and percentage
Code:
<html>
<body>
<?php
$subject_marks = array('English' =>56 ,'Hindi' =>76,
'Marathi'=>56,'Maths' =>57 ,'IT'=>78);
$total_marks = $subject_marks['English'] +
$subject_marks['Hindi'] + $subject_marks['Marathi'] +
$subject_marks['Maths'] + $subject_marks['IT'];
echo "English : ".$subject_marks['English'];
echo "<br>Hindi : ".$subject_marks['Hindi'];
echo "<br>Marathi : ".$subject_marks['Marathi'];
echo "<br>Maths : ".$subject_marks['Maths'];
echo "<br>IT : ".$subject_marks['IT'];
echo "<br><br>Total : ".$total_marks;
$percentage = $total_marks/5;
echo "<br>Percentage : ".$percentage;
?>
</body>
</html>
OUTPUT:

You might also like