Scribd
Upload
26 views

darshit1 (1)

Uploaded by

omstationary0578
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
26 views

darshit1 (1)

Uploaded by

omstationary0578
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/ 35

WEB TECHNOLOGY

PRACTICAL FILE
(BCS 552)

GL BAJAJ INSTITUTE OF TECHNOLOGY AND


MANAGEMENT, GREATER NOIDA

BACHELOR OF TECHNOLOGY
In
COMPUTER SCIENCE AND ENGINEERING

Session: 2024-2025

SUBMITTED BY :- SUBMITTED TO :-

Name: Darshit Mishra Ms.Mitali Bhatt


Section: B (Assistant Professor)
Semester: 5th
Roll No.: 2301920109007
Group: G2
PRACTICAL: 1

AIM: Write HTML program for designing your institute website. Display departmental
information of your institute on the website.

THEORY:

HTML: HTML provides the structure and content of the webpage. It defines elements like headings,
paragraphs, tables, and images that make up the visible part of the website.
In this practical, HTML is used to create a web page for an educational institute, displaying key
information such as the institute name, a brief introduction, and details about the various departments.

Header Section: The <head> tag contains metadata such as the title (<title>GL Bajaj Institute of
Technology and Management</title>), which is displayed on the browser tab.
This section also includes meta tags for responsive design, ensuring the website looks good on all
devices (desktops, tablets, and smartphones).

Body Section: The <body> tag contains the main content. In this program, it is divided into:

 About Us: A section (<section id="home">) introducing the institute.


 Departments: Another section (<section id="departments">) presenting departmental
information in a structured table format (<table>), including department descriptions, HOD
names, and images.

 Styling: Inline CSS is used for quick styling within the HTML tags. For example, the
background-color attribute is used to change the background color of the body and table, while
the align attribute is used for text alignment.
You can enhance the design further by separating the CSS into an external stylesheet for better
maintainability.

 Images (<img>): The program includes images for the institute logo and Head of Departments
(HODs). The src attribute defines the file location of the images, and the alt attribute provides
alternative text in case the images don’t load.

This basic structure ensures that the departmental information of the institute is displayed effectively
on the website.
This code illustrates the fundamentals of HTML and inline CSS, demonstrating how to create a basic
institutional website with departmental information. It provides a clear structure for content,
organizes data in a readable format, and uses simple design elements to make the webpage user-
friendly and visually appealing.
1
SOURCE CODE:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>G.L. Bajaj Institute of Technology and Management</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f0f8ff;
color: #333;
}

header {
background: linear-gradient(to right, #1e90ff, #00bfff);
color: white;
text-align: center;
padding: 70px 20px;
position: relative;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

header h1 {
font-size: 3em;
margin: 0;
color: #fff700;
}

header img {
width: 120px;
height: auto;
margin-bottom: 20px;
}

nav {
margin-top: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 20px;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: 1.1em;
transition: color 0.3s;
}
nav a:hover {
color: #ff4500;
}

main {
padding: 20px;
}

section {
background: white;
margin-bottom: 20px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}

section:hover {
transform: translateY(-5px);
}

.responsive {
width: 100%;
height: auto;
border-radius: 8px;
}

3
.hero {
background: rgba(255, 99, 71, 0.8);
padding: 30px;
border-radius: 8px;
margin: 20px 0;
color: white;
}

.hero h2 {
color: #fff700;
}

.card-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}

.card {
background: #f8f9fa;
border: 2px solid #1e90ff;
border-radius: 8px;
padding: 15px;
text-align: center;
transition: transform 0.3s;
}

.card:hover {
transform: scale(1.05);
background-color: #1e90ff;
color: white;
}

.faculty-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}

