Scribd
Upload
20 views40 pages

HTML

Uploaded by

nautiyalshivani987
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
20 views40 pages

HTML

Uploaded by

nautiyalshivani987
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/ 40

Practical-1

Design a HTML page describing your profile in one paragraph. Design in such a way that it has
a heading, a horizontal rule, three links and your photo. Also, write three HTML documents for
the links. Include facilities for forward, backward and HOME.

Aim: Design a HTML page describing your profile in one paragraph. Design in such a way hat it has a heading,
a horizontal rule, three links and your photo. Also, write three HTML documents for the links. Include facilities
for forward, backward and HOME.

PROCEDURE:
The following tags are used.

TAG DESCRIPTION
<HTML> Defines an HTML document
<body> Defines the document’s body
<h1>to<h6> Defines header 1 to header6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment
<bgcolor> Defines the background color
<img src> It is used to add images in the web page
<href> It is used to make link with other web page
<title> Defines the document’s title

PROGRAM:
Profile.html

<html>
<head></head>
<title>1st_practical</title>

<body align="centre">

<img src="abc.png" /><br>


<p text="white">

Name : Anshika Saklani <br>


Address: Srinagar 246174<br> Phone No : *******509 <br>
Nationality : Indian<br>
Date of Birth : 6 / 5/ 2004 <br>
</p>
<a href="a_link.html"> &nbsp First &nbsp2</a><br>
<a href="b_link.html">Second &nbsp</a><br>
<a href="c_link.html">Third &nbsp</a><br>
</html>

1. a_link.html
<html>
<title>1st_practical</title>
<head>First link</head><br>
<body>
<a href="profile.html">Home</a><br>
<a href="b_link.html">Forward</a><br>
</body>
</html>

2. b_link.html

<html>
<title>1st_practical</title>
<head>Second link</head>
<body>
<br>
<a href="profile.html ">Home</a><br>
<a href="c_link.html">Forward</a><br>
<a href="a_link.html">Backward</a><br>
</body>
</html>

3. c_link.html

<html>
<title>1st_practical</title>
<head>Third link</head><br>
<body>
<a href="profile.html ">Backward</a><br>
<a href="1_practical.html">Home</a><br>
</body>
</html>
Practical-2
Design a HTML page about computer languages. List the language. Each Language’s name is
a link. Prepare separate HTML documents for each language and call them in the appropriate
link.

AIM: Design a HTML page about computer languages. List the languages. Each languages name is
link. Prepare separate HTML documents for each language and call them in the appropriate link.

PROCEDURE:
The following tags are used
<HTML> Defines an HTML document
<body> Defines the document’s body
<h1>to<h6> Defines header 1 to header6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment
<bgcolor> Defines the background color
<img src> It is used to add images in the web page
<href> It is used to make link with other web page
<title> Defines the document’s title

Program:

Second.html
<html>
<head>
Language
</head>
<body>
<br>

<a href="friend1.html">Java</a><br>
<a href="friend2.html">C</a><br>
<a href="friend3.html">C++</a><br>

</body>
</html>
Friend1.html

<html>
<head></head>
<body>
<p>Java is a object oriented language</p>
<br>
<a href="second.html">Home</a><br>
</body>
</html>

Friend2.html

<html>
<head></head>
8

<body>
<p>C is a object oriented language</p>
<br>
<a href="second.html">Home</a><br>
</body>
</html>
Friend3.html

<html>
<head></head>
<body>
<p>C++ is a procedure as well as object oriented</p>
<br>
<a href="second.html">Home</a><br>
</body>
</html>
Practical-3
Design a single page website for your polytechnic containing a description of the
courses offered. It should also contain some general information about the college
such as its history, the campus, its unique features and so on. The site should be
colored and each section should have a different color.
AIM:

Design a single page website for your polytechnic containing a description of the courses offered.
It should also contain some general information about the college such as its history, the campus,
and its unique features and so on. The site should be colored and each section should have a
different color.

