IMS ENGINEERING COLLEGE

PRACTICAL FILE
Web Designing Lab
(BCS-353)

B.TECH – II YEAR
(ODD SEM 2024-2025)

Name

Roll No.

Section-Batch

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

IMS ENGINEERING COLLEGE

(Affiliated to Dr A P J Abdul Kalam Technical University, Lucknow)
Approved by AICTE - Accredited by NAAC – ‘A’ Grade
NH#24, Adhyatmik Nagar, Ghaziabad, UP, India
www.imsec.ac.in
 Vision and Mission of the Institute and Department

Vision of the Institute

To make IMSEC an Institution of Excellence for empowering students through technical education,
incorporating human values, and developing engineering acumen for innovations and leadership
skills to upgrade society.

Mission of the Institute

Mission 1: To promote academic excellence by continuous learning in core and emerging
Engineering domains using innovative teaching and learning methodologies.
Mission 2: To inculcate values and ethics among the learners.
Mission 3: To promote industry interactions and cultivate young minds for entrepreneurship.
Mission 4: To create a conducive learning ecosystem and research environment on a perpetual basis
to develop students as technology leaders and entrepreneurs who can address tomorrow’s
societal needs.

Vision of the Department

To provide globally competent professionals in the field of Computer Science & Engineering embedded
with sound technical knowledge, aptitude for research and innovation, and nurture future leaders with
ethical values to cater to the industrial & societal needs.

Mission of the Department

Mission 1: To provide quality education in both the theoretical and applied foundations of Computer
Science & Engineering.
Mission 2: Conduct research in Computer Science & Engineering resulting in innovations thereby
nurturing entrepreneurial thinking.
Mission 3: To inculcate team building skills and promote life-long learning with high societal and
ethical values.

2
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

PROGRAMME EDUCATIONAL OBJECTIVES (PEOs)

B. Tech Computer Science & Engineering Department has the following Program Educational
Objectives:

PEO1: Possess core theoretical and practical knowledge in Computer Science and Engineering for
successful career development in industry, pursuing higher studies or entrepreneurship.

PEO2: Ability to imbibe lifelong learning for global challenges to impact society and
environment.

PEO3: To demonstrate work productivity with leadership and managerial skills having ethics and
human value in progressive career path.

PEO4: To exhibit communication skill and collaborative skill plan and participate in
multidisciplinary fields of Computer Science & Engineering.

PROGRAMME SPECIFIC OUTCOME (PSOs)

B.Tech Computer Science & Engineering Department has the following Program Specific
Outcomes:

PSO1: To analyze and demonstrate, the recent engineering practices, ethical values and
strategies in real time world problems to meet the challenges for the future.

PSO2: To develop adaptive computing system using computational intelligence strategies and
algorithmic design to address diverse challenges in data analysis and machine learning.

3
PROGRAM OUTCOMES
Engineering Graduates will be able to:

1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering

fundamentals, and an engineering specialization to the solution of complex engineering
problems.
2. Problem analysis: Identify, formulate, review research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.
3. Design/development of solutions: Design solutions for complex engineering problems and
design system components or processes that meet the specified needs with appropriate
consideration for the public health and safety, and the cultural, societal, and
environmental considerations.
4. Conduct investigations of complex problems: Use research-based knowledge and research
methods including design of experiments, analysis and interpretation of data, and
synthesis of the information to provide valid conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and
modern engineering and IT tools including prediction and modelling to complex
engineering activities with an understanding of the limitations.
6. The engineer and society: Apply reasoning informed by the contextual knowledge to
assess societal, health, safety, legal and cultural issues and the consequent responsibilities
relevant to the professional engineering practice.
7. Environment and sustainability: Understand the impact of the professional engineering
solutions in societal and environmental contexts, and demonstrate the knowledge of, and
need for sustainable development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of the engineering practice.
9. Individual and team work: Function effectively as an individual, and as a member or
leader in diverse teams, and in multidisciplinary settings.
10. Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend and
write effective reports and design documentation, make effective presentations, and give
and receive clear instructions.
11. Project management and finance: Demonstrate knowledge and understanding of the
engineering and management principles and apply these to one’s own work, as a member
and leader in a team, to manage projects and in multidisciplinary environments.
12. Life-long learning: Recognize the need for, and have the preparation and ability to engage
in independent and life-long learning in the broadest context of technological change.

4
GENERAL LABORATORY INSTRUCTIONS

1. Students are advised to come to the laboratory at least 5 minutes before (to the starting
time), those who come after 5 minutes will not be allowed into the lab.

