Sem 2 E-COMMERCE

Practical File
E-COMMERCE LAB
Bachelor of Business Administration (BBA -111)
Guru Gobind Singh Indraprastha University, Delhi
Submitted To:Submitted By:

Mr. Gautam Kumar NAMAN GUPTA
(Assistant Professor, IT Department)Enroll. No.35721101720
Mr. Ashish NayyarClass – BBA E2

(Associate Professor, IT Department) Batch: 2020-2023
Institute of Information Technology & Management,

Approved By AICTE
Affiliated to Guru Gobind Singh Indraprastha University, Dwarka, New Delhi
New Delhi – 1100 58
Batch (2020-2023)
INDEX
S.NO. PRACTICAL NAME PAGE NO. DATE SIGN
1. Write down brief history of web browser, 1-4 19.05.2021
search engine and HTML
2. Create a web page which displays a message 5 19.05.2021

“This is my first web page” using different
level of headings.
3. Create a web page using HTML 6-7 24.05.2021

demonstrating all the attributes of Body tag,
Font tag and Paragraph tag.
4. 8-10 24.05.2021
Create web page using HTML and write three
paragraph about leadership skills using three
container tag & two empty tag.
5. Write a HTML code to print the quadratic 11 26.05.2021

equation as follows:
6. Wite a HTML code which display the 12 26.05.2021

following expression. Put the heading as
“Chemical Equation”
7. Create a web page describing you. Use <block 13-14 26.05.2021

quote> to display address, for sub headings
<pre> tag and use <em> tag wherever you are
using numbers.
8. Create a webpage describing your friend, 15-16 31.05.2021

where default font size should be 20 and
friend name should be moving front and
back.
9. Write a html code to display the information 17-18 02.06.2021

about your house using order lists
(like feature of your house, vehicles you own
etc) and also write the code to display the
10. 18-20 02.06.2021

Write HTML code to produce the following
output:
Fruits & Vegetables
11. Write code for following list 21-22 02.06.2021
12. Write a HTML code to insert 3 images 23-25 07.06.2021

aligned left, center and right
with the help of adjusting height and width of
image. Also change the
background color as pink of the web page.
Give a proper heading for
the web page.
13. Design a document containing image map. 26-27 09.06.2021
14 Insert an image in a document and link it to 28-29 09.06.2021

some other page.
15 Create a static page of astrology site and use 30-32 14.06.2021

hyperlink to open the horoscope of different
zodiac sign.
16 Create a webpage to add audio and video clip 33-39 16.06.2021

and embed a youtube video in html page
17 Create a webpage to add audio and video clip 40-41 21.06.2021

and embed a youtube video in html page
18 Create a table using html and write the marks 42-45 21.06.2021
of 10 students
19 Display table with the given format with 46-47 23.06.2021

Image & Hyperlink.
20 Display table with the given format with row 48-50 23.06.2021
span &colspan.
21 Create a nested table with proper html 51-52 28.06.2021

coding.
22 Create college website using frame set. 53-54 30.06.2021
23 Create form using html 55-58 12.07.2021

24 Create a hyperlink with different colors. 59-61 14.07.2021
Naman GuptaE-Commerce35721101720
PRACTICAL-1
Write down brief history of web browser, search engine and HTML
Theory:
HISTORY OF WEB BROWSER- In 1984, expanding on ideas from futurist TED NELSON
Neil Larson's commercial DOS Maxthink outline program added[ angle bracket hypertext jumps
(adopted by later web browsers) to and from ASCII, batch, and other Maxthink files up to 32 levels
deep. In 1986, he released his DOS Houdini knowledge network program that supported 2500
topics cross-connected with 7500 links in each file along with hypertext links among unlimited
numbers of external ASCII, batch, and other Houdini files, these capabilities were included in his
then popular shareware DOS file browser programs HyperRez (memory resident) and PC
Hypertext (which also added jumps to programs, editors, graphic files containing hot spots jumps,
and cross-linked thesaurus/glossary files). These programs introduced many to the browser
concept and 20 years later, Google still lists 3,000,000 references to PC Hypertext. In 1989, Larson
created both HyperBBS and HyperLan[17] which both allow multiple users to create/edit both
topics and jumps for information and knowledge annealing which, in concept, the columnist John
C. Dvorak says pre-dated Wiki by many years.
WEB BROWSER- A web browser (commonly referred to as a browser) is application software

for accessing the World Wide Web. When a user requests a web page from a particular website,
the web browser retrieves the necessary content from a web server and then displays the page on
the user's device.
A web browser is not the same thing as a search engine though the two are often confused.[1][2] A
search engine is a website that provides links to other websites. However, to connect to a website's
server and display its web pages, a user must have a web browser installed.[3]
Web browsers are used on a range of devices, including desktops, laptops, tablets,
and smartphones
Some commonly used web browsers are
 GOOGLE CHROME
 MOZILLA FIREFOX
 UC BROWSER
 INTERNET EXPLORER
 OPERA MINI
 SAFARI
1
SEARCH ENGINE- A search engine is a software system that is designed to carry out web
searches (Internet searches), which means to search the World Wide Web in a systematic way
for particular information specified in a textual web search query. The search results are generally
presented in a line of results, often referred to as search engine results pages (SERPs) The
information may be a mix of links to web pages, images, videos, infographics, articles, research
papers, and other types of files. Some search engines also mine data available in databases or open
directories. Unlike web directories, which are maintained only by human editors, search engines
also maintain real-time information by running an algorithm on a web crawler. Internet content
that is not capable of being searched by a web search engine is generally described as the deep web.
HISTORY-The first internet search engines predate the debut of the Web in December 1990: Who
is user search dates back to 1982,[5] and the Knowbot Information Service multi-network user
search was first implemented in 1989.[6] The first well documented search engine that searched
content files, namely FTP files, was Archie, which debuted on 10 September 1990.[7]
Prior to September 1993, the World Wide Web was entirely indexed by hand. There was a list
of webservers edited by Tim Berners-Lee and hosted on the CERN webserver. One snapshot of
the list in 1992 remains,[8] but as more and more web servers went online the central list could no
longer keep up. On the NCSA site, new servers were announced under the title "What's New!"[9]
The first tool used for searching content (as opposed to users) on the Internet was Archie.[10] The
name stands for "archive" without the "v".,[11] It was created by Alan Emtage[11][12][13][14] computer
science student at McGill University in Montreal, Quebec, Canada. The program downloaded the
directory listings of all the files located on public anonymous FTP (File Transfer Protocol) sites,
creating a searchable database of file names; however, Archie Search Engine did not index the
contents of these sites since the amount of data was so limited it could be readily searched
manually.
2
The rise of Gopher (created in 1991 by Mark McCahill at the University of Minnesota) led to two
new search programs, Veronica and Jughead. Like Archie, they searched the file names and titles
stored in Gopher index systems. Veronica (Very Easy Rodent-Oriented Net-wide Index
to Computerized Archives) provided a keyword search of most Gopher menu titles in the entire
Gopher listings. Jughead (Jonzy's Universal Gopher Hierarchy Excavation And Display) was a
tool for obtaining menu information from specific Gopher servers. While the name of the search
engine "Archie Search Engine" was not a reference to the Archie comic book series, "Veronica"
and "Jughead" are characters in the series, thus referencing their predecessor.
HTML HISTORY- In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and
prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989,
Berners-Lee wrote a memo proposing an Internet-based hypertext system.[3] Berners-Lee
specified HTML and wrote the browser and server software in late 1990. That year, Berners-Lee
and CERN data systems engineer Robert Cailliau collaborated on a joint request for funding, but
the project was not formally adopted by CERN. In his personal notes[4] from 1990 he
listed[5] "some of the many areas in which hypertext is used" and put an encyclopedia first.
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.[6][7] 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 Markup Language (SGML)
-based documentation format at CERN. Eleven of these elements still exist in HTML 4.[8]
HTML is a markup language that web browsers use to interpret and compose text, images, and
other material into visual or audible web pages. Default characteristics for every item of HTML
markup are defined in the browser, and these characteristics can be altered or enhanced by the web
page designer's additional use of CSS. Many of the text elements are found in the 1988 ISO
technical report TR 9537 Techniques for using SGML, which in turn covers the features of early
text formatting languages such as that used by the RUNOFF command developed in the early
1960s for the CTSS (Compatible Time-Sharing System) operating system: these formatting
commands were derived from the commands used by typesetters to manually format documents.
3
However, the SGML concept of generalized markup is based on elements (nested annotated ranges
with attributes) rather than merely print effects, with also the separation of structure and markup;
HTML has been progressively moved in this direction with CSS.
HTML-The HyperText Markup Language, or 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 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 elements are the building blocks of HTML pages. With HTML constructs, images and
other objects such as interactive forms may be embedded into the rendered page. 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 into 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, which affects the
behavior and content of web pages. Inclusion of CSS defines the look and layout of content.
The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer
of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since
1997.[2]
PRACTICAL-2
Create a web page which displays a message “This is my first web page” using different
level of headings.
Source code:
4
<html>
<head>
<title>prac 1</title>
</head>
<body>
<h1>This is my first web page</h1>
</body>
</html>
OUTPUT:
Practical-3
Create a web page using HTML demonstrating all the attributes of Body tag, Font tag and
Paragraph tag.
SOURCE CODE:
<html>
<head>
<title>Practical No.3 </title>
5
</head>
<body bgcolor="yellow">
<br>
<p align="center">
<font face= "Monotype Corsiva" size= "5" color="red">Ecommerce is buying and selling of good
and services via the
Incomplete the sales it also known as electronic commerce or internet commerce</font></p>
<p align="left">
<font face= "Monotype Corsiva" size= "5" color="blue">These services provided online over the
internet network. Transaction of money, funds, and data are also considered as E-commerce. These
business transactions can be done in four ways: Business to Business (B2B), Business to Customer
(B2C), Customer to Customer (C2C), Customer to Business (C2B). The standard definition of E-
commerce is a commercial transaction which is happened over the internet. Online stores like
Amazon, Flipkart, Shopify, Myntra, Ebay, Quikr, Olx are examples of E-commerce websites. By
2020, global retail e-commerce can reach up to $27 Trillion.
Let us learn in detail about what is the advantages and disadvantages of E-commerce and its
types</font></p>
<p align="left">
<font face= "Monotype Corsiva" size= "5" color="green">E-commerce is a popular term for
electronic commerce or even internet commerce. The name is self-explanatory, it is the meeting of
buyers and sellers on the internet.
This involves the transaction of goods and services, the transfer of funds and the exchange of
data</font></p>
</body>
</html>
OUTPUT:
6
7
Practical No.-4
Create web page using HTML and write three paragraph about leadership
skills using three container tag & two empty tag.
Source code:
<html>
<head>
<title>LeadershipSkills</title>
<style>
body { background-color: pink; }
</style>
</head>
<body>
<center>
<u><b><h1 style="color:orange;"> Leadership Skills</h1></b></u>
</center>
<center><h1 style="color:blue; font-family:Harlow Solid;">What Are the
Characteristics of a Good Leader?</h1></center>
<center><img src="C:\Users\sakshi\Desktop/leadership.jpeg" width=35%
height=35%></center>
<p style="font-family: Lucida Console; font-size:20px; color:PURPLE;
background-color:white">
Leaders shape our nations, communities, and organizations. We need good
leaders to help guide us and make the essential large-scale decisions that keep
the world moving.
</p>
<h2>Integrity</h2>
<p>The importance of integrity should be obvious. Though it may not
necessarily be a metric in employee evaluations, integrity is essential for the
individual and the organization. It’s especially important for top-level
executives who are charting the organization’s course and making countless
other significant decisions. Our research shows that integrity may actually be
a potential blind spot for organizations. Make sure your organization
reinforces the importance of integrity to leaders at various levels.
</p>
<h2>Ability to Delegate</h2>
<p>
8
Delegating is one of the core responsibilities of a leader, but it can be tricky to
delegate effectively. The goal isn’t just to free yourself up — it’s also to
enable your direct reports, facilitate teamwork, provide autonomy, lead to
better decision-making, and help your direct reports grow. In order to delegate
well, you also need to build trust with your team.
</p>
<h2>Communication</h2>
<p>
Effective leadership and effective communication are intertwined. You need
to be able to communicate in a variety of ways, from transmitting information
to coaching your people. And you must be able to listen to, and communicate
with, a wide range of people across roles, social identities, and more. The
quality and effectiveness of communication across your organization directly
affect the success of your business strategy, too. Learn how better
conversations can actually improve your organizational culture.
</p>
<h2>Self-Awareness</h2>
<p>
While this is a more inwardly focused skill, self-awareness is paramount for
leadership. The better you understand yourself, the more effective you can be.
Do you know how other people view you or how you show up at work.
</p>
</body>
</html>
9
OUTPUT:
Practical No. 5
Write a HTML code to print the quadratic equation as follows:
10
In mathematics, a quadratic equation is a polynomial equation of the second degree. The
general form is
ax2+bx+c = 0
where a ≠ 0. (For if a = 0, the equation becomes a linear equation
Solution:
<html>
<head>
<title>Quadratic equation</title>
</head>
<body>
<p>In mathematics, a quadratic equation is a polynomial equation of the second degree. The
general form is</p>
<br>
ax<sup>2</sup>+bx+c=0
<br></br>
where a ≠ 0. (For if a = 0, the equation becomes a linear equation)
</body>
</html>
OUTPUT:
11
Practical No. 6
Wite a 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
Solution:
<html>
<head>
<title>chemical equation</title>
</head>
<h1>Chemical equation</h1>
<b>4H<SUB>3</SUB>PO<SUB>3</SUB> =
4H<Sub>3</sub>PO<sub>4</sub>+PH<sub>3</sub></b>
<br></br>
and other expression as
<br></br>
<b>P<sub>new</sub>=P<sub>old</sub>+ x<sup>2</sup>-y<sup>acosx</sup></b>
</html>
OUTPUT:
Practical No. 7
Create a web page describing you. Use <block quote> to display address, for sub headings
<pre> tag and use <em> tag wherever you are using numbers.
SOURCE CODE:
12
<html>
<head>
<title>practical-7</title>
</head>
<body bgcolor="Orange">
<h1 style="font-family:AR ESSENCE; color:GREEN;">NAME-NAMAN GUPTA</h1>
<h2 style="font-family:Forte; font size="7" color="blue"><b><u>ABOUT ME
</b></u></font></h2>
<p style="font-family: Lucida Console; font-size:20px; color:PURPLE;">
Myself NAMAN GUPTA. I have done my schooling from <em>DELHI PUBLIC SCHOOL,REWARI.</em>
I did my +2 in commerce stream. And now i have pursued <em>BBA</em>from IPU.
I want to do MBA in future and my <em>strength</em> is confidence and leadership skills
and i think my <em>weakesses</em> is too polite gesture.
I love listening music and i really love to learn new languages.</p>
<blockquote>ADDRESS: SECTOR 3,REWARI</blockquote>
<blockquote>GMAIL:- namangupta0537@gmail.com </blockquote>
<blockquote>CONTACT: 8168659036</blockquote>
</body>
</html>
13
PRACTICAL-8
14
Create a webpage describing your friend, where default font size should be 20 and friend
name should be moving front and back.
Assign suitable background color and text color
<html>
<head>
<title>My Friend</title>
<style>
marquee{
font-size:20px;
font-weight:800;
color:red;
font-family: sans-serif;
}
</style>
</head>
<body>
<marquee direction="left"bgcolor=green height=50px>My Friend name is Anmol
Kataria</marquee>
<p><font size="6">A close friend isn’t necessarily a best friend, but he or she is
someone you include in your inner circle. They can be someone you don’t see often but,
for various reasons, hold in high regard. It’s someone you cherish, think of fondly, and no
matter what you do or where you are in your life, you’d drop everything to be at their
side if they needed you.</font></P>
</body>
</html>
15
PRACTICAL-9
16
Write a html code to display the information about your house using order lists
(like feature of your house, vehicles you own etc) and also write the code to display the
Name of planets using different type of unordered lists
Solution:
<html>
<head>
<title>Practical 9</title>
</head>
<body>
<body bgcolor="lightblue">
<h1 style="font-family:Lucida Calligraphy; color:magenta;">
Some information about my house</h1>
<ol type="1">
<ol style="color:blue; font-family:Lucida Handwriting;">
<li>Apartment</li>
<li>3<sup>nd</sup> floor</li>
<li>3 Bedrooms</li>
<li>Kitchen</li>
<li>Dining hall</li>
<li>Drawing room</li>
</ol>
<h1 style="font-family:Lucida Calligraphy; color:Green;">Names of PLANETS</h1>
<ul style="color:orange; font-family:Lucida Handwriting;">
<ul type="disc">
<li>Mercury</li></ul>
<ul type="circle">
<li>venus</li></ul>
<ul type="square">
<li>Earth</li></ul>
<ul type="disc">
<li>Jupitar</li></ul>
<ul type="circle">
<li>Mars</li>
</ul>
<ul type="square">
17
OUTPUT:
18
PRACTICAL NO-10
Write HTML code to produce the following output:

Fruits & Vegetables
C. Vegetables
 Onion
 Potato
D.
 Fruits Mango
 Grapes
SOURCE CODE:-
<html>
<head>
<title>P 10</title>
</head>
<body bgcolor="lightblue">
<h3><u>FRUITS AND VEGETABLES</u></h3>
<ol type="A" start="3">
<li>Vegetables
<ul type="disc">
<li>Onion</li>
<li>Potato</li>
</li>
</ul>
</ol>
<ol type="A" start="4">
<li>fruits
<ul type="disc">
<li>mango</li>
<li>grapes</li>
</li>
</ul>
</ol>
</body>
</html>
19
OUTPUT:
20
PRACTICAL-11
Write code for following list
.Newspaper
5. TOI
6. HT
7. Navbharat times
.Magazines
(i) The Week

(ii) India today
Solution:
<html>
<head>
</head>
<body bgcolor=yellow>
<ul type=disc>
<li>Newspaper</li>
<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>
21
OUTPUT:
22
Practical No. 12
Write a HTML code to insert 3 images aligned left, center and right
with the help of adjusting height and width of image. Also change the
background color as pink of the web page. Give a proper heading for
the web page.
SOURCE CODE:
<html>
<head>
</head>
<body>
<body bgcolor="pink">
<center><font color=purple size=20px family="Algerian">SOCIAL MEDIA
ICONS</h1></font></center>
<hr>
<img src="C:\Users\sakshi\Desktop/facebook-logo-3.png" alt="facebook"
height="300" width="400"
align="left" border="2px solid black">
<img src="C:\Users\sakshi\Desktop/insta.jpeg" alt="instagram" height="300"
width="400" align="right"
border="2px double black">
<center><img src="C:\Users\sakshi\Desktop/twitter.png" alt="twitter"
border="2px solid black"></center>
</body>
</html>
23
OUTPUT:
<html>
<head>
</head>
<body>
<style>
body {
background-image: url("F:\wallpaper/computer-wallpaper-
1920x1200.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
}
p{ margin-left:40px;
font-size:25px;
font-stretch:expanded;
color:white;
24
}
</style>
<center><font color=pink size=20px family="Algerian">SOCIAL MEDIA
ICONS</h1></font></center>
<hr>
<img src="C:\Users\sakshi\Desktop/facebook-logo-3.png" alt="facebook"
align="left" border="2px solid black">
<img src="C:\Users\sakshi\Desktop/insta.jpeg" alt="instagram"
height="200" width="300" align="right"
border="2px double black">
<center><img src="C:\Users\sakshi\Desktop/twitter.png" alt="twitter"
border="2px solid black"></center>
</body>
</html>
Output
25
26
PRACTICAL-13
Design a document containing image map.
SOURCE CODE:
<html>
<head>
<title>USEMAP</title>
</head>
<body>
<img src="E:/New folder/india.jpg" alt="india"usemap="#mymap"
width="1000 height="1194">
<map name="mymap">
<area shape="circle" coords="318,334,3" alt="delhi" href="https://en.wikipedia.org/wiki/Delhi">
<area shape="rect" coords="13,507,164,644" alt="gujrat"

href="https://en.wikipedia.org/wiki/Gujarat">
</map>
27
PRACTICAL-14
28
Insert an image in a document and link it to some other page.
SOURCE CODE
<HTML>
<head>
<title>
p 14
</title>
</head>
<style>
body {
background-image: url("F:\wallpaper/computer-wallpaper-1920x1200.jpg");
}
p{ margin-left:40px;
font-size:25px;
font-stretch:expanded;
color:white;
}
</style>
<p><center><font color="pink" family="Lucida

Calligraphy"><h1>INSTAGRAM</h1></Center></font>
<a href="https://www.instagram.com/" target="_blank"><center><img
src="C:\Users\sakshi\Desktop/insta.jpeg" border=4></center></a>
</body>
</html>
OUTPUT
29
PRACTICAL-15
Create a static page of astrology site and use hyperlink to open the horoscope of different
zodiac sign.
SOURCE CODE:
<html>
<head>
<title>
Practical 15
30
</title>
</head>
<style>
body {
background-image: url("F:\wallpaper/sky.jpg");
}
</style>
<center><font color="lightpink"><h1>ZODIAC SIGNS</h1></center>
<a href="aqua.html" target="_blank"><center><img
src="C:\Users\naman\Desktop\zodiac/aquarius.jpeg" height=200 width=200></a>
<a href="aries.html" target="_blank"><img src="C:\Users\naman\Desktop\zodiac/aries.jpeg"
height=200 width=200></a>
<a href="gemini.html" target="_blank"><img
src="C:\Users\naman\Desktop\zodiac/gemini.jpeg"height=200 width=200></a>
<a href="cancer.html" target="_blank"><img src="C:\Users\naman\Desktop\zodiac/cancer.jpeg"
height=200 width=200></a></center>
<br>
<a href="capricorn.html" target="_blank"><center><img
src="C:\Users\naman\Desktop\zodiac/capricon.jpeg" height=200 width=200></a>
<a href="pisces.html" target="_blank"><img
src="C:\Users\naman\Desktop\zodiac/pisces.jpeg"height=200 width=200></a>
<a href="sagittarius.html" target="_blank"><img
src="C:\Users\naman\Desktop\zodiac/saggitarus.jpeg"height=200 width=200>
<a href="leo.html" target="_blank"><img
src="C:\Users\naman\Desktop\zodiac/leo.jpeg"height=200 width=200></a></center>
<br>
<a href="libra.html" target="_blank"><center><img
src="C:\Users\naman\Desktop\zodiac/libra.jpeg"height=200 width=200></a>
<a href="scorpio.html" target="_blank"><img
src="C:\Users\naman\Desktop\zodiac/scorpio.jpeg"height=200 width=200></a>
<a href="taurus.html" target="_blank"><img
src="C:\Users\naman\Desktop\zodiac/taurus.jpeg"height=200 width=200></a>
<a href="virgo.html" target="_blank"><img
src="C:\Users\naman\Desktop\zodiac/virgo.jpeg"height=200 width=200></a></center>
<br>
</body>
</html>
OUTPUT:
31
32
PRACTICAL-16
33
Develop html which display your name as heading and display the name of your any 4
friends in a list and each friend name should be highlighted and when you click on its
name another html file must open which tell about your friend.
SOURCE CODE:
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>friends</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Benne&family=Dancing+Script&family=De
la+Gothic+One&family=Staatliches&display=swap"
rel="stylesheet">
<style>
a{color: white;}
table {
border: 2px double;
text-align: center;
margin: auto;
padding: 5px;
outline: 2px double red;
background-color: red;
}
td {
background-color: black;
color: white;
border: 2px double red;
font-size: 35px;
outline: 2px solid black;
}
th {
font-family: 'Dela Gothic One', cursive;
color: peachpuff;
border: 2px double red;
font-size: 60px;
blue;
}
34
.img {
background-image: url('img2.jpg');
height: 320px;
width: 1920px;
display:
}
body {
background-size: 100% 100%;
background-attachment: fixed;
}
h2 {
font-family: 'Dancing Script', cursive;
color: darkgray;
flex;
justify-content: center;
font-size: 90px;
margin-top: 0;
}
</style>
</head>
<body>
<div class="heading">
<h2 data-text="Sakshi Sinha"> Sakshi Sinha</h2>
</div>
<table>
<tr>
<th>My friends</th>
</tr>
<tr>
<td>
<a href="vardan.html">Vardan Chawla</a> </td>
</tr>
<tr>
<td><a href="anmol.html">Anmol Kataria</a></td>
</tr>
<tr>
<td><a href="daksh.html">Daksh Khatana</a></td>
</tr>
<tr>
35
<td><a href="lakshay.html">Lakshay Gupta</a></td>
</tr>
</table>
<div class="img">
shs
</div>
</body>
</html>
OUTPUT
 Coding for Hyperlink page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eshaan</title>
<style>
.img {
padding: 0%;
border: 2px solid red;
}
36
body {
}
p{
font-size: 30px;
}
img {
max-width: 50%;
height: auto;
}
h1 {
font-size: 50px;
}
.container {
border: 2px solid red;
margin: auto;
text-align: center;
height: 300px;
width: 800px;
color: white;
margin-top: 150px;
}
</style>
</head>
<body>
<div class="container">
<u>
<h1>Vardan Chawla</h1>
</u>
<p>
he is the type of person who calls it like you see it. he is very open and honest
he is also a very logical thinker when she is forced to
sit and figure out a problem. It requires a lot of him time and energy, but he is all
the better for it.
</p>
</div>
</body>
37
</html>
38
39
PRACTICAL-17
Create a webpage to add audio and video clip and embed a youtube video in html page
SOURCE CODE:
<html>
<head>
</head>
<style>
body {
background-image: url("skyy.jpg");
}
</style>
<font color=lightpink>
<u><h1 align="center" color=lightpink>AUDIO FILES</h1></u>
<center>
<audio controls>
<source src="birds.mp3" type="audio/mpeg">
</audio>
</center><br>
<center>
<u><h1 align="center">VIDEO FILES</h1></u>
<video height=320 width=240 controls>
<source src="Mountains - 48873.mp4" type="video/mp4">
</video>
</center>
<br>
<center>
<font color=blue>
<u><h1 align="center">YOUTUBE VIDEO</h1></u>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/OHAWwaYu2H0" title="YouTube video
player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</center>
</body>
</html>
40
OUTPUT:
PRACTICAL-18
41
Create a table using html and writethe marks of 10 students
<HTML>
<head>
</head>
<style>
body {
background-image: url("wall.jpg");
}
.container {
position: relative;
}
.topleft2 {
position: absolute;
top: 18px;
left: 20px;
font-family:daggersquare;
font-size:30px;
color:white;
}
.topleft4 {
position: absolute;
top: 138px;
left: 20px;
font-size:12px;
color:white;
}
img {
width: 100%;
height: auto;
opacity: 0.8;
}
.h2 {
font-family:daggersquare;
font-size:30px;
42
color:black;
}
table,th,td {
border: 1px solid white;
font-weight:bold;
border-collapse:collapse;
color:white;
background-color: purple;
padding:12px;
}
th {
height:40px;
}
</style>
<center>
<table BORDER="5">
<caption>STUDENT DATA</CAPTION>
<tr>
<th>S NO.</Th>
<th>NAME</Th>
<Th>MARKS</Th>
</TR>
<TR>
<TD>1</TD>
<TD>NAMAN</TD>
<Td>90</TD>
</TR>
<TR>
<TD>2</TD>
<TD>MUSKAN</TD>
<TD>80</TD>
</TR>
<TR>
<TD>2</TD>
<TD>PIYUSH</TD>
<TD>95</TD>
</TR>
43
<TR>
<TD>3</TD>
<TD>VARDAN</TD>
<TD>78</TD>
</TR>
<TR>
<TD>4</TD>
<TD>AYUSHI</TD>
<TD>86</TD>
</TR>
<TR>
<TD>5</TD>
<TD>SRISHTI</TD>
<TD>89</TD>
</TR>
<TR>
<TD>6</TD>
<TD>DAKSH</TD>
<TD>67</TD>
</TR>
<TR>
<TD>7</TD>
<TD>KALASH</TD>
<TD>70</TD>
</TR>
<TR>
<TD>8</TD>
<TD>ROHIT</TD>
<TD>90</TD>
</TR>
<TR>
<TD>9</TD>
<TD>OM</TD>
<TD>99</TD>
</TR>
<TR>
<TD>10</TD>
<TD>HARSH</TD>
<TD>55</TD>
</TR>
</TABLE>
44
</font>
</BODY>
</HTML>
45
PRACTICAL-19
Display table with the given format with Image & Hyperlink.
<Html>
<head>
<title>Image and hyperlink with table</title>
</head>
<body>
<style>
body {
color:green;
}
</style>
<center>
<table border= 2px bordercolor=green bgcolor=lightblue height=30% width=40%>
<caption><font color=pink size=12> Student record</font></caption>
<tr>
<th> NO. </th>
<th> Image </th>
<th>First name</th>
<th>Last name</th>
<th>Age</th>
<th>Hobby</th>
</tr>
<tr>
<td> 1 </td>
<td><img src="dance.jpeg" height=120 width=230></td>
<td>Vardan</td>
<td>Chawla</td>
<td>18</td>
<td><a href="https://en.wikipedia.org/wiki/Dance" target="_blank">Dance</a></td>
</tr>
<tr>
<td>2</td>
<td><img src="swim.jpg" height=120 width=230></td>
<td>Piyush</td>
<td>Gupta</td>
<td>20</td>
<td><a href="https://en.wikipedia.org/wiki/Swimming" target="_blank">Swimming</a></td>
</tr>
<td>3</td>
<td><img src="sing.jpg" height=120 width=230></td>
<td>Naman</td>
46
<td>Gupta</td>
<td>19</td>
<td><a href="https://en.wikipedia.org/wiki/Singing" target="_blank">Singing</a></td>
</tr>
</table>
</body>
</html>
OUTPUT :
47
Practical No. 20
Display table with the given format with row span & colspan.
SOURCE CODE:
<Html>
<head>
<title>Image and hyperlink with table</title>
</head>
<body>
<style>
body {
color:blue;
}
</style>
<center>
<table border= 2px bordercolor=green bgcolor=lightblue height=70% width=70%>
<caption><font color=pink size=12>Class Time Table- BBA II E2(Batch 2020-
23)</font></caption>
<tr>
<th>Time </th>
<th> Monday </th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td>8:30-9:30</td>
<Td></td>
<Td></td>
<Td></td>
<Td></td>
<Td></td>
<Td></td>
</tr>
<tr>
<td>9:30-10:30</td>
<Td></td>
<Td></td>
<Td></td>
<Td></td>
48
<Td></td>
<Td></td>
</tr>
<tr>
<td>10:30-11:30</td>
<Td></td>
<Td></td>
<Td></td>
<Td></td>
<Td></td>
<Td></td>
</tr>
<tr>
<td>11:30-12:30</td>
<td>CA/SR</TD>
<td>BC/MAS</td>
<td>CA/SR</TD>
<td>EComm/GK</td>
<td>EComm/GK</td>
<td>EComm/GK</td>
</tr>
<tr>
<td>12:30-1:30</td>
<td rowspan=2>Ecomm lab/GK,AN</td>
<td>Ecomm/GK</td>
<td rowspan=2>EComm lab/GK,AN</td>
<td>BC/MAS</td>
<td>QT/MS</td>
<td>BC/MAS</td>
</TR>
<TR>
<TD>1:30-2:30</TD>
<td>QT/MS</TD>
<TD>BEnv/SW</TD>
<TD>BEnv/SW</TD>
<TD>QT/MS</TD>
</TR>
<TR>
<td>2:30-3:30</td>
<td Colspan=6><CENTER>Break<CENTER></td>
</tr>
<tr>
<td>3:30-4:30</td>
<td>BEnv/SW</td>
<td>BEnv/SW</td>
<td>QT/MS</td>
<td>CA/SR</td>
<td>CA/SR</td>
49
<TD></TD>
</TR>
<TR>
<TD>4:30-5:30</TD>
<Td></td>
<Td></td>
<Td></td>
<Td></td>
<Td></td>
<Td></td>
</tr>
</table>
</body>
</html>
OUTPUT:
50
PRACTICAL-21
Create a nested table with proper html coding.
<html>
<body>
<table border=5 bordercolor = red>
<tr>
<td>
<table border=5 bordercolor=black>
<tr><td>
First Nested Table
</tr></td>
</table>
</td>
<td>
<table border=18 border color=pink>
<tr><td>
<ul>
<li>VB.Net</li>
<li>Csharp</li>
<li>Asp.Net</li>
<ul>
</tr></td>
</table>
</td>
51
</tr>
<tr>
<td><center>
<table border=5 bordercolor=pink>
<tr><td>
<a href="https://en.wikipedia.org/wiki/Google_Chrome">About</a>
</td></tr>
</table>
</td>
<td>
<table border=5 bordercolor=yellow>
<tr><td>
<img src="E:/New folder/chrome.jpg" height=100 width=100>
</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
52
PRACTICAL-22
Create college website using frame set.
53
SOURCE CODE:
<html>
<head>
</head>
<frameset rows="20%, 70%, 10% frameborder="2">
<frame src="top.
html" name="f1"/>
<frameset cols="30%, 70% frameborder="2">
<frame src="menu.html" name="f2a"/><br>
<frame src="ABOUT US.HTML" name="f2b"/><br>
</frameset>
<frame src="bottom.html" name="f3"/>
</frameset>
</body>
</html>
54
OUTPUT:
55
PRACTICAL-23
SOURCE CODE:
<html>
<head>
<title>
p23
</title>
</head>
<style>
body {font-family: Times New Roman, Helwetica, sans-serif;}
{box-sizing: border-box;}
input[type=text], select, textarea {
width: 100%;
padding: 16px;
border: 1px solid #ccc;
border-radius: 4px;
margin-top: 6px;
margin-bottom: 16px;
input[type=Submit] {
background-color: #04AA6D;
color: white;
padding:10px;
border-radius:px
cursor: pointer;
input[type=Submit]:hover {
background-color: #45a849;
56
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
</style>
<body>
<h3>Contact Form</h3>
<div class="container">
<form>
<label for="fname">First Name</label>
<input type=text id= "1name" name="firstname" placeholder= "Your first name..">
<label for="fname">Last Name</label>
<input type=text id= "1name" name="lastname" placeholder= "Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="" disabled selected hidden>Select country name...</option>
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<label for="Birthday">Date:</label>
<input type="date" id=date name=date><br><br>
<label for="subject">Subject:</label>
<textarea id="subject" name="subject" placeholder=Write something... style height:20px>
</textarea>
<input type="Submit" value="Submit">
</form>
57
</div>
</body>
</html>
OUTPUT:
PRACTICAL NO. 24
Create a HTML document and apply the following:
1.A:Link 2.A:visited 3.A:hover 4.A:active
SOURCE CODE:-
<html>
<head>
<style>
body {
background-color:blue;
}
a:link {
58
background-color: lightgreen;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: yellow;
font-size:150%;
}
a:active {
background-color: hotpink;
}
</style>
</head>
<body>
<h2>Select your Search Engine</h2>
<ul>
<li><a href="https://www.google.co.in/">Google</a></li>
<li><a href="https://www.yahoo.com/">Yahoo</a></li>
<li><a href="https://www.rediffmail.com/">Rediffmail</a></li>
<li><a href="https://www.msn.com/">MSN</a></li>
</ul>
<p><b>Note:</b>
CSSdefinition in order
a:hover
to be effective.</p>
MUST come after a:link and a:visited in the
<p><b>Note:</b>
to be effective.</p>a:active MUST come after a:hover in the CSS definition in order
</body>
</html>
OUTPUT-
59
60
61
62

Sem 2 E-COMMERCE

Uploaded by

Copyright:

Available Formats

You might also like

Sem 2 E-COMMERCE

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Sem 2 E-COMMERCE

Uploaded by

Copyright:

Available Formats

Practical File

Bachelor of Business Administration (BBA -111)

Guru Gobind Singh Indraprastha University, Delhi

Submitted To:Submitted By:

Mr. Ashish NayyarClass – BBA E2

Institute of Information Technology & Management,

2. Create a web page which displays a message 5 19.05.2021

3. Create a web page using HTML 6-7 24.05.2021

5. Write a HTML code to print the quadratic 11 26.05.2021

6. Wite a HTML code which display the 12 26.05.2021

7. Create a web page describing you. Use <block 13-14 26.05.2021

8. Create a webpage describing your friend, 15-16 31.05.2021

9. Write a html code to display the information 17-18 02.06.2021

10. 18-20 02.06.2021

11. Write code for following list 21-22 02.06.2021

12. Write a HTML code to insert 3 images 23-25 07.06.2021

13. Design a document containing image map. 26-27 09.06.2021

14 Insert an image in a document and link it to 28-29 09.06.2021

15 Create a static page of astrology site and use 30-32 14.06.2021

16 Create a webpage to add audio and video clip 33-39 16.06.2021

17 Create a webpage to add audio and video clip 40-41 21.06.2021

19 Display table with the given format with 46-47 23.06.2021

21 Create a nested table with proper html 51-52 28.06.2021

22 Create college website using frame set. 53-54 30.06.2021

23 Create form using html 55-58 12.07.2021

WEB BROWSER- A web browser (commonly referred to as a browser) is application software

4H3PO3 = 3H3PO4 + PH3

and other expression as

Pnew = Pold + x2 –y acosx

<h1 style="font-family:AR ESSENCE; color:GREEN;">NAME-NAMAN GUPTA</h1>

<h2 style="font-family:Forte; font size="7" color="blue"><b><u>ABOUT ME

<p style="font-family: Lucida Console; font-size:20px; color:PURPLE;">

I did my +2 in commerce stream. And now i have pursued <em>BBA</em>from IPU.

I want to do MBA in future and my <em>strength</em> is confidence and leadership skills

and i think my <em>weakesses</em> is too polite gesture.

I love listening music and i really love to learn new languages.</p>

<blockquote>ADDRESS: SECTOR 3,REWARI</blockquote>

<blockquote>GMAIL:- namangupta0537@gmail.com </blockquote>

Assign suitable background color and text color

Name of planets using different type of unordered lists

Write HTML code to produce the following output:

Write code for following list

(i) The Week

<img src="E:/New folder/india.jpg" alt="india"usemap="#mymap"

<area shape="circle" coords="318,334,3" alt="delhi" href="https://en.wikipedia.org/wiki/Delhi">

<area shape="rect" coords="13,507,164,644" alt="gujrat"

<p><center><font color="pink" family="Lucida

<a href="vardan.html">Vardan Chawla</a> </td>

 Coding for Hyperlink page

<table border=5 bordercolor = red>

<table border=5 bordercolor=black>

First Nested Table

<table border=18 border color=pink>

<table border=5 bordercolor=pink>

<table border=5 bordercolor=yellow>

<img src="E:/New folder/chrome.jpg" height=100 width=100>

Create college website using frame set.