PROCEDURE:
The following tags are used.

TAG DESCRIPTION
<HTML> Defines an HTML document
<body> Defines the document’s body
<h1>to<h6> Defines header 1 to header6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment
<bgcolor> Defines the background color
<img src> It is used to add images in the web page
<href> It is used to make link with other web page
<li> It is used to list the item
<ol> It is used to list the item with number as index
<ul> It is used to list the item with bullets as index
<title> Defines the document’s title

PROGRAM:
<html>
<h1 align="CENTER">GOVERMENT POLYTECHNIC COLLEGE</h1>
</a>

h1 {

font-family: arial, sans; font-size=17;


color: black
}
h2 {
font-family: arial, sans; font-size=17;
color: blue
}

a {

}
</style>

font-family: times new roman; font-size=30;


color: red

<body bgcolor="pink" text="yellow">


<div align="center">
<img src="download.jpg" />
</div>
<h2><br>
<font color="brown">
<center><u>GOVERNMENT POLYTECHNIC SRINAGAR GARHWAL</u></center>
<p align="justify">Government Polytechnic Srinagar Garhwal is established in
1968 and affiliated to Uttrakhand Board of Technical Education, Roorkee under the
Directorate of Uttrakhand Technical Education Srinagar Garhwal. It is an Institute
with total commitment to quality and excellence in academic pursuits, is among one of
leading institute in north India.

Srinagar is located at 30.22°N 78.78°E at the left bank of river


Alaknanda. It has an average elevation of 560 meters (1,837 feet). It is the widest
valley in the Garhwal hills.
Industrialist and former Sheriff of Madras, who were the founders of The India
Cements Ltd.. <br>
</font>
<center><img
src="https://www.gpsrinagar.org/img/gps.jpg"width="500px"></center>
<hr>
<p>Courses Offered</p>
<ul type="DISC"> 10
<li>CIVIL</li>
<li>EEE</li>
<li>CSE</li>
<li>MECH</li>
<li>ECE</li>
<li>IT</li>
</ul>
</h2>
<br>
<h2>
<font color="sky blue">
<center><u>CAMPUS</u></center>
We have Library, Computer Center, Hostel, Canteen and Student service Center
inside the college.<br>

</font>
<hr>
<font color="Green">
</font>
</h2>
</body>

</html>
Practical-4
Develop a web page using CSS to create a time table for the class using different border style.
AIM:

Write a program using CSS to create a time table for the class.
PROCEDURE:
1. Open a new file.
2. Write the basic HTML tags.
3. <style> used to change the font-type, size and color of the page.
4. <table> used to create table.
The following tags are present inside the table tags
i) <TR> used to create horizontal rows of cells.
ii) <TH> used to define the heading of cells in the table.
iii) <TD> used to define the data of each cells in the table.
5. Close the all tags.
PROGRAM: TIME TABLE USING CSS
<html>
<head>
<title>Time Table</title>
<style type="text/css"> h1 {
font-family: arial, helvita; font-size: 16pt;
color: red;
}

body {
font-family: times, serif; font-size: 20pt;
color: white; background: blue;
}

h2 {
font-family: monospace, sans-serif; font-size: 18pt;
color: red;
}
</style>
</head>

<body>
<table border="5" align="center">
<tr>

<td>
<h2>Hour/Days</h2>
</td>
<td>
<h2>Monday</h2>
</td>
<td>
<h2>Tuesday</h2>
</td>
<td>
<h2>Wednesday</h2>
</td>
<td>
<h2>Thursday</h2>
</td>
<td>
<h2>Friday</h2>
</td>
<td>
<h2>Saturday</h2>
</td>

</tr>
<tr>
<td>
<h2>10A.M-10.50A.M</h2>
</td>
<h1>
<td>RDBMS</td>
<td>CSO</td>
<td>RDBMS</td>
<td>OOC/td>
<td>OOC LAB</td>
<td>DS/td>

