yash java css html (1).docx
yash java css html (1).docx
OF WEB DEVELOPMENT
( HTML , JAVA , CSS )
SESSION-2022-25
*SUBMITTED BY—YASH BUDHORI
(B.C.A. 6th semester)
<!DOCTYPE html>
<html>
<head><title>Form Validation</title></head>.
<body>
</form>
<script>
function validateForm() {
if (!regex.test(email)) {
return false;
alert("Email is valid!");
return true;
</script>
</body>
</html>
OUTPUT:
<!DOCTYPE html>
<html>
<head><title>Dynamic Content</title></head>
<body>
<h1 id="greeting">Hello!</h1>
<script>
function changeGreeting() {
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head><title>Image Slider</title></head>
<body>
<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() {
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() {
document.getElementById("clock").innerText = now.toLocaleTimeString();
setInterval(updateClock, 1000);
</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>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>
Output:
<!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:
<!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>alice@example.com</td>
</tr>
<tr>
<td>Bob</td>
<td>bob@example.com</td>
</tr>
</table>
</body>
</html>
Output:
✅ 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="#">
</form>
</body>
</html>
Output:
• <!DOCTYPE html>
• <html>
• <head>
• <title>Styled Page</title>
• <style>
• body {
• background-color: #f0f8ff;
• color: #333;
• }
• h1 {
• color: #0066cc;
• text-align: center;
• }
• p{
• font-size: 18px;
• margin: 20px;
• }
• </style>
• </head>
• <body>
• </body>
• </html>
• Output:
• <!DOCTYPE html>
• <html>
• <head>
• <title>Button Hover</title>
• <style>
• .btn {
• background-color: #28a745;
• color: white;
• border: none;
• border-radius: 5px;
• cursor: pointer;
• }
• .btn:hover {
• background-color: #218838;
• }
• </style>
• </head>
• <body>
• </body>
• </html>
• Output:
•
✅ 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;
• }
• .container {
• flex-direction: column;
• align-items: center;
• }
• }
• </style>
• </head>
• <body>
• <div class="container">
• </body>
• </html>
• Output:
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = htmlspecialchars($_POST["username"]);
?>
Hello, John!
<?php
date_default_timezone_set("UTC");
?>
Output:
</form>
<?php
$validUser = "admin";
$validPass = "1234";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$user = $_POST["user"];
$pass = $_POST["pass"];
} else {
?>
Output: