PRACTICLE FILE

OF
E-COMMERCE LAB

GURU GOBIND SINGH INDRAPRASTHA UNIVERSITY

In partial fulfilment of the requirement for the award of the degree of
BACHELOR OF BUSINESS
ADMINISTRATION BATCH- 2022 - 25

SUBMITTED SUBMITTED TO:

BY:
CHIRAG GANDHI Dr. Rakhi Chawla

ENROLEMENT NO – 04115501722 Associate Professor

NEW DELHI INSTITUTE OF MANAGEMENT

61A, TUGHLAKABAD, NEW DELHI-62
 CERTIFICATE

This is to certify that the practical file titled “E-COMMERCE LAB” submitted by

Chirag Gandhi to New Delhi Institute of Management, Guru Gobind Singh

Indraprastha University in partial fulfilment of requirement for the award of the

Bachelor of Business Administration degree is an original piece of work carried out

under my guidance and may be submitted for evaluation.

The assistance rendered during the study has been duly acknowledged.

No part of this work has been submitted for any other degree.

Place: New Delhi Faculty Name:

Date: 12th June, 2023 Dr. Rakhi
Chawla
 ACKNOWLEDGEMENT

Any accomplishment requires the effort of many people and this work is not
different. Regardless of the source, I wish to express my gratitude to those who
may have contributed to this work, even though anonymously.

First, I would like to express my deepest sense of gratitude to NEW DELHI

INSTITUTE OF MANAGEMENT for providing me with an opportunity for this
practical work.

I would like to pay my sincere thanks to my Ecommerce Lab faculty, Dr. Rakhi
Chawla under whose guidance I was able to complete my practical successfully. I
have been fortunate enough to get all the support, encouragement and guidance
from him needed to explore, think new and initiate.

My final thank goes out to my parents, family members, teachers and friends who
encouraged me countless times to persevere through this entire process.

STUDENT NAME &

SIGNATURE

Chirag Gandhi
 INDEX
S.no. Topic Page No.

1. Introduction of HTML with basic tag 1 -5

2. HTML code to FOR Heading Tag 6-7

3. HTML code to demonstrate: 8-10

A. Ordered List.
B. Unordered list.
C. Nested List.
4. HTML code to insert an image in the webpage. 11

5. HTML code to design tables with different styles. 12-15

6. Explain Hyper link also write HTML code to explain Anchor Tag. 16-17

7. HTML code to design Sign Up Form. 18-19

8. Define rowspan & colspan with HTML code 20-21

9. HTML code to design Personal Profile. 22-23

10. HTML code to design a webpage for insurance company. 24

11. HTML code to design an online shopping form. 25-26

12. Explain Form with Html Code 27

13. Explain Frame with HTML code. 28
14. Design a static website of 5 to 10 pages 29-34
 INTRODUCTION TO
HTML

HTML stands for Hypertext Markup Language. It is used to design web pages using a markup
language. HTML is a combination of Hypertext and Markup language. Hypertext defines the
link between web pages. A markup language is used to define the text document within the tag
which defines the structure of web pages. This language is used to annotate (make notes for the
computer) text so that a machine can understand it and manipulate text accordingly. Most
markup languages (e.g., HTML) are human-readable. The language uses tags to define what
manipulation has to be done on the text.

In the late 1980's, a physicist, Tim Berners-Lee who was a contractor at CERN, proposed a
system for CERN researchers. In 1989, he wrote a memo proposing an internet-based hypertext
system.

Tim Berners-Lee is known as the father of HTML. The first available description of HTML was
a document called "HTML Tags" proposed by Tim in late 1991. The latest version of HTML is
HTML5, which we will learn later in this tutorial.

Hyper Text: Hypertext simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked
on a hypertext. Hypertext is a way to link two or more web pages (HTML documents) with each
other.

Markup language: A markup language is a computer language that is used to apply layout and
formatting conventions to a text document. Markup language makes text more interactive and
dynamic. It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and translated by a
web browser. A web page can be identified by entering an URL. A Web page can be of the static
or dynamic type.

With the help of HTML only, we can create static web pages.
An HTML tag must contain three parts:

1. An opening tag — this will start with a < > symbol

2. Content — the short instructions on how to display the on-page element
3. A closing tag — this will end with a </ > symbol

However, some HTML tags can be unclosed. That means that the HTML tag does not need to be
closed with a </ >. You’ll typically use unclosed tags for metadata or line breaks.

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and
display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the
document:
 HTML Page
Structure

Below is a visualization of an HTML page structure:

 BASIC
TAGS

Tag USE
<p> Paragraph

<h1> Heading 1

<h2> Heading 2

<h3> Heading 3

<h4> Heading 4

<h5> Heading 5

<h6> Heading 6

<strong> Strong

<em> Emphasis

<abbr> Abbreviation

<address> Contact Information

<bdo> Override The Current Text Direction

<blockquote> Content From Another Source

<cite> Title Of the Work, Book, Website

<q> Inline Quotation

<code> Display A Part of Programming Code

<ins> Text Inserted

<del> Text Deleted from The Document

<dfn> Term Defined Within a Sentence/Phrase

0<kbd> Keyboard Input

<pre> Preformatted Text

<samp> Sample Output of a Computer Program

<var> Variable Name Used in Mathematical or Programming Context

<br> Single Line Break

<div> Division

<a> Anchor Tag for A Link

<base> Base URL For All Relative URL Within the Document

<img> Image

<area> Area Of an Image Map

<map> Image Map

<param> Parameter For An <Object> Element

<object> Embed An Object

<ul> Unordered List

<ol> Ordered List

<li> List

<dl> Description List

<dt> Term In Description List

<dd> Definition/Description of A Term in Description List

 HTML CODE FOR HEADING
TAG

CODE:
OUTPUT
:
 HTML CODE FOR ORDERED LIST

CODE:

OUTPUT
:
 HTML CODE FOR UNORDERED LIST

CODE:

OUTPUT
:
 HTML CODE FOR NESTED LIST

CODE:

OUTPUT
:
 HTML CODE FOR INSERTING
IMAGE
CODE:

OUTPUT
:
 HTML CODE TO DESIGN TABLES WITH DIFFERENT
STYLES

EXAMPLE OF DESIGNING TABLES

NORMALLY

CODE 1:

<html>
<head><title>Time Table</title> </head>
<body>
<table border="2">
<tr>
<th>Day/Time</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-01:00</th>
<th>01:00-02:00</th>
</tr>
<tr>
<th>monday</th>
<td>BC</td>
<td>BE</td>
 <td>DTB</td>
<td>EC</td>
<td>CA</td>
</tr>
<tr>
<th>tuesday</th>
<td>Be</td>
<td>BC</td>
<td>DTB</td>
<td>EC</td>
<td>CA</td>
</tr>
<tr>
<th>WEDNESday</th>
<td>BC</td>
<td>BE</td>
<td>DTB</td>
<td>EC</td>
<td>CA</td>
</tr>
<tr>
<th>THURSDAY</th>
<td>BC</td>
 <td>BE</td>
<td>DTB</td>
<td>EC</td>
<td>CA</td>
</tr>
<tr>
<th>FRIDAY</th>
<td>BC</td>
<td>BE</td>
<td>DTB</td>
<td>EC</td>
<td>CA</td>
</tr>
</TABLE>
</BODY>
</HTML>
OUTPUT:
 EXAMPLE OF DESIGNING TABLES WITH THE HELP OF ROWSPAN:

CODE 2:

<html>
<head><title>Time Table</title>
</head>
<body>
<table border="2">
<tr>
<th rowspan ="6"> time table</th>
</tr>
<tr>
<th>Day/Time</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-01:00</th>
<th>01:00-02:00</th>
<tr>
<tr>
<th>monday</th>
<td>BC</td>
<td>BE</td>
<td>DTB</td>
<td>EC</td>
<td>CA</td>
</tr>
<tr>
<th>tuesday</th>
<td>Be</td>
<td>BC</td>
<td>DTB</td>
<td>EC</td>
<td>CA</td>
</tr>
<tr>
<th>WEDNESday</th>
<td>BC</td>
<td>BE</td>
<td>DTB</td>
<td>EC</td>
<td>CA</td>
</tr>
<tr>
<th>THURSDAY</th>
<td>BC</td>
<td>BE</td>
<td>DTB</td>
<td>EC</td>
<td>CA</td>
</tr>
<tr>
<th>FRIDAY</th>
<td>BC</td>
<td>BE</td>
<td>DTB</td>
<td>EC</td>
<td>CA</td>
</tr>
</TABLE>
</BODY>
</HTML>
OUTPUT:
 EXAMPLE OF DESIGNING TIME TABLE WITH THE HELP OF COLSPAN:

CODE 3:

<html>
<head><title>Time Table</title>
</head>
<body>
<table border="2">
<tr>
<th colspan="6"> time table</th>
</tr>
<tr>
<th>Day/Time</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-01:00</th>
<th>01:00-02:00</th>
</tr>
<tr>
<th>monday</th>
<td>BC</td>
<td>BE</td>
 <td>DTB</td>
<td>EC</td>
<td>CA</td>
</tr>
<tr>
<th>tuesday</th>
<td>Be</td>
<td>BC</td>
<td>DTB</td>
<td>EC</td>
<td>CA</td>
</tr>
<tr>
<th>WEDNESday</th>
<td>BC</td>
<td>BE</td>
<td>DTB</td>
<td>EC</td>
<td>CA</td>
</tr>
<tr>
<th>THURSDAY</th>
<td>BC</td>
 <td>BE</td>
<td>DTB</td>
<td>EC</td>
<td>CA</td>
</tr>
<tr>
<th>FRIDAY</th>
<td>BC</td>
<td>BE</td>
<td>DTB</td>
<td>EC</td>
<td>CA</td>
</tr>
</TABLE>
</BODY>
</HTML>
OUTPUT:
 HYPERLINK

A hyperlink, or simply a link, is a digital reference to data that the user can follow or be guided
to by clicking or tapping. A hyperlink points to a whole document or to a specific element
within a document. Hypertext is text with hyperlinks. The text that is linked from is known as
anchor text. A software system that is used for viewing and creating hypertext is a hypertext
system, and to create a hyperlink is to hyperlink (or simply to link). A user following hyperlinks
is said
to navigate or browse the hypertext. A hyperlink is an element in an HTML document that
links to either another portion of the document or to another document altogether. On
webpages, hyperlinks are usually colored purple or blue and are sometimes underlined.

Hyperlinks can be generally divided into two: internal and external hyperlinks.

1) Internal Hyperlink
An internal hyperlink is a link that connects the different subpages of one domain. It’s usually organized
in a web that’s known as a link structure. It’s also used to direct a website’s visitors through its content
in a particular fashion known as a click path. A link structure has four classic forms: linear, tree,
star, and network, with each one having varying click path controls.

2) External Hyperlink
An external hyperlink connects users to a different domain. It can be classified either as an
outbound or an incoming hyperlink.

Aside from the internal and external types, you can also categorize hyperlinks as:
a) Text links
The text hyperlink is one of the most common types of links. It’s a clickable text that’s used to
go to another page or resource.

b) Image links
An image link is a hyperlink in image form. One of the most common examples of image links
is the banner ads on various websites.
c) Anchor links
Not to be confused with anchor text, anchor links bring the reader from one place in a document
to a different section of the same document, like in a table of contents.
d) Fat links
A fat link or an extended link is one link that has multiple destinations.
 ANCHOR
TAG
CODE:

OUTPUT
:
 HTML CODE FOR SIGN UP
FORM
CODE:
OUTPUT
:
 ROWSPAN
CODE:

OUTPUT
:
 COLSPAN
CODE:

OUTPUT
:
 HTML CODE FOR PERSONAL
PROFILE

CODE:

<html>
<head>
<title>Resume</title>
</head>
<body>
<h1>Resume</h1>

<div class="section">
<h2>Personal Information</h2>
<p>Name: CHIRAG GANDHI</p>
<p>Email: [email protected]</p>
<p>Phone: 7775589260</p>
<p>Address: h.no-707,sector-16A,Faridabad,121002</p>
</div>

<div class="section">
<h2>Education</h2>
<p>Degree: Bachelor of science</p>
<p>Major: computer science</p>
<p>University: GURU GOBINDH
SINGH INDRAPRASTHA University</p>
<p>Graduation Year: 2025</p>
</div>

