Scribd
Upload
5 views

Aditya

The document is a lab file for a Web Technology course at Galgotias University, detailing various experiments related to HTML, CSS, JavaScript, AJAX, jQuery, JSP, and Servlets. Each experiment includes objectives, theoretical background, observations, and sample code. The file serves as a practical guide for students to learn and implement web development concepts.

Uploaded by

ADITYA RAJ 22SCSE1010456
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
5 views

Aditya

The document is a lab file for a Web Technology course at Galgotias University, detailing various experiments related to HTML, CSS, JavaScript, AJAX, jQuery, JSP, and Servlets. Each experiment includes objectives, theoretical background, observations, and sample code. The file serves as a practical guide for students to learn and implement web development concepts.

Uploaded by

ADITYA RAJ 22SCSE1010456
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/ 18

SCHOOL OF COMPUTER SCIENCE AND ENGINEERING

GALGOTIAS UNIVERSITY, GREATER NOIDA

UTTAR PRADESH

Lab File

Web Technology

Course Code: R1UC626C

Name-Aditya Raj
Admission no.-22SCSE1010456
Section-43
1|Page
Index

S.No. Experiment Name Signature

1 Write a simple HTML code to display data / content on


a web page.

2 Write an HTML code to display your CV on a web


page.

3 Write an HTML code to implement the concept of


frames with 2 frames: one for hyperlinks and another
for opening the content to that link.

4 Implement CSS using all the ways of HTML.

5 Design HTML form for keeping student record and val-


idate it using JavaScript.

6 Complete Web page with HTML and CSS using Boot-


strap.

7 Write a program to implement AJAX.

8 Write a program to implement jQuery.

9 Write a JSP code to generate dynamic webpage using


server response.

10 Write a program using Servlet and HTML to create a


form and display the details entered by the user.

11 Write a program in Servlet/JSP to display content on


a web page.

12 Create a Servlet/JSP page for the login system using


session.

13 Write a Servlet/JSP program for sending e-mail.

1
Experiment No. 1
Simple HTML Page

Aim/Objective: To write a simple HTML code to display data/content on a web page.


Theory: HTML (HyperText Markup Language) is the backbone of web development, us-
ing tags to structure content like headings, paragraphs, and images, rendered by browsers.
Observation: The code creates a web page with a heading and paragraph about an
Indian festival, displayed correctly in the browser.
Code:
1 <! DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset ="UTF-8">
5 <title>Simple HTML Page</title>
6 </head>
7 <body>
8 <h1>Welcome to Diwali Celebration</h1 >
9 <p>Diwali, the festival of lights, is celebrated across India with
lamps and sweets.</p>
10 </body>
11 </html>

Outputs

1
Experiment No. 2
HTML CV Page

Aim/Objective: To write an HTML code to display a CV on a web page.


Theory: HTML structures a CV with sections like personal details, education, and skills
using tags like <div>, <h1>, and <ul>.
Observation: The CV displays details of an Indian student with clear formatting.
Code:
1 <! DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset ="UTF-8">
5 <title>My Curriculum Vitae</title>
6 </head>
7 <body>
8 <h1>Curriculum Vitae</h1 >
9 <h2 >Personal Details</h2 >
10 <p>Name: J S </p>
11 <p>Email: u @example.com</p>
12 <h2 >Education</h2 >
13 <ul>
14 <li>B.Tech , Computer Science , IIT Delhi, 2021 -2025 </li>
15 </ul>
16 <h2 >Skills</h2 >
17 <ul>
18 <li>HTML, CSS, JavaScript</li>
19 <li>Python Programming</li>
20 </ul>
21 </body>
22 </html>

Outputs

2
Experiment No. 3
HTML Frames

Aim/Objective: To implement frames in HTML with one frame for hyperlinks and
another for content.
Theory: HTML frames (deprecated in HTML5) split the browser window using <frameset>.
Modern alternatives include <iframe> or CSS.
Observation: Two frames display: one with links to Indian websites, another showing
their content.
Code:
1 <! DOCTYPE html>
2 <html>
3 <head>
4 <title>Frames Example</title>
5 </head>
6 <frameset cols="30%,70%">
7 <frame src="links.html" name="links">
8 <frame src="content.html" name="content">
9 </ frameset>
10 </html>
11

12 <!-- links.html -->


