E-Commerce Technology Infrastructure

IT8005 – Electronic Commerce
IV Year / VIII Semester

OBJECTIVES
 To understand the Technology, infrastructure and Business in E-
Commerce.
 To learn the E-Commerce Platform and its concepts.
 To understand the Security and Challenges in E-Commerce.
 To build an Own E-Commerce using Open Source Frameworks.
 To know the different business model key components and
developing a E-Commerce using platforms.

UNIT I INTRODUCTION TO E-COMMERCE
AND TECHNOLOGY INFRASTRUCTURE
Working of Web - HTML Markup for
Structure - Creating simple page - Marking up
text - Adding Links - Adding Images - Table
Markup - Forms - HTML5.

E - Commerce
E-commerce involves the use of the Internet,
the World Wide Web (Web), and mobile apps
and browsers running on mobile devices to
transact business.

Working of Web
 Internet:
 An interconnected network of thousands of networks and
millions of computers linking businesses, educational
institutions, government agencies, and individuals.
 The Internet provides services such as e-mail, apps,
newsgroups, shopping, research, instant messaging, music,
videos, and news.

Working of Web
 Web:
 Internet’s most popular services, providing access to
billions, perhaps trillions, of web pages, which are
documents created in a programming language called
HTML that can contain text, graphics, audio, video,
and other objects, as well as “hyperlinks” that permit
users to jump easily from one page to another.

Trends in E-Commerce Infrastructure
 Business:
 Mobile devices become the primary access point to social
network services and a rapidly expanding social marketing and
advertising platform.
 create a foundation for location-based web services and business
models.
 Explosion of Internet content services and mobile access
devices.

 Business:
 The growth in cloud computing and bandwidth capacity enables
new business models for distributing music, movies, and
television.
 Search becomes more social and local, enabling social and local
commerce business models.
 Big data creates new business opportunities for firms with the
analytic capability.

 Technology:
 Mobile devices have become the dominant mode of access to
the Internet.
 Cloud computing reshapes computing and storage.
 The Internet runs out of IPv4 addresses; the transition to IPv6
continues.
 The Internet of Things, with millions of sensor-equipped
devices connecting to the Internet.

 Technology
 Augmented reality and virtual reality hardware begin to
gain grip.
 Funding of artificial intelligence technologies explode to
consumer-oriented personal assistants.
 HTML5: visually rich and lively as native mobile apps.

 Society:
 Government control over, and surveillance of, the Internet is
expanded in most advanced nations, and in many nations the
Internet is nearly completely controlled by government agencies.
 The growing infrastructure for tracking online and mobile
consumer behavior conflicts with individual claims to privacy
and control over personal information

Evolution of the Internet
 Phases:
 Innovation ( 1961 – 1974)
 Institutionalization (1975 – 1995)
 Commercialization ( 1995 to the present)

 Phases - Innovation ( 1961 – 1974):
 Introduction of packet-switching hardware, a
communications protocol called TCP/ IP, and
client/server computing.
 The Internet’s original purpose was to link large
mainframe computers on different college campuses.

 Phases – Institutionalization ( 1975 – 1995):
 The U.S. Department of Defense (DoD) and the
National Science Foundation (NSF) provided
funding and legitimization for the fledging
Internet.

 Phases – Institutionalization ( 1975 – 1995):
 The DoD contributed $1 million to further
develop them into a robust military
communications system.
 In 1986, the NSF assumed responsibility for the
development of a civilian Internet.

 Phases – Commercialization( 1995 to the
present):
 Private corporations to take over and expand the
Internet backbone as well as local service beyond
military installations and college campuses to the
rest of the population around the world.

Development of the Internet
Timeline
 1961 - Packet switching is born.
 1973 - Client/server computing is invented.
 1974 - TCP/IP invented
 1984 – hyperlinked introduced
 1984 - Domain Name System (DNS) introduced.

Development of the Internet
Timeline
 1989 - HTML pages is born.
 1994 - The beginning of e-commerce.
 2009 - Internet-enabled smartphones become a
major new web access platform.
 2013 - The Internet of Things (IoT) starts to
become a reality.

Webpage, Website, Web Server and
Search Engine
 Web Page:
 A document which can be displayed in a web
browser such as Firefox, Google Chrome.
 These are also often called just "pages."

Search Engine
 Website:
 A collection of web pages which are grouped
together and usually connected together in various
ways. Often called a "web site" or a "site."

Search Engine
 Web Server:
 A computer that hosts a website on the Internet.
 Search Engine:
 A web service that helps to find other web pages, such as Google,
Bing, Yahoo.
 Search engines are normally accessed through a web browser (e.g.
perform search engine searches directly in the address bar of Firefox,
Chrome, etc.) or through a web page.

The Internet: Key Technology
Concepts
 Internet as a network that uses the IP addressing
scheme, supports the Transmission Control
Protocol (TCP), and makes services available to
users much like a telephone system makes voice
and data services available to the public.

Concepts
 Packet Switching:
 A method of slicing digital messages into discrete
units called packets.
 Then, sending the packets along different
communication paths as they become available, and
then reassembling the packets once they arrive at their
destination.

Concepts
 In packet-switched networks, messages are first broken
down into packets.
 Appended to each packet are digital codes that indicate a
source address (the origination point) and a destination
address, as well as sequencing information and error
control information for the packet.

Concepts

Concepts
 In circuit-switched networks such as the telephone
system, a complete point-to-point circuit is put
together, and then communication can proceed.
 “Dedicated” circuit-switching techniques were
expensive and wasted available communications
capacity.

Concepts
 Rather than being sent directly to the destination address, in a
packet network, the packets travel from computer to computer
until they reach their destination. These computers are called
routers.
 A router is a special purpose computer that interconnects the
different computer networks that make up the Internet and routes
packets along to their ultimate destination as they travel.

Concepts
 To ensure that packets take the best available path toward their
destination, routers use a computer program called a routing
algorithm.
 Packet switching makes nearly full use of almost all available
communication lines and capacity.
 If some lines are disabled or too busy, the packets can be sent on
any available line that eventually leads to the destination point.

Concepts
Circuit Switching Packet Switching
Each data unit know the entire path
address which is provided by the source.
Each data unit just know the final
destination address intermediate path is
decided by the routers.
Data is processed at source system only Data is processed at all intermediate node
including source system.
Reserve the entire bandwidth in advance Does not reserve.
Circuit switching is more reliable. Packet switching is less reliable.
Wastage of resources are more in Circuit
Switching
Less wastage of resources as compared to
Circuit Switching
It is not a store and forward technique. It is a store and forward technique.

Concepts
 Transmission Control Protocol/Internet Protocol
(TCP/IP):
 Protocol - a set of rules and standards for data transfer
 To govern the formatting, ordering, compressing, and error-
checking of messages.
 Transmission Control Protocol/Internet Protocol (TCP/IP) has
become the core communications protocol for the Internet.

Concepts
 Transmission Control Protocol/Internet Protocol (TCP/IP):
 TCP establishes the connections among sending and receiving
computers, and makes sure that packets sent by one computer are
received in the same sequence by the other, without any packets
missing.
 IP provides the Internet’s addressing scheme and is responsible
for the actual delivery of the packets.

Concepts
 Transmission Control Protocol/Internet
Protocol (TCP/IP):

Concepts
 Transmission Control Protocol/Internet Protocol
(TCP/IP):
 Network Interface Layer: Placing packets on and
receiving them from the network medium.
 The Internet Layer is responsible for addressing,
packaging, and routing messages on the Internet.

Concepts
 Transmission Control Protocol/Internet Protocol (TCP/IP):
 The Transport Layer is responsible for providing
communication with other protocols (applications) within the
TCP/IP protocol suite by acknowledging and sequencing the
packets to and from the applications.
 The Application Layer includes a variety of protocols used to
provide user services or exchange data.

Concepts
 IP Addresses – Versions:
 IPv4 Internet address is a 32-bit number that appears
as a series of four separate numbers marked off by
periods, such as 64.49.254.91.
 The first three sets of numbers identify the network
and the last number identifies a specific computer.

Concepts
 IP Addresses – Versions:
 An IPv6 Internet address is 128 bits, so it can
support up to 2128 (3.4×1038) addresses, many
more than IPv4.

Domain Names, DNS and URLs
 Domain Names:
 Domain names are a key part of the Internet
infrastructure.
 They provide a human-readable address for any web server
available on the Internet.
 Any Internet-connected computer can be reached through a
public IP address, either an IPv4 address or an IPv6
address.

 Domain Names, DNS and URLs:
 Computers can handle such addresses easily, but
people have a hard time finding out who's running
the server or what service the website offers.
 IP addresses are hard to remember and might
change over time.

Structure of domain names:
 A domain name has a simple structure made of
several parts, separated by dots and read from right
to left: developer.mozilla.org
 where, org , mozilla – label 1, developer – label 2.

Structure of domain names:

Structure of domain names – Top Level Domain:
 The general purpose of the service behind the domain
name.
 TLDs containing .gov are only allowed to be used by
government departments.
 The .edu TLD is only for use by educational and
academic institutions.

Structure of domain names – Label:
 A label is a case-insensitive character
sequence anywhere from one to sixty-three characters
in length.
 It contains only the letters A through Z, digits 0
through 9, and the – character.
 Example: a, 97 and kncet-it-final-year

 Finding an available domain name
 Most of them provide a “whois” service that tells
you whether a domain name is available.

 URL:
 Uniform Resource Locator
 The address used by a web browser to identify the
location of content on the Web.
 Example:http://www.kongunadu.ac.in/kongunadu-
departments/btech-it/profile.html

 URL:
 http – protocol - Usually for websites it is the HTTP
protocol or its secured version, HTTPS.
 www.kongunadu.ac.in – Domain Name, it indicates
which Web server is being requested.
 /kongunadu-departments/btech-it/profile.html – path
to the file.

Client/Server Computing
 Clients are the typical web user's internet-connected devices
and web-accessing software available on those devices.
 Servers are computers that store webpages, sites, or apps.
 When a client device wants to access a webpage, a copy of
the webpage is downloaded from the server onto the client
machine to be displayed in the user's web browser.

 The New Client: The Mobile Platform:
 The primary means of accessing the Internet is now
through highly portable smartphones and tablet computers,
and not traditional desktop or laptop PCs.
 The primary platform for e-commerce products and
services is also changing to a mobile platform.
 Few smartphones use Intel chips, which power 90% of the
world’s PCs.

 Cloud Computing:
 A model of computing in which computer processing,
storage, software, and other services are provided as a
shared pool of virtualized resources over the Internet.
 These “clouds” of computing resources can be
accessed on an as-needed basis from any connected
device and location.

 Cloud Computing – Characteristics:
 On-demand self-service - server time or network
storage as needed automatically on their own
 Ubiquitous network access - Cloud resources can
be accessed using standard network and Internet
devices, including mobile platforms.

 Cloud Computing – Characteristics:
 Location-independent resource pooling - Computing resources are
pooled to serve multiple users, with different virtual resources
dynamically assigned according to user demand.
 Rapid elasticity - Computing resources can be rapidly provisioned,
increased, or decreased to meet changing user demand.
 Measured service - Charges for cloud resources are based on the
amount of resources actually used.

 Cloud Computing – Services:
 Infrastructure as a service (IaaS)
 Software as a service (SaaS)
 Platform as a service (PaaS)

 Cloud Computing – Services – IaaS:
 Customers use processing, storage, networking, and other computing
resources.
 Example: Amazon Web Services.
 Storage: Simple Storage Service (S3)
 Database: SimpleDB
 Analytics: Kinesis( real-time processing of streaming large amount
of data per second)
 Messaging: Simple Email Service, Simple Notification Service

 Cloud Computing – Services – SaaS:
 Customers use software hosted by the vendor on
the vendor’s cloud infrastructure and delivered as a
service over a network.
 Example: Google Workspace (formerly
GSuite) Dropbox. Salesforce. Cisco WebEx.

 Cloud Computing – Services – PaaS:
 Customers use infrastructure and programming
tools supported by the CSP to develop their own
applications.
 Example: Windows Azure

 Cloud Computing – Public Cloud:
 It is owned and maintained by CSPs and made available to
multiple customers, who pay only for the resources they
use.
 Organizations purchase their computing services from
remote providers and pay only for the amount of computing
power they actually use.
 Example: Google, Amazon and Microsoft

 Cloud Computing – Private Cloud:
 Private cloud solutions are dedicated to one organization or business,
and often have much more specific security controls than a public
cloud.
 It might be managed by the organization or a third party and hosted
either internally or externally.
 Like public clouds, private clouds can allocate storage, computing
power, or other resources seamlessly to provide computing resources
on an as-needed basis.

 Cloud Computing – Hybrid Cloud:
 A blend of public and private clouds.
 An example of a hybrid cloud solution is an
organization that wants to keep confidential
information secured on their private cloud, but make
more general, customer-facing content on a public
cloud.

Internet Protocols and Utility
Programs
 It provides services to users in the form of
Internet applications that run on Internet clients
and servers.
 These Internet services are based on universally
accepted protocols—or standards— that are
available to everyone who uses the Internet.

Programs
 HyperText Transfer Protocol (HTTP):
 The Internet protocol used to transfer web pages.
 HTTP runs in the Application Layer of the TCP/IP model.
 An HTTP session begins when a client’s browser
requests a resource, such as a web page, from a remote
Internet server.
 When the server responds by sending the page requested,
the HTTP session for that object ends.

Programs
 HyperText Transfer Protocol (HTTP):
 Web pages may have many objects on them—
graphics, sound or video files, frames, and so
forth—each object must be requested by a separate
HTTP message.

Programs
 Simple Mail Transfer Protocol (SMTP):
 E-mail is one of the oldest, most important, and
frequently used Internet services.
 The Internet protocol used to send e-mail to a server.
 SMTP is a relatively simple, text-based protocol that
was developed in the early 1980s.

Programs
 Simple Mail Transfer Protocol (SMTP):
 SMTP handles only the sending of e-mail.
 To retrieve e-mail from a server, the client computer
uses either Post Office Protocol 3 (POP3) or Internet
Message Access Protocol (IMAP).
 IMAP allows users to search, organize, and filter their
mail prior to downloading it from the server.

Programs
 File Transfer Protocol (FTP):
 FTP runs in TCP/IP’s Application Layer and
permits users to transfer files from a server to their
client computer, and vice versa.
 FTP is the fastest and most convenient way to
transfer files larger than 1 megabyte.

Programs
 Telnet:
 A network protocol that also runs in TCP/IP’s
Application Layer.
 To allow remote login on another computer.
 Telnet provides the client part of the protocol and
enables the client to emulate a mainframe computer
terminal.

Programs
 Secure Sockets Layer (SSL)/Transport Layer Security
(TLS):
 They operate between the Transport and Application
Layers of TCP/IP and secure communications between
the client and the server.
 SSL/TLS helps secure e-commerce communications and
payments through a variety of techniques, such as message
encryption and digital signatures.

Programs
 Packet InterNet Groper (Ping):
 A utility program that allows you to check the
connection between a client computer and a TCP/IP
network.
 Ping will also tell you the time it takes for the server
to respond, giving you some idea about the speed of
the server and the Internet at that moment.

HTML
 HyperText Markup Language:
 It is a medium for the website to communicate with the
browser.
 The browser reads the markup language and then displays
the website according to that.
 The same website runs on various browsers, but the
markup language ensures that it looks the same in all the
systems.

HTML - History
 Tim Berners-Lee developed HTML in late 1989, and
he is considered as the Father of HTML.
 In 1996, the World Wide Web Consortium (W3C)
became the authority to maintain the HTML
specifications.
 HTML became an international standard (ISO) in 2000.

HTML - Versions
 HTML - 1991
 HTML 2.0 - 1995
 HTML 3.2 - 1997
 HTML 4.01 - 1999
 XHTML - 2000
 HTML 5 - 2014

HTML - Features
 It is a very easy and simple language. It can be easily understood
and modified.
 It is very easy to make an effective presentation with HTML
because it has a lot of formatting tags.
 It is a markup language, so it provides a flexible way to design web
pages along with the text.
 It facilitates programmers to add a link on the web pages (by html
anchor tag), so it enhances the interest of browsing of the user.

HTML - Features
 It is platform-independent because it can be displayed
on any platform like Windows, Linux, and Macintosh,
etc.
 It facilitates the programmer to add Graphics, Videos,
and Sound to the web pages which makes it more
attractive and interactive.
 HTML is a case-insensitive language

HTML - Editors
 An HTML file is a text file, so to create an
HTML file we can use any text editors.
 Example:
 Notepad(Recommended for Beginners)
 Notepad++
 NetBeans IDE

HTML 5
 HTML5 can do various things without requiring any
additional add-on, plugins or software's.
 It can play audio, video, animation without any help
from other softwares.
 HTML5 can be used to write various web applications.
 It can handle HD videos and high end graphics also.

HTML 5
 Features:
 Semantics: These elements helps the programmers to
describe the content of the website more preciously.
 Multimedia: Can manage multimedia content easily
on the web.
 2D/3D graphics and effects: It offers great 2D and 3D
rendering features.

Building blocks of HTML
 Tags: An HTML tag surrounds the content and apply
meaning to it. It is written between < and > brackets.
 Attribute: An attribute in HTML provides extra information
about the element, and it is applied within the start tag. An
HTML attribute contains two fields: name & value.
 Syntax:
<tag name attribute_name= " attr_value"> content </ tag na
me>

Building blocks of HTML
 Elements: An HTML element is an individual
component of an HTML file. In an HTML file,
everything written within tags are termed as
HTML elements.

Structure of HTML
<!DOCTYPE html>
<html lang="en">
<HTML>
<head>
<title> Page Title </title>
</head>
<body>
<h1> This is a Heading </h1>
<p> This is a Paragraph </p>
</body>
</html>

Structure of HTML
 The DTD (!DOCTYPE declaration).
The main container (html element).
The head section (head element).
The body section (body element).

Structure of HTML
 The DTD (!DOCTYPE declaration):
 Every compliant web document should have.
 It's purpose is to inform the browser the type of
document it's about to process.
 HTML 5 - <!DOCTYPE html>

Structure of HTML
 The main container (html element).
 The <html> element constitutes the root of all
well formed HTML documents and is supposed to
wrap all other elements between its tags.

Structure of HTML
 The head section (head element):
 The container of a set of elements that provide
metadata for the document.
 The document's title: <title>
 Style declaration: <style>

Structure of HTML
 The head section (head element):
 Client side scripts: <script>
 Meta statements: <meta> - character set, author,
description or keywords of the document
 Relational information: <link>
 Example: head.html

Structure of HTML
 The body section (body element):
 This is the place where authors throw all the
elements and contents their visitors will reach.

HTML Tags
 HTML tags are like keywords which defines that
how web browser will format and display the
content.
 HTML tags contain three main parts: opening
tag, content and closing tag.
But some HTML tags are unclosed tags.

HTML Heading
 A title or a subtitle which you want to display on the webpage.
 When you place the text within the heading tags <h1>.........</h1>,
it is displayed on the browser in the bold format and size of the text
depends on the number of heading.
 There are six different HTML headings which are defined with the
<h1> to <h6> tags, from highest level h1 (main heading) to the least
level h6 (least important heading).

HTML Paragraph
 HTML paragraph or HTML p tag is used to
define a paragraph in a webpage.
 A browser itself add an empty line before and
after a paragraph.
 All the content written on a website needs to get
formatted in the form of paragraphs.

HTML Line Break
 An HTML <br> tag is used for line break and
it can be used with paragraph elements.
 Whenever use the <br /> element, anything
following it starts from the next line.
 This tag is an example of an empty element

HTML - Tags
 Centering Content: Designer can use <center>
tag to put any content in the center of the page
or any table cell.
 <hr>: To apply a horizontal line between two
statements or two paragraphs.

HTML - Preserve Formatting
 <pre> element defines preformatted text.
 The text to follow the exact format of how it is
written in the HTML document.

HTML Elements
 An HTML element is defined by a starting tag.
 If the element contains other content, it ends with
a closing tag.
 Example: <p> ……. </p>, <h1> ……….. </h1>
Nested Elements: To keep one HTML element
inside another HTML element.

HTML Attributes
 Most of the HTML tags can also have attributes, which
are extra bits of information.
 To define the characteristics of an HTML element.
 All attributes are made up of two parts: a name and a
value.
 The name is the property want to set and the value of
the property to be set and always put within quotations.

HTML Attributes
 Core Attributes:
 Id identify any element
 Title title for the element.
 Class specifies the class of element
 Style add styles to an element, such as color, font,
size, and more.

HTML Attributes
 Core Attributes – Id:
 To uniquely identify any element within an HTML
page.
 If two elements of the same name within a Web page
(or style sheet), use the id attribute to distinguish
between elements that have the same name.
 <p id="id1">Example: ID attribute_1</p>

HTML Attributes
 Core Attributes – The title Attribute:
 The title attribute gives a suggested title for the
element.
 It is often displayed as a tooltip when cursor
comes over the element or while the element is
loading.

HTML Attributes
 Core Attributes – The class Attribute:
 To associate an element with a style sheet, and
specifies the class of element.
 The value of the attribute may also be a space-
separated list of class names.
 class="className1 className2 className3"

HTML Attributes
 Core Attributes – The style Attribute:
 To add styles to an element, such as color, font,
size, and more.
 Example: <p style="font-family:arial;
color:#FF0000;">KNCET</p>

HTML Attributes
 Internationalization Attributes – dir:
 To indicate to the browser about the direction in
which the text should flow.
Value Meaning
ltr Left to right (the default value)
rtl Right to left (for languages such as Hebrew or
Arabic that are read right to left)

HTML Attributes
 Internationalization Attributes – lang:
 To indicate the main language used in a document.
 Country codes can also be added to the language code
in the lang attribute.
 The first two characters define the language of the
HTML page, and the last two characters define the
country.

HTML Attributes
HTML Value HTML 5 Value
Accesskey character Contenteditable True, false
Class classname data Somevalue
Contextmenu menu_id draggable True, false, auto
Dir Rtl, ltr, auto dropzone Copy, move, link
Id id hidden
Lang language_code spellcheck True, false
Style style translate Yes, no
Tabindex number
Title text

HTML Formatting
 A process of formatting text for better look
and feel.
 HTML provides us ability to format text
without using CSS.

HTML Formatting
Element Name Tag Description
Bold <b> Displayed in bold
Italic <i> Displayed in italicized
Underlined <u> Displayed with underline
Strike <strike>
Displayed with strikethrough, which is a thin line through
the text
Monospaced <tt> Each letter has the same width
Superscript <sup>
The font size used is the same size as the characters
surrounding it but is displayed half a character's height
above the other characters.
Subscript <sub>
The font size used is the same as the characters
surrounding it, but is displayed half a character's height
below the other characters.

HTML Formatting
Inserted <ins> Displayed as inserted text
Deleted <del> Displayed as deleted text
Larger <big> Displayed one font size larger than the rest of the text
surrounding
Smaller <small>
Displayed one font size smaller than the rest of the text
surrounding

HTML Grouping Content
 The <div> and <span> elements allow to group together
several elements to create sections or subsections of a page.
 The <div> tag is an empty container that is used to define a
division or a section.
 <div> is a block-level element, a line break is placed before
and after it.
 Div is the most usable tag in web development.

HTML Grouping Content
 The HTML span element is a generic inline
container for inline elements and content.
 The span tag does not make any visual change by
itself.
 It groups elements primarily for styling purposes

• <!DOCTYPE html>
• <html>
• <body>
• <h1>The span element</h1>
• <p>My mother has <span
style="color:blue;font-
weight:bold">blue</span> eyes and my father
has <span style="color:darkolivegreen;font-
weight:bold">dark green</span> eyes.</p>
• </body>
• </html>

Output
• My mother has blue eyes and my father has
dark green eyes.

HTML – Phrase Tag
 It defines the structural meaning of a block of
text or semantics of text.
Emphasized Text <em> Displayed in italic.
Marked Text <mark> Displayed as marked with yellow ink or highlighted.
Strong Text <strong> Displayed as important text.
Text Abbreviation <abbr> Abbreviate a text by putting it inside tags.
Acronym Element <acronym> To indicate that the text between tags.

HTML – Phrase Tag
 It defines the structural meaning of a block of
text or semantics of text.
Text Direction <bdo> To override the current text direction
Special Terms <dfn> To specify that are introducing a special term.
Quoting Text <blockquote> To quote a passage from another source
Short Quotations <q> To add a double quote within a sentence.

HTML – Meta Tags
 The metadata means information about data.
 The META elements can be used to include name/value
pairs describing properties of the HTML document, such as
author, expiry date, a list of keywords, document author etc.
 The <meta> tag is used to provide such additional
information.
 The metadata does not display on the webpage.

HTML – Meta Tags
 It is used by search engines, browsers and other
web services which scan the site or webpage to
know about the webpage.
 The <meta> tag is placed within the <head> tag,
and it can be used more than one times in a
document.

HTML – Meta Tags
Attribute Value Description
charset
(HTML 5)
character_set
It specifies the character encoding of an
HTML page.
Content Text
It contains the value of the attribute "name"
and "http-equiv" in an HTML document,
depending on context.
http-equiv
Content-type It specifies the Information given by the web
server about how the web page should be
served.
default-style
refresh
Name
application-name It specifies the name of document-level
metadata.
author
Description
keywords

HTML – Meta Tags
 <meta charset="utf-8"> - The value of charset is
"utf-8" which means it will support to display any
language.
<meta name="keywords" content="HTML, CSS,
JavaScript, Tutorials"> - It specifies the list of
keyword which is used by search engines.

HTML – Meta Tags
<meta name="description" content="Free Online t
utorials"> - It defines the website description
which is useful to provide relevant search
performed by search engines.
 <meta name="author" content="thisauthor"> - It
is useful to extract author information.

HTML – Meta Tags
 <meta name="refresh" content="50"> - To provide
instruction to the browser to automatically refresh the
content after every 50sec.
 <meta http-
equiv="refresh" content="5; url=https://www.kongunad
u.ac.in"> - it will automatically redirect to the given
page after the provided time.

HTML – Comments
 Comment is a piece of code which is ignored
by any web browser.
 Comments help others understand code and
increases code readability.
 Presentation: <! -- ... -->

HTML – Links
 A hyperlink that links one page to another page.
 Hyperlinks allow visitors to navigate between
web sites by clicking on words, phrases, and
images.
 When the mouse moves over a link, the mouse
arrow will turn into a little hand.

HTML – Links
 A link has two ends, called anchors.
 The link starts at the source anchor and points to
the destination anchor.
 Syntax:
<a href="url">Link text</a>
– href - specifies the target of the link

HTML – Links
 By default, links will appear as follow in most
of the browsers:
 An unvisited link is underlined and blue.
 A visited link is underlined and purple.
 An active link is underlined and red.

HTML – Links
 The target Attribute:
 _blank — Opens the linked document in a new window or tab.
 _parent — Opens the linked document in the parent window.
 _self — Opens the linked document in the same window or tab
as the source document. This is the default,
 _top — Opens the linked document in the full browser window.

HTML – Links
 Absolute URLs vs. Relative URLs:
 A full web address is specified with an absolute URL.
 Example: <p><a
ref="https://www.kongunadu.ac.in/">KNCET</a></p>
 A local link (a link to a page within the same website) is
specified with a relative URL (without the "https://www" part):
 Example: <p><a href=" kongunadu-
contact.html">CONTACT</a></p>

HTML – Links
 Linking to a Page Section:
 To create a link to a particular section of a given
webpage by using name attribute.
 Steps:
 <h1>HTML Links <a name = "top"></a></h1>
 <a href = "/html/html_links.htm#top">Go to the Top</a>

HTML – Links
 Image Links:
 It's simple to use an image as hyperlink.
 To use an image inside hyperlink at the place of text.
 Example: <a href = "https://www.kongunadu.ac.in"
target = "_self"> <img src = "KNCET_Logo.png" alt =
"KNCET" border = "0"/>

HTML – Links
 Email Links:
 HTML <a> tag provides option to specify an email
address to send an email.
 Use mailto: inside the href attribute to create a link
that opens the user's email program.
 <a href = "mailto: abc@example.com">Send
Email</a>

HTML – Images
 Images can improve the design and the appearance of a web page.
 The HTML <img> tag is used to embed an image in a web page.
 Images are not technically inserted into a web page; images are
linked to web pages. The <img> tag creates a holding space for the
referenced image.
 The <img> tag is empty, it contains attributes only, and does not
have a closing tag.
 Syntax: <img src="url" alt="alternatetext">

HTML – Images
 The src Attribute:
The required src attribute specifies the path (URL) to
the image.
 Use PNG, JPEG or GIF image
 The alt Attribute:
 The required alt attribute provides an alternate text for
an image, if the user for some reason cannot view it.

HTML – Images
 Set Image Width/Height, Border and Alignment:
 Set image width and height based on requirement
using width and height attributes.
 By default, image will have a border around it.
 By default, image will align at the left side of the page

HTML – Tables
 The HTML tables allow web authors to arrange data like text,
images, links, other tables, etc. into rows and columns of cells.
 The <table> tag defines an HTML table.
 Each table row is defined with a <tr> tag. Each table header is
defined with a <th> tag. Each table data/cell is defined with a <td>
tag.
 By default, the text in <th> elements are bold and centered.
 By default, the text in <td> elements is regular and left-aligned.

HTML – Tables
 Cellpadding and Cellspacing Attributes:
Cell padding specifies the space between the cell
content and its borders.
 Colspan and Rowspan Attributes:
Use colspan attribute, to merge two or more columns
into a single column. Similar way, Use rowspan, to
merge two or more rows.

HTML – Tables
 Tables Backgrounds:
 Set table background using one of the following two
ways −
bgcolor attribute – To set background color for whole
table or just for one cell.
background attribute − To set background image for
whole table or just for one cell.

HTML – Lists
 HTML lists allow web developers to group a set of
related items in lists.
 <ul> − An unordered list. This will list items using
plain bullets.
 <ol> − An ordered list. This will use different schemes
of numbers to list items.
 <dl> − A definition list

HTML – Lists
 HTML Unordered Lists:
 An unordered list is a collection of related items that
have no special order or sequence.
 This list is created by using HTML <ul> tag. Each item
in the list is marked with a bullet.
 The type Attribute: <ul type = "square">, <ul type =
"disc"> and <ul type = "circle">

HTML – Lists
 HTML Ordered Lists:
An ordered list starts with the <ol> tag. Each
list item starts with the <li> tag.
The list items will be marked with numbers by
default.

HTML – Lists
 HTML Ordered Lists - The type Attribute:
 <ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

HTML – Lists
 HTML Ordered Lists - The start Attribute:
 <ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.

HTML – Forms
 The purpose of collecting information provided
by the visitors.
 A section of a document which contains controls
such as text fields, password fields, checkboxes,
radio buttons, submit button, menus etc.
 Syntax: <form> [Set of controls] </form>

HTML – Forms
 action - the location of the processing agent
 method - to pack form data before it's sent to
the processing agent
 target - indicates where the processing results
will be displayed

HTML – Forms
 Forms Elements:
Attributes Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<select> It defines a drop-down list.
<option> It defines an option in a drop-down list.
<textarea> It defines a multi-line input control.
<button> It defines a clickable button.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.

HTML – Forms
 Forms Attributes:
placeholder It should only be used for short descriptions.
autofocus automatically focuses that field when the page is rendered
autocomplete complete forms based on earlier input
required the browser requires the user to enter data into that field before
submitting the form.
pattern to implement specific validation.
list and the datalist
element
a predefined list of options for form controls
multiple To allow more than one value to be entered from the datalist.

HTML – Forms
 Forms Attributes:
formaction formaction specifies the file or application that will submit the
form.
formenctype It details how the form data is encoded with the POST method type
formmethod formmethod specifies which HTTP method (GET, POST, PUT,
DELETE) will be used to submit the form data
formtarget formtarget specifies the target window for the form results.

HTML – Forms
 HTML <input> element – Text Fields:
 Text fields are one line areas that allow the user to input
text.
 Single-line text input controls are created using
an <input> element, whose type attribute has a value
of text.
 Example: <input type="text" name="first_name"
placeholder="e.g. Example">

HTML – Forms
 HTML <input> element – Textarea:
 It defines a multi-line input field.
 Multi-line text input controls are created using
an <textarea> element.
 Example: <textarea rows="3" cols="30"
name="address" id="address"></textarea>

HTML – Forms
 HTML <input> element – Textarea –
Elements:
Attribute Value Attribute Value
autocomplete off, on disabled No value required.
minlength Value in int. required No value required.
maxlength Value in int. autofocus No value required.
Placeholder hint at the format expected readonly No value required.
Wrap hard, soft spellcheck No value required.

HTML – Forms
 HTML <input> element – Label:
Labeling controls is a worthwhile operation that
enhances accessibility on many fronts.
 Example: <p><label>Name: <input type="text"
name="fullname"></label></p>

HTML – Forms
 HTML <input> element – Password Field:
 Password fields are similar to text fields. The only difference is;
characters in a password field are masked, i.e. they are shown as
asterisks or dots.
 This is also a single-line text input controls created using
an <input> element whose type attribute has a value of password.
 Example: <input type="password" id="password" name="password"/>

HTML – Forms
 HTML <input> element – Email Field:
 It validates the text for correct email address.
 use @ and . in this field. <form>
 Example:
<input type="email" id="email" name="email"/>

HTML – Forms
 HTML <input> element – Radio Button:
 The radio button is used to select one option from
multiple options. It is used for selection of gender,
quiz questions etc.
 Example:<input type="radio" id="gender" name
="gender" value="male"/>Male

HTML – Forms
 HTML <input> element – Checkboxes:
 A checkbox is a particular type of option that can be
checked or unchecked upon user interaction.
 It is created using an <input> element
whose type attribute has a value of checkbox.
 Example: <input type="checkbox" name="sports"
id="baseball">

HTML – Forms
 HTML <input> element – Select Boxes:
 A select box is a dropdown list of options that allows
user to select one or more option from a pull-down list
of options.
 select, that acts as the container for the options;
 option, that represents one of the many options the
control may present.

HTML – Forms
 HTML <input> element – Select Boxes:
 Example:
 <select name="gender">
<option>Male</option>
<option>Female</option>
</select>

HTML – Forms
 HTML <input> element - File Select box:
 The file fields allow a user to browse for a local file
and send it as an attachment with the form data.
 This is also created using an <input> element,
whose type attribute value is set to file.
 Example: <input type="file" name="upload" id="file-
select">

HTML – Forms
 HTML <fieldset> element:
 The <fieldset> element in HTML is used to group
the related information of a form.
 This element is used with <legend> element
which provide caption for the grouped elements.

HTML – Forms
 HTML <fieldset> element – Example:
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>

HTML – Forms
 HTML <button> element:
 It defines a clickable button.
 Example: <button type="button"
onclick="alert('Hello World..!')">Click
Me!</button>

HTML – Forms
 HTML reset element:
 A reset button resets all the forms control to
default values.
 Example: <input type="reset" value="Reset">

HTML – Forms
 HTML <input> element – submit:
 A submit button has the predefined action of
submitting the form it belongs to when activated.
 Submit buttons are inserted with
the <input> element, having the value "submit" in
its type attribute

HTML – Forms
 HTML <input> element – submit:
<form action="action_page.php“ method=“get | post”>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

HTML – Forms
 The Action Attribute
 The action to be performed when the form is submitted.
 The common way to submit a form to a server, is by using
a submit button.
 Normally, the form is submitted to a web page on a web
server.
 Defines which URL the form's information is sent to when
submitted.

HTML – Forms
 The 'Method' Attribute
 The method attribute specifies the HTTP method
(GET or POST) to be used when submitting the
form data.

HTML – Forms
 The 'Method' Attribute
Points GET Method POST Method
Data Pass Limited amount of data can be sent Large amount of data can be sent
Security Get request is not secured because
data is data sent is part of the URL,
Post request is secured because
data is not exposed in URL
Usability GET method should not be suitable
when you are sending sensitive data
like user id or Passwords.
POST is good for when you are
sending sensitive data because
your data are sended in encrypted
form.
Data
Length
Data length restricted, usually to
2048 characters.
No restrictions on the amount of
data that can be sent.
Hacked Easier to hack. More difficult to hack.

HTML 5
 Semantic Elements:
 A semantic element clearly describes its meaning
to both the browser and the developer.
 HTML5 semantic elements are supported in all
modern browsers.

HTML 5
 Semantic Elements
Elements Elements
<article> <header>
<aside> <main>
<details> <mark>
<figcaption> <nav>
<figure> <section>
<footer> <summary>

HTML 5
 Semantic Elements
Semantic Elements Non Semantic Elements
<header></header>
<section>
<article>
<figure>
<img>
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>
<div id="header"></div>
<div class="section">
<div class="article">
<div class="figure">
<img>
<div class="figcaption"></div>
</div>
</div>
</div>
<div id="footer"></div>

HTML 5
 Semantic Elements - <section>
 It defines a section in a document.
 According to W3C's HTML5 documentation: "A
section is a thematic grouping of content, typically
with a heading.“
 A Web site's home page could be split into sections for
introduction, content, and contact information.

HTML 5
 Semantic Elements - <section>
<section>
<h1>Section Heading</h1>
<p>The section tag can contain any elements.</p>
<img src="image.png" alt="section example">
</section>

HTML 5
 Semantic Elements - < article>
 It specifies independent, self-contained content.
 An article should make sense on its own, and it
should be possible to read it independently from
the rest of the web site.
 Example: Blog and Newspaper

HTML 5
 Semantic Elements - < article>
<article>
<h1>Fun Fact</h1>
<p>Fun fact: most of the fun facts on the Internet are
not actually fun.</p>
</article>

HTML 5
 Semantic Elements - < header>
 It specifies a header for a document or section.
 It should be used as a container for introductory
content.

HTML 5
 Semantic Elements - < header>
<header>
<h1>HTML5</h1>
<h3>What is HTML5?</h3>
<p>Today we are going to talk about HTML5</p>
</header>

HTML 5
 Semantic Elements - < footer>
 It specifies a footer for a document or section.
 A <footer> element should contain information about
its containing element.
 A footer typically contains the author of the document,
copyright information, links to terms of use, contact
information, etc.

HTML 5
 Semantic Elements - < nav>
 It defines a set of navigation links.
 The <nav> element is intended for large blocks of
navigation links.

HTML 5
 Semantic Elements - < nav>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

HTML 5
 Semantic Elements - < aside>
 The <aside> element defines some content aside
from the content it is placed in (like a sidebar).
 The aside content should be related to the
surrounding content.

HTML 5
 Semantic Elements - <figure> and
<figcaption>:
 The purpose of a caption is to add a visual
explanation to an image.
 With HTML5, images and captions can be
grouped together in <figure> elements.

HTML 5
 Semantic Elements - <figure> and <figcaption>:
<figure>
<img src="mountain.jpg" alt="The Pulpit
Rock" width="304" height="228">
<figcaption>Fig1. Name of the Figure</figcaption>
</figure>

E-Commerce Technology Infrastructure

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to E-Commerce Technology Infrastructure

Similar to E-Commerce Technology Infrastructure (20)

Recently uploaded

Recently uploaded (20)

E-Commerce Technology Infrastructure