aryan87

PRANVEER SINGH INSTITUTE OF TECHNOLOGY, KANPUR
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
Odd Semester 2024-25
B. Tech.- Second Year
Semester- V
Lab File
Web Technology (BCS552)
Submitted To : Submitted By :
Faculty Name :_________________ Name :_________________
Designation :_________________ Roll No. :_________________
Section :_________________
Table of Contents
• Vision and Mission Statements of the Institute
• Vision and Mission Statements of the Department
• PEOs, POs, PSOs of the Department
• Course Objective and Outcomes
• List of Experiments
• Index
Department Vision Statement
To be a recognized Department of Computer Science & Engineering that produces versatile computer
engineers, capable of adapting to the changing needs of computer and related industry.
Department Mission Statements

The mission of the Department of Computer Science and Engineering is:
i. To provide broad based quality education with knowledge and attitude to succeed in Computer
Science & Engineering careers.
ii. To prepare students for emerging trends in computer and related industry.
iii. To develop competence in students by providing them skills and aptitude to foster culture of
continuous and lifelong learning.
iv. To develop practicing engineers who investigate research, design, and find workable solutions to
complex engineering problems with awareness & concern for society as well as environment.
Program Educational Objectives (PEOs)

i. The graduates will be efficient leading professionals with knowledge of computer science &
engineering discipline that enables them to pursue higher education and/or successful careers in
various domains.
ii. Graduates will possess capability of designing successful innovative solutions to real life problems
that are technically sound, economically viable and socially acceptable.
iii. Graduates will be competent team leaders, effective communicators and capable of working in
multidisciplinary teams following ethical values.
iv. The graduates will be capable of adapting to new technologies/tools and constantly upgrading their
knowledge and skills with an attitude for lifelong learning
Department Program Outcomes (POs)
The students of Computer Science and Engineering Department will be able:
1. Engineering knowledge: Apply the knowledge of mathematics, science, Computer Science &
Engineering fundamentals, and an engineering specialization to the solution of complex engineering
problems.
2. Problem analysis: Identify, formulate, review research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of mathematics,
natural sciences, and Computer Science & Engineering sciences.
3. Design/development of solutions: Design solutions for complex Computer Science &

Engineering problems and design system components or processes that meet the specified needs
with appropriate consideration for the public health and safety, and the cultural, societal, and
environmental considerations.
4. Investigation: Use research-based knowledge and research methods including design of

experiments, analysis and interpretation of data, and synthesis of the information to provide valid
conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
engineering and IT tools including prediction and modelling to complex Computer Science &
Engineering activities with an understanding of the limitations.
6. The Engineering and Society: Apply reasoning informed by the contextual knowledge to assess
societal, health, safety, legal and cultural issues and the consequent responsibilities relevant to the
professional engineering practice in the field of Computer Science and Engineering.
7. Environment and sustainability: Understand the impact of the professional Computer Science
& Engineering solutions in societal and environmental contexts, and demonstrate the knowledge of,
and need for sustainable development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms
of the Computer Science & Engineering practice.
9. Individual and team work: Function effectively as an individual, and as a member or leader in
diverse teams, and in multidisciplinary settings.
10. Communication: Communicate effectively on complex Computer Science & Engineering

activities with the engineering community and with society at large, such as, being able to
comprehend and write effective reports and design documentation, make effective presentations,
and give and receive clear instructions.
11. Project management and finance: Demonstrate knowledge and understanding of the Computer
Science & Engineering and management principles and apply these to one’s own work, as a member
and leader in a team, to manage projects and in multidisciplinary environments.
12. Life-long learning: Recognize the need for, and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological change.
Department Program Specific Outcomes (PSOs)
The students will be able to:
1. Use algorithms, data structures/management, software design, concepts of programming

languages and computer organization and architecture.
2. Understand the processes that support the delivery and management of information systems
within a specific application environment.
Course Outcomes
*Level of Bloom’s Level to be
*Level of Bloom’s Taxonomy Level to be met
Taxonomy Met
L1: Remember 1 L2: Understand 2
L3: Apply 3 L4: Analyze 4
L5: Evaluate 5 L6: Create 6
COs Course Outcomes

List of Experiments
Lab Lab Experiment

Corresponding CO
No.
1
2
3
4
5
6
7
8
9
10
11
12
INDEX
S No Lab Experiment Date of Date of Marks Faculty
Experiment Submission Signature
10
11
12
Experiment: 1
Objective: Write HTML program for designing your institute website. Display
departmental information of your institute on the website.
Code: -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Institue website</title>
<style>
p{
color: rgb(4, 0, 7)
}
div{
color:azure
}
</style>
</head>
<body>
<dl1>
<h1 align="center">PRANVEER SINGH INSTITUE OF TECHNOLOGY</h1>
<br>
<h2 align="center">Welcome to PSIT Kanpur</h2>
<p align="center">The institute provides a stimulating environment for intellectual
development,
free-thinking, and personal growth. The academic setup challenges its students with
dynamic learning
opportunities. We equip them with the skills, insights, attitudes, and practical
experiences to take up
responsibilities in their careers and life</p>
<p align="center">PSIT owes its commitment to excellence to its illustrious faculty.
A stringent
selection process of faculty members is the cornerstone of our success. The
exceptionally talented and
seasoned teaching fraternity motivates the students to push boundaries and become the
best versions of
themselves.</p>
<p align="center">PSIT prepares its students to establish themselves in their chosen
field of
academics with an aim to develop well-rounded and discerning citizens.</p>
<br>
<img align="center" src="https://www.psit.ac.in/assets/webp/home/slider/Slider-for-
Desktop/psit-desktop-slider-(4).webp" height="250px" alt="ARYAN KATIYAR">
<img align="center" src="https://www.psit.ac.in/assets/webp/home/psit-kanpur-
aerial-view.webp" height="250px" alt="ARYAN KATIYAR">
<img align="center" src="https://www.psit.ac.in/assets/webp/home/slider/Slider-for-
Desktop/psit-desktop-slider-(6).webp" height="250px" alt="ARYAN KATIYAR">
<br><br><hr><br><br>
</dl1>
<dl2>
<img align="left"
src="https://www.psit.ac.in/assets/webp/institute/Vision_Mission/vision-
mission.webp" height="250px" >
<h2 align="center">VISION</h2>
<li align="center">To achieve excellence in professional education and create an
ecosystem for
the holistic development of all stakeholders.</li>
<br><br><br><br><br><br><br><br><br><hr><br><br>
</dl2>
<dl3>
<img align="left"src="https://www.psit.ac.in/assets/webp/home/slider/Slider-for-
Desktop/psit-desktop-slider-(9).webp"
height="250px" alt="ARYAN KATIYAR">
<h2 align="center">MISSION</h2>
<li align="center">To provide an environment of effective learning and innovation
transforming
students into dynamic, responsible and productive professionals in their respective
fields, who are capable
of adapting to the changing needs of the industry and society.</li>
<br><br><br><br><br><br><br><br><hr><hr>
</dl3
<dl>
<br>
<img align="left"src="psit1.jpg" height="550px" alt="ARYAN KATIYAR">
<h2 align="center">ABOUT THE INSTITUE...</h2>
<br>
<p align="center">Since its inception in 2004, PSIT has been a frontrunner in the
field of </p>
<p align="center">education with numerous achievements to its name. PSIT believes
in
strengthening the </p>
<p align="center">foundation of the students. Academic research based on rigorous
pedagogy
equips our students</p>
<p align="center">to face challenges in the real world. The institute prepares students
to be ethical
leaders in </p>
<p align="center">a diverse and complex world. PSIT offers various courses in
Engineering,
Pharmaceutical</p>
<p align="center">Sciences, Business Management and Computer Applications. All
departments,
with their dynamic </p>
<p align="center">community of students and distinguished faculty, offer premium
undergraduate
and postgraduate</p>
<p align="center">programs. State of the art facilities and a sprawling 80 acres
campus nestled
amid sylvan </p>
<p align="center">surroundings accelerate the learning process.</p>
<br>
<p align="center">The PSIT campus is an architectural marvel. Designed as the best
environment-friendly campus</p>
<p align="center">in North India, we are committed to providing our students a clean
and healthy
environment. </p>
<p align="center">A 25,000 Ltr RO Plant, a 1350 KW Power Plant and a three-
chambered
Vermicompost Plant reaffirm </p>
<p align="center">our commitment to the cause...</p>
</dl>
<div>
<br>
<h2 align="center">STUDENT CLUBS</h2>
<p align="center">PSIT encourages its students to become actively involved in club
activities.</p>
<p align="center"> involvement of students in these activities can help them in
gaining experience
in technology,</p>
<p align="center"> teamwork, leadership, organization and so on...</p>
<br>
</div>
<div>
<img src="https://www.psit.ac.in/assets/webp/club/ALGO.webp" height="190px" >
<img src="https://www.psit.ac.in/assets/webp/club/ARYABHATA.webp"
height="190px">
<img src="https://www.psit.ac.in/assets/webp/club/BASTION.webp"
height="190px">
<img src="https://www.psit.ac.in/assets/webp/club/DISHA.webp" height="190px">
<img src="https://www.psit.ac.in/assets/webp/club/ENERGY.webp"
height="190px">
<img src="https://www.psit.ac.in/assets/webp/club/INGENIOUS.webp"
height="190px">
<img src="https://www.psit.ac.in/assets/webp/club/IOT%20CLUB.webp"
height="190px">
<img src="https://www.psit.ac.in/assets/webp/club/MAVERICK.webp"
height="190px">
</div><br><br>
<div>
<br>
<h2 align="center">ENGINEERING</h2>
<p align="center">(Affiliated to Dr.APJ AKTU,Lucknow,AICTE Approved)</p>
<p align="center"> CS,CS(AI),CS(AI & ML),CS(IOT),CS(DS),CS(Cyber
Security)AI & ML,AI
& DS,IT,ECE</p>
<br><p
align="center">.......................................................................................................</p><
br>
</div>
<div>
<br>
<h2 align="center">PHARMACY</h2>
<p align="center"> D.PHARM,B.PHARM,M.PHARM</p>
<br><p
align="center">.......................................................................................................</p><
br>
</div>
<div>
<br>
<h2 align="center">MANAGEMENT</h2>
<p align="center"> MBA</p>
<br><p
align="center">.......................................................................................................</p><
br>
</div>
<div>
<br>
<h2 align="center">COMPUTER APPLICATION</h2>
<p align="center"> MCA</p>
<br><p
align="center">.......................................................................................................</p><
br>
</div>
<div>
<br>
<h2 align="center">PROGRAMS OFFERED IN SISTER INSTITUTION</h2>
<p align="center">(Affiliated to CSJM UNIVERSITY,KANPUR,UGC
APPROVED)</p>
<p align="center"> BBA</p>
<p align="center"> BCA</p>
<br><p
align="center">.......................................................................................................</p><
br>
</div>
<dl>
<br>
<img align="right"src="https://www.psit.ac.in/assets/psitpic/engi_5.jpg"
height="350px"
alt="ARYAN KATIYAR">
<h2 align="center">ENGINEERING</h2>
<p align="center">_______________________________________</p>
<br><p align="center">Engineering programs at PSIT, Kanpur do more than just
develop world class engineers and scientists. We nurture these bright minds to grow
into pioneers with a global
perspective, technical expertise, and leadership skills to bring a change in the
world.</p><br>
<p align="center">_______________________________________</p>
<br><br><br><br>
<h2 align="center">DEPARTMENTS</h2>
<p align="center">Department of Computer Science and Engineering (CSE)</p>
<p align="center">Department of Information Technology (IT)</p>
<p align="center">Department of Electronics and Communication Engineering
(ECE)</p>
<p align="center">Department of Electrical and Electronics Engineering </p>
<p align="center">Department of Mechanical Engineering </p>
<br>
</dl>
<div>
<br>
<img
align="right"src="https://psitcoe.ac.in/assets/Uploading/1653733256_df52bb8dfd29da
6fb6ea.jpg"
height="350px" alt="ARYAN KATIYAR">
<h2 align="center">The Department of Computer Science and Engineering
(CSE)</h2>
<p
align="center">________________________________________________________
___</p>
<br>
<p align="center">The Department of the Computer Science and Engineering at PSIT
was formed
in 2004 with an initial intake of 60 students. Ever since its inception, the department
has seen tremendous
growth in terms of academics, higher education, research & innovation. Thus laying
stepping stones of
100% admissions and at present the sanctioned intake for B.Tech in CSE is 300 and
18 for M.Tech.</p>
<p align="center"> The department of Computer Science and Engineering is
dedicated to
provide high-quality undergraduate and postgraduate education to the students to
prepare them for prolific
careers. The Vision of the Department is to be a recognised department that fosters
versatile computer
engineers capable of adapting to the changing needs of computer and related
industry.</p>
<br><br><hr>
</div>
<div>
<br>
<img
align="right"src="https://psitcoe.ac.in/assets/Uploading/1649496472_8f5ff8c82f19dfc
56d42.jpg"
height="250px">
<h2 align="center">The Department of Information Technology (IT)</h2>
<p
align="center">________________________________________________________
___</p>
<br>
<p align="center">A career in Information Technology can involve working in
leading IT
departments, product development teams, or research groups. In this field,the job
requires a combination
of both technical and business skills to attain success.</p>
<p align="center">Department of IT is committed to making the best use of modern
technology
within the organization to help improve quality of services for ordinary people. It also
guides on technical
matters to the departments and supporting them along with the IT road map.</p>
<br><br><hr>
</div>
<div>
<br>
<img
align="right"src="https://psitcoe.ac.in/assets/Uploading/1657536903_7c5f1fa0132ef1f
56c39.jpg"
height="250px ">
<h2 align="center">The Department of Electronics & Communication
Engineering</h2>
<p
align="center">________________________________________________________
___</p>
<br>
<p align="center">The department of Electronics & Communication Engineering has
seen
tremendous growth in terms of academics, higher education, research & innovation.
The Department has
state-of-the-art educational assistances, visual laboratories and skilled faculty ensuring
active teaching learning process to see the constantly growing and changing
industrial and business environment. The
entire culture of the learning process is designed in a way to continuously challenge
the young minds with
ideas with innovative research.</p>
<br><br><hr>
</div>
<div>
<br>
<img
align="right"src="https://psitcoe.ac.in/assets/Uploading/1654596084_1503b3d396ed4
8d277c8.jpg"
height="250px">
<h2 align="center">The Department Of Electrical & Electronics Engineering</h2>
<p
align="center">________________________________________________________
___</p>
<br>
<p align="center">The Department of Electrical and Electronics Engineering
typically deals with
the study and application of electricity, electronics, and electromagnetism. It also deals
with many of the
real problems facing our world today. This field deals with every aspect of handling
information from
sensing and acquisition through communications, networking, switching, processing
and storage. The
Department of Electrical & Electronics Engineering at PSIT was established in 2004.
The main objective
of the department is to offer value-added educational experience through quality
instruction that prepares
graduates for a range of career opportunities in todays world.</p>
<br><br> <hr>
</div>
<div>
<br>
<img
align="right"src="https://psitcoe.ac.in/assets/Uploading/1653561867_c78888f9f7dc9a
71a5a2.jpg"
height="250px”>
<h2 align="center">The Department Of Mechanical Engineering</h2>
<p
align="center">________________________________________________________
___</p>
<br>
<p align="center">The department of mechanical engineering of PSIT started with
the
commencement of the institute in 2004. The department is a well-knit unit comprising
well-versed faculty
from reputed institutes. Laboratories and workshops are well equipped with state-of-
the-art rigs, through
which we strive to provide the undergraduates with holistic know-how of the
trade.</p>
<p align="center"> - Material Science and Testing,</p>
<p align="center"> - Thermodynamics Lab</p>
<p align="center"> - RAC Lab (Refrigeration and Air Conditioning Lab)</p>
<p align="center"> - FM (Fluid Mechanics)</p>
<p align="center"> - Fluid Machinery Lab</p>
<p align="center"> - TOM Lab (Theory of Machines Lab)</p>
<p align="center"> - HMT Lab (Heat and Mass Transfer Lab)</p>
<p align="center">- CAD/ CAM Lab</p>
<br>
</div>
<h2 align="center">THANKYOU FOR VISITING THIS WEBSITE</h2>
<br>
<p align="center">Address : Pranveer Singh Institute Of Technology, Kanpur - Agra
- Delhi
National Highway (NH-19) , Bhauti - Kanpur - 209305
</p>
<p align="center">Toll Free / Help Line : 7670998888</p>
<p align="center">Email : [email protected]</p>
<br>
</body>
</html>
OUTPUT: -
Experiment: 2
Objective: Write HTML program to design an entry form for student

details/employee information/faculty details.
Code: -
<html>
<head>
<title>STUDENT RESGISTRATION FORM</title>
<style>
h2{
background-color: rgb(43, 3, 66);
font-family:'Times New Roman', Times, serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
color: rgb(182, 165, 252);
text-align: center;
text-decoration: underline
}
table{
font-family: verdana;
color:rgb(3, 3, 3);
font-size: 16px;
font-style: normal;
font-weight: bold;
background: linear-gradient(to bottom, #73ffb9 0%, #fd7faf 100%);
border-collapse: collapse;
border: 4px solid #000000;
border-style: hidden;
}
body{
background-color: rgb(182, 165, 252);
}
table.inner{
border: 10px
}
input[type=text], input[type=email], input[type=number]{
width: 50%;
padding: 6px 12px;
margin: 5px 0;
box-sizing: border-box;
}
input[type=submit], input[type=reset]{
width: 15%;
padding: 8px 12px;
margin: 5px 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>STUDENT RESGISTRATION FORM</h3>
<table align="center" cellpadding = "10">

<tr>
<td>First Name</td>
<td><input type="text" name="FirstName" maxlength="50" placeholder="Aryan" />
</td>
</tr>

<tr>
<td>Last Name</td>
<td><input type="text" name="LastName" maxlength="50" placeholder="katiyar"/>
</td>
</tr>

<tr>
<td>Email ID</td>
<td><input type="email" name="EmailID" maxlength="100"
placeholder="[email protected]"/></td>
</tr>

<tr>
<td>Mobile Number</td>
<td>
<input type="text" name="MobileNumber" maxlength="10"
placeholder="9555xxxxxx"/>
(10 Digits Allowed)
</td>
</tr>

<tr>
<td>Gender</td>
<td>
<input type="radio" name="Gender" value="Male" />
Male
<input type="radio" name="Gender" value="Female" />
Female
</td>
</tr>

<tr>
<td>Date of Birth(DOB)</td>
<td>
<select name="BirthDay" id="Birthday_Day">
<option value="-1">Day:</option>
<option value="1">1</option>
</select>
<select name="BirthdayMonth" id="Birthday_Month">
<option value="-1">Month:</option>
<option value="January">Jan(1)</option>
<option value="February">Feb(2)</option>
<option value="March">Mar(3)</option>
<option value="April">Apr(4)</option>
<option value="May">May(5)</option>
<option value="June">Jun(6)</option>
<option value="July">Jul(7)</option>
<option value="August">Aug(8)</option>
<option value="September">Sep(9)</option>
<option value="October">Oct(10)</option>
<option value="November">Nov(11)</option>
<option value="December">Dec(12)</option>
</select>
<select name="BirthdayYear" id="Birthday_Year">
<option value="-1">Year:</option>
</select>
</td>
</tr>

<tr>
<td>Hobbies <br /><br /><br /></td>
<td>
<input type="checkbox" name="HobbyDrawing" value="Drawing" />
Drawing
<input type="checkbox" name="HobbySinging" value="Singing" />
Singing
<input type="checkbox" name="HobbyDancing" value="Dancing" />
Dancing
<input type="checkbox" name="HobbyCooking" value="Cooking" />
Sketching
<br />
<input type="checkbox" name="HobbyOther" value="Other">
Others
<input type="text" name="Other_Hobby" maxlength="50" placeholder="Ex-
Teaching" />
</td>
</tr>

<tr>
<td>Qualification <br /><br /><br /></td>
<td>
<br/>
<input type="checkbox" name="HighSchool" value="High School" />
High School(10th)<br>
<input type="checkbox" name="HigherSchool" value="Higher School" />
Higher School(12th)<br/>
<input type="checkbox" name="Graduation" value="Graduation" />
Graduation(Bachelors)<br/>
<input type="checkbox" name="PostGraduation" value="Post Graduation" />
Post Graduation(Masters)<br/>
<input type="checkbox" name="Phd" value="Phd">
Phd
</td>
</tr>

<tr>
<td>Courses<br />Applied For</td>
<td>
<input type="radio" name="CourseBCA" value="BCA">
BCA(Bachelor of Computer Applications)<br>
<input type="radio" name="CourseBCom" value="B.Com">
B.Com(Bachelor of Commerce)<br>
<input type="radio" name="CourseMCA" value="BCA">
MCA(Master of Computer Applications)<br>
<input type="radio" name="CourseMCom" value="B.Com">
M.Com(Master of Commerce)<br>
</td>
</tr>

<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
Output: -
Experiment: 3
Objective: Develop a responsive website using CSS and HTML. Website may be for
tutorial/blogs/commercial website.
Code: -
<!DOCTYPE html>
<html lang="en">
<head>
<title>LearnHub - Tutorials and Blogs</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<h1>LearnHub</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#tutorials">Tutorials</a></li>
<li><a href="#blogs">Blogs</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section id="home" class="hero">

<h2>Welcome to LearnHub</h2>
<p>Your one-stop platform for learning and exploring tutorials and blogs.</p>
<a href="#tutorials" class="btn">Get Started</a>
</div>
</section>
<section id="tutorials" class="section">

<h2>Tutorials</h2>
<div class="grid">
<div class="card">
<img src="https://via.placeholder.com/150" alt="HTML Tutorial">
<h3>HTML Basics</h3>
<p>Learn the fundamentals of HTML to structure your web pages.</p>
</div>
<div class="card">
<img src="https://via.placeholder.com/150" alt="CSS Tutorial">
<h3>CSS Styling</h3>
<p>Style your web pages with CSS and create beautiful designs.</p>
</div>
<div class="card">
<img src="https://via.placeholder.com/150" alt="JavaScript Tutorial">
<h3>JavaScript</h3>
<p>Add interactivity to your web pages with JavaScript.</p>
</div>
</div>
</div>
</section>
<section id="blogs" class="section">

<h2>Latest Blogs</h2>
<div class="grid">
<div class="card">
<h3>10 Tips to Master Web Development</h3>
<p>Explore these tips to enhance your web development journey.</p>
</div>
<div class="card">
<h3>Why Learn Responsive Design?</h3>
<p>Understand the importance of responsive design in modern websites.</p>
</div>
<div class="card">
<h3>Top 5 CSS Frameworks in 2024</h3>
<p>Discover the best CSS frameworks to speed up your development.</p>
</div>
</div>
</div>
</section>
<section id="contact" class="section">

<h2>Contact Us</h2>
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" placeholder="Enter your name">
</div>
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email">
</div>
<label for="message">Message</label>
<textarea id="message" placeholder="Your message"></textarea>
</div>
<button type="submit" class="btn">Submit</button>
</form>
</div>
</section>
<footer>
<p>© 2024 LearnHub. All rights reserved.</p>
</div>
</footer>
</body>
</html>
/* Global Styles */
body {
margin: 0;
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
/* Header */
header {
background: #007bff;
color: #fff;
padding: 1rem 0;
}
header h1 {
text-align: center;
}
nav ul {
list-style: none;
text-align: center;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
/* Hero Section */
.hero {
background: #f4f4f4;
text-align: center;
padding: 2rem 0;
}
.hero h2 {
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
}
.hero .btn {
display: inline-block;
padding: 0.7rem 1.2rem;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
.hero .btn:hover {
background: #0056b3;
}
/* Section */
.section {
padding: 2rem 0;
}
.section h2 {
text-align: center;
margin-bottom: 1.5rem;
}
/* Grid */
.grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
.card {
background: #fff;
border: 1px solid #ddd;
border-radius: 5px;
padding: 1rem;
text-align: center;
flex: 1 1 calc(30% - 1rem);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.card img {
max-width: 100%;
height: auto;
}
/* Form */
form {
max-width: 600px;
margin: 0 auto;
}
.form-group {
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
display: block;
width: 100%;
padding: 0.7rem;
color: #fff;
border: none;
border-radius: 5px;
}
button:hover {
}
/* Footer */
footer {
background: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
}
/* Responsive */
@media (max-width: 768px) {
.grid {
flex-direction: column;
}
nav ul li {
display: block;
margin: 0.5rem 0;
}
}
Output: -
Experiment: 4
Objective: Write programs using HTML and Java Script for validation of input data.
Code: -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Input Validation Example</title>
<style>
body {
margin: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.error {
color: red;
font-size: 0.9em;
margin-top: 5px;
}
button {
width: 100%;
padding: 10px;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
}
button:hover {
}
.success {
color: green;
text-align: center;
margin-top: 15px;
}
</style>
</head>
<body>
<h1>Form Validation</h1>
<form id="validationForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
<div id="nameError" class="error"></div>
</div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email">
<div id="emailError" class="error"></div>
</div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter
your password">
<div id="passwordError" class="error"></div>
</div>
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" placeholder="Enter your phone
number">
<div id="phoneError" class="error"></div>
</div>
<label for="age">Age:</label>
<input type="number" id="age" name="age" placeholder="Enter your age">
<div id="ageError" class="error"></div>
</div>
<button type="submit">Submit</button>
</form>
<div id="successMessage" class="success"></div>
</div>
<script>
// Form Validation Script
const form = document.getElementById('validationForm');
const name = document.getElementById('name');
const email = document.getElementById('email');
const password = document.getElementById('password');
const phone = document.getElementById('phone');
const age = document.getElementById('age');
const nameError = document.getElementById('nameError');

const emailError = document.getElementById('emailError');
const passwordError = document.getElementById('passwordError');
const phoneError = document.getElementById('phoneError');
const ageError = document.getElementById('ageError');
const successMessage = document.getElementById('successMessage');
form.addEventListener('submit', function (e) {
e.preventDefault(); // Prevent the form from submitting
let valid = true;
// Clear previous success message

successMessage.textContent = '';
// Name Validation
if (name.value.trim() === '') {
nameError.textContent = 'Name is required.';
valid = false;
} else if (name.value.length < 3) {
nameError.textContent = 'Name must be at least 3 characters long.';
valid = false;
} else {
nameError.textContent = '';
}
// Email Validation
const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (email.value.trim() === '') {
emailError.textContent = 'Email is required.';
valid = false;
} else if (!email.value.match(emailPattern)) {
emailError.textContent = 'Enter a valid email address.';
valid = false;
} else {
emailError.textContent = '';
}
// Password Validation
if (password.value.trim() === '') {
passwordError.textContent = 'Password is required.';
valid = false;
} else if (password.value.length < 6) {
passwordError.textContent = 'Password must be at least 6 characters.';
valid = false;
} else {
passwordError.textContent = '';
}
// Phone Validation
const phonePattern = /^[0-9]{10}$/;
if (phone.value.trim() === '') {
phoneError.textContent = 'Phone number is required.';
valid = false;
} else if (!phone.value.match(phonePattern)) {
phoneError.textContent = 'Enter a valid 10-digit phone number.';
valid = false;
} else {
phoneError.textContent = '';
}
// Age Validation
if (age.value.trim() === '') {
ageError.textContent = 'Age is required.';
valid = false;
} else if (isNaN(age.value) || age.value < 1 || age.value > 100) {
ageError.textContent = 'Enter a valid age between 1 and 100.';
valid = false;
} else {
ageError.textContent = '';
}
// If all inputs are valid, display success message

if (valid) {
successMessage.textContent = 'Form submitted successfully!';
form.reset();
}
});
</script>
</body>
</html>
Output: -
Experiment: 5
Objective: 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.
Code: -
XML File (data.xml)
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE courses SYSTEM "courses.dtd">
<courses>
<course>
<title>Introduction to Programming</title>
<code>CS101</code>
<duration>4 weeks</duration>
<instructor>Dr. Alice Johnson</instructor>
</course>
<course>
<title>Data Structures</title>
<code>CS201</code>
<instructor>Dr. Bob Smith</instructor>
</course>
<course>
<title>Machine Learning</title>
<code>CS301</code>
<instructor>Dr. Carol Lee</instructor>
</course>
</courses>
DTD File (courses.dtd)
<!ELEMENT courses (course+)>

<!ELEMENT course (title, code, duration, instructor)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT code (#PCDATA)>
<!ELEMENT duration (#PCDATA)>
<!ELEMENT instructor (#PCDATA)>
XSLT File (style.xsl)
<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Course Catalog</title>
<style>
body {
color: #333;
padding: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
th {
}
tr:nth-child(even) {
}
</style>
</head>
<body>
<h1>Course Catalog</h1>
<table>
<tr>
<th>Title</th>
<th>Code</th>
<th>Duration</th>
<th>Instructor</th>
</tr>
<xsl:for-each select="courses/course">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="code"/></td>
<td><xsl:value-of select="duration"/></td>
<td><xsl:value-of select="instructor"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Output: -

aryan87

Uploaded by

Copyright:

Available Formats

aryan87

Uploaded by

Document Information

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

aryan87

Uploaded by

Copyright:

Available Formats

PRANVEER SINGH INSTITUTE OF TECHNOLOGY, KANPUR

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

Odd Semester 2024-25

B. Tech.- Second Year

• Vision and Mission Statements of the Department

• PEOs, POs, PSOs of the Department

• Course Objective and Outcomes

Department Mission Statements

Program Educational Objectives (PEOs)

3. Design/development of solutions: Design solutions for complex Computer Science &

4. Investigation: Use research-based knowledge and research methods including design of

10. Communication: Communicate effectively on complex Computer Science & Engineering

1. Use algorithms, data structures/management, software design, concepts of programming

COs Course Outcomes

Lab Lab Experiment

Objective: Write HTML program to design an entry form for student

<section id="home" class="hero">

<section id="tutorials" class="section">

<section id="blogs" class="section">

<section id="contact" class="section">

const nameError = document.getElementById('nameError');

// Clear previous success message

// If all inputs are valid, display success message

XML File (data.xml)

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

<!ELEMENT courses (course+)>

XSLT File (style.xsl)

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

You might also like