PROJECT REPORT SUBMITTED TOWARDS THE PARTIAL FULFILLMENT

OF
BACHELOR OF COMMERCE (HONS.)

E- Commerce
BATCH: 2017-2020

SUBMITTED BY: PROJECT GUIDE

SAGAR TIWARI Ms. Upasana Singh
Enrollment No: -40820688817 (Assistant Professor)

TRINITY INSTITUTE OF PROFESSIONAL STUDIES

Affiliated To Guru Gobind Singh Indraprastha University, New Delhi

 INDEX
1. Introduction to HTML with:

a) History

b) Versions

c) Features

d) Steps to create a document with the help of example

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:

a) C2H5OH +PCL5 =C2H5CL+POCL3+HCL

b) 4H3PO3=3H3PO4+PH3

c) PCL3+CL2=PCL5

illustrate the use of subscript

5. Design a web page on the following

a) X4-2X3-3X2=0

b) 6W2-W=5

c) U2-5UQ-14=0

illustrate the use of superscript

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:
Practical - 1
 HTML
Hypertext Mark-up Language (HTML) is the standard mark up for
documents designed to be displayed in a browser. Web browsers receive
HTML documents from a web server or from local storage and render the
documents into multimedia web pages. HTML describes the structure of a
web page semantically and originally included cues for the appearance of
the document. HTML is a mark-up language that web browsers use to
interpret and compose text, images, and other material into visual or
audible web pages.

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 Mark-up
Language (SGML)-based documentation format at CERN. Eleven of these
elements still exist in HTML 4

HTML is an SGML application for marking up documents for inclusion in

the World WideWeb. SGML is a set of standards posed by World Wide
Web consortium (W3C) for all mark-up languages to follow.HTML allows:

Documents publishing to the internet in a platform independent format.

Creating links to related works for your document.

Inclusion of graphics and multimedia data with your document.

Link to the non www information resources on the internet.

HISTORY
The seed for HTML was sown by IBM in the early 1980s. They wanted to
set a documentation system in which one could mark the title, headings,
paragraphs and font type selections. They called it General Mark-up
Language (GML). In 1986, the International Standardising Organization
(ISO) took up to this concept and standardized it as Standard General
Mark-up Language (SGML). In 1989, Tim Berners Lee and his team in
European Laboratory for Particle Physics (CERR) designed the present
form of the documentation language and called it HTML. The first publicly
available description of HTML was a document called &quote; HTML
Tags" Berners-Lee considered HTML to be an application of SGML.
Similarly, Dave Raggett'scompeting Internet-Draft, "HTML+
(Hypertext Mark-up Format)", from late 1993, suggested
standardizing already-implemented features like tables and fill-out forms.

After the HTML and HTML+ drafts expired in early 1994, the IETF created
an HTML Working Group, which in 1995 completed " HTML
2.0", the first HTML specification intended to be treated as a standard
against which future implementations should be based.

Further development under the auspices of the IETF was stalled by

competing interests. Since 1996, the HTML specifications have been
maintained, with input from commercial software vendors, by the World
Wide Web Consortium (W3C). However, in 2000, HTML also became an
international standard (ISO/IEC 15445:2000). HTML 4.01 was published in
late 1999, with further errata published through 2001. In 2004, development
began on HTML5 in the Web Hypertext Application Technology Working
Group (WHATWG), which became a joint deliverable with the W3C in
2008, and completed and standardized on 28 October 2014.
Versions of HTML

VERSIONS OF HTML Version Year

HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
HTML 5.1 2016
HTML 5.2 2017

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.

6. Graphics, videos and sounds can also be added to the web pages which
give an extra attractive look to your web pages.
STEPS TO CREATE A DOCUMENT
1. Open notepad.

2. Create a New document. Go to Notepad Menu: File > New.

3. Write the HTML code or program.

4. Save the file (File > Save) to the desktop with a .html extension.

5. Open the html file (it should open in your default browser)

FOR EXAMPLE:

<HTML>

<HEAD>

<TITLE> THIS IS A TITLE </TITLE>

</HEAD>

<BODY>

<P> HELLO WORLD! </P>

</BODY>

</HTML>
Practical -2

2. Design a webpage for Trinity Institute of Professional Studies

.Illustrate the use of head tag, title tag, body tag and paragraph tag

<HTML>

<HEAD>

<TITLE> Trinity Institute of Professional Studies </TITLE>

</HEAD>

<BODY>

<h1> Welcome to Trinity Institute of Professional Studies </h1>

<p> Trinity Institute of Professional studies is a premium educational

institute which is affiliated to GGSIPU </p>

</BODY>

</HTML>
Output -
Practical – 3

3. Design a web page using paragraph tag, bold, italics, underline,

strike through, alignment, size, width, color

<HTML>

<HEAD>

<h1 align = 'center' > illustration of paragraph </h1>

<p><i> the words written in italics </p></i>

<p><b> the words written in bold </p></b>

<p><u> the words written in underline </p></u>

<p><strike> the words written in strike through </strike></p>

<hr align = 'center' size=12 width=50% color='blue'>

<p><base font size = 3> this set base font to 3 <br>

<font size = +4> new font is 7 </font>

<br>

</p>

</head>

</html>
Output -
Practical-4

4. Design a web page on the following:-

 C2H5OH+PCL5 = 3H3PO4 + PH3

 4H3PO3 = 3H3PO4 + PH3
 PCL3 + CL2 = PCL5

<HTML>

<HEAD>

<TITLE> CHEMISTRY </TITLE>

</HEAD>

<BODY>

<H1> CHEMICAL EQUATION ILLUSTRATIONS </H1>

<HR><BR>

<H2><I>C<SUB>2</SUB>H<SUB>5</SUB>OH+PCL<SUB>5</SUB>=C<
SUB>2</SUB>H<SUB>5</SUB>CL+POCL<SUB>3</SUB>+HCL</I></H2
>

<BR>

<H2><I>PCL<SUB>3</SUB>+CL<SUB>2</SUB>=PCL<SUB>5</SUB></
H2>

<BR>

<H2><I>4H<SUB>3</SUB>PO<SUB>3</SUB>=3H<SUB>3</SUB>PO<S
UB>4</SUB>+PH<SUB>3</SUB></H2>

</BODY>

</HTML>
Output -
 Practical – 5

5. Design a web page on the following:-

 X4 - 2x3 - 3x2 = 0
 6w2 - w = 5
 U2 - 5u3 – 14 = 0

<HTML>

<HEAD>

<TITLE> MATHEMATICS </TITLE>

</HEAD>

<BODY>

<H1> MATHEMATICAL EQUATION ILLUSTRATIONS </H1>

<HR><BR>

<H2><I>X<SUP>4</SUP>-2X<SUP>3</SUP>-3X<SUP>2</SUP>=0

<H2><I>6W<SUP>2</SUP>-W=5

<H2><I>U<SUP>2</SUP>-5U<SUP>3</SUP>-14=0

</BODY>
Output -
Practical – 6

Give Illustration using ordered list

<HTML>

<HEAD>

<TITLE>FRUIT NAME </TITLE>

</HEAD>

<H4> ORDERED LIST OF FRUITS </H4>

<OL>

<LI> PEACH </LI>

<LI> MANGO </LI>

<LI> BANANA </LI>

</OL>

<OL TYPE='I'>

<LI> PEACH </LI>

<LI> MANGO </LI>

<LI> BANANA </LI>

</OL>

<OL TYPE='A'>

<LI> PEACH </LI>

<LI> MANGO </LI>

<LI> BANANA </LI>

</OL>

<OL TYPE='a'>

<LI> PEACH </LI>

<LI> MANGO </LI>

<LI> BANANA </LI>

</OL>

</HTML>
Output -
 Practical – 7

7. Give Illustration using unordered list

<HTML>

<HEAD>

<TITLE>FRUIT NAME </TITLE>

</HEAD>

<H4> UNORDERED LIST OF FRUITS </H4>

<UL>

<LI> PEACH </LI>

<LI> MANGO </LI>

<LI> BANANA </LI>

</UL>

<UL TYPE='CIRCLE'>

<LI> PEACH </LI>

<LI> MANGO </LI>

<LI> BANANA </LI>

</UL>

<UL TYPE='SQUARE'>

<LI> PEACH </LI>

<LI> MANGO </LI>

<LI> BANANA </LI>

</UL>

</HTML>
Output -
 Practical – 8

8. Give Illustration using ordered nested list

<HTML>

<HEAD>

<TITLE> ORDERED NESTED LIST </TITLE>

</HEAD>

<BODY>

<H1> HTML NESTED LIST PROGRAM </H1>

<OL>

<LI>CHAPTER 1

<OL>

<LI>TOPIC 1 </LI>

<LI>TOPIC 2 </LI>

<LI>TOPIC 3 </LI>

<LI>TOPIC 4 </LI>

</OL></LI>

<LI> SECTION 1 </L1>

<LI> SECTION 2 </L1>

<LI> SECTION 3 </L1>

<LI> SECTION 4 </L1>

</OL>

</BODY>

</HTML>
Output -
 Practical – 9

9. Give Illustration using unordered nested list

<HTML>

<HEAD>

<TITLE> UNORDERED NESTED LIST </TITLE>

</HEAD>

<BODY>

<H1> HTML NESTED LIST PROGRAM </H1>

<UL>

<LI>CHAPTER 1

<UL TYPE = "CIRCLE">

<LI>TOPIC 1 </LI>

<LI>TOPIC 2 </LI>

<LI>TOPIC 3 </LI>

<LI>TOPIC 4 </LI>

</UL></LI>

<LI> SECTION 1 </L1>

<LI> SECTION 2 </L1>

<LI> SECTION 3 </L1>

<LI> SECTION 4 </L1>

</UL>

</BODY>

</HTML>
Output -
 Practical – 10

<HTML>

<HEAD>

<TITLE>Trinity Institute of Professional Studies</TITLE>

</HEAD>

<BODY>

<H1><H1 align="center"><hr align="center"; size="7"><B>Trinity Institute of

Professional Studies, Dwarka Sector-9</H2></B>

<BR>

<Font face="Times New Roman"; font size="5";fontcolor="blue">The College

offers following courses:-</font><br>

<ol type="I"><B><I><font size="5">

<li>Department of Computer Science</B></I></font></li><br>

<ul type="circle"><B><I><font size="4">

<li>Full Time Course</li>

<ol type="1"><font size="3">

<li>BCA</li>

<li>MCA</li>

</ol></font>

</ul><br>

<ul type="circle"><B><I><font size="4">

<li>Evening Courses</li>
<ol type="1"><font size="3">

<li>BTech</li>

<li>MTech</li>

</ol></font>

</ul><br>

<li>Department of Mathematics</B></I></font></li><br>

<ul type="circle"><B><I><font size="4">

<li>Full Time Course</li>

<ol type="1"><font size="3">

<li>B.SC(maths)</li>

<li>M.SC(maths)</li>

</ol></font>

</ul><br>

<ul type="circle"><B><I><font size="4">

<li>Weekend Programmes</li>

<ol type="1"><font size="3">

<li>M.Phil</li>

</ol></font>

</ul><br>

</ul>

</HTML>
Output -
 Practical – 11

11. Create a table in HTML

<HTML>

<HEAD>

<TITLE>Creation of table </TITLE>

</HEAD>

<BODY>

<table>

<table caption> TABLE OF FOUNDER </table caption>

<table border="2">

<tr>

<th> No. </th>

<th> Full Name </th>

<th> Position </th>

<th> Salary </th>

</tr>

<tr>

<td> 1.</td>

<td> Bill Gates </td>

<td> Founder Microsoft </td>

<td> $1000 </td>

</tr>

<tr>

<td> 2.</td>
<td> Steve Jobs </td>

<td> Founder Apple </td>

<td> $1200 </td>

</tr>

<tr>

<td> 3.</td>

<td> Larry Page </td>

<td> Founder Google </td>

<td> $1100 </td>

</tr>

<tr>

<td> 4.</td>

<td> Mark Zuckeberg</td>

<td> Founder Microsoft </td>

<td> $1300 </td>

</tr>

</table>

</BODY>

</HTML>
Output -
 Practical – 12

12. Create a Table in HTML using Rowspan

<HTML>

<HEAD>

<TITLE>Creation of table </TITLE>

</HEAD>

<BODY>

<table>

<table caption> TABLE OF DOG BREEDS </table caption>

<table caption alignment= "centre">

<table border="2">

<tr>

<th> Breed </th>

<th> Description </th>

<th> Group </th>

<th> Organization </th>

</tr>

<tr>

<td> French Bulldog </td>

<td> Loyal Companion </td>

<td> Non Sporting </td>

<td rowspan = "4"> All listed dogs are AKC recognized </td>
</tr>

<tr>

<td> Wheaten Terrier </td>

<td> High Energy, Friendly </td>

<td> Terrier </td>

</tr>

<tr>

<td> English Pointer </td>

<td> Hunting Companion </td>

<td> Sporting </td>

</tr>

<tr>

<td> Australian Cattle Dog </td>

<td> Guarding, Herding </td>

<td> Working </td>

</tr>

</table>

</BODY>

</HTML>
Output -
 Practical – 13

13. Create a table in HTML using cellpading and cellspacing

<html>

<head><title>Student</title></head>

<body>

<table border = "1" table cellpadding="10" cellspacing="5">

<tr>

<th></th>

<th>Name</th>

<th>Age</th>

<th>Telephone</th>

</tr>

<tr>