</h1>
</tr>
<tr>
<td>
<h2>10.50A.M-11.40A.M</h2>
</td>
<h1>
</tr>
<tr>
<td>

<h1>
<td>IWT</td>
<td>RDBMS LAB</td>
<td>IWT</td>
<td>IWT</td>
<td>OOC LAB</td>
<td>IWT</td>
</h1>

<tr>
<td>
<h2>11.40A.M-12.30P.M</h2>
</td>
<h1>
<h1>
<td>CSO</td>
<td>CNS</td>
<td>CNS</td>
<td>DS</td>
<td>CNS</td>
<td>OOC</td>
</h1>

<tr>
<td>
<h2>12.30P.M-1.20P.M</h2>

</td>
<h1>
</tr>
<tr>
<td>

<h1>
<td>CSO</td>
<td>CNS</td>
<td>DS</td>
<td>RDBMS</td>
<td>RDBMS</td>
<td>OOC</td>
</h1>

<h2>4.20P.M-5.10P.M</h2>

</td>
<h1>
<td>G.P</td>
<td>G.P</td>
<td>DS</td>
<td>RDBMS LAB</td>
<td>RDBMS LAB</td>
<td>DS</td>
</h1>
</tr>
<var></var>
</table>
</body>

</body>
</html>
PRACTICAL-5
a) Write a Java script code that converts the entered text to uppercase
<!DOCTYPE html>
<html>
<head>
<title>lowerCase To upperCase</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f3f3f3;
padding: 20px;
}

h1 {
color: #333;
}

span {
font-weight: bold;
margin-bottom: 10px;
display: block;
}

input[type="text"] {
border: 1px solid #ccc;
border-radius: 8px;
height: 30px;
padding: 5px;
font-size: 16px;
width: 200px;
background-color: #fff;
transition: border-color 0.3s ease;
}

input[type="text"]:focus {
border-color: #8a2be2;
}

button {
padding: 10px 20px;
background-color: #8a2be2;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #9c4ae6;
}

.output-container {
margin-top: 20px;
padding: 10px;
border-radius: 4px;
font-size: 16px;
color: #333;
}

.input-output {
background-color: #fff;
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 10px;
}

.output {
background-color: #f8f8f8;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h1>lowerCase To upperCase</h1>
<span>Enter Text:</span>
<input id="info" type="text" />
<button onclick="convertUppercase()">Submit</button>
<div class="output-container">
<div class="input-output">
<strong>Input:</strong>
<span id="input-output"></span>
</div>
<div class="output">
<strong>Output:</strong>
<span id="output"></span>
</div>
</div>
<script>
function convertUppercase() {
let input = document.getElementById("info").value;
let upperCase = input.toUpperCase();
let inputOutputElement = document.getElementById("input-output");
inputOutputElement.textContent = input;
let outputElement = document.getElementById("output");
outputElement.textContent = upperCase;
}
</script>
</body>
</html>

Output:
b) Write a Java script code to validate the username and password. The
username and password are stored in variables.
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 100%;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
label {
display: block;
margin-bottom: 10px;
color: #555;
font-weight: bold;
}

