TRINITY INSTITUTE OF PROFESSIONAL

STUDIES
SEC-9 DWARKA, NEW DELHI- 110075

(AFFILIATED TO)

GURU GOBIND SINGH INDRAPRASTHA UNIVERSITY

SECTOR-16C, DWARKA, NEW DELHI

E-COMMERCE LAB

SUBMITTED TO: SUBMITTED BY:

Ms. Darshika YATIK GOYAL

Assistant Professor BCOM (HONS)- 2ND SHIFT
ENROLLMENT NO: 02224088819
Page 2
INDEX

Particulars Date Teacher’s

Signature
1) Introduction to HTML
a) History of HTML
b) Features of HTML
c) Versions of HTML
d) How to create an html web page explain this with the help of example

2) Design a web page for any company of your choice. Illustrate the use of head tag,
body tag, title tag, paragraph tag, Background color tag and font tag(size,font
color,face,etc...)

3) Illustration of Text Formatting Text.

(bold, Italic,underline,strikethrough, base font)

4) Illustrate the use of subscript and design the web page for the following chemical
equation:

C H AlO
6 9 6

(NH4)3PO4
Al(OH)3

5) Illustrate the use of superscript and design the web page for the following
Quadratic equation:

6) Illustration of Unordered List

7) Illustration of Ordered list

8) Illustration of Nested Unordered List

9) illustration of Nested Ordered List

YATIK GOYAL
02224088819
Page 3

10) Illustration of Definition/Description list

11) Illustration of Tables in HTML

12) Create a Table in HTML using Rowspan

13) Create an employee table, detail table and salary table in HTML web page

14) Illustration of frame tag

15) Illustration of anchor tag

16) Write a code in html to Illustrate the various Form tags and generate the following
output:

YATIK GOYAL
02224088819
Page 4

PRACTICAL 1

Introduction to HTML: -
a) History of HTML
b) Features of HTML
c) Versions of HTML
d) How to create an HTML web page; explain this with the help of an example.

YATIK GOYAL
02224088819
Page 5

Introduction on to HTML

HTML stands for Hypertext Markup Language and it is a widely used programming
language used to develop web pages.
HTML is a markup language that is used to create web pages. It defines how the web
page looks and how to display content with the help of elements. It forms or defines
the structure of our Web Page, thus it forms or defines the structure of our Web Page.
We must remember to save your file with .html extension.

History of HTML

In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and

prototyped ENQUIRE, a system for CERN researchers to use and share documents. In
1989, Berners-Lee wrote a memo proposing an Internet-
based hypertext system Berners-Lee specified HTML and wrote the browser and server
software in late 1990. That year, Berners-Lee and CERN data systems engineer Robert
Cailliau collaborated on a joint request for funding, but the project was not formally
adopted by CERN. In his personal notes from 1990 he listed "some of the many areas
in which hypertext is used" and put an encyclopaedia first.
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 4.

YATIK GOYAL
02224088819
Page 6

Features of HTML

1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.
3) It is a markup language, so it provides a flexible way to design web pages along
with the text.
4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it
enhances the interest of browsing of the user.
5) It is platform-independent because it can be displayed on any platform like
Windows, Linux, and Macintosh, etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages
which makes it more attractive and interactive.
7) HTML is a case-insensitive language, which means we can use tags either in lower-
case or upper-case.

Versions of HTML

HTML has never been like this, what it is right now. HTML, like many other
languages has evolved with the passage of time and today it's much better and versatile
than it was a long time ago.
Different Version of HTML has different properties. But today we use HTML5,
HTML5 is the latest version of HTML.

YATIK GOYAL
02224088819
Page 7

HTML Version List:

 HTML 1.0: released in 1991

 HTML 2.0: released in 1995

 HTML 3.2: released in 1997

 HTML 4.01: released in 1999

 XHTML: released in 2000

 HTML5: released in 2014

HTML 1.0
HTML 1.0 or first version of HTML was a version of SGML that had ability to link
different document or pages using 'href'.
HTML 1.0 had 20 elements or tags, now latest version of HTML, ie HTML5 has a lot
more.

