E-commerce Lab work

LAB FILE
ON
E-Commerce LAB (BCOM 308)
Submitted in partial fulfillment of requirement of
Bachelor of Commerce (Hons.) (B.COM (H))
B.COM (H) VI Semester (Morning)
Batch 2018-2021
Submitted to: Submitted by:
Ms. Palak Gupta Pragya Bisht
Assistant Professor 41514188818
JAGANNATH INTERNATIONAL MANAGEMENT SCHOOL,
KALKAJI

STUDENT’S UNDERTAKING
I hereby certify that this is my original work and it has never been submitted elsewhere.
Name- Pragya Bisht
Enrollment Number- 41514188818

CERTIFICATE OF COMPLETION
This is to certify that Ms. Pragya Bisht of B.com (H) has completed her file on “E-Commerce
Lab” on her own. Her work is up to my satisfaction.
Ms. Palak Gupta
(Assistant Professor)

INDEX
SN QUESTIONS PAGE NO
1 What is a website 1
2 Discuss features of a good website 3
3 What is a browser? Discuss Online and Offline browsing 5
4 Explain Search Engine, its types and examples 7
5 What is HTML? Discuss other languages used for website designing 11
6 Discuss features of B2B Vs B2C website. Give examples. 14
7 Discuss all HTML Tags with syntax, examples and suitable attributes-
• Head
• Body
• Heading
• BR
• HR
• Marquee
• P
• Formatting Tags – B, I, U, Sup, Sub, Strike, Pre
• Font
• Ordered and Unordered List
• IMG
• Hyperlinks- Internal & External
16
8 Tables and Nested Tables 34
9 Frames & Nested Frames- code and web page 36
10 Forms- code and web page 38
11 E-Commerce web page – code and web page 43
12 Cloud Computing- code and web page 48
13 Assignment II- Japanese’s Animation-code and web page 53

1
Q-1 WHAT IS A WEBSITE?
The central page of a website is called a home page. This is usually the first page you see when
you call a website up and can also be called a ‘start page’ or ‘index page’. From here onwards, the
user delves into the site’s subpages. A site or website is a central location of web pages that are
related and accessed by visiting the home page of the website using a browser.
A digital web presence enables content such as texts, images, and videos to be displayed on the
internet. There are many reasons why business people need a representative website: to inform
potential customers about products and services, to represent the company, to enable contact with
different departments, or to distribute goods online. For private users, a website gives them the
chance to actively take part in public affairs. There are also personal sites that contain informative
material or are used for entertainment. An overview of the most popular sites can be found below.
By placing a link to your own website next to your social network profile, you increase the chances
of catching the attention of potential employers, interested parties, or like-minded people. For
example, the Computer Hope website address URL (Uniform Resource Locator)
is https://www.computerhope.com. From our home page, you could get access to any of the web
pages (like this one) contained on our website.

2
Types of websites
There are billions of websites on the Internet today that can be broken into one of the following
types of website categories. Keep in mind that it is possible for a website to fall into more than one
of the following categories.
• Business website.
• Community website.
• Content website
• Information website.
• Dating website.
• E-commerce website.
• Gaming website.
• Government website.
• Help and Q&A website
• Malicious website and so on….
These things are required in order to start getting your website built.
Domain name – A domain name is an identification string that defines a realm of administrative
autonomy, authority or control within the Internet. Domain names are used in various networking
contexts and for application-specific naming and addressing purposes. Example:
https://www.YourCompany.com
Hosting – it is the business of housing, serving, and maintaining files for one or more Web sites.
More important than the computer space that is provided for Web site files is the fast connection
to the Internet. Example: GoDaddy, Bluehost, 1 & 1
Platform – what your website is built on.” The platform is the foundation of your website, like
WordPress, Shopify, Site Builder, Wix
The content in the site – what are you going to write about
This is how a website works: Sites are built with tools – HTML, languages, and platforms. HTML
– which stands for Hypertext Markup Language – is primarily a “tagging” language. HTML tells
a web browser how to display things – basically translating code into a logical presentation.

3
Q-2 DISCUSS FEATURES OF A GOOD WEBSITE
Many businesses make the mistake of neglecting usability. Usability is critical for the success of
any website and should never be overlooked. Good usability can improve the performance of your
website and increase your chances of success.
The following are 8 essential characteristics of a user-friendly and a really good website:
1. Clear Navigation
A map is useless without a legend and a website is useless without clear navigation. Make sure
you use easy-to-understand and logical names for the various pages of your site — contact, about,
FAQ, etc. Being clever or cryptic will just be a turnoff for users.
2. Security
If you're selling anything online, you need to put some effort into securing your site with an SSL
certificate. The SSL will encrypt communications between you and your clients (i.e., a credit card
number, Social Security number), which will allay their fears of providing such information, since
there's so much identity theft on the web. VeriSign, TrustE, Entrust and GeoTrust are good
options to explore.
3. A Logical Roadmap
A website should be aesthetically pleasing, but it's more important for it to be useful. Before you
even pick a server or type an HTML tag, you should map out how you'd like the website to work.
This is important both for user experience and for SEO, since Google considers the content and
structure of a site when it ranks for search. So, map out and mock up a design for the site — what
designers call "wireframing" — and run it by a few friends to make sure it makes sense and is
intuitive. "If they can understand the logic, so will the people be visiting your website ... and
Google bots when ranking it!" says Pete Mills of web design consultancy Calls9
4. Mobile Compatibility
As more and more people use their mobile phones to access the Internet, creating a mobile
optimized website has become a necessity. The first step is to check how your existing website
appears on mobile. Can use Google mobile site tester to find this out.

4
5. Accessible to All Users
A user-friendly website should also be accessible to everyone including blind, disabled or the
elderly. These users typically use screen-readers to access the Internet. The 508 website
accessibility guidelines highlight simple web design techniques that can be applied to make sure
your website can be accessed easily on-screen readers, making your website available to a larger
audience.
6. Fast Load Times
Nothing is more annoying for website visitors than a website that takes long to load. In fact, slow
speed is one of the main reasons why visitors leave a website. Making sure your website loads
within 4 to 6 seconds is important for good usability. Customer expectations have changed
significantly in recent years. A typical customer will only wait for a few seconds for your page to
load, after which they will most likely navigate away to a competitor's site never to visit again.
7. Browser Consistency
Browser compatibility can be easily overlooked. This is bad for branding and has a negative effect
on website usability. It is important to ensure your website appears and behaves consistently across
all major browsers such as Chrome, Internet Explorer, Firefox, Safari and Opera. Simple things
like this set a professionally designed website apart from the rest.
8. FAQ
People have a lot of questions. As you hear concerns from customers and receive feedback via
email, gather up the most frequently asked questions into a list and offer clear, concise answers.

5
Q-3 WHAT IS A BROWSER? DISCUSS ONLINE AND OFFLINE BROWSING.
A browser is a software program that is used to explore, retrieve, and display the information
available on the World Wide Web. This information may be in the form of pictures, web pages,
videos, and other files that all are connected via hyperlinks and categorized with the help of URLs
(Uniform Resource Identifiers). For example, you are viewing this page by using a browser.
A browser is a client program as it runs on a user computer or mobile device and contacts the
webserver for the information requested by the user. The web server sends the data back to the
browser that displays the results on internet supported devices. On behalf of the users, the browser
sends requests to web servers all over the internet by using HTTP (Hypertext Transfer Protocol).
A browser requires a smartphone, computer, or tablet and internet to work.
List of current Internet browsers
• Google Chrome
• Microsoft Edge
• Microsoft Internet Explorer
• Mozilla Firefox
• Opera
• Apple Safari
• Amazon Silk
Online Browsing:
In computer technology and telecommunications, online indicates a state of connectivity.
In modern terminology this usually refers to an Internet connection, but (especially when
expressed "on line" or "on the line") could refer to any piece of equipment or functional unit that
is connected to a larger system. Being online means that the equipment or subsystem is connected,
or that it is ready for use.
"Online" has come to describe activities performed on and data available on the Internet, for
example: "online identity", "online predator", "online gambling", "online shopping", "online
banking", and "online learning". Similar meaning is also given by the prefixes "cyber" and "e", as
in the word’s "cyberspace", "cybercrime", "email", and "ecommerce".

6
Offline Brower’s:
Offline indicates a disconnected state. Offline browsers are also known as offline readers and
offline navigators. Offline browsers are used for viewing downloaded copies or content from
websites while not connected to the Internet. In contrast, "offline" can refer to either computing
activities performed while disconnected from the Internet, or alternatives to Internet activities
(such as shopping in brick-and-mortar stores). The term offline is sometimes used interchangeably
with the acronym "IRL", meaning "in real life".
They are used in offline website development and in email readers. Normal browsers may have an
offline mode that enables users to view and navigate through Web pages that have been
downloaded or stored in the browser’s cache memory. Offline browsers do not need an active
Internet connection, and are hence found to be useful in portable computers and dial-up access.
The differences between Online and Offline:
ONLINE OFFLINE
Online Mode requires an internet connection at
all times and allows you to run Job Manager on
several devices and on the web simultaneously.
Offline mode works without the internet, hence
the term "offline." All business data you enter into
Job Manager offline is saved on your mobile
device.
On-line (VFI) UPS systems are regarded as
'high-end'
Off-line (VFD) systems are usually low-cost
products
more sophisticated technology which uses a
rectifier and inverter, hence double-conversion.
designed for a simple one or two user PC
installations
This effectively isolates the load from virtually
all types of power supply problems.
they offer little or no protection against most
supply problems and really only give support for
short-term power loss.
In Online mode, data entered on all devices are
synchronized and saved in real time to the
Cloud.
Since data is saved locally on your device, only
one user at a time can access the information.

7
Q-4 EXPLAIN SEARCH ENGINE, ITS TYPES AND EXAMPLES
A search engine is a web-based tool that enables users to locate information on the World Wide
Web. Search Engine 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. Search engines utilize
automated software applications (referred to as robots, bots, or spiders) that travel along the Web,
following links from page to page, site to site. The information gathered by the spiders is used to
create a searchable index of the Web. Popular examples of search engines are Google, Yahoo!,
and MSN Search.
Search Engine Components are as follows:
• WEB CRAWLER
It is also known as spider or bots. It is a software component that traverses the web to gather
information. web crawler, or spider, is a type of bot that's typically operated by search engines like
Google and Bing. Their purpose is to index the content of websites all across the Internet so that
those websites can appear in search engine results. Crawlers can also be used for automating
maintenance tasks on a Web site, such as checking links or validating HTML code.
• DATABASE
A database is a collection of information that is organized so that it can be easily accessed,
managed and updated. All the information on the web is stored in database. It consists of huge web
resources. Computer databases typically contain aggregations of data records or files, containing
information about sales transactions or interactions with specific customers.
For example, a company database may include tables for products, employees, and financial
records.

8
• SEARCH INTERFACES
A search interface is the graphical user interface used by employees to search a data source.
A search interface can be developed for use on any device, from a mobile phone to a desktop
computer. This component is an interface between user and the database. It helps the user to search
through the database.
Some search interface examples: Swiftype, Algolia, Jira Atlassian, FullStory and many more….
Importance of Search Engines:
• Search engines are part of daily life for two types of people.
• Users who search and get information
Site owners who try to optimize their websites for getting top rank in the search results.
User do more than billions of searches only on Google to find relevant information. This opens
out a huge scope for businesses and online content publishers to attract people to their website for
free. Search engines follow guidelines and have their own algorithm to decide the ranking of
websites in search results. Optimizing websites for Google and other search engines is an essential
part of any website owner for reaching out the large audience. The visitors can generate revenue
for site owners either through advertisements displayed on the site or though purchasing products.
Different Types of Search Engines
Search engines are classified into the following three categories based on how it works.
1. Crawler based search engines
2. Human powered directories
3. Hybrid search engines
4. Other special search engines

9
Let discuss all types of search engines in detail in the following sections:
1. Crawling
Search engines crawl the whole web to fetch the web pages available. A piece of software
called crawler or bot or spider, performs the crawling of the entire web. The crawling frequency
depends on the search engine and it may take few days between crawls. This is the reason
sometimes you can see your old or deleted page content is showing in the search results. The search
results will show the new updated content, once the search engines crawl your site again.
Most of the popular search engines are crawler-based search engines and use the above technology
to display search results. Example of crawler-based search engines:
• Google • Bing • Yahoo! • Baidu • Yandex
Besides these popular search engines there are many other crawler-based search engines available
like DuckDuckGo, AOL and Ask.
2. Human Powered Directories
Human powered directories also referred as open directory system depends on human based
activities for listings. Below is how the indexing in human powered directories work:
➢ Site owner submits a short description of the site to the directory along with category it is to
be listed.
➢ Submitted site is then manually reviewed and added in the appropriate category or rejected
for listing.
➢ Keywords entered in a search box will be matched with the description of the sites. This means
the changes made to the content of a web pages are not taken into consideration as it is only
the description that matters.
➢ A good site with good content is more likely to be reviewed for free compared to a site with
poor content.
Yahoo! Web Directory and DMOZ were perfect examples of human powered directories.
Unfortunately, automated search engines like Google, wiped out all those human powered
directory style search engines out of the web.

10
3. Hybrid Search Engines
Hybrid Search Engines use both crawler based and manual indexing for listing the sites in search
results. Most of the crawler-based search engines like Google basically uses crawlers as a primary
mechanism and human powered directories as secondary mechanism. For example, Google may
take the description of a webpage from human powered directories and show in the search results.
As human powered directories are disappearing, hybrid types are becoming more and more
crawler-based search engines.
But still there are manual filtering of search result happening to remove the copied and spammy
sites. When a site is being identified for spammy activities, the website owner needs to take
corrective action and resubmit the site to search engines. The experts do manual review of the
submitted site before including it again in the search results. In this manner though the crawlers
control the processes, the control is manual to monitor and show the search results naturally.
4. Other Types of Search Engines
Besides the above three major types, search engines can be classified into many other categories
depending upon the usage. Below are some of the examples:
Search engines have different types of bots for exclusively displaying images, videos, news,
products and local listings. For example, Google News page can be used to search only news from
different newspapers.
Some of the search engines like Dogpile collects meta information of the pages from other search
engines and directories to display in the search results. This type of search engines is called
metasearch engines.
Semantic search engines like Swoogle provide accurate search results on specific area by
understanding the contextual meaning of the search queries.
Examples

11
Following are the several search engines available today:
Search Engine Description
Google It was originally called BackRub. It is the most popular search engine globally.
Bing It was launched in 2009 by Microsoft.
It is the latest web-based search engine that also delivers Yahoo’s results.
Ask It was launched in 1996 and was originally known as Ask Jeeves.
It includes support for match, dictionary, and conversation question.
AOL. Search It is powered by Google.
LYCOS It is top 5 internet portal and 13th largest online property according to Media
Matrix.

12
Q-5 WHAT IS HTML? DISCUSS OTHER LANGUAGES USED FOR WEBSITE
DESIGNING?
HTML stands for Hyper Text Markup Language. HTML is the standard markup language for
creating Web pages. It allows the user to create and structure sections, paragraphs, headings, links,
and blockquotes for web pages and applications.
HTML is not a programming language, meaning it doesn’t have the ability to create dynamic
functionality. Instead, it makes it possible to organize and format documents, similarly to
Microsoft Word.
Let's see what is meant by Hypertext Markup Language, and Web page.
Hyper Text:
Hypertext simply means "Text within Text." A text has a link within it, is a hypertext. Whenever
you click on a link which brings you to a new webpage, you have clicked on a hypertext. Hypertext
is a way to link two or more web pages (HTML documents) with each other.
An example of hypertext is the word "Facebook" that links to the Facebook page. ... See also
HTML, hyperlink, Internet, server, text, and WWW.
Markup language:
A markup language is a computer language that is used to apply layout and formatting conventions
to a text document. Markup language makes text more interactive and dynamic. It can turn text
into images, tables, links, etc. It is human-readable, meaning markup files contain standard words,
rather than typical programming syntax. While several markup languages exist, the two most
popular are HTML and XML
Web Page:
A web page is a document which is commonly written in HTML and translated by a web browser.
A web page can be identified by entering an URL. A Web page can be of the static or dynamic
type. With the help of HTML only, we can create static web pages.
Hence, HTML is a markup language which is used for creating attractive web pages with the help
of styling, and which looks in a nice format on a web browser. An HTML document is made of
many HTML tags and each HTML tag contains different content.

13
A Simple HTML Document Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph. </p>
</body>
</html>
Description of the above HTML Example:
➢ <!DOCTYPE>: It defines the document type or it instruct the browser about the version of
HTML.
➢ <html>: This tag informs the browser that it is an HTML document. Text between html tag
describes the web document. It is a container for all other elements of HTML except
<!DOCTYPE>
➢ <head>: It should be the first element inside the <html> element, which contains the metadata
(information about the document). It must be closed before the body tag opens.
➢ <title>: As its name suggested, it is used to add title of that HTML page which appears at the
top of the browser window. It must be placed inside the head tag and should close
immediately. (Optional)
➢ <body>: Text between body tag describes the body content of the page that is visible to the
end user. This tag contains the main content of the HTML document.
➢ <h1>: Text between <h1> tag describes the first level heading of the webpage.
➢ <p>: Text between <p> tag describes the paragraph of the webpage.

14
There is a variety of coding languages developers choose from, and most use the language they
are most comfortable with. Their preference is formed over time based on their experience using
different languages.
HERE ARE THE MOST COMMON LANGUAGES OTHER THAN HTML:
1. CSS
CSS is the language developers can use to style a website. The style sheet language describes how
your website is presented and its layout. CSS is used hand in hand with HTML to add colors,
backgrounds, layouts, font sizes, and more. This language is a core technology web developer use
to design and build websites.
2. JAVA
Java is the most popular web programming language. It is used to develop website content, games,
apps, and software. Java is used in the production of most Android apps. Studies have shown over
15 billion devices are using Java in some form or other. Java language is portable and can be run
on multiple software platforms.
3. JAVASCRIPT
JavaScript is used in many aspects of web development. Web developers use this language to add
interactive elements to their websites. User engagement is important to your business, and your
web developer should be incorporating JavaScript elements in your design.
4. PYTHON
Python is one of the easiest languages to use and work with. Python can create a framework for
basically any website need. This language uses simple and straightforward syntax, making it easy
for web developers to work with and explain to their users. Some familiar sites that are using this
language are Pinterest and Instagram.
5. SQL
SQL is a database query language that is used when your website is computing large amounts of
data. Using SQL allows you to gather data from different databases and use it to cater your website
to your target audience. This language is not used alone; instead, it is paired with others to get the
most out of your customer database and website development.

15
Q-6 DISCUSS FEATURES OF B2B VS B2C WEBSITE. GIVE EXAMPLES.
BASIS B2B WEBSITE B2C WEBSITE
Meaning
B2B Website on the other hand,
stands for ‘Business to Business
Website’, and is used to refer to
transactions between two companies.
So, a wholesale manufacturer selling
to a retailer is engaging in B2B
eCommerce.
B2C Website stands for ‘Business to
Customer Website’, it’s the concept that
most consumers will be familiar with.
When Target sells products via their
website, they’re engaging in B2C
eCommerce — because they’re selling to
customers
Buyer
Lifecycle
Contrast this with a typical B2B
purchase. A company looking for a
new piece of manufacturing
equipment to do the following:
➢ Have an internal meeting where
needs for new equipment are
discussed
➢ Assign an entry-level employee
to do initial research
➢ Entry-level employee browses 6
to 7 potential vendors
➢ Entry-level employee creates a
pros and cons list for each
➢ Entry-level employee sends
choices to manager and buyer in
the organization
➢ Manager and buyer both vet the 6
or 7 websites and decide on a top
3
➢ Entry-level employee fills out
lead form on top 3 websites
➢ Several weeks or months of
determining final purchase price,
delivery and implementation
planning, training, etc.
➢ Final close of sale
The typical sales cycle for B2C is much
shorter than for B2B. Selling straight-to-
consumer often happens within one
website browsing session.
For example, a customer looking for a
plumber might do the following within
twenty minutes:
➢ Check a couple local websites
➢ Read reviews on Yelp
➢ Revisit the website with quality
reviews
➢ Do a final glance at the website
➢ Call the plumber
➢ Set up an appointment

16
Overall
Buyer
Experience
B2B buyers are professionals that are
buying because it’s required for their
job. Your product is fulfilling a
specific company need. The buying
decision won’t be spur of the moment
but instead planned for. B2B buying
schedules are often synced up with
departmental needs.
In B2C stores the customer experience is
much different. They will be buying
because your product fulfills an emotional
need. B2C purchases are going to be driven
by desire and motivation. Fulfill a pressing
need and people will buy your product.
With B2C your website needs to be
streamlined to reduce any points of buyer
friction, such as difficulty in adding
products to the cart or having a lengthy
checkout process.
Decision
Maker
Most B2B orders are placed via a
committee or a team. It’s rare to be
dealing with a single decision maker
when selling B2B. Usually, you’ll
have multiple people who need to
approve the sale. One way to improve
your chances of landing the sale is
to provide the decision-maker with
all of the relevant materials needed to
make an educated decision.
With B2C the purchasing approval process
isn’t something you’ll have to worry about.
You’re dealing with a one-on-one
customer decision. This can make the
B2C sales process much faster, as all you’ll
need is a single person to pull out their
credit card to make the sale.
That is why in B2C you’ll see an emphasis
on persuasion tactics and getting people to
check out a “not to miss” offer more
directly.
Price
Discrepancies
In B2B organizations, prices are
customized and often negotiable. A
corporate buyer may be looking to
purchase 2,000 new business
computers, which may include
technical support, and perhaps even
system integration.
In the B2C environment, pricing is
generally very straightforward. Customers
looking to purchase a new computer visit a
website and are presented with a variety of
computers, all with a clearly stated, fixed
price.
Feature or
benefit-based
marketing
With B2B, the core focus will be on
what the product does and heavily
towards the features of the
product, instead of the benefits,
the business will receive.
B2C markets are more emotional in
nature, so your marketing will cater
more towards the benefits of the
product. The product’s message must be
simple, clear, and easy to understand.
Example
• Asana • Acme
• Dropbox • JimTrade
• TradeIndia • Evernote
• Amazon. • Walmart.
• Facebook. • Target.
• Tencent. • Alibaba.

17
Q-7 DISCUSS ALL HTML TAGS WITH SYNTAX, EXAMPLES AND SUITABLE
ATTRIBUTES-
➢ HEAD
In HTML, the head tag is used to contain specific information about a web page, often referred to
as metadata. Metadata is data about the HTML document. Metadata is not displayed. Metadata
typically define the document title, character set, styles, scripts, and other meta information. This
information includes things like the title of the document (which is mandatory), scripts or links to
scripts, and CSS files.
Syntax:
<head> <title>Title of the document</title> </head>
Attribute:
profile: It is used to specify the URL to a document which contains one or more meta data profiles
for browsers to clearly understand the information.
The <head> tag contains other head elements such as <title>, <meta>, <link>, <style> <link> etc.
Example:

18
➢ BODY
The body tag in HTML is used to define the main content present inside an HTML page. It is
always enclosed within html tag. The <body> tag is the last child of <html> tag. A body tag
contains starting as well as an ending tag.
Syntax:
<body> Body Contents... </body>
Attributes:
There are many attributes in the <body> tag which are listed below:
background: It contains the URL of the background image. It is used to set the background
image.
bgcolor: It is used to specify the background color of an image.
alink: It is used to specify the color of the active link.
link: It is used to specify the color of visited links.
text: It specifies the color of the text in a document.
vlink: It specifies the color of visited links.
Example:
CODE: OUTPUT:

19
➢ HEADING
There are six levels of headings defined by HTML. These six heading elements are H1, H2, H3,
H4, H5, and H6; with H1 being the highest level and H6 the least.
Importance of Heading:
➢ Search Engines use headings for indexing the structure and content of the webpage.
➢ Headings are used for highlighting important topics.
➢ They provide valuable information and tell us about the structure of the document.
Syntax:
<h1>This is heading 1</h1>
Attributes:
➢ Align (left, right, center, justify)
➢ This tag supports the Global Attributes which are: access key, translate, style, title, dropzone
and many more....
➢ The <h1> to <h6> tags also support the event attributes.
Example:
CODE: OUTPUT:

20
➢ BR
The <br> tag in HTML is used to give the single line break or produces a line break in text
(carriage-return). It is an empty tag so it does not contain an end tag. It is useful for writing a poem
or an address, where the division of lines is significant.
Syntax:
<br>
Attributes:
➢ This tag once accepts an attribute called clear,
➢ clear: Indicates where to begin the next line after the break.
CODE: OUTPUT:

21
➢ HR
The <hr> tag in HTML stands for horizontal rule and is used to insert a horizontal rule or a thematic
break in an HTML page to divide or separate document sections. The <hr> tag is an empty tag and
it does not require an end tag.
Syntax:
<hr> ......
Tag Attributes:
The table given below describe the <hr> tag attributes:
Attribute Value Description
Align
left
center
right
Used to specify the alignment
of the horizontal rule.
No-shade No-shade
Used to specify the bar
without shading effect.
size pixels
Used to specify the height of
the horizontal rule.
width pixels
Used to specify the width of
the horizontal rule.
Example:
CODE: OUTPUT:

22
➢ MARQUEE
The <marquee> tag in HTML is used to create scrolling text or image in a webpage. It
scrolls either from horizontally left to right or right to left, or vertically top to bottom
or bottom to top.
Syntax:
The marquee element comes in pairs. It means that the tag has opening and closing elements.
Attributes:
• Bgcolor
• Direction
• Loop
• Height
• Width
• Hspace
• Vspace
Example:
CODE: OUTPUT:

23
➢ P
The <p> tag in HTML defines a paragraph. These have both opening and closing tag. So,
anything mentioned within <p> and </p> is treated as a paragraph. Most browsers read a line
as a paragraph even if we don’t use the closing tag i.e., </p>, but this may raise unexpected
results. So, it is both a good convention and we must use the closing tag.
Syntax:
<p> Content </p>
Attribute:
Attribute Value
align left
right
centre
justify
Example:
CODE: OUTPUT:

24
➢ Formatting Tags – B, I, U, Sup, Sub, Strike, Pre
o B
Making text Bold or Strong: We can make the text bold using the <b> tag. The tag uses both
opening and closing tag. The text that needs to be made bold must be within <b> and </b> tag.
We can also use the <strong> tag to make the text strong, with added semantic importance. It also
opens with <strong> and ends with </strong> tag.
Syntax:
<b> Contents... </b>
Example:
CODE: OUTPUT:

25
o Font
The <font> tag plays an important role in the web page to create an attractive and readable web
page. The font tag is used to change the color, size, and style of a text. The base font tag is used to
set all the text to the same size, color and face.
The font tag has basically three attributes which are given below:
• Size
• Face/Type
• Color
font Size: This attribute is used to adjust the size of the text in the HTML document using font tag
with size attribute. The range of size of the font in HTML is from 1 to 7 and the default size is 3.
Syntax
<font size=" " color=" " face=" "> Content.... </font>
Attribute:
Attribute Value
color #xxxxx, color_name
face font_family
size number
CODE: OUTPUT:

26
o U:
The <u> tag in HTML stands for underline and it’s used to underline the text enclosed within the
<u> tag. This tag is generally used to underline misspelled words. This tag requires a starting as
well as ending tag.
Syntax:
<u> Contents... </u>
Example:
CODE: OUTPUT:
o SUP & SUB
Subscript: The <sub> tag is used to add a subscript text to the HTML document. The <sub> tag
defines the subscript text. Subscript text appears half a character below the normal line and is
sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like
H2O to be written as H2O.
Syntax:
<sub>contents…. </sub>

27
Superscript: The <sup> tag is used to add a superscript text to the HTML document. The <sup>
tag defines the superscript text. Superscript text appears half a character above the normal line
and is sometimes rendered in a smaller font. Superscript text can be used for footnotes.
Syntax:
<sup>Contents…. </sup>
Example:
CODE: OUTPUT:
o STRIKE:
Striking through the text: The <del> element is used to strike through the text marking the part as
deleted. It also has an opening and a closing tag. It defines a strike or line through Text. This tag
is depreciated from HTML 5. This tag creates a cut line in the text. Now <del> tag is used instead
of this tag.
Syntax:
<strike> Contents... </strike>
Example:
CODE: OUTPUT:

28
o PRE
The <pre> tag in HTML is used to define the block of preformatted text which preserves the text
spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers. Text
in the <pre> element is displayed in a fixed-width font, but it can be changed using CSS. The
<pre> tag requires a starting and end tag.
Syntax:
<pre> Contents... </pre>
CODE: OUTPUT:

29
➢ ORDERED AND UNORDERED LIST
Lists in HTML offers three ways for specifying lists of information. All lists must contain one or
more list elements. The types of lists that can be used in HTML are:
• ul: An unordered list. This will list items using plain bullets.
• ol: An ordered list. This will use different schemes of numbers to list your items.
• dl: A definition list. This arranges your items in the same way as they are arranged in a
dictionary.
Syntax: <li type="1|a|A|i|I|disc|circle|square">
The HTML Ordered List
An ordered list starts with the “ol” tag. Each list item starts with the “li” tag. The list items are
marked with numbers by default.
Syntax:
<ol> List of items </ol>
Attributes:
type="A"; type="1"; type="a”; type="I”; type="i"
The Unordered HTML List
An unordered list starts with the “ul” tag. Each list item starts with the “li” tag. The list items are
marked with bullets i.e., small black circles by default.
Syntax:
<ul> List of items </ul>
Attributes:
type=" disc"; type=" circle"; type=" square";

31
➢ IMG
Earlier, the webpages used to comprise of only texts, which made them appear quite boring and
uninteresting. Fortunately, it wasn’t long enough that the ability to embed images on web pages
was added for users. Let’s see how to add images on a webpage.
Adding images on a webpage:
The “img” tag is used to add images on a webpage. The “img” tag is an empty tag, which means
it can contain only a list of attributes and it has no closing tag.
Syntax:
<img src="url" alt="some_text">
Attribute:
src: src stands for source. Every image has a src attribute which tells the browser where to find the
image you want to display. The URL of the image provided points to the location where the image
is stored.
alt: If the image cannot be displayed then the alt attribute acts as an alternative description for the
image. The value of the alt attribute is a user-defined text.
Example:
CODE: OUTPUT:

32
➢ HYPERLINKS- INTERNAL & EXTERNAL
It is a connection from one web resource to another. A link has two ends, An anchor and direction.
The link starts at the “source” anchor and points to the “destination” anchor, which may be any
Web resource such as an image, a video clip, a sound bite, a program, an HTML document or an
element within an HTML document.
Link Syntax
Links are specified in HTML using the “a” tag.
Internal Links
An internal link is a type of hyperlink whose target or destination is a resource, such as an image
or document, on the same website or domain. Since the other pages that are part of the same web
application are hosted using the same domain name, there is usually no need to use absolute URLs
for the href attribute value. An internal link is a type of hyperlink on a web page to another page
or resource, such as an image or document, on the same website or domain.
Syntax:
<a href="#url">link text</a>
Example:
CODE: OUTPUT:

33
External Links
The HTML External Resource Link element (<link>) specifies relationships between the
current document and an external resource. This element is most commonly used to link
to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the
home screen and apps on mobile devices) among other things. The <a> tag indicates where the
hyperlink starts and the </a> tag indicates where it ends. Whatever text gets added inside these
tags, will work as a hyperlink. Add the URL for the link in the <a href=””>. Just keep in mind that
you should use the <a>…</a> tags inside <body>…</body> tags.
Syntax:
<a href="/about/about_team.htm">
Example:
CODE: OUTPUT:

34
Attributes of Internal & External Links:
Attribute Value Description
charset charset Defines the character encoding of the linked document.
href URL Specifies the URL of the resource document.
hreflang language Language code of the destination URL
rel alternate
appendix
bookmark
chapter
contents
copyright
glossary
help
home
stylesheet
subsection
Describes the relationship between the current document and the
destination URL.
rev alternate
appendix
bookmark
chapter
contents
home
index
next
g
section
start
stylesheet
subsection
Describes a reverse between the destination URI and the current
document.
sizes Height x Width Specifies the size of the linked resource.
target blank
_self
_top
_parent
Specifies the target frame to load the page into.
type mime type The MIME type of content at the link destination

35
Q-8 TABLES AND NESTED TABLES
A table is a set of data that is distributed across rows and cells. Most cells host tabular data, and
the rest contain headers for rows and columns that describe the content.
To create a table in an HTML document, use the <table> tag, which is the container that contains
the entire contents of the table. Creating a table always starts with the rows that are defined using
the <tr> tag, and each row in turn consists of cells. The <tr> tag can contain only tags for creating
cells.
In HTML there are two different tags for creating cells, the first of them is <td>, it creates regular
cells with data. By default, the contents of the <td> tags are aligned to the left. The second tag for
creating cells is a <th> tag, it allows you to define cells that contain headers for columns or rows,
the contents of such cells are displayed in bold text and aligned in the center.
The <td> and <th> tags can include any HTML elements that are available for use in the body of
the document.
In HTML, one can create nested tables, that is, tables that are located inside other tables. To make
a nested table, you need to put the code of the table that you want to nest inside any <td> tag. For
example, take the table we have already created and put this code in the second cell of the second
row:

36
The nested table in HTML means creating a table on a webpage inside another table on the same
web page. It can have several rows for each row of its parent table. ... They are one column
database tables where the rows of a nested table are not stored in a particular order. The largest,
most complicated tables will often involve “nesting” individual tables inside one another to get the
desired layout. This is tricky, due to the number of tags you have to juggle, and get in the right
order. Here’s a simple example of a nested table:
First cell in first table. The cell to the
right has the second table in it.
nested table
nested table
The code to create that, basically, goes like this (the second table code is indented):
Note: The inner table always has to be placed between the <td> .......... </td> of the outer table.

37
Q-9 FRAMES & NESTED FRAMES- CODE AND WEB PAGE
HTML frames are used to divide your browser window into multiple sections where each section
can load a separate HTML document. A collection of frames in the browser window is known as
a frameset. The window is divided into frames in a similar way the tables are organized: into rows
and columns.
Frame’s code:
Frames Web Page:

38
This element specifies a frameset which has been nested within another frameset within a Word
processing ML document. This Word processing ML element is analogous to
the frameset element in HTML (when that frameset is the child of another frameset element).
Nested Frames- code:
Nested Frames- Web page:

39
Q-10 FORMS- CODE AND WEB PAGE
A webform, web form or HTML form on a web page allows a user to enter data that is sent to a
server for processing. Forms can resemble paper or database forms because web users fill out the
forms using checkboxes, radio buttons, or text fields.
An HTML form is used to collect user input. The user input is most often sent to a server for
processing.
FORMS- CODE:

42
Q-11 E-COMMERCE WEB PAGE – CODE AND WEB PAGE
E-Commerce web page – code:

46
E-Commerce web page – Web Page:

48
Q12 CLOUD COMPUTING- CODE AND WEB PAGE
CODE:

53
Q-13 WEB SITE OF YOUR CHOICE- CODE AND WEB PAGE
CODE:

E-commerce Lab work

More Related Content

What's hot

Similar to E-commerce Lab work

More from Pragya Bisht

Recently uploaded

E-commerce Lab work