Web File (1)
Uploaded by
b.23sanjukumarWeb File (1)
Uploaded by
b.23sanjukumarProgram 1
Write HTML code to create a basic web page consisting of various HTML tags.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
</header>
<main>
<section id="section1">
<h2>Section 1</h2>
<p>This is the first section of the page.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>This is the second section with an image below.</p>
<img src="example.jpg" alt="Example Image" width="300">
</section>
<section id="section3">
<h2>Section 3</h2>
<p>This is the third section containing a form.</p>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">Submit</button>
</form>
</section>
</main>
</body>
</html>
Output :
Program 2 : Create an html document with HTML links.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Links</title>
</head>
<body>
<header>
<h1>HTML Links Example</h1>
</header>
<main>
<section>
<h2>Internal Links</h2>
<p>
<a href="#section2">Go to Section 2</a> |
<a href="#section3">Go to Section 3</a>
</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>This is Section 2. Click <a href="#section1">here</a> to return to Section 1.</p>
</section>
<section id="section3">
<h2>Section 3</h2>
<p>This is Section 3. Click <a href="#section1">here</a> to return to Section 1.</p>
</section>
<section>
<h2>External Links</h2>
<p>
<a href="https://www.google.com" target="_blank">Visit Google</a><br>
<a href="https://www.wikipedia.org" target="_blank">Visit Wikipedia</a>
</p>
</section>
<section>
<h2>Email Link</h2>
<p><a href="mailto:[email protected]">Send an Email</a></p>
</section>
<section>
<h2>File Download</h2>
<p><a href="example.pdf" download>Download Example PDF</a></p>
</section>
</main>
<footer>
</footer>
</body>
</html>
Output :
Program 3 : Write an HTML code to design a page containing text, in form of paragraphs
giving suitable heading style.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text and Headings</title>
</head>
<body>
<header>
<h1>Main Heading: Welcome to the Text Page</h1>
</header>
<main>
<section>
<h2>Introduction</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vehicula, eros eu
fermentum efficitur, risus quam egestas sapien, in tincidunt libero nunc sit amet odio.</p>
</section>
<section>
<h2>Subheading 1: Why Learn HTML?</h2>
<p>HTML is the foundation of the web. It allows you to structure content, create
links, and include media like images and videos. Without it, the internet as we know it
wouldn't exist.</p>
</section>
<section>
<h2>Subheading 2: Benefits of Structured Content</h2>
<p>Structured content improves readability and accessibility. Using proper heading
styles ensures search engines and screen readers can understand your content better.</p>
</section>
<section>
<h3>Subtopic: Key Points</h3>
<p>1. Use <code><h1></code> for the main title.<br>
2. Use <code><h2></code>, <code><h3></code>, etc., for
subsections.<br>
3. Keep your paragraphs short and concise.</p>
</section>
<section>
<h4>Conclusion</h4>
<p>Incorporating headings and paragraphs in your web page design enhances clarity
and user experience. Start practicing to create visually appealing and organized web
content!</p>
</section>
</main>
<footer>
</footer>
</body>
</html>
Program 4 : Create a Web page with appropriate content and insert CSS in HTML.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Web Page</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f9;
color: #333;
}
header {
background-color: #4CAF50;
color: white;
padding: 1rem 0;
text-align: center;
}
header h1 {
margin: 0;
}
nav {
background-color: #333;
overflow: hidden;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 14px 20px;
display: block;
}
nav ul li a:hover {
background-color: #575757;
}
main {
padding: 2rem;
}
section {
margin-bottom: 2rem;
} h2 {
color: #4CAF50;
}p {
margin: 0.5rem 0;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1rem 0;
margin-top: 2rem;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Stylish Web Page</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="home">
<h2>Home</h2>
<p>Welcome to the homepage of this stylish web page. Enjoy exploring the content
and design!</p>
</section>
<section id="about">
<h2>About</h2>
<p>This web page demonstrates how to integrate CSS directly into HTML to style
content effectively. It’s simple, clean, and responsive.</p>
</section>
<section id="services">
<h2>Services</h2>
<p>We provide a variety of web development and design services, ensuring that your
web presence is engaging and effective.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>If you’d like to get in touch, please reach out via email or phone. We’re happy to
assist with your web development needs!</p>
</section>
</main>
<footer>
</footer>
</body>
</html>
Program 5 : Create a web page containing HTML Form.
Code :
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css"></link>
</head>
<body class="font-roboto bg-gray-100 text-gray-800">
<header class="bg-blue-600 text-white p-6 text-center">
<h1 class="text-3xl font-bold">Contact Us</h1>
</header>
<section class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold mb-4">Get in Touch</h2>
<form action="#" method="POST" class="space-y-4">
<div>
<label for="name" class="block text-lg font-medium">Name</label>
<input type="text" id="name" name="name" class="w-full p-2 border border-
gray-300 rounded-lg" required>
</div> <div>
<label for="email" class="block text-lg font-medium">Email</label>
<input type="email" id="email" name="email" class="w-full p-2 border border-
gray-300 rounded-lg" required>
</div> <div>
<label for="subject" class="block text-lg font-medium">Subject</label>
<input type="text" id="subject" name="subject" class="w-full p-2 border border-
gray-300 rounded-lg" required> </div> <div>
<label for="message" class="block text-lg font-medium">Message</label>
<textarea id="message" name="message" rows="4" class="w-full p-2 border
border-gray-300 rounded-lg" required></textarea>
</div><div class="text-center">
<button type="submit" class="bg-blue-600 text-white py-2 px-4 rounded-lg
hover:bg-blue-700">Send Message</button>
</div>
</form>
<footer class="bg-gray-800 text-white text-center p-6">
<p>© 2023 Contact Form. All rights reserved.</p>
</footer>
</body>
</html>
Program 6 : Create HTML List
Code :
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Lists</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css"></link>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet">
</head>
<body class="font-roboto bg-gray-100 text-gray-800">
<h1 class="text-3xl font-bold">HTML Lists</h1>
<h2 class="text-2xl font-semibold mb-4">Unordered List</h2>
<ul class="list-disc list-inside space-y-2">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<h2 class="text-2xl font-semibold mb-4">Ordered List</h2>
<ol class="list-decimal list-inside space-y-2">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
</ol>
<h2 class="text-2xl font-semibold mb-4">Nested List</h2>
<ul class="list-disc list-inside space-y-2">
<li>Item 1
<ul class="list-disc list-inside ml-6">
<li>Subitem 1.1</li>
<li>Subitem 1.2</li>
</ul>
</li>
<li>Item 2
<ul class="list-disc list-inside ml-6">
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3
<ul class="list-disc list-inside ml-6">
<li>Subitem 3.1</li>
<li>Subitem 3.2</li>
</ul>
</li>
</ul>
</section>
</main>
<footer class="bg-gray-800 text-white text-center p-6">
<p>© 2023 HTML Lists. All rights reserved.</p>
</footer>
</body>
</html>
Program 7 : Create a web page that contains HTML frames.
Code :
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Frames</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css"></link>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet">
</head>
<body class="font-roboto bg-gray-100 text-gray-800">
<header class="bg-blue-600 text-white p-6 text-center">
<h1 class="text-3xl font-bold">HTML Frames</h1>
</header>
<main class="p-6">
<section class="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold mb-4">Frames Example</h2>
<div class="grid grid-cols-3 gap-4">
<iframe src="https://placehold.co/300x200" class="w-full h-48 border border-gray-
300 rounded-lg" title="Placeholder image 1"></iframe>
<iframe src="https://placehold.co/300x200" class="w-full h-48 border border-gray-
300 rounded-lg" title="Placeholder image 2"></iframe>
<iframe src="https://placehold.co/300x200" class="w-full h-48 border border-gray-
300 rounded-lg" title="Placeholder image 3"></iframe>
</div>
</section>
</main>
<footer class="bg-gray-800 text-white text-center p-6">
<p>© 2023 HTML Frames. All rights reserved.</p>
</footer>
</body>
</html>
Program 8: Create XML with DTD.
Code :
XML File(example.xml)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE library SYSTEM "library.dtd">
<library>
<book>
<title>Effective Java</title>
<author>Joshua Bloch</author>
<year>2018</year>
</book>
<book>
<title>Clean Code</title>
<author>Robert C. Martin</author>
<year>2008</year>
</book>
</library>
DTD File (library.dtd)
<!ELEMENT library (book+)>
<!ELEMENT book (title, author, year)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT year (#PCDATA)>
Program 9 : Create a Web page which contains HTML embedded with JS result.
Code :
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css"></link>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet">
<script>
function calculateSum() {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var sum = num1 + num2;
document.getElementById('result').innerText = 'Result: ' + sum;
}
</script>
</head>
<body class="font-roboto bg-gray-100 text-gray-800">
<header class="bg-blue-600 text-white p-6 text-center">
<h1 class="text-3xl font-bold">Simple Calculator</h1>
</header>
<h2 class="text-2xl font-semibold mb-4">Calculate Sum</h2>
<div class="mb-4">
<label for="num1" class="block text-lg font-medium">Number 1</label>
<input type="number" id="num1" class="w-full p-2 border border-gray-300
rounded-lg" required>
<label for="num2" class="block text-lg font-medium">Number 2</label>
<input type="number" id="num2" class="w-full p-2 border border-gray-300
rounded-lg" required>
<button onclick="calculateSum()" class="bg-blue-600 text-white py-2 px-4
rounded-lg hover:bg-blue-700">Calculate</button>
</div>
<div id="result" class="mt-4 text-lg font-medium text-green-600"></div>
<footer class="bg-gray-800 text-white text-center p-6">
<p>© 2023 Simple Calculator. All rights reserved.</p>
</footer>
</body>
</html>
Program 10: Create HTML with Java Script to perform basic operations and to show
how try catch works.
Code :
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Operations with Error Handling</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css"></link>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet">
<script>
function performOperation() {
try {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var operation = document.getElementById('operation').value;
var result;
if (isNaN(num1) || isNaN(num2)) {
throw "Both inputs must be numbers.";
}
switch (operation) {
case 'add':
result = num1 + num2;
break;
case 'subtract':
result = num1 - num2;
break;
case 'multiply':
result = num1 * num2;
break;
case 'divide':
if (num2 === 0) {
throw "Cannot divide by zero.";
}
result = num1 / num2;
break;
default:
throw "Invalid operation.";
}document.getElementById('result').innerText = 'Result: ' + result;
document.getElementById('error').innerText = '';
} catch (error) {
document.getElementById('error').innerText = 'Error: ' + error;
document.getElementById('result').innerText = '';
}
}
</script>
</head>
<body class="font-roboto bg-gray-100 text-gray-800">
<header class="bg-blue-600 text-white p-6 text-center">
<h1 class="text-3xl font-bold">Basic Operations with Error Handling</h1>
</header>
<h2 class="text-2xl font-semibold mb-4">Perform Operation</h2>
<div class="mb-4">
<label for="num1" class="block text-lg font-medium">Number 1</label>
<input type="number" id="num1" class="w-full p-2 border border-gray-300
rounded-lg" required>
</div>
<div class="mb-4">
<label for="num2" class="block text-lg font-medium">Number 2</label>
<input type="number" id="num2" class="w-full p-2 border border-gray-300
rounded-lg" required>
</div>
<div class="mb-4">
<label for="operation" class="block text-lg font-medium">Operation</label>
<select id="operation" class="w-full p-2 border border-gray-300 rounded-lg">
<option value="add">Add</option>
<option value="subtract">Subtract</option>
<option value="multiply">Multiply</option>
<option value="divide">Divide</option>
</select>
</div>
<div class="text-center">
<button onclick="performOperation()" class="bg-blue-600 text-white py-2 px-4
rounded-lg hover:bg-blue-700">Calculate</button>
<footer class="bg-gray-800 text-white text-center p-6">
<p>© 2023 Basic Operations with Error Handling. All rights reserved.</p>
</footer>
</body>
</html>
Program 11: Write a program using java script validation in HTML Forms.
Code :
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css"></link>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet">
<script>
function validateForm() {
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
var errorMessage = '';
if (name === '') {
errorMessage += 'Name is required.\n';
}
if (email === '') {
errorMessage += 'Email is required.\n';
} else {
var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
errorMessage += 'Invalid email format.\n';
}
}
if (password === '') {
errorMessage += 'Password is required.\n';
} else if (password.length < 6) {
errorMessage += 'Password must be at least 6 characters long.\n';
}
if (errorMessage !== '') {
alert(errorMessage);
return false;
}
return true;
}
</script>
</head>
<body class="font-roboto bg-gray-100 text-gray-800">
<header class="bg-blue-600 text-white p-6 text-center">
<h1 class="text-3xl font-bold">Form Validation</h1>
</header>
<main class="p-6">
<section class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold mb-4">Register</h2>
<form onsubmit="return validateForm()">
<div class="mb-4">
<label for="name" class="block text-lg font-medium">Name</label>
<input type="text" id="name" name="name" class="w-full p-2 border border-
gray-300 rounded-lg" required>
</div>
<div class="mb-4">
<label for="email" class="block text-lg font-medium">Email</label>
<input type="email" id="email" name="email" class="w-full p-2 border border-
gray-300 rounded-lg" required>
</div>
<div class="mb-4">
<label for="password" class="block text-lg font-medium">Password</label>
<input type="password" id="password" name="password" class="w-full p-2
border border-gray-300 rounded-lg" required>
</div>
<div class="text-center">
<button type="submit" class="bg-blue-600 text-white py-2 px-4 rounded-lg
hover:bg-blue-700">Register</button>
</div>
</form>
</section>
</main>
<footer class="bg-gray-800 text-white text-center p-6">
<p>© 2023 Form Validation. All rights reserved.</p>
</footer>
</body>
</html>
Program 12 : Create a Dynamic Web Page with the help of Java Script events.
Code :
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>
Dynamic Web Page with JavaScript Events
</title>
<script src="https://cdn.tailwindcss.com">
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
rel="stylesheet"/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap
" rel="stylesheet"/>
<script>
function changeBackgroundColor() {
document.body.style.backgroundColor =
document.getElementById('colorPicker').value;
}
function displayMessage() {
var message = document.getElementById('messageInput').value;
document.getElementById('displayArea').innerText = message;
}
function toggleImage() {
var img = document.getElementById('toggleImage');
if (img.style.display === 'none') {
img.style.display = 'block';
} else {
img.style.display = 'none';
}
}
</script>
</head>
<body class="font-roboto bg-gray-100 text-gray-800">
<header class="bg-blue-600 text-white p-6 text-center">
<h1 class="text-3xl font-bold">
Dynamic Web Page with JavaScript Events
</h1>
</header>
<section class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-md mb-6">
<h2 class="text-2xl font-semibold mb-4">
Change Background Color
</h2>
<input class="w-full p-2 border border-gray-300 rounded-lg mb-4" id="colorPicker"
type="color"/>
<button class="bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700"
onclick="changeBackgroundColor()">
Change Color
</button>
</section>
<section class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-md mb-6">
<h2 class="text-2xl font-semibold mb-4">
Display Message
</h2>
<input class="w-full p-2 border border-gray-300 rounded-lg mb-4" id="messageInput"
placeholder="Type your message here" type="text"/>
<button class="bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700"
onclick="displayMessage()">
Display Message
</button>
<div class="mt-4 text-lg font-medium text-green-600" id="displayArea">
</div>
</section>
<section class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold mb-4">
Toggle Image </h2>
<button class="bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 mb-4"
onclick="toggleImage()">
Toggle Image </button>
<img alt="Placeholder image of 300x200 pixels" class="w-full h-auto border border-gray-
300 rounded-lg" id="toggleImage" src="https://placehold.co/300x200"/>
</section>
<footer class="bg-gray-800 text-white text-center p-6">
<p>
© 2023 Dynamic Web Page with JavaScript Events. All rights reserved.
</p>
</footer>
</body>
</html>
Program 13 : Introduction of JSP demo program
Code :
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>
JSP Demo Program
</title>
<script src="https://cdn.tailwindcss.com">
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
rel="stylesheet"/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap
" rel="stylesheet"/>
</head>
<body class="font-roboto bg-gray-100">
<header class="bg-blue-600 text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-2xl font-bold">
JSP Demo Program
</h1>
<nav>
<ul class="flex space-x-4">
<li>
<a class="hover:underline" href="#">
Home
</a>
</li>
<li>
<a class="hover:underline" href="#">
About
</a>
</li>
<li>
<a class="hover:underline" href="#">
Contact
</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="container mx-auto p-4">
<section class="bg-white p-6 rounded shadow-md">
<h2 class="text-xl font-bold mb-4">
Introduction to JSP
</h2>
<p class="mb-4">
JavaServer Pages (JSP) is a technology that helps software developers create dynamically
generated web pages based on HTML, XML, or other document types. Released in 1999 by
Sun Microsystems, JSP is similar to PHP and ASP, but it uses the Java programming
language.
</p>
<img alt="A detailed diagram showing the architecture of JSP, including client, server, and
database interactions" class="w-full mb-4 rounded" src="https://placehold.co/600x400"/>
<p class="mb-4">
JSP allows Java code and certain predefined actions to be embedded into static content.
The technology allows for the creation of dynamic, platform-independent method for
building Web-based applications.
</p>
</section>
<section class="bg-white p-6 rounded shadow-md mt-6">
<h2 class="text-xl font-bold mb-4">
Demo Program
</h2>
<pre class="bg-gray-200 p-4 rounded overflow-x-auto">
<code>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP Demo</title>
</head>
<body>
<h1>Hello, JSP!</h1>
<%
String message = "Welcome to JSP!";
out.println(message);
%>
</body>
</html>
</code>
</pre>
</section>
</main>
<footer class="bg-blue-600 text-white p-4 mt-6">
<div class="container mx-auto text-center">
<p>
© 2023 JSP Demo Program. All rights reserved.
</p>
</div>
</footer>
</body>
</html>
Program 14 : Introduction to JSP Life cycle
Code :
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>
JSP Life Cycle
</title>
<script src="https://cdn.tailwindcss.com">
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
rel="stylesheet"/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap
" rel="stylesheet"/>
</head>
<body class="font-roboto bg-gray-100">
<header class="bg-blue-600 text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-2xl font-bold">
JSP Life Cycle
</h1>
<nav>
<ul class="flex space-x-4">
<li>
<a class="hover:underline" href="#">
Home
</a>
</li>
<li>
<a class="hover:underline" href="#">
About
</a>
</li>
<li>
<a class="hover:underline" href="#">
Contact
</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="container mx-auto p-4">
<section class="bg-white p-6 rounded shadow-md">
<h2 class="text-xl font-bold mb-4">
Introduction to JSP Life Cycle
</h2>
<p class="mb-4">
The JSP life cycle defines the process from the creation of a JSP page to its destruction.
Understanding the JSP life cycle helps developers optimize the performance and manage
resources effectively.
</p>
<img alt="A detailed diagram showing the JSP life cycle stages: Translation, Compilation,
Initialization, Execution, and Cleanup" class="w-full mb-4 rounded"
src="https://placehold.co/600x400"/>
<p class="mb-4">
The life cycle of a JSP page can be divided into the following phases:
</p><ul class="list-disc list-inside mb-4">
<li>Translation: The JSP page is translated into a servlet by the JSP engine.
</li><li>Compilation: The generated servlet is compiled into bytecode.
</li><li>Initialization: The servlet instance is created and initialized.
</li>
<li>Execution: The servlet processes requests and generates responses.
</li>
<li>Cleanup: The servlet is destroyed and resources are released.
</li>
</ul>
</section>
<section class="bg-white p-6 rounded shadow-md mt-6">
<h2 class="text-xl font-bold mb-4">
Detailed Explanation of Each Phase
</h2>
<div class="mb-4">
<h3 class="text-lg font-semibold mb-2">
1. Translation
</h3>
<p>
During the translation phase, the JSP engine translates the JSP page into a servlet. This
involves parsing the JSP file and converting it into a Java servlet source file.
</p>
</div><div class="mb-4">
<h3 class="text-lg font-semibold mb-2">
2. Compilation</h3><p>
In the compilation phase, the generated servlet source file is compiled into bytecode,
which can be executed by the Java Virtual Machine (JVM).
</p></div>
<div class="mb-4">
<h3 class="text-lg font-semibold mb-2">
3. Initialization
</h3> <p>
During initialization, the servlet instance is created and initialized. The
<code>
jspInit()
</code>
method is called to perform any required initialization tasks.
</p></div><div class="mb-4">
<h3 class="text-lg font-semibold mb-2">
4. Execution </h3> <p>
In the execution phase, the servlet processes client requests and generates responses. The
<code>
_jspService()
</code>
method is called for each request.
</p>
</div>
<div class="mb-4">
<h3 class="text-lg font-semibold mb-2">
5. Cleanup
</h3>
<p>
During the cleanup phase, the servlet is destroyed and resources are released. The
<code>
jspDestroy()
</code>
method is called to perform any required cleanup tasks.
</p>
</div>
</section>
</main>
<footer class="bg-blue-600 text-white p-4 mt-6">
<div class="container mx-auto text-center"> <p>
© 2023 JSP Life Cycle. All rights reserved.
</p>
</div>
</footer></body></html>
Program 15
Develop JSP code to show the database access derived from c_polygon and they have area() to
calculate and return the area of rectangle and triangle respectively
Code :
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>
JSP Database Access Example
</title>
<script src="https://cdn.tailwindcss.com">
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
rel="stylesheet"/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap
" rel="stylesheet"/>
</head>
<body class="font-roboto bg-gray-100">
<header class="bg-blue-600 text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-2xl font-bold">
JSP Database Access Example
</h1>
<nav>
<ul class="flex space-x-4">
<li> <a class="hover:underline" href="#"> Home </a> </li>
<li> <a class="hover:underline" href="#"> About </a> </li>
<li> <a class="hover:underline" href="#"> Contact </a> </li>
</ul>
</nav>
</div>
</header>
<main class="container mx-auto p-4">
<section class="bg-white p-6 rounded shadow-md">
<h2 class="text-xl font-bold mb-4">
Database Access and Area Calculation
</h2>
<p class="mb-4">
This example demonstrates how to access a database and calculate the area of rectangles
and triangles using JSP.
</p>
<img alt="A detailed diagram showing the database access and area calculation process for
rectangles and triangles" class="w-full mb-4 rounded" src="https://placehold.co/600x400"/>
<p class="mb-4">
Below is the JSP code that connects to a database, retrieves data, and calculates the area of
rectangles and triangles.
</p>
<pre class="bg-gray-200 p-4 rounded overflow-x-auto">
<code>
<%@ page import="java.sql.*" %>
<%@ page import="java.util.*" %>
<%@ page import="java.io.*" %>
<%@ page import="javax.servlet.*" %>
<%@ page import="javax.servlet.http.*" %>
<html>
<head>
<title>Database Access and Area Calculation</title>
</head>
<body>
<h1>Database Access and Area Calculation</h1>
<%
// Database connection parameters
String url = "jdbc:mysql://localhost:3306/your_database";
String username = "your_username";
String password = "your_password";
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");
conn = DriverManager.getConnection(url, username, password);
stmt = conn.createStatement();
String sql = "SELECT * FROM c_polygon";
rs = stmt.executeQuery(sql);
while (rs.next()) {
String type = rs.getString("type");
double dimension1 = rs.getDouble("dimension1");
double dimension2 = rs.getDouble("dimension2");
double area = 0.0;
if ("rectangle".equalsIgnoreCase(type)) {
area = dimension1 * dimension2;
} else if ("triangle".equalsIgnoreCase(type)) {
area = 0.5 * dimension1 * dimension2;
}
out.println("<p>Type: " + type + "</p>");
out.println("<p>Dimension 1: " + dimension1 + "</p>");
out.println("<p>Dimension 2: " + dimension2 + "</p>");
out.println("<p>Area: " + area + "</p>");
out.println("<hr/>");
}
} catch (Exception e) {
e.printStackTrace();
} finally {
// Close the resources
try {
if (rs != null) rs.close();
if (stmt != null) stmt.close();
if (conn != null) conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
%>
</body>
</html>
</code>
</pre>
</section>
</main>
<footer class="bg-blue-600 text-white p-4 mt-6">
<div class="container mx-auto text-center">
<p>
© 2023 JSP Database Access Example. All rights reserved.
</p>
</div>
</footer>
</body>
</html>
Practical - 16
Write a PHP code using function to find the sum of two integers
Code
<?php
// Function to calculate the sum of two numbers
function findSum($num1, $num2) {
return $num1 + $num2;
}
// Example usage
$num1 = 15;
$num2 = 25;
$sum = findSum($num1, $num2);
// Display the result
echo "The sum of $num1 and $num2 is: $sum";
?>
Output
Practical – 17
Write a program to perform
(a) Perform from validation using PHP
(b) Write a PHP program to validate Name, Email and password
Code-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHP Form Validation</title>
<style>
.error { color: red; }
.success { color: green; }
</style>
</head>
<body>
<?php
// Initialize variables
$name = $email = $password = "";
$nameErr = $emailErr = $passwordErr = "";
$successMsg = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Name validation
if (empty($_POST["name"])) {
$nameErr = "Name is required.";
} else {
$name = htmlspecialchars($_POST["name"]);
if (!preg_match("/^[a-zA-Z-' ]*$/", $name)) {
$nameErr = "Only letters and spaces are allowed.";
}
}
// Email validation
if (empty($_POST["email"])) {
$emailErr = "Email is required.";
} else {
$email = htmlspecialchars($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format.";
}
}
// Password validation
if (empty($_POST["password"])) {
$passwordErr = "Password is required.";
} else {
$password = htmlspecialchars($_POST["password"]);
if (strlen($password) < 6) {
$passwordErr = "Password must be at least 6 characters long.";
}
}
if (empty($nameErr) && empty($emailErr) && empty($passwordErr)) {
$successMsg = "Form submitted successfully!";
}
}
?>
<h2>PHP Form Validation Example</h2>
<form method="post" action="">
Name: <input type="text" name="name" value="<?php echo $name; ?>">
<span class="error">* <?php echo $nameErr; ?></span><br><br>
Email: <input type="text" name="email" value="<?php echo $email; ?>">
<span class="error">* <?php echo $emailErr; ?></span><br><br>
Password: <input type="password" name="password">
<span class="error">* <?php echo $passwordErr; ?></span><br><br>
<input type="submit" value="Submit">
</form>
<?php
if ($successMsg) {
echo "<p class='success'>$successMsg</p>";
echo "<p><strong>Name:</strong> $name</p>";
echo "<p><strong>Email:</strong> $email</p>";
echo "<p><strong>Password:</strong> " . str_repeat("*", strlen($password)) . "</p>";
}
?>
</body>
</html>
Practical no – 18 : WAP for File Handling in PHP (a)Create a PHP program to
demonstrate opening and closing a file. (b) Create a PHP program to demonstrate
reading a file.
Code-
<?php
// File name to work with
$filename = "sample.txt";
// Step 1: Create or open the file and write some content into it
echo "Step 1: Writing to the file...\n";
$file = fopen($filename, "w"); // Open file for writing
if ($file) {
$content = "Hello, this is a sample text file!\nFile handling in PHP is fun!";
fwrite($file, $content); // Write content to the file
echo "Content written to the file successfully.\n";
fclose($file); // Close the file
echo "File closed after writing.\n\n";
} else {
echo "Error opening the file for writing.\n\n";
}
echo "Step 2: Reading from the file...\n";
$file = fopen($filename, "r"); // Open file for reading
if ($file) {
echo "File content:\n";
while (!feof($file)) {
$line = fgets($file); // Read line by line
echo $line; // Display the line
}
fclose($file); // Close the file after reading
echo "\nFile closed after reading.\n";
} else {
echo "Error opening the file for reading.\n";
}
// Step 3: Check if the file exists and delete it (optional cleanup)
if (file_exists($filename)) {
unlink($filename); // Delete the file
echo "\nTemporary file '$filename' has been deleted.";
} else {
echo "\nFile '$filename' does not exist.";
}
?>
Output-
Practical no – 19
Create an HTML form that has a number of text boxes. The user fills the textboxes with data.
Write a script that verifies that all textboxes have been filled. If a text box has been left empty
pop up an alert message indicating the box that has been left empty. When OK button is clicked,
set focus to that specific textbox. If all the textboxes are filled, display thank you.
Code-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title><script>
function validateForm() {
const inputs = document.querySelectorAll("input[type='text']");
let isValid = true;
for (let input of inputs) {
if (input.value.trim() === "") {
alert(`The "${input.name}" field is empty. Please fill it out.`);
input.focus(); // Set focus to the empty field
isValid = false;
return false; // Stop further execution
}
}
if (isValid) {
alert("Thank you for filling out the form!");
}
return isValid;
}
</script></head>
<body>
<h2>Form Validation Example</h2>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="Name"><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="Email"><br><br>
<label for="phone">Phone:</label>
<input type="text" id="phone" name="Phone"><br><br>
<label for="address">Address:</label>
<input type="text" id="address" name="Address"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output-
Practical no 20:
Create a program to verify whether email address provided by the user is valid or invalid.
Code-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Validation</title>
<script>
function validateEmail() {
const emailInput = document.getElementById("email").value.trim();
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (emailInput === "") {
alert("Email field cannot be empty.");
return false;
}
if (emailPattern.test(emailInput)) {
alert("Valid Email Address.");
} else {
alert("Invalid Email Address. Please provide a valid email.");
}
}
</script>
</head>
<body>
<h2>Email Validation Example</h2>
<form onsubmit="validateEmail(); return false;">
<label for="email">Email Address:</label>
<input type="text" id="email" name="email" placeholder="Enter your email">
<br><br>
<input type="submit" value="Validate Email">
</form>
</body>
</html>
Output-
You might also like
- Web T Ia-1 - Satyam Anand - 20scse1010341No ratings yetWeb T Ia-1 - Satyam Anand - 20scse10103419 pages
- 2015 - s2 - WD - Week 10 - Coding Day 18 Page Layout Part 2No ratings yet2015 - s2 - WD - Week 10 - Coding Day 18 Page Layout Part 224 pages
- Angular Shopping Store: From Scratch to Successful PaymentFrom EverandAngular Shopping Store: From Scratch to Successful PaymentNo ratings yet
- Chinhoyi University of Technology School Engineering Sciences and TechnologyNo ratings yetChinhoyi University of Technology School Engineering Sciences and Technology7 pages
- answer key EXAMINATION EMPOWERMENT 2nd quarterNo ratings yetanswer key EXAMINATION EMPOWERMENT 2nd quarter4 pages
- What Is Web Browser and How Does It WorksNo ratings yetWhat Is Web Browser and How Does It Works5 pages
- GitHub - Devinterview-Io - Asp-Net-Web-Api - ? ASP - Net Web API Coding Interview Questions and Answers For DevelopersNo ratings yetGitHub - Devinterview-Io - Asp-Net-Web-Api - ? ASP - Net Web API Coding Interview Questions and Answers For Developers17 pages
- CCVP BK 1DC51433 00 115-Cvp-Element-Specification-Guide Chapter 0101100No ratings yetCCVP BK 1DC51433 00 115-Cvp-Element-Specification-Guide Chapter 01011004 pages
- Ebook Google Tag Manager For Beginners With GA4No ratings yetEbook Google Tag Manager For Beginners With GA444 pages