<div class="section">
<h2>Experience</h2>
<h3>Company Name</h3>
<p>Position: software engineer</p>
<p>Date: January 2020 -
Present</p>
<ul>
<li>Responsibility 1</li>
<li>Responsibility 2</li>
<li>Responsibility 3</li>
</ul>
</div>

<div class="section">
<h2>Skills</h2>
<ul>
<li>Programming Languages: Java,
JavaScript, Python</li>
<li>Frameworks: React, Angular,
Django</li>
<li>Database: SQL</li>
</ul>
</div>

</body>
</html>

OUTPUT:
 HTML CODE FOR INSURANCE
COMPANY
CODE:
OUTPUT:
 HTML CODE FOR ONLINE SHOPPING FORM
CODE:
OUTPUT
:
 FORM WITH HTML CODE
CODE:

OUTPUT
:
 FRAME WITH HTML CODE
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="FS.html" >
<frame src="WB2.html">
<frame src="NL.html">
</frameset>
</html>

OUTPUT:
 STATIC
WEBSITE
CODE:

<html>
<CENTER>
<b>
<head>
MC D
</b>
<br>
<br>
<title>MC DONALDS</title>
</HEAD>
<img
src="C:\Users\Admin\Pictures\downlo
ad.png" height="450" width="450">
<body bgcolor="yellow">
<br>
<br>
<a href ="about.html">ABOUT US</a>
<a href ="contact.html">CONTACT US
</a>
<a href ="help.html">HELP</a>
<a href
="products.html">PRODUCTS</a>
<a href ="outlets.html">OUTLETS</a>
</center>

<h1>-We do it all for you and Get

Down with Something Good and You
really want it, need it, you gotta have
a taste of McDonald’s burgers</h1>
<b><p>McDonald's is known for its
diverse menu, which includes
hamburgers, cheeseburgers, chicken
sandwiches, fish fillet sandwiches,
salads, French fries, chicken nuggets,
milkshakes, soft drinks, and various
breakfast items such as Egg McMuffins
and McGriddles.McDonald's is a
globally renowned fast-food
restaurant chain that has been serving
customers since its establishment in
1940. With a presence in over 100
countries, McDonald's is recognized as
one of the most prominent and iconic
fast-food brands worldwide.<p>
<br>
<br>
<p>At McDonald's, customers can
enjoy a diverse menu that caters to
various tastes and preferences. From
classic hamburgers and cheeseburgers
to mouthwatering chicken sandwiches,
fish fillet sandwiches, salads, and
crispy French fries, there's something
for everyone. The menu also includes
favorites like chicken nuggets,
refreshing milkshakes, and a wide
range of soft drinks. Additionally,
McDonald's offers a breakfast menu
that features popular items such as
Egg McMuffins and McGriddles.<p>

<p>McDonald's operates on a
franchise model, allowing independent
franchisees to manage and run most of
the restaurants. This approach ensures
local adaptation while maintaining
consistency in quality, service, and
branding. Through this business
model, McDonald's promotes
entrepreneurship and job creation in
local communities.

As part of its commitment to giving

back, McDonald's is associated with
the Ronald McDonald House Charities
(RMHC). This non-profit organization
provides support to families with sick
children by offering them
accommodation near hospitals. By
supporting RMHC, McDonald's
demonstrates its dedication to helping
those in need and making a positive
impact in communities worldwide.

In recent years, McDonald's has

expanded its offerings with the
introduction of McCafé. Within
McDonald's locations, customers can
find a dedicated McCafé section,
offering a variety of specialty coffees,
teas, pastries, and desserts. McCafé
has become a popular destination for
those seeking a quick coffee break or a
delightful treat to complement
</p></b>
<img
src="C:\Users\Admin\Pictures\1PUB_
ROA_2336x1040v3.jpg" height="450"
width="450">
<img
src="C:\Users\Admin\Pictures\1pub_
McDeliveryintheApp_Launch_2336x10
40_v3.jpg" height="450"
width="450">
<img
src="C:\Users\Admin\Pictures\1pub_F
reeLargeFries_2336x1040.jpg"
height="450" width="450">
<img
src="C:\Users\Admin\Pictures\1PUB_
Desktop_Deals-v1_1168x520.jpg"
height="450" width="450">
</body>
</html>

OUTPUT: