G.L.

Bajaj Institute Of Technology And

Management Greater Noida

Department of Computer Science Engineering

(Artificial Intelligence And Machine Learning)

Lab File
(BCS – 353)
Web Designing Workshop

Submitted to: Submitted by:

Mr. Anand Kumar Yadav Roll No.:2301921530085

Assistant Professor Student Name: Ishika Chaurasia
Department of CSE(AIML) Branch: CSAIML
Section: CSAIML 2
Group: G1
 Index
S.No. Name of experiment Date of Date of Signature
Experiment Submission
1
Design the following static web pages 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 (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:

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. - 2301921530085 Name: Ishika Chaurasia

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-mail id(text field)
4) Phone Number(text field)
5) Sex(radio button)
6) Date of birth(3 select boxes)
7) Languages known(check boxes–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:

1. E-mail id (should not contain any invalid and must follow the
standard pattern (name@domain.com)
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
Roll No. - 2301921530085 Name: Ishika Chaurasia
 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

Roll No. - 2301921530085 Name: Ishika Chaurasia

EXPERIMENT 1:

1 Design the following static web pages 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 (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.

Step 1: Open the Notepad

Step 2: type code

head.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="E:\2023 24\WD Workshop\E1\glblogo.jpg" width="101"
height="101"/></td>
<td colspan="4" align="center">Web Site Name</td>
</tr>
</table>
</font>
</body>
</html>

Step 3: Save as “head.html”

Step 4: Double click on the saved file (“head.html”)

Roll No. - 2301921530085 Name: Ishika Chaurasia

Output:

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

dept.html

<html>
<head>
<title>Departments Page</title>
</head>
<body>
<font face="Arial Black" size="4">
<table align="center" height="100%">
<tr>

Roll No. - 2301921530085 Name: Ishika Chaurasia

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

desc.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. - 2301921530085 Name: Ishika Chaurasia

Output:

Here we combining all four HTML files in to one HTML file.

home.html
<html>
<head>
<title>Home page</title>
</head>
<frameset rows="20,10,70">
<frame src="head.html" name="head_page" scrolling="NO">
<frame src="menu.html" name="menu_page">
<frameset cols="10,55">
<frame src="dept.html" name="dept_page">
<frame src="desc.html" name="des_page">
</frameset>
</frameset>
</html>

Output:

Roll No. - 2301921530085 Name: Ishika Chaurasia

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">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="RESET"></td></tr>
</table>
</form>
</center>
</body>
</html>

Roll No. - 2301921530085 Name: Ishika Chaurasia

Output:

Roll No. - 2301921530085 Name: Ishika Chaurasia

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>
</tr>
<tr>
<td> &nbsp <img src="E:\2023 24\WD Workshop\E1\DAA.jpeg" 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 &nbsp
Publisher:MIT Press
</font>

Roll No. - 2301921530085 Name: Ishika Chaurasia

</pre>
</td>
<td>&nbsp;$40 &nbsp; </td>
<td> &nbsp; &nbsp; <a href="cart.html" target="_blank">
<img src="addtocart.jpg" width="100" height="50"></img>
</a> &nbsp; &nbsp;
</td>
</tr>
<tr>
<td> <img src="wt.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>&nbsp; $40 &nbsp;</td>
<td> &nbsp; &nbsp; <a href="cart.html" target="_blank">
<img src="addtocart.jpg" width="100" height="50"></img>
</a> &nbsp; &nbsp;
</td>
</tr>
</table> </center>
</body>
</html>

Output:

Roll No. - 2301921530085 Name: Ishika Chaurasia

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:

Program-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>
</table>
<h3>Total Amount= $120</h3>
</center>
</body
</html

Roll No. - 2301921530085 Name: Ishika Chaurasia

Output:

Roll No. - 2301921530085 Name: Ishika Chaurasia

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 bgcolor="#9CAF88">
<center><font color="blue" size="6" face="arial">Registration Form</font></center><br>
<form action="rsubmitted.html">
<font color="blue"> First Name(Minimum 6 characters) </font> &nsp&nsp&nsp
<input type='text' id='firstname'><br><br>
<font color="blue">Last Name</font>&nsp&nsp&nsp& nsp&nsp&nsp&nsp
<input type='text' id='lastname'><br><br>
<font color="blue"> EmailAddress </font> nsp&nsp&nsp&nsp nsp&nspnsp&nsp
<input type='text' id='email'><font color="red">e.g. xyz@gmail.com</font><br><br>
<font color="blue">Password(Minimum 6 characters)</font> nsp&nsp&nsp&nsp
<input type='password' id='pass'><br><br>
<font color="blue">Address</font> nsp&nsp&nsp&nsp
<textarea rows="4" cols="25" id='address'></textarea> <br><br>
<font color="blue">Mobile No.</font> nsp&nsp&nsp&nsp nsp&nsp&nsp&nsp
<input type='text' id='mobileno'><br><br>
<font color="blue"> Gender: </font><input type='radio' name="gender"><font color="blue">male</font>
<input type='radio' name="gender"><font color="blue">female</font><br><br>
<input type='Submit' value='submit'>
<input type='Reset' value='reset'>
</form>
</body>
</html>

Roll No. - 2301921530085 Name: Ishika Chaurasia

Output:

Roll No. - 2301921530085 Name: Ishika Chaurasia