.faculty-member {
background: #f8f9fa;
border-radius: 8px;
padding: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
4
.faculty-member h3 {
margin: 0 0 10px 0;
color: #1e90ff;
}

.faculty-member p {
color: #333;
}

footer {
background: #1e90ff;
color: white;
text-align: center;
padding: 15px 0;
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
position: relative;
bottom: 0;
width: 100%;
}

footer a {
color: #ff4500;
text-decoration: none;
}

footer a:hover {
text-decoration: underline;
}

@media (max-width: 768px) {


header h1 {
font-size: 2.5em;
}

nav ul li {
display: block;
margin: 10px 0;
}

.card-container {
grid-template-columns: 1fr;
}

.faculty-container {
grid-template-columns: 1fr;
}
5
header img {
width: 80px;
/* Adjust the logo size for mobile view */
}
}
</style>
</head>

<body>
<header>
<img src="GL BAJAJ LOGO.jpg" alt="G.L. Bajaj Institute Logo">
<h1>G.L. Bajaj Institute of Technology and Management</h1>
<nav>
<ul>
<li><a href="#about">About Us</a></li>
<li><a href="#departments">Departments</a></li>
<li><a href="#faculty">Faculty</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<main>
<section id="about" class="hero">
<h2>About Us</h2>
<img src="GL BAJAJ PHOTO.jpg" alt="Institute Building" class="responsive">
<p>Welcome to G.L. Bajaj Institute, a center for excellence in technical education. Our
mission is tonurture young minds, imparting skills that drive innovation and leadership in engineering
and technology. GL Bajaj Institute of Technology and Management is one of the quality driven
Educational Institute in the Greater Noida/Delhi-NCR Region. GL Bajaj stands out as one of the best
engineering and management college in UP. It also stands out in its approach to assist and equip the
students for their overall development, giving them a strong foundation for a successful future. The
institute offers B.Tech, MBA and MCA programs.</p>
</section>
<section id="departments">
<h2>Engineering Departments</h2>
<div class="card-container">
<div class="card">
<h3>Computer Science Engineering</h3>
<p>Focuses on computational theory, algorithms, and the development of software
systems.</p>
</div>
<div class="card">
<h3>Electronics & Communication Engineering</h3>
<p>Specializes in electronic circuits, communication systems, and embedded
systems.</p>
</div> 6
<div class="card">
<h3>Mechanical Engineering</h3>
<p>Learn about mechanical systems, thermodynamics, and manufacturing processes.</p>
</div>
<div class="card">
<h3>Information Technology</h3>
<p>Combines computer science with business applications, focusing on information
systems.</p>
</div>
<div class="card">
<h3>Civil Engineering</h3>
<p>Design and supervise construction projects, including buildings, roads, and
bridges.</p>
</div>
</div>
</section>
<section id="faculty">
<h2>Meet Our Faculty</h2>
<div class="faculty-container">
<div class="faculty-member">
<h3>Dr. Sansar Singh Chauhan</h3>
<p>Head of Computer Science Engineering, expert in Artificial Intelligence and Data
Science.</p>
</div>
<div class="faculty-member">
<h3>Dr. Satyendra Sharma</h3>
<p>Head of Electronics & Communication Engineering, with experience in Embedded
Systems.</p>
</div>
<div class="faculty-member">
<h3>Dr. VR Mishra</h3>
<p>Head of Mechanical Engineering, specializes in Thermodynamics and Robotics.</p>
</div>
<div class="faculty-member">
<h3>Dr. Prashant Mukherjee</h3>
<p>Head of Civil Engineering, expert in Structural Engineering and Project
Management.</p>
</div>
</div>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
<p>Phone: 123-456-7890</p>
<p>Address:Plot no 1, Knowledge Park 3, Greater Noida ,India</p>
</section>
</main>
7
<footer>
<p>&copy; 2024 G.L. Bajaj Institute of Technology and Management. All rights reserved.</p>
</footer>
</body>

</html>

OUTPUT:

8
9
PRACTICAL: 2

AIM: Write HTML program to design an entry form for employee details.

THEORY:

An employee entry form is a critical component in human resources and information systems for
gathering essential details about employees in a structured manner. The form ensures that employee
data is collected consistently and efficiently, making it easier to store, process, and retrieve
information when needed.

Purpose of Employee Entry Forms

1. Purpose of Forms: Employee entry forms are primarily used for collecting structured data
about employees in organizations. They streamline the onboarding process by ensuring all
essential employee details—like personal information, job role, and salary—are captured
accurately.

2. Data Collection and Standardization:


o Forms are crucial tools for standardizing data collection. By having predefined fields
such as name, email, phone number, and job position, organizations can ensure
consistency and completeness of information.
o Standardization helps in easily managing employee records and integrating the data with
payroll, HR systems, and organizational databases.

3. User Interaction: Forms are designed to be user-friendly, ensuring ease of use. Clear labels,
logical grouping of fields, and instructions enhance the user's ability to provide the necessary
data without confusion or errors. This leads to improved data quality.

4. Form Validation: An important feature of forms is built-in validation, which ensures that
users fill out required fields and provide information in the correct format (e.g., email or phone
number). This prevents incomplete or incorrect data from being submitted, improving the
accuracy of the information collected.

5. Data Privacy and Security: Forms often collect sensitive information such as personal and
financial details. Ensuring data privacy and security is essential to protect this information
from unauthorized access. Organizations must follow data protection laws (like GDPR) and
ensure that the collected data is securely stored and processed.

6. Submission and Processing: Once the form is submitted, the data is typically sent to a server
for processing. This involves handling the information according to the organization’s data
management policies, which may include storing it in databases, generating employee
profiles, or processing it for payroll or HR purposes.

10
00
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Entry Form</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #ff9966, #ff5e62); /* Colorful background */
}
.form-container {
width: 50%;
margin: auto;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
position: relative;
}
h2 {
text-align: center;
color: #333;
}
label {
font-weight: bold;
}
input[type="text"], input[type="email"], input[type="number"], input[type="date"], select {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="checkbox"] {
margin-right: 10px;
}
.
checkbox-group {
margin-bottom: 20px;
}
input[type="submit"] {
width: 100%;
background-color: #4CAF50;
color: white; 11
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.photo {
position: absolute;
top: 20px;
right: 20px;
border-radius: 50%;
width: 100px;
height: 100px;
object-fit: cover;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="form-container">
<img src="Prashant photo.jpg" alt="Employee Photo" class="photo">
<br>
<h2>Employee Details </h2>
<form action="/submit_form" method="POST">
<label for="empid">Employee ID:</label>
<input type="text" id="empid" name="empid" placeholder="Enter employee ID" required>

<label for="name">Full Name:</label>


<input type="text" id="name" name="name" placeholder="Enter full name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter email" required>

<label for="phone">Phone Number:</label>


<input type="text" id="phone" name="phone" placeholder="Enter phone number" required>

<label for="dept">Department:</label>
<select id="dept" name="dept" required>
<option value="" disabled selected>Select department</option>
<option value="HR">HR</option>
<option value="IT">IT</option>
<option value="Sales">Sales</option>
<option value="Finance">Finance</option>
</select>
<label for="dept">Position:</label>
<select id="dept" name="dept" required> 12

<option value="" disabled selected>Select Position</option>


<option value="HR">Software Developer</option>
<option value="IT">Project Manager</option>
<option value="Sales">UI/UX Designer</option>
<option value="Finance">Data Analyst</option>
<option value="Finance">HR Manager</option>
</select>

<label for="salary">Salary:</label>
<input type="number" id="salary" name="salary" placeholder="Enter salary" required>

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob" required>

<div class="checkbox-group">
<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label><br>

<input type="radio" id="female" name="gender" value="Female">


<label for="female">Female</label><br>

<input type="radio" id="other" name="gender" value="Other">


<label for="other">Other</label><br>
</div>

<label for="address">Address:</label><br>
<textarea id="address" name="address" placeholder="Enter full address" rows="2"
required></textarea>
<div class="checkbox-group">
<label>Skills:</label><br>
<input type="checkbox" id="java" name="skills" value="Java">
<label for="java">Java</label><br>
<input type="checkbox" id="python" name="skills" value="Python">
<label for="python">Python</label><br>
<input type="checkbox" id="html" name="skills" value="HTML">
<label for="html">HTML</label><br>
<input type="checkbox" id="css" name="skills" value="CSS">
<label for="css">CSS</label><br>
<input type="checkbox" id="javascript" name="skills" value="JavaScript">
<label for="javascript">JavaScript</label><br>
</div>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html> 13
OUTPUT:

14
PRACTICAL: 3

AIM: Develop a responsive website using CSS and HTML. Website may be for commercial
website.

THEORY:

1. HTML Structure:
 This HTML structure defines sections such as the header, hero, projects (services), and footer.
 Each section is styled with div containers, using classes like .container, .gallery-grid, .service-
container, etc., which will be styled with CSS to make the layout responsive and visually
appealing.
 The <header> contains the navigation menu, with links to different sections like "Home,"
"Services," and "About Us."
 The <section> elements represent different parts of the page, such as the hero banner, project
gallery, etc.
 The footer includes contact details and social media links, styled for consistency with the
website theme.
2. CSS Structure:
 The * { margin: 0; padding: 0; box-sizing: border-box; } rule ensures all elements have
consistent padding and margins.
 The body { font-family: 'Poppins', sans-serif; background-color: #f4f4f9; } rule sets the
default font and background color.
 In the header, .container is used to center content and control the width, while the navigation
is set to float on larger screens and stacks vertically on smaller screens using media queries.
 The #hero section uses a background image that covers the screen (background: url(...) no-
repeat center center/cover;), with a dark overlay (::before) for readability of the text.
 The .service-container and .gallery-grid use flexbox and grid layouts to ensure the items inside
them are evenly distributed and responsive.
 Media Queries (at the bottom) make the design adjust for smaller screens by changing font
sizes, layout direction, and element spacing.

SOURCE CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Artistry Hub</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
} 15
body {
font-family: 'Poppins', sans-serif;
background-color: #f4f4f9;
color: #333;
line-height: 1.6;
}

a{
text-decoration: none;
color: inherit;
}

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

header {
background-color: #0d9bd8;
color: #fff;
padding: 1rem 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}

header h1 {
float: left;
font-size: 2rem;
}

header nav {
float: right;
}

header nav ul {
list-style: none;
}

header nav ul li {
display: inline-block;
margin-left: 20px;
}

header nav ul li a { 16
color: #e2004f;
padding: 12px 15px;
transition: background 0.3s ease;
}

header nav ul li a:hover {


background-color: #555;
border-radius: 5px;
}

#hero {
height: 100vh;
background: url('p3_bachground.webp') no-repeat center center/cover;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
position: relative;
}

#hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}

#hero h2 {
font-size: 3.5rem;
font-weight: bold;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}

#hero p {
font-size: 1.3rem;
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 1;
}

17
#hero .cta-button {
margin-top: 2rem;
padding: 10px 20px;
background-color: #47ff63;
color: #ffffff;
border: none;
border-radius: 5px;
font-size: 1.2rem;
cursor: pointer;
transition: background-color 0.3s ease;
position: relative;
z-index: 1;
}

#hero .cta-button:hover {
background-color: #ff4500;
}

#about {
padding: 4rem 0;
background-color: #fff;
text-align: center;
}

#about h2 {
margin-bottom: 2rem;
font-size: 2.5rem;
color: #333;
}

#premium-services {
padding: 4rem 0;
background-color: #f4f4f9;
}
#premium-services h2 {
text-align: center;
margin-bottom: 2rem;
font-size: 2.5rem;
color: #333;
}
.service-container {
display: flex;
justify-content: space-between;
text-align: center;
flex-wrap: wrap;
}

18
.service-item {
flex: 1 1 30%;
margin: 20px;
padding: 20px;
background: #f9f9f9;
border-radius: 10px;
transition: transform 0.3s ease;
}

.service-item:hover {
transform: translateY(-10px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.service-item h3 {
margin-bottom: 1rem;
color: #ff6347;
}

.service-item p {
font-size: 1rem;
color: #666;
}

#projects {
padding: 4rem 0;
background-color: #fff;
}

#projects h2 {
text-align: center;
margin-bottom: 2rem;
font-size: 2.5rem;
color: #333;
}

