Enrollment No.
221233107011 [WEB PROGRAMMING (3160713)]
PRACTICAL:- 1
AIM: Wap for different heading with html.
Code:
<html>
<head>
<title>
Practical:-1 Html Tags
</title>
</head>
<body>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
</body>
</html>
Output:-
SSAIET, Computer Dept, Navsari Page 1
Enrollment No. 221233107011 [WEB PROGRAMMING (3160713)]
PRACTICAL:- 2
AIM: WAP in html which demonstrate anchor tag and href attributeto link
a page.
Code:-
Page 1
<html>
<head>
<title>
Practical:-2 Anchor Tags
</title>
</head>
<body>
<B><H1>What is Web Programing?</H1></B></br>
<a href="Pr2.1.html">Click hear for get answer of this question.</a></br>
</body>
</html>
Page 2
<html>
<head>
<title>
Practical:-2
</title>
</head>
<body>
<B>
<h1> Web Programing</h1>
<H5>Web programming, also known as web development, is the creation of dynamic web
applications. </h5>
<H4>Examples of web applications are social networking sites like Facebook or e-commerce
sites like Amazon.</h4><h4> The good news is that learning web development is not that
hard! In fact, many argue its the best form of coding for beginners to learn.</H4>
</B></br></br>
<a href="Pr2.html">Click hear for go previous page.</a></br>
</body>
</html>
SSAIET, Computer Dept, Navsari Page 2
Enrollment No. 221233107011 [WEB PROGRAMMING (3160713)]
Output:-
SSAIET, Computer Dept, Navsari Page 3
Enrollment No. 221233107011 [WEB PROGRAMMING (3160713)]
PRACTICAL:- 3
AIM: Develop HTML page using CSS which cover image, text, font,
border, box and margin.
HTML Code:-
<html>
<head>
<title>Practical 4</title>
<link rel="stylesheet" type="text/css" href="Example.css">
</head>
<body>
<div class="a">
<div class="c">
</div><h1>S.S.A.I.E.T</h1>
</div>
<div class="b"><br>
<img class="a" src="web.jpeg">
</div>
</body>
</html>
CSS Code:-
Body
{
background: linear-gradient(to bottom, SkyBlue 0%, Pink 100%);
}
div.a
{
border-style:solid;
font-family:Times New Roman;
text-align:center;
text-decoration: underline;
}
div.b
{
font-family: Times New Roman;
}
img.a
{
width: 400px;
height: 400px;
border: 7px solid;
}
div.c
{
padding-left: 20px;
padding right: 20px;
SSAIET, Computer Dept, Navsari Page 4
Enrollment No. 221233107011 [WEB PROGRAMMING (3160713)]
Output:-
SSAIET, Computer Dept, Navsari Page 5
Enrollment No. 221233107011 [WEB PROGRAMMING (3160713)]
PRACTICAL:- 4
AIM: Write a Javascript that uses function to calculate how many days are
left in your birthdate?
Code:-
<html>
<head>
<title> Calculate Days left to my birthday? </title>
<script type="text/javascript">
function calculateDays() {
let today = new Date();
let bday = new Date(document.getElementById("bday").value);
let upcomingBday = new Date(today.getFullYear(), bday.getMonth(),
bday.getDate());
if(today > upcomingBday) {
upcomingBday.setFullYear(today.getFullYear() + 1);
}
var one_day = 24 * 60 * 60 * 1000;
let daysLeft = Math.ceil((upcomingBday.getTime() - today.getTime()) / (one_day));
document.getElementById("result").innerText = `${daysLeft} day(s) left in Birthday`;
}
</script>
</head>
<body>
<h2>How many days left to my birthday?</h2>
<form>
<label>Please enter your birthday: </label>
<br><br>
<input id="bday" onblur="calculateDays()" type="date" />
<p id="result"></p>
</form>
</body>
</html>
Output:-
SSAIET, Computer Dept, Navsari Page 6
Enrollment No. 221233107011 [WEB PROGRAMMING (3160713)]
PRACTICAL:- 5
AIM: Write a JavaScript that handles following mouse events Add
necessary elements.
(i) JavaScript gives the key code for the key pressed.
(ii) If the key pressed is “a”,”e”,”i”,”o”,”u” the script should announce that
vowel is pressed.
Code:-
<html>
<head>
<title>Practical 8</title>
<script type="text/javascript">function display1(e){
document.body.style.backgroundColor="White"; var chr = String.fromCharCode(e.keyCode);
alert(e.keyCode);
if(chr=='A'||chr=='a'||chr=='E'||chr=='e'||chr=='I'||chr=='i'||chr=='
O'||chr=='o'||chr=='U'||chr=='u'){
alert("Its a vowel");
}
}
function display2(){ document.body.style.backgroundColor="Blue";
}
</script>
</head>
<body>
<form>
<input type="text" onkeydown="display1(event)"onkeyup="display2()">
</form>
</body>
</html>
Output:-
SSAIET, Computer Dept, Navsari Page 7
Enrollment No. 221233107011 [WEB PROGRAMMING (3160713)]
PRACTICAL:- 6
AIM: Make a Application Using Web Service And Blogs
Program:-
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web App</title>
<link rel="stylesheet" href="p-7.css">
</head>
<body>
<header>
<h1>Welcome to My Web App</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
</header>
<main>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, deserunt obcaecati quaerat
officiis adipisci rerum
odio modi aut veniam. Tenetur culpa aliquid et veritatis, reprehenderit cupiditate totam
fugit mollitia! Et!
</main>
<footer>
<p>© 2024 My Web App</p>
</footer>
</body>
</html>
Index.css:-
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #33428c;
color: #fff;
padding: 20px;
}
nav ul {
list-style-type: none;
SSAIET, Computer Dept, Navsari Page 8
Enrollment No. 221233107011 [WEB PROGRAMMING (3160713)]
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
footer {
background-color: #33428c;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
Output:-
SSAIET, Computer Dept, Navsari Page 9
Enrollment No. 221233107011 [WEB PROGRAMMING (3160713)]
PRACTICAL:- 7
AIM: Write a PHP program to find whether Entered year is leap year or
not ?
code:-
<html>
<body>
<form method="post" style="border:black; border-style:solid; width:450px;
hight:450px;">
<center><h3>Check Leep Year Or Not
?</h3><hr></center>Enter the Year: <input
type="text" name="year" > <br/><br>
<center><input type="submit" name="submit"
value="Submit"></center>
</form>
</body>
</html>
<?php
if($_POST)
{
//get the year
$year = $_POST['year'];
//check if entered
value is a number
if(!is_numeric($ye
ar))
{
echo "Strings not allowed, Input
should be a number";return;
}
//multiple conditions to check the leap year
if( (0 == $year % 4) and (0 != $year % 100) or (0 == $year % 400) )
{
echo "$year is a Leap Year";
}
else
{
echo "$year is not a Leap Year";
}
}
?>
SSAIET, Computer Dept, Navsari Page 10
Enrollment No. 221233107011 [WEB PROGRAMMING (3160713)]
Output:-
SSAIET, Computer Dept, Navsari Page 11
Enrollment No. 221233107011 [WEB PROGRAMMING (3160713)]
PRACTICAL:- 8
AIM:Write PHP program Read textfile() and Store it in Array and Display
theContent Of Array.
Code:-
Abc.txt.
Array.php
<?php
$txt_file = fopen('abc.txt','r');
$a = 1;
while ($line = fgets($txt_file)) {
echo($a." ".$line)."<br>";
$a++;
}
fclose($txt_file);
echo "<br>";
$txt_file = 'abc.txt';
$lines = file($txt_file);
foreach ($lines as $num=>$line)
{
echo 'Array ['.$num.']: '.$line.'<br/>';
}
?>
Output:-
SSAIET, Computer Dept, Navsari Page 12
Enrollment No. 221233107011 [WEB PROGRAMMING (3160713)]
PRACTICAL:- 9
AIM: Make Simple Login Form Using Cookie and Session .
Code:-
Program:
login.php:
<?php
session_start();
if(isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === true) {
header("Location: welcome.php");
exit;
if($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = "Admin"; // Replace with your actual username
$password = "1234"; // Replace with your actual password
if($_POST['username'] == $username && $_POST['password'] == $password) {
$_SESSION['loggedin'] = true;
$_SESSION['username'] = $username;
if(isset($_POST['remember'])) {
setcookie('username', $username, time() + 3600);
setcookie('password', $password, time() + 3600);
exit;
} else {
$loginError = "Invalid username or password.";
?>
SSAIET, Computer Dept, Navsari Page 13
Enrollment No. 221233107011 [WEB PROGRAMMING (3160713)]
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<h2>Login Form</h2>
<form method="POST" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);
?>">
<label for="username">Username:</label>
<input type="text" name="username" id="username" required><br><br>
<label for="password">Password:</label>
<input type="password" name="password" id="password" required><br><br>
<input type="checkbox" name="remember" id="remember">
<label for="remember">Remember Me</label><br><br>
<input type="submit" value="Login">
</form>
<?php
if(isset($loginError)) {
echo "<p>$loginError</p>";
}
?>
</body>
</html>
welcome.php:
<?php
session_start();
SSAIET, Computer Dept, Navsari Page 14
Enrollment No. 221233107011 [WEB PROGRAMMING (3160713)]
if(!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {
header("Location: login.php");
exit;
$username = $_SESSION['username'];
?>
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<h2>Welcome, <?php echo $username; ?>!</h2>
<p>This is the welcome page. You have successfully logged in.</p>
<p><a href="logout.php">Logout</a></p>
</body>
</html>
SSAIET, Computer Dept, Navsari Page 15
Enrollment No. 221233107011 [WEB PROGRAMMING (3160713)]
Output:
SSAIET, Computer Dept, Navsari Page 16
Enrollment No. 221233107011 [WEB PROGRAMMING (3160713)]
PRACTICAL:- 10
AIM: Make Simple Login Form Using Cookie and Session .
SSAIET, Computer Dept, Navsari Page 17
