Ready

The document contains an HTML form to collect student details like name, email, phone and date of birth. It includes input fields for collecting the details along with labels and a submit button. The form is centered on the page inside a container with some basic styling and layout.

Uploaded by

Kishan Singh

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

0% found this document useful (0 votes)

26 views8 pages

Ready

Uploaded by

Kishan Singh

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/ 8

PRANVEER SINGH INSTITUTE OF TECHNOLOGY, KANPUR

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

Even Semester 2022-23

B. Tech.- Third Year

Semester- VI

Lab File
WEB TECHNOLOGY
(KCS602)

Submitted To : Submitted By :
Faculty Name : Mr. Arun Kumar Pandey Sir Name : Kishan Singh
Designation : Assistant Professor Roll No. : 2001641540032
Section : CS-III-DS
Lab Objective Date Marks Sign.
No.
Write HTML/Java scripts to display your CV in
1 navigator,
your Institute website, Department Website and
Tutorial website for specific subject.
Write an HTML program to design an entry form of
2
Student details
Write program using Java script for Web Page to
3
display browsers information.
A super class Detail has been defined to store thedetails of
a customer. Define a subclass Bill to compute the monthly
telephone charge of the customer as per the chart given
below:
Number of Calls Rate
1 – 100 Only Rental charge
4 101 – 200 60 paisa per call + rental
charge
201 – 300 80 paisa per call + rental
charge
Above 300 1 rupee per call + rental
charge

Write a Java applet/AWT to display the

5 Application Program screen i.e. calculatorand
other.

6 Write a Java applet to display the Application Program

screen i.e. Color mixer pallet

Write a program using TCP/IP socket between

7 client and server and perform two-way
communication
Write a program to illustrate JDBC connectivity and
8 perform CRUD operation on a table
student/employee (at least 5 attributes)
Write a program to illustrate Batch
9
Transaction with prepared statement
Install a database (MySQL or Oracle). Create a table
which should contain at least the following fields: name,
password, email-id, phone number Write a java
10 program/servlet/JSP to connect to that databaseand
extract data from the tables and display them.
Insert the details of the users who register with the
web site, whenever a new user clicks the submit
button in the registration page.

To Develop a student Marks sheet by usingServlet and

11
HTML with database Oracle.
Design and implement a simple servlet for an entry
12 form of student details and send it to store at database
server like SQL, Oracle or MS Access.
Write a JSP which insert the details of the 3 or 4
users who register with the web site by using
13 registration form.
Authenticate the user when he submits the loginform
using the user name and password from thedatabase

Store 5 Students (name, branch, rollno, age) objects in list.

Perform any sorting technique so as to display list in ascending
14 order of rollno and
display in descending order of age.

Perform union (AUB), intersection and difference(A-B)

15 operations using set collection.

Create a Map that consists of Country-Capital pair to

store information about various countriesalong with their
16
capital name. Display the entries in sorted order of
Country and Capital.
Lab1: Write HTML/Java scripts to display your CV innavigator, your Institute website,
Department Website and Tutorial website for specific subject.

HTML Code :

<!DOCTYPE html> <script src="lab1.js"></script>

<html> <footer>
<head> <p>© Created By KISHAN
<title>The Links</title> SINGH</p>
<link rel="stylesheet" type="text/css" </footer>
href="lab1.css"> </body>
</head> </html>
<body>
<div class="container">
<h1>The Links</h1> CSS Code :
<div class="buttons">
<div class="button-box"> body {
<button margin: 0;
onclick="window.open('cv.html','_blank')"> padding: 0;
My Resume</button> font-family: Arial, sans-serif;
</div> background-color: #f2f2f2;
<div class="button-box"> }
<button
.container {
onclick="window.open('https://www.psit.ac.i
width: 100%;
n/', '_blank')">Institute | PSIT</button> height: 100%;
</div> display: flex;
<div class="button-box"> flex-direction: column;
<button align-items: center;
onclick="window.open('https://www.psit.ac.i justify-content: center;
n/academics/eb2/computer-science-and- text-align: center;
engineering/3', '_blank')">PSIT | Data }
Science</button>
</div> h1 {
</div> font-size: 3rem;
<div class="buttons"> margin-bottom: 2rem;
<div class="button-box"> margin-top: 1px;
width: 100%;
<button
text-align: center;
onclick="window.open('https://nptel.ac.in/','_ background-color: black;
blank')">NPTEL</button> box-sizing: border-box;
</div> max-width: 100%;
<div class="button-box"> color: white;
<button
onclick="window.open('https://www.youtube. }
com/@CodeWithHarry', '_blank')">YT | Code
With Harry </button> .buttons {
</div> margin-top: 60px;
<div class="button-box"> display: flex;
<button flex-wrap: wrap;
onclick="window.open('https://aktu.ac.in/', justify-content: center;
}
'_blank')">AKTU</button>
</div> .button-box {
</div> margin: 1rem;
</div> }
box-sizing: border-box;
button { max-width: 100%;
background-color: #333; margin-bottom: 5px;
color: #fff; }
font-size: 1.5rem;
padding: 1rem 2rem; p{
border: none; font-size: 14px;
border-radius: 5px; margin: 0;
cursor: pointer; }
transition: background-color 0.3s ease-in-out;
} JavaScript code:

button:hover { console.log("Welcome to The Links!");

background-color: #666; document.querySelector(".button-box:first-of-
} type button").addEventListener("click",
footer {
function() {
background-color: black;
color: white; console.log("You clicked on the first
position: fixed; button!");
bottom: 0; });
width: 100%;
text-align: center;
padding: 20px;

Output :
Lab2: Write an HTML program to design an entry form of Student details.
HTMl Code: <input type="submit" value="Submit">
</form>
<!DOCTYPE html> </div>
<html> <footer style="text-align: center;">
<head> <p>© Created By KISHAN
<meta charset="UTF-8"> SINGH</p>
<title>Student Details Entry Form</title> </footer>
<link rel="stylesheet" href="lab2.css"> </body>
</head> </html>
<body>
<div class="form-container"> CSS Code:
<h1 style="text-align: center;">Student
Details Entry Form</h1> body{
<form method="post" action=" "> height: 100%;
<label for="name">Name:</label> background-color: antiquewhite;
<input type="text" id="name" }
name="name" placeholder="Enter your name" .form-container {
required> background-color: white;
<label for="email">Email:</label> height: 100%;
<input type="email" id="email" width: 90%;
name="email" placeholder="Enter your email" max-width: 600px;
required> margin: 0 auto;
<label for="phone">Phone:</label> padding: 20px;
<input type="tel" id="phone" border: 1px solid #ccc;
name="phone" placeholder="Enter your phone border-radius: 5px;
number" required> font-family: Arial, sans-serif;
<label for="dob">Date of Birth:</label> }
<input type="date" id="dob" name="dob"
required>
h1, label {
<label for="gender">Gender:</label>
font-size: 20px;
<div class="radio-group">
font-weight: bold;
<input type="radio" id="male"
name="gender" value="male" required> color: #333;
<label for="male">Male</label> display: block;
<input type="radio" id="female" }
name="gender" value="female" required>
<label for="female">Female</label> input[type="text"], input[type="email"],
<input type="radio" id="other" input[type="tel"], textarea, select {
name="gender" value="other" required> width: 100%;
<label for="other">Other</label> padding: 12px;
</div> border: 1px solid #ccc;
<label for="address">Address:</label> border-radius: 4px;
<textarea id="address" name="address" box-sizing: border-box;
placeholder="Enter your address" margin-top: 6px;
required></textarea> margin-bottom: 16px;
<label for="course">Course:</label> resize: vertical;
<select id="course" name="course" font-size: 16px;
required> font-family: Arial, sans-serif;
<option value="">--Select Course-- }
</option>
<option input[type="date"] {
value="B.Tech">B.Tech</option> width: 100%;
<option padding: 12px;
value="M.Tech">M.Tech</option> border: 1px solid #ccc;
<option value="B.Sc">B.Sc</option> border-radius: 4px;
<option value="M.Sc">M.Sc</option> box-sizing: border-box;
</select> margin-top: 6px;
margin-bottom: 16px; }
font-size: 16px;
font-family: Arial, sans-serif; input[type="submit"]:hover {
} background-color: #45a049;
}
.radio-group {
display: flex; input[type="submit"]:focus {
flex-direction: row; outline: none;
margin-top: 6px; }
margin-bottom: 16px; footer {
} color: black;
position: fixed;
.radio-group label { bottom: 0;
margin-right: 10px; width: 100%;
} text-align: center;
max-width: 100%;
input[type="submit"] { margin-bottom: 10px;
background-color: #4CAF50; }
color: white;
padding: 12px 20px; p{
border: none; font-size: 14px;
border-radius: 4px; margin: 0;
cursor: pointer; }
font-size: 16px;
font-family: Arial, sans-serif;

OUTPUT:
Lab3: Write program using Java script for Web Page to display browsers information.
HTML Code:

<!DOCTYPE html> font-family: Arial, sans-serif;

<html> background-color: #f2f2f2;
<head> }
<title>Browser Information</title>
<link rel="stylesheet" href="lab3.css"> h1 {
</head> text-align: center;
<body> color: #333;
<h1>Browser Information</h1> }
<p id="browser-info"></p>
#browser-info {
<script> font-size: 18px;
const browserInfo = `Browser Name: text-align: center;
${navigator.appName} margin: 50px auto;
<br>Version: padding: 20px;
${navigator.appVersion} background-color: #fff;
<br>Code Name: box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
${navigator.appCodeName} max-width: 600px;
<br>Platform: }
${navigator.platform}`; footer {
color: black;
document.getElementById("browser- position: fixed;
info").innerHTML = browserInfo; bottom: 0;
</script> width: 100%;
<footer style="text-align: center;"> text-align: center;
<p>© Created By KISHAN SINGH</p> max-width: 100%;
</footer> margin-bottom: 10px;
</body> }
</html>
p{
CSS Code: font-size: 14px;
margin: 0;
body { }

OUTPUT: