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 
PRACTICAL FILE
2021-2024

SUBMITTED BY:                                          SUBMITTED TO:

                                                                                        Ms. Ritika Kapoor
 INDEX

Particulars

1.Introduction to HTML with:

1. History
2. Versions
3. Features
4. Steps

2. Design a web page for TIPS. Illustrate the use of HEAD TAG,
BODY TAG and Paragraph TAG.
3. Illustration of paragraphs tags.
4.Design a web page on the following equations:
1. C2H5OH +PCL5 =C2H5CL+POCL3+HCL
2. 4H3PO3=3H3PO4+PH3
3. PCL3+CL2=PCL5

5.Design a web page on the following:

1. X4-2X3-3X2=0
2. 6W2-W=5
3. U2-5UQ-14=0

6.Design a web page in html to illustrate the use of ordered list

7.Design a web page in html to illustrate the use of unordered list
8.Design a web page in html to illustrate the use of ordered nested list
9.Design a web page in html to illustrate the use of unordered nested
list
10.Generate the code for the following output with the use of various
html tags
TRINITY INSTITUTE OF PROFESSIONAL STUDIES
DWARKA SEC 9
The college offers the following courses:-
I.DEPARTMENT OF COMPUTER SCIENCE OFFERS THE
FOLLOWING COURSES:
A)FULL TIME COURSES
 ● BCA
● MCA

B)EVENING COUSES
● B.TECH
● M.TECH

II.DEPARTMENT OF MATHEMATICS OFFERS THE FOLLOWING

COURSES:
A)FULL TIME COURSES
● B.SC
● M.SC

B)WEEKEND PROGRAMMES
● M.Phill
● P.hd

11.Create the output with the help of table tag:

12.Create the output with the help of various table tag:
13.Create the output with the help of various table tag:
14.Illustrate the use of Frames and generate the output:
15.Illustrate the use of Forms and generate the output:
16.Illustrate the use of Forms with its various tags and generate the
output

THEORY
Q. INTRODUCTION TO HTML WITH:
 HISTORY
 VERSIONS
 FEATURES
 STEPS

INTRODUCTION TO HTML
HTML stands for Hypertext markup Language. It is used to design web pages
using a markup language. HTML is the combination of Hypertext and Markup
language. Hypertext defines the link between the web pages. A markup
language is used to define the text document within 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. 

HISTORY
HTML was created by Sir Tim Berners-Lee in late 1991 but was not officially
released. It was 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 HTML 2.0, 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 HTML 3.0, where Dave Raggett 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 the new HTML slowed down the browser
in applying further improvements.
  Then comes HTML 4.01, 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.

VERSIONS

1. 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.

 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.

2. 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.

3. HTML 3.2

 It was developed in 1997. After HTML 2.0 was developed, the next

version of HTML was 3.2

 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.

4. 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.

 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.

5. HTML5

 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.

Let us look at a 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 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.

6. W3C HTML Validator

An HTML validator is a web-based tool that is used to maintain or check

whether a piece of HTML tag or HTML is valid. An HTML validator follows

the standard of W3C to validate an HTML page. It follows the W3C standard.

TAGS
Container tag consists of opening tag+content+closing tag. While empty tag is
tag without content or a closing tag.
Container tags are used to enclose texts, images etc. Like <body>, <div> etc.
are container tags as we put some content inside them.

But empty tags are used to insert something. Like if we want to insert an image
or a line-break or a horizontal-line, we use <img />, <br />, <hr /> tags
respectively.

Empty tags can be used inside the container tags. Like you can insert a line-
break or an image anywhere in your page but it should be inside some container
tag.

FEATURES

HTML is the most common used language to write web pages. It has recently
gained popularity due to its advantages such as: -

 
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.

 
6. Graphics, videos and sounds can also be added to the web pages which give
an extra attractive look to your web pages.
STEPS
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:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
 ADVERTISEMENT

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
right-click - and choose "Open with").

The result will look much like this:

PRACTICAL 1
Q. Design a web page for TIPS. Illustrate the use of HEAD TAG, BODY
TAG and Paragraph TAG.
Coding for the webpage

OUTPUT

PRACTICAL 2
Q. Illustration of paragraphs tags.
Coding for the webpage

OUTPUT
PRACTICAL 3
Q Design a web page on the following equations:
1. C2H5OH +PCL5 =C2H5CL+POCL3+HCL
2. 4H3PO3=3H3PO4+PH3
3. PCL3+CL2=PCL5
Coding for the web page

OUTPUT

PRACTICAL 4
Q. Design a web page on the following:
1. X4-2X3-3X2=0
2. 6W2-W=5
3. U2-5UQ-14=0
Coding for the webpage

OUTPUT

PRACTICAL 5
Q. Design a web page in html to illustrate the use of ordered list.
Coding for the webpage

OUTPUT
 PRACTICAL 6
Q. Design a web page in html to illustrate the use of unordered list
Coding for the webpage

OUTPUT
PRACTICAL 7
Q Design a web page in html to illustrate the use of ordered nested list
Coding for the webpage
 OUTPUT

PRACTICAL 8
Q Design a web page in html to illustrate the use of unordered nested list
Coding for the webpage

OUTPUT
 PRACTICAL 9
Q Generate the code for the following output with the use of various html
tags
TRINITY INSTITUTE OF PROFESSIONAL STUDIES
DWARKA SEC 9
The college offers the following courses:-
I.DEPARTMENT OF COMPUTER SCIENCE OFFERS THE FOLLOWING COURSES:
A)FULL TIME COURSES
● BCA
● MCA
B)EVENING COUSES
● B.TECH
● M.TECH

II.DEPARTMENT OF MATHEMATICS OFFERS THE FOLLOWING COURSES:

A)FULL TIME COURSES
● B.SC
● M.SC

B)WEEKEND PROGRAMMES
● M.Phill
● P.hd

Coding for the webpage

OUTPUT
 PRACTICAL 10
Q Create the output with the help of table tag:
Coding for the webpage
OUTPUT
 PRACTICAL 11
Q Create the output with the help of various table tag:
Coding for the webpage
OUTPUT