Scribd
Upload
132 views24 pages

It Journal2024-25

Information technology journal

Uploaded by

reehanshakirshaikh22
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
132 views24 pages

It Journal2024-25

Information technology journal

Uploaded by

reehanshakirshaikh22
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/ 24

Practical no:1

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 the 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>Index Page</title>

<meta name="description" content="College website">

<style type="text/css">

h1{text-align:center;font-size:36px;font-style:bold;}

p{ text-decoration:underline;font-style:bold; color:green;}
body{background-color:pink}

img{border:solid}

</style></head><body>

<h1>Yashoda Shikshan Sanstha's<br>Loknete Subrao Kadam Junior College of


Arts, Commerce & Science,Satara</h1>

<p>It is a junior college of Arts ,Commerce and Science registered to HSC Board
pattern established in the year 2008.College is currently operating std
11<sup>th</sup> and 12 <sup>th</sup>

for faculties of Arts, Commerce and Science. College is located at Yashoda


Sankul,Godoli,Satara.College provides excellent education and guidance for the
student to achieve higher score.<br>Contact no:-02162-244090</p><br>

<nav><a href="Index.html">College Profile</a>

<a href="page2.html"> Enrollment Form</a></nav><br><br>

<img src="college.jpg"width="500" height="300" alt="LSK


college"align="centre"></body></html>

Page2.html

<html><head><title>Second Page</title>

<meta charset=''UTF-8''><meta name=''author''content=''YSPM''></head>

<body bgcolor="pink"><form align="center">

<h1>Enrollment Form</h1>

Name:-<input type =''text'' name=''name''><br><br>

Email:-<input type=''email'' name=''email''><br><br>

<input type ="submit" name="submit" value="Submit"></form>

<nav align="center"><a href="index.html">Home Page</a><nav>

</body></html>
Practical no: 2

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 style sheet for the left and right section with
background color and font styles.
Tourist.html

<html>

<head><title> Tourist Place </title>

<style>

section{background-color:yellow;width:50%;height:50%;
float:left;color:black;font-size:30px;outline-style:solid;} aside{background-
color:pink;width:50%;height:50%; float:right;color:black;font-size:30px;outline-
style:solid;}

</style></head>

<body>

<header style="background-color:lightblue;color:deeppink;text-align:center;
height:30%;width:100%;font-size:50px;outline-style:solid;">Tourist places

</header>

<section><b> City </b><ol>

<li> Pune </li>

<li> Banglore </li>

<li> Hyderabad </li>

<li> Delhi </li>

</ol></section>

<aside><p> Tourist places in Pune </p>

<ul><li> Shanivarwada </li>

<li> Kelkar Museum </li>

<li> Sinhgad fort</li>

</ul></aside></body></html>
Practical no:3

SOP 5: 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 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>Single Audio File With Control

</title>

</head>

<body>

<h1 align=center> Single Audio File With Control</h1>

<audio controls autoplay loop="-1">

<source src="Kalimba.mp3"type="audio/mp3"/>

</audio>

</body></html>
Audio1.html

<!doctype html>

<html>

<head>

<title> Multiple Audio Files With Controls</title>

</head>

<body>

<h1> Multiple Audio Files With Controls </h1>

<h3>List of sound file formats</h3>

<ol><li>mp3-audio/mp3</li>

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

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

</ol>

<audio controls autoplay>

<source src ="Kalimba.mp3"type="audio/mp3"/>

<source src="Kalimba.ogg' type="audio/ogg"/>

<source src="Kalimba.wav"type"="audio/wav"/>

Your Audio File not Supported in this browser!!

</audio>

</body>

</html>
Practical no:4
SOP 6: 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 video provide multiple source file formats for the
same video file that plays a video 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.)
Video.html

<!doctype html><html>

<head><title>Single Video File on Web Page With Control</title></head>

<body><h1 align=center> Single Video File on Web Page With Control</h1>

<video src="Wildlife.mp4" controls width="150" height="150" loop="-


1"autoplay></video></body></html>

Video1.html

<!doctype html>

<html><head>

<title> Multiple Video Files With Controls</title>

</head>

<body>

<h1> Multiple Video Files With Controls </h1>


<h3>List of sound file formats</h3>

<ol><li>mp4-video/mp4</li>

<li>wmv-audio/wmv</li>

<li>webm-audio/webm</li>

</ol><video controls width="100"height="100"autoplay>

<source src ="Wildlife.mp4"type="video/mp4"/>

<source src="Wildlife.wmv" type="video/wmv"/>

<source src="Wildlife.webm"type"="video/webm"/>

Your Video File not Supported in this browser!!