.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
}

.gallery-item {
position: relative;
overflow: hidden;
}

19
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}

.gallery-item:hover img {
transform: scale(1.1);
}

.gallery-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 10px;
text-align: center;
font-size: 1.2rem;
}

#contact {
padding: 4rem 0;
background-color: #f4f4f9;
}

#contact h2 {
text-align: center;
margin-bottom: 2rem;
font-size: 2.5rem;
color: #333;
}

.contact-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
text-align: center;
}

.contact-info {
flex: 1 1 45%;
padding: 20px;
background: #f9f9f9;
border-radius: 10px;
} 20
.contact-info p {
margin-bottom: 1rem;
color: #666;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1.5rem 0;
margin-top: 3rem;
}

footer p {
margin-bottom: 0;
}

footer a {
color: #ff6347;
margin: 0 10px;
}

footer a:hover {
text-decoration: underline;
}

@media (max-width: 768px) {


header h1, header nav {
float: none;
text-align: center;
}

header nav ul li {
display: block;
margin: 10px 0;
}

#hero h2 {
font-size: 2.5rem;
}

#hero p {
font-size: 1rem;
}

.service-container {
flex-direction: column; 21
}
.service-item {
flex: 1 1 100%;
margin-bottom: 20px;
}

.contact-container {
flex-direction: column;
}