input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 20px;
}
input[type="button"] {
width: 100%;
padding: 10px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
input[type="button"]:hover {
background-color: #45a049;
}
.message {
text-align: center;
margin-top: 20px;
font-weight: bold;
}
.message.success {
color: #4caf50;
}
.message.error {
color: #f44336;
}
</style>
<script>
let username = "myusername";
let password = "mypassword";
function validateCredentials() {
let inputUsername = document.getElementById("username").value;
let inputPassword = document.getElementById("password").value;
if (inputUsername === username && inputPassword === password) {
displayMessage("Login successful", "success");
} else {
displayMessage("Invalid username or password", "error");
}
}
function displayMessage(message, type) {
let messageElement = document.getElementById("message");
messageElement.innerText = message;
messageElement.classList.add(type);
}
</script>
</head>
<body>
<div class="container">
<h1>Login Page</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="button" value="Submit" onclick="validateCredentials()">
<p id="message" class="message"></p>
</form>
</div>
</body>
</html>
Output
PRACTICAL-6
Write a Java Script code using frames and Events (When a cursor moves over an
object it should display the specification of the object in another frame )
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Object Specifications</title>
<script>
function displaySpecifications(specs) {
var specsFrame = parent.frames['specs_frame'];
if (specsFrame) {
specsFrame.document.getElementById('specs_content').innerHTML = specs;
}
}
</script>
</head>
<frameset cols="50%,50%">
<frame src="objects.html" name="objects_frame">
<frame src="specs.html" name="specs_frame">
</frameset>
<noframes></noframes>
</html>

Objects.html
<!DOCTYPE html>
<html>
<head>
<title>Objects</title>
<style>
body {
background-color: rgb(199, 202, 199);
font-family: Arial, sans-serif;
}
h2 {
color: #333;
}
.object {
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
background-color: #80be1c;
margin-bottom: 10px;
color: #010105;
}
.object:hover {
background-color: #ddd;
}
</style>
<script>
function showSpecifications(specs) {
parent.displaySpecifications(specs);
}
</script>
</head>
<body>
<h2>Objects</h2>
<div class="object" onmouseover="showSpecifications('Object 1 specifications.')">Object 1</div>
<div class="object" onmouseover="showSpecifications('Object 2 specifications.')">Object 2</div>
<div class="object" onmouseover="showSpecifications('Object 3 specifications.')">Object 3</div>
</body>
</html>

specs.html
<!DOCTYPE html>
<html>
<head>
<title>Specifications</title>
<style>
body {
background-color: rgb(199, 202, 199);
font-family: Arial, sans-serif;
}
h2 {
color: #0e8b85;
}
#specs_content {
padding: 10px;
border: 1px solid #ccc;
background-color: #17739e;
color: #e9e3e3;
}
</style>
</head>
<body>
<h2>Specifications</h2>
<div id="specs_content"></div>
</body>
</html>

Output
PRACTICAL-7
Create a site containing banner advertisement at the top of the page. The ads are
changed every 10 or 15 seconds.
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Rotating Banner Ads</title>
<style>
#banner {
height: 200px;
width: 100%;
background-color: #f2f2f2;
display: flex;
align-items: center;
justify-content: center;
}
#banner img {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div id="banner">
<img id="adImage" src="" alt="Banner Ad">
</div>
<script>
// Array of banner ad images
var adImages = [
"lg.jpg",
"samsung.jpg",
"panasonic.jpg"
];

// Index of the current ad image


var currentAdIndex = 0;

// Function to change the banner ad image


function changeAdImage() {
var adImage = document.getElementById("adImage");
adImage.src = adImages[currentAdIndex];

// Increment the index for the next ad image


currentAdIndex++;
if (currentAdIndex >= adImages.length) {
currentAdIndex = 0; // Start from the first ad image
}
}
// Initial call to changeAdImage
changeAdImage();

// Set interval to change the ad image every 10 seconds (10000 milliseconds)


setInterval(changeAdImage, 10000);
</script>
</body>
</html>

Output:
1st ad

2nd ad

Third ad
PRACTICAL 8
Write Jquery Program for Count the number of milliseconds between the two
click events on a paragraph.
<!DOCTYPE html>
<html>
<head>
<title>Click Event Timer</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
background-color: #f1f1f1;
font-family: Arial, sans-serif;
}
p{
padding: 10px;
background-color: #3498db;
color: #fff;
font-size: 18px;
cursor: pointer;
text-align: center;
}
</style>
<script>
$(document).ready(function () {
var startTime; // Variable to store the start time
$("p").click(function () {
if (!startTime) {
// First click event
startTime = new Date().getTime(); // Get the current time
} else {
// Second click event
var endTime = new Date().getTime(); // Get the current time
var timeDiff = endTime - startTime; // Calculate the time difference in milliseconds
alert("Time between clicks: " + timeDiff + " milliseconds");
// Reset the start time for the next click event
startTime = null;
}
});
});
</script>
</head>
<body>
<p>Click here</p>
</body>
</html>
Output