</video></body></html>
Practical no:5
SOP 7: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,
polygon) which do not overlap. Note the co-ordinates making use of
Ms-Paint/GIMP/Irfan View/Pinta.Each shape should be mapped or
navigate with a different URL that should navigate to a local webpage.

Imagemap.html

<!DOCTYPE html>

<html><head><title>Client Side Image mapping</title>

<body><h1 align="center">Client Side Image mapping</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and
read more about the topic:</p>

<img src="computer.jpg" alt="computer" usemap="#imagemap" width="400"


height="379">

<map name="imagemap">

<area shape="rect" coords="34,44,270,350" alt="computer" href="page1.html">


<area shape="poly" coords="288,173,328,172,332,207,334,244,294,245,292,216"
alt="phone" href="page2.html">

<area shape="circle" coords="337,300,44" alt="cup of coffee"


href="page3.html"></map></body></html>
Page1.html

<html><head><title>Computer</title>
</head>
<body><h1>This is page 1</h1>
</body></html>

Page2.html

<html><head><title>Mobile</title>
</head>
<body><h1>This is page 2</h1>
</body>
</html>
Page3.html

<html><head><title>coffee</title>
</head>
<body><h1>This is page 3</h1>
</body>
</html>
Practical no:6
SOP 2: 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 number 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. It must contain at least one dot(.).

5)Make use of pattern attribute for email to accept lowercase, uppercase


alphabets, digits and specified symbols.

Info.html

<!doctype html>

<html><head><title>Javascript</title>

</head><body><h1>Information Form</h1>

<form name="f1">Your Name

<input type="text" name="txt_name"><br><br>

Address<textarea name="txt_address" placeholder="Permanent Address"/>

</textarea><br><br>

Contact<input type="tel" name="telephone" maxlength="10"><br><br>


Email<input type="email" name="txt_email" pattern="[A-Z a-z"]{0-9}-[@]{1}-
[.]{1}><br><br>

<input type="button" name="b1" value="submit" onclick="validate_email()">

</form>

</body>

<script type="text/javascript">

function validate_email()

var x=f1.txt_email.value;

var at_pos=x.indexOf("@");

var last_pos=x.lastIndexOf("@");

var firstdot_pos=x.indexOf(".");

var dot_pos=x.lastIndexOf(".");

if(at_pos<1||dot_pos<at_pos+2||dot_pos+2>=x.length||firstdot_pos<at_pos||at_pos
<last_pos)

{alert("Not a valid email address");

f1.txt_email.focus();

else{

alert("Valid Email Address");return true;}}</script></html>


Practical no:7
SOP 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 count number of vowels in the given string.

Vowel.html

<!doctype html>
<html>
<head><title>String functions</title></head>
<body>
<form name="frm1">
Enter Your Name<input type="text"name="t1"><br><br>
<input type="button"name="btncheck"value="Count vowel"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>
Practical no:8
SOP4: 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.

Palindrome.html

<!doctype html>

<html>

<head><title></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 String">

<input type="submit" name="" onclick="reverse_String()">

</body>

</html>
Practical no:9

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

Temp.html

<!DOCTYPE html>

<html>

<head><title>SOP 5 Javascript</title>

<body><h2>JavaScript code to convert Celcius to Fahrenheit or vice-


versa</h2><br>

<p>Enter the Temperature</p><p><input type="text" id="txt_celsius"


onkeyup="convert('C')"> Temperature in degree Celsius</p><br>

<p><input type="text" id="txt_fah" onkeyup="convert('F')"> Temperature in degree


Fahrenheit</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 //fahrenheit to celsius

t = (document.getElementById("txt_fah").value -32) * 5 / 9;

document.getElementById("txt_celsius").value = Math.round(t);

</script></body></html>
Practical no:10

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


Vote.html
<html>

<body>

<h1 align "center">person eligible to vote or not </h1>

<form method ="post" action="age.php">


Enter Your Age
<input type ="text"name="age"><br><br>

<input type="submit"name="submit"value="Check Eligible">

</form>

</body>

</html>
Age.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";

}}?>
Practical no:11

SOP 5: Write a PHP program to save marks of English, Hindi, Marathi, Maths and
Information technology in an array for 5 students and display total marks and
percentage of each students using ‘Foreach’

Marks.php

<?php

$a=array(55,68,60,80,75);

$t=0;

foreach($a as $value)

echo"<br><br>Marks in subject.$value";

$t=$t+$value;

$p=$t*100/500;
echo"<br><br>Total is:.$t";
echo"<br><br>Percentage is:.$p";
?>
Practical no:12

SOP 6 : 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.html

<html>

<body>

<h1 align="center">Electricity Bill</h1>

<form method="post" action="bill.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.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