Scribd
Upload
309 views14 pages

Xii Science It Assignment File Feb 2024

Imp as

Uploaded by

shrijeet jawlekar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
309 views14 pages

Xii Science It Assignment File Feb 2024

Imp as

Uploaded by

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

SOP 1: 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 names such as first page as Index.html and second page as
page2.html.Use any theme such as college profile or company profile etc. Every page must
contain proper Meta information and design web page 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
navigational links.
2) The 2nd page must contain the feedback or enrolment form related with theme chosen
with features 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>Tata Group</title>
<meta charset="utf-8">
<meta name="author" content="Physical Tags">
<style>
h1{border-style:dotted}
p{color:red;font-size:15pt}
body{background-color:pink}
b{text-decoration: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 in held by philantropic trusts, which support
education, health, livelihood generation, and art and culture. Each Tata company or enterprise
operates independently under the guidance and supervision of its own Board of Directors.
</p>
<b>Governance Philosophy</b><br><br>
<i>Tata Code of Conduct</i><br><br>
<u>Tata Business Excellence Model (TBEM)</u><br><br>
<h3>Image of Tata Industries</h3>
<img src="D:\tinds.jpg" width="200" height="250" alt="Tata Industries"><br><br>
<a href="D:\PAGE2.HTML">Second Page</a>
</body>
</html>
PAGE2.HTML
<!DOCTYPE html>
<html>
<head>
<title>Feedback/Enrollment Form</title>
<meta charset="utf-8">
<meta name="author" 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 e-mail id
<input type="email" name="emailid"><br><br>
<input type="submit" name="submitbtn" value="Submit">
</form>
<a href="D:\INDEX.HTML">First Page</a>
</body>
</html>
SOP 2: 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 displays tourist places of any one of the city.
Use Inline style sheet in the top section to display background color for the text ‘Tourist places’. Use
internal stylesheet for the left and right section with background color and font styles.
Tourist Places
City Tourist places in Pune
1. Pune  Shaniwarwada
2. Banglore  Kelkar Museum
3. Hydrabad  Sinhgad fort
4. Delhi

PAGE1.HTML

<!DOCTYPE html>
<html>
<head>
<title>Tourist Places</title>
<style>
aside{background-color:yellow;width:50%;height:50;float:left}
section{background-color:pink;width:50%;height:50%;float:right}
ol{font-style:italic;font-size:16pt}
ul{font-weight:bold;font-size:20pt}
</style>
</head>
<body>
<header style="background-color:skyblue;height:100pt"><br>
<h1 align="center">Tourist Places</h1>
</header>
<aside>
<h2>City</h2>
<ol>
<li>Pune</li>
<li>Bangalore</li>
<li>Hyderabad</li>
<li>Delhi</li>
</ol>
</aside>
<section>
<h3>Tourist Places in Pune</h3>
<ul>
<li>Shaniwarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad Fort</li>
</ul>
</section>
</body>
</html>
SOP 3: Create a website using HTML and CSS code to design webpages 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 the transporter – Air Asia


Time – 09:30 am
Seat no – B39
Destination – Delhi
Both pages should be interlinked. Create external stylesheet with relevant tags.

PAGE1.HTML

<!DOCTYPE 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 Name Of Traveller
<input type="text" name="t1" autocomplete><br><br>
Select Date of Travel
<input type="date" name="trvdate"><br><br>
Enter Mobile Number
<input type="tel" name="phone" placeholder="12-1234567890"
pattern="[0-9]{2}-[0-9]{10}" required><br><br>
<input type="submit" name="submit" value="Submit">
</form>
<a href="D:\PAGE2.HTML">
<img src="D:\SUBMIT.PNG" width="150"></a>
</body>
</html>

external.css

h1{background-color:green;border-style:double}
body{background-color:lightgreen}
ul{font-family:Algerian}
PAGE2.HTML

<!DOCTYPE html>
<html>
<head><title>Information About Transporter</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>Time - 9.30 am</li>
<li>Seat No. - B39</li>
<li>Destination - Aurangabad</li>
</ul>
<a href="D:\PAGE1.HTML">Connect First Page</a>
</body>
</html>
SOP 4 : Use of Audio on web pages using HTML5.

Create a webpage named audio.html to set an audio file in web page with controls such that it
uses HTML5 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.
Create another webpage named audio1.html which provides multiple source file formats for the
same audio file that plays 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).

AUDIO.HTML

<!DOCTYPE html>
<html>
<head>
<title>Single Audio with controls</title>
</head>
<body>
<h1 align="center">Single Audio With Controls</h1>
<audio controls autoplay loop=-1>
<source src="D:\LABPE.MP3" type="audio/mpeg">
</audio>
</body>
</html>

AUDIO1.HTML

<!DOCTYPE html>
<html>
<head>
<title>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 displayed in browsers that do not
support the audio element.</h2>
<h3>List of Sound 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="D:\LABPE.mp3" type="audio/wav">
<source src="D:\LABPE.mp3" type="audio/mp3">
<source src="D:\LABPE.mp3" type="audio/ogg">
Your browser does not support the audio element
</audio>
</body>
</html>
SOP 5 : Use of Video on web pages using HTML5.

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.

Create another webpage which multiple source file formats for the same audio file that plays
sound a automatically with controls. The dimension of video area should be 100*100 pixels. The
browser should display the message with appropriate attribute when audio file is not supported
by browser. The code must incorporate the list of video files formats (like webM, MP4 or ogg
etc).

VIDEO.HTML

<!DOCTYPE html>
<html>
<head>
<title>Single Video File On Web Page With Controls</title>
</head>
<body>
<h1 align="center">Single Video File On Web Page With Controls</h1>
<video src="D:\SAMPLE.MP4" controls width="150" height="150" loop="-1" autoplay>
</video>
</body>
</html>

VIDEO1.HTML

<!DOCTYPE html>
<html>
<head>
<title>Multiple Video File On Web Page With Controls</title>
</head>
<body>
<h1 align="center">Multiple Video File On Web Page With Controls</h1>
<h2>The text between the video tags will only be displayed in browsers that do not
support the video element.</h2>
<h3>List of Video Files Formats</h3>
<ol>
<li>mp4-video/mpeg</li>
<li>ogg-video/ogg</li>
<li>WebM-video/webM</li>
</ol>
<video controls width="100" height="100" loop="-1" autoplay>
<source src="D:\SAMPLE.MP4" type="video/mp4">
<source src="D:\SAMPLE.webm" type="video/webm">
<source src="D:\SAMPLE.ogg" type="video/ogg">
</video>
</body>
</html>
SOP 1 : Create JavaScript program for the following form validations. Make
use of HTML5 properties to do the following validations.
1) Name, address, contact number and email are required fields of the form
2) Address field should show the hint value which will disappear when field gets focus or
key press event.
3) Telephone numbers should be maximum 10 digit number only.
4) Email field should contain valid email address, @ should appear only once and not at the
beginning or at end. At must contain at least one dot (.)
5) Make use of pattern attribute for email to accept lowercase, uppercase alphabets, digits and
specified symbols.
Information Form
Your Name :
Address

Contact :
E-mail :
Submit
EMAIL.HTML
<html>
<body>
<form name="frm1">
Enter Name
<input type="text" name="t1"><br><br>
Enter Address<br>
<textarea name="t2" placeholder="PERMANENT ADDRESS"></textarea><br><br>
Enter Telephone Number
<input type="tel" maxlength="10"><br><br>
Enter Email Address
<input type="email" name="t3" pattern="[A-Z a-z]{5}-[A]{1}-[.]{1}"
placeholder="[email protected]"><br><br>
<input type="button" name="b1" value="Submit" onClick="chk()"><br><br>
</form>
</body>
<script type="text/javascript">
function chk()
{
var x=frm1.t3.value;
var atpos=x.indexOf("@");
var lastat=x.lastIndexOf("@");
var firstdot=x.indexOf(".");
var dotpos=x.lastIndexOf(".");
if(atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length || firstdot<atpos || atpos<lastat)
{
alert("Not a valid email address");
frm1.t3.focus();
}
else
{
alert("Email address is accepted");
return true;
}
}
</script>
</html>
SOP 2 : Create event driven JavaScript program for the following. Make use
of appropriate variables, JavaScript inbuilt string function and
control structure.

 To accept string from user and count number of vowels in the given string

NOFVOWELS.HTML

<!DOCTYPE html>
<html>
<head>
<title>String Functions</title>
</head>
<body>
<form name="frm1">
Enter Your Text To Count Number Of Vowels ==>
<input type="text" name="t1"><br><br>
<input type="button" name="btncheck" value="Count Vowels" onClick="cnt()">
</form>
</body>
<script type="text/javascript">
function cnt()
{
var s,i,ch,c;
c=0;
s=frm1.t1.value;
for(i=0;i<=s.length;i++)
{
ch=s.charAt(i);
if(ch=="A" || ch=="a" || ch=="E" || ch=="e" || ch=="I" || ch=="i" || ch=="O" || ch=="o" ||
ch=="U" || ch=="u")
c++;
}
alert("Number of Vowels in string are==> " +c);
}
</script>
</html>
SOP 3 : Create event driven JavaScript program for the following. Make use of
appropriate variables, JavaScript inbuilt string function and control structure.
 To accept string from user and reverse the given string and check whether it is