2. Plan your task properly much before to the commencement, come prepared to the lab with
the synopsis / program / experiment details.

3.Student should enter into the laboratory with:

• Laboratory observation notes with all the details (Problem statement, Aim, Algorithm,
Procedure, Program, Expected Output, etc.,) filled in for the lab session.

• Laboratory Record updated up to the last session experiments and other utensils (if
any) needed in the lab.

• Proper Dress code and Identity card.

4. Sign in the laboratory login register, write the TIME-IN, and occupy the computer system
allotted to you by the faculty.

5. Execute your task in the laboratory, and record the results / output in the lab observation
note book, and get certified by the concerned faculty.

6. All the students should be polite and cooperative with the laboratory staff, must maintain
the discipline and decency in the laboratory.

7. Computer labs are established with sophisticated and high end branded systems, which
should be utilized properly.

8. Students / Faculty must keep their mobile phones in SWITCHED OFF mode during the lab
sessions. Misuse of the equipment, misbehaviors with the staff and systems etc., will attract
severe punishment.

9. Students must take the permission of the faculty in case of any urgency to go out; if
anybody found loitering outside the lab / class without permission during working hours will
be treated seriously and punished appropriately.

10. Students should LOG OFF/ SHUT DOWN the computer system before he/she leaves the
lab after completing the task (experiment) in all aspects. He/she must ensure the system / seat
is kept properly.

5
 DETAILS OF THE EXPERIMENTS CONDUCTED
(TO BE USED BY THE STUDENTS IN THEIR RECORDS)

INDEX

S TITLE OF THE EXPERIMENT DATE OF FACULTY

No SUBMISSION SIGNATURE

1 Design the following static web pages required for an online book store web site.
HOME PAGE:
The static home page must contain three frames.
Top frame: Logo and the college name and links to
Home page, 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.
For e.g.: 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
EEE Web Site
CIVIL

2 Logo Web Site Name

Home Login Registration Catalogue Cart

CSE Login Page

ECE User Name:

EEE Passwords:
Submit Reset
CIVIL
3 CATOLOGUE PAGE:
The catalogue page should contain the details of all the books
available in the web site 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.
Logo Web Site Name

6
 Home Login Registration Catalogu Cart
e
Book : XML
CSE BibleAuthor :
Winston $ 40.5
Publication : Wiely
ECE

Book :AI
EEE
Author : $ 63
S.Russel
CIVIL
Publication : Princeton
hall
Book : Java 2
Author : Watson $ 35.5
Publication : BPB
publications

Book : HTML in 24
hours Author : Sam $ 50
Peter Publication :
Sam publication
4 CART PAGE:
The cart page contains the details about the books which are added to the cart.
The cart page should look like this:
Logo Web Site Name
Home Login Registration Catalogue Cart
CSE Book name Price Quantity Amount
Java 2 $35.5 2 $70
ECE
XML bible $40.5 1 $40.5
EEE
Total amount -
CIVIL $130.5
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:
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).

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

As background-repeat: repeat Tiles the image until the entire page is filled,
just like an ordinary backgroundimage in plain HTML.
2. Define styles for links as
A:link
A:visited
A:active
A:hover

1 Consider a small topic of your choice on which you can develop static web pages and try
0 to implement all topics of html, CSS, and Js within the topic
Choose any topic:
1. Your own portfolio
2. To –Do List
3. Survey Form
4. A Tribute Page
5. A Questionnaire

8
 STUDY AND EVALUATION SCHEME

Course Course
Teaching Scheme Credits Assigned
Code Name
Theory Practical Tutorial Theory Practical Tutorial Tota
BCS-353 l
00 00 00 01 00 01
(P) Web 02
Designing (50)

Workshop Marks)

9
 IMS Engineering College
NH-09, Adhyatmik Nagar, Near Dasna, Distt. Ghaziabad, U.P.
Tel: (0120) 4940000
Department of Computer Science and Engineering

Course Name: Web Designing Lab Course Code: BCS-353

Semester / Year: 3th /2rd NBA Code: C 221

Bloom’s
COURSE OUTCOMES Level
C221.1 Describe the concepts of HTML and design static Web pages. K2,K6

C221.2 Explain the concepts of CSS and design Web pages. K2

C221.3 Identify the concept of HTML, CSS, and JavaScript framework for developing K1,K2
responsive, mobile-first websites
C221.4 Gain knowledge on client side scripting (Java Script) and develop a web page using K3
Js Validation.
C221.5 Develop and implement website using HTML, CSS, Java Script K6

CO-PO Mapping

Course PS
PO 1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PSO1
Outcome O2

C221.1 3 2 3 2 3 1 1 1 2 1 3 3 3
2
C221.2 3 2 3 2 3 1 1 1 2 1 2 3 3 3
C221.3 3 3 3 2 3 1 1 1 2 1 2 3 3 3
C221.4 3 3 3 2 3 1 1 1 2 1 2 3 3 3
C221.5 3 3 3 2 3 1 1 1 2 1 2 3 3 3
C221 3 2.6 3 2 3 1 1 1 2 1 2 3 3 3

10
 LIST OF PROGRAMS

Subject: Web Designing Lab Code: BCS-353

List of Experiments
S.no List of Experiments(Indicative and not limited to ) MAPPING
WITH CO
1 Design the following static web pages required for an online book store web site.
HOME PAGE:
The static home page must contain three frames.
Top frame: Logo and the college name and links to Home page, 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.
For e.g.: 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. C221.1

Logo Web Site Name

Home Login Registration Catalogue Cart
CSE
ECE
Description of the
EEE Web Site
CIVIL

2 Logo Web Site Name

Home Login Registration Catalogue Cart
CSE Login Page
C221.1
ECE User Name:

EEE Passwords:
Submit Reset
CIVIL
3 CATOLOGUE PAGE:
The catalogue page should contain the details of all the books available in the
web site in a table.The details should contain the following:
1. Snap shot of Cover Page.
2. Author Name.
3. Publisher. C221.1
4. Price.
5. Add to cart button.

Logo Web Site Name

Home Login Registration Catalogue Cart

11
 Book : XML Bible
CSE Author : Winston
Publication : Wiely $ 40.5
ECE

Book : AI
EEE
Author : S.Russel $ 63
Publication : Princeton hall
CIVIL

Book : Java 2
Author : Watson $ 35.5
Publication : BPB publications

Book : HTML in 24 hours

Author : Sam Peter $ 50
Publication : Sam publication

4 CART PAGE:
The cart page contains the details about the books which are added to the cart.The cart page
should look like this:
Logo Web Site Name
Home Login Registration Catalogue Cart
CSE Book
Quantity
name Price Amount C221.1
ECE Java 2 $35.5 2 $70
EEE XML bible $40.5 1 $40.5
CIVIL Total amount - $130.5
5
REGISTRATION PAGE:
Create a “registration form “with the following fields
1. Name (Text field) 2) Password (password field)
2. E-mail id (text field)
3. Phone number (text field)
4. Sex (radio button)
5. Date of birth (3 select boxes) C221.1
6. Languages known (check boxes – English, Telugu, Hindi, Tamil)
7. 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). C221.3
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]) C221.4
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 C221.2
body of yourpages, 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 :
12
 3. Control the repetition of the image with the background-repeat property.
As background-repeat: repeat Tiles the image until the entire page is filled, just like an
ordinary backgroundimage in plain HTML.
4. Define styles for links as
C221.2
A:link
A:visited
A:active
A:hover
10 Consider a small topic of your choice on which you can develop static web pages and try to implement all
topics of html, CSS, and Js within the topic
Choose any topic:
1. Your own portfolio C221.5
2. To –Do List
3. Survey Form
4. A Tribute Page
5. A Questionnaire

13
 EXPERIMENT NO. - 1

Design the following static web pages required for an online book store website.

Design the following static web pages required for an online book store web site.
HOME PAGE:
The static home page must contain three frames.
Top frame: Logo and the college name and links to Home page, 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.
For e.g.: 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
EEE the Web Site
CIVIL

home. html
<html>
<head>
<title>IMS ENGINEERING COLLEGE</title>
</head>
<frameset cols="25%,75%">
<frameset rows="25%,10%,65%">
<frame name ="f11" src="D:\WDLab\logo.html">
<frame name ="f21" src="D:\WDLab\home1.html">
<frame name ="f31 "src="D:\WDLab\courses1.html">
</frameset>
<frameset rows="25%, 10%, 65%">
<frame name ="f12"src="D:\WDLab\name.html">
<frameset cols="18%,18%,18%,18%">
<frame name ="f22" src="D:\WDLab\login1.html">
<frame name ="f23" src="D:\WDLab\registration1.html" >
<frame name ="f24" src="D:\WDLab\catalogue1.html">
<frame name = "f25" src="D:\WDLab\cart1.html" >
14
 </frameset>
<frame name = "f32" src="D\WDLAB\home2.html">
</frameset>
</frameset>
</html>