HTML 2.0

After HTML 1.0, the second version of HTML was released in 1994. HTML 2.0 was
an expansion of HTML 1.0.

Internet Engineering Task Force (IETF) was behind it's creation.

HTML 3.2
HTML 3.2 was released. In 1997. HTML 3.2 had many new features like tables,
superscript, subscript etc.

Two most important features introduced in HTML 3.2 were tables and text flow around
images.

YATIK GOYAL
02224088819
Page 8

Tables were widely used and programmers still use them but it is not recommended
anymore. In HTML5 div tags and other semantic elements are used more frequently
instead of table element.

HTML 4.01
HTML 4.01 was released In 1999. HTML 4.01 introduced features like scripting, style
sheets, better tables, better forms frames and embedding objects.
HTML 4.01 was a revised version of HTML 4.0, it also included features for the
disabled people to enhance their interactivity with the Global world through Internet.

XHTML
In 2000 XHTML was released. XHTML stands for Extensible Hyper Text Markup
Language. XHTML has strict set of rules and it is basically an XML application of
HTML.

HTML 5
So all of this added up and then after so many year HTML5 was released in 2014.
HTML5 is the best version of HTML up till now. HTML5 improved user interactivity
so much and also lessened the burden of devices.
HTML5 fully supports all kind of media application that are there. HTML5 supports
both audio and video media content. HTML5 also provides full support for JavaScript
to run in the background.

YATIK GOYAL
02224088819
Page 9

Practical -1

How to create an HTML web page; explain this with the help of an example.

CODE-
Step 1: Open Notepad or a Text Document
Step 2: Write Some HTML code like
<html>
<head> <title>A simple HTML document</title></head>
<body>
<p>DEPARTMENT OF THE COMPANY<p>
<p1>SALES DEPARTMENT</P1><BR>
<P2>MARKETING DEPARTMENT</P2><BR>
<P3>ACCOUNTS DEPARTMENT</P3>
</body>
</html>

YATIK GOYAL
02224088819
Page 10

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "DEPARTMENT.html"

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favourite browser (double click on the file, or right-
click - and choose "Open with").

YATIK GOYAL
02224088819
Page 11

PRACTICAL 2

Design a web page for your college and illustrate the use of. The head tag, body
tag, title tag, paragraph tag, Background
Color tag, and font tag(size, font color, face, etc...)

CODE-
<html>
<head>
<title> TIPS </title>
</head>
<body bgcolor=lightgreen align=center>
<h1>
<font color=yellow face= courier new>Trinity Institute of
professional studies </font>
</h1>
<font size=6 face= times new roman> B.Com </font><br>
<font size=5 face= times new roman> BBA </font><br>
<font size=4 face= times new roman> BJMC </font><br>
<font size=3 face= times new roman> MCA </font><br>
<font size=2 face= times new roman> BALLB </font><br>
<font size=1 face= times new roman> BCA </font><br>
<p align=center>
<font color=blue face= times new roman>Welcome!!!!
<br> This college is affiliated by IPU and it offers various
courses.
</font></p>
</body>
</html>

YATIK GOYAL
02224088819
Page 12

OUTPUT-

YATIK GOYAL
02224088819
Page 13

Practical – 3

Illustration of Text Formatting Text.

(bold, Italic,underline,strikethrough, base font)
The code:
<html>
<head>
<title>Text Formatting </title>
</head>
<body bgcolor="LIGHTGREY" text="black">
<h2 align="center"><b> What is COMMERCE?</b></h2>
<p align="center">A commerce refers to <b><i>exchange of goods, </i></b> services, <strike>
and</strike> or something of value <u> between businesses </u> or <u> entities </u>
</p>
</body>
</html>

OUTPUT-

YATIK GOYAL
02224088819
Page 14

Practical- 4
Illustrate the use of subscript and design the web page for the following
chemical equation:

C6H9AlO6
(NH4)3PO4
Al(OH)3

CODE-
<html>
<body>
<h1> Subscript </h1>
<font size ="+2">
The sub tag defines subscript text. Subscript text appears half a character below the
normal line, and is sometimes rendered in a smaller font. <br>
Subscript text can be used for chemical formulas.<br> <br>
<center>
<b> C ₆ H ₉ AIO ₆ <br>
<br>
<b> (NH ₄) ₃ PO ₄ <br>
<br>
<b> AI(OH) ₃ <br>
</center>
</font>
</body>
</html>

YATIK GOYAL
02224088819
Page 15

OUTPUT-

YATIK GOYAL
02224088819
Page 16
Practical- 5

Illustrate the use of superscript and design the web page for the following Quadratic equation:

CODE-

<html>
<body>
<h1><U> Superscript </U></h1>
<font size ="+2">
The sup tag is used to add a superscript text to the HTML document. The sup
tag defines the superscript text. Superscript text appears half a character above the
normal line and is sometimes rendered in a smaller font. Superscript text can be
used for footnotes. <br>
Superscript text can be used for footnotes.
<br> <br>
<center>
<b> Standard Form <br>
<b> y = ax² + bx + C <br>
<br>
Vertex Form <br>
<b> y = a(x-h) ² + k <br>
<br>
Intercept Form <br>
<b> y = a(x-p)(x-q)
</center>
</font>
</body>
</html>

YATIK GOYAL
02224088819
Page 17

OUTPUT-

YATIK GOYAL
02224088819
Page 18

Practical – 6

Illustration of Unordered List? 

 Unordered list — used to create a list of related items, in no particular order.

CODE-
<html>
<head>
<title> Unordered List </title>
</head>
<h4> HYUNDAI CAR MODELS </h4>
<ul>
<li>i10</li>
<li>VERNA</li>
<li>VENUE</li>
<li>SANTRO</li>
<li>CRETA</li>
<li>XCENT</li>
</ul>
</body>
</html>

YATIK GOYAL
02224088819
Page 19

OUTPUT-

YATIK GOYAL
02224088819
Page 20

Practical -7

Illustration of ordered List? 

 Ordered list — used to create a list of related items, in a specific order.

CODE-
<html>
<head>
<title> ordered List </title>
</head>
<h4> HYUNDAI CAR MODELS</h4>
<ol>
<li>i10</li>
<li>VERNA</li>
<li>VENUE</li>
<li>SANTRO</li>
<li>CRETA</li>
<li>XCENT</li>
</ol>
</body>
</html>

YATIK GOYAL
02224088819
Page 21

OUTPUT-

YATIK GOYAL
02224088819
Page 22

Practical -8

Illustration of Nested Unordered List?

 A nested list is a list inside another list. You can create a nested unordered list, or
a nested ordered list, or even an ordered list nested inside an unordered one.

CODE-
<html>
<head>
<title>List</title>
</head>
<body>
<h1><U>Nested UnOrdered List</U></h1>
<ul type="SQUARE">
<li>CARS</li>
<ul>
<li>XUV 700</li>
<li>i10</li>
</ul>
<li>BIKEs</li>
<ul>
<li>KTM RC</li>
<li>Royal Enfield Meteor 350</li>
<li>Yezdi Roadster</li>
</ul>
<li>BICYCLES</li>
</ol>
</body>
</html>

YATIK GOYAL
02224088819
Page 23

OUTPUT-

YATIK GOYAL
02224088819
Page 24

Practical -9

Illustration of Nested Ordered List?

 An ordered list created using the <ol> element, and each list item starts with
the <li> element. Ordered lists are used when the order of the list's items is
important.

CODE-
<html>
<head>
<title>Nested ordered List</title>
<body>
<font size="12">
NESTED ORDERED LIST
</font><br><br><br>
<ol>
<li>BICYCLES</li>
<li>CARS
<ol>
<li>XUV 700</li>
<li>BALENO</li>
</ol>
</li>
<li>BIKES</li>
</ol>
</body>
</head>
</html>

YATIK GOYAL
02224088819
Page 25

OUTPUT-

YATIK GOYAL
02224088819
Page 26

