Web Technology Practical File: ETCS-356

ETCS-356
WEB TECHNOLOGY
PRACTICAL FILE
SUBMITTED TO : SUBMITTED BY :
Ms. Deepti Jain Tuhin Kalia
CSE : B ( Third Year )
07720802718
INDEX
S.NO. Title of Lab Experiments
a) Create your resume using HTML

b) Create a webpage in HTML describing your department
using paragraph and list tags
c) Create links on the words Wi-Fi and LAN to link them
to Wikipedia pages
d) Insert an image and create a link on image that takes
user to other page
1. e) Change the background colour of the page. At the

bottom create a link to take user at the top of the page
f) Create a table to show class time table
g) Use tables to provide layout to your HTML page
describing your university infrastructure
h) Use frames such that page is divided into 3 frames –
20% on left to show contents of pages, 60% in centre to
show body of page and remaining on right to show
remarks
a) Apply in-line CSS to change colours of certain text
portion, bold, underlined and italics certain words in your
HTML web page. Also change background colour of each
2. paragraph using in-line CSS
b) Create a simple form to submit user input like his name,
age, address and favourite subject, movie and singer
c) Write HTML code to add form elements such as radio
buttons, checkboxes and password field. Also add submit
button at last
d) Write all the above styling in a different file(.css) and
link it to your webpage such that changes made in .css file
are immediately reflected on the webpage. Group
paragraphs into single class and add styling information to
the class in CSS
a) Write a program to check whether the given string is
palindrome or not
b) Write a program to display the alert box after 5 seconds
3.
when the button is clicked
c) Create a simple form in HTML. Put validation on
values entered by the user
a) Write a program to send data from one form to another
4. b) Write a simple JSP for displaying date and time. Embed

this JSP in HTML page
c) Write a program to open internet using JSP
Experiment – 1
a) Aim:- Create your resume using HTML
<HTML style="background-color:Beige;">
<HEAD>
<TITLE>Resume</TITLE>
</HEAD>
<BODY>
<H1>Tuhin Kalia</H1>
<TABLE WIDTH=”100%”>
<TF><TD ALIGN=”left”>25/48,West Patel Nagar</TD>
<TD ALIGN=”right”>Residence 9784510234</TD></TR>
<TF><TD ALIGN=”left”>New Delhi, 110008</TD>
<TD ALIGN=”right”>Signal 7841815012</TD></TR>
</TD></TR>
<TD ALIGN=”right”>Email: tkalia@mail.com</TD></TR>
<H2>Objective</H2>
<TABLE><TR><TD> </TD>
<TD>Database Administrator.</TD></TR></TABLE>
<H2>Experience</H2>
<H3>March 2023 to Present</H3>
<TD>Microsoft SQL Database Administrator <BR>
Noida, Uttar Pradesh<UL>

<LI>Work with the development team to resolve bug-fixes and
assist in relevant testing through various environments</LI>
<LI>Monitor SQL server and database performance and proactively
address potential performance issues</LI>
<LI>Review, design, and develop data models in conjunction with
application development teams</LI>
<LI>Provide solutions for database issues including capacity,
redundancy, replication, and performance</LI>
<LI>Conduct performance reviews and contribute to performance
feedback for all levels of staff</LI></UL></TD></TR></TABLE>
<H3>August 2022 to January 2023</H3>
<TD>SQL Database Intern<BR>
Sector-30, Gurugram, Harayana<UL>