logo.html
<html>
<head>
<title>LOGO</title>
</head>
<body bgcolor="#ffcc00">
<img src="D:\WDLab\logo.jpg" height="100%" width=100%>
</body>
</html>

home1.html
<html>
<head>
<title>HOME1</title>
</head>
<body bgcolor="#ffcc99">
<a href="home.html"> HOME </a>
</body>
</html>

<html>
<head>
<title>home1</title>
</head>
<ul type="none">
<li ><a href="CSE.html" target="f32">CSE </a><br><br>
<li ><a href="ECE.html" target="f32" >ECE </a><br><br>
<li ><a href="EEE.html" target="f32" >EEE </a><br><br>
<li ><a href="CIVIL.html target="f32" ">CIVIL </a>
</ul>
15
</html>

name.html
<html>
<head>
<title>home1</title>
</head>
<body bgcolor="#ffcc66">
<div align="Center"> IMS Engineering College, Ghaziabad </div>
</body>
</html>

login1.html
<html>
<head>
<title>home1</title>
</head>
<body bgcolor="#ffcc99">
<a href="login.html" target="f32">Login </a>
</body>
</html>

registration 1.html
<html>
<head>
<title>home1</title>
</head>
<body bgcolor="#ffcc99">
<a href="registration.html" target="f32">Registration </a>

</body>
</html>

catalogue1.html

<html>
<head>
<title>home1</title>
16
</head>
<body bgcolor="#ffcc99">

<a href="catalogue.html" target="f32">Catalogue</a>

</body>
</html>

cart1.html

<html>
<head>
<title>home1</title>
</head>
<body bgcolor="#ffcc99">
<a href="cart.html" target="f32">Cart </a>

</body>
</html>

CSE.html
<html>
<head>
<title>home1</title>
</head>
<body>

<h1><div align = "Center">Department of Computer Science & Engineering </div> </h1>

<p align="justify">

The Department of Computer Science & Engineering, established in the year 2002 with current intake of
240 students, imparts quality education and believes in creating new opportunities for students to meet the
challenges of technological development in Computer Science & Engineering. The B. Tech. (CSE)
program is affiliated with Dr. APJ Abdul Kalam Technical University, Lucknow, and is approved by
AICTE, New Delhi.

The department has qualified faculty members, infrastructure, and state-of-the-art equipment which help
in providing an excellent environment for teaching and learning. The department is actively involved in
Industrial Training, Project Development, and other professional activities. Department of Computer
Science and Engineering has signed various MOUs with highly recognized organizations to provide live
projects and Internship opportunities to our Engineering Students. Industrial visits, Workshops, Seminars,
Conferences, and Mini Projects for students are also conducted regularly to encourage students. The major
employers of our students are well-renowned Indian conglomerates like TCS, Infosys, Wipro, HCL, and
other multinational companies including IBM, Accenture & HP.
</p>
</body>
</html>

ECE.html
<html>

17
<head>
<title>home1</title>
</head>
<body>

<h1><div align = "Center">Department of Electronics and Communication Engineering </div> </h1>

<p align="justify">

Electronics and Communications Engineering (ECE) involves researching, designing, developing and
testing of electronic equipment used in various systems. Electronics and Communications engineers also
conceptualize and oversee the manufacturing of communications and broadcast systems.This stream of
engineering deals with analog transmission, basic electronics, microprocessors, solid state devices, digital
& analog communication, analogintegrated circuits, microwave engineering, satellite communication,
antenna and wave propagation. It also deals with the manufacturing of electronic devices, circuits, and
communications equipment.This branch of engineering also plays a vital role ensuring fastest means of
communication across the world.
</body>
</html>
EEE.html

<html>
<head>
<title>home1</title>
</head>
<body>
<h1><div align = "Center">Department of Electrical and Electronics Engineering </div> </h1>
<p align="justify">

The Department of Electrical and Electronics Engineering was established in year 2004 with aim to
prepare students for a successful professional career in respective field. Historically, the field of Electrical
& Electronics Engineering is one of the most versatile and has broad applications in multidisciplinary
sectors. The Department has focused towards integrating academics with cutting edge technologies in
modern world.

</body>
</html>

CIVIL.html

<html>
<head>
<title>home1</title>
</head>
<body>

18
<h1><div align = "Center">Department of Civil Engineering </div> </h1>
<p align="justify">

Civil engineering is the professional practice of designing and developing infrastructure projects. This can
be on a huge scale, such as the development of nationwide transport systems or water supply networks, or
on a smaller scale, such as the development of individual roads or buildings.

</p>
</body>
</html>

19