.contact-info {
flex: 1 1 100%;
margin-bottom: 20px;
}
}
</style>
</head>
<body>

<header>
<div class="container">
<h1>Artistry Hub</h1>
<nav>
<ul>
<li><h3><a href="#hero">Home</a></h3></li>
<!-- <li><h3><a href="#premium-services">Premium Services</a></h3></li> -->
<li><h3><a href="#projects">Services</a></h3></li>
<li><h3><a href="#about">About Us</a></h3></li>
</ul>
</nav>
</div>
</header>

<section id="hero">
<div class="container">
<h2>Bringing Your Ideas to Life</h2>
<p>Discover innovative design solutions that resonate with your vision. We create, inspire,
and bring your brand to life.</p>
<button class="cta-button">Lets Explore</button>
</div>
</section>

<!-- <section id="premium-services">


<div class="container">
<h2>Our Premium Services</h2>
<div class="service-container">
<div class="service-item"> 22
<h3>Web Development</h3>
<p>Building responsive and engaging websites to enhance user experience.</p>
</div>
<div class="service-item">
<h3>Digital Marketing</h3>
<p>Leveraging online platforms to amplify your brand’s reach and visibility.</p>
</div>
<div class="service-item">
<h3>Branding</h3>
<p>Creating unique brand identities that resonate with your target audience.</p>
</div>
<div class="service-item">
<h3>Consulting</h3>
<p>Providing expert guidance to help businesses make informed decisions.</p>
</div>
<div class="service-item">
<h3>Content Creation</h3>
<p>Producing compelling content that engages and informs your audience.</p>
</div>
<div class="service-item">
<h3>SEO Optimization</h3>
<p>Improving your website's visibility in search engines to attract more traffic.</p>
</div>
</div>
</div>
</section> -->

<section id="projects">
<div class="container">
<h2>Our Services</h2>
<div class="gallery-grid">
<div class="gallery-item">
<img src="project_1.webp" alt="Web Development">
<div class="gallery-caption">Web Development</div>
</div>
<div class="gallery-item">
<img src="project_7.jpg" alt="Artificial Intelligence">
<div class="gallery-caption">Artificial Intelligence</div>
</div>
<div class="gallery-item">
<img src="project_8.jpg" alt="Cloud Computing">
<div class="gallery-caption">Cloud Computing</div>
</div>
<div class="gallery-item">
<img src="project_2.webp" alt="Digital Marketing">
<div class="gallery-caption">Digital Marketing</div>
</div>
<div class="gallery-item"> 23
<img src="project_3.jpg"
alt="Branding">
<div class="gallery-caption">Branding</div>
</div>
<div class="gallery-item">
<img src="project_1.webp" alt="Consulting">
<div class="gallery-caption">Consulting</div>
</div>
<div class="gallery-item">
<img src="project_5.jpg" alt="Content Creation">
<div class="gallery-caption">Content Creation</div>
</div>
<div class="gallery-item">
<img src="project_6.avif" alt="SEO Optimization">
<div class="gallery-caption">SEO Optimization</div>
</div>
</div>
</div>
</section>

<footer>
<div class="container">
<p>&copy; 2024 Artistry Hub. All Rights Reserved.</p>
<p>
<a href="#">Facebook</a> |
<a href="#">Twitter</a> |
<a href="#">Instagram</a>
</p>
<p>Email: [email protected] | Phone: +123 456 7890 | Address: 123 Design St,
Creative City, Artland</p>
</div>
</footer>