<LI>Identifying performance improvements to database procedures
and data structures and working with Development teams to deliver
code changes</LI>
<LI>Work with application development staff to develop database
architectures, coding standards, and quality assurance policies and
procedures</LI>
<LI>Demonstrated experience installing, configuring, and
upgrading MS SQL servers</LI>
</UL></TD></TR></TABLE>
<H2>Education</H2>
<TD>Bachelor of Technology in Computer Science — July 2022
<BR>GGSIP University<BR>
GPA: 8.9/10.0</TD></TR></TABLE>
</HTML>
b) Aim:- Create a webpage in HTML describing your department using
paragraph and list tags
<html>
<title>CSE Department(BPIT)</title>
<body style="background-color:Chartreuse;">
<style>
p.a{
word-spacing:10px;:
}
</style>
<center>
<h2 style="color:Crimson;">Engineering</h2>
<h2>COMPUTER SCIENCE</h2>
</center>
<p class="a" style="text-align:left; font-size:20px;">The
Department of Computer Science &
Engineering is NBA Accredited. The department has a full-fledged
team of proficient
faculties to promote a highly engaging learning experience,
ensuring quality education
in the field of Technology. To cater to this need, the department is
committed to
inculcate technical, managerial and social skills within the students,
providing the
required industrial experience and investing in the overall
personality development of
a student. The department ensures that in addition to the course
curriculum, the
student is also capable to implement his or her learning on practical
grounds. This is
reflected with the department’s association in being a Remote
Learning Center with
IIT Bombay, IIT Kharagpur & IIT Delhi. A new relationship is also
emerged as the first
Free Open Source Software (FOSS) cell at BPIT in Delhi in
collaboration with
International Centre For Free and Open Source Software (ICFOSS),
Thiruvanthampuram,
Govt. of Kerala, India. The department is also pivotal to help
Students Bridge the gap
between academics and the industrial world.In addition to the
above utilities, the
department guides the students to develop a research-based mind
set and motivates
them to pursue their research and higher studies. We also help the
students to publish
their works on various national/international platforms. Multiple
societies have been
set up within the college premises to meet these requirements.
Moreover, the
department feels immense pleasure to announce a noteworthy
growth in the number
of students getting placed in reputed organizations post completion
of their degree.
The placement record of the college has hence improved
substantially. So, we as a team
resolve to take the department to heights of success and glory and
prepare for the
impending challenges.
<br>
<br>
<dl style="font-size:20px;">
<dt>Vision</dt>
<dd>- To emerge as a centre of excellence, in the field of
Computer Science and
Engineering, by grooming our pupils with strong conceptual and
technical knowledge to enable them as sound professionals.</dd>
<dt>Mission</dt>
<dd>- To inculcate self-motivation among the students, who can
find and understand
the insight of the need of the day.</dd>
<dd>- To produce best quality professionals with strong
conceptual knowledge,
producing qualitative research and hands-on
experience.</dd>
<dd>- To enable the students to be technically competent among
their peers and
serve as ethical software professionals.</dd>
<dd>- To facilitate industry interaction exposure for the benefit of
stakeholder.</dd>
<dd>- To motivate faculties to follow innovative teaching-learning
practices &
continuously groom themselves with upcoming
technologies.</dd>
</dl>
<br>
<br>
</p>
<img src="library.jpg" style="width:400px ; height:300px ;
border=0; vertical-align:right;">
<br>
<br>
<a href="#top">Click to go to the top</a>
</body>
</html>
c) Aim:- Create links on the words Wi-Fi and LAN to link them to
Wikipedia pages
<html style="background-color:MediumSeaGreen;">
<h1 style='text-align:center;'>Wi-Fi to Wiki !</h1>
<body>
<p style='text-align:center;'>Click following link for
<a href = "https://en.wikipedia.org/wiki/Wi-Fi" >Wi-Fi</a>
</p>
<br>
<br>
<br>
<h1 style='text-align:center;'>LAN to Wiki!</h1>
<p style='text-align:center;'>Click following link for
<a href = "https://en.wikipedia.org/wiki/LAN" >LAN</a>
</p>
</body>
</html>
d) Aim:- Insert an image and create a link on image that takes user to
other page
<!DOCTYPE html>
<html style="background-color:DodgerBlue;">
<body>
<center>
<h1>Welcome to my Site</h1>
<h2>Owner-Tuhin Kalia</h2>
<a href="http://www.bpitindia.com">
<img src="spiderman.jpg" alt="clickableimage" style="width:300px
; height:300px ; border=0;">
</a>
<center>
</body>
</html>
e) Aim:- Change the background colour of the page. At the bottom
create a link to take user at the top of the page
<html>
<body style="background-color:Orange;">
<style>
p.a{
word-spacing:10px;:
}
</style>
<center>
<h2 >Reasons why good Software Engineers Quit</h2>
<img src="index.jpg" style="width:300px ; height:300px ;
border=0;">
<p class="a" style="text-align:center;">In terms of software
engineers, who themselves not feel
continuously challenged or aren’t given the resources to grow their
skill set are
more likely to look for some other option where they can grow. Of
Course! Challenge
and growth have individual definitions and they vary in some
conditions, but what we
see as a good solution is to consistently brushing up and
encouraging an honest and
open environment so that engineers could feel comfortable speaking
about their
career growth and meeting challenges.
<br><br><br>
Engineers thrive on teams that foster open mentalities on the use of
new technologies.
Sometimes poor long-standing technology stacks is the most
significant and quickest
way to lose talent. Engineers are not necessarily chasing companies
that use the
newest technologies, but they are looking to leave companies that
have closed
mindsets.
<br>
<br>
<br>
And usually it is very surprising that how engineers are being hired
for a certain
position and end up spending the first few months doing a
completely different job
from their current role. If they are going to be developing HTML
templates for the first
3 months, say that. Don’t hide it. Many times, as human beings, we
wait until it’s too
late to talk about being unhappy with our job. Instead what
engineers decide to do is
jump ship and finds something new where they can ditch the
unwanted parts of their
current role.<br>
One of the most important reasons why software engineers leave
their companies is
due to management. It seems they don’t find themselves with a
good and supporting
team or management. Sometimes, management keeps on shuffling
in upper-level
management that trickles down to operational changes on a
technical team. And with
this the most common pain points engineers talk about are added
responsibilities and
unrealistic new expectations that kills the current flow,
disorganization of priorities,
or lack of new/continued mentorship.
<br><br><br>
Being a recruiter, you have also been encountered a job seeker that
is more likely to
driven to a higher salary than what they currently have. So what
you need to do is to
proceed with a lot of caution prior to representing that candidate.
And some of other
reasons include a startup didn’t get proper funding, and an
undergoing company going
who can’t pay engineers their market value salary and they haven’t
received a raise in
over a year.
</p>
<img src="images.jpg" style="width:400px ; height:300px ;
border=0;">
<br>
<br>
<a href="#top">Click to go to the top</a>
</center>
</body>
</html>
f) Aim:- Create a table to show class time table
<html>
<head>
<title>Time Table</title>
</head>
<body bgcolor="azure">
<H1><FONT COLOR="DARKCYAN"><CENTER>Bhagwan Parshuram
Institute of Technology</FONT></H1>
<H2><FONT COLOR="DARKCYAN"><CENTER>Time Table(Even
Semester:2020-21)</FONT></H2>
<table border="2" cellspacing="3" align="center">
<tr>
<td align="center">
<td>9:15-10:15
<td>10:15-11:15
<td>11:15-1:00
<td>1:00-2:00
<td>2:00-3:00
<td>3:00-4:00
<td>4:00-5:00
</tr>
<tr>
<td align="center">Monday
<td align="center"><font color="blue">WT Lab<br>
<td align="center"><font color="blue">Micro p&c Lab<br>
<td align="center"><font color="maroon">T&P Activities<br>
<td align="center"><font color="blue">CN Lab<br>
<td align="center"><font color="blue">OS Lab<br>
<td align="center"><font color="maroon">AI<br>
<td align="center"><font color="maroon">CN
</tr>
<tr>
<td align="center">Tuesday
<td align="center"><font color="maroon">CD<br>
<td align="center"><font color="maroon">CN<br>
<td align="center"><font color="maroon">CD<BR>
<td align="center"><font color="maroon">WT<br>
</tr>
<tr>
<td align="center">Wednesday
<td align="center"><font color="maroon">OS<br>
<td align="center"><font color="maroon">Micro p&c<BR>
</tr>
<tr>
<td align="center">Thursday
<td align="center"><font color="maroon">----<BR>
<td align="center"><font color="maroon">Micro p&c<br>
</tr>
<tr>
<td align="center">Friday
<td align="center"><font color="maroon">LIB<BR>
<td colspan="2" align="center">PDP<br><br>
</tr>
<tr>
<td align="center">Saturday
<td colspan="2" align="center">PDP<br>
<td colspan="2" align="center">PDP<br>
</tr>
</body>
</html>
g) Aim:- Use tables to provide layout to your HTML page describing
your university infrastructure
<html>
<head>
<title>Professional Laboratories</title>
</head>
<body bgcolor="tan">
<u><H1><FONT COLOR="DARKCYAN"><CENTER>Bhagwan
Parshuram Institute of Technology</FONT></H1></u>
<b><H2><FONT
COLOR="DARKCYAN"><CENTER>Infrastructure</FONT></H2></b
>
<i><H3><FONT COLOR="DARKCYAN"><CENTER>CSE/IT
Labs</FONT></H3></i>
<tr>
<td align="center">S.No.
<td align="center">Lab No.
<td align="center">Lab Name
</tr>
<tr>
<td align="center">1.
<td align="center"><font color="maroon">108-A<br>
<td align="center"><font color="maroon">Programming Lab<br>
</tr>
<tr>
<tr>
<td align="center"><font color="maroon">108-B<br>
<td align="center"><font color="maroon">Network and Security
Lab<br>
</tr>
<tr>
<td align="center"><font color="maroon">108-C<br>
<td align="center"><font color="maroon">Database Lab<br>
</tr>
<tr>
<td align="center"><font color="maroon">110<br>
<td align="center"><font color="maroon">Project Lab<br>
</tr>
<tr>
<td align="center"><font color="maroon">Soft Computing
Lab<br>
</tr>
<tr>
<td align="center"><font color="maroon">Recent Trends and
Technology Lab<br>
</tr>
<tr>
<td align="center"><font color="maroon">Research &
Development Lab<br>
</tr>
<tr>
<td align="center"><font color="maroon">E-Yantra Lab<br>
</tr><br>

<tr>
<td align="center">S.No.
<td align="center">Lab No.
<td align="center">Lab Name
</tr>
<tr>
<td align="center"><font color="maroon">EC & EIM Lab<br>
</tr>
<tr>
<tr>
<td align="center"><font color="maroon">STLD Lab<br>
</tr>
<tr>
<td align="center"><font color="maroon">Analog Lab<br>
</tr>
<tr>
<td align="center"><font color="maroon">Signal & System/DSP
Lab<br>
</tr>
<tr>
<td align="center"><font color="maroon">Communication System
Lab<br>
</tr>
<tr>
<td align="center"><font color="maroon">DSD,VLSI Lab and
MP&MC Lab<br>
</tr>
<tr>
<td align="center"><font color="maroon">Microwave and optical
communication lab<br>
</tr>
<tr>
<td align="center"><font color="maroon">Satellite
communication lab<br>
</tr>
<tr>
<td align="center"><font color="maroon">R&D and Project
Lab<br>
</tr><br>
<i><H3><FONT COLOR="DARKCYAN"><CENTER>ECE/EEE
Labs</FONT></H3></i>
</body>
</html>
h) Aim:- Use frames such that page is divided into 3 frames – 20% on
left to show contents of pages, 60% in centre to show body of page
and remaining on right to show remarks
<html>
<head>
<title>HTML: Frameset to Split Windows</title>
</head>
<frameset cols="20%,60%,*">
<frame src="1-a.html">
<frame src="1-b.html">
<frame src="1-e.html">
</frameset>
</html>
Experiment – 2
a) Aim:- Apply in-line CSS to change colours of certain text portion,
bold, underlined and italics certain words in your HTML web page.
Also change background colour of each paragraph using in-line CSS
<html>
<body>
<style>
p.a{
word-spacing:10px;:
}</style>
<center>
<h2 style="background-color:GoldenRod;">Reasons why
good Software Engineers Quit</h2>
<img src="funny.jpg" style="width:300px ; height:300px ;
border=0;">
<b><p class="a" style="text-align:center; background-color:
Indigo;">In terms of software engineers, who themselves not feel
continuously challenged or aren’t given the resources to grow their
skill set are
more likely to look for some other option where they can grow. Of
Course! Challenge
and growth have individual definitions and they vary in some
conditions, but what we
see as a good solution is to consistently brushing up and
encouraging an honest and
open environment so that engineers could feel comfortable speaking
about their
career growth and meeting challenges. </p></b>
<br>
<br>
<p class="a" style="text-align:center; background-color:
IndianRed;">Engineers thrive on teams that foster open mentalities
on the use of new technologies.
Sometimes poor long-standing technology stacks is the most
significant and quickest
way to lose talent. Engineers are not necessarily chasing companies
that use the
newest technologies, but they are looking to leave companies that
have closed
mindsets.</p>
<br>
<br>
<i><p class="a" style="text-align:center; background-color:
Khaki;">And usually it is very surprising that how engineers are
being hired for a certain
position and end up spending the first few months doing a
completely different job
from their current role. If they are going to be developing HTML
templates for the first
3 months, say that. Don’t hide it. Many times, as human beings, we
wait until it’s too
late to talk about being unhappy with our job. Instead what
engineers decide to do is
jump ship and finds something new where they can ditch the
unwanted parts of their
current role.</p></i>
<br>
<br>
<p class="a" style="text-align:center; background-color:
LawnGreen; font-family:'Courier New';">One of the most important
reasons why software engineers leave their companies is
due to management. It seems they don’t find themselves with a
good and supporting
team or management. Sometimes, management keeps on shuffling
in upper-level
management that trickles down to operational changes on a
technical team. And with
this the most common pain points engineers talk about are added
responsibilities and
unrealistic new expectations that kills the current flow,
disorganization of priorities,
or lack of new/continued mentorship.</p>
<br>
<br>
<u><p class="a" style="text-align:center; background-color:

orange;">Being a recruiter, you have also been encountered a job
seeker that is more likely to
driven to a higher salary than what they currently have. So what
you need to do is to
proceed with a lot of caution prior to representing that candidate.
And some of other
reasons include a startup didn’t get proper funding, and an
undergoing company going
who can’t pay engineers their market value salary and they haven’t
received a raise in
over a year.
</p><u>
<center>
</body>
</html>
b) Aim:- Create a simple form to submit user input like his name, age,
address and favourite subject, movie and singer
<html style="background-color:Maroon">
<head>
<title>CSE Student Data</title>
</head>
<body>
<h1 style="color:GoldenRod; text-align:center; font-size:

40px;">Welcome</h1>
<form>
<table style="width:500px; font-size:20px; height:200px"
align="center" cellspacing = "4" cellpadding = "4" border = "1">
<caption style="font-weight: bold; font-size:
35px;color:GoldenRod;">Enter your Details</caption>
<tr>
<td align = "right" style="font-weight:
bold;color:GoldenRod;">Name</td>
<td><input type = "text" style="font-weight: bold;"
placeholder="Full Name" /></td>
</tr>
<tr>
bold;color:GoldenRod;">Age</td>
placeholder="21"/></td>
</tr>
<tr>
bold;color:GoldenRod;">Address</td>
placeholder="abc,place,city,state,zipcode(110001)" /></td>
</tr>
<tr>
<td align = "right" style="font-weight: bold; Favorite
Subject</td>
<td><input type = "text" style="font-weight:
bold;color:GoldenRod;" placeholder="Subject" /></td>
</tr>
<tr>
bold;color:GoldenRod;">Movie</td>
placeholder="The curious case of Benjamin Button" /></td>
</tr>
<tr>
bold;color:GoldenRod;">Singer</td>
<td><input type = "text" style="font-weight: bold; "
placeholder="Ustad Rashid Khan" /></td>
</tr>
<tr>
<td align = "right"></td>
<td><input type = "submit" style="font-weight: bold;"
value = "Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
c) Aim:- Write HTML code to add form elements such as radio buttons,
checkboxes and password field. Also add submit button at last
<html style="background-color:crimson">
<head>
</head>
<body>
<h1 style="color:Darkorange">Welcome</h1>
<form>
<p style="font-size:20px;">Please select your gender:</p>
<input type="radio" id="male" name="gender"
value="male">
<label for="male" style="font-size:20px;">Male</label><br>
<input type="radio" id="female" name="gender"
value="female">
<label for="female" style="font-
size:20px;">Female</label><br>
<input type="radio" id="other" name="gender"
value="other">
<label for="other" style="font-size:20px;">Other</label>
<br><br>
<p style="font-size:20px;">Please select your vehicle:</p>
<input type="checkbox" id="vehicle1" name="vehicle1"
value="Bike">
<label for="vehicle1" style="font-size:20px;"> I have a
bike</label><br>
value="Car">
car</label><br>
value="Boat">
boat</label><br>
<br><br>
<label style="font-size:20px;">Email ID:</label>
<input type="text" name="uname"><br>
<label style="font-size:20px;">Password:</label>
<input type="password" name="pwd"></br></br><br>
<input type="submit" name="log" value="Log-In">
</form>
</body>
</html>
d) Aim:- Write all the above styling in a different file(.css) and link it to
your webpage such that changes made in .css file are immediately
reflected on the webpage. Group paragraphs into single class and
add styling information to the class in CSS.
<html>
<head>
<title>Cities and Capitals</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="city">
<tr>
<th>S.No</th>
<th>States Name</th>
<th>Capital</th>
<th>Founded on</th>
</tr>
<tr>
<td>1.</td>
<td>Andhra Pradesh</td>
<td>Hyderabad (Proposed Capital Amaravati)</td>
<td>1 Nov. 1956</td>
</tr>
<tr>
<td>2.</td>
<td>Arunachal Pradesh</td>
<td>Itanagar</td>
<td>20 Feb. 1987</td>
</tr>
<tr>
<td>3.</td>
<td>Assam</td>
<td>Dispur</td>
<td>26 Jan. 1950</td>
</tr>
<tr>
<td>4.</td>
<td>Bihar</td>
<td>Patna</td>
<td>26 Jan. 1950</td>
</tr>
<tr>
<td>5.</td>
<td>Chhattisgarh</td>
<td>Raipur</td>
<td>1 Nov. 2000</td>
</tr>
<tr>
<td>6.</td>
<td>Goa</td>
<td>Panaji</td>
<td>30 May. 1987</td>
</tr>
<tr>
<td>7.</td>
<td>Gujarat</td>
<td>Gandhinagar</td>
<td>1 May. 1960</td>
</tr>
<tr>
<td>8.</td>
<td>Haryana</td>
<td>Chandigarh</td>
<td>1 Nov. 1966</td>
</tr>
<tr>
<td>9.</td>
<td>Himachal Pradesh</td>
<td>Shimla</td>
<td>25 Jan. 1971</td>
</tr>
<tr>
<td>10.</td>
<td>Jharkhand</td>
<td>Ranchi</td>
<td>15 Nov. 2000</td>
</tr>
<tr>
<td>11.</td>
<td>Karnataka</td>
<td>Bengaluru (formerly Bangalore)</td>
<td>1 Nov. 1956</td>
</tr>
<tr>
<td>12.</td>
<td>Kerala</td>
<td>Thiruvananthapuram</td>
<td>1 Nov. 1956</td>
</tr>
<tr>
<td>13.</td>
<td>Madhya Pradesh</td>
<td>Bhopal</td>
<td>1 Nov. 1956</td>
</tr>
<tr>
<td>14.</td>
<td>Maharashtra</td>
<td>Mumbai</td>
<td>1 May. 1960</td>
</tr>
<tr>
<td>15.</td>
<td>Manipur</td>
<td>Imphal</td>
<td>21 Jan. 1972</td>
</tr>
<tr>
<td>16.</td>
<td>Meghalaya</td>
<td>Shillong</td>
<td>21 Jan. 1972</td>
</tr>
<tr>
<td>17.</td>
<td>Mizoram</td>
<td>Aizawl</td>
<td>20 Feb. 1987</td>
</tr>
<tr>
<td>18.</td>
<td>Nagaland</td>
<td>Kohima</td>
<td>1 Dec. 1963</td>
</tr>
<tr>
<td>19.</td>
<td>Odisha</td>
<td>Bhubaneswar</td>
<td>26 Jan. 1950</td>
</tr>
<tr>
<td>20.</td>
<td>Punjab</td>
<td>Chandigarh</td>
<td>1 Nov. 1956</td>
</tr>
<tr>
<td>21.</td>
<td>Rajasthan</td>
<td>Jaipur</td>
<td>1 Nov. 1956</td>
</tr>
<tr>
<td>22.</td>
<td>Sikkim</td>
<td>Gangtok</td>
<td>16 May. 1975</td>
</tr>
<tr>
<td>23.</td>
<td>Tamil Nadu</td>
<td>Chennai</td>
<td>26 Jan. 1950</td>
</tr>
<tr>
<td>24.</td>
<td>Telangana</td>
<td>Hyderabad</td>
<td>2 Jun. 2014</td>
</tr>
<tr>
<td>25.</td>
<td>Tripura</td>
<td>Agartala</td>
<td>21 Jan. 1972</td>
</tr>
<tr>
<td>26.</td>
<td>Uttar Pradesh</td>
<td>Lucknow</td>
<td>26 Jan. 1950</td>
</tr>
</table>
</div>
</body>
</html>

