A Project Report

On
Online cosmetics
Submitted to

VIKRAMA SIMHAPURI UNIVERSITY

NELLORE.

In partial fulfillment of the

Requirements for the award of the degree of
Bachelor of Science
By
G.Mounika sravani 183118503
K.pavani 183118525
M.sukanya 183118557
D.keerthana 183118463
K.Suma Priya 183118528
K.Deepthi 183118522
Under the guidance of
Mr.S.SUJITH KUMAR M.C.A
Lecturer in Computer science

Department of Computer Science

KRISHNA CHAITANYA DEGREE & PG COLLEGE
NELLORE.
(2018-2021)

1|Page
 SRI KRISHNA CHAITANYA DEGREE & PG COLLEGE
(Affiliated to V.S University, Nellore)
NELLORE (A.P)

CERTIFICATE

This is to certify that the project entitled ONLINE COSMETICS Submitted in the
partial fulfillment of the requirement for the award of degree of Bachelor of
Science to the V.S University is a bonafide record work carried out by

G.Mounika sravani 183118503

K.pavani 183118525
M.sukanya 183118557
D.keerthana 183118463
K.Suma Priya 183118528
K.Deepthi 183118522

GUIDE HEAD OF THE DEPT

(MR.S.SUJITH KUMAR MCA)

( CV.PAVANKUMARM.Sc(IT),M.Tech)

EXTERNAL EXAMINERS

1.

2.

Submitted for the project examination held on………/2021.

2|Page
 ACKNOWLEDGEMENT
We would like to express our heart full thanks to our college directors
Sri.Dr.R.V.KrishnaReddy and Sri.P.Chandhrasekhar Reddy and Dean Smt.B.Sudha
rani for helping us to carryout the Project in smooth space.

we express our sincere thanks to our guide Mr.S.Sujith Kumar Lecturer in

computer science, who gave valuable guidance at each every stage in completing
our project in time.

we express our sincere thanks to Sri. C.V.Pavan Kumar Head of the department of
Computer Science who provide lab for completing our project in time.

Our Parents have been moving spirit behind this work. This acknowledgement is
only a small way of showing our love to them, as we just cannot repay them.

We also express our sincere thanks to other Staff Members of the department of
computer science, for their helping in project work.

G.Mounika sravani 183118503

K.pavani 183118525
M.sukanya 183118557
D.keerthana 183118463
K.Suma Priya 183118528
K.Deepthi 183118522

3|Page
PROJECT REPORT- ONLINE COSMETICS
CONTENTS Page No
1) OBJECTIVE 5-6
• ABSTRACT
• EXISTING SYSTEM
• PROPOSED SYSTEM
2) SYSTEM ANALYSIS 7-11
• STUDY OF THE SYSTEM
3) SYSTEM DESIGN 12 -21
• PROCESS MODELS USED WITH JUSTIFICATION

4) SOFTWARE REQUIREMENT SPECIFICATIONS 22-24

• REQUIREMENT SPECIFICATION
• EXTERNAL INTERMEDIATE REQUIREMETS
• SOFTWARE QUALITY ASSURANCE
5) DOCUMENT DESIGN 25-28
• HARDWARE REQUIREMENTS
• SOFTWARE REQUIREMENTS

6) TECHNOLOGIES 29-47
• HTML
• HTML TAGS
• C.S.S
7) CODING 48-68
8) OUTPUT SCREENS 69-76
9) TESTING 77-78
• COMPILATION TESTING
• EXECUTION TESTING
• OUTPUT TESTING

10)CONCLUSION 79-80

11)BIBILOGRAPHY 81-82

4|Page
OBJECTIVE

5|Page
ABSTRACT:
In our website we are providing major famous cosmetics .The user can find
various types of cosmetics in different range with ease.And the user will feel
easy to navigate between pages to find suitable product.

EXISTING SYSTEM:

• To buy a exquisite value we need to spend a lot of time and make sure it
is suit for us.
• Especially sensitive products like cosmetics should be brought with care
• We need to talk to the product users and find about it.it is tedious
process,we want to end up in wasting a lot of time.

PROPOSED SYSTEM:

• To design appealing website that disseminate about cosmetics.

• It has genuine cost of the product which prevents from the chicanery of
certain vendors.
• The best thing is the site also has reviews of particular product collected
from the previous users.

6|Page
SYSTEM ANALYSIS

7|Page
STUDY OF THE SYSTEM:
User interface:
User will provide through this website which make the customer easy way to
choose what they want to be buy a product.The project provide various facilities
for the customers and make easy for customer what they want to buy.

INPUT AND OUTPUT REPRESENTATION:

Input design is a part of overall system design.The main objective during the
input design is as given below:

• To produce a cost-effective method of input.

• To achieve the highest possible level of accuracy.
• To ensure that the input is acceptable and understood by the user.

INPUT STAGES:

The main input stages can be listed as below:

• Data recording
• Data transcription
• Data conversion
• Data verification
• Data control
• Data transmission
• Data validation
• Data correction

INPUT TYPES:

It is necessary to determine the various types of inputs. Inputs can be

categorized as follows:

• External inputs, which are prime inputs for the system.

• Internal inputs, which are user communications with the system.

8|Page
 • Operational, which are computer department’s communications to the
system?
• Interactive, which are inputs entered during a dialogue.

INPUT MEDIA:

At this stage choice has to be made about the input media. To conclude
about the input media consideration has to be given to:

• Type of input
• Flexibility of format
• Speed
• Accuracy
• Verification methods
• Rejection rates
• Ease of correction
• Storage and handling requirements
• Security
• Easy to use
• portability

keeping in a view the above description of the input types and input media, it can
be said that most of the inputs are of the form of internal and interactive.

Input data is to be the directly keyed in by the user, the keyboard can be
considered to be the most suitable input device

OUTPUT DESIGN:

In general are:

• External Outputs whose destination is outside the organization.

• Internal Outputs whose destinations is with in organization and they are
the User’s main interface with the computer. Outputs from computer
systems are required primarily to communicate the results for processing to
users. They are also used to provide a permanent copy of the results for
later consultation. The various types of outputs Operational outputs who
9|Page
 use is purely with in the computer department. Interface outputs, which
involve the user in communicating directly with the system.

OUTPUT DEFINITION:

The output should be defined in terms of the following points:

• Type of the output

• Content of the output
• Format of the output
• Location of the output
• Frequency of the output
• Volume of the output
• Sequence of the output

It is not always desirable to print or display data as it is held on computer. It

should be decided as which form of the output is the most suitable.

For example

• Will decimal points need to be inserted.

• Should leading zeros be suppressed.

OUTPUT MEDIA:
In the next stage it is to be decided that which medium is the most appropriate
for the output. The main consideration when deciding about the output media
are:

• The suitability for the device to the particular application.

• The need for a hard copy.
• The response time required.
• The location of the users.
• The software and hardware available.

Keeping in view the above description the project is to have outputs mainly
coming under the category of internal outputs. The main outputs desired
according to the requirement specification are:

10 | P a g e
The outputs were needed to be generated as a hard copy and as well as queries
to be viewed on the screen. Keeping in vies these outputs, the format for the
output is taken from the outputs, which are currently being obtained after
manual processing. The standard printer is to be used as output media for hard
copies

SYSTEM DESIGN:

Hardware Requirements:

Processor : Intel Pentium(R)-Dual core

RAM : 1 GB

Hard Disk : 200 GB

Mouse : Optical

Monitor : 15.6 inches

Software Requirements:

Language : HTML, CSS

Operating System : XP/7/8/10

Using visual paradigm software for drawing UML diagrams

11 | P a g e
SYSTEM DESIGN

12 | P a g e
PROCESS MODEL USED WITH JUSTIFICATION:
SDLC:
SDLC is nothing but Software Development Life Cycle. It is standard which is
used by software industry to develop good software.

STAGES IN SDLC:
▪ Requirements gathering
▪ Analysis
▪ Designing
▪ Coding
▪ Testing
▪ Maintenance

Requirements Gathering stage:

The requirements gathering process takes as its input the goals identified in
the high-level requirements section of the project plan. Each goal will be refined
into a set of one or more requirements. These requirements define the major
functions of the intended application, define operational data areas and reference
data areas and define the initial data entities. Major functions include critical
processes to be managed, as well as mission critical inputs, outputs and reports. A
user class hierarchy is developed and associated with these major functions, data
areas and data requirement identifiers and at minimum, contain a requirement
title and textual description.

High-level
requirements

Requirements
definition
stage

Requirements Updated project Requirements

documents plan & schedule traceability
13 | P a g e
matrix
scheule
These requirements are fully described in the primary deliverables for this stage:
the Requirements Document and the Requirement Traceability Matrix(RTM). The
requirements document contains complete descriptions of each requirement,
including diagrams and references to external documents as necessary. Note that
detailed listings of database tables and fields are not included in the requirements
document.

The title of each requirement is also placed into the first version of the RTM,
along with the title of the each goal from the project plan. The purpose of the
RTM is to show that the product components developed during each stage of the
software development life cycle are formally connected to the components
developed in prior stages.

In the requirements stage, the RTM consists of a list of high-level requirements, or

goals, by title, with a listing of associated requirements for each goal, listed by
requirement title. In this hierarchal listing, the RTM shows that each requirement
developed during this stage is formally linked to a specific product goal. In this
format, each requirement can be traced to a specific product goal, hence the
term requirements traceability.

The outputs of the requirements definition stage include the requirements

document, the RTM and an updated project plan.

• Feasibility study is all about identification of problems in a project

• No. of staff required to handle a project is represented as Team formation, in
the case only modules are individual tasks will be assigned to employees who
are working for that project.
• Project Specification are all about representing of various possible inputs
submitting to the server and corresponding outputs along with reports
maintained by administrator.

Analysis stage:
The planning stage establishes a bird’s eye view of the intended software
product, and uses this to establish the basic project structure, evaluate feasibility

14 | P a g e
and risks associated with the project , and describe appropriate management and
technical approaches.

Application Lifecycle
goals model

Planning
stage

Software Software quality Project plan &

configuration assurance plan schedule
management plan

The most critical section of the project plan is a listing of high-level product
requirements , also referred to as goals. All of the software product requirement
to be developed during the requirements definition stage flow from one or more
of these goals. The minimum information for each goal consists of a title and
textual description , although additional information and references to external
documents may be included. The outputs of the project planning stage are the
configuration management plan, the quality assurance plan, and the project plan
and schedule, with a detailed listing of schedule activities for the upcoming
requirements stage, and high level estimates of effort for the out stages.

15 | P a g e
Designing stage:
The design stage takes as its initial input the requirements identified in the
approved requirements document. For each requirement , a set of one or more
design elements will be produced as a result of interviews, workshops and
prototype efforts. Design elements describe the desired software features in
detail, and generally include functional hierarchy diagram, screen layout
diagrams, tables of business rules, business process diagrams, pseudo code, and
a complete entity relationship diagram with a full data dictionary. These design
elements are intended to describe the software in sufficient detail that skilled
programmers may develop the software with minimal additional input.

Requirements
document

Design stage

Updates
Design document Updated project requirements
plan &schedule traceability
matrix

mamatrix

When the design document is finalized and accepted, the RTM is updated to show
that each design element is formally associated with a specific requirement. The
outputs of the design stage are the design document, an updated RTM, and an
updated project plan.

16 | P a g e
Development(coding) stage:
The development stage takes as its primary input the design elements
described in the approved design document. For each design element, a set of
one or more software artifacts will be produced. Software artifacts include but
are not limited to menus, dialogs, data management forms, data reporting
formats, and specialized procedures and functions. Appropriate test cases will be
developed for each set of functionally related software artifacts, and an online
help system will be developed to guide users in their interactions with the
software.

Design
document

Development
stage

Updated
software Online help project plan&
schedule

Updated
Implementation
Test plan Requirements
map
Traceability
matrix

17 | P a g e
The RTM will be updated to show that each developed artifact is linked to a
specific design element, and that each developed artifact has one or more
corresponding test case items. At this point, the RTM is in its final configuration.
The outputs of the development stage include a fully functional set of software
that satisfies the requirements and design elements previously documented,
functional set of software that satisfies the requirements and design elements
previously documented, an online help system that describes the operation of the
software, an implementation map that identifies the primary code entry points
for all major system functions, a test plan that describes the test cases to be used
to validate the correctness and completeness of the software, an updated RTM
and an updated project plan.

Integration & Test stage:

During the integration and test stage, the software artifacts, online
help, and test data are migrated from the development environment to a
separate test environment. At this point, all test cases are run to verify the
correctness and completeness of the software. Successful execution of the test
suite confirms a robust and complete migration capability. During this stage,
reference data is finalized for production users are identified and linked to their
appropriate roles. The final reference data (or) links to refer the data source files
and production user list are compiled into the Production Initiation Plan.

18 | P a g e
 Implementation Test plan
software Online help map

Integration
&test stage

Integrated Implementation
software map Online help

Production Updated
initiation plan Acceptance plan project plan&
schedule

The outputs of the integration and test stage included an integrated set of
software, an online help system, an implementation map, a production initiation
plan that describes references data and production users, an acceptance plan
which contains the final suite of test cases, and an updated project plan.

Installation & Acceptance Test:

During the installation and acceptance stage, the software artifacts, online
help, and initial production data are loaded onto the production server. At this
point, all test cases are run to verify the correctness and completeness of the
software by the customer.

19 | P a g e
 After customer personnel have verified that the initial production data
load is correct and the test suite has been executed with satisfactory results, the
customer formally accepts the delivery of the software.

Production Acceptance plan Integrated Online help

initiation software
planning

Implementation
map

Installation &
acceptance
stage

Completed
Production Customer
Acceptance test
software Acceptance
Memorandum

Archived software Archived project

artifacts plan & schedule

20 | P a g e
 The primary outputs of the installation and acceptance stage include a
production application, a completed acceptance test suite and a memorandum
acceptance of the software. Finally ,the PDR enters the last of the actual labor
data into the project schedule and locks the project as a permanent project
record. At this point the PDR “locks” the project by archiving all the software
items, the implementation map, the source code, and the documentation for the
future reference.

Maintenance:
Outer rectangle represents the maintenance of a project, Maintenance
team will start with requirement study, understanding of documentation later
employees will be assigned work and they will under go training on that particular
assigned category.

For this life cycle there is no end, it will be continued so on like an umbrella (no
ending points to umbrella sticks).

21 | P a g e
FEASIBILITY STUDY

22 | P a g e
FEASIBILITY ANALYSIS:

Feasibility study is a important phase in the software development process. It

enables the developer to have an assessment of the product being developed. It
refers to the feasibility study of the product in terms of the product, operational
use and technical support required for implementing it.

Feasibility study should be performed on the basis of various criteria and

parameters. The various feasibility studies are:

• Economic feasibility
• Operational feasibility
• Technical feasibility

1. Economic Feasibility:
This procedure is to determine the benefits and savings that are expected
from a candidate system and compare them with costs. If benefits outweigh
costs, then the decision is made to design and implement the system. Otherwise,
further justification or alterations in proposed system will have to be made if it is
to have a chance of being approved. This is an ongoing effort that improves in
accuracy at each phase of the system life cycle.

2. Operational Feasibility:
People are inherently resistant to change, and computers have been known to
facilitate change. It is understandable that the introduction of a candidate system
requires special effort to educate, sell, and train the staff on new ways of
conducting business.

23 | P a g e
 3. Technical Feasibility:

Technical feasibility centers on the existing computer system (hardware,

software, etc.,) and to what extent it can support the proposed addition. If the
budget is a serious constraint, then the project is judged not feasible.

24 | P a g e
 SOFTWARE
REQUIREMENT
SPECIFICATION

25 | P a g e
SOFTWARE REQUIREMENT SPECIFICATION

Definition of SRS:

Software Requirement Specification is the starting point of the software

developing activity. As system grew more complex it became evident that the
goal of the entire system cannot be easily comprehended. Hence the need for the
requirement phase arose. The software project is initiated by the client needs.
The SRS is the means of translating the ideas of the minds of client into a formal
document.
Requirement Analysis:
This stage is to obtain a clear picture of the needs and requirements of the
end-user and also the organization. Analysis involves interaction between the
clients and the analysis. Usually analysts research a problem from any questions
asked and reading existing documents. The analysts have to uncover the real
needs of the user even if they don’t know them clearly. During analysis it is
essential that a complete and consistent set of specifications emerge for the
system.

Each Requirement analysis method has a unique point of view. However all
analysis methods are related by a set of operational principles. They are

• The information domain of the problem must be represented and understood.

• The functions that the software is to perform must be defined.
• The behavior of the software as a consequence of external events must be
defined.
• The models that depict information, function and behavior must be
partitioned in a hierarchical or layered fashion.
• The analysis process must move from essential information to implementation
detail.

26 | P a g e
Requirement Specification:

Specification Principles:
Software Requirements Specification plays an important role in creating
quality software solutions. Specification is basically a representation process.
Requirements are represented in a manner that ultimately leads to successful
software implementation.Requirements may be specified in a variety of ways.
However there are some guidelines worth following:

Representation format and content should be relevant to the problem

• Information contained within the specification should be nested

• Diagrams and other notational forms should be restricted in number and
consistent in use.
• Representations should be revisable.

Software Requirements Specifications:

The software requirements specification is produced at the culmination of

the analysis task. The function and performance allocated to the software as a
part of system engineering are refined by establishing a complete information
description, a detailed functional and behavioral description, and indication of
performance requirements and design constraints, appropriate validation criteria
and other data pertinent to requirements.

External Interface Requirements:

User Interfaces:
This includes GUI standards, error messages for invalid inputs by users,
standard buttons and functions that will appear on the screen.

27 | P a g e
Software Quality Attributes:

Product is adaptable to any changes. Such as the product can be modified

to transfer not only text but also image, audio, video files.

Product is reliable due to the file encryption and authentication. That means the
data is not lost or goes into wrong hands.

Product is portable i.e. it can run between only two connected systems or a large
network of computers.

Product is maintainable i.e. in future the properties of the product can be

changed to meet the requirements.

28 | P a g e
TECHNOLOGIES

29 | P a g e
 HYPERTEXT MARKUP LANGUAGE
Basic HTML:
HTML stands for hypertext markup language. Html was developed by “Tim
Berners-Lee”, in early 1990’s at European practical physics laboratory in Geneva,
Switzerland. HTML is an application of SGML (Standard Generalized Markup
Language).
Basically HTML is a document-layout language (i.e. document designing language)
but not a programming language. It is used to create HTML documents also called
as “web pages”. These web pages can be viewed (displayed) using any browser
software such as (Microsoft Internet Explorer (or) Netscape Navigator, etc.).
HTML contains tags that are predefined combination of characters enclosed
between angular brackets i.e. less than ‘<’ and greater than ‘>’ symbols. Sample
tags are <html>, <title> and <body> etc.A tag is a format name that describes how
the elements of a web page are to be used. These tags are embedded within the
text of web page.

Structure of HTML (XHTML) Document:

An HTML document is ASCII (text) file, which can be created using any text
editor such as ‘notepad’. Every HTML document must have a file extension of
“.html” or “.htm”. The basic structure of HTML document is as follows:
<html>
<head>
Information about the html program
</head>
<body>
Actual content for designing the web page
</body>
<html>

30 | P a g e
In the above structure <HTML> and </HTML> defines starting and ending of an
html document. These tags inform the browser that the lines of code enclosed
belongs to HTML.
Every HTML document has two parts or sections. They are:
1) Header section (i.e, the Document Head)
2) Body section (i.e, the Document Body)

1) Header section or Document Head:

The header section is specified by using the tag <HEAD> and </HEAD>. This
section usually provides additional information (i.e metadata) about the web page
such as the title of the web page, style sheets and scripting code etc.
Title Tag:
The HTML<title>tag is used for declaring the title, or name, of the HTML
document. The title is usually displayed in the browser's title bar (at the top). It is
also displayed in browser bookmarks and search results. The title tag is placed
between the opening and closing <head>tags.
Eg: <head>
<title>ABOUT TITLE TAG</title>
</head>

2) Body section or Document Body:

This section is specified by using the <body> and </body>. In this section,
we can specify the actual contents like the text, images, hyperlinks and tables etc.
the content of these section will be displayed on the webpage as output.

Attributes of body tag

Attribute name Description

Was used to set the background color and image for the
background
document.

31 | P a g e
bgcolor Was used to set the background color on a document.
onload Fires a script when the page has finished loading.

E.g.: <html>
<head>
<title>Welcome</title>
</head>
<body>
INDIA IS A GREAT NATION
</body>
</html>

HTML TAGS:
HTML is a markup language and makes use of various tags to format the
content. Html tags are the instructions that are embedded directly in to the text
of a web page. These tags are enclosed within angle braces <Tag Name>.
In html, the tags are classified into two types. They are:
1. Singular tags
2. Paired tags
1) Singular tags: These tags are also known as one-sided tags. They have an
opening tag, but do not have a closing tag (ending tag).
e.g.<br>, <hr>, etc.

32 | P a g e
2) Paired tags: These tags are also known as two-sided tags. They have both
opening and closing tags (ending tags). The closing tag is the same as that of its
opening tag except “/” character as prefix.
e.g.<html> and </html>, <body> and </body>
The general syntax of the html tags with attributes is as follows:
<TAG attribute-1=”value-1” attribute-2=”value-2”……>
Item to be formatted
</TAG>
In the above syntax, attribute means property it is used to define some
extra properties to the enclosed content.
Many html tags have attributes. All attributes are optional. Each attribute usually
has a choice of various values.
e.g. <body bgcolor =” black” text=” red”>
India is a great nation
</body>

Paragraph Tag:
The paragraph tag is used to break the text into paragraph. It contains
various attributes such as align, style etc. The paragraph tag can be used in the
following form:
<p align=”value” style=” color:value;backgroundcolor:value;>
Text to be formatted
</p>
In the above syntax, closing tag is optional. The style attribute has
“property:value” pair which specifies appearance of the text. Each
“property:value” is terminated by a semicolon.
E.g.:<body>
<! -- This is a paragraph tag used --
-- to specify paragraphs -->
<p align=” left” style=” color: white; background: orange;”>
HTML stands for hypertext markup language. Basically HTML is a document-
layout language (i.e. document designing language) but not a programming

33 | P a g e
language. It is used to create HTML documents also called as “web pages”. These
web pages can be viewed using any browser software such as (Microsoft Internet
Explorer (or) Netscape Navigator).
</p>
</body>
Comment Tag:
The comment tag starts with “<!” and end with “>”. Each comment can
contain single or multiple lines. If a comment is more than one line then, each line
must start and end with “--“and must not contain “--“within its body.
Comments can be placed in either the head or body of web pages. Usually
programmers use comments for displaying the following:
• Name of the application
• Description of purpose of code
• Name of the author
• Original creation date
• Version number
• Copyright information
E.g.: <body>
<! -- This is an example for --
-- Comment tag -->
India is my beloved nation
</body>
Heading Tag:
The heading tag is a paired tag. It provides 6 levels of headings of various
sizes. The beginning of the heading tag is <hi> and corresponding ending tag is
</hi>. Here base ‘i’ can be any value from 1 to 6. The largest heading is <h1> and
the smallest is <h6>. The heading tag can be used in following form:
<h1>HTML </h1> ---- Level One
<h2>HTML </h2> ---- Level Two
<h3>HTML </h3> ---- Level Three
<h4>HTML </h4> ---- Level Four

34 | P a g e
<h5>HTML </h5> ---- Level Five
<h6>HTML </h6> ---- Level Six

The heading tags are very useful for dividing a web page into sections. The
attribute “align” can be used with the heading tag. The align attribute takes
values “left/center/right”.

Sample Program:
<! This program demonstrates the basic tags explain above >
<html>
<head>
<title>Welcome</title><! Title of the web page>
</head>
<body>
<h1 align=” center”>Welcome to Basic HTML</h1>
<h2align=” center”>Welcome to Basic HTML</h2>
<h3 align=” center”>Welcome to Basic HTML</h3>
<h4 align=” center”>Welcome to Basic HTML</h4>
<h5 align=” center”>Welcome to Basic HTML</h5>
<h6 align=” center”>Welcome to Basic HTML</h6>
</body>
</html>

TEXT (TEXT FORMATTING COMMANDS):

The following tags can be used to alter the text:
Basefont Tag:

35 | P a g e
 The <basefont> tag is a singular tag. It is used to define the font to be used
in the web page. The default font size is “3”. Thebasefont tag has an attribute
“size” which can be used to define the font size. The syntax of the base font tag is
as follows:
Syntax: <basefont size=”value”>
E.g. <basefont size=”5”>
This example sets the font size of the web page to 5 points. We can also specify the size
in the following format:
<basefont size=” +2”>
Font Tag:
The font tag is used to change the appearance of the text in a web page. It
is a paired tag and has many attributes. Some of them are:
a) FACE
b) SIZE
c) COLOR
FACE: This attribute is used to specify the type of font.
SIZE: This attribute is used to specify the font size of a particular section of a web
page.
COLOR: This attribute is used to specify the text color for a particular section of a
web page.
The general format of the font is as follows:
<font face=”text style” size=”value” color=” colorname/colorcode”>
text to be formatted
</font>
e.g. <body>
<font face=”verdana” size=”10” color=”red”>
Microsoft Corporation

36 | P a g e
</font>
</body>
Bold Tag:
The bold tag <b> is used to make the text in bold face. It adds emphasis to
the text. Most browsers darken the text and widen the letters.
E.g. <b> India is Great </b>
Italic Tag:
The italic tag <i> is used to make the text into italics.
E.g. <i> India is Great </i>
Strong Tag:
The strong tag <strong> is used to indicate an even higher level of
emphasis.
E.g. This is very <strong> important </strong> day for me.
Monospaced Typewriter Text Tag:
This tag <tt> is used to display text as typewriter output. It is useful for
displaying program code in a web page.
E.g. <tt> India is a beautiful nation </tt>
Subscript Tag:
The subscript tag <sub> is used to generate a subscript.
E.g. Formula for water is H₂O.
Superscript Tag:
The superscript tag <sup> is used to produce superscripts.
E.g. Ten square is written as 10²
BR Tag (Blank Return Tag or Line Break Tag):
The <br> tag is used to insert a line break i.e. a new line. This is a singular
tag and has no attributes, hence in XHTML it can also be used as <br />. It can be
used in the following form:
e.g. <body>
courses in vs university <br>
1. mscs <br />
2. mpcs <br />

37 | P a g e
3. mecs
</body>
PRE Tag (PRE-Formatted):
When it is necessary to include ready-formatted text on a web page like
program code, poetry etc. we can use PRE tag <pre>. In this tag the text is only
wrapped when there is a line break and tabs. The multiple white spaces are not
converted to a single space.
Eg:
<body>
<pre>
main()
{
int a=10, b=20;
cout<<”Sum”<<a+b;
}
</pre>
</body>
Sample Program:
<! This program demonstrates the text formatting commands >
<html>
<head>
<title>Welcome to Text Formatting Tags</title><! Title of the web page>
</head>
<body>
<basefont size=”5”>
<h1 align=”center”>Text Formatting Tags</h1>
<font color=”blue” size=”7” style=”verdana”>HTML</font> stands for
<b>hypertext markup language</b>. Basically <b>HTML</b> is a <i>document-
layout language</i> (i.e. document designing language) but not a programming

38 | P a g e
language. It is used to create HTML documents also called as <strong> “web
pages”</strong>.
These web pages can be viewed using any browser software such as <tt>
(Microsoft Internet Explorer (or) Netscape Navigator) </tt>.
HTML provides tags from subscript and superscript. For example, we can specify
square value of “a” as:<br>
a²<br>
Similarly, the formula of water is: <br>
h₂

COLORS:
Using colors in web pages makes them more beautiful and attractive. The
color can be specified either as a color name or color code. The color names are
general names such as RED, BLUE etc., but the color codes are six figure
hexadecimal values enclosed between double quotes and preceded by a hash
symbol (#).
Colors can be used in a number of places in a web page like: background of a web
page, individual elements and hyperlink colors etc. For example, the body tag can
be used to change colors in following way:
<BODY bgcolor=”colorname/colorcode”
text=”color name/color code”
link=”color name/color code”
vlink=”color name/color code”
alink=”color name/color code”>
BGCOLOR: It is used to change the background color of the entire web page.
TEXT: It is used to change the color of the entire text on the web page.
LINK: This attribute sets the color for hyperlinks in the web page that have not
been visited i.e an unvisited hyperlink
VLINK: This attribute is used to set the color for visited hyperlinks in a web page.
ALINK: This attribute is used to set the color for active hyperlinks in a web page.
e.g.: <body bgcolor=”Orange”
text=”Black”
link=”#00ff00”
39 | P a g e
 vlink=”#0000ff”
alink=”ff0000”>
Colors can also be used within many tags like heading tag, table tags etc. For
example, to change the color of a headings or tables in the following way:
e.g.-1: <h1 color=”#ff0000”>Color Heading</h1>
e.g.-2:<th bgcolor=”#ababab”>

IMAGES:
Images can be used to make a web page more attractive. Browsers display
a limited range of image types like Joint Photographic Experts Group (JPG),
Graphics Interchange Format (GIF) and Portable Network Graphics (PNG) etc.
An image can be used as a background as well as a foreground object on the web
page. By using the BACKGROUND attribute in the body tag we can assign an
image as a background to the web page in the following format:
<body background=”path of the image file”>
The image tag <img>, is used for placing an image on the web page as a
foreground object. Such images are called in-line images. The image tag has
several attributes such as “SRC”, “HEIGHT”, “WIDTH”, “ALT”, “ALIGN”, and
“USEMAP”. The general format of image tag is as follows:
<img src=”path of the image file”
height=”value in pixels / percentage
width=”value in pixels / percentage”
alt=”value”
align=”top / bottom / center / left / right”
usemap=”url”>
In the above syntax, the “SRC” attribute means source attribute that is used to
specify the path of image file. The “HEIGHT” and “WIDTH” attributes are used to
specify the displaying size of the image on the web page.
The “ALT” attribute is used to specify a text to describe the image in words. This
text is called “Tool tip text” and it will be displayed when the user places mouse

40 | P a g e
pointer on the image. If the image is not displayed then the text will appear in the
area where the image has to be displayed.
The “ALIGN” attribute with value “top/bottom/center/left/right” is used to align
the image relative to the text surrounding it on the web page.
e.g.: <body>
This is a
<img src=”d:\images\house.jpg” height=”150” width=”30%” alt=”sample image”
align=”left”>
Sample program
</body>
Image Hyperlink (Graphical Hyperlink):
The image hyperlink is a hyperlink that creates a clickable image. When we
click on the image, it will open the web page that is associated with the image
hyperlink. The general format of image hyperlink is as follows:
Syntax:
<a href=”path of the web page”>
<img src=”path of the image file” height=”value” width=”value”>
</a>
E.g. <body>
<a href=”d:\college\college.html”>
<img src=”d:\college\college.jpg” height=”200” width=”300”>
</a>
</body>
In the above example, college.jpg image is displayed on the web page as a
clickable image. When we click on the image, the web page “college.html” is
opened.

41 | P a g e
Cascading style sheets:
Web pages which are available over internet can be accessed by the user
through many devices like computers, mobile phones or televisions which can
display text, images, and table’s etc. Because of this reason, web pages should be
designed in such a way that they can be accessed and viewed by any interactive
device. Html with its tags has no facilities to design such kind of web pages so
such web pages can be designed by using style sheets along with html tags. A
style sheet is simply a set of formatting instructions that can be applied to desired
text or content on the web page. HTML is used to structure content whereas CSS
is used for formatting structured content. Styles can be cascaded i.e., default
formats or properties can be over ridden by using styles. Note: Some old
browsers may not support all the styles. This is the reason why designers
(programmers) should be careful while designing web pages by using styles.
Using Styles:
CSS is a style language that defines layout of HTML documents. There are three
ways to apply styles to an html document:
1) As an Attribute
2) As a Tag
3) As an External File.
1) As an Attribute:
Inline style sheets can be applied using style attribute that can be applied
for a specific html tag like <h1>, <p> and <hr> etc. For example, to define a
desired style for the heading tag <h1>, we can use the following code: <h1 style
=”background-color: blue; color: white; text-align: center”> ------
------------------------- </h1> In the above example, the default format of <h1> is
42 | P a g e
over reddening by style attribute and these properties will be applied only to the
content of heading tag <h1>.
2) As a Tag:
Inline style sheets can also be applied using <style> tag within the HEAD
section that can be applied to the whole document. For example, to define a
desired style for the paragraph tag <p>, we can use the following code:
<head>
<style>
p { background-color: blue;
(In-Line Style Sheets)
color: green; letter-spacing: 10}
</style>
</head>
In the above example, properties which were defined will be applied to the
whole document i.e., to the content in every paragraph tag of that particular
document.
3) As an External File:
An external style sheet is a text file with an extension .CSS. All the
properties and values of styles are placed in these external style sheets. Then they
can be linked with multiple documents by using the <link> tag. For example, to
define a desired style for the heading tag <h1> in multiple documents like
page1.html, page2.html and page3.html, we can use the following steps: Step-1:
Declaration of properties or creation of CSS file:h1 {background-color: blue; color:
green; border-size: 5} Save the above code with a file name and .css extension.

43 | P a g e
Ex: mystyles.css Step-2: Link mystyles.css to page1.html, page2.html and
page3.html by using <link> tag. The syntax of link tag is as follows:
<link rel=”stylesheets” type=”text/css” href=”url or path of css file“> Ex: <link
rel =”style sheet “ type=”text/css” href=”mystyles.css”>
Defining Own Styles:
Styles are defined by simple rules. We can declare single or multiple sets of
styles which can be linked to a particular content in different situations. When we
define more number of styles, there will be a chance that they may cascade
(override) with each other. Rules of Styles: A style has two parts: SELECTOR and a
SET OF DECLARATIONS enclosed within flower brackets “{ }”. The selector is used
to create a link between rule and tag. Declaration has two parts known as
PROPERTY and VALUE which are separated with a colon (:) and each property
colon value pair must be separated with a semicolon (;). Selector can be placed
into classes, so that content of a tag can be formatted with different styles.
Declarations using selector uses the following format:

44 | P a g e
 Properties related to Fonts: Font-Family: This property is used to assign a