PRACTICAL- 10

Illustration of Definition/Description list?

 HTML Description List or Definition List displays elements in definition form
like in dictionary. The <dl>, <dt> and <dd> tags are used to define description list.

CODE-
<html>
<head>
<title>definition/discriptive list</title>
</head>
<body bgcolor="OLIVE">
<h1 align="center" > HTML </h1>
<dl>
<dt><b><u> Meaning</u></b></dt>
<dd><i>HTML, or Hypertext Markup Language, is a markup language for the web
that defines the structure of web pages.

It is one of the most basic building blocks of every website, so it's crucial to learn if
you want to have a career in web development..</i></dd>
</dl>

<dl>
<dt><b><u> Html Tags</u></b></dt>
<dd><i>HTML has "tags" that let you get this done. So, there are tags to create
headings, paragraphs, bolded words, italicized words, and more.</i></dd>
</dl>

<dl>
<dt> <b><u>Html Elements</u></b></dt>
<dd><i>HTML elements are often used interchangeably with tags, but there's a
small difference between the two. An element is a combination of the opening and
closing tag, and then the content between them</i></dd>
</dl>

</body>
</html>

YATIK GOYAL
02224088819
Page 27

OUTPUT-

YATIK GOYAL
02224088819
Page 28

PRACTICAL- 11

Illustration of Tables in HTML.

 An HTML structure for creating rows and columns on a Web page. The Table
tag defines the overall table and the Table Row (TR) tag is used to build each row.
The Table Data (TD) tag defines the actual data. Prior to HTML 5, tables were
often used for virtually every element on the page.

CODE-
<html>
<head>
<title>DETAILS</title>
</head>
<table bgcolor= "lightYELLOW" Cellpadding="5" cellspacing="1" height="70%"
width="50%" border="2">
<Caption><U> Student Details </U> </caption>
<tr>
<th> Enrolment number </th>
<th> First name</th>
<th> Last name </th>
<th> Address </th>
<th> D.O.B </th>
<th> Course </th>
</tr>
<tr>
<td> 03334088819 </td>
<td> Yatik</td>
<td> Goyal </td>
<td> Nirman vihar, Delhi </td>
<td> 16 June 2000 </td>
<td> BCOM (HONS) </td>
</tr>

<tr>
<td> 04564277714 </td>
<td> Neerav </td>
<td> Arora </td>
<td> Geeta colony delhi </td>
<td> 10 Feburary 2000 </td>

YATIK GOYAL
02224088819
Page 29

<td> Bjmc </td>

</tr>

<tr>
<td> 07894599915 </td>
<td> Riddhi </td>
<td> Bagga </td>
<td> Anand vihar </td>
<td> 8 October 2000 </td>
<td> BBA </td>
</tr>

<tr>
<td> 07898599515 </td>
<td> Vishal </td>
<td> Chhalani </td>
<td> krishna nagar </td>
<td> 9 December 2000 </td>
<td> BBA </td>
</tr>
</table>
</html>

OUTPUT-

YATIK GOYAL
02224088819
Page 30

PRACTICAL- 12

Create a Table in HTML using Row span?

CODE-
<html>
<head>
<title> Table using Rowspan </title>
</head>
<table bgcolor= "SILVER" Cellpadding="5" cellspacing="1" height="70%"
width="50%" border="2">
<Caption> DETAILS </caption>>

<tr>
<th> Name </th>
<th> subject </th>
<th> Internal Marks </th>
</tr>

<tr>
<td rowspan= "2"> Aniket </td>
<td> Economics </td>
<td> 25 </td>
</tr>

<tr>
<td> Accountancy </td>
<td> 27 </td>
</tr>

<tr>
<td rowspan= "2"> Kshitiz </td>
<td> Economics </td>
<td> 19 </td>
</tr>

<tr>
<td> Accountancy </td>
<td > 20 </td>
</tr>

<tr>
<td rowspan= "2"> Kartik</td>

YATIK GOYAL
02224088819
Page 31

<td> Economics </td>

<td> 20 </td>
</tr>
<tr>
<td> Accountancy </td>
<td> 20</td>
</tr>

</table>
</html>

OUTPUT-

YATIK GOYAL
02224088819
Page 32

PRACTICAL-13

Create an employee table, detail table and salary table in HTML web page?

CODE-
<html>
<head>
<title>
STAFF DETAILS
</title>
</head>
<body bgcolor="GREY">
<p align="center"><font size=+3>Employee Table</font></p>
<table align="center" bgcolor="CORAL" bordercolor=SILVER border="3"
cellpadding="5" cellspacing="2" height="40%" width="40%" >
<tr>
<th> Employee Id </th>
<th> First Name </th>
<th> Last Name </th>
</tr>

<tr>
<td> 125 </td>
<td> DEEPANSHU </td>
<td> SHARMA </td>
</tr>
<tr>

YATIK GOYAL
02224088819
Page 33
<td> 127 </td>
<td> MEHUL</td>
<td> ARORA</td>
</tr>

<tr>
<td> 855 </td>
<td> SHIVAM </td>
<td> KANSAL </td>
</tr>
</table>

<p align="center"><font size=+3>Detail Table</font></p>

<table align="center" bgcolor="CORAL" bordercolor=SILVER border="3"
cellpadding="5" cellspacing="2" height="40%" width="40%" >
<tr>
<th> Employee Id </th>
<th> First Name </th>
<th> Last Name </th>
<th> Address</th>
<th> Phone number </th>
<th> Department </th>
</tr>

<tr>
<td> 125 </td>
<td> DEEPANSHU </td>
<td> SHARMA </td>

YATIK GOYAL
02224088819
Page 34

<td> 14B, CHANDINI CHOWK </td>

<td> 4746354665</td>
<td> HR </td>
</tr>

<tr>
<td> 127 </td>
<td> MEHUL </td>
<td> ARORA </td>
<td> 17A, MAYUR VIHAR </td>
<td> 6857354676</td>
<td> SALES </td>
</tr>

<tr>
<td> 855 </td>
<td> SHIVAM</td>
<td> KANSAL </td>
<td> 45'K, LAXMI NAGAR </td>
<td> 7646354756</td>
<td> ACCOUNTS </td>
</tr>
</table>

<p align="center"><font size=+3>Salary Table</font></p>

<table align="center" bgcolor="CORAL" bordercolor=SILVER border="3"
cellpadding="5" cellspacing="2" height="40%" width="40%" >
<tr>

YATIK GOYAL
02224088819
Page 35

<th> Employee Id </th>

<th> First Name </th>
<th> Last Name </th>
<th> Basic Salary</th>
<th> HRA </th>
<th> Total Salary </th>
</tr>

<tr>
<td> 125 </td>
<td> DEEPANSHU </td>
<td> SHARMA </td>
<td> 35000 </td>
<td> 10000</td>
<td> 45000</td>
</tr>

<tr>
<td> 127 </td>
<td> MEHUL </td>
<td>ARORA </td>
<td> 40000 </td>
<td> 15000</td>
<td> 55000 </td>
</tr>

<tr>
<td> 855 </td>
<td> SHIVAM </td>

YATIK GOYAL
02224088819
Page 36

<td> KANSAL </td>

<td> 60000 </td>
<td> 25000</td>
<td> 85000 </td>
</tr>
</table>
</body>
</html>

YATIK GOYAL
02224088819
Page 37

OUTPUT-

YATIK GOYAL
02224088819
Page 38

Practical -14

Illustration of Frame Tag?

 HTML Frames are used to divide the web browser window into multiple
sections where each section can be loaded separately. A frameset tag is the
collection of frames in the browser window.

CODE-
FRAME
<html>
<head>
<title>Frame</title>
</head>
<frameset cols="*,*,*">
<frame src="FRAME1.html">
<frameset rows="*,*">
<frame src="FRAME2.html">
<frame src="FRAME3.html">
</frameset>
<frame src="FRAME4.html">
</frameset>
</html>