13 <! DOCTYPE html>
14 <html>
15 <body>
16 <a href="https:// www.isro.gov.in" target="content">ISRO</a><br>
17 <a href="https:// www.iitd.ac.in" target="content">IIT Delhi</a>
18 </body>
19 </html>
20

21 <!-- content.html -->


22 <! DOCTYPE html>
23 <html>
24 <body>
25 <h1 >Content Frame</h1 >
26 <p>Select a link to display content here.</p>
27 </body>
28 </html>

Outputs

3
Experiment No. 4
CSS Implementation

Aim/Objective: To implement CSS in HTML using inline, internal, and external meth-
ods.
Theory: CSS styles HTML elements via inline (within tags), internal (<style>), or
external (.css file) methods.
Observation: The page displays styled text inspired by Indian culture using all CSS
methods.
Code:
1 <! DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset ="UTF-8">
5 <title>CSS Implementation</title>
6 <link rel=" stylesheet" href="styles.css">
7 <style>
8 p.internal { color: saffron; }
9 </style>
10 </head>
11 <body>
12 <h1 style="color: green;">Inline CSS: Indian Flag</h1 >
13 <p class=" internal">Internal CSS: Saffron Color</p>
14 <p class=" external">External CSS: Blue Chakra</p>
15 </body>
16 </html>
17

18 <!-- styles.css -->


19 p.external
20 { color: blue;
21 }

Outputs

4
Experiment No. 5
HTML Form with JavaScript Validation

Aim/Objective: To design an HTML form for student records with JavaScript valida-
tion.
Theory: HTML forms collect input, and JavaScript validates fields like name and roll
number.
Observation: The form validates inputs for an Indian student and alerts on submission.
Code:
1 <! DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset ="UTF-8">
5 <title>Student Record Form</title>
6 <script>
7 function validateForm() {
8 let name = document.forms[" studentForm"]["name"]. value;
9 let roll = document.forms[" studentForm"]["roll"]. value;
10 if (name == "" || roll == "") {
11 alert("All fields must be filled out");
12 return false;
13 }
14 if (!/^[0 -9]{6}$/. test(roll))
15 { alert("Roll number must be 6 digits");
16 return false;
17 }
18 alert("Form submitted successfully!");
19 return true;
20 }
21 </script>
22 </head>
23 <body>
24 <form name=" studentForm" onsubmit="return validateForm()">
25 <label>Name:</label><input type="text" name="name"><br>
26 <label>Roll No:</label><input type="text" name="roll"><br>
27 <input type="submit" value="Submit">
28 </form>
29 </body>
30 </html>

Outputs

5
Experiment No. 6
Web Page with Bootstrap

Aim/Objective: To create a web page using HTML and Bootstrap CSS.


Theory: Bootstrap provides responsive design components for web development.
Observation: The page displays a responsive layout with an Indian-themed navigation
bar.
Code:
1

3 <head>
4

8 <body>
9

10

11

12

13

14 <li class="nav-item"><a class="nav-link" href


15

16 ystem: link href="https:// www.niti.gov.in" target="cont


Aayog</a>
17 </ul>
18 </div>
19 </nav>
20 <div class=" container">
21 <h1 >Welcome to Indian Culture</h1 >
22 <p>Explore festivals like Diwali and Holi.</p>
23 </div>
24 </body>
25 </html>

Outputs

6
Experiment No. 7

AJAX Implementation

Aim/Objective: To implement AJAX for asynchronous data retrieval.


Theory: AJAX enables dynamic content updates without page reloads using XML-
HttpRequest.
Observation: The page fetches data about an Indian government scheme asynchronously.
Code:
1 <! DOCTYPE html>
2

10

11

12

13

14 xhr.open("GET", "https:// jsonplaceholder. typicode.com/posts/1"


, true);
15 xhr.send();
16 }
17 </script>
18

19

20

21

22

23

Outputs

7
Experiment…No.8

jQuery Implementation

Aim/Objective: To implement jQuery for DOM manipulation.