desired font name to the text. The values to the font-family property are font-
family name and generic family name (optional). Most of the browsers support
font family names and all the browsers support generic family names. We can
include more than one font name, among this list. The font name that can be
recognized by browser will be considered. The format of font-family is:
Syntax: font-family:<family name>[<generic family name>]\
Ex: font-family:”Verdana”, “Times New Roman”, “Arial”;
Font-Style:
This property defines the displaying style of text i.e., Normal, Italic, Oblique
Syntax: font-style:normal|italic|oblique
Ex: font-style:italic;
Font-Weight:
This property defines thickness of the text i.e., normal, bold, lighter etc. We
can also give absolute weight in terms of pixels.
Syntax: font-weight:normal|lighter|bold|bolder|100|200
Ex-1: font-weight:bolder;
Ex-2: font-weight:200;
Font-Size:
This property is used to define the size of the text. This size can be in terms
of relative or absolute.
Syntax: font-size:small|medium|large|smaller|larger|value in terms of pixels In
the above syntax relative size includes smaller, larger and absolute size includes
small, medium, large etc.
Ex-1: font-size:large
45 | P a g e
Ex-2: font-size:100;
Properties related to Backgrounds & Colors: Colors: By using this property we can
assign a desired color to a particular text or block of text. The value to this
property should be color name or color code. Syntax: color:color name|color
code
Ex-1: color:red;
Ex-2: color:#ff0000;
Background-Color: By using this property we can assign a color as background to
desired content or area. The value to this property should be color name or color
code or transparent.
Syntax: background-color:color name|color code|transparent
Ex: background-color:blue; Background-Image: Instead of color, we can set an
image as a background to desired content or area using background image
property.
Syntax: background-image:URL (path of image)
Ex: Background-image:URL(microsoft.jpg)
Properties related to Text: Text-Decoration: to decorate a particular text with
underline, overline, line through (striking effect) and blink effect, we can use text-
decoration property.
Syntax: text-decoration:none|underline|overline|line-through|blink In the
above syntax, internet explorer will not support blink value.
Ex: text-decoration:overline; Text-Transform: This property converts and displays
the text into upper case, lower case and in capitalize format. Capitalized format
means initial character of a word will be displayed in upper case.
Syntax: text-transform:none|capitalize|uppercase|lowercase

46 | P a g e
Ex: text-transform:uppercase; Text-Align: This property is used especially for
justifying paragraph on the web page. In general text-align property aligns the
text on the web page.
Syntax: text-align:left|right|center|justify
Ex: text-align:justify;
Text-Indent:
This property defines the indentation of text from left margin to the web
page. Generally, text-indent property can be used to leave some space from left
to the text of first line in a paragraph.
Syntax: text-indent:length|percentage
Ex: text-indent:20;

47 | P a g e
CODING

48 | P a g e
Main homepage coding:
<html>

<head>

<title>Cosmetics</title>

<style>

