G L Bajaj Institute of Technology & Management
Greater Noida
Web Designing Workshop
(BCS-353)
SESSION: 2025-26
COURSE : [Link] (CSE-AI)
SEM: IIIrd
Department of Computer Science and Engineering (AI)
Submitted To: Submitted By:
Mr. Mohit Kumar Name:
Assistant Professor Roll No.:
Department of CSE (AI)
[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ
GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science &
Greater Noida
Engineering
List of Experiments
Sr. No. Experiments
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.
Define styles for links as:-
A:link
A:visited
A:active
A:hover
[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ
GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science &
Greater Noida
Engineering
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
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science &
Greater Noida
Engineering
Experiment No.1
Aim: - Design the following static webpages required for an online book store website.
HOMEPAGE:
The static home page must contain three frames.
Top frame: Logo and the college name and links to Homepage, Login
page, Registration page, Catalogue page and Cart page
Code: -
Homepage
<head>
<frameset rows="20%,*">
<frame src="[Link]"name="f1">
<frameset cols="20%,*">
<frame src="[Link]"name="f2">
<frame src="[Link]"name="f3">
</frameset>
</frameset>
</head>
OUTPUT:
[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ
GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science &
Greater Noida
Engineering
Top frame:
<html>
<body>
<p>
<img src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\[Link]" align=left width=100
height=100">
<h1 align=center>Online book store</h1>
</p>
<br>
<p>
<h2> nbsp;
<a href="[Link]" target=_parent>
Home
</a>
<a href="[Link]" target="f3">
login
</a>
<a href="[Link]" target="f3">
registration
</a>
nbsp;
<a href="[Link]" target="f3">
Catalogue
</a>
<a href="[Link]" target="f3">
Cart
</a>
</h2>
</p>
</body>
</html>
OUTPUT:
Leftframe:
<html>
<body>
<a href=[Link] target="f3"><h3>CSE</h3> </a><br><br><br><br><br>
<a href=[Link] target="f3"><h3>ECE</h3></a><br><br><br><br><br>
<a href=[Link] target="f3"><h3>EEE</h3></a><br><br><br><br><br>
<a href=[Link] target="f3"><h3>Civil</h3></a>
</body>
</html>
OUTPUT:
Right frame:
<html>
<body bgcolor="pink">
<p>
<h2 align="center"> <font face="times new roman" color="green" >Online book store information </font> </h2>
<h3> <font face="monotype corsiva" color=blue> This is the online book store developed
by students of [Link] contains book catalogue of various branches like cse,ece,eee,civil </font></h3>
</p>
</body>
</html>
OUTPUT:
Experiment No.2
Aim: - Login Page
DESCRIPTION:
The login page contains the user name and the password of the user to authenticate.
PROGRAM:
<html>
<head>
<p style= "background:yellow; top:100px; left:250px; position:absolute; ">
</head>
<body background=”E:\[Link]”>
<form action="[Link]" method="get">
<label>
<font face="comic sans ms" color="green" size="5">Login </font>
</label>
<input type="text" size="20" maxlength="20" value=' '><br><br><br>
<label>
<font face="comic sans ms" color="green" size="5">Password </font> </label>
<input type="password" size="20" maxlength="20"> <br><br><br>
<input type="submit" value="submit">
<input type="reset">
</form>
</body>
</html>
OUTPUT:
Experiment No.3
Aim: - CATOLOGUE PAGE: The catalogue page should contain the details of all the books available in the website in atable. The
details should contain the following:
1. Snap shot of Cover Page.
2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button
Code: -
<html>
<body>
<center>
<table border=1>
<tr>
<th> Book Preview </th>
<th> Book Details </th>
<th> Price </th>
<th> Payment </th>
</tr>
<tr>
<td> <img src="[Link]" width=100 height=50>
</img>
</td>
<td>
<pre>
<font face="comic sans ms" size=4 color="green" >
book:XML Bible
Author:winston
Publisher:Wiesley
</font>
</pre>
</td>
<td> $40 </td>
<td> <a href="[Link]" target="_blank">
<img src="C:\Users\kivi2\Downloads\[Link]" width="150" height="100"></img>
</a>
</td>
</tr>
<tr>
<td> <img src="[Link]" width=100 height=50>
</img>
</td>
<td>
<pre>
<font face="comic sans ms" size=4 color="green" >
book:Java 2
Author:Watson
Publisher:BPB publications
</font>
</pre>
</td>
<td> $40 </td>
<td> <a href="[Link]" target="_blank">
<img src="C:\Users\kivi2\Downloads\[Link]" width="150" height="100"></img>
</a>
</td>
</tr>
</table> </center>
</body>
</html>
Output: -
Experiment No. 4
Aim: - DESCRIPTION:
The cart page contains the details about the books which are added to the cart.
PROGRAM:
<html>
<body>
<center><br><br><br>
<img src=”E:\[Link]”>
<table border=1 cellpadding=center>
<thead>
<tr>
<th>Book name</th>
<th>price</th>
<th>quantity</th>
<th>amount</th>
</tr>
</thead>
<tr>
<td>java 2</td>
<td>$45</td>
<td>2</td>
<td>$70</td>
</tr>
<tr>
<td> XML bible</td>
<td> $20</td>
<td> 5</td>
<td> $40</td>
</tr>
<th colspan=4>total amount=$110>
</th>
</tr>
</table>
</center>
</body>
</html>
OUTPUT:
Experiment No. 5
Aim: - REGISTRATION PAGE: Create a ‘’registration form’’ with the following fields
1) Name (Text field)
2) Password (password field)
3)E-mail id (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)
Code: - <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
</head>
<body>
<h1>Registration Form</h1>
<form action="[Link]" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="email">E-mail:</label>
<input type="text" id="email" name="email" required><br><br>
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" required><br><br>
<label>Sex:</label>
<input type="radio" id="male" name="sex" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="sex" value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="sex" value="other">
<label for="other">Other</label><br><br>
<label for="dob">Date of Birth:</label>
<select id="day" name="day">
<option value="">Day</option>
<!-- Add day options here -->
</select>
<select id="month" name="month">
<option value="">Month</option>
<!-- Add month options here -->
</select>
<select id="year" name="year">
<option value="">Year</option>
<!-- Add year options here -->
</select><br><br>
<label>Languages known:</label>
<input type="checkbox" id="english" name="languages[]" value="english">
<label for="english">English</label>
<input type="checkbox" id="telugu" name="languages[]" value="telugu">
<label for="telugu">Telugu</label>
<input type="checkbox" id="hindi" name="languages[]" value="hindi">
<label for="hindi">Hindi</label>
<input type="checkbox" id="tamil" name="languages[]" value="tamil">
<label for="tamil">Tamil</label><br><br>
<label for="address">Address:</label><br>
<textarea id="address" name="address" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output: -
Experiment No. 6
Aim: - 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).
Code: - <!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>
function validateForm() {
// Name validation
var name = [Link]("name").value;
if (!/^[a-zA-Z]{6,}$/.test(name)) {
alert("Name should contain alphabets only and have at least 6 characters.");
return false;
}
// Password validation
var password = [Link]("password").value;
if ([Link] < 6) {
alert("Password should be at least 6 characters long.");
return false;
}
// Form is valid
return true;
}
</script>
</head>
<body>
<h1>Registration Page</h1>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
Output: -
Experiment No. 7
Aim: - JS VALIDATION:
3. E-mail-id (should not contain any invalid and must follow the standard pattern(name@[Link])
4. Phone Number (Phone number should contain 10 digits only).
Code: - <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<style>
/* Add your CSS styles here */
</style>
</head>
<body>
<h1>Form Validation</h1>
<form id="myForm" onsubmit="return validateForm()">
<label for="email">E-mail:</label>
<input type="text" id="email" name="email" required><br><br>
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" required><br><br>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
var emailInput = [Link]("email").value;
var phoneInput = [Link]("phone").value;
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var phonePattern = /^\d{10}$/;
if () {
alert("Invalid email address. Please enter a valid email.");
return false;
}
if () {
alert("Invalid phone number. Please enter a 10-digit phone number.");
return false;
}
return true; // Form is valid and can be submitted
}
</script>
</body>
</html>
Output: -
Experiment No. 8
Aim: - CSS: Design a web page using CSS (Cascading Style Sheets) which includes the following:
1) Use different font, styles:
2) In the style definition you define how each selector should work (font, color etc.). Then, in the body ofyour pages, you refer to these
selectors to activate the styles.
3) Set a background image for both the page and single elements on the page.
Code: - <!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>
<style>
/* Define font styles */
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}
h1 {
font-family: "Times New Roman", Times, serif;
font-size: 36px;
color: #009688;
}
p{
font-family: "Courier New", Courier, monospace;
font-size: 18px;
line-height: 1.5;
}
/* Set background image for the entire page */
body {
background-image: url('[Link]');
background-size: cover;
background-repeat: no-repeat;
}
/* Set background image for a specific element */
.highlight-box {
background-image: url('[Link]');
background-size: cover;
background-repeat: no-repeat;
padding: 20px;
margin: 20px 0;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>Welcome to My CSS Page</h1>
<p>This is an example of a web page styled using CSS. You can use different fonts and set background images for elements on the
page.</p>
<div class="highlight-box">
<h2>Highlighted Section</h2>
<p>This section has a custom background image set using CSS. You can apply various styles to make your content stand out.</p>
</div>
<p>Feel free to explore and experiment with different styles and backgrounds for your web pages!</p>
</body>
</html>
Output: -
Experiment No. 9
Aim: - 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
Code: - <!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>
<style>
/* Control background image repetition */
body {
background-image: url('[Link]');
background-repeat: no-repeat; /* Prevent repetition */
background-size: cover;
background-attachment: fixed; /* Fixed background position */
}
/* Define styles for links */
a:link {
color: #3498db; /* Unvisited link color */
text-decoration: none; /* Remove underline */
}
a:visited {
color: #8e44ad; /* Visited link color */
}
a:active {
color: #e74c3c; /* Active link color (when clicked) */
}
a:hover {
color: #e67e22; /* Link color on hover */
text-decoration: underline; /* Add underline on hover */
}
/* Additional styling for page content */
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
h1 {
color: #333;
}
p{
font-size: 18px;
line-height: 1.5;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to My CSS Page</h1>
<p>This is an example of a web page styled using CSS. You can control the repetition of background images and define styles for
links.</p>
<p>Feel free to <a href="#">explore</a> and <a href="#">click</a> on the links to see how they change on interaction.</p>
</div>
</body>
</html>
Output: -
Experiment No. 10
Aim: - 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
Code: - Survey Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survey Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
header {
background-color: #3498db;
color: white;
text-align: center;
padding: 20px;
}
.container {
max-width: 800px;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
h1 {
color: #333;
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
input[type="text"], input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
select {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
textarea {
width: 100%;
height: 100px;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.btn {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background-color: #2187c0;
}
/* JavaScript Validation */
.error {
color: #e74c3c;
font-size: 14px;
}
</style>
</head>
<body>
<header>
<h1>Survey Form</h1>
</header>
<div class="container">
<form id="survey-form" action="[Link]" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="age">Age:</label>
<select id="age" name="age">
<option value="">Select your age</option>
<option value="under18">Under 18</option>
<option value="18-30">18-30</option>
<option value="31-50">31-50</option>
<option value="over50">Over 50</option>
</select>
<label for="comments">Comments:</label>
<textarea id="comments" name="comments"></textarea>
<input type="submit" class="btn" value="Submit">
</form>
<div id="error-message" class="error"></div>
</div>
<script>
// JavaScript form validation
[Link]('survey-form').addEventListener('submit', function (e) {
var name = [Link]('name').value;
var email = [Link]('email').value;
if ([Link]() === '' || [Link]() === '') {
[Link](); // Prevent form submission
[Link]('error-message').innerHTML = 'Name and Email are required fields.';
}
});
</script>
</body>
</html>
Output: -