WEB TECHNOLOGIES LAB

(CIE-356P)

Faculty Name: Student Name: PIYUSH MITTAL

Mr. Ajay Tiwari Roll No: 35396402722

(ASSISTANT PROFESSOR) Semester: 6

Group: 6 AIML-3C

Maharaja Agrasen Institute of Technology, PSP Area,

Sector – 22, Rohini, New Delhi -110085

 MAHARAJA AGRASEN INSTITUTE OF TECHNOLOGY
COMPUTER SCIENCE & ENGINEERING DEPARTMENT

VISION
"To attain global excellence through education, innovation, research, and work ethics
in the field of Computer Science and engineering with the commitment to serve
humanity."

MISSION
M1 To lead in the advancement of computer science and engineering through
internationally recognized research and education.
M2 To prepare students for full and ethical participation in a diverse society and
encourage lifelong learning.
M3 To foster development of problem solving and communication skills as an
integral component of the profession.
M4 To impart knowledge, skills and cultivate an environment supporting incubation,
product development, technology transfer, capacity building and entrepreneurship in
the field of computer science and engineering.
M5 To encourage faculty, student’s networking with alumni, industry, institutions,
and other stakeholders for collective engagement.
 Rubrics for Lab Assessment:

Rubrics 10 Marks POs and PSOs Covered

0 Marks 1 Marks 2 Marks PO PSO

R1 Is able to identify and No Partially Completely PO1, PO2 PSO1,

define the objective of PSO2
the given problem?

R2 Is proposed No Partially Completely PO1,PO2, PSO1,

design/procedure/algor PO3 PSO2
ithm solves the
problem?

R3 Has the understanding No Partially Completely PO1,PO3, PSO1,

of the PO5 PSO2
tool/programming
language to implement
the proposed solution?

R4 Are the result(s) No Partially Completely PO2,PO4, PSO2

verified using sufficient PO5
test data to support the
conclusions?

R5 Individuality of No Partially Completely PO8, PO12 PSO1,

submission? PSO3
 LAB INDEX

S.No Experiment Date R1 R2 R3 R4 R5 Faculty

Signature

2M 2M 2M 2M 2M

10

11

12

13

14

15
 Experiment – 1

Aim: To understand the working of a web server by installing and configuring XAMPP,
hosting a simple HTML webpage, and accessing it via a web browser using the localhost
environment.

Theory of WebServer

A web server is software or hardware that processes incoming HTTP/HTTPS requests and
delivers web content (e.g., HTML, CSS, JavaScript, images) to clients (e.g., browsers). It
acts as the backbone of the internet, hosting websites and applications by managing
requests, handling security, and serving static or dynamic content. Popular examples
include:
● Apache HTTP Server: Open-source, highly customizable, and widely used with
modules like mod_ssl for encryption.
● Nginx: Known for high performance and scalability, often used as a reverse proxy
or load balancer.
● Microsoft IIS: Integrated with Windows Server, optimized for ASP.NET
applications.
● LiteSpeed: Commercial server with Apache-compatible features and built-in
caching for speed.
● Caddy: Modern server with automatic HTTPS and simple configuration.

Web servers like Apache (used in XAMPP) or Nginx listen on ports (e.g., 80 for HTTP,
443 for HTTPS) and map URLs to files or scripts. For instance, when you host index.html
on XAMPP’s Apache server, the server processes the request to http://localhost and returns
the file from the htdocs directory.
Installation Steps for XAMPP:

● Download XAMPP: Visit Apache Friends and download the XAMPP installer for
your OS (Windows, macOS, or Linux).
● Run Installer:
1. Launch the installer and select components (e.g., Apache, MySQL, PHP).
2. Choose an installation directory (default is recommended).
3. Uncheck the "Learn more about Bitnami" option if prompted.
● Complete Installation:
1. Follow the prompts to finish installation.
● Launch XAMPP Control Panel:
1. Open XAMPP and start the Apache and MySQL modules (click "Start" next
to each)

Hosting Index.html
1. Create Your File:
2. Save an index.html file in the XAMPP web root directory:
● Windows: C:\xampp\htdocs\
● macOS/Linux: /opt/lampp/htdocs/
3. Access via Browser:
● Open your browser and visit: http://localhost
● If the file is in a subfolder (e.g., htdocs/myproject), use:
http://localhost/myproject

OUTPUT:
 EXPERIMENT NO. – 2

AIM: Design web pages for your college containing a description of the courses,departments, faculties,
library etc, use href, list tags.
CODE:

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Evergreen College</title>
</head>
<body bgcolor="#f0f0f0">
<table width="80%" align="center" bgcolor="#ffffff" cellpadding="20">
<tr>
<td>
<h1 align="center"><font color="#006400">Evergreen
College</font></h1>
<hr color="#006400">
<table width="100%">
<tr align="center">
<td><a href="index.html"><font
color="#006400">Home</font></a></td>
<td><a href="courses.html"><font
color="#006400">Courses</font></a></td>
<td><a href="departments.html"><font
color="#006400">Departments</font></a></td>
<td><a href="faculty.html"><font
color="#006400">Faculty</font></a></td>
<td><a href="library.html"><font
color="#006400">Library</font></a></td> </tr>
</table>
<hr color="#006400">
<h2>Welcome to Evergreen College</h2>
<p>Evergreen College is a prestigious institution dedicated
to providing highquality education and fostering academic excellence. Our
diverse range of programs and experienced faculty ensure that students
receive a well-rounded education preparing them for successful careers.</p>
<img src="slide1.jpg" width="400px" height="150px">
<h3>Quick Links:</h3>
<ul>
<li><a href="courses.html">Explore our courses</a></li>
 <li><a href="departments.html">Learn about our
departments</a></li>
<li><a href="faculty.html">Meet our esteemed
faculty</a></li>
<li><a href="library.html">Visit our state-of-the-art
library</a></li>
</ul>
<hr color="#006400">
<p align="center"><font size="2">&copy; 2023 Evergreen
College. All rights reserved.</font></p>
</td>
</tr>
</table>
</body>
</html>
courses.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Courses - Evergreen College</title>
</head>
<body bgcolor="#f0f0f0">
<table width="80%" align="center" bgcolor="#ffffff" cellpadding="20">
<tr>
<td>
<h1 align="center"><font color="#006400">Evergreen
College</font></h1>
<hr color="#006400">
<table width="100%">
<tr align="center">
<td><a href="index.html"><font
color="#006400">Home</font></a></td>
<td><a href="courses.html"><font
color="#006400">Courses</font></a></td>
<td><a href="departments.html"><font
color="#006400">Departments</font></a></td>
<td><a href="faculty.html"><font
color="#006400">Faculty</font></a></td>
<td><a href="library.html"><font
color="#006400">Library</font></a></td>
</tr>
</table>
 <hr color="#006400">
<h2>Our Courses</h2>
<p>Evergreen College offers a wide range of courses across
various disciplines. Here's a list of our popular programs:</p>
<h3>Undergraduate Programs:</h3>
<ul>
<li>Bachelor of Science in Computer Science</li>
<li>Bachelor of Arts in English Literature</li>
<li>Bachelor of Business Administration</li>
<li>Bachelor of Science in Biology</li>
</ul>
<h3>Graduate Programs:</h3>
<ul>
<li>Master of Science in Data Science</li>
<li>Master of Arts in Education</li>
<li>Master of Business Administration</li>
<li>Master of Public Health</li>
</ul>
<p>For more information about each course, please contact
the respective department.</p>
<hr color="#006400">
<p align="center"><font size="2">&copy; 2023 Evergreen
College. All rights reserved.</font></p>
</td>
</tr>
</table>
</body>
</html>
departments.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Departments - Evergreen College</title>
</head>
<body bgcolor="#f0f0f0">
<table width="80%" align="center" bgcolor="#ffffff" cellpadding="20">
<tr>
<td>
<h1 align="center"><font color="#006400">Evergreen
College</font></h1>
<hr color="#006400">
<table width="100%">
 <tr align="center">
<td><a href="index.html"><font color="#006400">Home</font></a></td>
<td><a href="courses.html"><font
color="#006400">Courses</font></a></td>
<td><a href="departments.html"><font
color="#006400">Departments</font></a></td>
<td><a href="faculty.html"><font
color="#006400">Faculty</font></a></td>
<td><a href="library.html"><font
color="#006400">Library</font></a></td>
</tr>
</table>
<hr color="#006400">
<h2>Our Departments</h2>
<p>Evergreen College is organized into several departments,
each specializing in different areas of study:</p>
<ul>
<li>Department of Computer Science and Engineering</li>
<li>Department of Arts and Humanities</li>
<li>Department of Business and Management</li>
<li>Department of Natural Sciences</li>
<li>Department of Social Sciences</li>
<li>Department of Mathematics</li>
<li>Department of Health Sciences</li>
</ul>
<p>Each department is staffed with experienced faculty
members and equipped with state-of-the-art facilities to ensure the best
learning experience for our students.</p>
<hr color="#006400">
<p align="center"><font size="2">&copy; 2023 Evergreen
College. All rights reserved.</font></p>
</td>
</tr>
</table>
</body>
</html>
faculty.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Faculty - Evergreen College</title>
</head>
<body bgcolor="#f0f0f0">
<table width="80%" align="center" bgcolor="#ffffff" cellpadding="20">
<tr>
<td>
<h1 align="center"><font color="#006400">Evergreen
College</font></h1>
<hr color="#006400">
<table width="100%">
<tr align="center">
<td><a href="index.html"><font
color="#006400">Home</font></a></td>
<td><a href="courses.html"><font
color="#006400">Courses</font></a></td> <td><a
href="departments.html"><font color="#006400">Departments</font></a></td>
<td><a href="faculty.html"><font
color="#006400">Faculty</font></a></td>
<td><a href="library.html"><font
color="#006400">Library</font></a></td>
</tr>
</table>
<hr color="#006400">
<h2>Our Faculty</h2>
<p>At Evergreen College, we pride ourselves on our
exceptional faculty members who are leaders in their respective fields:</p>
<h3>Department Heads:</h3>
<ul>
<li>Dr. Ajay Tiwari - Computer Science and Engineering</li>
<li>Prof. Shalini Mishra - Arts and Humanities</li>
<li>Dr. Shweta Sharma - Business and Management</li>
<li>Prof. Kusum Sharma - Natural Sciences</li>
<li>Dr. Mahim Sharma - Social Sciences</li>
</ul>
<p>Our faculty members are committed to providing
high-quality education and mentoring to help our students achieve their
full potential.</p>
<hr color="#006400">
<p align="center"><font size="2">&copy; 2023 Evergreen
College. All rights reserved.</font></p>
</td>
</tr>
</table>
</body>
</html>
library.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library - Evergreen College</title>
</head>
<body bgcolor="#f0f0f0">
<table width="80%" align="center" bgcolor="#ffffff" cellpadding="20">
<tr>
<td>
<h1 align="center"><font color="#006400">Evergreen
College</font></h1> <hr color="#006400">
<table width="100%">
<tr align="center">
<td><a href="index.html"><font
color="#006400">Home</font></a></td>
<td><a href="courses.html"><font
color="#006400">Courses</font></a></td>
<td><a href="departments.html"><font
color="#006400">Departments</font></a></td>
<td><a href="faculty.html"><font
color="#006400">Faculty</font></a></td>
<td><a href="library.html"><font
color="#006400">Library</font></a></td>
</tr>
</table>
<hr color="#006400">
<h2>Our Library</h2>
<p>The Evergreen College Library is a state-of-the-art
facility designed to support the academic needs of our students and
faculty.</p>
<h3>Library Features:</h3>
<ul>
<li>Extensive collection of books, journals, and
digital resources</li>
<li>Quiet study areas and group discussion rooms</li>
<li>Computer labs with high-speed internet access</li>
<li>24/7 online access to digital resources</li>
<li>Interlibrary loan services</li>
</ul>
<h3>Library Hours:</h3>
<table border="1" cellpadding="5">
 <tr> <th>Days</th>
<th>Hours</th>
</tr>
<tr>
<td>Monday - Friday</td>
<td>8:00 AM - 10:00 PM</td>
</tr>
<tr>
<td>Saturday</td>
<td>9:00 AM - 6:00 PM</td>
</tr>
<tr>
<td>Sunday</td>
<td>12:00 PM - 8:00 PM</td>
</tr>
</table>
<p>For more information or assistance, please contact our
librarians at [email protected]</p>
<hr color="#006400">
<p align="center"><font size="2">&copy; 2023 Evergreen
College. All rights reserved.</font></p>
</td>
</tr>
</table>
</body>
</html>
CONCLUSION
The college website has been successfully made using basic HTML tags only.
 EXPERIMENT - 3