h1{

color:red;

</style>

</head>

<body background=”c:\users\Elcot-lenovo\pictures\download(1).jpg”vlink=”pink”
alink=”green”>

<center>

<h1>COSMETICS</h1>

</center>

<marquee direction=”right” behavioural=”alternate” bgcolor=”pink”><p><b>THIS

project gives the details of some cosmetics</p></b></marquee>

<marquee direction=”left” behavioural=”alternate” onmouseover=”this.stop()”

onmouseout=”this.start()”scrollamount=”5”>

<a><a href=”cosmetics.html”>

<img src=”c:\users\Elcot-lenovo\pictures\images(6).jpd” width=”300px”

height=”300px” border=”2”></a>

<a><a href=”cosmetics.html”>

49 | P a g e
<img src=”c:\users\Elcot-lenovo\pictures(4).jpg” width=”300px” height=”300px”
border=”2”></a>

<a><a href=”cosmetics.html”>

<img src=”c:\users\elcot-lenovo\pictures\images(4).jpg”width=”300px”
height=”300px” border=”2”></a>

<a><a href=”cosmetics.html”>

<img src=”c:\users\ELCOT-
lenovo\pictures\c_data_users_DefAPPS_AppData_INTERNETEXPLORER_Temp_sa
ved images_imagesHTSY@W4L.jpg” width=”300 px” border=”2”></a>

<a><a href=”cosmetics.html”><img src=”C:\users\ELCOT-

lenovo\pictures\images(3).jpg”width=”300px” height=”300px” border=”2”></a>

<a><a href=”cosmetics.html”><img src=”C:\users\elcot-

lenovo\pictures\images(3).jpg” width=”300px” height=”300px” border=”2”></a>
<a><a href=”cosmetics.html”><img src=”c:\USERS\ELCOT-Lenovo\Pictures\EU-
origin cosmetics Become duty-Free upon Provisional
implementation_.jpg”width=”300px” height=”300px” border=”2”></a>

</marquee>

</body

</head>

</html>

COSMETICS(Coding):
<html>

<head>

<style>

a{

50 | P a g e
 color:pink;

h1{

color:red;

</style>

<body background=”c:\USERS\ELCOT-Lenovo\Desktop\images(1).jpg”
vlink=”green” alink=”orange”>

<h1><center>COSMETICS</center></h1>

<ol type=”1”>

<img src=”c:\users\ELCOT-lenovo\pictures\download(7).jpg” align=”left”>

<a><a href=”cc.html”><li>Women</li></a>

<img src=”C:\users\ELCOT-lenovo\pictures\images(14).jpg” align=”right”>

<a align=”right”><a href=”mens.html”><li>< p style=”text-align:right”>men</a>

</ol>

</body>

</head>

</html>

COSMETICS LIST FOR WOMEN(CODING)

<html>

</head>

<style>

51 | P a g e
a{

color:pink;

h2{

color:red;

</style>

<body background=”c:\users\Elcot-lenovo\pictures\imahes(15).jpg”font
size=”15” a link=green,v link=red>

<ol type=”1”>

<h2><center>COSMETICS LIST</center></font></h1>

<a><a href=”makeup.html”><img src=”c:\users\ELCOT-

Lenovo\Pictures\download(2).jpg”></a>

<a><a href=”makeup.list”><li>Makeup</li></a>

<a><a href=”face.html”><img src=”C:\users\ELCOT-

lenovo\Desktop\download(2).jpg”></a>

<a><ahref=”face.html”><li>face</li></a>

<a><a href=”hair.html”><img src=”C:\Users\ELCOT-

Lenovo\Desktop\download(3).jpg”></a>

<a><a href=”hair.html”><li>Hair</li></a>

<a><a href=”body.html”><img src=”C:\Users\ELCOT-Lenovo

\Pictures\download(3).jpg”></a>

<a><a href=”body.html”><li>Body</li></a>

52 | P a g e
<a><a href=”cosmetics.html”><li>Main menu</a>

</ol>

</body>

</head>

</html

Makeup(Coding):
<html>

<head>

<style>

h1{

color:red;

text-align:center;

a{

color:blue;

</style>

<body background=”c:\Users\Elcot-Lenovo\images(17).jpg” alink=orange

vlink=red>

<h1>Makeup</h1>

<ol type=”1”>

<a><a href=”lbrand.html”><li>Lipstick</li></a>

53 | P a g e
<a><a href=”el.html”><li>Eyeliner</li></a>

<a><a href=”m.html”><li>Mascara</li></a>

<a><a href=”ll.html”><li>Lipliner</li></a>

<a><a href=”f.html”><li>Foundation</li></a>

<a><a href=”lg.html”><li>Lip gloss</li></a>

<a><a href=”es.html”><li>Eye shadow</li></a>

<a><a href=”lib.html”><li>Lip balm</li></a>

<a><a href=”blu.html><li>Blush</li></a>

<a><a href=”np.html”><li>Nail polish</li></a>

</ol>

</body>

</head>

</html>

HAIR(Coding):
<html>

<head>

<style>

h1{

color:red;

text-align:center;

a{

54 | P a g e
 color:blue;

Li

Color:blue;

</style>

<body background=”c:\users\ELcot-Lenovo\Pictures\pexels-photo-255379.ipeg”
alink=orange vlink=pink>

<ol type=1>

<h1>HAIR</h1>

<a><a href=”shampoo.html”><li>Shampoo</li></a>

<a><a href=”cond.html”><li>Conditioner</li></a>

<a><a href=”hc.html”><li>Hair color</li></a>

<a><a href=”hairo.html”><li>Hair oil</li></a>

<li>Blow dryers</li>

<li>Curling irons</li>

<li>Brushes+comb</li>

</body>

</head>

</html>

55 | P a g e
FACE(CODING):
<html>

<head>

<style>

h1{

color:red;

text-align:center;

Color:blue;

li

Color:green;

</style>

<body bgcolor=”c:\Users\ELCOT-Lenovo\Pictures\Pexels-photo-255379.jpeg”
alink=orange, vlink=pink>

<h1>FACE</h1>

<ol type=”1”>

<a><a href=”cleansere.html”><li>cleanser</li></a>

56 | P a g e
<a><a href=”anti.html”><li>Anti-ageing</li></a>

<a><a href=”exf.html”><li>EXFOLIATORS</li></a>

<a><a href=”sunp.html”><li>Sun protection</li></a>

<a><a href=”nc.html”><li>Night cream</li></a>

<li>Lightning cream</li>

<a><a href=”cc.html”><li>Back</li></a>

<a><a href=”cosmetics.html”><li>Main Menu</li></a>

</body>

</head>

</html>

BODY(Coding):
<html>

<head>

<style>

h1{

color:red;

text-align:center;

li{

Color:green;

a{

57 | P a g e
 color:blue;

</style>

<body bgcolor=”c:\Users\ELCOT-Lenovo\pictures\pexels-photo-255379.jpeg
alink=”orange” vlink=”pink>

<h1>BODY</h1>

<ol type=”1”>

<a><a href=”bodyl.html”><li>Body lotion</li></a>

<a><a href=”frag.html”><li>Fragrance</li></a>

<a><a href=”ssr.html”><li>Scar and stretch mark reducers</li></a>

<a><a href=”sc.html”><li>Sun care</li></a>

<li>body scrub</li>

<li>bath brushes+sponges</li>

<a><a h ref=”cc.html”><li>Back</li></a>

<a><a href=”cosmetics.html”><li>Main menu</li></a>

</body>

</head>

</html>

Revlon lipstick review (Coding):

<html>

<head>

<style>

58 | P a g e
H2{ color:lavender;

H3

Color:pink;

Li

Color:blue;

Color:blue;

H4

Color:blue;

<body bgcolor=”light pink”.

<h2>REVLON SUPER LUSTROUS LIPDTICK IN KISS ME CORAL</h2>

59 | P a g e
<img src=”c:\users\Elcot-lenovo\Desktop\download.jpg” align=”center
height=”500 px” width=”500 px”>

<h3>price:</h3>

<h4>&nbsp&nbsp&nbsp rs 550 inr foor 4.2 gms</h4>

<h3>packaging:</h3>

<p>&nbsp&nbsp&nbsp the packaging is a black casing with a gold band withy

Revlon wriiten on it the packaging is</p>

<img src=”c:\user\Elcot-lenovo\desktop\images(3).jpg”height =”500px”

width=”500px”>

<p>&nbsp&nbsp&nbspnot really over the top but it really it for the fact that there
is a see through lid on one end which makes the lipstick shade visible.this is great
for users as they own more than from this range and can find them easily</p>

<h3>Texture</h3>

<p>&nbsp&nbsp&nbsp This range of Revlon lipstick has been in the market since
quite a time and it is still consider one of the best in the market.it would glides so
beautifully on the lips.we always wear lip balm beneath the lipstick.but this does
not bother the lips if we skip the lip balm underneath.texture wise lipstick is
amazing</p>

<h3>Shade:</h3>

<p>&nbsp&nbsp&nbspA true coral shade ,bright one at that this is the kind of
lipstick which one can wear with a little face and eeye makeup and it brightens
the look instantlt. It have medium complexion and it beautiful suis in honest
opinion. It may not look very good on dusky-skinned girls,but may be wrong if you
like swatches,do check out the shade in store./p>

<h3>Pigmentation</h3>

60 | P a g e
<p>&nbsp&nbsp&nbspone swipe and you are done!really!this impacts a beautiful
coral color to lips in just one swipe,even it go on swiping twice or thrice it do not
feel as something is sitting on the lips.it just mean to say it is light weight</p>

<h3>Long lasting</h3>

<p>&nbsp&nbsp&nbsp This is least favourite part. It stays not more than 3 hrs
.but leaves a strong coral behind</p>

<h3>pros:</h3.

<ul>

<li>Superb pigmentation,/li>

<li>Sturd and convenient packaging</li>

<li>not pricey</li>

<li> it does not dry lips</li>

<li>has a great shade collection</li>

<li>Easily available</li>

<h2>REVLON COLORBURST LIP BUTTER IN LOLLIPOP</h2>

<img src=”C:\Users\ELCOT-Lenovo\Desktop\images(4).jpg”height=”500px”
width=”500”px>

<h3>price</h3>

<h4>rs 775 inr</h4>

<h3>Color options</h3>

<p>it available in 14 colours</p>

<h3>Packaging:</h3

<p>&nbsp&nbsp&nbspit comes in a sleek lipstick like package</p>

61 | P a g e
<img src=”C:\Users\Elcot-
Lenovo|Desktop|images(5).jpg”height=”500px”,width=”500px”>

<h3>Texture:</h3>

<p>&nbsp&nbsp&nbsp This range of Revlon lipstick has been in the market since
quite a time and it is still consider one of the best in the market.it would glides so
beautifully on the lips.we always wear lip balm beneath the lipstick.but this does
not bother the lips if we skip the lip balm underneath.texture wise lipstick is
amazing</p><h3>Shade:</h3>

<h3>Shade</h3>

<p>&nbsp&nbsp&nbspA true coral shade ,bright one at that this is the kind of
lipstick which one can wear with a little face and eeye makeup and it brightens
the look instantlt. It have medium complexion and it beautiful suis in honest
opinion. It may not look very good on dusky-skinned girls,but may be wrong if you
like swatches,do check out the shade in store./p>

<h3>Pigmentation</h3>

<p>&nbsp&nbsp&nbspone swipe and you are done!really!this impacts a beautiful

coral color to lips in just one swipe,even it go on swiping twice or thrice it do not
feel as something is sitting on the lips.it just mean to say it is light weight</p>

<h3>Long lasting</h3>

<p>&nbsp&nbsp&nbsp This is least favourite part. It stays not more than 3 hrs
.but leaves a strong coral behind</p>

<h3>pros:</h3.

<ul>

<li>Superb pigmentation,/li>

<li>Sturd and convenient packaging</li>

<li>not pricey</li>

62 | P a g e
<li> it does not dry lips</li>

<li>has a great shade collection</li>

<li>Easily available</li>

<li>This particular shade will suitable medium or fair skin girls</li>

</ul>

<h2>REVLON COLORBURST LIPSTICK IN BLUSH</h2>

<img src=”C:\Users\ELCot-lenovo\Pictures\Revlon-colorburst-lipstick.jpg”
height=”500px” width=”500px”>

<h3>price:</h3>

<h4>580rs for 3.7g</h4>

<h3>Shades</h3>

<p>It available in 20 gorgeous color</p>

<h3>Packaging</h3>

<p>&nbsp&nbsp&nbspThe package is very classy, sophisticated with a quitted

cap and REVLON neatly engraved on the lipstick. The top of the cap resembles the
lipcolor and bottom has the shade, color name and number of lipstick which is
very helpful in locating a particular shade if you have a many shades from a
particular range .The packaging is sturdy and looks like more expensive brands. A
’tick’ sound comes on closing the lipstick ensuring complete safety and makes it
travel friendly to.</p>

<h3>pigmentation:</h3>

<p> All the colorburst lipsticks are pigmented , soft , creamy and light weight and
this shade is no expectation .Blush is not insanely pipgmented,you need atleast 2
swipes to get enough color on lips . Also this shade will cover little pigmented
lips very well</p>

63 | P a g e
<h3>Staying power</h3>

<p>Being a lighter shade . its lasts for about 3 hours on the lips but generally
Revlon colorburst lipstick last for 4 – 5 hours. It appears as a pinkish brown
color on the lips</p>

<h3>Pros:</h3>

<ul>

<li> Beautiful shade</li>

<li> it is very light and non sticky</li>

<li> it is very soft and creamy</li>

<li> it has classy packaging </li>

<li>Available in 20 shades</li>

<li> Easy availability in stores as well as online shops </li>

</ul>

<h3>cons : </h3>

<ul>

<li>The shade blush does not suit dusky complexion </li>

<li> less staying power</li>

<li>Expensive for a drug store brand</li>

</ul>

<h2>REVLON SUPER LUSTROUS LIPSTICK IN LOVE THAT RED</h2>

<h3>Price:</h3>

<h4>rs 550</h4>

64 | P a g e
<h3>Review</h3>

<p>like other color burst lipstick it is too pigmented,creamy with nice formula.the
texture is not drying. But we cannot say either it is moisturizing. It lasts a good
while on the lips, glides on comfortably and looks very sleeks wuth the
chequeered pattern on a black coloured lipstick package,They do have a white
squarish lip , so application might not be precise as those with pointing tips , but
it still love this range, like oher sticker is slightly darker than the real shade</p>

<h2>REVLON COLOR BURST LIP BUTTER IN RASP BERRY PIE</h2>

<img src=”c:\USERS\ELCOT-Lenovo\Pictures\Raspberry-pie-2.jpg” height

=”500px”, width =” 500 px”>

<h3>Price<:/h3>

<h4>rs 6000 for 2.55 g</h4>

<p> on website you will find mentioning 20 shades but actually here in india you
hardly find 10-12 shades at store incl.new launched shades!</p>

<h3>Texture:</h3>

<p>The texture feels very balmy . it is a creay smooth and glide easily on lips.it
has a texture which slips and sometimes bleeds too . if you are looking for high

End lip color balm with glossy finish then it is probably for you . </p>

<h3>About:</h3>

<p> It find to soft to apply the lipstick butter directly on lips.Each time we apply
it gets stuck on the inner side of the lipstick tube.It has tendency to melt of not
kept in low temperature.we keep it on a freeze</p>

<h3>Pigmentation:</h3>

<p>The pigmentation is strong and rich, it is one of the super pigmented shade
ou of all.Those who have pigmented lips easily cover in two swatches.The
coverage is good and pretty build-able medium to full</p>

65 | P a g e
<h3>Staying power</h3>

<p>The staying power is almost three hours without smacking.it does not leave a
tint on your lips after fading.Revlon color burst lip butter is famous for its extreme
hydrating and moisturizing formula which keeps your lips soft and moisture even
after removing it</p>

<h3>Advantages:</h3>

<ul>

<li>Rich pigmentation</li>

<li>Lip butter wth hydrating formula</li>

<li>Glides on smoothly</li>

<li>colour is buildable </li>

<li>Glossy finish like most lip balm has</li>

<li>Lovely packaging</li>

<li>No scent or any annoying taste</li>

</ul>

<h3> Disadvantages</h3>

<ul>

<li>price</li>

<li> bleeds quickly</li>

<li>Thick balmly slippery texture </li>

<li>melt easily</li>

</ul>

</body>

66 | P a g e
</head>

</html>

MENS(coding):
<html>

<head>

<style>

<h1>

Color:red;

Text-align:center;

Color:green;

</style>

<body bgcolor=”black” alink=”pink” vlink=”blue”>

<h1>COSMETICS LIST</h1>

<ol>

<img src=”shaving.jpg”>

<a>< a href=”ss.html”><li>shaving</li></a>

<img src=”face.jpg”>

67 | P a g e
<a><a href=”fm.html”><li>face</li></a>

<img src=”hair.jpg”>

<a><a href=”hm.html”><li>hair</li></a>

</body>

</head>

</html>

68 | P a g e
OUTPUT SCREENS

69 | P a g e
70 | P a g e
71 | P a g e
72 | P a g e
73 | P a g e
74 | P a g e
75 | P a g e
76 | P a g e
TESTING

77 | P a g e
TESTING:
Software testing is a critical element of software quality assurance and
represents the ultimate review of specification , design and coding test presents
as intersecting anomaly for the software engineer .

TESTING PRINCIPLES:
• All test should be traceable to end users requirements.
• Test should be plan long before testing begins .
• Testing should begin on a long scale and progress to words testing in large.
• To be most effective testing should be conducted by independent third party .

Black Box Testing:

In this strategy some test cases are generated as input condition that fully
excuted all functional requirement for the program. This testing has been uses to
find errors in the following categories .

• Incorrect are missing function.

• Interface errors
• Performance errors.
• Intialization and termination errors.

White Box Testing:

In this test cases are generated on the logic of each module by drawing flow
graphs of that module and logical decision are tested all the cases.It has been
used to generate the test cases in the following cases.

• Execute all logical decision all the true and false sites
• Execute all the loops and boundaries and with in the operational bounds
• Execute internal data structure to ensure their validity.

78 | P a g e
CONCLUSION

79 | P a g e
CONCLUSION:
A website that caters your needs was designed , so people can go through it
and choose a nice product. Easily accessible, user for selecting best product
with convenient price.

80 | P a g e
BIBILOGRAPHY

81 | P a g e
BIBILOGRAPHY:
.HTML

HTML Black book by Holzner

.CSS

Visuval presentation for the css by Eric A. Meyer.

• Software Engineering- Pressmen

• W3school

82 | P a g e