Page | 1

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 Rohit Chandel
Assistant Professor 35324088819
Page | 2

Rohit Chandel
35324088819
Page | 3

Rohit Chandel
35324088819
Page | 4

Rohit Chandel
35324088819
Page | 5

PRACTICAL- 1

INTRODUCTION TO HTML
A) History

HTML was created by Sir Tim Berners Lee in late 1999 but was not released
officially, published in 1995 as HTML 2.0. HTML 4.01 was published in late 1999
and was a major version of HTML. HTML is a very evolving markup language and
has evolved with various versions updating. Long before its revised standards and
specifications are carried in, each version has allowed its user to create web pages
in a much easier and prettier way and make sites very efficient.

· HTML 1.0 was released in 1993 with the intention of sharing information
that can be readable and accessible via web browsers. But not many of the
developers were involved in creating websites. So the language was also
not growing.

· Then comes the HTML 2, published in 1995, which contains all the
features of HTML 1.0 along with that few additional features, which
remained as the standard markup language for designing and creating
websites until January 1997 and refined various core features of HTML.
· Then comes the HTML 3, where Dave Raggett who introduced a fresh
paper or draft on HTML. It included improved new features of HTML,
giving more powerful characteristics for webmasters in designing web
pages. But these powerful features of new HTML slowed down the
browser in applying further improvements.

Rohit Chandel
35324088819
Page | 6

· Then comes HTML 4.0 which is widely used and was a successful version
of HTML before HTML 5.0, which is currently released and used
worldwide. HTML 5 can be said for an extended version of HTML 4.01,
which was published in the year 2012.

B) Features

1. It is the language which can be easily understood and can be modified.

2. Effective presentations can be made with the HTML with the help of its all
formatting tags.
3. It provides the more flexible way to design web pages along with the text.
4. Links can also be added to the web pages so it helps the readers to browse
the information of their interest.
5. You can display HTML documents on any platforms such as Macintosh,
Windows and Linux etc. C) Versions

HTML 1.0

· The basic version of HTML has support for basic elements like text controls
and images. This was the very basic version of HTML with less support for
a wide range of HTML elements. It does not have rich features like styling
and other things that were related to how content will be rendered in a
browser.

Rohit Chandel
35324088819
Page | 7

· The initial version of HTML does not provide support for tables, font support,
etc., as it provides us in the latest version.
· We would also like to discuss that W3C did not exist before HTML 2.0;
hence it does not show details about HTML 1.

HTML 2

· HTML version 2.0 was developed in 1995 with basic intention of improving
HTML version 1.0. Now a standard got started to develop so as to maintain
common rules and regulations across different browsers. HTML 2.0 has
improved a lot in terms of the markup tags. In HTML 2.0 version concept
of form came into force. Forms were developed, but still, they had basic
tags like text boxes, buttons, etc.

· Also, the table came as an HTML tag. Now, in HTML tag 2.0, browsers also
came with the concept of creating their own layers of tags that were specific
to the browser itself. W3C was also formed. The main intention of W3C is
to maintain standard across different web browsers so that these browsers
understand and render HTML tags in a similar manner.

HTML 3.2

· It was developed in 1997. After HTML 2.0 was developed, the next version
of HTML was 3.2

Rohit Chandel
35324088819
Page | 8

· With version 3.2 of HTML, HTML tags were further improved. It is worth
noting that because of W3C standard maintenance, the newer version of
HTML was 3.2 instead of 3.
· Now, HTML 3.2 has better support for new form elements. Another
important feature what HTML 3.2 implemented was support for CSS. CSS
stands for Cascading Style Sheet. It is CSS that provides features to make
HTML tags look better on rendering it on browsers. CSS helps to style
HTML elements.

· With the upgradation of browsers to HTML 3.2, the browser also supported
for frame tags, although HTML specifications still do not support frame
markup tags.

HTML 4.01

· It was developed in 1999. It extended the support of cascading styling sheets.

In version 3.2, CSS were embedded in HTML page itself. Therefore, if the
website has various web pages to apply to the style of each page, we must
place CSS on each web page. Hence there was a repetition of the same
block of CSS.

Rohit Chandel
35324088819
Page | 9

· To overcome this thing, in version 4.01 concept of an external styling sheet

emerged. Under this concept, an external CSS file could be developed, and
this external styling file could be included in HTML itself. HTML 4.01
provided support for further new tags of HTML.

HTML 5

This is the latest version of HTML. For a developer, it could be used in 2014. It came
up with lots of HTML tags support. HTML5 provided support for new form elements
like input element s of different types; geolocations support tags, etc.

Few of the tags which were added to HTML5

Email – New HTML5 tag, which was added, is the input element of type email. This
is a form tag, although it could be used outside of a form tag also. This tag checks the
validation of the input value. It checks whether the value inserted is a valid email.

Password – This is another form tag that was added to receive a password from the
user. Being the password type field, the user types in the field are not visible directly
to the user but are represented by special symbols. These symbols save the password
from getting revealed on the browser.
Audio tag – This is a new audio tag that was implemented in HTML5. This tag helps
to add audio to our web page. We can use this tag to embed an audio clip into a web
page. This audio tag could be played on a webpage.

Semantic tags – Semantic tags are also known as structural tags. Structural tags are
the tags that provide structure to the HTML page. It helps it divide the HTML page
Rohit Chandel
35324088819
Page | 10

into different structures. These structures get combined into an HTML page itself to
form an HTML web page. Few of the important HTML semantic tags are figcaption,
<header>, <footer>

Section tag – This tag is used to semantic a section in an HTML page. A section tag
represents a section on a web page.

D) How to create an HTML web page, explain this with the help of an example.

Step 1: Open Notepad (PC)

· Windows 8 or later: Open the Start Screen (the window symbol at the bottom
left on your screen). Type Notepad.

· Windows 7 or earlier: Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac)

· Open Finder > Applications > TextEdit

· Also change some preferences to get the application to save files correctly.
In Preferences > Format > choose "Plain Text"

· Then under "Open and Save", check the box that says "Display HTML files
as HTML code instead of formatted text".

· Then open a new document to place the code.

Step 2: Write Some HTML

Write or copy the following HTML code into Notepad:

Rohit Chandel
35324088819
Page | 11

<html>
<body>
<h1> Heading </h1>
<p> Paragraph </p> </body>
</html>

Step 3: Save the HTML Page

· Save the file on your computer. Select File > Save as in the Notepad menu.

· Name the file "index.htm" and set the encoding to UTF-8 (which is the
preferred encoding for HTML files).

Tip: You can use either .htm or .html as file extension. There is no difference, it
is up to you.

Step 4: View the HTML Page in Your Browser

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

The result will look much like this:

Rohit Chandel
35324088819
Page | 12

Rohit Chandel
35324088819
Page | 13

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...)
______________________________________________________________________
The Code: -
<html>
<head>
<title> Trinity Institute of Professional studies</title>
</head>
<body bgcolor="cornsilk">
<center>
<h1> <font color=green face= courier new>Trinity Institute of Professional
Studies</font> </h1>
<font color=red face= times new roman> Welcome!!!!<br> This
college offers various courses.
</font>
<font size=+2> <br> <br>
B.Com(H) <br> BAJMC
<br>
BBA <br>
BCA <br>
BALLB <br>
</center>
</font>
<p align=center>

Rohit Chandel
35324088819
Page | 14

</font></p>
</body>
</html>

Rohit Chandel
35324088819
Page | 15

PRACTICAL 3 Illustration of Text Formatting Text. (Bold, Italic,

underline, strikethrough

______________________________________________________________________
The code:
<html>
<head>
<title>Amazon </title>
</head>
<body bgcolor="Pink" text="Green">
<h1 align="center"> <b> Welcome to good habits </b></h1>
<font size=+3>
<p> Pollution is the introduction of harmful materials into the environment. These harmful
materials are called pollutants.<b><i>).Pollution essentially effect the quality of life.
</i></b> The term <strike> "Pollution"</strike> We must take individual steps for
reduce pollution. They should plant more trees and make the earth greener.
<br> types of pollution are air pollution, water pollution, soil pollution. </p>
</font>
</body>
</html>

Rohit Chandel
35324088819
Page | 16

Rohit Chandel
35324088819
Page | 17

PRACTICAL 4
Illustrate the use of subscript and design the web page for the
following chemical equation:
C6H9AlO6
(NH4)3PO4
Al(OH)3
______________________________________________________________________
The 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>

Rohit Chandel
35324088819
Page | 18

Rohit Chandel
35324088819
Page | 19

PRACTICAL-5

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

______________________________________________________________________
The code:
<html>
<body>
<h1> Superscript </h1>
<font size ="+2">
The sup tag defines superscript text. Superscript text appears half a character above
the normal line, and is sometimes rendered in a smaller font. <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>

Rohit Chandel
35324088819
Page | 20

<b> y = a(x-h) ² + k <br>

<br>
Intercept Form <br>
<b> y = a(x-p)(x-q)
</center>
</font>
</body>
</html>

Rohit Chandel
35324088819
Page | 21

PRACTICAL-6

6) Illustration of Unordered List?

______________________________________________________________________
The code:
<html>
<head>
<title> Unordered List </title>
</head>
<body>
<h1> Kfc Menu </h1>
<Font size=+2>
<i>
<ul>
<li> Boneless strips/li>
<li> Hot wings </li>
<li> KrunchyBurger </li>
<li> Popcorn </li>
<li> pepsi </li>
</ul>
</i>

Rohit Chandel
35324088819
Page | 22

</font>
</body>
</html>

Rohit Chandel
35324088819
Page | 23

PRACTICAL-7 Illustration of Ordered list

______________________________________________________________________
The code:
<html>
<head>
<title> Ordered List </title>
</head>
<body>
<h1> Kfc Menu </h1>
<ol>
<i>
<li> Boneless strips/li>
<li> Hot wings </li>
<li> Krunchy Burger </li>
<li> Popcorn </li>
<li> Pepsi </li>
</ol>
</i>
</body>
</html>

Rohit Chandel
35324088819
Page | 24

Rohit Chandel
35324088819
Page | 25

PRACTICAL-8 Illustration of Nested Unordered List

______________________________________________________________________
The code:
<html>
<head>
<title> List </title>
</head>
<body>
<h1> Nested Unordered List </h1>
<ul type="square">
<li> Fruits </li>
<ul>
<li> orange </li>
<li> apple </li>
</ul>
<li> Vegetables</li>
<ul>
<li> Cabbage </li>
<li> Carrot </li>
<li> Pumpkin </li>
</ul>
</ol>
</body>
</html>

Rohit Chandel
35324088819
Page | 26

Rohit Chandel
35324088819
Page | 27

PRACTICAL-9 illustration of Nested Ordered List

______________________________________________________________________
The code: <html>
<head>
<title>List</title>
</head>
<body>
<h1>Nested Ordered List</h1>
<ol type="I">
<li> Fruits </li>
<ul type="square">
<li> Orange </li>
<li> Apple </li>
</ul>
<li> Vegetables</li>
<ul>
<li> Cabbage </li>
<li> Carrot </li>
<li> Pumpkin </li>
</ul>
</ol>
</body>
</html>

Rohit Chandel
35324088819
Page | 28

Rohit Chandel
35324088819
Page | 29

PRACTICAL-10 Illustration of Definition/Description list

______________________________________________________________________
The code:
<html>
<head>
<title> Definition/Description list </title>
</head>
<body>
<h1 align="center" > Definition/Description </h1>
<h1> Discipline </h1>
<font size=+3>
<dl>
<dt><b><u> What is Discipline? </u></b></dt>
<dd><i> Discipline is something that keeps each person in control. It motivates a
person in progressin life and achieve sucess <br>
Discipline is one of rhe powerful words in our life . Discipline means doing work
orderly according to the rules and regulations.,being punctual and regular.