YATIK GOYAL
02224088819
Page 39
FRAME 1
<html>
<head>
<title>Frame1</title>
</head>
<body bgcolor="grey">
<h1><b><u>JAWA Motorcycle Company</u></b></h1>
<IMG SRC="BIKE.HTML">
</body>
</html>
FRAME 2
<html>
<head>
<title>Frame2</title>
</head>
<body bgcolor="BLUE">
<h1><b><u>ROYAL ENFIELD </u></b></h1>
<IMG SRC="ROYAL.HTML">
</body>
</html>
FRAME 3
<html>
<head>
<title>Frame3</title>
</head>
<body bgcolor="CORAL">
<h1><b><u>CRICKET</u></b></h1>
<IMG SRC="CRICKET.HTML">
</body>
</html>

YATIK GOYAL
02224088819
Page 40

FRAME 4
<html>
<head>
<title>Frame4</title>
</head>
<body bgcolor="BLACK">
<h1><b><FONT COLOR= WHITE><u>TOURIST PLACE IN
INDIA</u></b></FONT></h1>
<IMG SRC="INDIA.HTML">
</body>
</html>

OUTPUT-

YATIK GOYAL
02224088819
Page 41
Practical -15

Illustration of Anchor Tag?

 An anchor is a piece of text which marks the beginning and/or the end of a
hypertext link. The text between the opening tag and the closing tag is either the
start or destination (or both) of a link.

CODE-
<html>
<head>
<title>IPL</title>
<body>
<center>
<h1> 2022 Indian Premier League</h1>
</center>
<font size=+3>
The 2022 Indian Premier League, also known as IPL 15 or, for sponsorship reasons,
Tata IPL 2022, is the fifteenth season of the Indian Premier League (IPL)<br>
a professional Twenty20 cricket league established by the Board of Control for
Cricket in India (BCCI) in 2007. <br>
The tournament is being played from 26 March 2022, and to be concluded with the
final on 29 May 2022.<br><br>
LINK-
<b>
<li>
<a href ="https://www.iplt20.com/"> IPL 2022 </a>
<br>
<li>

YATIK GOYAL
02224088819
Page 42
<a href ="https://en.wikipedia.org/wiki/2022_Indian_Premier_League ">
WIKIPEDIA IPL </a>
</li>
</font>
</body>
</html>

OUTPUT-

YATIK GOYAL
02224088819
Page 43

Practical -16

Write a code in html to Illustrate the various Form tags and generate the
following output:

YATIK GOYAL
02224088819
Page 44

CODE-
<html>
<head>
<title>Form</title>
<body>
<head align="center"><b><u>REGISTRATION FORM</b></u></head>
<title>form</title>
<body>
<form>
<br>
Company:<input type="text" name="company"><br><br>
First Name:<input type="text" name="first name"><br><br>
Last Name:<input type="text" name="last name"><br><br>Email Address:<input
type="email" name="email"><br><br>
Title:<input type="text" name="title"><br><br>
Phone:<input type="int" name="phone"><br><br>
Cancel Registration:<input type="checkbox"><br><br>
252 Training Session 2010:
<select name="dropdown">
<option value=""-select a date-">-select a date-</option>
<option value="1 January 2010">1 January 2010</option>
<option value="1 April 2010">1 April 2010</option>
<option value="1 July 2010">1 July 2010</option>
<option value="1 October 2010">1 October 2010</option>
</select><br><br>
Job Function:
<input type="radio" name="CM" id="CM">Campaign Manager<br>
<input type="radio" name="CRM Admin" id="CRM Admin">CRM

YATIK GOYAL
02224088819
Page 45

Administration<br>
<input type="radio" name="ED" id="ED">Email Deployment<br>
<input type="radio" name="partner" id="partner">Partner<br>
<input type="radio" name="employee" id="employee">Employee<br><br><br>
Dietary Requirements:<input type="text" name="DR"><br><br>
Expectations:<textarea id="expectations" name="expectations" rows="5">
</textarea><br><br>
<input type="submit" value="submit" align="middle">
</form>
</body>
</html>

OUTPUT-

YATIK GOYAL
02224088819