After clicking on Click here, it will show a popup like this


PRACTICAL 9
Write query Program for Fade in and fade out all division elements.
<!DOCTYPE html>
<html>
<head>
<title>Fade In/Out Div Elements</title>
<script src="https://code.jquery.com/query-3.6.0.min.js"></script>
<style>
div {
background-color: #e74c3c;
color: #fff;
padding: 10px;
margin-bottom: 10px;
transition: background-color 0.3s ease;
}
div:hover {
background-color: #3498db;
}
</style>
<script>
$(document).ready(function() {
// Function to fade in all div elements
function fadeInDivs() {
$("div").fadeIn("slow");
}
// Function to fade out all div elements
function fadeOutDivs() {
$("div").fadeOut("slow");
}
// Initial fade in of div elements
fadeInDivs();
// Set interval to fade out and fade in div elements every 3 seconds
setInterval(function() {
fadeOutDivs();
setTimeout(fadeInDivs, 1000);
}, 3000);
});
</script>
</head>
<body>
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
</body>
</html>
Practical-10
Write query Program for Disable/enable the form submit button&Blink the
text.
<!DOCTYPE html>
<html><head>
<title>Disable/Enable Form Submit Button & Blink Text</title>
<style>
.blink {
animation: blink-animation 1s infinite;
}
@keyframes blink-animation {
0% {
opacity: 1;
color: red;
}
50% {
opacity: 0;
color: blue;
}
100% {
opacity: 1;
color: green;
}
}
#myForm {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 100px;
}
#myForm input[type="text"] {
width: 300px;
height: 30px;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
#myForm button[type="submit"] {
width: 150px;
height: 40px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
#blinkText {
display: none;
}
</style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script>
$(document).ready(function () {
// Select the form and submit button
var form = $('#myForm');
var submitButton = form.find(':submit');
var blinkText = $('#blinkText');
// Disable the submit button initially
submitButton.prop('disabled', true);
// Function to toggle the submit button and blink the text
function toggleSubmitButton() {
// Enable/disable the submit button
submitButton.prop('disabled', !submitButton.prop('disabled'));
// Toggle the blink class on the text element
blinkText.toggleClass('blink');
}
// Event handler for form input
form.on('input', function () {
// Enable the submit button if there is input in the form
if (form.find('input').val().trim() !== '') {
submitButton.prop('disabled', false);
} else {
submitButton.prop('disabled', true);
}
});
// Event handler for form submission
form.on('submit', function (e) {
e.preventDefault(); // Prevent form submission
toggleSubmitButton(); // Toggle the submit button and blink the text
blinkText.show(); // Show the blinking text
setTimeout(function () {
toggleSubmitButton(); // Toggle back after 3 seconds
blinkText.hide(); // Hide the blinking text
}, 3000);
});
});
</script>
</head>
<body>
<form id="myForm">
<input type="text" placeholder="Enter your text" required>
<button type="submit">Submit</button>
</form> <p id="blinkText" class="blink">Submitting...</p>
</body>
</html>
Output
Practical-11
Write a JSP code to manipulate cookies.
Cookieform.jsp
<%@ page contentType="text/html;charset=iso-8859-1" language="java" import="java.sql.*"
errorPage=""%>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//En""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title> Untitled Document</title>
</head>
<body>
<form method="post"action="Setcookie.jsp">
<p><b>Enter Your Name: </b><input type="text" name="username"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Setcookie.jsp
<%@page language="java"import="java.util.*"%>
<%
String username=request.getParameter("username");
if(username==null)username="";
Date now = new Date();
String timestamp = now.toString();
Cookie cookie =new Cookie ("username",username);
cookie.setMaxAge(365*24*60*60);
response.addCookie(cookie);
%>
<html>
<head>
<title>Cookie Saved</title>
</head>
<body>
<p><a href="showcookievalue.jsp">Next page to view the cookie value</a></p>
</body>
</html>

