Scribd
Upload
8 views32 pages

Screenshot 2025-01-08 at 9.40.03 PM

Uploaded by

ankitcreations2004

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt

Screenshot 2025-01-08 at 9.40.03 PM

Uploaded by

ankitcreations2004
8 views32 pages

Copyright

© © All Rights Reserved

Available Formats

PDF, TXT or read online from Scribd

Did you find this document useful?

Is this content inappropriate?

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
8 views32 pages

Screenshot 2025-01-08 at 9.40.03 PM

Uploaded by

ankitcreations2004

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
You are on page 1/ 32

<! 1. Creation of website using HTML sop1_index.

html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{ text-decoration : underline;
font-style: bold;
color:green;
font-size: 24px;
margin-left: 130px;
max-width: 1100px;}
h1
{ text-align: center; }
</style>
<title>
New English School and Abasaheb Chinchwade Junior College Of Arts,Commerce and Science
</title>
<meta name="keywords" content="Faculty, students">
<meta name="description" content="A college Website dealing with students and teachers/Faculty's
data">
</head>
<body>
<h1>
New English School and Abasaheb Chinchwade Junior College Of Arts,Commerce and Science
</h1>
<nav style="font-size: 22px;">
<a href="D:\2024\sop1\sop1_page2.html">Feedback Form</a>|
<a href="D:\2024\sop1\sop1_page3.html">Contact Form</a>
</nav>
<br>
<br>
<p>
Education is the most powerful weapon which you can use to change the world. Everyone is looking to
change the world, and why not take part in these movements? People are paying a ridiculous amount of money
for education, as this industry is valued around million dollars. Most of this amount is now spent on online
education.Our organization would like to give you an opportunity to take a fraction of this platform. The best way
to gain quality education is to join with us where you can find majority of academic fields to enhance your career
with many streams of subjects are available at our place.
</p>
<br>
<img src="college.jpg" width="250px" height="250px" alt="New English School and Abasaheb Junior College Of
Arts,Commerce and Science" align="right">
</body>
</html>
<!sop1_page2.html>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1
{
text-align: center;
}
div
{
margin-left: 500px;
margin-top: 120px;
}
</style>
<title>
Subject Streams according to admission
</title>
<meta charset="utf-8" >
<meta name="keywords" content="enrollmet from data">
<meta name="description" content="Subject Streams according to admission process">
</head>

<body>
<h1 >
Feedback Form
</h1>
<div>
Name:<input type="text" name="name" ><br><br>
Email:<input type="email" name="email"><br><br>
<input type="submit" value="SUBMIT">
</div>

<a href="D:\2024\sop1\sop1_index.html"> Back</a>


</body>
</html>
<! Sop1_page3.html>

<!DOCTYPE html>
<html>
<head>
<title> SOP 1 </title>
</head>
<body>
<h1> Mobile No.:- 9123456789 </h1> <br>
<h1> Email ID:- acjc@gmail.com </h1>
<a href="D:\2024\sop1\sop1_index.html"> Back</a>
</body>
</html>
<! 2.Create a webpage using HTML and CSS code to design a webpage as the layout displayed below>

<!DOCTYPE html>
<html>
<head>
<title>
Tourist Places
</Title>
<style>
section{background-color:yellow;width:50%;height:50%;float:left;color:black;font-size:25pt;outline-style:solid;}
aside{width:50%;height:50%;float:right;background-color:pink;color:black;font-size:20pt;outline-style:solid;}
ol{font-style:bold;font-size:15pt}
ul{font-weight:bold;font-size:23pt}

</style>
</head>
<body>
<header style="background-color:skyblue;color:deeppink;text-align:center;height:100pt;font-size:40px;outline-
style:solid;outline-color:black">
<h1> Tourist Places</h1>
</header>
<section>
<h3> City</h3>
<ol>
<li>Pune</li>
<li>Banglore</li>
<li>Hydrabad</li>
<li>Delhi</li>
</ol>
</section>
<aside>
<h3>Tourist Places in Pune</h3>
<ul>
<li> Shaniwarwada</li>
<li>Kelkar Museum</li>
<li> Sinhgad Fort</li>
</ul>
</aside>
</body>
</html>
<! 3.Create a website using HTML and CSS to design webpages as follows>

<!DOCTYPE html>
<html>
<head>
<title>INFORMATION FORM</title>
<link rel="stylesheet"type="text/css" href="external.css"></head>
<body>
<h1 align="centre">Traveller information form</h1>
<form name="f1">
Enter Your Name
<input type="text name="name" autocomplete<br><br>
Select Date of Travel
<input type="text name="trv date" autocomplete><br><br>
Enter Telephone Number
<input type="tel" pattern='[0-9]{10}'>
<!....<input type="tel" name="phone" placeholder="123-456-7890"pattern='[0-9]{10}'">
<br><br>
<input type="submit" name="submit" value="submit">
</form>
<br><br>
<a href="sop3_secondpage.html">
<img src="travel.jpg" width="500"></a>
</body>
</html>
<!sop3_secondpage.html>