.city {
background-color: DodgerBlue;
border: 2px solid black;
text-size:20px;
margin: 20px;
padding: 20px;
}
th,tr,td{
font-size:20px
}
Experiment – 3
a) Aim:- Write a program to check whether the given string is
palindrome or not.
<html>
<head>
<script>
function Palindrome()
{
var string = String(document.getElementById("N").value);
const array=string.split('');
const reversearray=array.reverse();
const reversestring=reversearray.join('');
if(string==reversestring)
{
window.alert("The input string is
Palindrome");
}
else
{
window.alert("The input string is not
palindrome");
}
}
</script>
</head>
<body bgcolor="darkorange">
<br>
<h1>Whether a string is Palindrome or not</h1>
<h2>Enter The String:<h2><input type="text" name="n" id = "N"
style="width:300px;height:30px;font-size:25;"/>
<hr style="height:15px" color="darkblue">
<br>
<center><button onClick="Palindrome()" style="font-
size:30px;cursor:pointer;">CHECK</button>
</body>
</html>
b) Aim:- Write a program to display the alert box after 5 seconds when
the button is clicked.
<html>
<body>
<h2>Click the button to wait 5 seconds</h2>
<button onclick="myFunction()">Press Me</button>
<script>
function myFunction() {
setTimeout(function(){ alert("Namaste,aham naam Tuhin asti |"); },
5000);
}
</script>
</body>
</html>
c) Aim:- Create a simple form in HTML. Put validation on values
entered by the user.
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<style type="text/css">
html {
background: url(myindia.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<form name = "myForm" onsubmit = "return(validate());">
<caption style="font-weight: bold; font-size: 35px;">Enter
your Details</caption>
<tr>
<td align = "right" style="font-weight: bold;">Name</td>
placeholder="Full Name" name = "Name" /></td>
</tr>
<tr>
<td align = "right" style="font-weight: bold;">EMail</td>
placeholder="abc123@example.com" name = "EMail"
/></td>
</tr>
<tr>
<td align = "right" style="font-weight: bold;">Zip Code</td>
placeholder="110001" pattern="[0-9]{6}" name = "Zip"
/></td>
</tr>
<tr>
<td align = "right" style="font-weight: bold;">State/UT</td>
<td>
<select name = "State(or UT)" style="font-weight: bold;">
<option value = "-1" selected>[choose yours]</option>
<option value = "1" >Andhra Pradesh</option>
<option value = "2">Arunachal Pradesh</option>
<option value = "3">Assam</option>
<option value = "4">Bihar</option>
<option value = "5">Chhattisgarh</option>
<option value = "6">Goa</option>
<option value = "7">Gujurat</option>
<option value = "8">Haryana</option>
<option value = "9">Himachal Pradesh</option>
<option value = "10"> Jharkhand</option>
<option value = "11">Karnataka</option>
<option value = "12"> Kerala</option>
<option value = 13">Madhya Pradesh</option>
<option value = "14">Maharashtra</option>
<option value = "15">Manipur</option>
<option value = "16">Meghalaya</option>
<option value = "17">Mizoram</option>
<option value = "18">Nagaland</option>
<option value = "19">Odisha</option>
<option value = "20">Punjab</option>
<option value = "21">Rajasthan</option>
<option value = "22">Sikkim</option>
<option value = "23">Tamil Nadu</option>
<option value = "24">Telangana</option>
<option value = "25">Tripura</option>
<option value = "26">Uttarakhand</option>
<option value = "27">Uttar Pradesh</option>
<option value = "28">West Bengal</option>
<option value = "29">Andaman and Nicobar
Islands</option>
<option value = "30">Chandigarh</option>
<option value = "31">Dadra & Nagar Haveli and Daman &
Diu</option>
<option value = "32">Delhi</option>
<option value = "33">Jammu and Kashmir</option>
<option value = "34">Lakshadweep</option>
<option value = "35">Puducherry</option>
<option value = "36">Ladakh</option>
</select>
</td>
</tr>
<tr>
<td><input type = "submit" style="font-weight: bold;" value =
"Submit" /></td>
</tr>
<script type="text/javascript" src="exam.js"></script>
</table>
</form>
</body>
</html>
Experiment – 4
a) Aim:- Write a program to send data from one form to another
INDEX_PAGE.html
<html style="background-color:Indigo">
<head>
</head>
<body>

40px;">Welcome</h1>
<form action="formdata.jsp" method="POST">
<caption style="font-weight: bold; font-size:
35px;color:GoldenRod;">Enter your Details</caption>
<tr>
bold;color:GoldenRod;">Name</td>
<td><input type = "text" name="fullname" style="font-
weight: bold;" placeholder="Full Name" /></td>
</tr>
<tr>
bold;color:GoldenRod;">Age</td>
<td><input type = "text" name="age" style="font-
weight: bold;" placeholder="21" /></td>
</tr>
<tr>
bold;color:GoldenRod;">Address</td>
<td><input type = "text" name="address" style="font-
weight: bold;" placeholder="abc,place,city,state,zipcode(110001)"
/></td>
</tr>
<tr>
bold;color:GoldenRod;">Movie</td>
<td><input type = "text" name="movie" style="font-
weight: bold;" placeholder="The curious case of Benjamin Button"
/></td>
</tr>
<tr>
<td><input type = "submit" style="font-weight: bold;"
value = "Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
FORMDATA.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<html style="background-color:DarkSeaGreen">
<head>
<title>JSP Page</title>
</head>
<body>
<h1 style="color:DarkSlateBlue; text-align:center; font-size:
40px;">Student Information</h1>
<b style="font-size: 20px;">Full Name ::</b>
<%=request.getParameter("fullname")%><br>
<b style="font-size: 20px;">Age ::</b>
<%=request.getParameter("age")%><br>
<b style="font-size: 20px;">Address ::</b>
<%=request.getParameter("address")%><br>
<b style="font-size: 20px;">Movie ::</b>
<%=request.getParameter("movie")%><br>
</body>
</html>
b) Aim:- Write a simple JSP for displaying data and time. Embed this
JSP in HTML page
<%@ page import = "java.io.*,java.util.*, javax.servlet.*" %>

