G. L.

Bajaj Institute of Technology and Management,

Greater Noida

BACHELOR OF TECHNOLOGY
IN
INFORMATION TECHNOLOGY

WEB DESIGNING WORKSHOP

LAB FILE (BCS-553)
SESSION: 2023-24

SUBMITTED BY SUBMITTED TO
Name:

Section:

Roll No:

Year / Semester:
 INDEX
S. Program Name Execution Submissio Signature Remarks
No. Date n Date

1 Create a Basic Structure of a webpage in

HTML

2 Create a webpage using Table and Nested List

3 Create a webpage using Image, Marquee,

Anchor Tag

4 Create a webpage using External CSS

5 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).

6 Create a Login Page using CSS

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

8 CARTPAGE: The cart page contains the

details about the books which are added to the
cart.
9 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)

10 JS VALIDATION: Write JavaScript to

validate the following fields of the above
registration page.
 1. Name (Name should contains al-
phabets and the length should not
be less than 6 characters).
2. Password (Password should not
be less than 6 characters length).
11 JS VALIDATION:

3. E-mail-id (should not contain

any invalid and must follow the
standard
pattern([email protected])

4. Phone Number (Phone number

should contain 10 digits only).
12 CSS: Design a web page using CSS (Cas-
cading Style Sheets) which includes the fol-
lowing:

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 ele-
ments on the page.
13 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
14 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

List Of Experiments
Experiment
List of Experiments (Indicative & not limited to)
No.

1 Design the following static webpages 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).

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.
Logo Web Site Name
Home Login Registration Catalogue Cart
CSE
ECE
Description of the WebSite
EEE
CIVIL
2. LOGINPAGE:

This page looks like below:

Logo WebSite Name

Home Login Registration Catalogue Cart

CSE
Login Page
ECE
User Name:
EEE Passwords:

CIVIL
Submit Reset
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.

Web Site Name

Logo

Home Lo- Registration Catalogue Cart

gin
Book:XMLBible
CSE Author : Winston
Publication:Wiely $40.5

EEE Book :AI Au-

thor:S.Russl $63
Publication:Princetonhall

CIVIL Book: Java 2 Author:Wat-

son Publication:BPBpubli- $35.5
cation

Book: HTML in 24 hours

Author: Sam Peter Publica- $50
ECE tion:Sampublication

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

3. E-mail-id (should not contain any invalid and must follow the standard pattern([email protected])
4. 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:
3) Control the repetition of the image with the background-repeat property.
4) 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.

6. Your Own Portfolio

7. To-Do List
8. Survey Form
9. A Tribute Page
10. A Questionnaire

Program No. -1
Aim: - Design the following static webpages 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

Code: -