Scribd
Upload
15 views16 pages

Web Design Workshop File (2024-25)

The document outlines a lab file for a web designing workshop at G.L. Bajaj Institute of Technology and Management, detailing experiments for creating static web pages for an online bookstore. It includes specifications for a homepage, login page, catalogue page, cart page, and registration form, along with JavaScript validation and CSS design elements. Each experiment provides HTML code examples and instructions for implementation.

Uploaded by

Naman Kapoor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views16 pages

Web Design Workshop File (2024-25)

The document outlines a lab file for a web designing workshop at G.L. Bajaj Institute of Technology and Management, detailing experiments for creating static web pages for an online bookstore. It includes specifications for a homepage, login page, catalogue page, cart page, and registration form, along with JavaScript validation and CSS design elements. Each experiment provides HTML code examples and instructions for implementation.

Uploaded by

Naman Kapoor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

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:

Roll No.:
Student Name:
Branch:
Section:
Group:
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.
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 ([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
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”)
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>

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

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

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>

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

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

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. [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&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>
Output:

You might also like