Theory: jQuery simplifies JavaScript tasks like event handling and animations.
Observation: Clicking a button hides a paragraph about an Indian monument.
Code:
1 <! DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset ="UTF-8">
5 <title>jQuery Example</title>
6 <script src="https:// code.jquery.com/jquery -3.6.0. min.js"></script
>
7 <script>
8 $(document).ready( function() {
9 $("# hideBtn").click( function() {
10 $("p").hide();
11 });
12 });
13 </script>
14 </head>
15 <body>
16 <button id="hideBtn">Hide Taj Mahal Info</button>
17 <p>The Taj Mahal is a UNESCO World Heritage Site in Agra.</p>
18 </body>
19 </html>

Outputs

8
Experiment No. 9

JSP Dynamic Web Page

Aim/Objective: To create a JSP page generating dynamic content.


Theory: JSP embeds Java code in HTML to generate dynamic web content.
Observation: The page displays the current server time in Indian Standard Time. Code:
1

2
<%@ page language="java" contentType="text/html; charset=UTF-8"
3
pageEncoding="UTF-8"%>
4
<!DOCTYPE html>
5
<html>
6
<head >
7
<title >JSP Dynamic Page </title >
8
</head >
9
<body>
10
<h1 >Dynamic JSP Page </h1 >
11
<p>Current Time (IST): <%= new java.util.Date() %></p>
</body>
</html>

Outputs

9
Experiment No. 10

Servlet and HTML Form


Aim/Objective: To create a form using Servlet and HTML to display user-entered
details.
Theory: Servlets process HTTP requests to generate dynamic responses.
Observation: The form submits Indian student data, displayed by the servlet.
Code:
1

4 <head>
5

7 <body>
8

10

11

12

13

14

15

16

17

18

19

20

21

22

23 throws ServletException , IOException {


24 response. setContentType("text/html");
25 PrintWriter out = response. getWriter();
26 String name = request. getParameter("name");
27 String aadhaar = request. getParameter("aadhaar");
28 out.println("<html><body>");
29 out.println("<h1 >Student Details </h1 >");
30 out.println("<p>Name: " + name + " </p>");
31 out.println("<p>Aadhaar: " + aadhaar + " </p>");
32 out.println(" </body ></html>");
33 }
34 }

Outputs

10
Experiment No. 11
Servlet/JSP Content Display

Aim/Objective: To display content using Servlet or JSP.


Theory: JSP generates dynamic content using Java code.
Observation: The JSP page displays information about an Indian festival.
Code:
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
2 <!DOCTYPE html>
3 <html>
4 <head >
5 <title >Content Display </title >
6 </head >
7 <body>
8 <h1 >Holi Festival </h1 >
9 <p>Dynamic Content: <%= "Holi is the festival of colors celebrated
in March." %></p>
10 </body>
11 </html>

Outputs

11
Experiment No. 12

Login System with Session


Aim/Objective: To create a login system using JSP with session management.
Theory: JSP sessions maintain user data across requests.
Observation: Users log in with Indian credentials, and session data is displayed.
Code:
1 <!-- login.jsp -->
2 <%@ page language="java" contentType="text/html;
3 charset=UTF-8" pageEncoding="UTF-8"%>
4 <!DOCTYPE html>
5 <html>
6 <head >
7 <title >Login </title >
8 </head >
9 <body>
10 <form action="welcome.jsp" method="post">
11 <label>Username:</label><input type="text" name="
12 username"><br>
13 <label>Password:</label><input type=" password" name="
14 password">< br>
15 <input type="submit" value="Login">
16 </form >
17
</body>
18
</html>
19

20
<!-- welcome.jsp -->
21
<%@ page language="java" contentType="text/html;
22
charset=UTF-8" pageEncoding="UTF-8"%>
23
<!DOCTYPE html>
24
<html>
25
<head >
26
<title >Welcome </title >
27
</head >
28
<body>
<%
29
String username = request. getParameter("
30
username"); String password = request.
31
getParameter(" password");
32
if (username != null && password != null &&
33
username.equals(" rahul") && password.equals("
34
india123 ")) {
35
session. setAttribute(" username", username);
36
out.println("<h1 >Welcome , " + username +
37
"!</h1 >");
Outputs

12
Experiment No. 13
Servlet/JSP Email Program

Aim/Objective: To create a program for sending email using Servlet or JSP.


Theory: JavaMail API facilitates email functionality in Servlets/JSP.
Observation: The program sets up an email form for an Indian context; requires SMTP
configuration.
Code:
1

5 <head >
6

8 <body>
9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

13
39

40

41

42

43

44

45

46

47

Outputs

14

You might also like