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.:2301921530122
Assistant Professor Department of Student Name: Nitesh Dayma
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.:2301921530122 Nitesh Dayma
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.:2301921530122 Nitesh Dayma
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.:2301921530122 Nitesh Dayma
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.:2301921530122 Nitesh Dayma
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>
OUTPUT:
Roll No.:2301921530122 Nitesh Dayma
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>
OUTPUT:
Roll No.:2301921530122 Nitesh Dayma
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>
OUTPUT:
Roll No.:2301921530122 Nitesh Dayma
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>
OUTPUT:
Roll No.:2301921530122 Nitesh Dayma
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.:2301921530122 Nitesh Dayma
OUTPUT:
Roll No.:2301921530122 Nitesh Dayma
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.:2301921530122 Nitesh Dayma
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>
<th> Payment </th>
Roll No.:2301921530122 Nitesh Dayma
</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>
</body>
</html>
Roll No.:2301921530122 Nitesh Dayma
OUTPUT:
Roll No.:2301921530122 Nitesh Dayma
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>
<td>Java</td>
<td><center>$40</center></td>
<td><center>1</center></td>
<td><center>$40</center></td>
Roll No.:2301921530122 Nitesh Dayma
</table>
<h3>Total Amount= $120</h3>
</center>
</body
</html>
OUTPUT:
Roll No.:2301921530122 Nitesh Dayma
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>
<option value="3">3</option>
<option value="31">31</option>
</select>
<select id="month" name="month" required>
Roll No.:2301921530122 Nitesh Dayma
<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>
OUTPUT:
Roll No.:2301921530122 Nitesh Dayma
