Scribd
Upload
14 views9 pages

Science Section SOP

The document outlines a series of practical assignments for S.Y.J.C. Science students, focusing on web development using HTML, CSS, and JavaScript. It includes creating web pages for tourist information, audio and video embedding, image mapping, form validation, and server-side scripting with PHP. Each assignment provides specific instructions and code examples for students to follow.

Uploaded by

Dev
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
14 views9 pages

Science Section SOP

The document outlines a series of practical assignments for S.Y.J.C. Science students, focusing on web development using HTML, CSS, and JavaScript. It includes creating web pages for tourist information, audio and video embedding, image mapping, form validation, and server-side scripting with PHP. Each assignment provides specific instructions and code examples for students to follow.

Uploaded by

Dev
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/ 9

S.Y.J.C.

Science Practical Prof Parag Desai

SOP 1: Create a webpage using HTML and CSS code to design a web page as the layout displayed
below.
1. 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.
2. Use Inline style sheet in the top section to display background colour for the text ‘Tourist places’.
Use internal stylesheet for the left and right section with background colours and font styles.

Page.html
<!DOCTYPE html>
<html>
<head>
<title>Practicals SOP 2</title>
<style>
#a1{float: left;width: 50%;height: 500px;background-color:yellow;}
#a2{float: right;width: 50%;height: 500px;background-color: pink;}
</style>
</head>
<body>
<header style="background-color:skyblue;color: hotpink;text-align:
center;font-size: 50px;height: 100px">Tourist Place</header>
<section>
<aside id="a1">
<h1>City</h1>
<ol>
<li>Pune</li>
<li>Banglore</li>
<li>Hyderabad</li>
<li>Delhi</li>
</ol>
</aside>

<aside id="a2">
<h1>Tourist Place in Pune</h1>
<ul>
<li>Shaniwarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad Fort</li>
<li>Aga khan Palace</li>
</ul>
</aside>

1
S.Y.J.C. Science Practical Prof Parag Desai

</section>
</body>
</html>

SOP 2.Create a website using HTML and CSS code to design a 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.

1.external.css
h1{background-color:yellow;border-style:double}
body{background-color:orange}
ul{font-family:Algerian}

2.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 your name
<input type="text" name="name" autocomplete><br><br>
Select Date of Travel
<input type="date" name="trvdate"><br><br>
Enter Telephone Number
<input type="tel" name="phone" placeholder="123-12345678"
pattern="[0-9]{3}-[0-9]{8}" required><br><br>
<input type="image" src="submit.png" alt="Submit" width="100"
height="100">
</form> <br><br>
<a href="page2.html">Information About Transporter</a>
</body> </html>

3. Page2.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>

2
S.Y.J.C. Science Practical Prof Parag Desai

<li>Time - 09.30 am</li>


<li>Seat no - B39</li>
<li>Destination - Delhi</li>
</ul>
<a href="page1.html">Connect First Page</a>
</body></html>

SOP 3 : 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).

audio.html
<!DOCTYPE html>
<html>
<head>
<title> audio </title>
</head>
<body>
<audio controls loop="-1">
<source src="songs.mp3" type="audio/mpeg">
</audio>
</body>
</html>
audio1.html
<!DOCTYPE html>
<html>
<head>
<title> audio1.html</title>
</head>
<body>
<audio controls autoplay>
<source src="songd.ogg" type="audio/ogg">
<source src="songs.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>

SOP 4 : 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 audio file that plays
a sound automatically with controls.The dimension of video area should be 100* 100 pixels. The

3
S.Y.J.C. Science Practical Prof Parag Desai

browser should displaythe 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> video.html</title>
</head><body>
<video width="150" height="150" controls autoplay>
<source src="gmail.mp4" type="video/mp4">
</video>
</body>
</html>

video1.html

<!DOCTYPE html>
<html>
<head>
<title>Video1.html </title>
</head>
<body>
<video width="100" height="100" controls autoplay>
<source src="gmail.mp4" type="video/mp4">
<source src="gmail.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>

SOP 5 : Navigation on an image using Client side image Mapping in web page using html 5.
Create a webpage named imagemap. html with an inserted image having jpeg, png or gif extension. Create 3
different shapes (like rectangle,circle and polygon) which do not overlap. Note the co-ordinates making use
of Ms-Paint/GIMP/IrfanView/Pinta. Each shape should be mapped or navigate with a different URL that
should navigate to a local webpage.

<!DOCTYPE html>
<html>
<head>
<title>mapping</title>
</head>
<body>
<img src="tulips.jpg" usemap="#abc">
<map name="abc">
<area shape="circle" coords="156,155,74" alt="circle"
href="https://www.google.com">
<area shape="rect" coords="437,79,631,210" alt="rect"

4
S.Y.J.C. Science Practical Prof Parag Desai

href="https://www.yahoo.com">
<area shape="poly" coords="830,67,988,157,766,179" alt="poly"
href="https://www.rediffmail.com">
</map>
</body>
</html>