<html>
<head>
<title>INFORMATION ABOUT TRANSPORT</title>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
<h1 align="centre"> INFORMATION ABOUT TRANSPORT</h1>
<ul>
<li>Name of transporter:-Air Asia</li>
<li>Time:-9:30am</li>
<li>seat no.:-B39</li>
<li>Destination:-Delhi</li>
</ul>
<a href="sop3_firstpage.html">connect first page</a>
</body>
</html>
<! external.css>

body{background-color:Powderblue;}
h1{color:darkblue;text-align:center;text-shadow: 2px 2px 12px #ooddff;}
h4{color:red; font-family:Arial;}
h5{color:blue;border:8px yellow solid; Font-size:20px;}
a{text-decoration:none;}
<! 4. Creation of websiteusing HTML5 and CSS >

<!DOCTYPE html>
<html>
<head>
<title>Sop4 Demo practical</title>
<style type="text/css">
body
{
background-color: lightgrey;
}
nav
{
background-color: blue;
height:30px;
line-height: 30px;
font-size: 18px;
font-family: sans-serif;
}
span
{
font-size: 20px;
}
a
{
color:#FFFFFF;
padding: 15px;
}
section
{
float: left;
width: 70%;
background-color: grey;
margin: 5px 0;
}
article
{
background-color: white;
margin: 0 5px;
}
footer
{
background-color: blue;
line-height: 20px;
height:20px;
margin: 5px 0;
color: white;
padding:12px;
font-size: 20px;
font-family: sans-serif;
clear:both;
}
aside
{
float: right;
width: 29%;
margin: 5px 0;
background-color: grey;
}
h2,h3,h1,p
{
margin : 5px 0;
padding :0 10px;

}
</style>
</head>
<body>
<header>
<h1>News</h1>
<h3> Local and National News</h3>
<nav>
<a href="#"><span>H</span>OME</a>
<a href="#"><span>A</span>rchives</a>
<a href="#"><span>A</span>bout</a>
</nav>
</header>
<aside>
<h2>BE A NEWS REPORTER</h2>
<p>If you see news happening. Send us a Text.</p>
</aside>
<section>
<h2>Local News</h2>
<article>
<h3>Fire Fighters rescue man from building this is local news 1</h3>
<p>(reporter name, date)</p>
<p> This is the fighter details. This is the story of fighter.
<br>
This is the detail of rescue man. This is the story of how is rescued.
</p>
</article>
<article>
<h3>
New Library to be built this is local news 2
</h3>
<p>(reporter name,date)</p>
<p> This is the story text. This is the story text.
<br>
This is the story text. This is the story text.</p>
</article>
</section>
<section>
<h2>
National News
</h2>
<article>
<h3>
Snow storm is making travel difficult </h3>
<p>(reporter name, date)</p>

<p>This is the story snow storm. This is the story distoiral of storm.
<br>
This is the story part continued . This is the story text continued.</p>
</article>
<article>
<h3>Thousands are without power</h3>
<p>(reporter name, date)</p>
<br>
<p>This is the story of not having power. This is the story text continued.
<br> This is the story bad effect. This is the story about destroyal of economy.
</p>
</article>
</section>
<footer>
footer information
</footer>
</body>
</html>
<! 5. Navigation on an image using client side image mapping in webpage using HTML5>

<!Image Mapping>

<!DOCTYPE html>
<html>
<head><title>Image Mapping</title></head>
<body>
<h1 align="center"> Client side image Mapping</h1>
<img src="computer_lab.jpg" alt="computer_lab" usemap="#map1">
<map name="map1">
<area shape="poly" coords="477,210,632,55,781,210,724,459,535,459" href="https://www.google.com">
<area shape="rect" coords="69,347,352,142" href="rect.html">
<area shape="circle" coords="1093,277,20" href="https://flipkart.com">
</map>
</body>
</html>
<! Create JS program for the following form validation. Make use of HTML5 properties to do the following
validation>

<!DOCTYPE HTML>

<html>

<head>

<title>Email validation</title>

<script type="text/javascript">

function checkEmail(pp)

var pattern =/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;

if(pattern.test(pp))

{ alert("Email address is accepted"); }

else

{ alert("not a valid email address"); }

</script>

</head>

<body>

<h1> Information Form</h1>

<form name="f1">

Enter your name : <input type="text" name="t1"> <br><br>

Address :<textarea name="address" rows="2" cols="15" placeholder="permanent


address"></textarea><br><br>

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

Enter your E-mail : <input name="email" type="text" class="inputs" id="email_address" size="35"


maxlength="255">

<input name="submit" type="submit" value="Submit" onClick="checkEmail


(document.f1.email.value)">

</form>

</body>

</html>
<! Create event driven JS program to accept string from user and count number of vowels>

<!DOCTYPE HTML>

<html>

<head>

<title> Count Vowels</title>

<script type="text/javascript">

function count()

var string,i,ch,count;

count=0;

string=form1.t1.value;

for(i=0;i<string.length;i++)

ch=string.charAt(i);

if(ch=="A"|| ch=="a"||ch=="E"|| ch=="e"||ch=="I"|| ch=="i"||ch=="O"||


ch=="o"||ch=="U"|| ch=="u")

count++;

alert("Number of vowels in string are ="+count);

</script>

</head>

<body>

<form name="form1">

Enter your name : <input type="text" name="t1"> <br><br>

<input type="button" name="btn" value="Count vowels" onClick="count()">

</form>

</body>

</html>
<! Create event driven JS program to accept string and check whether it is palindrome or not>

<!DOCTYPE HTML>

<html>

<head>

<title> SOP4 palindrome</title>

<script type="text/javascript">

function chk()

var str,str_case,i,ch,len;

str= form1.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("string is palindrome"); }