showcookievalue.jsp
<%@ page language="java"%>
<%
String cookieName="username"; Cookie
cookies[]=request.getCookies(); Cookie
myCookie=null; if(cookies!=null)
{
for(int i=0;i<cookies.length;i++)
{
if(cookies[i].getName().equals(cookieName))
{
myCookie=cookies[i];
break;
}
}
}
%>
<html>
<head> <title> Show saved cookie</title> </head>
<body>
<%
if(myCookie==null)
{
%>
No Cookie found with the name<%=cookieName%>
<%
}
else
{
%>
<p>welcome:<%=myCookie.getValue()%>
<%
}
%>
</body>
</html>
OUTPUT

Address @/ http://localhost:8080/w/showcookievalue. jsp Go Links ””


Practical-12
Collect the definitions of 5 items in Open Source. These definitions are stored in
two string arrays name[] and defn[]. Write a JSP which has these two arrays and
supplies the definition on request. Write a HTML document which gets the user
input of the name of the item and sends the request to the JSP.
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Open Source Definitions</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 100%;
}

h2 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
label {
display: block;
margin-bottom: 10px;
color: #555;
font-weight: bold;
}
input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 20px;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
background-color: #45a049;
}
p.definition {
color: #333;
font-weight: bold;
text-align: center;
}
p.error {
color: #f44336;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2>Get Definition</h2>
<form action="definitions.jsp" method="get">
<label for="itemName">Enter item name:</label>
<input type="text" id="itemName" name="name" required>
<button type="submit">Get Definition</button>
</form>
</div>
</body>
</html>
Definitions.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>Definitions</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 100%;
}
h2 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
label {
display: block;
margin-bottom: 10px;
color: #555;
font-weight: bold;
}
input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 20px;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
background-color: #45a049;
}
p.definition {
color: #333;
font-weight: bold;
text-align: center;
}
p.error {
color: #f44336;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2>Get Definition</h2>
<form action="definitions.jsp" method="get">
<label for="itemName">Enter item name:</label>
<input type="text" id="itemName" name="name" required>
<button type="submit">Get Definition</button>
</form>
<%-- Define the string arrays --%>
<%!
String[] names = {
"Item 1",
"Item 2",
"Item 3",
"Item 4",
"Item 5"
};
String[] definitions = {
"Definition 1", "Definition 2","Definition 3","Definition 4", "Definition 5"
};
%>
<%-- Get the requested name parameter --%>
<% String requestedName = request.getParameter("name"); %>
<%-- Loop through the names array to find a match --%>
<% boolean found = false;
for (int i = 0; i < names.length; i++) {
if (names[i].equalsIgnoreCase(requestedName)) {
// Match found, display the definition
%>
<p class="definition"><%= definitions[i] %></p>
<% found = true;
break;
}
}
if (!found && requestedName != null && !requestedName.isEmpty()) {
// No match found, display an error message
%>
<p class="error">No definition found for "<%= requestedName %>".</p>
<% } %>
</div>
</body>
</html>

Output
PRACTICAL-13
Write a JSP code to upload data from client side.
Index.html
<!DOCTYPE html>
<html>
<head>
<title>File Upload</title>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
text-align: center;
}
h2 {
color: #333;
margin-top: 30px;
}
form {
margin-top: 20px;
}
input[type="file"] {
padding: 10px;
border: none;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
button[type="submit"] {
padding: 10px 20px;
border: none;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<h2>File Upload</h2>
<form action="upload.jsp" method="post" enctype="multipart/form-data">
<input type="file" name="file" required>
<br>
<button type="submit">Upload</button>
</form>
</body>
</html>

Upload.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ page import="java.io.*, javax.servlet.*, javax.servlet.http.*" %>
<%@ page import="org.apache.commons.io.IOUtils" %>
<%
// Specify the directory where uploaded files will be stored
String uploadDir = "C:/uploads"; // Update this with your desired directory
// Create the upload directory if it doesn't exist
File dir = new File(uploadDir);
if (!dir.exists()) {
dir.mkdirs();
}
// Process the file upload
Part filePart = request.getPart("file");
String fileName = getFileName(filePart);
InputStream fileContent = filePart.getInputStream();

// Save the uploaded file to the server


FileOutputStream outputStream = new FileOutputStream(new File(uploadDir, fileName));
IOUtils.copy(fileContent, outputStream);
outputStream.close();
fileContent.close();
%>
<!DOCTYPE html>
<html>
<head>
<title>Upload Complete</title>
</head>
<body>
<h2>Upload Complete</h2>
<p>The file has been uploaded successfully.</p>
</body>
</html>
<%
// Function to extract the filename from the Part object
private String getFileName(Part part) {
String contentDisposition = part.getHeader("content-disposition");
String[] parts = contentDisposition.split(";");
for (String partValue : parts) {
if (partValue.trim().startsWith("filename")) {
return partValue.substring(partValue.indexOf('=') + 1).trim().replace("\"", "");
}
}
return null;
}
%>

Output
PRACTICAL-14
Write a program to check how many users have visited a website. Use
Application object.
appobj.jsp
<html>
<head>
<title>Using the Application Object</title>
</head>
<body>
<h1>Using the Application Object</h1>
<%Integer counter=(Integer)session.getAttribute("counter"); String heading=null;
if(counter==null)
{
counter=new Integer(1);
}
else
{
counter=new Integer(counter.intValue()+1);
}
session.setAttribute("counter",counter);Integer
applicationCounter=(Integer)application.getAttribute("applicationCounter"); if(applicationCounter==null)
{
applicationCounter=new Integer(1);
}
else
{
applicationCounter=new Integer(applicationCounter.intValue()+1);
}
application.setAttribute("applicationCounter",applicationCounter);
%>
You have visited this page<%=counter%>times.
<br>
This page has been visited by all users<%=applicationCounter%>times.
</body>
</html>
Output
PRACTICAL-15
Write a Code in Java Script to count number of times you move over a link or
record.
<!DOCTYPE html>
<html>
<head>
<title>Practical 15</title>
<style>
#hoverCounter {
background-color: rgb(248, 248, 224);
display: flex;
align-items: center;
font-family: Arial, sans-serif;
font-size: 18px;
}
#myLink {
margin-right: 10px;
color: blue;
text-decoration: underline;
cursor: pointer;
font-family: Comic Sans MS;
}
#countDisplay {
background-color: #f2f2f2;
padding: 5px 10px;
border-radius: 4px;
}
</style>
</head>

<body>
<div id="hoverCounter">
<pre style="color:green; font-size: xx-large; font-family:Comic Sans MS">Click here and see the magic
</pre></br>
<a id="myLink" href="#">Link</a>
<span id="countDisplay">0</span>
</div>

<script>
// Get the link and count display element
const link = document.getElementById('myLink');
const countDisplay = document.getElementById('countDisplay');

// Initialize the counter variable


let counter = 0;

// Add an event listener for 'mouseover' event


link.addEventListener('mouseover', () => {
counter++; // Increment the counter when the link is hovered over
countDisplay.textContent = counter; // Update the count display
});
// CSS class for animating the count display
const animationClass = 'pulse';

// Add an event listener for 'animationend' event to remove the animation class
countDisplay.addEventListener('animationend', () => {
countDisplay.classList.remove(animationClass);
});

// Add an event listener for 'click' event to animate the count display
countDisplay.addEventListener('click', () => {
countDisplay.classList.add(animationClass);
});

</script>
</body>
</html>

Output

You might also like