2. Advanced JavaScript
1.Create JavaScript program for the following form validations. Make use of HTML5 properties to do
the following validations:

Name, address, contact number and email are required fields of the form.
Address field should show the hint value which will disappear when field gets focus or key press event.
Telephone number should be maximum 10 digit number only.
Email field should contain valid email address, @ should appear only once and not at the beginning or at
end. It must contain at least one dot(.).
Make use of pattern attribute for email to accept lowercase, uppercase alphabets, digits and specified
symbols.
Pg01.html
<!DOCTYPE html>
<html>
<head>
<title>pg01</title>
<script type="text/javascript">
function ValidateEmail(inputText)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(inputText.value.match(mailformat))
{
document.form1.text1.focus();
return true;
}
else
{
alert("You have entered an invalid email address!");
document.form1.text1.focus();
return false;
}
}
</script>
</head>
<body>
<h1>Information Form</h1>
<form action="" method="" name="f1">
<table>
<tr>
<td>Your Name</td>
<td><input type="text" name="t1" required></td>
</tr>
<tr>
5
S.Y.J.C. Science Practical Prof Parag Desai

<td>Address</td>
<td><textarea rows="5" cols="20" name="a1" required placeholder="Enter Address"></textarea></td>
</tr>
<tr>
<td>Contact</td>
<td><input type="number" name="n1" maxlength="10" required></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="email" name="e1" required></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="submit"
onclick="ValidateEmail(document.f1.e1)"></td>
</tr>
</table>
</form>
</body>
</html>

2. Create event driven JavaScript program for the following. Make use of appropriate variables,
JavaScript inbuilt string functions and control structures.
 To accept string from user and count number of vowels in the given
string.
pg02.html
<!DOCTYPE html>
<html>
<head><title>pg02</title>
</head>
<body>
<script type="text/javascript">
function getVowels() {
var vowelsCount = 0;
var str = document.getElementById("t1").value;
var string = str.toString();
for (var i = 0; i <= string.length - 1; i++) {
if (string.charAt(i) == "a" || string.charAt(i) == "e" || string.charAt(i) == "i" || string.charAt(i) == "o" ||
string.charAt(i) == "u") {
vowelsCount += 1;
}
}
//document.write("Total Vowels : "+vowelsCount);
document.getElementById('demo').innerHTML = "Total Vowels : "+vowelsCount;
return vowelsCount;
}
</script>
<tr>
<td><input type="text" id="t1"></td>
<td><input type="submit" name="submit" onclick="getVowels()"></td>
</tr>
<p id="demo"></p> </body></html>
6
S.Y.J.C. Science Practical Prof Parag Desai

3. Create event driven JavaScript program for the following. Make use of appropriate variables,
JavaScript inbuilt string functions and control structures.
 To accept string from user and reverse the given string and check whether
it is palindrome or not.
Pg3.html
<!DOCTYPE html>
<html>
<head><title>pg03</title></head>
<body>
<script type="text/javascript">
function reverse_String() {
var str = document.getElementById('s1').value;
var final_str = str;
var split = str.split("");
var reverse = split.reverse();
var reverse_data = reverse.join("");
document.write("Reverse : "+reverse_data);
if (final_str==reverse_data) {
document.write("<br>It is palindrome ");
}
else{
document.write("<br>not palindrome ");
}
}
</script>
<input type="text" id="s1" placeholder="Enter a Striing">
<input type="submit" name="" onclick="reverse_String()">

</body>
</html>

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.]
Output format : 40 Celsius=104 Fahrenheit
45 Fahrenheit = 7.22222222 Celsius

Pg04.html
<!DOCTYPE html>
<html>
<head>
<title>pg04</title>
<script type="text/javascript">
function get_Fahrenheit(){
var c = parseInt(document.getElementById('c1').value);
var f;
//(f-32)/9 = c/5;
f = c/5*(9)+32;
7
S.Y.J.C. Science Practical Prof Parag Desai

document.write("Fahrenheit : "+f);
}

function get_Celsius(){
var f = parseInt(document.getElementById('f1').value);
var c;
//(f-32)/9 = c/5;
c = ((f-32)/9)*5;
document.write("Celsius : "+c);
}
</script>
</head>
<body>
<input type="text" id="c1" placeholder="Temperature in Celsius">
<input type="submit" onclick="get_Fahrenheit()">
<br>

<input type="number" id="f1" placeholder="Temperature in Fahrenheit">


<input type="submit" onclick="get_Celsius()">

</body>
</html>
3. Server Side Scripting (PHP)
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.

Pg01.php
<!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>

8
S.Y.J.C. Science Practical Prof Parag Desai

2 : 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.

Pg02.php
<!DOCTYPE html>
<html>
<head>
<title>pg02</title></head>
<body>
<h2>Find Number of Vowels in a String</h2>
<form action="" method="post">
<input type="text" name="string" />
<input type="submit" />
</form>
</body>
</html>
<?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;
} ?>

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

Pg03.php
<?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;
?>
9

You might also like