MANAV RACHNA UNIVERSITY, FARIDABAD

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

ACADEMIC YEAR - 2023 SEMESTER - III rd

LAB FILE

USER INTERFACE - II

SUBJECT CODE - CSW203B

ROLL NO.- 2K22CSUN01060

CLASS - CSE 3B

SUBMITTED BY SUBMITTED TO
Dimple Gaur MS. ANUPRIYA SHARMA
 MANAV RACHNA UNIVERSITY

Vision

To be a quality conscious, research-centric, and change-oriented technological leade

r in the relevant areas.

Mission

DM1: To develop and impart knowledge and skills in the field of Computer Science a
nd Engineering.

DM2: To encourage and support the generation and implementation of innovative ide
as.

DM3: To focus on new techniques, tools, and technology, in an ethical and responsib
le manner.

DM4: To carry out collaborative interdisciplinary Academic and Research activities wi

th a focus on Sustainable Development.

DM5: To create employment-ready human resources

POs and PSOs

Programme Outcomes :

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

amentals, and an engineering specialization to the solution of complex engineering problems.

2. Problem analysis: Identify, formulate, review research literature, and analyze complex en
gineering 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 an

d design system components or processes that meet the specified needs with appropriate cons
ideration for the public health and safety, and the cultural, societal, and environmental consid
erations.

4. Conduct investigations of complex problems: Use research-based knowledge and resear

ch 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 mode
rn engineering and IT tools including prediction and modeling to complex engineering activit
ies with an understanding of the limitations.

6. The engineer and society: Apply reasoning informed by the contextual knowledge to asse
ss societal, health, safety, legal and cultural issues and the consequent responsibilities relevan
t to the professional engineering practice.

7. Environment and sustainability: Understand the impact of the professional engineering s

olutions 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 lea
der in diverse teams, and in multidisciplinary settings.

10. Communication: Communicate effectively on complex engineering activities with the en

gineering community and with society at large, such as, being able to comprehend and write e
ffective reports and design documentation, make effective presentations, and give and receive
clear instructions.

11. Project management and finance: Demonstrate knowledge and understanding of the en
gineering and management principles and apply these to one’s own work, as a member and le
ader 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 engag
e in independent and life-long learning in the broadest context of technological change.

Programme Specific Outcomes

PSO1: Attain the ability to design and develop computer programs and possess acquaintanc
e with emerging technologies and open source platforms in the area of mobile app developme
nt, artificial intelligence, machine learning, web development, data analytics, cloud computin
g and networking to build effective computer based systems
PSO2: Acquire technical competency to deliver computer based innovative and effective sol
utions to tackle business and societal challenges, for pursuing successful career , entrepreneur
ship, research and higher studies.

Bloom’s Taxonomy (BTs)

BT1- Remember: Knowledge involves recognizing or remembering facts, terms, basic conce
pts, or answers without necessarily understanding what they mean.

BT2-Understand: Comprehension involves demonstrating understanding of facts and ideas

by organizing, comparing, translating, interpreting, giving descriptions, and stating the main i
deas.

BT3-Apply: Applying involves using acquired knowledge—solving problems in new situatio

ns by applying acquired knowledge, facts, techniques and rules. Learners should be able to us
e prior knowledge to solve problems, identify connections and relationships and how they ap
ply in new situations.

BT4-Analyze: Analyzing involves examining and breaking information into component parts
determining how the parts relate to one another, identifying motives or causes, making infere
nces, and finding evidence to support generalizations.

BT5-Evaluate: Synthesizing involves building a structure or pattern from diverse elements; i

t also refers to the act of putting parts together to form a whole.

BT6-Create: Evaluating involves presenting and defending opinions by making judgments a

bout information, the validity of ideas, or quality of work based on a set of criteria.

ODD SEMESTER (JAN-JUNE-2021)

DEPARTMENT OF COMPUTER SCIENCE & TECHNOLOGY
Students would be able to
CSW203B.1 demonstrate the basic building blocks of scalable web d
evelopment
CSW203B.2 design and develop dynamic web pages with good aest
hetic sense of designing by applying Bootstrap
CSW203B.3 Learn modern tools, frameworks and Database Connec
tivity to web applications and analyze client-side web UI frameworks
CSW203B.4 deploy a complete professional website using NODE.js.
Programme Educational Objectives
I. A broad general education assuring an adequate foundation in mathematics, science relevant
to computer science & engineering.
II. A solid understanding of concepts fundamental to the discipline of computer science &
engineering.
III. Good analytic, design and implementation skills required to formulate and solve problems
related to computer science & engineering.
IV. Ability to work and communicate effectively as ethically socially responsible professionals.
V. Foster the ability of lifelong learning to constantly adapt with emerging technologies.
 INDEX

Lect .n
LAB Topics Date of Conduct Remarks
o

Revision of HTML5: Creating webpages

1 using semantic elements, introduction
W3C Guidelines

2 Creating Portfolio using HTML and CSS

Working on Javascript: JS Classes, JS

3 Objects, Javascripts Events, form valida
tions

Introduction to Bootstrap: Creating Web

4
pages using Bootstrapping

5 Introduction to client server architecture

Introduction to modern web designing t

6
ools: Creating webpages using WordPr
ess, Canva

7 Working on Webdesigning tool: Dream

weaver

8 ntroduction to SEO: Search Engine Opti

mization, Google Ads Keyword Planner

Introduction to Client server architectur

9
e: Types of servers, Server Environmen
t

Node.js: HTTP Modules, File system, U

10
RL Module, Events, NPM, Upload files,
Email, Node.js
 LAB - 1

Q. Create your portfolio using basic HTML tags like image,

audio, video, table.