<th>Student 1</th>

<td>Radha Desai</td>

<td>20</td>

<td>123 456 789</td>

</tr>

<tr>

<th>Student 2</th>

<td>GeethaBharadwaj</td>
<td>21</td>

<td>267 891 281</td>

</tr>

</table>

<hr>

<table border = "1" table cellpadding="10" cellspacing="5"

<tr>

<th>Name</th>

<thcolspan="2">Telephone</th>

</tr>

<tr>

<th>Radha</th>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

<hr>

<table border = "1" table cellpadding="5" cellspacing="5">

<tr>

<th>First name:</th>

<th>Radha</th>

</tr>

<tr>
<throwspan="3">Telephone:</th>

<td>555 77 854</td>

</tr>

<tr>

<td>555 77 855</td>

</tr>

</table>

</body>

</html>
Output -
 Practical – 14

14. Create a Frame in HTML

For Frame-

<html>

<frameset rows="55%,*" cols="43%,*">

<frame src="https://www.cricwizz.com/wp-
content/uploads/2016/03/MSDhoni_Large-2.jpg">

<frame src="divy.html">

<frame src="dk.html">

<frame src="d.html">

</frameset>

</html>

For List-

<html>

<head><title>MS Dhoni</title></head>

<body bgcolor="yellow">

<strong>Captain cool "MS Dhoni":</strong>

<ul style ="disk">

<li>According to Forbes, M.S. Dhoni's net worth is $ 30 million which is
more than master blaster Sachin Tendulkar's net worth..</li>

<li>MSD is the only Indian captain to lead his team to victory in all three
major ICC tournaments; T-20 world cup (2007), 50 over world cup (2013).
He led his team CSK (Chennai Super Kings) in the IPL (2010, 2011and
2018) and champions league T-20 (2010 & 2014) as well..</li>

<li>He is India's most successful cricket captain, having led India to 27 test
wins and a whopping 163 one-day victories. His win percentage is
unmatchable; 45% in tests and 61% in ODIs.</li>

<li>Mahi's better-half, SakshiDhoni, carries electrical cookers along every

time she accompanies her husband on cricket tours..</li>

<li>Dhoni is the only captain in the ODIs to score a century while batting on
number 7. He did it against Pakistan on December 2012..</li>

<li>The only celebrity who has more brand endorsements than Mahi is
none other than King Khan (Shahrukh Khan).</li>

<li>No matter what, Mahi has a special place in the hearts of millions of
cricket fans for his selflessness and brilliance in his game.</li>

</ul>

</body>

</html>

For Hyperlink-

<html>

<head>

<title>MSD</title>
</head>

<h2>The great Leader MS DHONI </h2>

<body bgcolor ="Pink">

<p align="center"

MS Dhoni as a leader <a href ="https://madhavuniversity.edu.in/m.s-

dhoni.html">Click here</a>

</p>

</body>

</html>

For Table-

<html>

<head><title>MS Dhoni stats in international career</title></head>

<body>

<table border = "2" table cellpadding="15" cellspacing="10">

<tr>

<th>Format</th>

<th>Matches</th>

<th>Runs</th>

<th>Average</th>

<th>Highest Score</th>

</tr>

<tr>

<th>Tests</th>
<td>90</td>

<td>4876</td>

<td>38.2</td>

<td>224</td>

</tr>

<tr>

<th>ODIs</th>

<td>350</td>

<td>10770</td>

<td>50.2</td>

<td>183</td>

</tr>

<tr>

<th>T20Is</th>

<td>98</td>

<td>1617</td>

<td>37.1</td>

<td>56</td>

</tr>

</table>

</body>

</html>
Output –

FRAME -
LIST -
HYPERLINK -
TABLE -
 Practical – 16

16. Prepare a form through Form based tags

<head>

<title> form tag </title>

</head><body>

<center>

<h3 align="center">To illustrate form based tags</h3><hrcolor="red">

<form action="">

<p>This is a text box to enter any text.<input type="text" >

<p>This is a text box to enter password.<input type="password" >

<p>This is a text area to enter large text<textarea></textarea>

<p>This is a button.<input type="button" Value="Click" >

<p><b><u>Radio Options</u></b><br>

<input type="radio" name="y" checked> yes

<input type="radio" name="n" checked> no </p>

<p><b><u>Checkbox Options</u></b><br>

Sunday<input type="checkbox" checked >

Monday<input type="checkbox" >

Tuesday<input type="checkbox" >

</p>

<p><b><u>Menu driven options </u></b>

<select name="cars">
<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select></p>

</form>

</center>

</body>

</html>
Output –
Output –