Scribd
Upload
11 views15 pages

Yash Java Css HTML

The document outlines practical web development projects using HTML, Java, and CSS for the session 2022-25, submitted by Yash Budhori. It includes various programs such as form validation, dynamic content updates, image sliders, and more, each with code examples and expected outputs. Additionally, it covers basic web page structures, navigation bars, and PHP functionalities for form handling and user validation.

Uploaded by

pantankur1234
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
11 views15 pages

Yash Java Css HTML

The document outlines practical web development projects using HTML, Java, and CSS for the session 2022-25, submitted by Yash Budhori. It includes various programs such as form validation, dynamic content updates, image sliders, and more, each with code examples and expected outputs. Additionally, it covers basic web page structures, navigation bars, and PHP functionalities for form handling and user validation.

Uploaded by

pantankur1234
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/ 15

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.

You might also like