Ans: HTML, or HyperText Markup Language, is a standard codi

ng language used to create and structure content on web page
s. It utilizes tags to define elements such as headings, paragrap
hs, links, and images, enabling browsers to interpret and displa
y information in a structured format.
 LAB - 2

Q. State W3C and its guidelines.

Ans: The World Wide Web Consortium (W3C) is an internat

ional community that establishes open standards, ensuring
a collaborative and transparent approach to web developm
ent for global accessibility, compatibility, and innovation.

1. Due Process:
- Fairness and Transparency: The process of developin
g standards within W3C is characterised by fairness and tra
nsparency. All stakeholders have equal opportunities to part
icipate and contribute to the development of standards.
- Public Review and Comment: W3C allows for public re
view and input on draft standards. This inclusive approach
ensures that a wide range of individuals and organisations c
an provide feedback, leading to more comprehensive and r
efined standards.

2. Broad Consensus:
- Collaborative Process: W3C's standards development
involves collaboration among diverse stakeholders, includin
g representatives from industries, academia, and various se
ctors. This collective effort leverages the expertise and insig
hts of a broad spectrum of participants.
- Inclusive Participation: The aim is to gather input from
as many perspectives as possible. This inclusivity ensures t
hat the resulting standards are well-rounded and capable of
addressing the diverse needs of the web ecosystem.
3. Transparency:
- Documentation of Discussions: All discussions, delibe
rations, and decisions made during the standards developm
ent process are thoroughly documented. This documentatio
n is made available to the public, contributing to the transpa
rency of the process.
- Open Access to Information: By providing access to in
formation related to ongoing standards development, W3C f
osters trust and prevents hidden agendas. Transparency en
sures that the decisions are well-informed and open to scrut
iny.

4. Balance:
- Representation of Interests: W3C's development proc
ess ensures representation from a variety of interests and p
erspectives. This balanced approach prevents any single int
erest group from dominating the decision-making process.
- Avoidance of Bias: By preventing undue influence from
any particular sector, W3C promotes the creation of standar
ds that cater to the overall well-being of the web community.

5. Openness:
- Inclusive Participation: W3C's standards development
process is open to all interested parties. This inclusivity enc
ourages a diverse array of contributors, fostering innovation
and enriching the quality of the standards.
- No Barriers to Participation: W3C strives to eliminate
barriers that could hinder participation, such as financial co
nstraints or exclusive access requirements. This ensures th
at valuable insights are gathered from a wide spectrum of st
akeholders.

These principles collectively reflect W3C's commitment to d

eveloping standards that drive the long-term growth and de
velopment of the World Wide Web in a manner that is fair, c
ollaborative, transparent, balanced, and open to all.

LAB - 3

Q. Create a webpage using all types of CSS.

Ans:
 Inline CSS: Inline CSS is a method of styling web content
directly within HTML elements using the "style" attribute. Th
is approach allows you to apply individual styles to specific
elements, but it can lead to code repetition and is harder to
manage for larger websites.

Internal CSS: Internal CSS involves placing CSS code with

in the <style> tags within the <head> section of an HTML d
ocument. It affects the styling of that particular HTML file on
ly. This method is suitable for small-scale websites, offering
better organization than inline CSS but mi

External CSS: External CSS refers to storing the CSS cod

e in separate .css files and linking those files to HTML docu
ments using the <link> element. This approach promotes a
modular and efficient structure, allowing consistent styling a
cross multiple pages. Changes in styling can be applied uni
versally by modifying a single external CSS file, enhancing
maintainability and reducing redundancy.
 LAB-04
1. Introduction to JavaScript/
 JavaScript is a versatile programming language primarily
used for web development to add interactivity and dynamic
behavior to websites. It's a client-side scripting language,
meaning it runs in the web browser of the user, allowing
you to create dynamic and interactive web pages.

5.To display the Date and Time on your webpage on

button click.

2. To change the content of page on button click

3.To style the colour of paragraph of button click.

4.To change the style of paragraph of button click.

5.To change the image on mouseover and mouseout.
6.

LAB-6
Q-Create a website using bootstrap
 Lab-7
Project: Client Server Architecture
Client-server architecture is a widely used network architecture that divides computing tasks
and resources between two types of entities: clients and servers. This architecture is commo
n in various applications, including web services, email, file sharing, and database managem
ent systems. Here's an overview of how client-server architecture works

URL
A URL, which stands for Uniform Resource Locator, is a standardized address used to identi
fy and locate resources on the internet. URLs are the fundamental building blocks of the web
and are used to specify the address of websites, web pages, files, and other resources that c
an be accessed via the World Wide Web.

DNS:
DNS, or Domain Name System, is a fundamental protocol used on the internet and other co
mputer networks to translate human-friendly domain names into numeric IP addresses. It act
s as a decentralized and distributed database system that allows users to access websites a
nd other resources using familiar domain names instead of having to remember numerical IP
addresses (e.g., 192.0.2.1).

ISP:
ISP stands for Internet Service Provider. It is a company or organization that provides acces
s to the internet and related services to individuals, businesses, and other customers. ISPs p
lay a crucial role in enabling users to connect to the global network of computers and access
online resources, including websites, email, streaming media, and more.

IP Address:
An IP address, or Internet Protocol address, is a critical component of computer networking t
hat serves as a digital identifier for devices on a network. It is a numerical label assigned to e
ach device, enabling them to communicate and exchange data within a network or over the i
nternet. IPv4 and IPv6 are the two main IP address versions, with IPv4 using 32-bit address
es and IPv6 using 128-bit addresses to accommodate the expanding number of connected d
evices in our increasingly interconnected world.
 Lab-8
Q1- Print hello world using Nodejs
Q2- Nodejs URL module