G.L.

Bajaj Institute of Technology and

Management Greater Noida

Department of Computer Science &

Engineering

Lab File
(BCS – 353)
Web Designing Workshop

Submitted to: Submitted by:

Mr. Swapnil Kaushal Roll No . 2301920100076
Assistant Professor Student Nam e Arjun verma
Department of CSE Branch CSE
Sectio n 2B
Gro upG1
 Index

S.N Name of experiment Date of Date of Signatu

o. Experime Submissi re
nt on

1 Designthefollowingstaticwebpagesrequiredforanonlinebooks
torewebsite.
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:

Roll No. 2301920100074

Name: Arjit Kumar
 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. 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 (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).

Roll No. 2301920100074

Name: Arjit Kumar
 7 JS VALIDATION:
1. E-mail id (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
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. 2301920100074

Name: Arjit Kumar
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.

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" cell spacing="2" cellpadding="5" width="100%">
<tr>
<tdalign="center"><imgsrc="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>
Roll No. 2301920100074
Name: Arjit Kumar
Step 3: Save as “head.html”
Step 4: Double click on the saved file (“head.html”)
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>
<tdalign="center"><a href="description.html" target="des_page">HOME</a></td>
<tdalign="center"><a href="login.html" target="des_page">LOGIN</a></td>
<tdalign="center"><a href="registration.html"
target="des_page">REGISTRATION</a></td>
<tdalign="center"><a href="catalogue.html" target="des_page">CATALOGUE</a></td>
<tdalign="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%">

Roll No. 2301920100074

Name: Arjit Kumar
<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:

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

Roll No. 2301920100074

Name: Arjit Kumar
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:

EXPERIMENT 2:
2 LOGINPAGE:This page looks like below:

Roll No. 2301920100074

Name: Arjit Kumar
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. 2301920100074

Name: Arjit Kumar
EXPERIMENT 3:
3 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.

Program-catalogue.html
<html>

Roll No. 2301920100074

Name: Arjit Kumar
<body>
<center>
<table border=1>
<tr>
<th> Book Preview </th>
<th> Book Details </th>
<th> Price </th>
<th> Payment </th>
</tr>
<tr>
<td>&nbsp<imgsrc="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>
</pre>
</td>
<td>&nbsp;$40 &nbsp; </td>
<td>&nbsp; &nbsp; <a href="cart.html" target="_blank">
<imgsrc="addtocart.jpg" width="100" height="50"></img>
</a>&nbsp; &nbsp;
</td>
</tr>
<tr>
<td><imgsrc="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">
<imgsrc="addtocart.jpg" width="100" height="50"></img>
</a>&nbsp; &nbsp;
</td>
</tr>
</table></center>
</body>
</html>
Output:

Roll No. 2301920100074

Name: Arjit Kumar
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>
Roll No. 2301920100074
Name: Arjit Kumar
<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>

Output-

Roll No. 2301920100074

Name: Arjit Kumar
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="#100">
<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&nspnsp&nspnsp&nsp
<input type='text' id='email'><font color="red">e.g. [email protected]</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&nspnsp&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. 2301920100074

Name: Arjit Kumar
Output-

Roll No. 2301920100074

Name: Arjit Kumar