AIM: Write html code to develop a webpage having two frames that divide the webpage
into two equal rows and then divide the row into equal columns fill each frame with a
different background color.

THEORY:

In HTML, the <frameset> tag is used to create a webpage layout with multiple frames, allowing content
to be displayed in separate sections within the browser window. The <frame> tag is then used within the
<frameset> to define individual frames that hold distinct content, and each frame can be styled
independently. The <frameset> can specify rows or columns, with the rows or cols attribute defining how
the space is divided. By using this approach, you can split the webpage into two equal rows and then
further divide them into columns, with each section styled with a different background color. Although
<frameset> offers flexibility in layout design, it is now considered obsolete in HTML5, with modern
CSS-based techniques (like flexbox or grid) being preferred for layout management.

CODE:

frames.html

<!DOCTYPE html>
<head>
<title>Two Frame Layout</title>
</head>
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="frame1a.html" name="frame1a"
style="background-color:green">
<frame src="frame1b.html" name="frame1b"
style="background-color: aqua;">
</frameset>
<frameset cols="50%,50%">
<frame src="frame2a.html" name="frame2a" style="background-color:
blueviolet;">
<frame src="frame2b.html" name="frame2b"
style="background-color: orangered;">
</frameset>
</frameset>
</html>

frame1a.html

<!DOCTYPE html>
<html lang="en">
 <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frame 1A</title>
</head>
<body>
<h1>Frame 1A</h1>
<p>This is the first frame of the upper row.</p>
<p>Ansh Jain</p>
</body>
</html>

frame1b.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frame 1B</title>
</head>
<body>
<h1>Frame 1B</h1>
<p>This is the second frame of the upper row.</p>
<p>04796402722</p>
</body>
</html>

frame2a.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frame 2A</title>
</head>
<body>
<h1>Frame 2A</h1>
<p>This is the first frame of the lower row.</p>
<p>AIML - III - C</p>
</body>
</html>

frame2b.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frame 2B</title>
</head>
<body>
<h1>Frame 2B</h1>
<p>This is the second frame of the upper row.</p>
<p>Web Technology Lab</p>
</body>
</html>

OUTPUT:
 Experiment – 4

Aim:- Design a web page of your home town with an attractive background color , text color , and Image
, font ect.(use internal CSS)

Code:

<!DOCTYPE html>
<html>
<head>
<title>Welcome to Mountain Valley</title>
<style>
body {
font-family: 'Georgia', serif;
background-color: #f0f7ff;
color: #2c3e50;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background-color: #3498db;
color: white;
text-align: center;
padding: 2rem 0;
margin-bottom: 2rem;
}
h1 {
font-size: 2.5rem;
margin: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.main-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.description {
background-color: white;
padding: 2rem;
 border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.sidebar {
background-color: #e8f4fc;
padding: 1.5rem;
border-radius: 8px;
height: fit-content;
}
.hero-image {
width: 100%;
height: 320px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 1.5rem;
}
footer {
background-color: #2980b9;
color: white;
text-align: center;
padding: 1rem 0;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Welcome to Mountain Valley</h1>
<p>Where Nature Meets Community</p>
</header>
<div class="container">
<img src="town.jpg" alt="Mountain Valley Landscape"
class="hero-image">
<div class="main-content">
<div class="description">
<h2>About Our Town</h2>
<p>Mountain Valley is a charming town nestled in the heart
of the mountains. Known for its breathtaking landscapes and friendly
community, our town offers a perfect blend of natural beauty and modern
amenities.</p>

<h3>What Makes Us Special</h3>

<p>Our town is famous for its seasonal festivals, local
artisans, and outdoor recreation opportunities. Whether you're hiking our
scenic trails, enjoying local cuisine, or participating in community
events, Mountain Valley has something for everyone.</p>
</div>
<div class="sidebar">
<h3>Quick Facts</h3>
<ul>
<li>Population: 15,000</li>
<li>Elevation: 2,500 ft</li>
<li>Founded: 1875</li>
<li>Climate: Four distinct seasons</li>
</ul>
</div>
</div>
</div>
<footer>
<p>(c) 2025 Mountain Valley - A Place to Call Home</p>
</footer>
</body>
</html>

Output:-
 EXPERIMENT NO. – 5

AIM: Use External, Internal, and Inline CSS to format college web page that you created.

CODE:

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Evergreen College</title>
<link rel="stylesheet" href="style.css">
<style>
.welcome-section {
background-color: #f8f8f8;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.welcome-section h2 {
color: #006400;
border-bottom: none;
}
.welcome-section p {
font-size: 16px;
}
.quick-links li {
transition: transform 0.2s;
}
.quick-links li:hover {
transform: translateX(5px);
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Evergreen College</h1>
</div>
<hr class="divider">
<nav class="nav-menu">
<a href="index.html">Home</a>
 <a href="courses.html">Courses</a>
<a href="departments.html">Departments</a>
<a href="faculty.html">Faculty</a>
<a href="library.html">Library</a>
</nav>
<hr class="divider">
<div class="content">
<div class="welcome-section">
<h2>Welcome to Evergreen College</h2>
<p>Evergreen College is a prestigious institution dedicated
to providing high-quality education and fostering academic excellence. Our
diverse range of programs and experienced faculty ensure that students
receive a well-rounded education preparing them for successful careers.</p>
</div>
<img src="slide1.jpg" style="width: 100%; max-width: 600px;
height: auto; display: block; margin: 20px auto; border: 3px solid #006400;
border-radius: 8px;" alt="Campus View">
<div class="quick-links">
<h3>Quick Links:</h3>
<ul>
<li><a href="courses.html">Explore our courses</a></li>
<li><a href="departments.html">Learn about our
departments</a></li>
<li><a href="faculty.html">Meet our esteemed
faculty</a></li>
<li><a href="library.html">Visit our state-of-the-art
library</a></li>
</ul>
</div>
</div>
<hr class="divider">
<div class="footer">
&copy; 2023 Evergreen College. All rights reserved.
</div>
</div>
</body>
</html>

Courses.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Courses - Evergreen College</title>
<link rel="stylesheet" href="style.css">
<style>
.program-section {
margin-bottom: 30px;
}
.program-section h3 {
background-color: #eaf5ea;
padding: 10px;
border-radius: 5px;
}
.program-list li {
margin-bottom: 12px;
position: relative;
padding-left: 15px;
}
.program-list li::before {
content: "•";
color: #006400;
font-weight: bold;
position: absolute;
left: 0;
}
.contact-info {
background-color: #f9f9f9;
padding: 15px;
border-radius: 5px;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Evergreen College</h1>
</div>
<hr class="divider">
<nav class="nav-menu">
<a href="index.html">Home</a>
<a href="courses.html">Courses</a>
<a href="departments.html">Departments</a>
<a href="faculty.html">Faculty</a>
<a href="library.html">Library</a>
</nav>
<hr class="divider">
 <div class="content">
<h2>Our Courses</h2>
<p>Evergreen College offers a wide range of courses across
various disciplines. Here's a list of our popular programs:</p>
<div class="program-section">
<h3 style="color: #006400; font-weight: 600;
letter-spacing: 0.5px;">Undergraduate Programs:</h3>
<ul class="program-list">
<li>Bachelor of Science in Computer Science</li>
<li>Bachelor of Arts in English Literature</li>
<li>Bachelor of Business Administration</li>
<li>Bachelor of Science in Biology</li>
</ul>
</div>
<div class="program-section">
<h3 style="color: #006400; font-weight: 600;
letter-spacing: 0.5px;">Graduate Programs:</h3>
<ul class="program-list">
<li>Master of Science in Data Science</li>
<li>Master of Arts in Education</li>
<li>Master of Business Administration</li>
<li>Master of Public Health</li>
</ul>
</div>
<p class="contact-info">For more information about each course,
please contact the respective department.</p>
</div>
<hr class="divider">
<div class="footer">
&copy; 2023 Evergreen College. All rights reserved.
</div>
</div>
</body>
</html>

Departments.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Departments - Evergreen College</title>
<link rel="stylesheet" href="style.css">
<style>
 .departments-list {
list-style-type: none;
padding: 0;
}
.departments-list li {
padding: 12px 15px;
margin-bottom: 10px;
background-color: #f8f8f8;
border-left: 4px solid #006400;
border-radius: 0 5px 5px 0;
transition: background-color 0.3s;
}
.departments-list li:hover {
background-color: #eaf5ea;
}

.intro-text {
font-size: 16px;
line-height: 1.6;
margin-bottom: 25px;
}
.facilities-text {
background-color: #f9f9f9;
padding: 15px;
border-radius: 5px;
margin-top: 25px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Evergreen College</h1>
</div>
<hr class="divider">
<nav class="nav-menu">
<a href="index.html">Home</a>
<a href="courses.html">Courses</a>
<a href="departments.html">Departments</a>
<a href="faculty.html">Faculty</a>
<a href="library.html">Library</a>
</nav>
<hr class="divider">
<div class="content">
<h2>Our Departments</h2>
 <p class="intro-text">Evergreen College is organized into
several departments, each specializing in different areas of study:</p>
<ul class="departments-list">
<li style="background-color: #eaf5ea; border-left-width:
6px; font-weight: bold;">Department of Computer Science and
Engineering</li>
<li>Department of Arts and Humanities</li>
<li>Department of Business and Management</li>
<li>Department of Natural Sciences</li>
<li>Department of Social Sciences</li>
<li>Department of Mathematics</li>
<li>Department of Health Sciences</li>
</ul>
<p class="facilities-text">Each department is staffed with
experienced faculty members and equipped with state-of-the-art facilities
to ensure the best learning experience for our students.</p>
</div>
<hr class="divider">
<div class="footer">
&copy; 2023 Evergreen College. All rights reserved.
</div>
</div>
</body>
</html>

Faculty.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Faculty - Evergreen College</title>
<link rel="stylesheet" href="style.css">
<style>
.faculty-intro {
background-color: #f8f8f8;
padding: 15px;
border-radius: 5px;
margin-bottom: 25px;
font-style: italic;
}
.department-heads {
margin-top: 30px;
}
 .faculty-list {
list-style-type: none;
padding: 0;
}
.faculty-list li {
padding: 12px;
margin-bottom: 10px;
border-bottom: 1px solid #e0e0e0;
display: flex;
align-items: center;
}
.faculty-icon {
width: 20px;
height: 20px;
margin-right: 10px;
background-color: #006400;
border-radius: 50%;
}
.commitment-text {
margin-top: 30px;
padding: 15px;
background-color: #eaf5ea;
border-radius: 5px;
text-align: center;
font-weight: 500;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Evergreen College</h1>
</div>
<hr class="divider">
<nav class="nav-menu">
<a href="index.html">Home</a>
<a href="courses.html">Courses</a>
<a href="departments.html">Departments</a>
<a href="faculty.html">Faculty</a>
<a href="library.html">Library</a>
</nav>
<hr class="divider">
<div class="content">
<h2>Our Faculty</h2>
<p class="faculty-intro">At Evergreen College, we pride
ourselves on our exceptional faculty members who are leaders in their
respective fields:</p>
<div class="department-heads">
<h3>Department Heads:</h3>
<ul class="faculty-list">
<li style="background-color: #f5f5f5; border-left: 3px
solid #006400; padding-left: 15px;">
<span class="faculty-icon"></span>
Dr. Ajay Tiwari - Computer Science and Engineering
</li>
<li>
<span class="faculty-icon"></span>
Prof. Shalini Mishra - Arts and Humanities
</li>
<li>
<span class="faculty-icon"></span>
Dr. Shweta Sharma - Business and Management
</li>
<li>
<span class="faculty-icon"></span>
Prof. Kusum Sharma - Natural Sciences
</li>
<li>
<span class="faculty-icon"></span>
Dr. Mahim Sharma - Social Sciences
</li>
</ul>
</div>
<p class="commitment-text">Our faculty members are committed to
providing high-quality education and mentoring to help our students achieve
their full potential.</p>
</div>
<hr class="divider">
<div class="footer">
&copy; 2023 Evergreen College. All rights reserved.
</div>
</div>
</body>
</html>

Library.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library - Evergreen College</title>
<link rel="stylesheet" href="style.css">
<style>
.library-intro {
background-color: #f8f8f8;
padding: 15px;
border-radius: 5px;
margin-bottom: 25px;
line-height: 1.6;
}
.features-list {
background-color: #f5f5f5;
padding: 15px 15px 15px 35px;
border-radius: 5px;
margin-bottom: 25px;
}
.features-list li {
margin-bottom: 12px;
}
.features-list li::marker {
color: #006400;
}
.hours-table {
width: 70%;
margin: 25px auto;
border-collapse: collapse;
}
.hours-table th {
background-color: #006400;
color: white;
padding: 12px;
text-align: left;
}
.hours-table td {
padding: 10px 12px;
border: 1px solid #ddd;
}
.hours-table tr:nth-child(even) {
background-color: #f2f2f2;
}
.hours-table tr:hover {
background-color: #e9e9e9;
}
 .contact-info {
text-align: center;
margin-top: 30px;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Evergreen College</h1>
</div>
<hr class="divider">
<nav class="nav-menu">
<a href="index.html">Home</a>
<a href="courses.html">Courses</a>
<a href="departments.html">Departments</a>
<a href="faculty.html">Faculty</a>
<a href="library.html">Library</a>
</nav>
<hr class="divider">
<div class="content">
<h2>Our Library</h2>
<p class="library-intro">The Evergreen College Library is a
state-of-the-art facility designed to support the academic needs of our
students and faculty.</p>
<h3>Library Features:</h3>
<ul class="features-list">
<li>Extensive collection of books, journals, and digital
resources</li>
<li>Quiet study areas and group discussion rooms</li>
<li>Computer labs with high-speed internet access</li>
<li>24/7 online access to digital resources</li>
<li>Interlibrary loan services</li>
</ul>

<h3>Library Hours:</h3>
<table class="hours-table" style="box-shadow: 0 2px 5px
rgba(0,0,0,0.1);">
<tr>
<th>Days</th>
<th>Hours</th>
</tr>
<tr>
<td>Monday - Friday</td>
 <td>8:00 AM - 10:00 PM</td>
</tr>
<tr>
<td>Saturday</td>
<td>9:00 AM - 6:00 PM</td>
</tr>
<tr>
<td>Sunday</td>
<td>12:00 PM - 8:00 PM</td>
</tr>
</table>
<p class="contact-info">For more information or assistance,
please contact our librarians at <a
href="mailto:[email protected]" style="color: #006400;
font-weight: bold;">[email protected]</a></p>
</div>
<hr class="divider">
<div class="footer">
&copy; 2023 Evergreen College. All rights reserved.
</div>
</div>
</body>
</html>

styles.css
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.header {
text-align: center;
}
.header h1 {
color: #006400;
margin-bottom: 15px;
}
.divider {
border: none;
height: 2px;
background-color: #006400;
margin: 15px 0;
}
.nav-menu {
width: 100%;
text-align: center;
margin: 0 auto;
}
.nav-menu a {
text-decoration: none;
color: #006400;
padding: 10px 15px;
display: inline-block;
font-weight: bold;
transition: background-color 0.3s, color 0.3s;
}
.nav-menu a:hover {
background-color: #006400;
color: white;
border-radius: 4px;
}
.content {
padding: 10px 0;
}
.content h2 {
color: #333;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.content h3 {
color: #006400;
margin-top: 20px;
}
.content ul {
padding-left: 20px;
}
.content li {
margin-bottom: 8px;
}
.content p {
line-height: 1.6;
 color: #444;
}
a {
color: #006400;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.info-table {
width: 50%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th {
background-color: #006400;
color: white;
padding: 10px;
text-align: left;
}
.info-table td {
padding: 8px 10px;
border: 1px solid #ddd;
}
.info-table tr:nth-child(even) {
background-color: #f2f2f2;
}
.banner-img {
max-width: 100%;
height: auto;
display: block;
margin: 20px 0;
border-radius: 5px;
}
.footer {
text-align: center;
font-size: 12px;
color: #666;
margin-top: 30px;
}
.quick-links {
background-color: #f9f9f9;
padding: 15px;
border-radius: 5px;
margin: 20px 0;
}
.quick-links h3 {
margin-top: 0;
}
OUTPUT
 Experiment – 6

Aim: Create a HTML page with JavaScript which takes integer number as input and tells whether the
number is ODD or EVEN.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Even or Odd Checker</title>
<script>
function checkEvenOdd() {
const number =
parseInt(document.getElementById('numberInput').value);
if (isNaN(number)) {
alert('Please enter a valid number');
return;
}
const result = number % 2 === 0 ? 'Even' : 'Odd';
document.getElementById('result').innerText = 'The number is '
+ result;
}
</script>
</head>
<body>
<h1>Even or Odd Checker</h1>
<p>Enter an integer:</p>
<input type="number" id="numberInput">
<button onclick="checkEvenOdd()">Check</button>
<p id="result"></p>
</body>
</html>

Output:
 Experiment – 7

Aim : Create HTML Page that Contains form with fields Name , Email ,Mobile No. , Gender , Favourite
Color and a button now write a JavaScript code to combine and display the information in textbox when
the button is clicked and the implement the Validation.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Submission with Validation</title>
<script>
function validateAndSubmit() {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const mobile = document.getElementById('mobile').value;
const gender =
document.querySelector('input[name="gender"]:checked');
const color = document.getElementById('color').value;
if (name === '' || email === '' || mobile === '' || !gender ||
color === '') {
alert('Please fill all the fields!');
return false;
}
const genderValue = gender.value;
const combinedInfo = `Name: ${name}\nEmail: ${email}\nMobile:
${mobile}\nGender: ${genderValue}\nFavourite Color: ${color}`;
document.getElementById('displayText').value = combinedInfo;
}
</script>
</head>
<body>
<h1>Form Submission</h1>
<form onsubmit="event.preventDefault(); validateAndSubmit();">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="mobile">Mobile No.:</label>
<input type="text" id="mobile" name="mobile" required><br><br>
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="Male"> Male
<input type="radio" id="female" name="gender" value="Female">
Female
<input type="radio" id="other" name="gender" value="Other">
Other<br><br>
<label for="color">Favourite Color:</label>
<input type="color" id="color" name="color" required><br><br>
<button type="submit">Submit</button>
</form>
<h2>Combined Information:</h2>
<textarea id="displayText" rows="10" cols="50" readonly></textarea>
</body>
</html>

Output:
 Experiment – 8

Aim: Create a XML file to store student information like enrollment number , name , mobile number ,
email id.

Source Code:

<?xml version="1.0" encoding="UTF-8"?>

<students>
<student>
<enrollmentNumber>12345</enrollmentNumber>
<name>John Doe</name>
<mobileNumber>123-456-7890</mobileNumber>
<email>[email protected]</email>
</student>
<student>
<enrollmentNumber>67890</enrollmentNumber>
<name>Jane Smith</name>
<mobileNumber>098-765-4321</mobileNumber>
<email>[email protected]</email>
</student>
<student>
<enrollmentNumber>11223</enrollmentNumber>
<name>Alex Johnson</name>
<mobileNumber>555-123-4567</mobileNumber>
<email>[email protected]</email>
</student>
</students>

Output:
 Experiment – 9

Aim : Write a php script to read data from text file and display it in html table(the file contains info in
format name, password, email).

Source Code:

PHP Script (read_data.php)

<?php
$file = "data.txt";
if (file_exists($file)) {
$lines = file($file);
echo "<table border='1'>";
echo "<tr><th>Name</th><th>Password</th><th>Email</th></tr>";
foreach ($lines as $line) {
$line = trim($line);
$data = explode(",", $line);
if (count($data) == 3) {
echo "<tr>";
echo "<td>" . htmlspecialchars($data[0]) . "</td>"; // Name
echo "<td>" . htmlspecialchars($data[1]) . "</td>"; // Password
echo "<td>" . htmlspecialchars($data[2]) . "</td>"; // Email
echo "</tr>";
}
}
echo "</table>";
} else {
echo "File not found.";
}
?>

data.txt

Ansh Jain, [email protected], anshjain

Abhinav Gupta, [email protected], abhinav1

Jatin Bansal,[email protected], jatinb

Ouput: