E-Commerce

Practical File

Submitted in partial fulfillment of the requirements

for the award of the degree of

Bachelor of Commerce (B.COM (H))

To

Guru Gobind Singh Indraprastha University, Delhi

Submitted to:- Submitted by:

Ms. Leena Gupta Anshul
Designation: Roll No.: 00613788820
Batch: 2020-2023

Institute of Information Technology & Management,

New Delhi – 110058

1
 INDEX

List of Practical: E Com. Lab

Programme: BCOM Semester: VI Paper Code: 308 Academic Year: 2022- 2023

S.No. Topic Page Date Sign

No.

INTRODUCTION TO HTML BASIC AND ADVANCED FORMATTING TAGS

1. Brief history of web browsers, search 7

engines, HTML.

2. Create a web page containing basic 15

elements of HTML, in which student
must write description about
herself.(Resume)
Wite a HTML code which display the 16
following expression.Put the heading as
“Chemical Equation”

4H3PO3 = 3H3PO4 + PH3

and other expression as
Pnew = Pold + x2 –y acosx
3.
Create a web page describing your 4 17
friend, where default font size should be
6 and Friend Name should be moving
Assign a suitable background color and
4. text color
INTRODUCTION TO HTML LISTS

2
 5. Create a web page using HTML that 19
has an ordered list of 5 elements and
unordered list of 5 elements.

6. Write HTML code to produce the 20

following output:
Fruits and vegetables
C. Vegetables
 Onion
 Potato
D. Fruits
 Mango
 Grapes
Second Nested List Should be as
follows:
Newspapers and Magazines
 Newspaper
5. TOI
6. HT
7. Navbharat Times
 Magazines
i. The Week
ii. India today

7. Write a code for the following 22

Definition list:
Wheat
-A baked food made of flour.
Coffee
-A drink made from roasted coffee
beans.
8. Create an HTML containing 3 images 23
differently aligned.

INTRODUCTION TO HYPERLINK IN
HTML

3
 9. Create an HTML document 24
demonstrating the use of text
hyperlink.

10. Insert an image in a document and link 26

it to some other page.
11. Develop an HTML document which 28
displays your name as heading and
display the name of any four of your
friends in a list. Each friend‟s name
should be hyperlink when you click
friend‟s name it must open another
HTML document which tells about
your friend.

12. Create a static page of astrology site 29

and use hyperlink to open the
horoscope of different Zodiac Sign.

INTRODUCTION TO TABLES IN
HTML
13. Create a table containing Sr No. , 31
Name and Marks of 10 students.(Use
all the attributes of table tag i.e.
border,bgcolor,width,cellspacing and
cell padding)
14. Displa the table with the given 34
y
format with row-span and col-span

Semester Pass
Percentage
BBA I 99%
BCA III 98%
I 97%
MCA I 97%

4
15. Display the Invoice of a company with 36
proper formatting using all the
attributes of table.
INTRODUCTION TO FRAMES IN HTML
16. Design the following webpage using 38
<frameset> tag in HTML

17. Design the following webpage using 40

frameborder, noresize, marginwidth
andmarginheightattributesof
<frame> tag in HTML

18. Design the webpage which shows the 42

implementation of navigation frames.

5
 E-Commerce Practical File | 00613788820, ANSHUL

19. Design website of IITM for given 44

format using frame tag.

Institute of Information Technology

and Management
Affiliation Details
About Us
Faculty Content about IITM.
Detail Here
Programs
Offered

© Copyright Act
Developed By: Developer Name

20. Create a webpage to embed 48

Multimedia component in HTML.

21. Create a webpage to embed a 50

YouTube video in HTML.

22. Create a registration form using form 52

tag in HTML.

23. Create a form in HTML to take 53

feedback of customer for the service
of a restaurant.
24. Create a University website having 57
atleast three pages. Pages should
consist of enquiry,admission,
examination and result, etc.

6
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-1

Q. Brief history of Web Browsers, Search Engines, HTML.

Ans.

 WORLD WIDE WEB:- World Wide Web, which is also known as a Web, is a collection of
websites or web pages stored in web servers and connected to local computers through the
internet. These websites contain text pages, digital images, audios, videos, etc. Users can
access the content of these sites from any part of the world over the internet using their
devices such as computers, laptops, cell phones, etc. The WWW, along with internet, enables
the retrieval and display of text and media to your device.

Small websites store all of their Web Pages on a single server, but big websites or organizations
place their Web Pages on different servers in different countries so that when users of a country
search their site they could get the information quickly from the nearest server.

 WEB BROWSER:- Web browsers are programs that allow you to access web pages on the
Internet, read HTML (hypertext markup language) documents on your computer, or view your
local intranet site. These browsers don't just display information. They also help you find
information using search engines, purchase products online using various online shopping
sites, interact with other people using social media services, use web-based editing
applications to create documents, and much more.
When browsing the web, JAWS gives you quick access to the information you need, and
provides detailed information about the structure and organization of web pages. Tables, lists,
headings, and alternate text for images are all announced. The information comes right from
the HTML used to create the page. HTML is designed with accessibility in mind, and JAWS
supports more of the built-in HTML accessibility features than any other screen reader.

7
 E-Commerce Practical File | 00613788820, ANSHUL

Types of web browsers:-

1. Mozilla Firefox:-

Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla

Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display
web pages, which implements current and anticipated web standards. Features of the desktop edition
include tabbed browsing, full-screen mode, spell checking, incremental search, smart bookmarks,
bookmarking and downloading through drag and drop, a download manager, user
profile management, private browsing, bookmark tags, bookmark exporting, offline
mode, a screenshot tool, web development tools, a "page info" feature which shows a list of page
metadata and multimedia items, a sophisticated configuration menu at  about:config  for power users,
and more location-aware browsing. Firefox provides an environment for web developers in which they
can use built-in tools, such as the Error Console or the DOM Inspector, and extensions, such
as Firebug and more recently there has been an integration feature with Pocket. Firefox Hello was an
implementation of WebRTC, added in October 2014, which allows users of Firefox and other
compatible systems to have a video call, with the extra feature of screen and file sharing by sending a
link to each other. Firefox Hello was scheduled to be removed in September 2016.

8
 E-Commerce Practical File | 00613788820, ANSHUL

2. Brave:-

Brave is a more-or-less standard browser that lets users navigate to websites, run web apps, and display
online content. Like other browsers, it is free to download and use, remembers site authentication
information, and can block online ads from appearing on sites.

Its maker, Brave Software, is among the newer entries in the browser battles, having previewed the browser
in January 2016.

Brave boasts two things: speed and privacy. Both result from its ad-stripping strategy.

On the desktop, Brave Software contends that its browser loads pages three times faster than Google's
Chrome, the world's No. 1 browser. The speed increases are not surprising. By eliminating ads and ad
trackers, Brave downloads much less content from a website than any browser sans an ad-blocking
extension.

There's nothing technologically-special about Brave's performance; it's simply retrieving less data than
other browsers.

What sets Brave apart is its aggressive anti-ad attitude. The browser was built to strip online ads from
websites and its maker's business model relies not only on ad blocking, but on replacing the scratched-out
ads with advertisements from its own network. It's as if a new sports cable network announced it would use
technology to remove ads from another network's programs, say, ESPN's, then rebroadcast those programs
with ads of its own devising, with the revenue from those ads going in its pockets, not ESPN's.

9
 E-Commerce Practical File | 00613788820, ANSHUL

3. Opera:-

Opera is a multi-platform web browser developed by its namesake company Opera. The browser is based

on Chromium, but distinguishes itself from other Chromium-based browsers (Chrome, Edge, etc.) through
its user interface and other features.

Opera has originated features later adopted by other web browsers, including: Speed Dial, pop-up blocking,
reopening recently closed pages, private browsing, and tabbed browsing. Additional features include a
built-in screenshot tool, Snapshot, which also includes an image-markup tool, built-in ad blockers, and
tracking blockers.

Opera includes a bookmarks bar and a download manager. It also has "Speed Dial" which allows the user
to add an unlimited number of pages shown in thumbnail form in a page displayed when a new tab is
opened.

Opera was one of the first browsers to support Cascading Style Sheets (CSS) in 1998.
Opera Turbo, a feature that compresses requested web pages (except HTTPS pages) before sending them to
the users,  is no longer available on the desktop browser. Opera Turbo is available in Opera Mini, the
mobile browser.

10
 E-Commerce Practical File | 00613788820, ANSHUL

4. Safari:-

Safari is a Web browser developed by Apple, Inc., and is the default browser of the operating systems
used in its product lines such as OS X for the Mac and MacBook computers and iOS for the iPhone and
iPad mobile devices.

While you might have trouble spotting the differences between Google Chrome, Apple's Safari, or
Microsoft Edge at first glance, the Safari browser has some key features that help separate it from the
pack, including the ability to format articles for easier reading.

 iCloud Tab Browsing. This feature automatically syncs open tabs across devices with the
same iCloud account. You can view a list of all tabs open on your MacBook while using Safari on
the iPhone or iPad. It's similar to Chrome's bookmark sharing but doesn't require logging in.  
 Sharing. The Safari app has a built-in share button that enables users to quickly share a website
through messaging, email, or social media such as Facebook or Twitter. The coolest feature is the
ability to share a site directly with another nearby iPhone, iPad, or Mac using AirDrop.  
 Reader View. Safari can detect articles and present them in a format that strips out navigation
and advertisement in favor of a more readable view. This view is especially great for websites that
load new windows as you scroll or become unreadable on an iPhone or iPad because of
navigation.
 Energy Efficient. While iMacs are great desktop computers, Apple is primarily a laptop and
mobile device provider. Safari proves this by being extremely energy efficient, buying you
precious minutes, and sometimes even hours of extra use compared to Chrome, Firefox, and other
popular browsers.

11
 E-Commerce Practical File | 00613788820, ANSHUL

5. Microsoft Edge:-

Microsoft Edge is the browser created for Windows 10; Edge replaces Internet Explorer (IE), the browser
that debuted with Windows 95 and was a part of Windows operating systems for the following two
decades.

Edge is a smaller, more streamlined browser built on Web standards and designed for Web services.
Microsoft currently has no plans to bring Edge to earlier versions of Windows or provide versions for any
non-Windows operating systems.

Edge has trimmed back the bloat that most modern browsers, including IE, had. It has also dropped Active-
X support. Edge was code-named "Spartan" in development, a reference to the browser's lightweight
structure, which is designed to make Edge functional across multiple, often mobile, device platforms.

Edge installs along with Windows 10 much the same way Internet Explorer did with earlier versions.
However, IE is also included in Windows 10 for communication compatibility, particularly within the
enterprise.

12
 E-Commerce Practical File | 00613788820, ANSHUL

 SEARCH ENGINE:- It refers to a huge database of internet resources such as web pages,
newsgroups, programs, images etc. It helps to locate information on World Wide Web.
User can search for any information by passing query in form of keywords or phrase. It then
searches for relevant information in its database and return to the user.

 Search Engine Components

Generally there are three basic components of a search engine as listed below:
1. Web Crawler
2. Database
3. Search Interfaces

 Web Crawler:- It is also known as spider or bots. It is a software component that traverses the
web to gather information.

 Database:- All the information on the web is stored in database. It consists of huge web resources.

 Search Interfaces:- This component is an interface between user and the database. It helps
the user to search through the database.

13
 E-Commerce Practical File | 00613788820, ANSHUL

 Search Engine Working

Web crawler, database and the search interface are the major component of a search engine that
actually makes search engine to work. Search engines make use of Boolean expression AND,
OR, NOT to restrict and widen the results of a search.
Following are the steps that are performed by the search engine:
 The search engine looks for the keyword in the index for predefined database instead of
going directly to the web to search for the keyword.
 It then uses software to search for the information in the database. This software
component is known as web crawler.
 Once web crawler finds the pages, the search engine then shows the relevant web pages
as a result. These retrieved web pages generally include title of page, size of text
portion, first several sentences etc.
These search criteria may vary from one search engine to the other. The retrieved information is
ranked according to various factors such as frequency of keywords, relevancy of information,
links etc.

 Architecture:-

The search engine architecture comprises of the three basic layers listed below:
 Content collection and refinement.
 Search core
 User and application interfaces

PRACTICAL-2
14
 E-Commerce Practical File | 00613788820, ANSHUL

Q. Create a web page containing basic elements of HTML, in which student must write description
about herself.
Ans.
Source code:-

<html>
<head>
<title>00613788820 Anshul</title>
<body>
My name is Anshul. I am 20 years old. I am doing my graduation in BCOM from XYZ college.
I have done my schooling from ABC school. My hobbies are playing football, cinematography, etc.
</body>
</html>

Output:-

15
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-3

Q. Write HTML code which display the following expression. Put the heading as “Chemical
Equation”
4H3PO3 = 3H3PO4 + PH3 and other expression as Pnew = Pold + x2 –y acosx.
Ans.
Source code:-

<html>
<h1> Chemical equation </h1>
<title>00613788820 Anshul</title>
<body>
4H3PO3 = 3H3PO4 + PH3
<br>Pnew = Pold + x2-y acosx </br>
</body>
</html>

Output:-

16
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-4

Q. Create a web page describing your 4 friend, where default font size should be 6. Assign a suitable
background color and text color.
Ans.
Source code:-

<html>
<head>
<body bgcolor="#7F867B">
<title>00613788820 Anshul</title>
<p>
<font size="6" color="#C7C7BB">
Tushar- He gets on my nerves, but nice guy nonetheless.
</font>
</p>
<p>
<font size="6" color="#C7C7BB">
Rahul- Bro thinks life is a Wes Andersen movie.
</font>
</p>
<p>
<font size="6" color="#C7C7BB">
Yash- The witty guy who actually have brains as well.
</font>
</p>
<p>
<font size="6" color="#C7C7BB">
Siddharth- He took his inspiration to movies to a bigger screen. Litreally.
</font>
</p>
</body>
</html>

17
 E-Commerce Practical File | 00613788820, ANSHUL

Output:-

18
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-5

Q. Create a web page using HTML that has an ordered list of 5 elements and unordered list of 5
elements.
Ans.
Source code:-
<html>
<head>
<title> 00613788820 question 5</title>
</head>
<body>
<ol>
<B>Fruits</B><br>
<li>Mango</li>
<li>Kivi</li>
<li>Apple</li>
<li>Banana</li>
<li>Grape</li>
</ol>
<ul>
<B>Vegetables</B><br>
<li>Potato</li>
<li>Tomato</li>
<li>Ladyfinger</li>
<li>Brinjal</li>
<li>Onion</li>
</ul>
</body>
</html>

Output:-

19
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-6

Q. Write HTML code to produce the following output:

Fruits and vegetables
C. Vegetables
 Onion
 Potato
D. Fruits
 Mango
 Grapes
Second Nested List Should be as follows:
Newspapers and Magazines
 Newspaper
5. TOI
6. HT
7. Navbharat Times
 Magazines
i. The Week
ii. India Today

Ans.
Source code:-

<html>
<head>
<title>Question 6, 00613788820</title>
</head>
<body>
<h1>Fruits & Vegetables</h1>
C. Vegetable
<ul>
<li>Onion</li>
<li>Potato</li>
</ul>
D. Fruits
<ul>
<li>Mango</li>
<li>Grapes</li>
</ul>
<h1> Newspapers & Magazines</h1>
<ul>
<li>Newspaper</li>
20
 E-Commerce Practical File | 00613788820, ANSHUL