Rohit Chandel
35324088819
Page | 30

</body>
</html>

Rohit Chandel
35324088819
Page | 31

PRACTICAL-11 Illustration of Tables in HTML

______________________________________________________________________
The code:
<html>
<head>
<title> Student Detail </title>
</head>
<table Cellpadding="5" cellspacing="1" height="50%" width="50%" border="2">
<Caption> Student Details </caption>
<tr>
<th> Admission number </th>
<th> First name</th>
<th> Last name </th>
<th> D.O.B </th>
<th> Course </th>
</tr>
<tr>
<td> T1 </td>
<td> Rohit </td>
<td> chandel </td>
<td> 15 August 2001 </td>
<td> Bachelor's in Theology </td>
</tr>
<tr>

Rohit Chandel
35324088819
Page | 32

<td> T2 </td>
<td> ashish </td>
<td> singh </td>
<td> 1 june 2000 </td>
<td> B.COM </td>
</tr>
<tr>

Rohit Chandel
35324088819
Page | 33

<td> T3 </td>
<td> john </td>
<td> cena </td>
<td> 2 December 2002 </td>
<td> B.TECH </td>
</tr>

<tr>
<td> T4 </td>
<td> ashish </td>
<td> nehra </td>
<td> 20 August 2001 </td>
<td> B.com(H) </td>
</tr>
<tr>
<td> T5 </td>
<td> cobra </td>
<td> khan </td>
<td> 24 may 1999 </td>
<td> BBA </td>
</tr>
</table>
</html>

Rohit Chandel
3532088819
Page | 34

Rohit Chandel
3532088819
Page | 35

PRACTICAL-12 Create a Table in HTML using Rowspan

______________________________________________________________________
The code:
<html>
<head>
<title> Table using Rowspan </title>
</head>
<table Cellpadding="5" cellspacing="1" height="50%"
width="50%" border="2"> <Caption> Student Details </caption>>
<tr>
<th> Name </th>
<th> subject </th>
<th> Marks (M.M-30)</th>
</tr>
<tr>
<td rowspan= "3"> Javier </td>
<td> Physics </td>
<td> 20 </td>
</tr>
<tr>
<td> Chemistry </td>
<td> 25 </td>
</tr>
<tr>

Rohit Chandel
3532088819
Page | 36

<td> Maths </td>

<td> 28 </td>
</tr>
<tr>
<td rowspan= "3"> Rohit </td>
<td> Physics </td>
<td> 21 </td>
</tr>
<tr>
<td> Chemistry </td>
<td > 22 </td>
</tr>
<tr>
<td> Maths </td>
<td> 23 </td>
</tr>
<tr>
<td rowspan= "3"> anil </td>
<td> Physics </td>
<td> 24 </td>
</tr>
<tr>
<td> Chemistry </td>
<td> 20 </td>
</tr>
<tr>
<td> Maths </td>
<td> 23 </td>
Rohit Chandel
3532088819
Page | 37

</tr>
</table>
</html>

Rohit Chandel
3532088819
Page | 38

PRACTICAL-13 Create an employee table, detail table and

salary table in HTML web page
______________________________________________________________________
The code:
<html>
<head>
<title> Tables
</title>
</head>
<body>
<p align="center"><font size=+2>Office
<table align="center" border="2" height="50%" width="50%" >
<tr>
<th> Employee Id </th>
<th> First Name </th>
<th> Last Name </th>
<th> Address</th>
<th> Phone number </th>
<th> Department </th>
<th> Basic Salary</th>

Rohit Chandel
3532088819
<td> Sahil </td>
<td> Sharma </td>
<td> UU Pitampura </td>
<td> 8902423678 </td>
<td> Science </td>
<td> 50000 </td>
<td> 15000</td>
<td> 65000 </td>
</tr>
<tr>
<td> T3 </td>
<td> Rahul </td>
<td> Kumar </td>
<td> Green Park </td>
<td> 2316216515 </td>
<td> Arts </td>
<td> 80000 </td>
<td> 25000</td>
<td> 105000 </td>
</tr>
<tr>
<td> T4 </td>
<td> Rohit </td>
<td> Chandel </td>
<td> Sec 11 Dwarka </td> <td> 5439675614 </td>
<td> Marketing </td>
<td> 55000 </td>
<td> 10000</td>
<td> 65000</td>
</tr>
<tr>
<td> T5 </td>
<td> sunil </td>
Page | 40

<td> Bhatt </td>

<td> Green Park </td>
<td> 3215678548 </td>
<td> Marketing </td>
<td> 65000 </td>
<td> 20000</td>
<td> 85000 </td>
</tr>
</table>
</body>
</html>

Rohit Chandel
35324088819
Page | 41

Rohit Chandel
35324088819
Page | 42

PRACTICAL-14 Illustration of frame tag

______________________________________________________________________
The code:
<html>

<head>

<title> Frame </title>

</head>

<frameset cols="50%,20%,30%">

<frame

src="file:///C:/Users/hfrcc811/Desktop/Rohit.html

<frameset rows="35%,45%">

src="file:///C:/Users/hfrcc811/Desktop/Rohit.html

<frame

src="file:///C:/Users/hfrcc811/Desktop/Rohit.html

<Frame

src="file:///C:/Users/hfrcc811/Desktop/Rohit.html

</frameset>

</frameset>

</html>

Rohit Chandel
35324088819
Page | 43

Rohit Chandel
35324088819
Page | 44

PRACTICAL-15 Illustration of anchor tag

______________________________________________________________________
The code:
<html>
<body>
<center>
<h1> Anchor Tag </h1>
</center>
<font size=+2>
An anchor tag is a HTML element that creates a link to a target
URL.<br> When correctly implemented, the link can wrap around
text, images, or as buttons,<br> so that users can interact with it and visit
the link's destination.<br>
<br>
For example:
<b>
<li>
<a href ="https://www.flipkart.in/”>flipkart </a>
<br>
<li>
<a href ="https://www.Opera.com/"> Opera </a>
</li>
</font>
</body>
</html>

Rohit Chandel
35324088819
Page | 45

Rohit Chandel
35324088819
Page | 46

PRACTICAL-16

Write a code in html to Illustrate the various Form tags and

generate the following output:
______________________________________________________________________
The code: <html>

<head>

<title> Registeration Form </title>

</head>

<body bgcolor= "orange">

<font color="green"

<h3> <b> <u> REGISTERATION FORM </b> </u> </h3>

</font>

<form> <br>

*Company:

<input type = "text" name="Company Name" > <br> <br>

*First Name:

Rohit Chandel
35324088819
Page | 47

<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 id" ><br><br>

*Title:

<input type="text" name="title" > <br> <br>

*Phone:

<input type="number" name="phone"> <br> <br>

Cancel Registration : <input type="checkbox" checked > <br> <br>

*252 Training Session 2010:

<select name="dropdown">

<option value="-select a date-" >-select a date- </option>

<option value ="5 April 2010"> 5 April 2010 </option>

<option value="15 May2010"> 15 May 2010</option>

<option value="20 June 2010"> 20 June 2010</option>

</select> <br> <br>

*Job Function:

Rohit Chandel
35324088819
Page | 48

<input type="radio" name="Job function" id= "Campaign Management"

> Campaign Management <br>

<input type="radio" name="Job function" id= "CRM Administration" >

CRM Administration <br>

<input type="radio" name="Job function" id= "Email Deployment" >

Email Deployment <br>

<input type="radio" name="Job function" id="Patner"> Partner <br>

<input type="radio" name= "Job function" id="Employee" > Employee

<br><br>

Dietary Requirements:

<text area rows="1"> </text

area><br> <br>

Expectation?:

<text area rows="5" cols="30" >

</text area>

<br>

<button type="submit" > submit </button>

</form> </body>

Rohit Chandel
35324088819
Page | 49

</html>

</body>

</html>

Rohit Chandel
35324088819
Page | 50

Rohit Chandel
35324088819