</body>
</html>

24
OUTPUT:

25
PRACTICAL: 4

AIM: Write programs using HTML and Java Script for validation of input data.

THEORY:

1. HTML Structure
The HTML structure of this form contains various input fields and labels to gather employee
details. The form includes:
 Text inputs for Employee ID, Full Name, Phone Number, and Address.
 A dropdown list for Department and Position.
 Number input for Salary.
 Date input for Date of Birth.
 Radio buttons for Gender selection.

2. CSS Styling
The CSS applied creates a responsive and visually appealing layout:
 A gradient background for the form's container.
 A shadowed, centered box with rounded edges.
 Full-width inputs for consistency, with padding for a clean, user-friendly experience.

3. JavaScript Validation
Key Validations:
 Age Validation: Ensures the user is older than 20 years based on the date of birth entered. It
calculates age by comparing today’s date with the entered date of birth. If the age is below
20, an alert is triggered, and form submission is halted.
 Salary Validation: The salary input is validated to be above 20,000. If the entered salary is
below this threshold, an alert appears, and submission is blocked.

SOURCE CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Entry Form</title>
<style>
/* Styling remains the same */
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #ff9966, #ff5e62);
}
.form-container {
width: 50%;
margin: auto;
background-color: white;
padding: 20px; border-radius: 10px; 26
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
position: relative;
}
h2 {
text-align: center;
color: #333;
}
label {
font-weight: bold;
}
input[type="text"], input[type="email"], input[type="number"], input[type="date"], select {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.photo {
position: absolute;
top: 20px;
right: 20px;
border-radius: 50%;
width: 100px;
height: 100px;
object-fit: cover;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="form-container">
<img src="Prashant photo.jpg" alt="Employee Photo" class="photo">
<h2>Employee Details</h2>
<form onsubmit="return validateForm()">
<label for="empid">Employee ID:</label>
<input type="text" id="empid" name="empid" placeholder="Enter employee ID" required>
<label for="name">Full Name:</label>
27
<input type="text" id="name" name="name" placeholder="Enter full name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter email" required>

<label for="phone">Phone Number:</label>


<input type="text" id="phone" name="phone" placeholder="Enter phone number" required>

<label for="dept">Department:</label>
<select id="dept" name="dept" required>
<option value="" disabled selected>Select department</option>
<option value="HR">HR</option>
<option value="IT">IT</option>
<option value="Sales">Sales</option>
<option value="Finance">Finance</option>
</select>

<label for="position">Position:</label>
<select id="position" name="position" required>
<option value="" disabled selected>Select Position</option>
<option value="Software Developer">Software Developer</option>
<option value="Project Manager">Project Manager</option>
<option value="UI/UX Designer">UI/UX Designer</option>
<option value="Data Analyst">Data Analyst</option>
<option value="HR Manager">HR Manager</option>
</select>
<label for="salary">Salary:</label>
<input type="number" id="salary" name="salary" placeholder="Enter salary" required>

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob" required>
<div class="checkbox-group">
<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="Other">
<label for="other">Other</label><br>
</div>

<label for="address">Address:</label><br>
<textarea id="address" name="address" placeholder="Enter full address" rows="2"
required></textarea>
<div class="checkbox-group"> 28
<label>Skills:</label><br>
<input type="checkbox" id="java" name="skills" value="Java">
<label for="java">Java</label><br>

<input type="checkbox" id="python" name="skills" value="Python">


<label for="python">Python</label><br>

<input type="checkbox" id="html" name="skills" value="HTML">


<label for="html">HTML</label><br>

<input type="checkbox" id="css" name="skills" value="CSS">


<label for="css">CSS</label><br>

<input type="checkbox" id="javascript" name="skills" value="JavaScript">


<label for="javascript">JavaScript</label><br>
</div>

<input type="submit" value="Submit">


</form>
</div>

<script>
function validateForm() {

const dob = document.getElementById("dob").value;


const dobDate = new Date(dob);
const today = new Date();
const age = today.getFullYear() - dobDate.getFullYear();
const monthDiff = today.getMonth() - dobDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < dobDate.getDate())) {
age--;
}
if (age < 20) {
alert("Age must be greater than 20 years.");
return false;
}
const salary = document.getElementById("salary").value;
if (salary < 20000) {
alert("Salary must be more than 20,000.");
return false;
}
return true;
}
</script>

</body>
</html>
29
OUTPUT:

30
PRACTICAL: 5

AIM: Write a program in XML for creation of DTD, which specifies set of rules. Create a
style sheet in CSS/ XSL & display the document in internet explorer.

THEORY:

1. XML (Extensible Markup Language)

Definition: XML is a markup language designed to store and transport data in a structured, human-
readable format. It allows users to define custom tags and data structures, making it flexible for
various applications.
Key Characteristics:
 Hierarchical Structure: XML documents are organized in a tree structure with nested
elements, allowing for complex data representation.
 Self-descriptive: XML uses tags to describe the data, making it easier to understand and
process.
 Platform-independent: XML is plain text and can be used across different platforms and
programming languages.

2. DTD (Document Type Definition)

Definition: A DTD defines the structure and the legal elements and attributes of an XML
document. It acts as a schema that dictates how the XML data should be organized.
Key Components:
 Elements: Defined using <!ELEMENT> declarations, indicating the allowable elements and
their relationships (e.g., catalog contains multiple product elements).
 Attributes: If needed, attributes can be defined for elements, providing additional
information about the data.

3. CSS (Cascading Style Sheets)

Definition: CSS is a stylesheet language used to describe the presentation of an HTML document.
It allows you to control the layout, colors, fonts, and overall appearance of web pages.
Key Features:
 Separation of Content and Presentation: CSS separates content (HTML) from its visual
presentation, promoting maintainability.
 Selectors and Properties: CSS uses selectors to target HTML elements and apply specific
styles (e.g., color, font-size, margin).
 Responsive Design: CSS supports responsive design techniques, allowing web pages to
adapt to various screen sizes and devices.

SOURCE CODE: -

XML Code :- 31
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE catalog [
<!ELEMENT catalog (product+)>
<!ELEMENT product (name, image, description, price, category)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT image (#PCDATA)>
<!ELEMENT description (#PCDATA)>
<!ELEMENT price (#PCDATA)>
<!ELEMENT category (#PCDATA)>
]>
<?xml-stylesheet type="text/css" href="style.css"?>
<catalog>
<product>
<name>Smartphone</name>
<image>https://via.placeholder.com/150x150.png?text=Smartphone</image>
<description>Latest smartphone with high-resolution camera and long-lasting
battery.</description>
<price>15000</price>
<category>Electronics</category>
</product>
<product>
<name>Headphones</name>
<image>https://via.placeholder.com/150x150.png?text=Headphones</image>
<description>Wireless headphones with noise cancellation feature.</description>
<price>1500</price>
<category>Accessories</category>
</product>
<product>
<name>Smartwatch</name>
<image>https://via.placeholder.com/150x150.png?text=Smartwatch</image>
<description>Stylish smartwatch with health tracking features.</description>
<price>2500</price>
<category>Wearable</category>
</product>
</catalog>

CSS Code :-

body {
font-family: Arial, sans-serif;
background-color: #e0e7ff;
margin: 0;
}

.catalog {
display: grid;
gap: 20px;
grid-template-columns: 32
max-width: 1000px;
margin: 20px auto;
padding: 20px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.product {
background-color: #f9f9fb;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
transition: transform 0.2s ease-in-out;
display: flex;
flex-direction: column;
align-items: center;
}
.product-image {
width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 15px;
}
.product-name {
font-size: 1.6em;
font-weight: bold;
color: #1f2937;
margin-bottom: 10px;
text-align: center;
}
.product-description {
font-size: 1em;
color: #555;
margin: 10px 0;
text-align: center;
}
.product-price {
color: #d9534f;
font-size: 1.2em;
font-weight: bold;
margin-top: 10px;
}

.product-category {
font-style: italic;
color: #6366f1;
font-size: 0.9em; 33
margin-top: 5px;
}

OUTPUT :-

34

You might also like