PRANVEER SINGH INSTITUTE OF TECHNOLOGY, KANPUR

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

Odd Semester 2024-25

B. Tech.- Second Year

Semester- III

Lab File

Web Designing Workshop (BCS353)

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
 Institute Vision Statement

To achieve excellence in professional education and create an ecosystem for the holistic development
of all stakeholders.

Institute Mission Statements

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.
 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.

i) Course Objective:
The objective of this lab is to make students able to apply the concepts of HTML, CSS, Bootstrap,
JavaScript technologies to build static, dynamic and responsive web-based solutions.

ii) Course Outcomes

*Level of Bloom’s *Level of Bloom’s

Level to be met Level to be met
Taxonomy Taxonomy
L1: Remember 1 L2: Understand 2
L3: Apply 3 L4: Analyze 4
L5: Evaluate 5 L6: Create 6

CO Number
Course Outcomes

BCS353.1 Apply [L3. Apply] the concept of Web programming, static web pages with
HTML and CSS.

BCS353.2 Design [L6. Create] responsive web-based solutions using HTML, CSS,
Bootstrap and JavaScript.
 Home Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Online Bookstore</title>
<style>
/* General Reset and Body Styling */
*{
margin: 0;
padding: 0;
box-sizing: border-box; /* Includes padding and border in element dimensions */
}

body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
color: #333;
line-height: 1.5;
}

/* Header Section */
header {
background-color: #bd1016;
color: white;
padding: 60px 20px;
text-align: center;
background-image: url(https://tse1.mm.bing.net/th?id=OIP.PJuDSQ9XP2SO-
Cr5iwmTPgHaCe&pid=Api&P=0&h=180);
background-size: cover;
 background-position: center;
background-repeat: no-repeat;
}

header h1 {
margin: 0;
font-size: 2.5em;
}

header p {
margin: 10px 0 0;
font-size: 1.5em;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

/* Main Section */
main {
padding: 20px;
font-size: 1em;
background-color: rgb(189, 210, 224);
margin: 20px auto; /* Centers the main content */
max-width: 90%; /* Restricts width for larger screens */
border-radius: 10px; /* Rounded corners for visual appeal */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

main h2 {
font-size: 2em;
margin-bottom: 20px;
}

main p {
 font-size: 1.2em;
line-height: 1.6;
margin-bottom: 20px;
}

/* Button Styling */
a{
display: inline-block;
background-color: #4CAF50;
color: white;
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 1em;
transition: background-color 0.3s ease;
}

a:hover {
background-color: #45a049;
}

/* Responsive Design */
@media (max-width: 768px) {
header h1 {
font-size: 2em;
}

header p {
font-size: 1.2em;
}

main h2 {
 font-size: 1.8em;
}

main p {
font-size: 1em;
}

a{
font-size: 0.9em;
padding: 8px 16px;
}
}
</style>
</head>
<body>

<header>
<h1>The Book Journey</h1>
<p>Your Gateway to Knowledge</p>
</header>

<main>
<h2>Welcome to The Book Journey!</h2>
<p>
Discover a vast collection of books spanning multiple disciplines, including Computer
Science, Electronics, Electrical, and Civil Engineering.
<br> Whether you're a student, an academic, or simply a book lover, we've got
something for everyone.
</p>
<a href="main_page.html">Go to Main Page</a>
</main>
</body>
</html>
 Main Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Bookstore</title>
<style>
/* General Reset and Body Styling */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
box-sizing: border-box; /* Ensures padding and borders are included in width/height */
}

/* Container for everything */

#container {
display: flex;
flex-direction: column;
min-height: 100vh;
}

/* Top Frame Styling */

#top-frame {
display: flex;
flex-wrap: wrap; /* Allows wrapping on smaller screens */
justify-content: space-between;
align-items: center;
background-color: #153f4d;
color: white;
padding: 10px 20px;
}

#logo {
display: flex;
align-items: center;
flex: 1; /* Adjusts width for responsiveness */
min-width: 200px; /* Ensures minimum size */
}

#logo img {
height: 100px; /* Scaled down for better balance */
margin-right: 10px;
margin-bottom: 11px;

}
#top-frame h1 {
font-size: 1.8em;
margin: 0;
flex: 1; /* Centers h1 when space allows */
text-align: center;
}

nav {
display: flex;
gap: 10px;
flex-wrap: wrap; /* Wraps links on smaller screens */
}

nav a {
color: white;
text-decoration: none;
padding: 8px 16px;
background-color: #71a3ae;
border-radius: 4px;
font-size: 1em;
}

nav a:hover {
background-color: #4e8b97;
}

/* Main Layout */
#main-layout {
display: flex;
flex: 1;
flex-wrap: wrap; /* Responsive: stacks on smaller screens */
padding: 20px;
}

/* Left Frame Styling */

#left-frame {
flex: 0 1 200px; /* Fixed width, but shrinks if necessary */
background-color: #71949a;
padding: 20px;
border-right: 1px solid #ddd;
box-sizing: border-box;
}

#left-frame h2 {
text-align: center;
margin-top: 0;
}
#left-frame a {
display: block;
color: #153f4d;
text-decoration: none;
margin: 10px 0;
padding: 10px;
background-color: white;
text-align: center;
border-radius: 4px;
transition: all 0.3s ease;
font-size: 1em;
}

#left-frame a:hover {
background-color: #153f4d;
color: white;
}

/* Right Frame Styling */

#right-frame {
flex: 1; /* Takes the remaining space */
padding: 20px;
background-color: #fff;
box-sizing: border-box;
}

#right-frame h2 {
font-size: 2em;
text-align: center;
background-color: #77a0ad;
padding: 20px;
color: white;
margin: 0 0 20px;
border-radius: 4px;
}

#right-frame p {
font-size: 1.2em;
line-height: 1.6;
color: #0c3f4f;
margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
#main-layout {
flex-direction: column; /* Stack frames */
 }

#left-frame {
border-right: none;
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
}

#right-frame h2 {
font-size: 1.5em;
}
}
</style>
</head>
<body>
<div id="container">
<!-- Top Frame -->
<div id="top-frame">
<div id="logo">
<img
src="https://static.vecteezy.com/system/resources/previews/013/217/241/original/book-search-logo-
template-design-find-book-logo-design-template-book-icon-with-magnifying-glass-combination-
free-vector.jpg" alt="Book Logo">
<h1>The Book Journey</h1>
</div>
<nav>
<a href="Home.html" target="right-frame">Home</a>
<a href="login.html" target="right-frame">Login</a>
<a href="registration.html" target="right-frame">Registration</a>
<a href="catalogue.html" target="right-frame">Catalogue</a>
<a href="cart.html" target="right-frame">Cart</a>
</nav>
</div>

<!-- Main Layout -->

<div id="main-layout">
<!-- Left Frame -->
<div id="left-frame">
<h2>Categories</h2>
<a href="cse_books.html" target="right-frame">CSE</a>
<a href="ece_books.html" target="right-frame">ECE</a>
<a href="eee_books.html" target="right-frame">EEE</a>
<a href="civil_books.html" target="right-frame">Civil</a>
</div>

<!-- Right Frame -->

<div id="right-frame">
<h2>Welcome to the Online Bookstore!</h2>
 <p>
This website is your one-stop destination for books across various engineering
disciplines.
Explore our collection by selecting categories such as CSE, ECE, EEE, and Civil
Engineering.
Use the links above to log in, register, browse the catalogue, or view your cart.
</p>
</div>
</div>
</div>
</body>
</html>
 Login Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
/* General Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #84a4ae;
color: #333;
line-height: 1.5;
}

/* Top Frame Styling */

#top-frame {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #153f4d;
color: white;
padding: 20px 30px;
}

#logo {
display: flex;
align-items: center;
}

#logo img {
height: 80px;
margin-right: 10px;
}

#logo h1 {
margin: 0;
font-size: 1.8em;
}

#top-frame nav {
 display: flex;
gap: 15px;
align-items: center;
}

#top-frame a {
color: white;
text-decoration: none;
font-size: 1em;
}

#top-frame a:hover {
text-decoration: underline;
}

/* Main Layout */
#main-layout {
display: flex;
flex-wrap: wrap; /* Ensures proper wrapping on smaller screens */
margin: 20px auto;
padding: 10px;
max-width: 1200px;
}

/* Left Frame Styling */

#left-frame {
width: 20%; /* Flexibly allocated space */
background-color: #f4f4f4;
padding: 15px;
border-right: 1px solid #ddd;
}

#left-frame h2 {
text-align: center;
font-size: 1.2em;
margin-bottom: 20px;
}

#left-frame a {
display: block;
color: #4CAF50;
text-decoration: none;
margin: 10px 0;
font-size: 1em;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s ease, color 0.3s ease;
}
#left-frame a:hover {
background-color: #4CAF50;
color: white;
}

/* Right Frame Styling */

#right-frame {
flex-grow: 1;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}

/* Form Styling */
form {
width: 100%;
max-width: 400px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
background-color: #ebf0f1;
}

form h2 {
text-align: center;
font-size: 1.5em;
margin-bottom: 20px;
}

label {
display: block;
margin: 10px 0 5px;
font-size: 1em;
}

input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}

button {
width: 100%;
 padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
font-size: 1em;
cursor: pointer;
margin-bottom: 10px;
}

button:hover {
background-color: #45a049;
}

button[type="reset"] {
background-color: #f44336;
}

button[type="reset"]:hover {
background-color: #d7352e;
}

/* Responsive Design */
@media (max-width: 768px) {
#main-layout {
flex-direction: column;
}

#left-frame {
width: 100%;
border-right: none;
margin-bottom: 20px;
}

form {
max-width: 100%;
}
}
</style>
</head>
<body>
<!-- Top Frame -->
<div id="top-frame">
<div id="logo">
<img src="https://static.vecteezy.com/system/resources/previews/013/217/241/original/book-
search-logo-template-design-find-book-logo-design-template-book-icon-with-magnifying-glass-
combination-free-vector.jpg" alt="Book Logo">
<h1>The Book Journey</h1>
 </div>
<nav>
<a href="Home.html" target="right-frame">Home</a>
<a href="login.html" target="right-frame">Login</a>
<a href="registration.html" target="right-frame">Registration</a>
<a href="catalogue.html" target="right-frame">Catalogue</a>
<a href="cart.html" target="right-frame">Cart</a>
</nav>
</div>

<!-- Main Layout -->

<div id="main-layout">
<!-- Left Frame -->
<div id="left-frame">
<h2>Categories</h2>
<a href="cse_books.html" target="right-frame">CSE</a>
<a href="ece_books.html" target="right-frame">ECE</a>
<a href="eee_books.html" target="right-frame">EEE</a>
<a href="civil_books.html" target="right-frame">Civil</a>
</div>

<!-- Right Frame -->

<div id="right-frame">
<form>
<h2>Login Page</h2>
<label for="username">User Name:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</div>
</div>
</body>
</html>
 Registration Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Online Bookstore</title>
<style>
/* General Reset and Body Styling */
*{
margin: 0;
padding: 0;
box-sizing: border-box; /* Includes padding and border in element dimensions */
}

body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
color: #333;
line-height: 1.5;
}

/* Header Section */
header {
background-color: #bd1016;
color: white;
padding: 60px 20px;
text-align: center;
background-image: url(https://tse1.mm.bing.net/th?id=OIP.PJuDSQ9XP2SO-
Cr5iwmTPgHaCe&pid=Api&P=0&h=180);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

header h1 {
margin: 0;
font-size: 2.5em;
}

header p {
margin: 10px 0 0;
font-size: 1.5em;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
/* Main Section */
main {
padding: 20px;
font-size: 1em;
background-color: rgb(189, 210, 224);
margin: 20px auto; /* Centers the main content */
max-width: 90%; /* Restricts width for larger screens */
border-radius: 10px; /* Rounded corners for visual appeal */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

main h2 {
font-size: 2em;
margin-bottom: 20px;
}

main p {
font-size: 1.2em;
line-height: 1.6;
margin-bottom: 20px;
}

/* Button Styling */
a{
display: inline-block;
background-color: #4CAF50;
color: white;
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 1em;
transition: background-color 0.3s ease;
}

a:hover {
background-color: #45a049;
}

/* Responsive Design */
@media (max-width: 768px) {
header h1 {
font-size: 2em;
}

header p {
font-size: 1.2em;
}
 main h2 {
font-size: 1.8em;
}

main p {
font-size: 1em;
}

a{
font-size: 0.9em;
padding: 8px 16px;
}
}
</style>
</head>
<body>

<header>
<h1>The Book Journey</h1>
<p>Your Gateway to Knowledge</p>
</header>

<main>
<h2>Welcome to The Book Journey!</h2>
<p>
Discover a vast collection of books spanning multiple disciplines, including Computer
Science, Electronics, Electrical, and Civil Engineering.
<br> Whether you're a student, an academic, or simply a book lover, we've got something for
everyone.
</p>
<a href="main_page.html">Go to Main Page</a>
</main>

</body>
</html>
 Catalogue page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Catalogue</title>
<style>
/* General Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background-color: #e4eaec;
background-image: url(https://99designs-start-attachments.imgix.net/alchemy-
pictures/2017/03/09/19/21/26/c9213286-c855-4101-b012-600b5d6deb06/Interior-book-
hero01.png?auto=format&ch=Width%2CDPR&w=1000&h=1000&fm=png);
background-size: cover;
background-position: center;
line-height: 1.6;
}

/* Header Styling */
header {
background-color: #051a31;
color: rgb(223, 226, 234);
padding: 10px 0;
 text-align: center;
font-size: 20px;
font-weight: bold;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode',
Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}

header img {
max-height: 80px;
width: auto;
}

h1 {
font-size: 2.5em;
}

/* Navigation Styling */
nav {
text-align: center;
background-color: #275c97;
padding: 15px 0;
}

nav a {
color: white;
margin: 0 20px;
text-decoration: none;
 font-weight: bold;
}

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

/* Container Styling */
.container {
width: 90%;
max-width: 1200px;
margin: 20px auto;
background-color: rgb(221, 233, 235);
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
font-size: 3em;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(79, 182, 216, 0.5);
}

/* Table Styling */
table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
}

table, th, td {
border: 1px solid #ddd;
}

th, td {
padding: 15px;
text-align: center;
}

th {
background-color: #83b0e1;
color: rgb(10, 59, 106);
}

img {
width: 100px;
height: 150px;
border-radius: 5px;
}

/* Button Styling */
.add-to-cart {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}
.add-to-cart:hover {
background-color: #45a049;
}

/* Footer Styling */
footer {
text-align: center;
padding: 20px 0;
background-color: #333;
color: white;
position: relative;
bottom: 0;
width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
header {
flex-direction: column;
text-align: center;
}

header h1 {
font-size: 2em;
margin: 10px 0;
}

header img {
max-height: 60px;
}
 .container {
padding: 20px;
margin: 10px;
}

h2 {
font-size: 2.5em;
}

table, th, td {
font-size: 14px;
padding: 10px;
}

.add-to-cart {
padding: 8px 12px;
font-size: 14px;
}
}

/* Small Device Adjustments */

@media (max-width: 380px) {
table, th, td {
font-size: 12px;
}

.add-to-cart {
font-size: 12px;
padding: 6px 10px;
}

h2 {
 font-size: 2em;
}
}

/* Ensure Table Rows Adjust on Smaller Screens */

@media (max-width: 600px) {
table, th, td {
display: block;
width: 100%;
}

th {
display: none;
}

td {
text-align: left;
padding: 10px 5px;
border-bottom: 1px solid #ddd;
position: relative;
padding-left: 50%;
}

td:before {
content: attr(data-label);
position: absolute;
left: 10px;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}
}
 </style>
</head>
<body>

<!-- Header Section -->

<header>
<a href="index.html">
<img src="https://static.vecteezy.com/system/resources/previews/013/217/241/original/book-
search-logo-template-design-find-book-logo-design-template-book-icon-with-magnifying-glass-
combination-free-vector.jpg" alt="Book Search Logo">
</a>
<h1>The Book Journey</h1>
</header>

<!-- Navigation Section -->

<nav>
<a href="#">Home</a>
<a href="#">Login</a>
<a href="#">Registration</a>
<a href="#">Catalogue</a>
<a href="#">Cart</a>
</nav>

<!-- Catalogue Section -->

<div class="container">
<h2>Available Books</h2>

<!-- Table for Book Details -->

<table>
<thead>
<tr>
<th>Book Cover</th>
 <th>Book Title</th>
<th>Author Name</th>
<th>Publisher</th>
<th>Price</th>
<th>Add to Cart</th>
</tr>
</thead>
<tbody>
<!-- Row 1 -->
<tr>
<td data-label="Book Cover"><img
src="https://www.ibiblio.org/xml/books/bible3/xml11biblecoverlarge.jpg" alt="XML Bible
Cover"></td>
<td data-label="Book Title">XML Bible</td>
<td data-label="Author Name">Winston</td>
<td data-label="Publisher">Wiley</td>
<td data-label="Price">$40.50</td>
<td data-label="Add to Cart"><button class="add-to-cart">Add to Cart</button></td>
</tr>
<!-- Row 2 -->
<tr>
<td data-label="Book Cover"><img src="https://m.media-amazon.com/images/I/61-
6TTTBZeL._SL1000_.jpg" alt="AI Cover"></td>
<td data-label="Book Title">AI</td>
<td data-label="Author Name">S. Russell</td>
<td data-label="Publisher">Princeton Hall</td>
<td data-label="Price">$63.00</td>
<td data-label="Add to Cart"><button class="add-to-cart">Add to Cart</button></td>
</tr>
<!-- Row 3 -->
<tr>
 <td data-label="Book Cover"><img
src="https://cdn.shopify.com/s/files/1/0514/0014/7144/products/9789389845143.jpg?v=1623762437
" alt="Java 2 Cover"></td>
<td data-label="Book Title">Java 2</td>
<td data-label="Author Name">Watson</td>
<td data-label="Publisher">BPB Publications</td>
<td data-label="Price">$35.50</td>
<td data-label="Add to Cart"><button class="add-to-cart">Add to Cart</button></td>
</tr>
<!-- Row 4 -->
<tr>
<td data-label="Book Cover"><img
src="https://www.informit.com/ShowCover.aspx?isbn=0133070301" alt="HTML in 24 Hours
Cover"></td>
<td data-label="Book Title">HTML in 24 Hours</td>
<td data-label="Author Name">Sam Peter</td>
<td data-label="Publisher">Sam Publications</td>
<td data-label="Price">$50.00</td>
<td data-label="Add to Cart"><button class="add-to-cart">Add to Cart</button></td>
</tr>
</tbody>
</table>
</div>

<!-- Footer Section -->

<footer>
<p>&copy; 2024 The Book Journey. All rights reserved.</p>
</footer>

</body>
</html>
 Cart page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Catalogue</title>
<style>
/* General Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
margin: 0;
background: linear-gradient(135deg, #a7c7e7, #e4eaec);
background-size: cover;
line-height: 1.6;
}

/* Header Styling */
header {
background-color: #051a31;
color: #dfe2ea;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}

header img {
max-height: 80px;
width: auto;
}

header h1 {
font-size: 2.5em;
text-align: center;
margin: 0;
}

/* Navigation Styling */
nav {
 text-align: center;
background-color: #275c97;
padding: 15px 0;
}

nav a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}

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

/* Container Styling */
.container {
width: 95%;
max-width: 1200px;
margin: 20px auto;
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
overflow-x: auto;
}

h2 {
text-align: center;
margin-bottom: 20px;
font-size: 2em;
color: #333;
text-shadow: 2px 2px 4px rgba(79, 182, 216, 0.5);
}

/* Table Styling */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}

table, th, td {
border: 1px solid #ddd;
}

th, td {
 padding: 15px;
text-align: center;
}

th {
background-color: #83b0e1;
color: #0a3b6a;
}

td.price {
font-weight: bold;
font-size: 1.2em;
color: #3b5998;
}

img {
width: 100px;
height: auto;
border-radius: 5px;
}

/* Button Styling */
.add-to-cart {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}

.add-to-cart:hover {
background-color: #45a049;
}

/* Footer Styling */
footer {
text-align: center;
padding: 20px 0;
background-color: #333;
color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
header {
flex-direction: column;
 text-align: center;
}

header img {
max-height: 60px;
}

h2 {
font-size: 1.8em;
}

table, th, td {
font-size: 14px;
padding: 10px;
}

.add-to-cart {
padding: 8px 12px;
font-size: 14px;
}
}
</style>
</head>
<body>

<!-- Header Section -->

<header>
<a href="index.html">
<img src="https://static.vecteezy.com/system/resources/previews/013/217/241/original/book-
search-logo-template-design-find-book-logo-design-template-book-icon-with-magnifying-glass-
combination-free-vector.jpg" alt="Book Logo">
</a>
<h1>The Book Journey</h1>
</header>

<!-- Navigation Section -->

<nav>
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="register.html">Registration</a>
<a href="catalogue.html">Catalogue</a>
<a href="cart.html">Cart</a>
</nav>

<!-- Catalogue Section -->

<div class="container">
<h2>Available Books</h2>
 <table>
<thead>
<tr>
<th>Book Cover</th>
<th>Book Title</th>
<th>Author Name</th>
<th>Publisher</th>
<th>Price</th>
<th>Add to Cart</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://www.ibiblio.org/xml/books/bible3/xml11biblecoverlarge.jpg"
alt="XML Bible"></td>
<td>XML Bible</td>
<td>Winston</td>
<td>Wiley</td>
<td class="price">$40.50</td>
<td><button class="add-to-cart">Add to Cart</button></td>
</tr>
<tr>
<td><img src="https://m.media-amazon.com/images/I/61-6TTTBZeL._SL1000_.jpg"
alt="AI"></td>
<td>AI</td>
<td>S. Russell</td>
<td>Princeton Hall</td>
<td class="price">$63.00</td>
<td><button class="add-to-cart">Add to Cart</button></td>
</tr>
<!-- Row 3 -->
<tr>
<td data-label="Book Cover"><img
src="https://cdn.shopify.com/s/files/1/0514/0014/7144/products/9789389845143.jpg?v=1623762437
" alt="Java 2 Cover"></td>
<td data-label="Book Title">Java 2</td>
<td data-label="Author Name">Watson</td>
<td data-label="Publisher">BPB Publications</td>
<td data-label="Price">$35.50</td>
<td data-label="Add to Cart"><button class="add-to-cart">Add to Cart</button></td>
</tr>
<!-- Row 4 -->
<tr>
<td data-label="Book Cover"><img
src="https://www.informit.com/ShowCover.aspx?isbn=0133070301" alt="HTML in 24 Hours
Cover"></td>
<td data-label="Book Title">HTML in 24 Hours</td>
<td data-label="Author Name">Sam Peter</td>
 <td data-label="Publisher">Sam Publications</td>
<td data-label="Price">$50.00</td>
<td data-label="Add to Cart"><button class="add-to-cart">Add to Cart</button></td>
</tr>
</tbody>
</table>
</div>

<!-- Footer Section -->

<footer>
<p>&copy; 2024 The Book Journey. All rights reserved.</p>
</footer>

</body>
</html>
 Registration Page(JS Validation)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial
scale=1.0">
<title>Registration Page</title>
<script src="validation.js"></script> <!-- Linking external JavaScript
file -->
</head>
<body>
<table border="1" style="width: 1500px;height: 500px; border
collapse: 2px">
<tr style="background-color: rgb(216, 120, 65); border: 0ch;">
<td>
<b>
<center>
<img
src="https://www.psit.ac.in/assets/webp/psitlogos/psitlogo-1.jpeg"
height="100px" width="150px">
</center>
</b>
</td>
<td colspan="4">
<b>
<center>PRANVEER SINGH INSTITUTE OF
TECHNOLOGY, KANPUR</center>
</b>
</td>
</tr>
<tr style="background-color: blanchedalmond; border: 0ch;">
<td><center><a
href="homepage.html">Home</a></center></td>
<td><center><a
href="loginpage.html">Login</a></center></td>
<td><center><a
href="registrationpage.html">Registration</a></center>< /td>
<td><center><a
href="catalogue.html">Catalogue</a></center></td>
<td><center>Cart</center></td>
</tr>
<tr style="border: 0ch;">
<td><a href="csebutton.html">CSE</a></td>
</tr>
<tr style="border: 0ch;">
<td><a href="ecebotton.html">ECE</a></td>
</tr>
<tr style="border: 0ch;">
<td><a href="eeebutton.html">EEE</a></td>
colspan="4">
<center>
<h2>Registration Page</h2>
<td
<form action="" onsubmit="return validateForm()">
<table>
<tr>
<td><label>Name:</label></td>
<td><input type="text" id="name" placeholder="Enter your
name here.." required></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><input type="password" id="password"
placeholder="Enter your password here.." required></td>
</tr>
<tr>
<td><label>Email Id:</label></td>
<td><input type="email"
placeholder="Enter your Email here.." required></td>
</tr>
<tr>
<td>Phone Number:</td>
<td><input type="text" placeholder="Enter Mobile Number"
required></td>
</tr>
<tr>
<td>Sex:</td>
<td>
<input type="radio" name="sex">Male
<input type="radio" name="sex">Female
<input type="radio" name="sex">Others
</td>
</tr>
<tr>
<td><label for="datepicker">Date of
Birth:</label></td>
<td><input type="date" id="Birthday"></td>
</tr>
<tr>
<td>Languages Known:</td>
<td>
<select>
<option>English</option>
<option>Hindi</option>
<option>Telugu</option>
</select>
</td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" placeholder="Enter the address
here..."></td>
</table>
<br>
</tr>
<input type="submit" value="Submit">
</form>
<br><br><br><br>
<hr>
<p>The copyright symbol: © 2024 Swastik Shukla. All rights
reserved.</p>
</center>
</td>
</tr>
<tr style="border: 0px;">
<td>CIVIL</td>
</tr>
</table>
</body>
</html>
Valdation:
function validateForm() {
const name =
document.getElementById('name').value.trim();
password =
const
document.getElementById('password').value.trim()
;
let valid = true;
if
(name.length < 6 || !/^[A-
Zaz]+$/.test(name)) {
alert('Name must contain
only alphabets and be at
least 6 characters long.');
valid
= false;
}
if (password.length < 6) {
alert('Password
must be at least 6 characters long.');
}
}
 Registration Page (JS Validation)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial
scale=1.0">
<title>Registration Page</title>
<script src="script.js" defer></script> <!-- Linking external
JavaScript file -->
</head>
<body>
<table border="1" style="width: 100%; bordercollapse: collapse;">
<tr style="background-color: rgb(216, 120, 65);">
<td>
<center>
<img
src="https://www.psit.ac.in/assets/webp/psitlogos/ps it-logo-1.jpeg"
alt="PSIT Logo" height="100" width="150"> </center>
</td>
<td colspan="4">
<center><strong>PRANVEER SINGH INSTITUTE OF
TECHNOLOGY, KANPUR</strong></center>
</td>
</tr>
<tr style="background-color: blanchedalmond;">
<td><center><a
href="homepage.html">Home</a></center></td>
<td><center><a
href="loginpage.html">Login</a></center></td>
<td><center><a
href="registrationpage.html">Registration</a></center>< /td>
<td><center><a
href="catalogue.html">Catalogue</a></center></td>
<td><center>Cart</center></td>
</tr>
<tr>
<td colspan="5">
<center>
<h2>Registration Page</h2>
<form id="registrationForm">
<table>
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" id="name" placeholder="Enter your
name" required></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password" placeholder="Enter your
password" required></td>
<tr>
</tr>
<td><label for="email">Email
ID:</label></td>
<td><input type="email" id="email" placeholder="Enter your
email" required></td>
</tr>
<tr>
<td><label for="phone">Phone
Number:</label></td>
<td><input type="text" id="phone" placeholder="Enter your
phone number" required></td>
</tr>
</table>
<br>
<input type="submit" value="Submit">
</form>
<hr>
<p>&copy; Swastik Shukla. All rights reserved.</p>
</center>
</td>
</tr>
</table>
</body>
</html>
Valdation:
document.getElementById('registrationForm').addEventLis
tener('submit', function (event) { event.preventDefault();
const email = document.getElementById('email').value.trim();
const phone = document.getElementById('phone').value.trim();
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-
]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(email))
{
alert('Please enter a valid email address (e.g.,
[email protected]).');
return; } const phonePattern = /^\d{10}$/;
if
(!phonePattern.test(phone)) {
alert('Phone number must be exactly
10 digits.'); return; } alert('Form submitted successfully!');
 Web Page (CSS)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial
scale=1.0">
<title>CSS Styling Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Stylish Web Page</h1>
</header>
<main>
<section>
<h2>About This Page</h2>
<p>This page is designed to showcase different CSS styles,
including fonts, colors, and background images.</p>
</section>
<section>
<h2>Styled List</h2>
<ul>
<li>Custom Fonts</li>
<li>Background Images</li>
<li>Typography</li>
</ul>
</section>
</main>
<footer>
<p>&copy; 2024 My Stylish Web Page</p>
</footer>
</body>
</html>
CSS:
body {
font-family: Arial, sans-serif;
color: yellowgreen;
margin: 0;
padding: 0;
background-image: url('https://www.pixelstalk.net/wp
content/uploads/2016/06/Free-Desktop-HD-Nature
Backgrounds.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
}
/* Style the header */
header {
text-align: center;
padding: 20px;
background: black;
color: pink;
font-family: 'Georgia', serif;
}
/* Apply custom styles to sections */
main section {
margin: 20px auto;
padding: 20px;
max-width: 800px;
background: black;
border-radius: 8px;
font-family: 'Verdana', sans-serif;
line-height: 1.6;
}
/* Add a background image to a section */
main section:nth-child(2) {
background-image:
url(https://tse3.mm.bing.net/th?id=OIP.Ob2FzM6UiQmAOGhiGizA
UAHaEQ&pid=Api&P=0&h=180);
background-size: cover;
background-blend-mode: lighten;
padding: 30px;
color: white;
}
/* Style the list */
ul {
list-style-type: square;
margin: 10px 0;
padding: 0;
}
li {
font-family:Georgia, 'Times New Roman', Times, serif;
font-size: 20px;
color: white;
}
/* Footer styles */
footer {
text-align: center;
padding: 10px;
background: black;
color: white;
font-family: 'Tahoma', sans-serif;
}
 CSS (BG Image Property)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial
scale=1.0">
<title>Background Repeat and Link Styles</title>
<style>
body {
margin: 0;
padding: 0;
background-image:
url('https://www.w3schools.com/css/img_tree.png');
background-repeat: repeat;
background-attachment: fixed;
font-family: Arial, sans-serif;
color: #333;
}
h1 {
font-family: 'Georgia', serif;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
padding: 20px;
margin: 0;
}
p{
font-size: 16px;
line-height: 1.6;
margin: 20px;
color: #333;
}
.section {
background-image:
url('https://www.w3schools.com/w3images/snow.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 40px;
color: #fff;
text-align: center;
margin: 20px auto;
max-width: 600px;
border: 2px solid #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
a:link {
color: blue;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: purple;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: green;
text-decoration: underline;
}
.button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007BFF;
border: none;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Background Repeat and Link Styles</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Repudiandae similique omnis voluptatum corrupti molestias iste nulla
impedit incidunt iusto magni corporis a nobis quam eius ex dolorem
eum, laboriosam illum.
<code>background-repeat</code> property. Additionally, link
states like
<strong>a:link</strong>, <strong>a:visited</strong>,
<strong>a:hover</strong>, and
<strong>a:active</strong> are styled below.
</p>
<div class="section">
<h2>Non-Repeating Background Section</h2>
<p>
This section has a background image with <code>background
repeat: no-repeat</code>.
It prevents the image from tiling.
</p>
<a href="#" class="button">Click Me</a>
</div>
<p>
<a href="https://www.example.com" target="_blank">This is a
regular link (a:link)</a><br>
<a href="#" onclick="alert('This is active!');">This is an active
link (a:active)</a><br>
<a href="#">Hover over this link (a:hover)</a><br>
<a href="https://www.example.com" target="_blank">Visited
link (a:visited)</a>
</p>
</body>
</html>
 Todo List(HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial
scale=1.0">
<title>To-Do List</title>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<header>
<h1>My To-Do List</h1>
</header>
<main>
<form id="todo-form">
<input type="text" id="task-input" placeholder="Enter a new task">
<button type="submit">Add Task</button>
</form>
<ul id="task-list">
<!-- Tasks will be added here dynamically -->
</ul>
</main>
<footer>
<p>© 2024 Swastik Shukla. All rights reserved.</p>
</footer>
<script src="todo.js"></script>
</body>
</html>
Todo List (Css)
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
header {
background-color: #6a1b9a;
color: white;
padding: 10px;
width: 100%;
text-align: center;
}
h1 {
margin: 0;
 }
main {
margin: 20px;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
form {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
form input {
flex: 1;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
form button {
padding: 10px 20px;
font-size: 16px;
border: none;
background-color: #6a1b9a;
color: white;
border-radius: 5px;
cursor: pointer;
}
form button:hover {
background-color: #4a0072;
}
ul {
list-style: none;
padding: 0;
}
ul li {
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
ul li .delete {
background-color: #ff1744;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
}
ul li .delete:hover {
background-color: #d50000;
}
footer {
margin-top: 20px;
text-align: center;
}
Todo List (JS)
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('todo-form');
const taskInput = document.getElementById('task-input');
const taskList = document.getElementById('task-list');
form.addEventListener('submit', (e) => {
e.preventDefault();
const taskText = taskInput.value.trim();
if (taskText !== '') {
addTask(taskText);
taskInput.value = '';
}
});
function addTask(task) {
const li = document.createElement('li');
li.textContent = task;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.classList.add('delete');
deleteButton.addEventListener('click', () => {
li.remove();
});
li.appendChild(deleteButton);
taskList.appendChild(li);
}
});