E-COMMERCE (HTML LAB)
Submitted in partial fulfilment of the requirements for the award of the degree of
Bachelor of Business Administration
SHRI GURU TEGH BAHADUR INSTITUTE
OF MANAGEMENT AND INFORMATION
TECHNOLOGY
SUBMITTED BY- Kartikey Sharma
SUBMITTED TO- Mrs Swati Gupta
SECTION-BBA- 2A
GURU GOBIND SINGH INDRAPRASTHA UNIVERSITY
SESSION (2022-2025)
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
PRACTICALS
S NO. PRACTICALS Sign
1. Introduction to HTML with
i. Versions
ii. Feature
2. Create a webpage using basic HTML tags
(headings, title, body, head)
3. Create a basic webpage with ordered lists and
their attributes.
4. Create a basic webpage with unordered lists
and their attributes.
5. Create a basic webpage with definition lists.
6. Create a basic webpage with directory lists.
7. Create a basic webpage with a paragraph
having font size 20, face Arial, color blue
8. Create a basic webpage with html image and
its attributes
9. Create a basic webpage with a timetable using
tables
10. Create a basic webpage with a marquee and
its attributes
11. Create a basic webpage using frames.
12. Create a basic webpage using forms and their
attributes.
13. Create a basic webpage using forms and their
attributes.
pg. 1
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
Practical 1
Question: Introduction to HTML with
i. History
ii. Versions
iii. Feature
Steps to create a document with the help of an example.
HYPERTEXT MARKUP LANGUAGE
Hypertext Markup Language (HTML) is the standard markup language for
documents designed to be displayed in a web browser. It can be assisted by
technologies such as Cascading Style Sheets (CSS) and scripting languages
such as JavaScript. Web browsers receive HTML documents from a web server
or 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 elements are the building blocks of HTML pages. Images and other
objects such as interactive forms may be embedded into the rendered page with
HTML constructs. HTML provides a means to create structured documents by
denoting structural semantics for text such as headings, paragraphs, lists, links,
quotes, and other items. HTML elements are delineated by tags, written using
angle brackets. Tags such as <img /> and <input /> directly introduce content
to the page. Other tags such as <p> surround and provide information about
document text and may include other tags as sub-elements. Browsers do not
display the HTML tags but use them to interpret the content of the page.
HTML can embed programs written in a scripting language such as JavaScript,
affecting web page behavior and content. The inclusion of CSS defines the look
and layout of content. The World Wide Web Consortium (W3C), the former
maintainer of HTML and current maintainer of the CSS standards, has
encouraged the use of CSS over explicit presentational HTML since 1997. <p>
HTML documents imply a structure of nested HTML elements. These are
indicated in the document by HTML tags, enclosed in angle brackets thus:
In the simple, general case, the extent of an element is indicated by a pair of
tags: a "start tag" <p> and an "end tag" </p>. The element’s text content, if any,
is placed between these tags.
pg. 2
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
Tags may also enclose further tag markup between the start and end, including a
mixture of tags and text. This indicates further (nested) elements, as children of
the parent element.
The start tag may also include attributes within the tag. These indicate other
information, such as identifiers for sections within the document, identifiers
used to bind style information to the presentation of the document, and some
tags such as the <img>
used to embed images, the reference to the image resource.
Some elements, such as the line break <br>, do not permit any embedded
content, either text or further tags. These require only a single empty tag (akin
to a start tag) and do not use an end tag.
Many tags, particularly the closing end tag for the very commonly used
paragraph element <p>, are optional. An HTML browser or another agent can
infer the closure for the end of an element
from the context and the structural rules defined by the HTML standard. These
rules are complex and not widely understood by most HTML coders.
pg. 3
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
FEATURES OF HTML
Some of the features of Microsoft FrontPage include:
1)WEB WORKERS: Certain web applications use heavy scripts to perform
functions. Workers use separate background threads for processing and it does
not affect the performance of a web page.
2)VIDEO: You can embed video without third-party proprietary plugins or
code. Video becomes as easy as embedding an image.
3)CANVAS: This feature allows a web developer to render graphics on the fly.
As with video, there is no need for a plug-in.
4)APPLICATION CACHES: Web pages will start storing more and more
information locally on the visitor’s computer. It works like cookies, but where
cookies are small, the new feature allows for much larger files. Google Gears is
an excellent example of this in action.
5) GEOLOCATION: Best known for use on mobile devices, geolocation is
coming with HTML.
pg. 4
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
Practical:2
Question: Create a webpage using basic HTML tags (headings, title,
body, head)
HTML CODE
<html>
<head>
<body>
My name is Kartikey Sharma. I love to play computer games and listen to music in my free time. I am
pursuing BBA from IP University. I love to spend time with my friends and family. In the future, I
would like to start my venture. I love to watch movies and online series. I love to eat food
</body>
</head>
</html>
OUTPUT
pg. 5
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
Practical 3
Question: Create a basic webpage with ordered lists and their
attributes.
ORDER LIST AND ITS ATTRIBUTES
HTML CODE
<html>
<head>
<title>Ordered list</title>
<body> <h3>indian dishes></h3></body>
<ol type=x>
<li>samosa</li>
<li>pasta</li></ol>
<li>main couse</li>
<ol type=a> <li>chole bhature</li>|
</body>
</head>
</html>
pg. 6
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
OUTPUT
pg. 7
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
Practical 4
Create a basic webpage with unordered lists and their attributes.
HTML CODE
<html>
<head>
<h2> An unordered HTML List</h2>
<ul>
<li>coffee</li>
<li>tea</li> <li>juice</li>
</ul>
</head>
</html>
pg. 8
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
OUTPUT
pg. 9
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
Practical 5
Create a basic webpage with definition lists.
DEFINITION LIST
A definition list is a list of terms and corresponding definitions. Definition lists are
typically formatted with the term on the left with the definition following on the right
or the next line. The definition text is typically indented concerning the term. An
alternative format places the term left aligned in a wide margin and the definition on
one or more lines to the right of the term. If the DT term does not fit in the DT
column (one-third of the display area), it may be extended across the page with the
DD section moved to the next line, or it may be wrapped onto successive lines of the
left-hand column.
HTML CODE
<html>
<head>
<title>defination</title>
<body>
<DL>
<LH>List header</LH>
<DT>TERM 1<dd>This is the definition of the first term.
<DT>TERM 2<dd>This is the definition of second term
</DL>
</body>
</head>
</html>
pg. 10
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
OUTPUT
pg. 11
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
Practical 6
DIRECTORY LIST
The <dir> element, deprecated beginning in HTML was used to create a list of
file names or the contents of a directory. An unordered list, created with the
<ul> element, is the appropriate modern replacement for the <dir> element.
HTML CODE
<html>
<body>
<h1>The dir element </h1>
<dir>
<li>html</li>
<li>xhtml</li>
<li>css</li>
</dir>
<p> The dir element is not supported in HTML. use css instead.</P>
</body>
</html>
pg. 12
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
OUTPUT
Practical 7
pg. 13
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
a paragraph having font size 20, face arial, color blue
HTML CODE
<html>
<head>
<title>Pollution</title>
<font size="20" face="Arial" color="blue"> <p>Pollution is the process of
making the environment polluting the water and the air by adding harmful
substances. Pollution causes an imbalance in the environment. ... People have
converted </head>
</html>
OUTPUT
pg. 14
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
Practical 8
HTML image and its attributes
HTML IMAGE WITH ITS ATTRIBUTES
pg. 15
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
HTML CODE
<html>
<head>
<title>pollution</title>
<body>
<h1><b>HTML IMAGE</b></h1>
<img src="https://www.publichealthnotes.com/wp-content/uploads/2018/11/pollution.jpg">
</img>
</body>
</head>
</html>
OUTPUT
pg. 16
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
Practical 9
timetable using tables
Create a Time Table
pg. 17
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
HTML CODE
<html>
<head>
<title>college time table</title>
<body> <h2 align="center"><b><u>TIME TABLE</b></u></h2>
<center>
<table border="1">
<tr>
<th>Time:</th>
<th>8:30-9:20</th>
<th>9:20-10:10</th>
<th>10:10-11:00</th>
<th>11:00-11:30</th>
<th>11:30-12:20</th> <th>12:20-1:10</th>
<th>1:10-2:00</th>
</tr>
<tr align="center">
<td>Monday</td> <td>E-Commerce</td>
<td>Business communication</td> <td>Cost Accounting</td>
<td>B</td>
<td>Business Enviroment</td>
<td>Quantitative Techniques</td> </tr>
<tr align="center">
<td>Tuesday</td>
<td>Business Communication</td>
<td>Quantitative Techiques</td> <td>Business Enviroment</td>
<td>R</td> <td>Cost Accounting</td>
<td>E-Commerce Lab</td>
</tr> <tr align="center">
<td>wedenesday</td>
<td>Business Enivroment</td>
pg. 18
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
<td>E-Commerce</td>
<td>Cost Accounting</td> <td>E</td>
<td>Qauntitative Techniques</td>
<td>E-Commerce Lab</td>
</tr> <tr align="center">
<td>Thursday</td> <td>Qantitative Techniques</td>
<td>E-commerce</td>
<td>Business Communication</td> <td>A</td>
<td>Business Enviroment</td>
<td>Cost Accounting</td> <td>Qantitative Techniques</td>
</tr>
<tr align="center">
<td>Friday</td>
<td>Cost Accounting</td>
<td>Qantitative Techniques</td> <td>Business Communication</td>
<td>k</td> <td>E-Commerce</td>
<td>Cost Accounting</td>
</tr>
</table>
</head>
</html>
OUTPUT
pg. 19
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
Practical 10
Marquee and its attributes
HTML CODE
pg. 20
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
<html>
<head>
<title>marquee</title>
<body>
<marquee>LEAP YEAR</marquee>
</body>
</html>
P11
<html>
<head>
<title>HTML FRAME</title>
</head>
<frameset cols="80%, 20%">
<frame src="D:\ALL DATA\Desktop"/> <frame src="D:\ALL DATA\Desktop"/>
</frameset> </html>
OUTPUT
pg. 21
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
Practical 11
using frames.
pg. 22
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
FRAMES HTML frames are used to divide the browser window
into multiple sections where each section can load a separate HTML
document.
HTML CODE
<html>
<head>
<title>HTML FRAME</title>
</head>
<frameset cols="80%, 20%">
<frame src="C:/Users/sarthak/Desktop"/> <frame src="C:/Users/sarthak/Desktop"/>
</frameset>
</html>
OUTPUT
pg. 23
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
Practical 12
using forms and their attributes.
FORM AND ITS ATTRIBUTES
pg. 24
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
HTML form elements define the form that is used to collect users’
input. Forms elements are different types of input elements like text
filled, submit button, checkboxes, etc.
HTML CODE
<html>
<head>
<title>Resume Builder</title>
</head>
<body bgcolor="yellow">
<MARQUEE behaviour "alternate" direction="left"><font color="red">"PLEASE
FILL THE FORM"</font></MARQUEE>
<input type="text" name="firstname "placeholder="first name"><br>
<input type="number" name="mobile"placeholder="mobile"><br>
<input type="text" name="last name "placeholder="last name"><br> <input
type="text" name="Email ID"placeholder="Email ID"><br> <input
type="checkbox" name="English"value="on">english<br> <input
type="checkbox" name="Hindi" value="on">hindi<br>
<input type="checkbox" name="maths"value="on">maths<br>
<input type="radio" name="subject" value="maths">maths<br> <input
type="radio" name="subject" value="English">english<br> <input type="radio"
name="subject" value="Hindi">hindi<br> <select name="field">
<option value="BCA">BCA</option>
<option value="BBA">BBA</option> <option value="BBA B&I">BBA
B&I</option>
OUTPUT
pg. 25
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
Practical 13
using forms and frames
HTML PROGRAM USING FRAME AND FORM
pg. 26
SRI GURU TEGH BAHADUR INSTITUTE OF MANAGEMENT & TECHNOLOGY
HTML CODE
<html>
<head>
<title>Demo</title>
</head>
<frameset rows="20%, 80%">
<frame src="mq.html"/>
<frameset cols="50%, 50%"> <frame src="table.html"/>
<frame src="resume.html"/>
</frameset>
</html>
OUTPUT
pg. 27