<html style="background-color:Maroon">
<head>
<title>Display Current Date & Time</title>
</head>
<body>
<center>
40px;">Display Current Date & Time</h1>
</center>
<%
Date date = new Date();
out.print( "<h2 align = \"center\">"
+date.toString()+"</h2>");
%>
</body>
</html>
c) Aim:- Write a program to open internet using JSP
<html>
<head>
<title>Accessing Website</title>
</head>
<body>
<%
String redirectURL = "http://bpitindia.com/";
response.sendRedirect(redirectURL);
%>
</body>
</html>

Web Technology Practical File: ETCS-356

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technology Practical File: ETCS-356

Uploaded by

Copyright:

Available Formats

ETCS-356

CSE : B ( Third Year )

a) Create your resume using HTML

1. e) Change the background colour of the page. At the

4. b) Write a simple JSP for displaying date and time. Embed

<TD>Microsoft SQL Database Administrator <BR>

Noida, Uttar Pradesh<UL>

<TD>SQL Database Intern<BR>

Sector-30, Gurugram, Harayana<UL>

<table border="2" cellspacing="3" align="center">

<u><p class="a" style="text-align:center; background-color:

<h1 style="color:GoldenRod; text-align:center; font-size:

<h1 style="color:GoldenRod; text-align:center; font-size:

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@ page import = "java.io.,java.util., javax.servlet.*" %>

You might also like