<ol start=5>
<li>TOI</li>
<li>HT</li>
<li>Navbharat Times</li>
</ol>
<li>Magazines</li>
<ol type="i">
<li>The Week</li>
<li>India Today</li>
</ol>
</ul>
</body>
</html>

Output:-

21
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-7

Q. Create a code for the following Definition list:

 Wheat
-A baked food made of flour.
 Coffee
-A drink made from roasted beans.

Ans.
Source code:-

<html>
<head>
<title> 00613788820, Q7 </title>
</head>
<body>
<dl>
<dt><b> Wheat </dt></b>
<dd> A baked food made of flour. </dd>
<dt><b> Coffee </dt></b>
<dd> A drink made from roasted beans. </dd>
</dl>
</body>
</html>

Output:-

22
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-8

Q. Create an HTML containing 3 images differently aligned.

Ans.

Source code:-
<html>
<head>
<title> 00613788820, Q8 </title>
</head>
<body>
<h1> HTML Image </h1>
<center><img width = "400" align="top" src="images/drogba.jpg" alt="Drogba"/></center>
<img width = "400" align="right" src="images/r9.jpg" alt="R9"/>
<img width = "400" align="left" src="images/torres.jpg" alt="Torres"/>
</body>
</html>

Output:-

23
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-9

Q. Create an HTML document demonstrating the use of text hyperlink.

Ans.

Source code:-
<html>
<head>
<title> 00613788820, Q9 </title>
</head>
<body>
<h1> Hyperlinks</h1>
<p><a href="https://www.fifa.com/">FIFA U20 WORLD CUP 2023</a></p>
</body>
</html>

Output:-

24
 E-Commerce Practical File | 00613788820, ANSHUL

25
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-10

Q. Insert an image in a document and link it to some other page.

Ans.

Source code:-
<html>
<head>
<title> 00613788820, Q10 </title>
</head>
<body>
<h1> Hyperlink to an image </h1>
<p><a href="https://www.youtube.com/watch?v=qZV9UWY5wwY">
<img src="images/rooney.jpg" alt="Rooney" width="400"</a></p>
</body>
</html>

Output:-

26
 E-Commerce Practical File | 00613788820, ANSHUL

27
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-11

Q. Develop an HTML document which displays your name as heading and displays the name of any
four of your friends in a list. Each friend’s name should be hyperlink. When you click friend’s name,
it must open another HTML document which tells about your friend.
Ans.

Source code:-
<html>
<head>
<title> 00613788820, Q11 </title>
</head>
<body>
<h1> Anshul </h1>
<ul>
<li><a href="Tushar.htm">Tushar</a></li>
<li><a href="Yash.htm">Yash</a></li>
<li><a href="Rahul.htm">Rahul</a></li>
<li><a href="Siddharth.htm">Siddharth</a></li>
</body>
</html>

Output:-

28
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-12

Q. Create a static page of astrology site and use hyperlink to open the horoscope of different Zodiac
Sign.
Ans.

Source code:-

<html>
<head>
<title> 00613788820, Q12 </title>
</head>
<body>
<center><h1> Zodiac Signs </h1></center>
<a href="aquarius.htm">Aquarius</a>
<img src="aquarius.png" alt="Aquarius" width="100">
<a href="aries.htm">Aries</a>
<img src="aries.png" alt="Aries" width="100">
<a href="cancer.htm">Cancer</a>
<img src="cancer.png" alt="Cancer" width="100">
<a href="capricorn.htm">Capricorn</a>
<img src="capricorn.png" alt="Capricorn" width="100">
<a href="gemini.htm">Gemini</a>
<img src="gemini.png" alt="Gemini" width="100">
<a href="leo.htm">Leo</a>
<img src="leo.png" alt="Leo" width="100">
<a href="libra.htm">Libra</a>
<img src="libra.png" alt="Libra" width="100">
<a href="pisces.htm">Pisces</a>
<img src="pisces.png" alt="Pisces" width="100">
<a href="sagitarius.htm">Sagitarius</a>
<img src="sagitarius.png" alt="Sagitarius" width="100">
<a href="scorpio.htm">Scorpio</a>
<img src="scorpio.png" alt="Scorpio" width="100">
<a href="tarus.htm">Tarus</a>
<img src="tarus.png" alt="Tarus" width="100">
<a href="virgo.htm">Virgo</a>
<img src="virgo.png" alt="Virgo" width="100">
</body>
</html>

29
 E-Commerce Practical File | 00613788820, ANSHUL

Output:-

30
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-13

Q. Create a table containing Sr. No., Name and Marks of 10 students.(Use all the attributes of table
tag i.e., border, bgcolor, width, cellspacing and cell padding)
Ans.

Source code:-

<html>
<head>
<title> Anshul 00613788820</title>
</head>
<body bgcolor="#C1ABAD">
<center>
<body>
<table border="5" bordercolor:"black"; bgcolor="C7C7BB"; cellspacing="5"; cellpadding="5";
width="50%">
<tr>
<th>S.No</th>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>1</td>
<td>David</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>Beckham</td>
<td>99</td>
</tr>
<tr>
<td>3</td>
<td>Cantona</td>
<td>89</td>
</tr>
<tr>
<td>4</td>
<td>Shevchenko</td>
<td>90</td>
</tr>
<tr>
<td>5</td>
31
 E-Commerce Practical File | 00613788820, ANSHUL

<td>Bale</td>
<td>70</td>
</tr>
<tr>
<td>6</td>
<td>Zlatan</td>
<td>99</td>
</tr>
<tr>
<td>7</td>
<td>Messi</td>
<td>69</td>
</tr>
<tr>
<td>8</td>
<td>Ronaldo</td>
<td>59</td>
</tr>
<tr>
<td>9</td>
<td>Zidane</td>
<td>75</td>
</tr>
<tr>
<td>10</td>
<td>Iniesta</td>
<td>90</td>
</tr>
</body>
</html>

32
 E-Commerce Practical File | 00613788820, ANSHUL

Output:-

33
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-14

Q. Display the table with the given format with row-span and col-span

Semester Pass
Percentage
BBA I 99%
BCA III 98%
I 97%
MCA I 97%
B.Com(H) Result
Awaited

Ans.

Source code:-

<html>
<title>Result sheet</title>
<body bgcolor ="teal">
<center><table border= "5", bgcolor="skyblue", cellspacing="8", height="300", width="300"></center>
<caption><centre><b>Result sheet</b></center></caption>
<tr align= "center">
<th colspan=2>Semester</th>
<th>Pass percentage</th>
</tr>
<tr>
<td>BBA</td>
<td>I</td>
<td>99%</td>
</tr>
<tr>
<td rowspan="2">BCA</td>
<td>III</td>
<td>98%</td>
</tr>
<tr>
<td>I</td>
<td>97%</td>
</tr>
<tr>
<td>MCA</td>
<td>I</td>
<td>97%</td>
34
 E-Commerce Practical File | 00613788820, ANSHUL

</tr>
<tr>
<td colspan="2">B.Com(h)</td>
<td>Result awaited</td>
</tr>
</table></center></font>
</body>
</html>

Output:-

35
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-15

Q. Display the Invoice of a company with proper formatting using all the attributes of table.

Ans.

Source code:-

<html>
<head>
<title>00613788820, Q15</title>
</head>
<body>
<table align="center" border="5">
<caption> Invoice of XYZ ltd. </caption>
<tr>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
<tr>
<td>Pens(box)</td>
<td>500</td>
<td>50</td>
<td>2500</td>
</tr>
<tr>
<td>Paper(bundle)</td>
<td>800</td>
<td>300</td>
<td>2400</td>
</tr>
<tr>
<td>Ink <br> Cartridge</td>
<td>100</td>
<td>700</td>
<td>7000</td>
</tr>
<tr>
<td>Penholder</td>
<td>100</td>
<td>50</td>
<td>5000</td>
36
 E-Commerce Practical File | 00613788820, ANSHUL

</tr>
<tr>
<th colspan="3">SUBTOTAL</th>
<td>16900</td>
</tr>
<tr>
<th colspan="2">CGST</th>
<td>3.5%</td>
<td>591.5</td>
</tr>
<tr>
<th colspan="2">SGST</th>
<td>3.5%</td>
<td>591.5</td>
</tr>
<tr>
<th colspan="3">TOTAL</th>
<td>18083</td>
</tr>
</table>
</body>
</html>

Output:-

37
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-16

Q. Design the following webpage using <frameset> tag in HTML.

Ans.

Source code:-

<html>
<head>
<title>00613788820, Q16</title>
</head>
<frameset cols="33%,33%,33%">
<frame name="left" src="file:///C:/Users/AN/Desktop/fr1.HTM"/>
<frameset rows="50%,50%">
<frame name="center" src="file:///C:/Users/AN/Desktop/fr2%20.HTM"/>
<frame name="right" src="file:///C:/Users/AN/Desktop/fr3%20.HTM"/>

</frameset>
<frame name="right" src="file:///C:/Users/AN/Desktop/fr4.HTM"/>
</html>

38
 E-Commerce Practical File | 00613788820, ANSHUL

Output:-

39
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-17

Q. Design the following webpage using frameborder, noresize, marginwidth and margin height
attributes of <frame> tag in HTML.

Ans.

Source code:-

<html>
<head>
<title>00613788820, Q17 </title>
</head>
<frameset rows="50%,50%">
<frame name="upper"src="file:///C:/Users/AN/Desktop/frame%201.htm">
<frameset cols="33%,33%,34%">
<frame name="left" src="file:///C:/Users/AN/Desktop/frame%202.htm">
<frame name="center" src="file:///C:/Users/AN/Desktop/frame%203.htm">
<frame name="right" src="file:///C:/Users/AN/Desktop/frame%204.htm">
</frameset>
</html>

Output:-

40
 E-Commerce Practical File | 00613788820, ANSHUL

41
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-18

Q. Design the webpage which shows the implementation of navigation frames.

Ans.

Source code:-

<html>
<head>
<title>question18</title>
</head>
<frameset cols="30%,70%">

<frame src="file:///C:/Users/AN/Desktop/part%201.htm" name="right"></frame>

<frame src="file:///C:/Users/AN/Desktop/part%20b.htm" name="left">

</frameset>

</html>

42
 E-Commerce Practical File | 00613788820, ANSHUL

Output:-

43
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-19

Q. Design website of IITM for given format using frame tag.

Institute of Information Technology

and Management
Affiliation Details
About Us
Faculty Content about IITM.
Detail Here
Programs
Offered

© Copyright Act
Developed By: Developer Name

Ans.

Source code:-

<html>
<frameset rows ="30%,60%, *">
<frame src ="Top page.html"name="Top page"/>
<frameset cols="20%, *">
<frame src ="navigationalbar.html"name="navigationalbar"/>
<frame src ="iitm.html"name="About Us"/>
<frame src ="courses.htm"name="Programs Offered"/>
</frameset>
<frame src="copy.html"name="copy"/>
</frameset>
</html>

44
 E-Commerce Practical File | 00613788820, ANSHUL

Final output:-

Output after clicking on “About Us”

45
 E-Commerce Practical File | 00613788820, ANSHUL

Output after clicking on “Faculty Details”

46
 E-Commerce Practical File | 00613788820, ANSHUL

Output after clicking on “Programs Offered”:-

47
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-20

Q. Create a webpage to embed multimedia component in HTML.

Ans.

Source code:-

<html>
<head>
<title>00613788820, Q20</title>
</head>
<body>
<h1> Multimedia files </h1>
<video width="600" height="340"src="kid cudi/day n nite.mp4">
</video>
<audio controls>
<source src="Jungle Casio.mp3" type="audio/mp3">
</audio>
</body>
</html>

Output (for video and audio):-

48
 E-Commerce Practical File | 00613788820, ANSHUL

49
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-21

Q. Create a webpage to embed YouTube video in HTML.

Ans.

Source code:-

<html>
<head>
<title> 00613788820, Q21 </title>
<body>
<h1> Embedded YT video </h1>
<iframe width="420" height="345" src="https://www.youtube.com/embed/z-8oYk8K_C8">
</iframe>
</body>
</html>

Output:-

50
 E-Commerce Practical File | 00613788820, ANSHUL

51
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-22

Q. Create a registration form using form tag in HTML.

Ans.

Source code:-
<html>
<head>
<title> 00613788820, Q22 </title>
</head>
<body>
<h1> Registration Form </h1>
<form>
<label for="fname">First name: </label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name: </label><br>
<input type="text" id="lname" name="lname"><br>
<label for="class">Class: </label><br>
<input type="text" id="class" name="class"><br>
<label for="address">Address: </label><br>
<input type="text" id="address" name="address"><br>
<label for="phno">Phone No: </label><br>
<input type="text" id="phno" name="phno"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Output:-

52
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-23

Q. Create a form in HTML to take feedback of customer for the service of a restaurant.
Ans.

Source code:-
<html>
<head>
<title> 00613788820, Q23 </title>
</head>
<body bgcolor="#D6CC99">
<meta name="viewport" content="width=device-width, initial-scale=1">
<h1> Fish n Chips Feedback Form </h1>
<style>
*{
box-sizing: border-box;
}

input[type=text], select, textarea {

width: 100%;
padding: 12px;
border: 1px solid rgb(70, 68, 68);
border-radius: 4px;
resize: vertical;
}
input[type=email], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid rgb(70, 68, 68);
border-radius: 4px;
resize: vertical;
}

label {
padding: 12px 12px 12px 0;
display: inline-block;
}

input[type=submit] {
background-color: rgb(37, 116, 161);
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;

53
 E-Commerce Practical File | 00613788820, ANSHUL

cursor: pointer;
float: right;
}

input[type=submit]:hover {
background-color: #45a049;
}

.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}

.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}

.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}

.row:after {
content: "";
display: table;
clear: both;
}

</style>
</head>
<body>
<div class="container">
<form>
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
54
 E-Commerce Practical File | 00613788820, ANSHUL

<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="email">Email Id</label>
</div>
<div class="col-75">
<input type="email" id="email" name="emailid" placeholder="Your email id..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="none">Select Country</option>
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
<option value="russia">Russia</option>
<option value="japan">Japan</option>
<option value="india">India</option>
<option value="china">China</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="feed_back">Feed Back</label>
</div>
<div class="col-75">
<textarea id="subject" name="subject" placeholder="Write something.."
style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">

55
 E-Commerce Practical File | 00613788820, ANSHUL

</div>
</form>
</div>
</body>
</html>

Output:-

56
 E-Commerce Practical File | 00613788820, ANSHUL

PRACTICAL-24

Q. Create a University Website having at least three pages. Pages should consist of enquiry,
admission, examination and result, etc.
Ans.

Source code:-
<html>
<head>
<title> 00613788820, Q24 </title>
</head>
<body>
<h1> XYZ University </h1>
<p> Welcome to our homepage! </p>
<nav>
<ul>
<li><a href="enquiry.html">Enquiry</a></li>
<li><a href="admission.html">Admission</a></li>
<li><a href="examination.html">Result</a></li>
</ul>
</nav>
<body>
</html>

Output:-

57
 E-Commerce Practical File | 00613788820, ANSHUL

58