palindrome or not.
PALINDROME.HTML
<!DOCTYPE html>
<html>
<head>
<title>Check for Palindrome</title>
</head>
<body style="color:blue;background-color:cyan">
<form name="form1">
<h1 align="center">Check for Palindrome String</h1>
<label>Enter String</label>
<input type="text" name="name" maxlength="30" required placeholder="Enter String"/>
<br>
<br>
<input type="button" value="Check for Palindrome" onclick="ReverseString(function(value)
{
if(document.form1.name.value==value)
{
alert('String is Palindrome.ReverseString is '+value);
}
else
{
alert('Not a Palindrome');
}
})"/>
</form>
<script type="text/javascript">
function ReverseString(callback)
{
str=document.form1.name.value;
// Check Input
if(!str||str.length<2||typeof str!=='string')
{
alert('Not Valid');
return;
}
// Take empty array revArray
const revArray=[];
const length=str.length-1;
// Looping from the end
for(let i=length;i>=0;i--)
{
revArray.push(str[i]);
}
// Joining the Array Elements
callback(revArray.join(''));
}
// document.write(ReverseString());
</script>
</body>
</html>
SOP 4 : Create event driven JavaScript program to convert temperature to
and from Celsius, Fahrenheit.

Formula : c/5=(f-32)/9

[where c=Temperature in Celsius and f=Temperature in Fahrenheit.]

CELSIUS.HTML

<!DOCTYPE html>
<html>
<body>
<h2>Javascript Celcius to Fahrenheit</h2>
<p>Insert a number into one of the input fields below:</p>
<p><input type="text" id="c" onkeyup="convert('C')">Degree Celsius</p>
<p><input type="text" id="f" onkeyup="convert('F')">Degree Farhenheit</p>
<p>Note that the <b>Math.round()</b>method is used, so that the result will be
returned as an integer.</p>
<script type="text/javascript">
function convert(degree)
{
var x;
if(degree=="C")
{
x=document.getElementById("c").value*9/5+32;
document.getElementById("f").value=Math.round(x);
}
else
{
x=(document.getElementById("f").value-32)*5/9;
document.getElementById("c").value=Math.round(x);
}
}
</script>
</body>
</html>
SOP 1 : Write a PHP program to check if a person is eligible to vote or not.
The program should include the following –
 Minimum age required for vote is 18.
 Use PHP functions.
 Use Decision making statement

age_01.html

<html>
<body>
<h1 align="center">Person Eligible to vote or not</h1>
<form method="post" action="age_01.php">
Enter Your Age:
<input type="text" name="age"><br><br>
<input type="submit" name="submit" value="Check Eligible">
</form>
</body>
</html>

age_01.php

<?php
if(isset($_POST['submit']))
{
$age=$_POST['age'];
if($age>=18)
echo "<br><br>You are Eligible to Vote";
else
echo "<br><br>You are not Eligible to Vote";
}
?>
SOP 2 : Write PHP function to count the total number of vowels (a, e, i, o, u)
from the string. Accept a string by using HTML form.

vowel_01.html

<html>
<body>
<h1 align="center">String Functions</h1>
<form method="post" action="vowel_01.php">
Enter String:
<input type="text" name="str"><br><br>
<input type="submit" name="submit" value="Count Vowels">
</form>
</body>
</html>

vowel_01.php

<?php
if(isset($_POST['submit']))
{
$str=strtolower($_POST['str']);
$vowels=array('a','e','i','o','u');
$len=strlen($str);
$num=0;
for($i=0;$i<$len;$i++)
{
if(in_array($str[$i],$vowels))
{
$num++;
}
}
echo "Number of Vowels :.$num";
}
?>
SOP 3 : Write a program using PHP to calculate Electricity bill by accepting
the limits.

 For first 100 units – Rs. 4


 For next 100 units – Rs. 5
 For next all units – Rs. 6

bill_01.html

<html>
<body>
<h1 align="center">Electricity Bill</h1>
<form method="post" action="bill_01.php">
Enter Number of Limits (limits):
<input type="text" name="units"><br><br>
<input type="submit" name="submit" value="Calculate Bill">
</form>
</body>
</html>

bill_01.php

<?php
if(isset($_POST['submit']))
{
$units=($_POST['units']);
if($units<=100)
{
$b=$units*4;
echo "Your Bill Amount is $b";
}
else
{
if($units<=200)
{
$b=400+($units-100)*5;
echo "Your Bill Amount is $b";
}
else
{
$b=400+500+($units-200)*6;
echo "Your Bill Amount is $b";
}
}
}
?>

You might also like