[Approved by AICTE, Govt. of India & Affiliated to Dr.
APJ
GL BAJAJ Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science &
Institute of Technology & Management Engineering
Greater Noida
Index
[Link] Name of the Experiment Date of Date of Remarks
Experiment Submission
1 Design the following static web
pages required for an online book
store web
site.
HOME PAGE: The static home
page must contain three frames.
2 LOGINPAGE:
3
CATOLOGUE PAGE: The
catalogue page should contain the
details of all the
books available in the website in a
table. The details should contain the
following:
1. Snap shot of Cover Page.
2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.
4 CARTPAGE: The cart page contains the
details about the books which are
added to the cart.
5 REGISTRATION PAGE : Create a“
registration form“ with the following
fields
1)Name (Text field)
2)Password (password field)
3) E-mailid(text field)
4) Phone Number(text field)
5) Sex(radio button)
6) Date of birth(3 select boxes)
7) Languages known(checkboxes–
English, Telugu, Hindi, Tamil)
8) Address(text area)
6 Js VALIDATION: Write
JavaScript to validate the following fields
of the
above registration page.
1. Name (Name should contains
alphabets and the length should not be
less
than 6 characters).
2. Password (Password should not
be less than 6 characters length).
7 Js VALIDATION:
3. E-mailid (should not contain any
invalid and must follow the standard
pattern(name@[Link])
4. Phone Number(Phone number should
contain 10 digits only).
8 CSS: Design a web page using CSS
(Cascading Style Sheets) which includes
the following:
1) Use different font styles:
In the style definition you define how
each selector should work (font, color
etc.). Then, in the body of your pages,
you refer to these selectors to activate the
styles.
2) Set a background image for both the
page and single elements on the page.
9 CSS:
1) Control the repetition of the image
with the background-repeat property.
2) Define styles for links as: A:link,
A:visited, A:active, A:hover
10 Consider a small topic of your choice on
which you can develop static
Webpages and try to implement all topics
of html, CSS and Js within the
topic.
Choose any one topic.
1. Your Own Portfolio
2. To-Do List
3. Survey Form
4. A Tribute Page
5. A Questionnaire
[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ
GL BAJAJ Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science &
Institute of Technology & Management Engineering
Greater Noida
Introduction
Web design is the creation of websites and pages to reflect a company’s
brand and information and ensure a user-friendly experience. Appearance
and design are incorporated
as vital elements whether you’re designing a website, mobile app or
maintaining content on a web page. Gaining web design skills can help
you in applying for roles where your creativity could help a business
improve their brand, their message and their bottom line.
Web design identifies the goals of a website or webpage and promotes
accessibility for all potential users. This process involves organizing
content and images across a series of pages and integrating applications
and other interactive elements.
The professionals who perform this process are called web designers, and
their job includes the following duties:
● Selecting easy-to-read fonts
● Choosing attractive color schemes that also enable easy-to-read fonts
● Implementing a brand's identity into the colors, fonts and layout
● Creating a map of the website's structure to ensure intuitive
navigation
● Placing images, logos, text, videos, applications and other elements
● Using coding languages, such as HTML and CSS, to create layouts
and to style pages
● Making optimized versions of websites and pages both for desktop
and mobile viewing
There are two common web design methods: adaptive and responsive
design. In adaptive design, the website content is created using standard
screen sizes as the frame for the layout.
In responsive design, content moves dynamically according to the screen
size. Web designers use the various steps of the general web design
process to employ these design methods depending on their client or
employer's preferences and goals for the site
[Link] INSTITUTE OF TECHNOLOGY
& MANAGEMENT, GREATER NOIDA
Web Designing Workshop (BCS-353)
LAB MANUAL
ACADEMIC SESSION 2024-25
COURSE : [Link] (CSE)
SEM: IIIrd
Dept. of Computer Science & Engineering
Submitted to -: Submitted by-:
Aman Agrawal Siddha Jain
Assistant Professor 2401920100319
Sec-f
[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ
GL BAJAJ Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science &
Institute of Technology & Management Engineering
Greater Noida
Experiment -1
Aim: Design the following static web pages required for an online book store website.
Home page
<!DOCTYPE html>
<html>
<head>
<title>GENERAL Bookstore</title>
</head>
<frameset rows="10%,85%" border="1">
<!-- Top Navigation -->
<frame src="[Link]" name="top">
<!-- Left and Right Frames -->
<frameset cols="20%,80%">
<frame src="[Link]" name="left">
<frame src="[Link]" name="main">
</frameset>
</frameset>
</html>
Left html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #f0f0f0;
font-family: Arial;
margin: 0;
padding: 20px;
}
ul {
list-style: none;
padding: 0;
}
ul li {
margin: 20px 0;
font-weight: bold;
}
a{
color: #333;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li><a href="[Link]" target="main">CSE</a></li>
<li><a href="[Link]" target="main">ECE</a></li>
<li><a href="[Link]" target="main">EEE</a></li>
<li><a href="[Link]" target="main">CIVIL</a></li>
</ul>
</body>
</html>
Main page
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial;
background: #fafafa;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 28px;
font-weight: bold;
}
</style>
</head>
<body>
GENERAL BOOKSTORE
</body>
</html>
[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ
GL BAJAJ Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science &
Institute of Technology & Management Engineering
Greater Noida
Experiment -2
Aim: Design Login page
Program:
[Link]:
<!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>
body {
font-family: Arial, sans-serif;
background: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-box {
background: white;
padding: 25px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
width: 280px;
text-align: center;
}
h2 {
margin-bottom: 20px;
color: #333;
}
input {
width: 100%;
padding: 8px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
border: none;
background: #007BFF;
color: white;
border-radius: 5px;
cursor: pointer;
}
button:hover { background: #0056b3; }
p{
margin-top: 10px;
font-size: 14px;
}
a{
color: #007BFF;
text-decoration: none;
}
a:hover { text-decoration: underline; }
</style>
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username" required>
<input type="password" placeholder="Password" required>
<button type="submit">Login</button>
<p>Don’t have an account? <a href="#">Register</a></p>
</form>
</div>
</body>
</html>
[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ
GL BAJAJ Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science &
Institute of Technology & Management Engineering
Greater Noida
[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ
GL BAJAJ Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science &
Institute of Technology & Management Engineering
Greater Noida
Expirement-3
Aim-CATOLOGUE PAGE: The catalogue page should contain the
details of snap shot of cover page,Author name,Publisher, Price ,Add to
cart button .
Program :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catalogue - GENERAL Bookstore</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
background: #f5f5f5;
}
nav {
background: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 30px;
}
nav .logo { font-weight: bold; font-size: 20px; }
nav ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
nav ul li a {
color: white; text-decoration: none;
}
nav ul li a:hover, nav ul li [Link] { text -decoration: underline; }
.catalogue {
text-align: center; padding: 30px 10px;
}
.book-list {
display: flex; justify-content: center; flex-wrap: wrap; gap: 15px;
}
.book {
background: white; width: 180px; padding: 10px;
border-radius: 8px; box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.book img { width: 100%; border-radius: 6px; }
.book h3 { font-size: 16px; margin: 8px 0 3px; }
.book p { margin: 2px 0; color: #555; }
.price { color: green; font -weight: bold; }
button {
margin-top: 8px; padding: 6px 10px; border: none;
background: #007BFF; color: white; border-radius: 5px; cursor: pointer;
}
button:hover { background: #0056b3; }
</style>
</head>
<body>
<section class="catalogue">
<h2>Our Book Collection</h2>
<div class="book-list">
<div class="book">
<img src="[Link] alt="Book 1">
<h3>C Programming</h3>
<p>By John Smith</p>
<p class="price">₹350</p>
<button>Buy Now</button>
</div>
<div class="book">
<img src="[Link] alt="Book 2">
<h3>Engineering Maths</h3>
<p>By R. Kumar</p>
<p class="price">₹420</p>
<button>Buy Now</button>
</div>
<div class="book">
<img src="[Link] alt="Book 3">
<h3>Web Development</h3>
<p>By Anita Verma+/p>
<p class="price">₹299</p>
<button>Buy Now</button>
</div>
</div>
</section>
</body>
</html>
[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ
GL BAJAJ Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science &
Institute of Technology & Management Engineering
Greater Noida
Experiment -4
Aim : CARTPAGE: The cart page contains the details about the
books which are added to the cart.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Cart</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f2f2f2;
margin: 0;
padding: 0;
text-align: center;
}
h2 {
background: #333;
color: white;
padding: 10px;
margin: 0;
}
.cart {
background: white;
width: 300px;
margin: 40px auto;
padding: 15px;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.item {
display: flex;
justify-content: space-between;
margin: 8px 0;
}
.total {
font-weight: bold;
margin-top: 10px;
}
button {
margin-top: 10px;
background: #007bff;
color: white;
border: none;
padding: 8px 12px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="cart">
<div class="item"><span>C
Programming</span><span>₹350</span></div>
<div class="item"><span>Engineering
Maths</span><span>₹420</span></div>
<div class="total">Total: ₹770</div>
<button>Checkout</button>
</div>
</body>
</html>
Experiment -5
Aim :Registration Page
Program:
<!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>
<style>
body {
font-family: Arial, sans-serif;
background: #333;
display: flex;
justify-content: center;
align-items: center;
height: 130vh;
margin: 0;
}
form {
background: white;
padding: 20px 25px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
width: 320px;
}
h2 {
text-align: center;
color: #007BFF;
margin-bottom: 15px;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
color: #333;
}
input, select, textarea {
width: 100%;
padding: 6px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
textarea {
resize: none;
}
button {
width: 100%;
margin-top: 15px;
padding: 8px;
background: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 15px;
}
button:hover {
background: #0056b3;
}
</style>
</head>
<body>
<form>
</script>
</head>
<body>
</script>
</head>
<script src="[Link]"></script>
<body>
<form onsubmit="return validateForm()">
<div class="form-container">
<h2 style="text-align:center;">Registration Form</h2>
<label>Name:</label>
<input type="text" placeholder="Enter your name" required>
<label>Password:</label>
<input type="password" placeholder="Enter password"
required>
<label>Email:</label>
<input type="email" placeholder="Enter email" required>
<label>Phone No.:</label>
<input type="tel" placeholder="Enter phone number"
required>
<label>Sex:</label>
<input type="radio" name="sex"> Male
<input type="radio" name="sex"> Female
<label>Date of Birth:</label>
<select>
<option>Day</option><option>1</option><option>2</opti
on><option>3</option><option>4</option><option>5</optio
n><option>6</option><option>7</option><option>8</option
><option>9</option><option>10</option><option>11</optio
n><option>12</option><option>13</option><option>14</op
tion><option>15</option><option>16</option><option>17</
option><option>18</option><option>19</option><option>20
</option><option>21</option><option>22</option><option>
23</option><option>24</option><option>25</option><optio
n>26</option><option>27</option><option>28</option><op
tion>29</option><option>30</option><option>31</option>
</select>
<select>
<option>Month</option><option>Jan</option><option>Fe
b</option><option>Mar</option><option>april</option><op
tion>may</option><option>june</option><option>july</opti
on><option>aug</option><option>sep</option><option>oct<
/option><option>nov</option><option>dec</option>
</select>
<select>
<option>Year</option><option>2000</option><option>20
01</option><option>2002</option><option>2003</option><
option>2004</option><option>2005</option><option>2006<
/option><option>2007</option><option>2008</option><opti
on>2009</option><option>2010</option><option>2011</op
tion><option>2012</option><option>2013</option><option>
2014</option><option>2015</option><option>2016</option
><option>2017</option><option>2018</option><option>201
9</option><option>2020</option><option>2021</option><o
ption>2022</option><option>2023</option><option>2024</
option><option>2025</option><option>2026</option>
</select>
<label>Languages Known:</label>
<input type="checkbox"> English
<input type="checkbox"> Hindi
<input type="checkbox"> Other
<label>Address:</label>
<textarea rows="3" placeholder="Enter your
address"></textarea>
<button type="submit">Register</button>
</form>
</body>
</html>
[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ
GL BAJAJ Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science &
Institute of Technology & Management Engineering
Greater Noida
Experiment -6
Aim- Jsvaladitaion
Name
Password
Program:
// -----------------------------
// Registration Form Validation
// -----------------------------
function validateForm() {
let name = [Link]("name").[Link]();
let password = [Link]("password").[Link]();
// Name must contain only alphabets and minimum 6 characters
let namePattern = /^[A-Za-z]+$/;
if ([Link] < 6 || ) {
alert("Name must contain only alphabets and be at least 6 characters
long.");
return false;
}
[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ
// Password
GL BAJAJ
must be& Management
at least 6
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science &
characters
Institute of Technology Engineering
Greater Noida
if ([Link] < 6) {
alert("Password must be at least 6 characters long.");
return false;
}
alert("Form submitted successfully!");
return true;
}