G.L.
Bajaj Institute of Technology
and Management Greater Noida
Department of Computer Science &
Engineering (Artificial Intelligence &
Machine Learning)
Lab File
(BCS – 353)
Web Designing Workshop
Submitted To: Submitted By:
Mr. Anand Kumar Yadav Roll No.:2301921530119
Assistant Professor Department of Student Name: Neha Yadav
CSE(AIML) Branch: CSE(AIML)
Section: CSAIML2
Group: G2
Index
S.N Name of experiment Date of Date of Signatu
o. Experim Submissi re
ent on
1 Design the following static webpages required for an online
bookstore 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 (the description of these pages will be given
below).
Left frame: At least four links for navigation, which will
display the catalogue of respective links.
Right frame: The pages to the links in the left frame must be
loaded here. Initially This page contains description of the
web site.
For example: When you click the link “CSE” the catalogue
for CSE Books should be displayed in the Right frame. Right
frame: The pages to the links in the left frame must be loaded
here. Initially this page contains description of the web site.
2 LOGINPAGE:
Roll No.:2301921530119 Neha Yadav
This page looks like below:
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.
Roll No.:2301921530119 Neha Yadav
4 CARTPAGE: The cart page contains the details about the
books which are added to the cart. The cart page should look
like this:
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)
Js VALIDATION: Write JavaScript to validate the
6 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:
1. E-mailid (should not contain any invalid and must
follow the standard pattern([email protected])
2. 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
Roll No.:2301921530119 Neha Yadav
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
Roll No.:2301921530119 Neha Yadav
EXPERIMENT 1:
1 Designthefollowingstaticwebpagesrequiredforanonlinebookstorewebsite.
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 (the description of these pages
will be given below).
Left frame: At least four links for navigation, which will display the catalogue
of respective links.
Right frame: The pages to the links in the left frame must be loaded here. Initially
This page contains description of the web site.
For example: When you click the link “CSE” the catalogue for CSE Books should
be displayed in the Right frame. Right frame: The pages to the links in the left
frame must be loaded here. Initially this page contains description of the web
site.
head.html
<!DOCTYPE html>
<html>
<head>
<title>Head Page</title>
</head>
<body>
<font face="Arial Black" size="3">
<table border="1" cellspacing="2" cellpadding="5" width="100%"> <tr>
<td align="center"><img src="img.jpg" width="101" height="101"/></td>
<td colspan="4" align="center">Web Site Name</td>
</tr>
</table>
</font>
</body> </html>
Roll No.:2301921530119 Neha Yadav
OUTPUT:
menu.html
<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
</head>
<body>
<font face="Arial Black" size="3">
<table border="0" cellspacing="2" cellpadding="0" width="100%"> <tr>
<td align="center"><a href="description.html" target="des_page">HOME</a></td>
<td align="center"><a href="login.html" target="des_page">LOGIN</a></td>
<td align="center"><a href="registration.html"
target="des_page">REGISTRATION</a> </td> <td
align="center"><a href="catalogue.html"
target="des_page">CATALOGUE</a></td>
<td align="center"><a href="cart.html" target="des_page">CART</a></td> </tr>
</table></font>
</body> </html>
Roll No.:2301921530119 Neha Yadav
OUTPUT:
dept.html
<!DOCTYPE html>
<html>
<head>
<title>Departments Page</title>
</head>
<body>
<font face="Arial Black" size="4">
<table align="center" height="100%">
<tr>
<td><a href="cat_CS-DS.html" target="des_page">CS-DS</a></td> </tr> <tr>
<td><a href="cat_CS-AI.html" target="des_page">CS-AI</a></td> </tr> <tr>
<td><a href="cat_CS-AIML.html" target="des_page">CS-AIML</a></td> </tr>
</table>
</font>
</body>
</html>
Roll No.:2301921530119 Neha Yadav
OUTPUT:
desc.html
<!DOCTYPE html>
<html>
<head>
<title> Description page</title>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br>
<font face="TIMES NEW ROMAN" size="5">
<center>
Description of the Website
</center>
</font>
</body>
</html>
Roll No.:2301921530119 Neha Yadav
OUTPUT:
Here we combining all four HTML files in to one HTML file.
home.html
<!DOCTYPE html>
<html>
<head>
<title>Home page</title>
</head>
<frameset rows="20,10,70">
<frame src="head.html" name="head_page" scrolling="NO">
<frame src="head2.html" name="head2_page">
<frameset cols="10,55">
<frame src="dept.html" name="dept_page">
<frame src="desc.html" name="des_page">
</frameset>
</frameset>
</html>
Roll No.:2301921530119 Neha Yadav
OUTPUT:
Roll No.:2301921530119 Neha Yadav
EXPERIMENT 2:
2 LOGINPAGE: This page looks like below:
login.html
<html>
<head>
<title>Login Page</title>
</head>
<body>
<center>
<font face="Arial Black" size="4"><u><b>LOGIN
FORM</b></u></font> <br><br>
<form name="f1" action="" method="post">
<table frame="box" cellspacing="10">
<tr>
<td>Login</td>
<td><input type="text" size="25"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" size="25"></td> </tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="SUBMIT">
<input type="reset" value="RESET"></td>
</tr>
</table></form></center></body></html>
Roll No.:2301921530119 Neha Yadav
Roll No.:2301921530119 Neha Yadav
EXPERIMENT 3:
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.
Program- catalogue.html
<html>
<body>
<center>
<table border=1>
<tr>
<th> Book Preview </th>
<th> Book Details </th>
<th> Price </th>
Roll No.:2301921530119 Neha Yadav
<th> Payment </th>
</tr>
<tr>
<td>   <img src="img1.jpg " width=100 height=150>
</img>
</td>
<td>
<pre>
<font face="comic sans ms" size=4 color="green" > book:Introduction To
Algorithms
Author:Thomas H. Cormen, Charles E. Leiserson, Ronald L. Rivest, and Clifford Stein
 
Publisher:MIT Press
</font>
</pre>
</td>
<td> $40 </td>
<td> <a href="cart.html" target="_blank">
<img src="addtocart.jpg" width="100" height="50"></img>
</a>
</td>
</tr>
<tr>
<td> <img src="img2.jpg" width=100 height=150>
</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="cart.html" target="_blank">
<img src="addtocart.jpg" width="100" height="50"></img>
</a>
</td>
</tr>
</table> </center>
Roll No.:2301921530119 Neha Yadav
</body>
</html>
OUTPUT:
Roll No.:2301921530119 Neha Yadav
EXPERIMENT 4:
4 CARTPAGE: The cart page contains the details about the books which are added to
the cart. The cart page should look like this:
Cart.html
<html>
<head>
<title>Cartpage</title>
</head>
<body>
<center>
<table border=1 width=50 height=10 cellpadding=10 cellspacing=10>
<table width="80%" height="60%" border="2">
<tr>
<th>Book Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount ($)</th>
</tr>
<tr>
<td>Introduction To Algorithms</td>
<td><center>$40</center></td> <td><center>2</center></td>
<td><center>$80</center></td>
</tr>
<tr>
Roll No.:2301921530119 Neha Yadav
<td>Java</td>
<td><center>$40</center></td> <td><center>1</center></td>
<td><center>$40</center></td>
</table>
<h3>Total Amount= $120</h3>
</center>
</body
</html>
OUTPUT:
Roll No.:2301921530119 Neha Yadav
EXPERIMENT 5:
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)
Program- registration.html
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<center>
<font size="6" face="arial"><u><b>Registration Form</b></u></font> </center>
<form action="rsubmitted.html">
<b>Name:</b>
<input type="text" id="name" name="name" required><br><br>
<b>Password:</b>
<input type="password" id="password" name="password" required><br><br>
<b>E-mail ID:</b>
<input type="email" id="email" name="email" required><br><br>
<b>Phone Number:</b>
<input type="text" id="phone" name="phone" required><br><br>
<b>Sex:</b><br>
<input type="radio" id="male" name="sex" value="male" required> Male<br>
<input type="radio" id="female" name="sex" value="female"> Female<br>
<input type="radio" id="other" name="sex" value="other"> Other<br><br>
<b>Date of Birth:</b>
<select id="day" name="day" required>
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
Roll No.:2301921530119 Neha Yadav
<option value="3">3</option>
<option value="31">31</option>
</select>
<select id="month" name="month" required>
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="12">December</option>
</select>
<select id="year" name="year" required>
<option value="">Year</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="2023">2023</option>
</select><br><br>
<b>Languages Known:<b><br>
<input type="checkbox" id="english" name="languages" value="English"> English
<input type="checkbox" id="telugu" name="languages" value="Telugu"> Telugu
<input type="checkbox" id="hindi" name="languages" value="Hindi"> Hindi
<input type="checkbox" id="tamil" name="languages" value="Tamil"> Tamil<br><br>
<b>Address:</b><br>
<textarea id="address" name="address" rows="4" cols="50"
required></textarea><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
Roll No.:2301921530119 Neha Yadav
OUTPUT:
Roll No.:2301921530119 Neha Yadav
