Beruflich Dokumente
Kultur Dokumente
ONLINE SHOPPING
BATCH 2015-2018
Ritesh Palit-03324501715
1
ACKNOWLEDGEMENT
Completing a task is never one man effort. It is often the result of invaluable contribution
of number of individuals in a direct or indirect manner that helps in sharing a making of
success. I was really fortunate that I got every type of help I required from the respected
chain of people.
Hence, it becomes my humble duty to express my sincere gratitude to all those people
who helped me in my project work. I would like to thank Dr.Seema Agarwal , project
guide, for providing an opportunity to do my project. She helped me at every step,
whenever I faced a problem. Her feedbacks were enormously helped. Her valuable
suggestion, encouraging advises, constructive criticism and proper guidance helped me
tide over the difficulties.
2
TABLE OF CONTENTS
1. Acknowledgement 2
2. Introduction 4
3. Objectives 5
4. Recognition Of Need 7
5. LITERATURE REVIEW 9
7. Conclusion 53
3
INTRODUCTION
4
OBJECTIVES
5
Objective of this project is to develop an online shopping system with the help of html.
To make ordering the clothing and footwear online, easy and hassle free.
Choose from a selection of different categories of clothing and footwear.
Browse through given products, order them and get them delivered at home.
Making the customers choose from various payment options which includes
Credit Card/Debit Card/Cash Card, Net Banking and Cash on Delivery.
6
Recognition of need
One must know what the problem is before it can be solved. The success of a system
largely depends on how accurately a problem is defined, thoroughly investigated, and
properly carried out through the choice of solution. User need identification and analysis
7
are concerned with what the user needs are rather that what he wants. Not until the
problem has been identified, defined and evaluated, should the analyst think about the
solutions and whether the problem is worth solving.
3) This website will help to know about the information of various types of fashion
accessories.
4) This website have easily accessible information about the online shopping.
8
LITERATURE REVIEW
9
and JavaScript it forms a triad of cornerstone technologies for the World Wide Web.
[3] Web browsers receive HTML documents from a web server or from local storage
and render them into multimedia web pages. HTML describes the structure of a web
page semantically and originally included cues for the appearance of the document.
10
The first publicly available description of HTML was a document
called "HTML Tags", first mentioned on the Internet by Tim Berners-Lee in late 1991. It
describes 18 elements comprising the initial, relatively simple design of HTML. Except
for the hyperlink tag, these were strongly influenced by SGMLguid, an in-
house Standard Generalized Markup Language (SGML)-based documentation format at
CERN. Eleven of these elements still exist in HTML
The draft expired after six months, but was notable for its
acknowledgment of the NCSA Mosaic browser's custom tag for embedding in-line
images, reflecting the IETF's philosophy of basing standards on successful
prototypes. Similarly, Dave Raggett's competing Internet-Draft, "HTML+ (Hypertext
Markup Format)", from late 1993, suggested standardizing already-implemented
features like tables and fill-out forms
The following is an example of the classic "Hello, World!" program, a common test
employed for comparing programming languages, scripting languages and markup
languages. This example is made using 9 source lines of code:
11
<!DOCTYPE html><html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello world!</p>
</body></html>
(The text between <html> and </html> describes the web page, and the text
between <body> and </body> is the visible page content. The markup text "<title>This
is a title</title>" defines the browser page title.)
HTML documents imply a structure of nested HTML elements. These are indicated in
the document by HTML tags, enclosed in angle brackets thus: <p>
In the simple, general case, the extent of an element is indicated by a pair of tags: a
"start tag" <p> and "end tag" </p>. The text content of the element, if any, is placed
between these tags.
Tags may also enclose further tag markup between the start and
end, including a mixture of tags and text. This indicates further (nested) elements, as
children of the parent element.
The start tag may also include attributes within the tag. These
indicate other information, such as identifiers for sections within the document,
identifiers used to bind style information to the presentation of the document, and for
some tags such as the <img> used to embed images, the reference to the image
resource.
12
Some elements, such as the line break <br>, do not permit any embedded content,
either text or further tags. These require only a single empty tag (akin to a start tag) and
do not use an end tag.
Many tags, particularly the closing end tag for the very commonly used
paragraph element <p>, are optional. An HTML browser or other agent can infer the
closure for the end of an element from the context and the structural rules defined by
the HTML standard. These rules are complex and not widely understood by most HTML
coders.
Element examples
Header of the HTML document: <head>...</head>. The title is included in the head, for
example:
<head>
<title>The Title</title></head>
Headings: HTML headings are defined with the <h1> to <h6> tags:
13
<h1>Heading level 1</h1><h2>Heading level 2</h2><h3>Heading level
3</h3><h4>Heading level 4</h4><h5>Heading level 5</h5><h6>Heading level
6</h6>
Paragraphs:
Line breaks:<br>. The difference between <br> and <p> is that "br" breaks a
line without altering the semantic structure of the page, whereas "p" sections the page
into paragraphs. Note also that "br" is an empty element in that, although it may have
attributes, it can take no content and it may not have an end tag.
This is a link in HTML. To create a link the <a> tag is used. The href= attribute holds the
URL address of the link.
Inputs:
There are many possible ways a user can give input/s like:
1 <input type="text" /> <!-- This is for text input-->2 <input type="file" /> <!-- This is
for uploading files-->3 <input type="checkbox" /> <!-- This is for checkboxes -->
Comments:
Comments can help in the understanding of the markup and do not display in the
webpage.
14
Attributes
Most of the attributes of an element are name-value pairs, separated by "=" and written
within the start tag of an element after the element's name. The value may be enclosed
in single or double quotes, although values consisting of certain characters can be left
unquoted in HTML (but not XHTML) . Leaving attribute values unquoted is considered
unsafe. In contrast with name-value pair attributes, there are some attributes that affect
the element simply by their presence in the start tag of the element,like
the ismapattribute for the img element.
There are several common attributes that may appear in many elements :
The class attribute provides a way of classifying similar elements. This can be
used for semantic or presentation purposes. For example, an HTML document might
semantically use the designation class="notation" to indicate that all elements with
this class value are subordinate to the main text of the document. In presentation,
such elements might be gathered together and presented as footnotes on a page
instead of appearing in the place where they occur in the HTML source. Class
attributes are used semantically in microformats. Multiple class values may be
specified; for example class="notation important" puts the element into both the
"notation" and the "important" classes.
15
The title attribute is used to attach subtextual explanation to an element. In
most browsers this attribute is displayed as a tooltip.
The lang attribute identifies the natural language of the element's contents,
which may be different from that of the rest of the document. For example, in an
English-language document:
Semantic HTML
Semantic HTML is a way of writing HTML that emphasizes the meaning of the encoded
information over its presentation (look). HTML has included semantic markup from its
inception,[73] but has also included presentational markup, such
as <font>, <i> and <center> tags. There are also the semantically neutral span and
div tags. Since the late 1990s when Cascading Style Sheets were beginning to work in
most browsers, web authors have been encouraged to avoid the use of presentational
HTML markup with a view to the separation of presentation and content.
In a 2001 discussion of the Semantic Web, Tim Berners-Lee and others gave examples
of ways in which intelligent software "agents" may one day automatically crawl the web
and find, filter and correlate previously unrelated, published facts for the benefit of
human users. Such agents are not commonplace even now, but some of the ideas
of Web 2.0, mashups and price comparison websites may be coming close. The main
difference between these web application hybrids and Berners-Lee's semantic agents
lies in the fact that the current aggregation and hybridization of information is usually
designed in by web developers, who already know the web locations and the API
semantics of the specific data they wish to mash, compare and combine.
An important type of web agent that does crawl and read web pages automatically,
without prior knowledge of what it might find, is the web crawler or search-engine spider.
These software agents are dependent on the semantic clarity of web pages they find as
16
they use various techniques and algorithms to read and index millions of web pages a
day and provide web users with search facilities without which the World Wide Web's
usefulness would be greatly reduced.
In order for search-engine spiders to be able to rate the significance of pieces of text
they find in HTML documents, and also for those creating mashups and other hybrids as
well as for more automated agents as they are developed, the semantic structures that
exist in HTML need to be widely and uniformly applied to bring out the meaning of
published text.
Good semantic HTML also improves the accessibility of web documents (see also Web
Content Accessibility Guidelines). For example, when a screen reader or audio browser
can correctly ascertain the structure of a document, it will not waste the visually
impaired user's time by reading out repeated or irrelevant information when it has been
marked up correctly.
HTTP
The World Wide Web is composed primarily of HTML documents transmitted from web
servers to web browsers using the Hypertext Transfer Protocol (HTTP). However, HTTP
is used to serve images, sound, and other content, in addition to HTML. To allow the
web browser to know how to handle each document it receives, other information is
transmitted along with the document. This meta data usually includes the MIME
17
type (e.g. text/html or application/xhtml+xml) and the character encoding (see Character
encoding in HTML).
The W3C recommendations state that XHTML 1.0 documents that follow guidelines set
forth in the recommendation's Appendix C may be labeled with either MIME
Type. XHTML also states that XHTML documents should be labeled with either MIME
type.
HTML e-mail
FRONTPAGE
18
been replaced by Microsoft Expression Web and SharePoint Designer, which were first
released in December 2006 alongside Microsoft Office 2007, but these two products
were also discontinued in favor of a web-based version of SharePoint Designer, as
those three HTML editors were desktop applications
As a "WYSIWYG" (What You See Is What You Get) editor, FrontPage is designed to
hide the details of pages' HTML code from the user, making it possible for novices to
create web pages and web sites easily.
FrontPage's initial outing under the Microsoft name came in 1996 with the release
of Windows NT 4.0 Server and its constituent Web server Internet Information
Services 2.0. Bundled on CD with the NT 4.0 Server release, FrontPage 1.1 would run
under NT 4.0 (Server or Workstation) or Windows 95. Up to FrontPage 98,
the FrontPage Editor, which was used for designing pages, was a separate application
from the FrontPage Explorer which was used to manage web site folders.With
FrontPage 2000, both programs were merged into the Editor.
19
targeted at the web design professional for the creation of feature-rich web sites.
Microsoft discontinued Microsoft Front Page in December 2006.
During Vermeer development period major architectural decisions was made, but the
product was very raw, and has little in common with powerful HTML editor we see in
Front page 2003. There was no support of code view, no support for regular
expressions, no macros, much less polished interface, etc.
But still major architectural ideas were all present such as distributed flat files based
database of web pages (_VRI sub folder in each web site directory), Front page
extensions, templates, etc.
Vermeer was acquired by Microsoft in January 1996 specifically so that Microsoft could
add Front Page to its Office product line-up. The idea was to gain an advantage in the
browser wars as Front Page was designed to create pages for their own browser,
Internet Explorer. Reportedly they bought it for a nice sum of $133 million. Here is an
early history from Microsoft Bob blog.
As a WYSIWYG editor, Front Page is designed to hide the details of pages' HTML code
from the user, making it possible for novices to easily create web pages and sites. But
Microsoft managed under the disguise of the WYSIWYG HTML editor for entry level
user create powerful, flexible professional product that allow full control of HTML and
editing of the code as well.
Front Page used to require a set of server-side plugins originally known as IIS
Extensions. The extension set was significantly enhanced for Microsoft inclusion of
Front Page into the Microsoft Office line-up with Office 97 and subsequently renamed
Front Page Server Extensions (FPSE). They were available for Apache too. Front page
extensions needed to be installed on the target web server for its content and publishing
20
features to work. But you can also create sites with Front page that does not use Front
page extensions.
There is nothing in Front page which bind you to this technology. It can well be used as
"pure" HTML editor and I used it in this capacity for the last 15 years. Microsoft offered
both Windows and Unix-based versions of FPSE. It contained built-in FTP client to load
changed pages to the site ("publish" in Front page lingo), but custom script were much
better for this purpose. Rsync also can be used. Newer versions of Front Page also
support the standard Web DAV protocol for remote web publishing and authoring.
Front Page 2003 provides of a new Split View option to allow the user to code
in Code View and preview in Design View without the hassle of switching from
the Design and Code View tabs for each review
Dynamic Web Templates (DWT) were included for the first time in FrontPage
2003 allowing users to create a single template that could be used across
multiple pages and even the whole Web site
Interactive Buttons give users a new easy way to create web graphics for
navigation and links, eliminating the need for a complicated image-editing
package such as Adobe Photoshop
The accessibility checker gives the user the ability to check if their code is
standards compliant and that their Web site is easily accessible for people with
disabilities. An HTML optimizer is included to aid in optimizing code to make it
legible and quicker to process
Intellisense, which is a form of autocompletion, that assists the user while typing
in Code View. When working in Code View, Intellisense will suggest tags and/or
properties for the code that the user is entering which significantly reduces the
time to write code. The Quick Tag Editor shows the user the tag they are
21
currently in when editing in Design View. This also includes the option to edit the
specific tag/property from within the Tag Editor
FrontPage 2003 includes pretty weak (no macro recorder) and badly
implemented support for macros (no real distinction of macros related to
automating sequences of FrontPage commands and macros that manipulate
HTML document. Like other Office product it used VBA as a macro language so
there is a (limited) synergy with other Office product that helps in creating
macros.
FP2003 remains a very good HTML editor. And in many respects it is qualitatively better
then competition like Macromedia Dreamweaver (development of which by-and-large
parallel development of Frontpage; version 1.0 was released in December 1997).
22
Screen Shots and Coding
23
This is the welcome page of our website which includes the introduction
about the company and the product line it deals with.
24
Coding:
<html>
<head>
</head>
<body>
<div class="bg">
<div id="header">
<div id="logo">
<h1><a href="#">Flipkart</a></h1>
</div>
<div id="menu">
<ul>
</ul>
</div>
25
</div>
<div id="wrapper">
<div id="sidebar">
<div class="content">
<p>All the products sold on Flipkart are genuine and are being verified by us.</p>
<ul>
</ul>
</div>
<div class="bottom"></div>
</div>
<div id="content">
<div id="splash">
<div class="bottom"></div>
</div>
<div id="welcome">
26
<h2>About Us</h2>
<p>Hello!
It's nice of you to take the time to get to know us better. Here are some things about us
that we thought you might like to know.
Flipkart went live in 2007 with the objective of making books easily available to anyone
who had internet access. Today, we're present across various categories including
movies, music, games, mobiles, cameras, computers, healthcare and personal
products, home appliances and electronics, stationery, perfumes, toys, apparels, shoes
and still counting!
Be it our path-breaking services like Cash on Delivery, a 30-day replacement policy, EMI
options, free shipping - and of course the great prices that we offer, everything we do
revolves around our obsession with providing our customers a memorable online
shopping experience. Then there's our dedicated Flipkart delivery partners who work
round the clock to personally make sure the packages reach on time.
</div>
</body>
</html>
27
On this page the customer can sign up and create an account.This step
makes it easier for the customer to experience better and view more
customized products.
28
Coding:
<html>
<head>
</head>
<body>
<h1><a href="#">Flipkart</a></h1>
</div>
<div id="menu">
<ul>
</ul>
</div>
</div>
<br><br>
29
<form>
<p align="center">
Gender :
Address<br>
<br>
</p>
</form>
</body>
</html>
30
This is the page showcasing that the customer has created it’s account
successfully and can now easily log in the next time they visit the site.
31
Coding:
<html>
<head>
</head>
<body>
<div class="bg">
<div id="header">
<div id="logo">
<h1><a href="#">Flipkart</a></h1>
</div>
<div id="menu">
<ul>
</ul>
</div>
</div>
32
</div>
<p> </p>
successfully.</font></p>
</body>
</html>
33
This page is presenting the men wear section and the variety of product the
site has in it.
34
Coding:
<html>
<head>
</head>
<body>
<div class="bg">
<div id="header">
<div id="logo">
<h1><a href="#">Flipkart</a></h1>
</div>
<div id="menu">
<ul>
</ul>
</div>
<div align="center">
35
<h1><strong><u>Men's Department</u></strong></h1>
</div>
</div>
<P align="center">
<table border="1">
<tr>
<th>Uppers</th>
<td><img src="webpages/4.jpg">
<td><img src="webpages/3.jpg">
Blazer
<td><img src="webpages/6.jpg">
T- shirt
</tr>
<tr>
<th>Lowers</th>
<td><img src="webpages/7.jpg">
Jeans
36
<td><img src="webpages/8.jpg">
Trousers
<td><img src="webpages/9.jpg">
Shorts
</tr>
<tr>
<th>Winterwear</th>
<td><img src="webpages/2.jpg">
Sweater
<td><img src="webpages/1.jpg">
Jacket
<td><img src="webpages/10.jpg">
Sweatshirt
</tr>
<tr>
<th>Footwear</th>
37
<td><img src="webpages/11.jpg">
Flip Flops
<td><img src="webpages/12.jpg">
Formal Shoes
<td><img src="webpages/13.jpg">
Sport Shoes
</tr>
</table>
</p>
</body>
</html>
38
This page is showcasing the women wear and the variety of product the site
has to offer.
39
Coding:
<html>
<head>
</head>
<body>
<div class="bg">
<div id="header">
<div id="logo">
<h1><a href="#">Flipkart</a></h1>
</div>
<div id="menu">
<ul>
</ul>
</div>
<div align="center">
40
<h1><strong><u>Women's Department</u></strong></h1>
</div>
</div>
<P align="center">
<table border="1">
<tr>
<th>Uppers</th>
<td><img src="webpages/14.jpg">
Shirt
<td><img src="webpages/15.jpg">
Kurti
<td><img src="webpages/16.jpg">
T- shirt
</tr>
<tr>
<th>Lowers</th>
<td><img src="webpages/17.jpg">
Jeans
41
{Price - INR 3,100}</td>
<td><img src="webpages/18.jpg">
Trousers
<td><img src="webpages/19.jpg">
Leggings
</tr>
<tr>
<th>Winterwear</th>
<td><img src="webpages/20.jpg">
Sweater
<td><img src="webpages/22.jpg">
Jacket
<td><img src="webpages/21.jpg">
Sweatshirt
</tr>
<tr>
42
<th>Footwear</th>
<td><img src="webpages/23.jpg">
Flip Flops
<td><img src="webpages/24.jpg">
Heels
<td><img src="webpages/25.jpg">
Sport Shoes
</tr>
</table>
</body>
</html>
43
This page is presenting the kids wear section where in the other variety for
kids wear is also present.
44
Coding:
<html>
<head>
</head>
<body>
<div class="bg">
<div id="header">
<div id="logo">
<h1><a href="#">Flipkart</a></h1>
</div>
<div id="menu">
<ul>
</ul>
</div>
<div align="center">
45
<h1><strong><u>Kid's Department</u></strong></h1>
</div>
</div>
<p align="center">
<table border="1">
<tr>
<th>Uppers</th>
<td><img src="webpages/26.jpg">
Shirt
<td><img src="webpages/28.jpg">
Blazer
<td><img src="webpages/27.jpg">
T- shirt
</tr>
<tr>
<th>Lowers</th>
<td><img src="webpages/29.jpg">
Jeans
46
{Price - INR 2,100}</td>
<td><img src="webpages/31.jpg">
Trousers
<td><img src="webpages/30.jpg">
Shorts
</tr>
<tr>
<th>Winterwear</th>
<td><img src="webpages/32.jpg">
Sweater
<td><img src="webpages/33.jpg">
Jacket
<td><img src="webpages/34.jpg">
Sweatshirt
</tr>
<tr>
47
<th scope="row">Footwear</th>
<td><img src="webpages/35.jpg">
Flip Flops
<td><img src="webpages/37.jpg">
Floaters
<td><img src="webpages/36.jpg">
Sport Shoes
</tr>
</table>
</p>
</body>
</html>
48
This is the ‘contact us’ page where in the customer can call or email the
company in case or any complain,doubts or query.
49
Coding:
<html>
<head>
</head>
<body>
<div class="bg">
<div id="header">
<div id="logo">
<h1><a href="#">Flipkart</a></h1>
</div>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
</ul>
</div>
50
</div>
<form>
<div align="center">
<strong>help@flipkart.com</strong><br><br>
</div>
<br><br><br><br><br>
<div align="center">
<h3>MAil us at:</h3>
Bangalore - 560068,<br>
Karnataka, India.</p>
</div>
</form>
51
</body>
</html>
52
CONCLUSION
53
Flipkart.com is the online shopping site which helps the users to buy the products by
just sitting at home. Information regarding the products is also given so that customers
can choose the products according to their convenience.
Flipkart.com aim is to satisfy the customer’s needs by providing the best quality
products. Keeping in mind the valuable time of the customers, Flipkart.com has
provided the system of online shopping where customers can choose the products they
like and get them delivered at their doorsteps.
For more queries they can log in to the email id provided or can call on the phone no.
given in the site.
54
55
BIBLIOGRAPHY
56
www.en.m.wikipedia.org/wiki/Flipkart
www.google.com
www.bing.com
www.flipkart.com
www.w3schools.com
57