else

{ alert("String is not palindrome"); }

</script>

</head>

<body>

<form name="form1">

Enter name :<input type="text" name="t1"><br><br>

<input type="button" name="btncheck" value="Check"onClick="chk()">

</form></body></html>
<! Create JS program which computer the average marks of students and use the corresponding grades.>

<!DOCTYPE html>

<html>

<head>

<title>Print Grade</title>

<script type="text/javascript">

function submit_marks() {

var sub1 = parseInt(document.getElementById('s1').value);

var sub2 = parseInt(document.getElementById('s2').value);

var sub3 = parseInt(document.getElementById('s3').value);

var sub4 = parseInt(document.getElementById('s4').value);

var sub5 = parseInt(document.getElementById('s5').value);

var sub6 = parseInt(document.getElementById('s6').value);

var total = sub1+sub2+sub3+sub4+sub5+sub6;

var per = total/6;

var grade;

if (per>=35 && per<=60) {

grade = 'F';

else if(per>=61 && per<=70){

grade = 'D';

else if(per>=71 && per<=80){

grade = 'C';

else if(per>=81 && per<=90){

grade = 'B';

else if(per>=91 && per<=100){

grade = 'A';

}
else{

grade = "Invalid or Failed";

document.getElementById("demo").innerHTML = "Your Total Marks : "+total+"<br>Your Percentage :


"+per+"<br>Your Grade : "+grade;

</script>

</head>

<body>

<h1>Enter Students Marks</h1>

Enter English Marks : <input type="text" id="s1" placeholder="Enter English Marks"><br>

Enter IT Marks :<input type="text" id="s2" placeholder="Enter IT Marks"><br>

Enter Physics Marks :<input type="text" id="s3" placeholder="Enter Physics Marks"><br>

Enter Chemistry Marks :<input type="text" id="s4" placeholder="Enter Chemistry Marks"><br>

Enter Biology Marks :<input type="text" id="s5" placeholder="Enter Biology Marks"><br>

Enter Maths Marks :<input type="text" id="s6" placeholder="Enter Maths Marks"><br>

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

<div id="demo"></div>

</body>

</html>
<! Write PHP program to check if a person is eligible to vote or not.>

<!Doctype html>
<html><head>
<title>php</title>
</head>
<body>
<form method ="post" action="">
Enter the age
<input type ="text" name="n1"> <br>
<input type ="submit" name="s1" value ="Submit">
</form>

<?php
if(isset($_POST['s1']))
{
$age=$_POST[n1];
if($age>=18)
echo"<br><br> You are Eligible to vote;
else
echo"<br><br> You are not Eligible to vote;
}
?>
</body>
</html>
<! Write PHP function to count the total number of vowels from a string by using HTML form>

<!DOCTYPE html>
<html>
<head>
<title>php</title>
</head>
<body>
<form method="post" action="">
Enter the string
<input type="text" name="n1"> <br>
<input type="submit" name="s1" value="Submit">
</form>

<?php
if(isset($_POST['s1']))
{
$mystring=$_POST['n1'];
$count=0;
$mystrig=strtolower($mystring);
for($i=0;i<strlen($mystring);$i++)
{
$onechar=substr($mysring,$i,1);
if($onechar=="a"|| $onechar=="e"|| $onechar=="i"||$onechar=="o"||$onechar=="u")
$count++;
}
echo"Number of vowels in string\"".$mystring."\"are:".$count;
}
?>
</body>
</html>
<! Write a PHP program to save marks of English,Hindi,Marathi,Maths and IT in an array.Display marks of
individual subject along with total marks and percentage.>

<?php
$marks=array('English'=>56,'Hindi'=>76,'Marathi'=>56,'Maths'=>57,'IT'=>78);
$total=$marks['English']+$marks['Hindi']+$marks['Marathi']+$marks['Maths']+$marks['IT'];
echo"<br> English :".$marks['English'];
echo"<br> Hindi :".$marks['Hindi'];
echo"<br> Marathi :".$marks['Marathi'];
echo"<br> Maths :".$marks['Maths'];
echo"<br> IT :".$marks['IT'];
echo"<br><br>Total:".$total;
$perc=$total/5;
echo"<br>percentage:".$perc;
?>

You might also like