PRACTICAL WORK
OF WEB DEVELOPMENT
( HTML , JAVA , CSS )
SESSION-2022-25
*SUBMITTED BY—YASH BUDHORI
(B.C.A. 6th semester)
*SUBMITTED TO—DR. ANAMIKA
PANT
1.Form validation Program
Use case :Validating user input before submission(i.e. Checking if the email field is not empty and is formatted
properly).
<!DOCTYPE html>
<html>
<head><title>Form Validation</title></head>.
<body>
<form onsubmit="return validateForm()">
Email: <input type="text" id="email">
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
const email = document.getElementById("email").value;
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("Please enter a valid email address.");
return false;
alert("Email is valid!");
return true;
</script>
</body>
</html>
OUTPUT:
*If email is invalid :” Please enter a valid email address”.
*If email is valid: ”Email is valid”.
2. Dynamic Content Update Program
Use Case: Change content on the page without reloading it.
<!DOCTYPE html>
<html>
<head><title>Dynamic Content</title></head>
<body>
<h1 id="greeting">Hello!</h1>
<button onclick="changeGreeting()">Click Me</button>
<script>
function changeGreeting() {
document.getElementById("greeting").innerText = "Welcome to Web Development!";
</script>
</body>
</html>
Output (in HTML):
Initial: Hello!
After click: Welcome to Web Development!
3. Image Slider Program
Use Case: Automatically or manually rotating images in a gallery.
<!DOCTYPE html>
<html>
<head><title>Image Slider</title></head>
<body>
<img id="slider" src="https://via.placeholder.com/150?text=Image+1" width="150">
<button onclick="nextImage()">Next</button>
<script>
const images = [
"https://via.placeholder.com/150?text=Image+1",
"https://via.placeholder.com/150?text=Image+2",
"https://via.placeholder.com/150?text=Image+3"
];
let index = 0;
function nextImage() {
index = (index + 1) % images.length;
document.getElementById("slider").src = images[index];
</script>
</body>
</html>
Output:
Each button click updates the image to the next one in the list.
4. Real-Time Clock Program
Use Case: Displaying current time that updates every second.
<!DOCTYPE html>
<html>
<head><title>Clock</title></head>
<body>
<h2 id="clock"></h2>
<script>
function updateClock() {
const now = new Date();
document.getElementById("clock").innerText = now.toLocaleTimeString();
setInterval(updateClock, 1000);
updateClock(); // Initial call
</script>
</body>
</html>
Output:
Displays a ticking clock like: 10:32:21 AM that updates every second.
5. Basic Web Page Structure
Use Case: Foundation of every HTML document.
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple HTML page.</p>
</body>
</html>
Output:
• Displays a large header: "Welcome to My Website"
• Below it: "This is a simple HTML page."
✅6. Navigation Bar
Use Case: Create a simple website navigation menu.
<!DOCTYPE html>
<html>
<head>
<title>Navigation Menu</title>
</head>
<body>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
</body>
</html>
Output:
• Displays horizontal links: Home | About | Contact
✅ 7. HTML Table for Data Display
Use Case: Present structured data like user records or pricing tables.
<!DOCTYPE html>
<html>
<head>
<title>User Table</title>
</head>
<body>
<h2>User List</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>Alice</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
</tr>
</table>
</body>
</html>
Output:
• A bordered table listing user names and emails.
✅ 8. HTML Form
Use Case: Collect user input for login, contact forms, etc.
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<h2>Login</h2>
<form action="#">
Username: <input type="text" name="username"><br><br>
Password: <input type="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
Output:
• A simple login form with username and password fields.
✅ 9. CSS Styling for a Web Page
• Use Case: Applying basic styling to text and background.
• <!DOCTYPE html>
• <html>
• <head>
• <title>Styled Page</title>
• <style>
• body {
• background-color: #f0f8ff;
• font-family: Arial, sans-serif;
• color: #333;
• }
• h1 {
• color: #0066cc;
• text-align: center;
• }
• p{
• font-size: 18px;
• margin: 20px;
• }
• </style>
• </head>
• <body>
• <h1>Welcome to My Styled Page</h1>
• <p>This page uses CSS to improve its appearance.</p>
• </body>
• </html>
• Output:
• Light blue background.
• Centered, blue heading.
• Larger, clean paragraph font.
•
✅ 10. CSS Button Hover Effect
• Use Case: Enhance buttons with hover effects for better user interaction.
• <!DOCTYPE html>
• <html>
• <head>
• <title>Button Hover</title>
• <style>
• .btn {
• padding: 10px 20px;
• background-color: #28a745;
• color: white;
• border: none;
• border-radius: 5px;
• transition: background-color 0.3s;
• cursor: pointer;
• }
• .btn:hover {
• background-color: #218838;
• }
• </style>
• </head>
• <body>
• <button class="btn">Click Me</button>
• </body>
• </html>
• Output:
• A green button that turns darker green when hovered.
•
✅ 11. Responsive Layout with Flexbox
• Use Case: Layout that adjusts across different screen size.
• <!DOCTYPE html>
• <html>
• <head>
• <title>Flexbox Layout</title>
• <style>
• .container {
• display: flex;
• justify-content: space-around;
• padding: 20px;
• }
• .box {
• width: 150px;
• height: 150px;
• background-color: #ffcc00;
• text-align: center;
• line-height: 150px;
• font-weight: bold;
• border-radius: 10px;
• }
• @media (max-width: 600px) {
• .container {
• flex-direction: column;
• align-items: center;
• }
• }
• </style>
• </head>
• <body>
• <div class="container">
• <div class="box">Box 1</div>
• <div class="box">Box 2</div>
• <div class="box">Box 3</div>
• </div>
• </body>
• </html>
• Output:
• On desktop: three yellow boxes in a row.
• On mobile: boxes stack vertically.
✅ 12. Simple PHP Form Handling
Use Case: Process user input from a form and display it back.
<!-- form.html -->
<form method="POST" action="handle.php">
Name: <input type="text" name="username">
<input type="submit" value="Submit">
</form>
<!-- handle.php -->
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = htmlspecialchars($_POST["username"]);
echo "Hello, " . $name . "!";
?>
Output (after submitting form):
Hello, John!
(If the user typed "John" in the form.)
✅ 13. PHP Displaying Current Date and Time
Use Case: Show real-time server date/time.
<!-- time.php -->
<?php
date_default_timezone_set("UTC");
echo "Current Server Time: " . date("Y-m-d H:i:s");
?>
Output:
Current Server Time: 2025-05-07 14:30:12
✅ 14. Simple PHP Login Validation (Hardcoded)
Use Case: Validating user credentials (for learning/demo purposes).
<!-- login.html -->
<form method="POST" action="login.php">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="pass"><br>
<input type="submit" value="Login">
</form>
<!-- login.php -->
<?php
$validUser = "admin";
$validPass = "1234";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$user = $_POST["user"];
$pass = $_POST["pass"];
if ($user == $validUser && $pass == $validPass) {
echo "Login successful. Welcome, $user!";
} else {
echo "Invalid credentials. Try again.";
?>
Output:
• If correct: Login successful. Welcome, admin!
• If incorrect: Invalid credentials. Try again.
