E-Commerce - IT430 Handouts - Removed

E-COMMERCE – IT430 VU
Lesson 01
E-COMMERCE
Course outline
E-Commerce and its types, Internet and WWW Basics, Internet standards and protocols, IP addressing,
Data communication on internet, Domain name system
Networking devices – Bridges, Switches, Routers etc., Role of ISP’s on Internet, Getting Domain name
and IP addresses, Understanding electronic mail
Markup languages and the Web, Web designing using HTML, CSS and Java Scripting
Client side & server side processing, Cookies, Maintaining state in a stateless environment, two
tier/n- tier architecture
Security issues on the internet, Firewalls, Proxy Server, Virtual Private Network
Cryptography and Public key infrastructure (PKI), Certification Authorities and Digital Certificates,
Digital signatures Technology
Electronic Payment Systems – Virtual Pin payment system, Centralized account system, Electronic
Check, E-Cash, SSL and SET based payment systems
E-business– advantages/disadvantages, Paper and electronic catalogues
Electronic Data Interchange (EDI)
E-business models
Internet marketing
Data mining and knowledge discovery Process, OLAP, Types and business application of data mining
E-business strategy, supply chain/value chain analysis and Porter’s model, role of e-commerce in
competitive strategy
E-banking, ERP
Legal/policy issues in e-commerce –salient features of Electronic Transactions Ordinance, 2002 in
Pakistan
Territorial jurisdiction and conflict of laws, online contracts, online defamation, Copyright in
Cyberspace
Issue of ISP’s liability, domain-name and trade mark conflicts, privacy issue on the internet, Cyber
crimes
Suggested books
Electronic Commerce (4th edition) by Gary P. Schneider

Electronic Commerce : Security, Risk Management and Control by Greenstein & Feinman
Electronic commerce – A Managerial Perspective by Turban et al.
Absolute Beginner’s Guide to Networking (3rd edition) by Joe Habraken
Creating a Web Page (5th edition) by Paul Mcfedries
Web Security, Privacy & Commerce by Garfinkel & Spafford
Data Mining – Concepts & Techniques by Han Kamber
E-commerce – Strategy, Technologies and Applications by David Whiteley
Internet Law in Canada (6th edition) by Michael Geist
© Copyright Virtual University of 1

E-COMMERCE – V
E-Commerce definition
Electronic commerce is an emerging concept that describes the process of buying and selling or exchanging
of products, services and information via computer networks including the internet
E-commerce classification
A common classification of EC is by the nature of transaction:

--------------------------------------------
Business-to-Business (B2B): electronic market transactions that take place between organizations
E-commerce is the process of buying and selling goods, services,
andBusiness-to-Consumer (B2C):
information online. It can be classified into retailing transactions with individual shoppers – typical shopper at
different types:
Amazon.com is a consumer --------------------------------------------
Involves retail transactions between businesses and individual
Consumer-to-Consumer
1..Business-to-Business (B2B):(C2C): consumer
Transactions
consumers. ofsells
between
It's the type directlywetooften
e-commerce consumers, examples
see when shopping on -individuals selling
in --------------------------------------------
classified ads, auction sites allowing
websites like individuals
Amazon, to put up items for auction – e.g, e-bay
organizations.
this type of e-commerce, individual consumers sell products or
Consumer-to-Business (C2B): individuals who sell products or services to organizations and those
services directly to other consumers.
who seek sellers and conclude
2..Business-to-Consumer a transaction
(B2C): Retail transactions
Intra
between Business
businesses and(organizational)
individual consumers. EC: all internal organizational activities involving exchange of
goods, services or information, selling corporate products to employees, online training and cost
reduction activities
Non-Business EC: academic institutions, not-for-profit organizations, religious/social organizations
and government agencies using EC to improve their operations, customer service and reduce expense
Basic Definitions
--------------------------------------------
Web client: A machine that sends requests to the internet to access
Web client- machinewebthat initiates internet request
content.
Web server – machine that services internet request
Browser - software atWeb theserver:
client side to interact
A machine that with weband
receives dataprocesses internet
Intranet – an internal
requests, serving web content to clients. a single place
network of computers confined to
Extranet – when two or more intranets are connected with each other, they form an Extranet – e.g,
Virtual Private Network
Browser: Software installed on the client machine that
Internet – a global allows
networkusersoftonetworks is defined
interact with web dataasand
internet
view websites.
Internet presents a two-way client server communication model as shown in Fig. 1 below:
Client-Server Model
Fig. 1
What is the WEB?
--------------------------------------------
The Web is a system that connects documents on the internet,
The Web is a protocol that uses the internet as the communication structure. It links documents stored in
allowing us to access and share information stored on different
computers thatIt communicate
computers. on the
uses a protocol called internet.
HTTP to makeIt is based
requests andon Hypertext Transfer Protocol (HTTP) - native
protocol of WWW designed for making web page requests.
retrieve web pages.
HTTP is a four step process per transaction
1. Client
Makes an HTTP request for a web page

Makes a TCP/IP connection

2. Sever accepts request
Sends page as HTTP
1 Client downloads the page
2 Server breaks the connection
HTTP is stateless because in the fourth step the server breaks the connection. We can say, therefore:
Each operation or transaction makes a new connection
Each operation is unaware of any other
connection Each click is a new connection
Side Effect of HTTP Transfers
A record is left of all web transaction in a file that resides at the server called common log file. Good
--------------------------------------------
news is that some user data (record of his visits to the web sites) is recorded in a particular format in the
When using HTTP transfers on the web, a record of each
logtransaction
files. Badis news
stored inis thatonuser
a file privacy
the server calledisanot maintained.
common log file.
This log file keeps track of user visits to websites in a specific
format. The good news is that this can be useful for analyzing
What can you do with this data?
website traffic. However, the bad news is that it raises concerns
about user privacy since personal information can be logged and
potentially
Rearrange accessed by others.
your site by knowing which portions of your web site are popularly accessed and which are
The bad news is that it raises concerns about user privacy
ignored
since by information
personal the users can be logged and potentially
Change by
accessed your marketing strategy – e.g., you can introduce some promotional scheme for boosting the
others.
sale of ignored items
Make a mailing list – you can trace the location from where customers are visiting and prepare a mailing
list for marketing purposes

E-COMMERCE – V
Lesson 02
WHAT IS A NETWORK
--------------------------------------------
A network connects computers together, either in one location or
A network can be anything from a simple collection of computersacross
at one the location connected
internet. A Local through
Area Network a is a network in a
(LAN)
connectivity media to the internet (a global network of networks).specific
Local areaArea
and typically
Networkhas many computers
(LAN) is a (clients) and a few
central computers (servers) that manage the network.
server- based network confined to a particular area/place. Most LANs consist of many clients and a few
servers. Fig. 1 below shows a simple LAN setup:
Fig. 1
Why networking your computer
We network our computers to share resources and communicate. We can do networking for:
1 File sharing
2 Hardware sharing – printer sharing, for example
3 Program sharing
4 User communication through a machine called e-mail server
Network protocol
--------------------------------------------
Network protocols are like a set of rules that computers follow to
Network protocols are those
communi standard
cate and share datarules using which
on a network. computers
These protocols work on a network communicate and
exchange data with together
each other. A group
in a group called aof protocols
protocol stack tothat prepare
ensure theis data for communication on the
that data
properly prepared and transmitted across the network.
network is called the Protocol stack.
International organization for standard’s (ISO) model
In --------------------------------------------
1970’s came ISO’s OSI model – a conceptual model for network communications. OSI stands for Open
System
In Interconnection
the 1970s, Reference
the International Model
Organization and it proposes a 7 layer architecture. Each layer (except physical
for Standardization
(ISO) introduced the OSI model, which is a conceptual framework for
layer) at the sending
network communication. machine sends instructions through its header to the receiving machine as to how
the accompanying data be interpreted or treated by the receiving machine. Header is a piece of
The OSI model consists of seven layers, each responsible for
specific tasks. © Copyright Virtual University of 4
When data is sent from one computer to another, each layer
adds its own instructions, called headers, to the data. This
information

E-COMMERCE – V
which is attached to the data at its beginning by each layer except the physical layer. The process of moving
the data down the OSI Protocol stack at the sending machine is called Encapsulation, and the process of
moving the data up the OSI stack at the receiving side is called De-encapsulation. Fig. 2 below shows names
of the 7 layers of the OSI model which are numbered from bottom up.
Fig. 2
Application layer
It sits at top of the OSI model. Requests related to file transfer and database queries are handled by this
layer. Two very important protocols, namely, HTTP and FTP (file transfer protocol) operate at this layer.
Presentation layer
It is the translator of the OSI model. It provides instructions through its header that how the
accompanying data should be formatted by the receiving machine. MIME-multipurpose internet mail
extensions protocol operates at this layer to define file formats and data types
Session layer
It provides instructions about the nature of communication link between the sending and receiving machine
--------------------------------------------
during a session. A combination of protocols called Session Protocol Data Units work at this layer. Three
The session layer in the OSI model provides instructions for the
modes
communiof
cationcommunication
link between sendingare and
simplex,
receivinghalf-duplex and afull-duplex. Simplex means communication in one
machines during
direction
session. Itonly. Half-duplex
uses protocols means Protocol
called Session communication
Data Units in two directions but one party can send data at a
(SPDU). Communication can be simplex (one direction), half-duplex
time. Full-duplex
(two directions but onemeans
party atcommunication in (both
a time), or full-duplex twoparties
directions while both parties are able to send data
simultaneously.
simultaneously). It also
It also places
adds special
checkpoints
Communication can be simplex (one direction),
tocheckpoints
track lost data on data packets to trace any lost packets.
packets.
Transport layer
half-duplex (two directions but one party at a time),
TCP (Transmission Control Protocol) or UDP (User Datagram Protocol) operate at this layer. It has two
functions. It converts the data into data packets. Secondly, it is responsible for flow control of data. TCP
is
more reliable as it is acknowledgment based as opposed to UDP which does not use any system of
acknowledgment for the delivery of data packets.
Network layer
It is responsible for providing IP addresses on data packets using IP protocol. Routing Information
Protocol (RIP) also operates here which enables routers to build their routing table. Another protocol,
Address Resolution Protocol (ARP) is also designed to operate at network layer.
Data link layer
It places data packets into data frames. Network Interface Card Drivers/Protocols operate at this layer. It
is used to identify MAC or hardware address of computer machines. A mathematical calculation,
Cyclical Redundancy Check (CRC), takes place here to confirm integrity of data frames.
Physical layer
It has got no header. All information including the header information is converted into binary data at
this layer. It results into the generation of electric signals as 1s and 0s are queued up and travel along the
connectivity media to the receiving side.
Internet layers- TCP/IP stack
Internet communication model (TCP/IP Stack) proposes a 4 layer architecture. Following are the names
of internet layers that map with the OSI model’s layers:
Application layer is equivalent to OSI model’s Application, Presentation and Session layers
Host-to-Host Layer is equivalent to OSI model’s Transport layer
Internet layer is equivalent to OSI model’s Network layer
Network Access layer is equivalent to OSI model’s data link layer

E-COMMERCE – V
This mapping of layers is also shown in Fig. 3 below:
Fig. 3
In the following table (Fig. 4) there is a list of important protocols that operate at the TCP/IP stack.
Fig. 4
IP addressing
It is the logical addressing scheme used to identify computer machines on the internet. Each computer has a
unique IP address provided by IP protocol for a given session. It is represented by four decimal numbers
separated by a period e.g, 140.57.220.200 (see Fig. 5 below). Computers see this information as a stream of
32 bits.

Fig. 5
You can look at figures 6 to 8 below to revise the basic concept of conversion of decimal numbers into
binary and from binary into decimal.
Fig. 6

E-COMMERCE – V
Fig. 7
Fig. 8
Classes of IP address
There are five classes of IP addresses, namely, A, B, C, D and E. Classes A, B and C are for general
public use, whereas Classes D and E are used by people belonging to certain special groups. To find
which class a particular IP address belongs to, the rule is to look at the number in the first byte. If this
number falls within the calculated range of a specific class, then we can say that this IP address belongs to
such particular class.

Fig. 9 below explains the logic how we can calculate these ranges:
Fig. 9
By rule, in class A networks first byte would refer to the network address and the remaining three bytes
to the host machines on that network providing a very large network. In class B, the first two bytes
indicate the network address and the last two bytes indicate the host machines on that network giving
rise to a medium-sized network. In class C, first three bytes refer to the network address and the last byte
to the host machines on that network, which would therefore be a very small network. (See Fig. 10
below)
Fig. 10

E-COMMERCE – V
Lesson 03
HOW MANY CLASS A, B, C NETWORKS AND HOSTS ARE POSSIBLE?
Note that 126 class A networks are possible (0 and 127 are not used for general purposes). Each class A
network can accommodate a maximum of 16 million hosts on it. There are 16384 class B networks possible
and each can host upto 65000 host machines. There are 2 million class C networks possible each having the
capacity to accommodate upto 256 host machines on it.
Subnet mask
An IP address is meaningless for the computers unless it is accompanied by a subnet mask. It tells to the
computer machines that what part of the accompanying IP address corresponds to the network address
and what part corresponds to the host machine on that network. A subnet mask is also represented by
four decimal numbers separated by a period. Default subnet masks for class A, B and C types of IP addresses
are as under:
Class A: 255.0.0.0
Class B: 255.255.0.0
Class C: 255.255.255.0
IP version
The existing IP scheme (version 4) is likely to be replaced by IP version 6. It would provide 128 bits IP
38
addresses in hexadecimal format. According to an estimate a total of 3.4 x 10 addresses would then be
available.
Domain name system
A Domain Name is a user friendly name used to locate a web site on the internet. For example, vu.edu,
bestcomputers.com etc. Domain Name System (DNS) provides the structure and the strategy that is used to
refer to computers on the internet by these user friendly names. Domain Names are Unique. They are
assigned as one has to pay and register for them. With the help of DNS a domain name is translated into
its corresponding IP address (see Fig. 1 below). A fully qualified domain name is processed from right
to left for its translation into the corresponding IP address. A fully qualified domain name can be made up of
a top level domain (TLD), second level domain (SLD) and subdomains, as shown in Fig. 2 below.
Seven popular TLDs are “.com,.edu,.org,.gov,.net,.countryname,.int”. SLDs represent the name of a
company/institution/entity. Subdomains represent the geographical or functional units of a
company/institution etc.

Fig. 1
Fig. 2
Name resolution
The translation or resolution of a fully qualified domain name into its IP address takes place using the
hierarchy of special computer machines called Domain Name Servers. A DNS server is a server on the
network that maintains a database/table that contains the list of domain names and their corresponding
IP addresses. The name servers for TLDs are also called Root Name Servers. There is a program called
‘Resolver’ built into the browser, which sends the request for resolution of the domain name to the machine
called Local Name Server. Local name server then contacts the root name server, which looks into its
database and where possible provides the IP address of the name server below in the Hierarchy. Hence
in a similar number of steps the fully qualified domain name is completely translated into the IP address
of the web server where the requested web page is stored. The process of name resolution has been
shown in an example in Fig. 3 below:

E-COMMERCE – V
Name Resolution
2 Root
Nam
e
Serv
ecom.cs.vu.edu 3
er
1 vu.edu, 128.196.128.233
Local Name server 4 VU
ecom.cs.vu.edu
Client ecom.cs.vu.edu Nam
e
cs.vu.edu, 192.12.69.5
192.12.69.60 5 Serv
er
ecom.cs.vu.edu ecom.cs.vu.edu
8 6 CS
Nam
e
7 Serv
er
Getting domain names and IP addresses
Domain names are administered in a hierarchy. At the global level the task of registration/administration of
domain names is supervised by the organization called Internet Corporation for Assigned Names and
Numbers (ICAAN). There are organizations working under ICAAN in different regions. For example,
APNIC is for Asia and Pacific Rim, ARIN for America and South Africa, RIPE-NCC for Europe and
North Africa etc. Each of the above are further connected to Internet Service Providers (ISPs) at the
local level. One can register one’s domain name through an ISP also. Similarly, one can lease IP addresses
from a local ISP apart from the direct sources of IP addresses, that is, APNIC, ARIN or RIPE-NCC.
ISPs can use a server to dynamically supply the IP addresses to their clients for a session. Such a server
is called DHCP (Dynamic Host Configuration Protocol) server.
Media access control (MAC) address
Data to be delivered on a network has to be converted first into serial transmission. This is done through
a device called Network Interface Card (NIC) that must be installed in a computer on the network. NIC
has also got printed on it a 48 bits unique address called the MAC or hardware address of the computer
machine. In other words, it consists of 12 hexadecimal characters and can have different format as
shown below:
090017A9B2EF
09:00:17:A9:B2:EF
09-00-17-A9-B2-EF
Whereas the IP address of a computer may change from time to time, its MAC address would remain
the same unless the existing NIC is replaced with another. It can easily be inferred that there are 248
unique MAC addresses possible (which is an unimaginably high number). An organization called
Institute of Electrical and Electronic Engineers (IEEE) administers the allocation of MAC addresses,
worldwide. It ensures that there is no duplication of MAC addresses by the manufacturers of NICs.

Lesson 04
NETWORKING DEVICES
Topology of a LAN means its physical lay out. There are three main types of Network Topology,
namely, Bus Topology, Star Topology and Ring Topology as shown in Figures 1-3 below. There are
two different approaches to networking – Server-based and Peer-to-Peer approach. In server-based
approach there is a centralized server machine that can serve users’ requests for the sharing of resources
on a network. Contrarily, in peer-to-peer, the machines on the network have an equal capability which means
that they can act both as a client and a server.
Fig. 1
Fig. 2
Fig. 3

E-COMMERCE – V
Networking devices
Hubs
These provide central connection point for a LAN. They organize cables and relay data signals to all
computers. There are ports on the back of a hub used to connect computers. They come in different sizes
and shapes.
Repeaters
Repeaters regenerate signals. A repeater would amplify the entire electric signal it receives. However, it has
no capabilities of directing network traffic.
Bridges
A Bridge is a combination of hardware and software. It has its own operating system. It helps to
conserve the bandwidth of a network. Bandwidth is the speed of a network. It indicates how many bits
can be transmitted across a network in a given time. In case of a bridge, the larger network is physically
chopped into smaller segments. A bridge can read the MAC (Media Access Control) or physical address
of a computer on data packets. MAC address is printed on the Network Interface Card. A bridge
matches this MAC address with the one stored in its table and judges that which particular segment does
a data packet belong to and accordingly sends that packet to such a segment. It does not allow other
packets belonging to other segments to spread to a particular segment and hence conserves the
bandwidth. (See Fig. 4 below)
Fig. 4
Switches
A switch is also a combination of hardware and software having its own operating system. Like bridges, the
switches are also used to increase the bandwidth of a network. However, in case of a switch, a network
is virtually divided into small segments called Virtual LANs or VLANs. Similar type of users can be grouped
into a VLAN despite that they have no physical proximity or closeness. A switch would read the MAC
address on a data packet and match it with the list of MAC addresses of the user machines contained in it. It
then sends data packets only to that machine on a VLAN to which these packets relate. Packets
belonging to other VLANs are not allowed to enter into a particular VLAN, hence bandwidth increases.
Routers
Routers use a combination of hardware and software to forward data packets to their destination on the
internet. They are more efficient and sophisticated than bridges and switches. They can divide large
networks into logical segments called Subnets on the basis of IP addressing scheme. A router can
communicate with another router on the internet with the help of Routing Information Protocol, and thus
it can build a routing table. This routing table contains information about different network addresses
and different routes for delivery of data packets to a host machine on a network. A router is a decision
making device. When a data packet arrives at a router it reads the network addresses from the IP address
on the data packet and determines the shortest possible path through which this packet can be delivered
to its destination.
Following diagram (Fig. 5) explains how routers on the internet backbone forward data packets by
determining the shortest possible path for the destination. In this example a client machine ‘A’ sitting on
network no. 140.57 sends data to a web server ‘B’ hosted at network no. 100. ‘R1’ is the router attached
to network no. 140.57. After consulting its routing table it can find that the shortest possible path for
sending data to machine ‘B’ is to forward data packets to ‘R2’, the router attached to network no. 100.
In case there is a blockade then‘R1’ can look for the alternative shortest path. Here, the alternative
shortest path for the delivery of data packets to ‘B’ can be R1-R3-R4-R2.
Fig. 5
Cabling options
Cooper-based cables
They are quite commonly used for connecting computers. They have two main types – coaxial and
twisted pair. In twisted pair there are two further options – unshielded twisted pair (UTP) and Shielded
Twisted Pair (STP).
Fiber optic cables
They are used on the internet. They deliver data at a very high speed. They use glass or plastic filaments and
the pulses of light as a data transfer method.
Telephone and electrical wire networks
They can also be used for connectivity purpose.
Wireless options
Wireless options include radio connectivity (wi fi, bluetooth), infrared connectivity and Satellite microwave

E-COMMERCE – V
transmissions.
Address resolution protocols (ARP) and address resolution protocol (RARP)
Each computer on the internet prepares a list of its IP address and corresponding MAC address using
ARP. Through RARP this information is forwarded to a network server. When a data packet arrives at
the destination router, it inquires about the corresponding MAC address form the network server, inserts
it and delivers the packet to that MAC address. A data packet therefore needs both IP and MAC
addresses to reach its destination. (See Fig. 6 below)
Fig. 6
Role of ISPs on internet
Internet Service Providers (ISPs) are those organizations which can provide internet connections, offer
services of web hosting, newsgroups and internet e-mail etc. They work in a hierarchy. The ISP at the top of
the hierarchy which is connected with internet backbone is called Internet Access Provider or IAP. An
internet trunk line or backbone passing through a metropolitan area is also called Metropolitan Area
Ethernet (MAE). IAPs are connected to MAEs at points called Network Access Points (NAPs). Trunk lines
allow IAPs to move data. The actual routing of data packets takes place on internet backbone (see Fig. 7
below).
Fig. 7

Lesson 05
BASICS OF HTML
[email protected] is the example of an email address. In order to deliver an email at this address, the
part ‘hotmail.com’ would first be translated into the IP address of hotmail email server through DNS. A
message sent to John can then be stored in his account lying in the hotmail email server. There are three
protocols commonly used for emails. Simple Mail Transfer Protocol (SMTP) is used for sending email
messages between servers. In other words it is used for message uploads. Post Office Protocol 3 (POP3)
or Internet Message Access Protocol (IMAP) can be used to retrieve messages. They should also be
configured with SMTP. POP is used to download email to the client machine from the server side and
the message is deleted from the email server after download. On the other hand, in case of IMAP the
message is not deleted in the email server and thus can be reopened from another location/machine.
Hypertext markup language
Web documents are defined by the Hypertext Markup Language (HTML). It is a language of tags. A tag is a
special letter or key word enclosed in angular brackets. Most tags have their corresponding closing tags
represented by the same special letter or key word enclosed in angular brackets but preceded by a slash
(/). Depending upon which tag is used the enclosed content can then have a specific effect, style or
format. HTML is case independent. It has a fixed no. of tags and attributes. Attributes are those specific
words/letters prescribed for certain tags having certain possible values. The browser has the capability
of reading/interpreting each tag and its attributes used in a code and can show the result accordingly.
One can see the source code of an HTML page using the option View Source as shown in Fig. 1 below:
Looking at the Code

Under the View menu
Select Source
Fig. 1
An HTML document starts with <HTML> tag which has its closing tag. The entire text work (including
tables, images, lists, buttons etc.) is contained within a pair of <body> tag.A <Head> tag can also be used
before the body tag to provide title and other informationabout the web page. Here is the example of a
simple HTML document:
<HTML>
<HEAD>
<TITLE> My first page</TITLE>

E-COMMERCE – V
</HEAD>
<BODY>
A simple page with just this sentence
</BODY>
</HTML>
Result is shown in Fig. 2 below.
Fig. 2
Text formatting
-Paragraph tag <p> can be used for text formatting e.g, <p Align=“Center”>Education provides a better
understanding of life</p> the enclosed sentence would accordingly be displayed in the center of the screen
due to attribute align and its value ‘center’. One can also use Left or Right as values for the attribute ‘align’.
<br> tag is used to provide a line break.
-<center>Education provides a better understanding of life </center> would align the
enclosed text in the center.
-<b> and </b> are used for bold text.
-<i> and </i> are used for italic text.
-<u> and </u> are used of underlined text.
-<big> and </big> for bigger font size.
-<small> and </small> for smaller font size.
Font tag
Font tag defines various font properties. ‘Size’, ‘face’ and ‘color’ are its attributes. Attributescan be used
simultaneously in a tag as you can see below: <font size=5 color=red face=Arial>internet and e-
commerce</font>
Example code
<HTML>
<HEAD></HEAD>
<BODY>
<H1>This is my main title</H1>
<p>Here is the first paragraph. This is some <b><i>bold text</i></b></p>
<p><font face=“Arial”>This text is in the Arial font.</font>
</BODY> </HTML>

Fig. 3
Heading in HTML
Six different levels of headings can be created in HTML. Their syntax is given below:
<H1> Level 1 – largest text </H1>
<H2> Level 2 </H2>
<H3> Level 3 </H3>
<H4> Level 4 </H4>
<H5> Level 5 </H5>
<H6> Level 6 – smallest text </H6>
Creating basic HTML
For creating/viewing a web page take the following steps:

1 Open a text editor like Notepad or WordPad
2 Type away
3 Save as a “text” file and call it filename.html
4 Start up a browser
5 Open up your file
6 File menu -> Open
7 Browse to find your file
8 Click open and OK
9 To make changes go back to the text editor
10 Make your changes and SAVE
11 Go back to the browser
12 Reload – use ‘Refresh’ icon or ‘Refresh’ button in the View menu or F5
List in HTML
<UL> and </UL> are used to create unordered list. <OL> and </OL> are used to create the ordered list.
Use <LI> and </LI> tags in between as shown below:
<HTML><Body> <UL>
<LI>Item1</LI>
<LI>Item2</LI>
<LI>Item3</LI>
</UL><P> <OL>
<LI>Item1</LI>
<LI>Item2</LI>
<LI>Item3</LI> </OL>

E-COMMERCE – V
<P>
<hr width=50% size=5 Align= center noshade></Body></HTML>
Fig. 4
Note that <hr> tag is used to create a horizontal line. Width, size, align and noshade are its attributes.
<hr> and <br> tags do not have corresponding closing tag. You can also use square, disc or circle type
of bullets,e.g, <UL Type=“Square”>Square</UL>. In case of ordered list the default list is in the format
1,2,3….You can also use lowercase letters (a,b..) uppercase letters (A,B..) small Roman numerals (i,ii..) and
large Roman numerals (I,II..) in the ordered list e.g; <OL
Type=“a”><LI>First></LI><LI>second</LI></OL>
Applying images in HTML
To apply an image in html, use <img> tag. Also, use attribute ‘src’ and keep the name of the image file as its
value. Browser would display the image corresponding to the place where you have used the image tag in
your code. See the following example code:
<HTML> <BODY> <HI>On Sale Cassettes</H1> <Img Src=“cassette.gif”> </Body></HTML>

Fig. 5
Commonly used formats of image files are .gif, .jpg etc. Common attributes of image tag are shown below,
for example: <Img Src=“cassette.gif” width=“80%” height=“50%” Align=“Middle”> Width and height
attributes specify size of the image and align attribute specifies the positionof the image on the page.

Downloading graphics
To download an image from the web, do the following:

1. Right click on the image.
2. Choose ‘Save Picture’ or ‘Save Picture As’. You can rename the image but you cannot change its type.
3. Select a place to save your image. It is usually easiest to reference images if you save them in the same
folder as your HTML document.
4. Make a reference to the image in your html document using the <img> tag. Note that you can
also create your own images using a graphics package.

E-COMMERCE – V
Lesson 06
BASICS OF HTML
Hypertext links are used to connect HTML documents. Text can be links. Images can be links. Links can by
used for email also. An attribute ‘href’ is used in anchor tag <A>, and its value is set as the URL of a
web page or a file name which is required to be opened by clicking the hyperlink. Content enclosed
between
<A> and </A> becomes clickable. See the following example:
<HTML>
<BODY>
<H1>Computer Science</H1>
Welcome to <A HREF=http://www.vu.edu>Virtual University</A> in
Pakistan
</BODY>
</HTML>
Fig. 1
In order to create a mailto link, one should use the following syntax: <A
HREF=mailto:[email protected]> email address</A>
Changing colors in a page
In order to provide a specific background color to a web page, an attribute ‘bgcolor’ is used in the body
tag. We can also use ‘text’ and ‘link’ attributes, respectively, in the body tag to assign font colors to our text
and hyperlinks, as indicated below:
<BODY bgcolor=“Green” text=“white” link=“red”> Instead of giving the color name as value of
‘bgcolor’ one can also provide value in terms of a six digit code based on hexadecimal numbers called RGB
values, e.g, #00FF00 refers to pure green color. RGB values are set according to following rule:
Red Green Blue

Where we want to provide an image as a background for the page then the ‘background’ attribute is used in
the body tag keeping its value as the name of that image file, e.g, <BODYbackground=“filename”>.
Consider the following example:
<HTML>
<BODY bgcolor=yellow text=red link=blue >
<H1>Computer Science</H1>
Welcome to <A HREF=http://www.vu.edu>Virtual University</A> in
Pakistan
</BODY></HTML>
Fig. 2
Meta information
Meta information is the information about the web page content, and is located in the <HEAD> of your
HTML documents. It helps make documents easier to locate through search engines. Meta tag is used
within the head tag for this purpose, as shown in the example below:
<html> <head> <title>Introduction to e-commerce</title> <Meta name=“description” content=“E-

commerce is a newly emerging field that uses internet as a medium of communication”> <Meta
name=“keyword” content=“e-commerce, internet, medium, communication”> </head> <body> Page
goes here</body></html>
Tables
Tables are used largely for page layout as well as for displaying information systematically. Any content that
can go in the body of an HTML page can go inside of a table. It must accommodate the content put
inside it. Tables are built row-by-row from the top to the bottom of the table.
Basics tags
Tables use the basic tag <Table> and </Table>. All other table tags fit between these two tags. <TR>
(table row tag) and </TR> (corresponding end tag) are used to create/add a row. <TD> (table data tag)
and </TD> (corresponding end tag) are used to divide a row into number of columns to create cells.
<TH> (table header tag) and </TH> (corresponding end tag) labels each column as a heading. To
provide the caption of a table <caption> and </caption> can be
used. A basic 2 row, 2 column table
<HTML><BODY><Table
Border=1><TR><TD>Cell1</
TD> Cell 1
Cell 2
<TD>Cell2</TD></TR><TR> Cell 3
Cell 4
<TD>Cell3</TD><T>C
ell4</TD></TR></Tab
le></BODY></HTML
>

E-COMMERCE – V
Spanning text across multiple rows or columns
Attributes ‘colspan’ and ‘rowspan’ are used in <TD> tag for spanning the cells to a particular no. of
columns or rows, respectively, as is shown in the examples below:
<HTML> <HEAD><TITLE> Example - COLSPAN </TITLE> </HEAD> <BODY> <TABLE

BORDER="1” align=center> <CAPTION>Spanning the text</CAPTION> <TR> <TD
COLSPAN="2">This line is extended to two columns</TD> <TD>This does not</TD> </TR>
<TR> <TD>First Column</TD> <TD>Second Column</TD>
<TD>Third Column</TD> </TR>
</TABLE>
</BODY>
</HTML>
Result is shown in Fig. 3 below:
Fig. 3
<HTML> <HEAD><TITLE>Spanning Text</TITLE> </HEAD> <BODY> <TABLE

BORDER="1"> <CAPTION>Example - ROWSPAN</CAPTION> <TR> <TD
ROWSPAN="2">This line is stretched to two rows</TD> <TD>First Row</TD> </TR> <TR>
<TD>Second Row</TD> </TR> <TR> <TD>This does not</TD> <TD>Third Row</TD>
</TR> </TABLE> </BODY></HTML> Result is shown in Fig. 4 below.
Fig. 4
Table tag attributes
Border - <table border=“5”> displays the cell boundaries, accordingly. Width - <table width=“75%>
sets the width of the table, accordingly. Height - <table height=“100%”> sets the height of the table,
accordingly. Cellpadding - <table cellpadding=“10”> refers to distance between the cells in pixels.

Cellspacing - <table cellspacing=“5”> refers to distance between cell boundaries andcontent enclosed in
terms of pixels. Color - <table bgcolor=“#cccccc”> provides background color to the table (you can also
provide color name instead of RGB value code). <table background=“tablebg.gif”> supplies an image in
the table background.
Attributes for <TD> tag
Width - <td width=“50%”> specifies width of a cell with reference to the table width. Align - <td
align=“center”> is used to align the text in a cell accordingly (you can also use left and right as values of
‘align’). Valign- <td valign=“top”> is used to vertically align the text in a cell (you can also use bottom
or middle as values of ‘valign’).
Using a table to set up a page with a margin
Set the table’s height to 100% using the <table> tag’s height attribute. First column is the margin. Use
‘bgcolor’ or ‘background’ attribute to define color or image for the margin. Also set width of the margin
as desired. Second column is where one can put all the regular text and the graphics. Note the following
example:
<HTML> <HEAD><TITLE>A Page with a Left-Hand Margin</TITLE> </HEAD> <BODY

LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0"> <TABLE
HEIGHT="100%"> <TR>
<TD BACKGROUND=“image2.gif" WIDTH="100"> </TD> <TD VALIGN="TOP"> This
section contains the contents of your web page. </TD> </TR> </TABLE> </BODY> </HTML>
Fig. 5
‘ ’ is the code for a blank space in HTML.
Forms
A form is a web page populated with text boxes, drop-down lists and commands buttons to get
information from the user. Its basic tag is <form> and </form>. ‘Action’ and ‘Method’ are the two
attributes used in the form tag as shown below to transport the information received form the user to a
particular URL or a file: <Form action=http://www.forms.com Method=post>
Types
Submit/Reset button Text boxes Text area Check boxes Radio buttons Lists
Submit and reset button
To create a submit or reset button use the following instruction within the form tag: <Input
type=“submit” value=“label”> <Input type=“Reset” value=“label”>
“Label” is the value that appears on the button. You may not want to use ‘value’ attribute. When the submit
E-COMMERCE – V
button is clicked, the form data is shipped to the URL specified by the <form> tag’s action attribute.
Text boxes and text area
To create a text box the value of ‘type’ attribute is set as ‘text’ in the input tag. To create abigger box
called text area we use <Textarea> and </Textarea> tag. The size of the text area is fixed on the basis of
value of attributes ‘cols’ and ‘rows’. Note the following example:
<HTML> <HEAD><TITLE>Text Area Example</TITLE> </HEAD> <BODY> <H3>Today's

Burning Question</H3> <FORM ACTION="http://www.gov.pk/scritps/test.asp"
METHOD="POST"> First Name: <INPUT TYPE="TEXT" NAME="First">
<P>
Last Name: <INPUT TYPE="TEXT" NAME="Last">
<P>
Today's <I>Burning Question</I>: <B>How to make Pakistan a developed
country?</B>
<P>
Please enter your answer in the text area below: <BR> <TEXTAREA NAME="Answer" ROWS="10"
COLS="60"> </TEXTAREA>
<P>
<INPUT TYPE="SUBMIT" VALUE="I Know!"> <INPUT TYPE="RESET"> </FORM>
</BODY> </HTML> Result is shown in Fig. 6 below.
Fig. 6
In the above example ‘name’ attribute used in ‘input’ and ‘textarea’ tags is the unique name for the
field. A field name is the information normally used by the server side to respond to the client side after
the form has been submitted to it.

Lesson 07
TEXT BOXES, CHECK BOXES, RADIO BUTTONS
-<input type=text Name=“URL” Value=http://> - here ‘value’ attribute would pre-fix the information in
the text box which is given as its value (e.g, http://)
-<Input type=text Name=“address” size=“40”> -‘size’ is used to set size of the box.
-<input type=text Name=“age” maxlength=“3”> -‘maxlength’ limits the length of the text in the text box.
Check boxes are normally used to get yes/no or true/false information from a reader. Syntax is to keep
value of ‘type’ attribute as ‘checkbox’ in the input tag. Using ‘checked’ attribute certain values can be
displayed pre-checked in the checkbox. Moreover, ‘Name’ attribute indicates the unique field name for
a checkbox.
Example – Check box
<HTML> <HEAD><TITLE>Check Box Example</TITLE> </HEAD> <BODY> <H3>Describe
Your Phobia!</H3> <FORM ACTION=http://www.sad.com/scripts/formtest.asp
METHOD="POST"> What is <I>your</I> phobia? (Please check all that apply):
<P>
<INPUT TYPE="CHECKBOX" NAME=“Water">Fear of water<BR> <INPUT
TYPE="CHECKBOX" NAME="Bald">Fear of becoming bald<BR> <INPUT TYPE="CHECKBOX"
NAME=“Lock”>Fear of being locked inside<BR> <INPUT TYPE="CHECKBOX" NAME="Flying"
Checked >Fear of flying<BR>
<P>
<INPUT TYPE="SUBMIT" VALUE="Submit"> <INPUT TYPE="RESET"> </FORM> </BODY>
</HTML>
Fig. 1
Radio buttons
Instead of yes/no choices, you might want your readers to have one choice out of many options. For that
Radio buttons can be used. General format <input type=“radio” Name=“field name” value=“value”>
You supply the same field name to all the radio buttons that you want to group together. ‘Value’ is the
unique text string that specifies the value of the option when it is selected.
Example – Radio button
<HTML> <HEAD><TITLE>Radio Button Example</TITLE> </HEAD> <BODY>
<H3>Survey</H3> <FORM ACTION="http://www.sad.com/scripts/formtest.asp"
METHOD="POST"> Which of the following best describes your current income

E-COMMERCE – V
level:<BR><BR><INPUT TYPE="RADIO" NAME=“Income" VALUE="Poverty">living below the
poverty line<BR> <INPUT TYPE="RADIO" NAME=“Income" VALUE=“Middle” Checked>living
at the level of middle class<BR> <INPUT TYPE="RADIO" NAME=“Income"
VALUE=“Upper">living at the level ofupper class<BR><BR>
Which of the following best describes your political inclination :<BR><BR><INPUT TYPE="RADIO"
NAME="Politics" VALUE=“Nationalist" CHECKED>Worker of Nationalist Party<BR> <INPUT
TYPE="RADIO" NAME="Politics" VALUE=“Socialist">Member of Socialist Party<BR>
<INPUT TYPE="RADIO" NAME="Politics" VALUE=“Republican">Supporter ofRepublican
Party<BR> <INPUT TYPE="RADIO" NAME="Politics" VALUE=“None">None of the above<BR>
<P>
<INPUT TYPE="SUBMIT" VALUE="Submit"> <INPUT TYPE="RESET"> </FORM> </BODY>
</HTML>
Fig. 2
Selection lists
General format <select name=“field name” size=“no. of items”> Between the <select> and </select>
tags are the <option> and </option> tags whichdefine the list items. If you omit “size” the list becomes a
drop-down list. If size is two or more, the list becomes a rectangle with scroll bars for navigating the
choices. Using ‘Selected’ attribute an item is selected by default. Multiple attribute allows the reader to select
multiple items from the list.
Example - lists
<HTML><BODY> <FORM ACTION="http://www.sad.com/scripts/formtest.asp"
METHOD="POST"> Select your nationality :<P> <SELECT NAME=“Nationality" SIZE="4">
<OPTION>American</OPTION>
<OPTION>Australian</OPTION> <OPTION>Hungarian</OPTION>
<OPTION>Indian</OPTION> <OPTION>Iranian</OPTION> <OPTION
SELECTED>Pakistani</OPTION> <OPTION>French</OPTION> </SELECT><P> Select your
favorite city:<P> <SELECT NAME="City"> <OPTION>Sydney</OPTION>
<OPTION>London</OPTION> <OPTION SELECTED>Lahore</OPTION> </SELECT><P>
Countries visited last year:<P> <SELECT NAME=“Countries" SIZE="5" MULTIPLE>

<OPTION>Canada</OPTION> <OPTION>Russia</OPTION> <OPTION>England</OPTION>

<OPTION>Egypt</OPTION> <OPTION>Saudi Arabia</OPTION> </SELECT>
</BODY></HTML>
Fig. 3

E-COMMERCE – V
Lesson 08
FRAMES AND IMAGES IN HTML
The concept of frames is used to set up a site so that one page remains in view in part of the browser
screen while the visitors can use the rest of the screen to view other pages using hyperlinks.
General format
<Frameset> and <Frame> are the two basic tags. This concept uses two different types of pages –
frameset page and content pages. Frameset page divides the browser window into a set of frames and
defines the size of each frame. It also specifies which content pages are displayed in which frame. It has no
body section (no body tag). Content pages are just regular HTML pages.
Dividing the screen horizontally
<HTML>
<HEAD>
<TITLE>Horizontal Frames</TITLE>
</HEAD>
<FRAMESET ROWS="25%,75%">
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
Fig. 1
Dividing the screen vertically
<HTML>
<HEAD>
<TITLE>Vertical Frames</TITLE>
</HEAD>
<FRAMESET COLS="20%,60%,20%">
<FRAME>
<FRAME>
<FRAME>
</FRAMESET>
</HTML>

Fig. 2
Frames with content - frames.htm <HTML> <HEAD><TITLE>Horizontal Frames with

Content</TITLE> </HEAD> <FRAMESET ROWS="25%,75%"> <FRAME SRC="1.htm“
Name=“upper”> <FRAME SRC="2.htm“ Name=“lower”> </FRAMESET> </HTML> Result is
shown in Fig. 3 below.
Fig. 3
Note that contents of the files 1.htm and 2.htm are displayed in Fig. 6 in the upper and
lower frames, respectively.
Code - 1.htm <HTML> <HEAD><BODY> <H1>This text is from 1.HTM</H1> </BODY>
</HTML> Code - 2.htm <HTML> <HEAD><TITLE>Horizontal Frames with links</TITLE>
</HEAD> <BODY> <H1>This text is from 2.HTM</H1> <H1><A HREF=“3.htm"
TARGET="lower">This is a link to 3.HTM</A></H1> </BODY> </HTML>
Note that ‘target’ is an attribute of the <A> tag . Specifying its value as ‘lower’ would mean that contents of
file 3.htm should open in the frame named ‘lower’ on clicking the clickable sentence, as shown in Fig. 4
below.

E-COMMERCE – V
Fig. 4
Code - 3.htm
<HTML>
<HEAD>
<TITLE>Horizontal Frames</TITLE>
</HEAD>
<BODY>
<H1>This text is from 3.HTM</H1>
<H1><A HREF=“2.htm" TARGET="lower">This is a link back to 2.HTM</A></H1>
</BODY>
</HTML>
Ready-made names for frames
Target=“_self” – loads the new page into the same frame that contains the link Target=“_top” - loads the
new page into the entire window Target=“_blank” – loads the new page into a new browser window
Some frame attributes
- NORESIZE – used in the <frame> tag, prevents the surfers from changing the size of the frame
- SCROLLING – this attribute determines whether a scroll bar appears with a frame (e.g,
Scrolling=“yes” in the <frame> tag makes it appear)
- BORDER or FRAMEBORDER – Set this attribute to 0 for not displaying a border between the
frames
Nesting frames
We can further divide a frame into different frames. This concept is called nesting of frames.
See the following example in this regard:
<HTML> <HEAD><TITLE>Nested
Frames</TITLE> </HEAD> <FRAMESET
ROWS="25%,75%"> <FRAME SRC="1.htm"
NAME="upper">
<FRAMESET COLS="50%,50%"> <FRAME SRC="2.htm" NAME="lower"> <FRAME
SRC="3.htm" NAME="right"> </FRAMESET>
</FRAMESET>
</HTML>


E-COMMERCE – V
Fig. 5
Images can be links, too
We can make images clickable as shown in the following example:
<HTML> <HEAD><TITLE>Images Can Be Links, Too</TITLE> </HEAD> <BODY> Click this

house <A HREF=“main.htm"><IMG SRC="home.gif"></A> to return to my home page. </BODY>
</HTML> Result of this code is shown in Fig. 6 below.
Fig. 6
Images can be maps, too
An image map is a web page graphics with several defined ‘clickable’ areas. To create an image map perform
three steps:
1. Decide which distinct image regions you want to use and then determine the coordinates of each
region.
2. Use the <Map> and <Area> tags to assign a link to each of these regions.
3. Add a special version of the <IMG> tag to your web page.
Step 1: determine the map coordinates
A pixel is a point marked on computer screen. Typically computer screen arranges pixels in 800 columns by
600 rows. A pixel can be identified by giving its column no. followed by its row no. (e.g, pixel 10,15).
Suppose we want to make the following rectangular image (Fig. 7) as an image map. To know the
coordinates of its different clickable regions one way is to set up an HTML file with a link that uses the
following format: <A href=“whatever”><Img src=“imagename” ISMAP></A> Load this HTML file
into a browser and move the mouse pointer over the image. The image co-ordinates of the current mouse
position appear in the status bar. You can write these coordinates on a piece of paper.
199,0 599,0
0,0 399,0
A B C

199,99399,99599,99
Fig. 7
If the rectangular image is 600 pixels in width and 100 pixels in height, and you want to display it at the top
of the screen dividing it into three equally clickable areas, then you can find the coordinates of each
region as follows:
Area A – defined by coordinate 0,0 in the upper-left corner and 199,99 in the lower-right corner Area B
– defined by co-ordinate 199,0 in the upper-left corner and 399,99 in the lower-right corner Area C –
defined by co-ordinate 399,0 in the upper-left corner and 599,99 in the lower-right corner
Step 1: Use <Map> to define the image map
<Map Name=“Testmap”> <Area shape=“Rect” coords=“0,0,199,99” href=“a.htm”> <Area

shape=“Rect” coords=“199,0,399,99” href=“b.htm”> <Area shape=“Rect” coords=“399,0,599,99”
href=“c.htm”> </Map> Note that we use area tag within the <Map> tag, and use ‘shape’, ‘coords’ and
‘href’ attributes of the area tag. ‘href’ attribute specifies the file which would open on clicking the clickable
area.
Step 1: Add the image map to the web page
For adding the image map to the web page, use the image tag in the format shown below: <Img
src=“coords.gif” usemap=“#Testmap”>
Note that you give name of the main image file as value of the ‘src’ attribute. Name of the image map is
given as value of the ‘usemap’ attribute.
<Area> tag’s SHAPE attribute

the “shape” attributes also accepts the values “circle” and “poly” (for a polygon). For a circle, “coords”
attribute takes three values: the x-coordinate of the circle’s centerpoint, the y-coordinate of the center point,
and the radius of the circle. For a polygon, the “coords” attribute takes three or more sets of coordinates.

E-COMMERCE – V
Lesson 09
TAG ATTRIBUTES, SOUNDS FILES, ANIMATIONS
<Area> tag attributes

‘alt’ attribute is used to label the clickable region. ‘Target’ attribute can be used to display result in a given
frame. ‘Nohref’ attribute can be used to make a region non-clickable. For example, <Area shape=“circle”
coords=“70,45,25” href=“a.htm” alt=“a.htm” target=“upper” nohref>
Sound Files
Sound file formats are: AU,WAV,MP3,MIDI. Sound files can be used in anchor tag as follows: <A
href=“song.wav”>Click here for some greeting!</A>. We can also embed such files using embed tag.
Example - Embedding <HTML> <HEAD><TITLE>Example - Embedding</TITLE> </HEAD>
<BODY> Click the Play button for some nice music:<BR> <EMBED SRC="Skylar.MP3"> </BODY>
</HTML> Result is shown in Fig. 1 below.
Fig. 1
<EMBED> tag also supports these attributes: Autostart=“False” – browser does not play the sound file
automatically when the user surfs the web page Loop=“value” – tells the browser how many times to play
the file (you can keep the value a number or infinite) Hidden=“True” – browser hides the control There
is another tag for embedding sound files, that is, <BGSOUND> tag. It is supported by Internet
Explorer only.
Animated GIF images
Use Paint, Paint Shop Pro or some other drawing program to create individual image files that will comprise
animation. Use a special program such as GIF Animator to specify that these images be displayed
sequentially, thus creating an animation. Add it to your web page by setting up an <IMG> tag where
‘Src’ attribute indicates the GIF file that you have created. Fig. 2 shows five different images that can be
displayed sequentially using some animation program such that they would create the effect of animation.
Fig. 2
Note that you can use ready made animated images also.
<Marquee>Tag
Text that we put between <Marquee> and </Marquee> tags scrolls across the screen. Attributes and
their values: Align=“top” or “bottom” Direction=“”left” or “right” Behavior=“Scroll” or “Slide” or
“Alternate” Loop=“times” – can set “times” equal to infinite Scrollamount=“pixels” – higher the value
of pixels, the faster the text scrolls Width=“value” – specifies the marquee width Height=“value” –
specifies the marquee
height Bgcolor=“color” – specifies marquee background
Example - Marquee
<HTML>
<HEAD>
<TITLE>Marquee</TITLE>
</HEAD>
<BODY>
Discover this amazing compatibility between
<MARQUEE ALIGN="BOTTOM" BGCOLOR="SILVER" WIDTH="200"

SCROLLAMOUNT="4">
Islam and Modern Science
</MARQUEE>!
</BODY>
</HTML>
Fig. 3
Style sheets
Style sheet instructions can be embedded in the HTML document. An advantage of applying style sheets is
that definition of the style’s formatting is created once and the browser applies that formatting each time
the tag is used. Secondly, pages are easier to modify, that is, edit the style definition and all the places where
the style is used within the page get updated automatically. Most popular type of style sheets is Cascading
Style Sheets. There are mainly four different methods of using Cascading Style Sheets.
Method #1: Embedded method
Give a <style> tag and a </style> end tag into your document. Put the style tags before body tag. Insert
all your style definitions between the style tags. Example
<HTML>
<head>
<style>
 </style> </head> <body><h1>An Example of Embedded Method</h1> </body></html>

E-COMMERCE – V
Fig. 4
Here, H1{font-size:72pt} is called style definition, ‘font-size’ is called style property and 72pt is the value of
the property. Style definition is contained within the mark , which is the format for commenting
out information in HTML. It is better to provide style definitions within the comment tag so that old
browsers that do not support <style> tag do not treat the style definition as text.
Method # 2: Linking to an external style sheet
A separate file is created with the extension ‘.css’, containing your style definitions (see mystyles.css below).
Use <Link> tag inside a web page header to apply these style definitions.
mystyles.css:
h1{color:red}
p{font-size:34pt}
Example <HTML> <head> <Link Rel="stylesheet" Type="text/css" href="mystyles.css"> </head>

<body><h1>This heading will appear red</h1>
<p> This line has a 34pt font</p></body>
</html>
Fig. 5
Method # 3: Inline styles
It is used where a particular tag is to be given a different style. We use ‘style’ as an attribute in a tag and give
properties/values in a format as shown in the example below:
<HTML>
<body>

<h1 style="font-size:40pt">This heading has font-size 40-point</h1>

</body>
</HTML>
Fig. 6

E-COMMERCE – V
Lesson 10
STYLE SHEETS
Suppose you want all headings to appear in a 24-point font but the first one to appear in a 40-
point font. For that you can use in line style for 40pt font heading.
Example <HTML> <head> <style> h1 {font-size:24pt; Color:Blue} </style> </head> <body> <h1
style="font-size:40pt;Color:red">This heading has font-size 40-point</h1> <h1>This heading has 24-
point font-size</h1> </body></html>
Fig. 1
Applying a style to a section <DIV> tag is used to divide a page into separate sections. Browser inserts a
line break before the <DIV> tag and after the </DIV> end tag. By including the “style” attribute inside
the <DIV> tag, one can apply an inline style to everything inside <DIV> and </DIV> tags.
Example - <DIV> tag

<HTML>
<body>
<DIV style=“font-size:30pt”>
<h1>This heading uses a 30-point font</h1>
This sentence will have 30-point font
<h2>This heading, too</h2>

</DIV>
</body></html>

Fig. 2
Applying a style to a word or phrase Use <SPAN> and </SPAN> and insert the style attribute inside the
<SPAN> tag. <SPAN> tag does not provide any line break. Example <HTML> <body> <h1> This
<Span style="font-size:40pt">heading </Span> has font-size 40-point </h1> </body> </HTML>
Fig. 3
Method # 4: style classes
They are used when you want to apply a specific style to a number of different tags and sections throughout
the document. Set up a style class within the <style> tag or within an external style sheet file, e.g;
Classname {style definitions go here}. Add a “class” attribute to the tags you want the styles applied to
and put it equal to classname (without the dot).
Example – style classes <HTML> <HEAD><TITLE>Style Sheets: Style Classes</TITLE> </HEAD>

<STYLE>  </STYLE> <BODY> <DIV CLASS="Text1"><h1>This text is in red</h1></DIV>
<DIV CLASS="Text2"><h2>This text is in green</h2></DIV> </BODY> </HTML>
Fig. 4

E-COMMERCE – V
Using styles to control fonts
<HTML>
<HEAD>
<TITLE>Style Sheets: Font Sizes</TITLE>
</HEAD>
<BODY>
Our store offers books on following subjects:<br>
<SPAN STYLE="font-size: xx-small">Physics</SPAN>, <SPAN STYLE="font-size: x-

small">Math</SPAN>, <SPAN STYLE="font-size: small">Computer Science</SPAN>, <SPAN
STYLE="font-size: medium">Literature</SPAN>, <SPAN STYLE="font-size: large">E-
commerce</SPAN>, <SPAN STYLE="font-size: x-large">History</SPAN> and<SPAN
STYLE="font-size: xx-large">Islam</SPAN> <br> You can also buy <SPAN STYLE="font-size:
smaller">DVDs</SPAN> and <SPAN STYLE="font-size: larger">music CDs</SPAN>. <br> We
offer<SPAN STYLE="font-size: 24pt">Greeting Cards</SPAN>, too. </BODY></HTML>
Fig. 5
Font family styles
<HTML>
<HEAD>
<TITLE>Style Sheets: Font Families</TITLE>
<STYLE>

</STYLE> </HEAD> <BODY BGCOLOR="yellow"> <DIV CLASS="fonttype1">This sentence is
in Times New Roman</DIV> <DIV CLASS="fonttype2">This one is in Arial Font Type</DIV>
<DIV CLASS="fonttype3">This is in Courier New Font Type</DIV> <HR> <DIV STYLE="font-
size:34pt;color:red"> <DIV STYLE="font-family: Arial">The Arial Font Family</DIV> <DIV
STYLE="font-family: Tahoma">This line is in Tahoma Font Family</DIV> </DIV>
</Body></HTML>

Fig. 6
Font weight styles
The font weight controls the thickness of text. Predefined weight values are
normal,bold,bolder,lighter. Specific weight values are in the range 100 – 900.
<HTML> <HEAD><TITLE>Font Weights</TITLE> </HEAD> <BODY bgcolor=yellow> <DIV

STYLE="font-size:20pt"> You can find books in this shop on <SPAN STYLE="font-family: 'Courier
New',Courier">subjects such as:</SPAN> <BR> <SPAN STYLE="font-weight:
100">Physics</SPAN>, <SPAN STYLE="font-weight: 200">Math</SPAN>, <SPAN STYLE="font-
weight: 300">History</SPAN>, <SPAN STYLE="font-weight: 400">Fiction</SPAN>, <SPAN
STYLE="font-weight: 500">Poetry</SPAN>,
<SPAN STYLE="font-weight: 600">E-commerce</SPAN>, <SPAN STYLE="font-
weight: 700">Computer Science</SPAN>, <SPAN STYLE="font-weight: 800;font-
style:italic;color:red">Sociology</SPAN>, <SPAN STYLE="font-weight: 900;font-
style:italic;color:red">Music</SPAN> </DIV></BODY> <HTML>
Fig. 7
Indenting the first line of a
paragraph
We can use the property text-indent keeping its value in inches or centimeters.
<HTML>
<HEAD>
<TITLE> Indenting the first line </TITLE>
<STYLE>

</STYLE>
E-COMMERCE – V
</HEAD>
<BODY>
<P>
Faith, unity and discipline are the qualities through which we can progress as a nation. The focus of our
young generation must be on receiving modern education. </P> <P>Religion can play a very important
role in the life of an individual. Islam teaches a complete way of life. It ensures success in this world and
hereafter. The need is to understand the real message of Islam. </P> </BODY></HTML>
Fig. 8
Aligning the text
We can use the property ‘text-align’ keeping its value as left, right, center or justify. Consider
the following example:
<HTML> <BODY> <TABLE bgcolor=yellow BORDER="1"> <TR> <TD WIDTH="25%"

STYLE="text-align: left"> Hypertext Markup Language was initially developed in America for military
purposes. Now it is a popular tool for creating web pages. It is a language of tags. It has a fixed
vocabulary. It is not case sensitive. </TD> <TD WIDTH="25%" STYLE="text-align: center">
Hypertext Markup Language was initially developed in America for military purposes. Now, it is a
popular tool for creating web pages. It is a language of tags. It has a fixed Vocabulary. It is not case
sensitive. </TD> <TD WIDTH="25%" STYLE="text-align: right"> Hypertext Markup Language was
initially developed in America for military purposes. Now, it is a popular tool for creating web pages. It
is a language of tags. It has a fixed vocabulary. It is not case sensitive. </TD>
<TD WIDTH="25%" STYLE="text-align: justify"> Hypertext Markup Language was initially developed
in America for military purposes. Now, it is a popular tool for creating web pages. It is a language of tags. It
has a fixed vocabulary. It is not case sensitive. </TD> </TR> </TABLE></Body></HTML> Result
is shown in Fig. 9 below.
Fig. 9

Text decoration styles
We can use the property ‘text-decoration’ in inline styles as follows: <HTML> <HEAD><TITLE>Text
Decoration</TITLE> </HEAD> <BODY> <H2 STYLE="text-decoration: none">Introduction to E-
commerce</H2> <H2 STYLE="text-decoration: line-through">Introduction to E-commerce</H2>
<H2 STYLE="text-decoration: overline">Introduction to E-commerce</H2> <H2 STYLE="text-
decoration: underline">Introduction to E-commerce</H2> </BODY> </HTML>
Fig. 10
Working with the upper case and lowercase letters
The property named “text-transform” is used which has four values – capitalize, lowercase,
none and uppercase.
<HTML> <HEAD><TITLE>Style Sheets: Text Transform</TITLE> </HEAD> <BODY> <H2

STYLE="text-transform: capitalize"> We love Pakistan</H2> <H2 STYLE="text-transform:
lowercase"> We love Pakistan</H2> <H2 STYLE="text-transform: none"> We love Pakistan</H2>
<H2 STYLE="text-transform: uppercase"> We love Pakistan</H2> </BODY> </HTML>
Fig. 11
Coloring the web page with color styles
Using Cascading Style Sheets one can apply a background color or image to sections of one’s
page or even to individual words.
Syntax:

E-COMMERCE – V
background-color:blue
background-color:#0000FF
background-image:URL(filename)
Example – Color Styles <HTML> <HEAD><TITLE>Backgrounds using Style Sheets</TITLE>

</HEAD> <BODY> <DIV STYLE="background-color: yellow; color: blue"> This is an example of
some blue text in yellow background using Style Sheets. </DIV><Br> <DIV STYLE="background-
color: green; color: white"> This example uses a different background color and a different font color
using style sheets. Style sheets provide us more flexibility and a greater editing control over the content.
</DIV> <P>We can also use different background style to <SPAN STYLE="background-color:
red">highlight individual words</SPAN> as in the present case.
<P>
<DIV STYLE="background-image: URL(image2.gif); font-size: 16pt;color:white"> <B>We are studying
e-commerce. E-commerce is an emerging concept that describes the process of buying and selling or
exchanging of products, services and information via computer networks including the internet</B>
</DIV>
</Body></HTML>
Fig. 12

Lesson 11
STYLE SHEETS
Attachment of the background image
Using background-attachment: fixed, the background image would remain in place when the user scrolls up
and down the page.
Style sheet box model
Each block element (<P>, <h1>…) is considered to have an invisible box around it. Stuff inside <P>,
<h1> to <h6>,<DIV> and <Table> tags etc. is present in the form of blocks. Using style sheet box
model (Fig. 1) we can make use of certain properties (dimensions, padding, border, margin and position)
to introduce useful styles.
Style Sheets Box Model
Fig. 1
Dimension - Example
<HTML>
<STYLE>

</STYLE>
<BODY>
<P>This is some text contained in a box.
<P STYLE="height: 100px">This paragraph is contained in a box 100 pixels high.
<P STYLE="width: 100px">This paragraph is contained in a box 100 pixels wide.
</BODY>
</HTML>
Fig. 2

E-COMMERCE – V
Padding
padding-top – adds space on top of the content
padding-right – adds space to the right of the
content padding-bottom – adds space below the
content padding-left – adds space to the left of the
content
padding – general property that applies to all four padding properties in this order: ‘padding
top, padding-right, padding-bottom, padding-left’
Example - Padding <HTML> <HEAD><TITLE>Padding</TITLE> <STYLE>  </STYLE> </HEAD> <BODY> <DIV
STYLE="padding-top: 15px; padding-bottom: 15px">Mind is everything; what you think you become!
</DIV> <DIV STYLE="padding-left: 15px; padding-right: 15px"> Mind is everything; what youthink
you become!</DIV>
<DIV STYLE="padding: 10px 15px 10px 15px"> Mind is everything; what you think you become!
</DIV> </BODY> </HTML>
Fig. 3
Border
Border Width
border-top-width: specifies width of the top border
border-right-width: specifies width of the right border
border-bottom-width: specifies width of the bottom
border border-left-width: specifies width of the left
border
border-width: specifies the width of all borders in the order ‘border-top-width, border-right
width, border-bottom-width, border-left-width’

E-COMMERCE – V
Border style
border-top-style: specifies style of the top border

border-right-style: specifies style of the right border
border-bottom-style: specifies style of the bottom border
border-left-style: specifies style of the left border
border-style: specifies the style of all borders in the order ‘border-top-style, border-right
style, border-bottom-style, border-left-style’
Values for border styles are double, inset, outset, groove, solid, ridge.
Border color
border-top-color: specifies color of the top border

border-right-color: specifies color of the right border
border-bottom-color: specifies color of the bottom border border-left-color: specifies color of the left
border border-color: specifies the color of all borders in the order ‘border-top-color, border-right-color,
border-bottom-color, border-left-color’
Example border
<HTML> <STYLE>  </STYLE> <BODY> <DIV
STYLE="border-width: 1cm; border-style: inset"> This line is written in a box having inset style border
and a border width of 1 centimeter. </DIV> <DIV STYLE="border-width: 10px;border-color:red green
yellow blue; border-style: ridge"> This line is written in a box having ridge style border and different border
colors. </DIV> </Body> </HTML>
Fig. 4
Margins
margin-top: specifies the size of the top margin margin-right: specifies the size of the right margin
margin- bottom: specifies the size of the bottom margin margin-left: specifies the size of the left margin
margin: specifies the size of all the margins in the order, margin-top, margin-right, margin-bottom and
margin-left Example – Margins <HTML> <STYLE> P{margin-top:100px;margin-
bottom:100px;margin- left:200px;margin-right:200px} </STYLE> <BODY> <P style="background-
color:yellow;font- size:34pt;text-align:justify">The great thing in this world is not so much where we are,
but in what direction we are moving</P> <DIV STYLE="background-color: black; color: white">
<H2>This heading appears with a bottom margin of 100 pixels</H2> </DIV> </BODY> </HTML>

E-COMMERCE – V
Result is shown in Fig. 5
Fig. 5
Position styles
Position Property position: absolute – you can place the element box anywhere on the page position:
relative – position is relative to the normal position of the element
position: static – position remains unchanged
top – element’s position is fixed from the top of browser window (in case of position: absolute) or below
the element’s natural position in the page (in case of position: relative) right – element’s position from the
right side of browser’s window bottom – element’s position from the bottom of browser’s window left –
from the left side of the window ( in case of position: absolute) or to the left of the element’s natural
position ( in case of position: relative) Example- Position Styles
<HTML> <STYLE> DIV {font-size: 18pt} </STYLE> <BODY> <DIV STYLE="position: absolute;
left: 700px; top: 200px">Books Section</DIV> <DIV STYLE="position: absolute; left: 200px; top:
150px">Toys Section</DIV> <DIV STYLE="position: absolute; left: 500px; top: 100px">Music
Section</DIV> <DIV STYLE="position: absolute; left: 100px; top: 0px">Clothes Section</DIV> We
must believe in luck. For how else can we explain the success of those we do'nt like? <p STYLE="position:
static; left: 200px; top:30px”> This is an example of position styles. </BODY></HTML> Result is
shown in Fig. 6 below.
Fig. 6

E-COMMERCE – V
Lesson 12
SOME USEFUL STYLE SHEETS PROPERTIES
Example position style

<HTML>
<STYLE>
DIV {font-size: 18pt}
</STYLE>
<BODY>
<DIV STYLE="position: absolute; left: 700px; top: 200px">Books Section</DIV>
<DIV STYLE="position: absolute; left: 200px; top: 150px">Toys Section</DIV>
<DIV STYLE="position: absolute; left: 500px; top: 100px">Music Section</DIV>
<DIV STYLE="position: absolute; left: 100px; top: 0px">Clothes Section</DIV>
We must believe in luck. For how else can we explain the success of those we do'nt like?
<p STYLE="position: static; left: 200px; top:30px">
This is an example of position styles.
</BODY></HTML>
Fig. 1
<HTML>
<STYLE>
DIV {font-size: 18pt}
</STYLE>
<BODY>
<DIV STYLE="position: absolute; left: 700px; top: 200px">Books Section</DIV>
<DIV STYLE="position: absolute; left: 200px; top: 150px">Toys Section</DIV>
<DIV STYLE="position: absolute; left: 500px; top: 100px">Music Section</DIV>
<DIV STYLE="position: absolute; left: 100px; top: 0px">Clothes Section</DIV>
We must believe in luck. For how else can we explain the success of those we do'nt like?
<p STYLE="position: relative; left: 200px;top:5px">
This is an example of position styles.
</BODY></HTML>

E-COMMERCE – V
Fig. 2
Positioning in the 3rd dimension
We can use the property ‘z-index’ for positioning in the third dimension. For example,
<HTML>
<HEAD>
<TITLE>Style Sheet 3-D Positioning</TITLE>
</HEAD>
<STYLE>
DIV {font-size: 16pt; Color:red}
</STYLE>
<BODY>
<IMG SRC="image2.gif" STYLE="z-index: 0;position: absolute; left: 95px; top: 10px">
<DIV STYLE="z-index: 1; position: absolute; left: 10px; top: 60px">
<B>This text appears on top of the image.</B>
</DIV>
</BODY>
</HTML>

E-COMMERCE – V
Fig. 3
Introduction to java script

Although JavaScript bears the name of java, it is a very different language that is used for a very
different purpose. It supports both web browser and server side scripting. Browser scripts are used to create
dynamic web pages that are more interactive, more responsive. Before discussing JavaScript, you should
know some basics. A variable defines a value stored at a location address in the computer that may be
accessed through the variable. For example Var i=3; means
i Location name
3 Value at the location
65895 Location address
Rules for variables
Variable names can begin with an uppercase letter (A-Z), lower case letter (a-z), an underscore character (_),
or dollar sign ($). Remaining characters can be any of the above or from digits (0-9). In JavaScript variables
are case sensitive. It means that if you have a variable ‘money’ you cannot write ‘Money’ or ‘mONEY’. You
don’t need to define the variable with the data type (rather it is not allowed in JavaScript)
General data types
They are as follows:

int or integer: This indicates the whole numbers like 78 or 98 etc.
float : It is a decimal fractions like 8.9 or 6.6 etc.
Char : It is any alphabet from A-Z or any digit or for that matter any of the characters on
the key board you can see. Digits defined as chars cannot have mathematical operation on
them. String: When more than one chars join they make a string.
Boolean: It just has true or false value. For example if you have variable ‘pass’ as boolean it
can be true or false only.
These data types vary in exact definition depending on the language and tool you are using.
Some might have more data types then the ones discussed above. JavaScript Data types are
Number, Boolean, String, Null and Undefined.
Event handler
Events describe actions that occur as the result of user interaction with a web page or other browser-
related activities. For example, when a user clicks a hyperlink or a button or enters data in a form, an
event is generated informing the browser that action has occurred and that further processing is
required. The
E-COMMERCE – V
keywords responsible for activating certain actions on HTML document are called Event handlers.
Some common event handlers are as follows: onclick, ondbclick, onfocus , onload, onsubmit, onselect,
onblur, onchange, onmousedown, onmousemove, onmouseout, onmouseover.
Changing images using event handlers
Consider following examples:

<HTML>
<BODY>
<IMG SRC=contents.gif
WIDTH=170
HEIGHT=50
BORDER=0
NAME=picture
onmouseover="picture.src='search.gif';picture.width=250;
picture.height=100"
onmouseout="picture.src='contents.gif';picture.width=170;
picture.height=50">
</BODY>
</HTML>
Result is shown in Fig. 4 below. Note that we can change the width and height of the
resulting picture, that is, ‘search.gif’.
Fig. 4
<HTML>
<BODY>
<A href=image2.gif onmouseover="picture.src='search.gif';picture.width=250;
picture.height=100"
onmouseout="picture.src='contents.gif';picture.width=170;
picture.height=50">
<IMG SRC=contents.gif
WIDTH=170
HEIGHT=50
BORDER=0
NAME=picture>

E-COMMERCE – V
</A>
</BODY>
</HTML>
Result is shown in Fig. 5 below. Note that using <A> we can make the resulting image
‘search.gif’ clikable such that when a user clicks at it he opens a different image ‘image2.gif,
as shown below.
Fig. 5
Objects
In computer language an object consists of certain properties and functions, exclusive to the object. In all
object oriented languages we can create objects of our own. In Java Script we are provided with certain
already defined objects which are ready to use.

E-COMMERCE – V
Lesson 13
JAVA SCRIPTING
Java script examples
<HTML>
<HEAD>
<TITLE>Javascript Example</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Fig. 1
Note we can embed JavaScript code/instructions in the plain HTML code with the help of <script> and
</script> tags. In the above example ‘alert’ is the function/method of a predefined browser object that is,
window object, and is used to create alert boxes or popup messages on the window. ‘//’ is used in
JavaScript to provide comments. Here, we use ‘//’ so that old browsers that do not support JavaScript
treat information within the Script tag as comments.
Writing on the page
<HTML>
<HEAD>
<TITLE>example-writing on the page</TITLE>
</HEAD>
<BODY>

</SCRIPT>
</BODY>

E-COMMERCE – V
</HTML>
Fig. 2
Here, ‘document’ is a browser object and ‘write’ is its function which is used to write text on the page.
Browser objects are loaded by a JavaScript capable browser to provide access to the web page and the
HTML elements it contains. These objects are used to update and interact with the loaded web page.
Operators in java script

Mathematical operators ‘+’ For addition of two values ‘-‘ for subtraction of two values ‘*’ for multiplication
‘/’ for division ‘%’ modulus (for calculating the remainder) ‘++’ for increment ‘--‘ for decrement Logical
operators ‘&&’ for logical and ‘||’ for logical or ‘!’ for logical not
Comparison operators
‘==’ for Equal ‘!
=’ for not equal
‘< ‘ for Less
than
‘<=’ for less than equal
‘>’ for Greater than
‘>=’ for Greater than equal
Functions in javascript
A variable in JavaScript can be defined using the keyword ‘var’ and a function by the
Keyword ‘function. A function can be defined in the following format: function myfunction() { // some
code }
Here, ‘myfunction’ is the name of the function.
Creating a calculator in JavaScript
<HTML>
<HEAD><Title> My Simple Calculator</Title>
</HEAD>
<script language="JavaScript">

</script>
<BODY>Add and Subtract Calculator
<FORM name="Calform">
<P>
First Number:<INPUT TYPE="TEXT" NAME="One" maxlength="3">
E-COMMERCE – V
<P>
Second Number:<INPUT TYPE="TEXT" NAME="Two" maxlength="3">
<P>
<INPUT TYPE="button" NAME="Add" VALUE="Add Them!!" onclick="Addit()">
<INPUT TYPE="button" NAME="Minus" VALUE="Subtract Them!!"
onclick="minus()">
<INPUT TYPE="RESET" VALUE="Reset!">
</FORM>
</BODY>
</HTML>
In the above example, we have defined two functions, Addit () and minus() using JavaScript. With the help
of an event handler ‘onclick’ the control is shifted to any of the said functions and the code contained in
the functions is accordingly executed.
For example, if a user adds no. 3 in the first text box and 9 in the second, then on clicking the button
‘Add them!!’ the addition of these two nos. would be displayed in an alert box due to the use of ‘alert’
function in the code.
Fig. 3
Result is shown in Fig. 4 below if the user clicks at the button ‘Subtract Them!!’ instead of ‘Add Them!!’.
Fig. 4
To get the result in a text box, you need a slight change in the code contained in the
functions Addit() and minus(), as shown below.
<HTML>
<HEAD><Title> My Simple Calculator</Title>
</HEAD>
E-COMMERCE – V

</script>
<BODY>Add Subtract Calculator
<P>
<P>
<P>
Result:<INPUT TYPE="TEXT" NAME="result" maxlength="9" Disabled>
<P>
<INPUT TYPE="button" NAME="Minus" VALUE="Subtract
Them!!" onclick="minus()">
</FORM>
</BODY>
</HTML>
Result is shown in Fig. 5 below in a text box, if you type nos. 125 and 66 in the two text
boxes, respectively, and click ‘Add them!!’.
Fig. 5

E-COMMERCE – V
Lesson 14
JAVA SCRIPTING (CONTINUED….)
We can also get the result of addition or subtraction written on a page using ‘write’ function
of the document object. Again we need to do a slight modification in the code as shown
below.
<HTML>

</script>
<BODY>
<P>
<P>
<P>
<INPUT TYPE="button" NAME="Minus" VALUE="Subtract Them!!"
onclick="minus()">
</FORM> </BODY>
</HTML>
When a user types 3 and 9 in the two text boxes, respectively, as shown in Fig. 1 below and
presses ‘AddThem!!’ the addition of two nos. ‘12’ is written on a web page (Fig. 2). On
clicking ‘Subtract Them!!’ the subtraction of two nos. ‘-6’ is written on a page (Fig. 3). Note
that in the brackets of ‘document.write’ we concatenate or join some text information called
string (within double quotation marks) with the addition/subtraction of two nos. using ‘+’ sign. The
addition/subtraction of nos. is achieved using function ‘parseFloat()’, that is, a function of predefined global
object.

E-COMMERCE – V
Fig. 1
Fig. 2
Fig. 3
Multiply and divide calculator
See the following code:

<HTML>

</script>
<BODY><h2> Multiply and Divide Calculator</h2>
<P>
<P>

E-COMMERCE – V
<P>
<INPUT TYPE="button" NAME="Multiply" VALUE="Multiply"
onclick="Multiplyit()">
<INPUT TYPE="button" NAME="Divide" VALUE="Divide" onclick="Divideit()">
</FORM>
</BODY>
</HTML>
Results are shown in Figures 4 and 5 below.
Fig. 4
Fig. 5
Example - A Drop-Down List of Links

<HTML>
<HEAD>

E-COMMERCE – V
<TITLE>A Drop-Down List of Links</TITLE>
</HEAD>

</SCRIPT>
<BODY>
<FORM>
<SELECT WIDTH="20" onChange="GoToIt(this)">
<OPTION VALUE="None">Select a page previously done --->
<OPTION VALUE="calculator.htm">Calculator
<OPTION VALUE="styles.htm">Style Sheet
<OPTION VALUE="forms.htm">Web Forms
<OPTION VALUE="tablemargin.htm">Table Margins
<OPTION VALUE="frames.htm">Frames
</SELECT>
</FORM>
</BODY>
</HTML>
Fig. 6
In the above example, event handler ‘onchange’ has been used, having the effect that when
an option is selected by the user the control is shifted to the above defined function
GoToIt(list). Due to the key word ‘this’ information/list contained in the select tag is
available to the argument ‘list’ of the function GoToIt(). When the function would be
executed the value of the selected option would be assigned to the variable ‘selection’. Due
to location.href=selection, the existing location of the web page is changed to the location of
the option/web page that has been selected and that particular web page opens. ‘Location’ is
another predefined browser object.

E-COMMERCE – V
Example - If Statement
IF statement in programming is used to alter the course of execution of code depending
upon the value of a condition. See the following example:
<HTML>

</script>
<BODY> <FORM name="Calform"> <P> First Number:<INPUT TYPE="TEXT" NAME="One"
maxlength="3"> <P> Second Number:<INPUT TYPE="TEXT" NAME="Two" maxlength="3"> <P>
<INPUT TYPE="button" NAME="Minus" VALUE="Subtract" onclick="minus()">
</FORM>
</BODY>
</HTML>
Results are shown in Figures 7 and 8 below.
Fig. 7

E-COMMERCE – V
Fig. 8
For LOOP
When we want some action to take place repeatedly till a particular point, we can apply a for
loop. General format is: for(initializationStatement;condition;updateStatement){statements}.
The code goes on executing itself till a certain condition is met.
Example
<HTML>
<HEAD>
<TITLE>Using the For Statement</TITLE>
</HEAD>
<BODY>
<SCRIPT>

</SCRIPT>
</BODY>
</HTML>
Fig. 10

E-COMMERCE – V
Math object provides a standard library of mathematical constants and functions. Following
example shows some properties and methods of this object.
<HTML>
<HEAD>
<TITLE>Using the Math object</TITLE>
</HEAD>
<BODY>
<H1>Using the Math object </H1>


</SCRIPT>
</BODY>
</HTML>
Fig. 11

E-COMMERCE – V
Lesson 15
JAVA SCRIPTING (CONTINUED….)
Example Date object <HTML> <HEAD><TITLE>Writing the Current Date and Time</TITLE>
</HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">  </SCRIPT>
</BODY>
</HTML> Result is shown in Fig. 1 below. Here, ‘Date()’ is the constructor of the date object
whichprovides current date of the system.
Fig. 1
Getting date and time in a user friendly format
To get the date/time in a different format, an instance of the date object can be created. In the following
example‘d’ is such an instance. To define the instance d of the date object we have to use a constructor
of the date object, preceded by the word ‘new’. Constructor is defined as the initializing function used to
create instance/copy of an object. It is after the name of the object whose constructor it is. Note that we
can invoke or apply different methods/functions of the date object using this instance ‘d’, e.g,
d.getDay(), d.getYear() etc.
<HTML> <HEAD><TITLE>Example - Current Date and Time</TITLE> </HEAD> <BODY>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">  </SCRIPT> </BODY> </HTML> Result is shown in Fig. 2 below. Note that mainly
three variables, greeting, dateText and timeText have been used. Also, a number of if statements have been
used in order to get customized values.
Fig. 2
Example - String Object
In the following example, ‘str’ and ‘myArray’ are the instances of string and array objects, respectively. The
size of the array is 10. Here, charAt() is the function/method of string object. So, charAt(3) would
provide the value of the element at the index three. Different other functions of string object have also
been used. In the example, str.Split(' ') splits the string on the basis of blank space. After splitting, we
assign parts of the string as values for the array. <HTML> <HEAD><TITLE>Using the String
object</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">  </SCRIPT></HEAD> <BODY> <H1>Using the String object </H1> <SCRIPT
LANGUAGE="JavaScript" TYPE="text/javascript">  </SCRIPT> </BODY>
</HTML>
Fig. 3

E-COMMERCE – V
Using java script for applying for checks in a registration form
We can use JavaScript for applying different checks on a web form including pattern checking. Consider
following example in this behalf, where we use a JavaScript function checkValues ():
<HEAD>
 </script> <BODY onload="onwindowload()"> <font size="3" face="Arial"

color=red><strong></font> <H3>To Register Please Enter The Following Information:</H3>
<FORM NAME="regForm" ACTION="regcheck.asp" METHOD="POST" onSubmit="return
checkValues()"> Name: <INPUT TYPE="TEXT" NAME="Name" maxlength="25">
<P>
Address: <INPUT TYPE="TEXT" NAME="userAdd" maxlength="50">
<P>
Login: <INPUT TYPE="TEXT" NAME="userlogin" maxlength=“20">
<P>
Password: <INPUT TYPE="Password" NAME="userPassword" maxlength="15">
<P>
Confirm Password:<INPUT TYPE="Password" NAME="conPassword" maxlength="15">
<P>
Email: <INPUT TYPE="TEXT" NAME="email" maxlength="15">
<P>
<INPUT TYPE="submit" NAME="Go" VALUE="Register!"> <INPUT TYPE="RESET"
VALUE="Reset!"></FORM> </BODY> </HTML>
When a user just types name and omits to type either Userlogin or userAddress, an alert box would be
displayed informing him to fill in all values. Accordingly, false would be returned by the function
checkValues(), and no data would be forwarded to the server side on clicking the submit (Register!) button.

E-COMMERCE – V
See Fig. 4 below: Fig. 4
Fig. 4
Secondly, if the user violates the permissible limit of 3-15 characters in the text box for user login, again
a pop-up box can confront him with a message as shown in Fig. 5 below.
Fig. 5
Similarly, if the user violates the permissible limit of 3-15 characters in respect of Password, an alert box can
inform him about it as shown in Fig. 6 below.

E-COMMERCE – V
Fig. 6

E-COMMERCE – V
Lesson 16
JAVA SCRIPTING AND XML
For loop can be used in the code of Registration form to check that users do not type invalid characters
in the text box. For example, in case a user types a “,” in the text box for user login, an alert box can be
made to display informing him that it is an invalid user login. See Fig. 1 below.
Fig. 1
Look at the code to understand For statement/ loop. The initialization statement is executed only at the
beginning of the For loop’s execution. The condition is then tested, and if it is true the statements
enclosed within the curly brackets are executed. If the condition is false, the loop is terminated and the
statement following the For statement is executed.
Another check can also be applied to see that the passwords entered in two different text boxes by the
user are the same. In case the two passwords do not match an alert box can inform the user about it (see
Fig. 2 below). In case no condition applied in the code is violated then the function checkValues returns
true at ‘onsubmit’. Consequently, the information provided by the user in the form is forwarded to the server
side.
Fig. 2
Extensible markup language
World Wide Web Consortium (W3C), a non-profit organization that maintains standards for the web
presented the draft of XML in late 1990’s. It is also used for web page creation and includes data
management capabilities that HTML cannot provide. Consider the example of a list of planets. Suppose that
same HTML heading tags are decided to be used each planet. Also, suppose that it is decided to display
different pieces of information about a planet in different heading sizes. Then, there is a shortcoming in

E-COMMERCE – V
respect of HTML that it can only supply upto 6 different levels of headings. In case there are more than
six

E-COMMERCE – V
different pieces of information to display, then HTML loses its efficacy. That is why web professionals have
found XML as a list formatting alternative of HTML. Following is a simple HTML code for preparing
the list of planets:
<HTML> <HEAD><TITLE>Planets</TITLE> </HEAD> <BODY> <h1>Planets</h1>
<h2>PlanetName</h2>
<h3>DistanceFromSun</h3>
<h4>Moons</h4>
<h5>DayLength</h5>
<h2>Mercury</h2>
<h3>36 million miles</h3>

<h4>None</h4>
<h5>176 Days</h5>
<h2>Venus</h2>
<h4>None</h4>
<h5>117 days</h5>
<h2>Earth</h2>
<h4>One</h4>
<h5>24 Hours</h5>
</BODY>
</HTML>
Fig. 3
XML differs from HTML in two important respects. Firstly, XML is not a markup language with
defined tags; rather, one can create one’s own set of tags in XML. Secondly, XML tags do not provide
information how text would appear on a web page. Instead of that XML tags convey meaning of
information included

E-COMMERCE – V
within them. To understand these distinctions consider the example of planets’ list again. Following is
the XML code for that:
<?xml version=“1.0”?>
<PlanetsList>
<Planet Name=“Mercury”> <Distance>36 million miles</Distance> <Moons>None</Moons>
<DayLength>176 days</DayLength> </Planet>
<Planet Name=“Venus”> <Distance>67 million miles</Distance> <Moons>None</Moons>
<DayLength>117 days</DayLength> </Planet>
<Planet Name=“Earth”> <Distance>93 million miles</Distance> <Moons>One</Moons>
<DayLength>24 Hours</DayLength> </Planet>
</PlanetsList>
First line of the code is a declaration that it is an XML document (version 1). Second and last lines of
the code are called root element tags. We enclose other elements within the root element tags. We assign
a name to the root element that best describes the purpose of our file. Other elements are called child
elements. Thus, planet is a child element of planetlist. Further, each property of a planet is the child element
of the planet element. So, distance, moons and daylength are the child elements of planet element. Name
is the attribute of the planet element. Names of child elements can be different between two
organizations, which can make the sharing of information difficult. For instance, some may describe the
property of a planet as Day and others may use the word Daylength for that purpose. This has led to the
necessity of having uniform standards for writing different types of XML documents. Many companies
have agreed to follow common standards for XML tags. A file that uses XML tags is called data type
definition (DTD) or XML schema. Different DTDs are available for different industries. We now have
accounting information, legal information standards etc.
Rules for writing an XML code
-All elements must be properly nested <outer><inner>content</inner></outer>

-All attribute values must be quoted <FRIES SIZE=“LARGE”>
-All elements with empty content must be identified by ending in />
<BR/>, <img src=“image2.gif” />

- All elements must be cased consistently <PART> must not be closed as </part>
- Certain characters having reserved meanings cannot be used e.g, & , < etc. Embedding XML into
HTML documents
<XML> element can be used anywhere within HTML document to enclose XML content.
See the following example in this regard:
<html>
<head>
<title>XML-example</title>
</head>
<body>
<h1>HTML text here</h1>
<xml>
<meal>
<burger>
<name>spicy</name>
</burger>
</meal>
</xml>
</body>
</html>

E-COMMERCE – V
Also, <script> element can be used for such purpose e.g, <script language=“xml”
type=“text/xml”>……</script>
Extensible Style sheet Language (XSL) XML files are translated using another file which contains
formatting instructions. Formatting instructions are often written in Extensible Style sheet Language (XSL).
These formatting instructions are read over by special programs – usually these programs are written in Java
programming language- called XML Parsers. Following diagram (Fig. 4) explains how web server might
process http request for an XML page.
Fig. 4
We write XSL rules that match various xml elements. For that consider the following example:
XML code <?xml version=“1.0”?> <?xml-stylesheet href=“catalog.xsl” type=“text/xsl” ?>
<CATALOG>
<PART> <NAME>Switch</NAME> <DESCRIPTION>A very efficient device</DESCRIPTION>
<PRICE>Rs. 1000</PRICE>
</PART>
<PART>……</PART>
…. </CATALOG> </xml>
XSL code
We can provide the formatting instructions for the above XML code by writing an XSL
code as given below:
<?xml version=“1.0”?>
<xsl>
<rule>
<root /> <html> <body bgcolor=yellow> <children />

</body>
</html> </rule> <rule>
<target-element type=“PART” /> <DIV style=“margin-bottom:20px”> <children /> </DIV>
</rule>
<rule> <element type=“PART”> <target-element type=“NAME” /> </element>
<B> <children />
<B> <BR /> </rule> ……… </xsl>
Note that we use <rule> elements and <target-element> in our XSL code to provide formatting
instructions for the corresponding XML elements.

E-COMMERCE – V
HTML and XML editors
General purpose text-editors for HTML are Notepad, Wordpad etc. However, there are certain HTML
editors that help create web pages more easily, e.g, Macromedia Dreamweaver and Microsoft
FrontPage. XML code can also be written in any general purpose text editor. However, there are special
programs such as Epic Editor, TurboXML which can facilitate the editing job considerably.

E-COMMERCE – V
Lesson 17
CLIENT AND SERVER SIDE PROCESSING OF DATA
You are now familiar with the fact that internet presents a two-way communication model, also called
the Client-Server Model as shown in Fig. 1 below. In the client server model some data is processed on
the client side and certain data is processed by the server on the server side.
Fig. 1
Client side processing
Data that is processed on the client side mainly includes the HTML code, most of JavaScript, applets
and cookies (in most cases). As a matter of fact, the browser installed on the client side has the
capability to interpret different HTML tags and display the result accordingly. JavaScript code can be
included in the HTML document to be executed on the client side by the browser. JavaScript is mainly
used at the client side for simple calculations and for pattern checking. We have already learnt this concept
in the examples of calculator and registration form where JavaScript functions were applied. Applets are
compiled java programs. Applet code is sent from server to the browser for processing. Examples of
applets include animation files, java games spreadsheets etc. Typically applets take more space on the
window screen Applet call example Consider the following HTML document where a special <applet>
tag has been used to make a call for the applet code. The URL of the site where applet code is stored has
been assigned as a value for the code attribute. Width and height attributes are used to specify the space
allocation for the display of the applet result.
<HTML> <BODY>
<APPLET CODE=http://www.xyz.com/carfind.class width=100 height=200>DEMO</APPLET>
</BODY> </HTML>
Cookies
Cookies are text files stored on client’s hard disk sent by the server side due to cookie related
programming in the code. Cookies are usually generated by JavaScript or CGI scripts. In
JavaScript the processing for cookies takes place on the client side. Consider the following

E-COMMERCE – V
example where the property ‘cookie’ of the document object in JavaScript is used to create a
cookie:
<HTML>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javaScript">
 </SCRIPT> <BODY> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <FORM
NAME="form1">
<P>
This information would be treated as a Cookie: <INPUT TYPE="TEXT"
NAME="cookie" size="50">
</P>
<INPUT TYPE="Button" name="setCookie" VALUE="Set Cookie!"
onclick="updateCookie()">
</FORM>
</SCRIPT>
</BODY>
</HTML>
In the above code, a text box called cookie is created. When a user clicks the button Set Cookie, the
control is shifted to the function update Cookie which creates a cookie in the hard disk of the client and
opens or reloads a fresh page for the user with the information of the current cookie written on it.
Suppose that I type the word Ahmad in the text box and click the button Set Cookie, then the cookie
‘Ahmad’ would be consequently created and stored in the hard disk. See figures 2-4 below.
Fig. 2
Fig. 3

E-COMMERCE – V
Fig. 4
Cookies can be used to track customers online. Typically, a unique ID of the customer is stored in the
cookie file on the hard disk. Same ID is also stored in the database along with the record of previously
purchased items by the customer. When the customer again visits the online store, cookie (having customer
ID prepared against that URL) is transmitted by the browser to the server side. There, it is matched with
the ID in the database. This enables the merchant side to know that a particular customer (with a known
buying pattern) has come to visit again. By tracking the customer in this manner, personalized
recommendations for certain items can be made to the customer in real time.
Cookies can also be used to maintain state between two broken sessions. Thus, it is possible that some
information of the previous session is stored in the cookie file, and this information is available (through
cookie) to the server side on starting a subsequent session. For instance, in the code of a web form
certain information received form the user can be stored in the variables as shown below:
firstName=document.form1.first.value lastName=document.form1.last.value
email=document.form1.email.value
The coder can also define a variable to set the expiration date of the cookie as follows:
expirationDate="Friday, 01-Dec-11 12:00:00 GMT"
Then using cookie property of the document object all such information can be stored on the client hard
disk in a cookie file and can be used for maintaining state between two sessions:
document.cookie="firstname="+firstname+";lastname="+lastname+";email="+email+
";expires="+expirationDate
Fat vs. Thin Client
Fat clients have a lot of processing done on the client side. On the other hand, thin clients have very
little processing on client side, and most of the processing takes place on the server side.

E-COMMERCE – V
Lesson 18
APPLETS, CGI SCRIPTS
You know that Web Server is a computer that delivers (serves up) web pages. Any computer can be
turned into a Web server by installing server software and connecting the machine to the internet. A
relational database or simply database is a collection of information stored in tables. A database contains
one or more tables. Each table has a name and consists of columns and rows. Each column has a name.
Most e- commerce sites consist of a front end and a back end. Front end consists of that information
which is visible to the user and he can interact with the same through some interface. The back end
comprises that information which resides on the server side and is used to create certain dynamic results
for the user. It would include different programs or scripts that may be developed in different
languages/tools. For an effective e-commerce site there must be a real integration or compatibility
between the front end and the back end. We develop our back end mainly for two purposes – for
querying with the databases (where we have developed databases) and for the maintenance of state. We
can use different tools (ASP, JSP etc.) for that purpose depending upon their respective
advantages/disadvantages. Server side processing can be mainly categorized into four headings -CGI
Scripts, Servlets, Server Side Scripts and JDBC/ODBC drivers.
CGI scripts
Term Common Gateway Interface (CGI) is defined as a standard method/protocol that allows data from
forms to be used by programs on the server. Script is a program running on the server. CGI scripts
include programs written in C, C++ or perl. Following Figure 1 shows a simple CGI setup. Suppose a
client makes an http request by clicking a hyperlink. This request is directed to a CGI script on the
server side whose reference would be given in the <A> tag. The server would communicate with the CGI
script on it with the help of CGI protocol. The script would be executed. We would do its coding such
that it generates a query to the database to retrieve specific information. This information would then be
supplied by the server to the client side as an HTML document. You can also consider an example.
Assume there are two links on a web page (Fig. 2). When the user clicks on the hyperlink pertaining to
IT Books, an http request goes to the server at the address, which is shown as value of the href attribute
of the anchor tag. This address is that of a CGI script ‘hello2.cgi’, which is coded in such a way that it
would generate a select query in SQL and from the table IT books would retrieve all the information as a
result for the user. The Perl code of hello2.cgi is shown for a reference below.
Fig. 1

E-COMMERCE – V
Fig. 2
Code for Fig. 2
<HTML>
<BODY>
<A href=http://www.onlineshop.com/cgi-bin/hello1.cgi>
Click here to view the record of your previous transactions </A>
<p>
<A href=http://www.onlineshop.com/cgi-bin/hello2.cgi>
List of IT Books for sale
</A>
</BODY>
</HTML>
Perl example – hello2.cgi (Not for exam)

print “<head>\n”;
print “</head>\n”;
print <body>\n”;
print “<h1>IT Books</h1>\n”;
print “<b>Description of available books</b><br>”;
&SetOracle;
&RunSQL(“Select * from ITBOOKS”);
&StopOracle; print “</body></html>\n”;
Structured Query Language (SQL)
SQL stands for Structured Query Language. It is used to make queries from databases. Its syntax may
vary slightly from tool to tool. However, its general syntax is that we use select statement to retrieve
data from databases. We use “*” after the word select then write the words “from tablename” in order to
pick the entire information from a table. We can write the select statement specifically in case some
specific information is desired to be retrieved as shown below:
Select author,publisher from ITBOOKS where coursename=‘e-commerce’
We can use insert statement of SQL in order to insert certain data in a database. For example in Fig. 3
below, you can see a web form with text boxes. When a user clicks at the Register! button (in fact a
submit button), information provided by the user in the form would be shipped to the URL specified as
value of the action attribute in the form tag. Here, that URL is that of an ASP file running on the server
side. On clicking the Register!/submit button this file would be executed. We would code it such that it
gives rise to an insert query. In other words, data provided in the form is picked up by the ASP file and
subsequently inserted or recorded in a table in the databases. The format of Insert query used in ASP is
shown for a reference below. We may also use delete and update statements in SQL for deleting and
updating data in the tables.

E-COMMERCE – V
Fig. 3
Code for Fig. 3
<HTML>
<BODY>
<H3>To Register Please Enter The Following Information:</H3>
<FORM NAME="regForm" ACTION="http://www.onlineshop.com/hello.asp" METHOD="POST">
Name: <INPUT TYPE="TEXT" NAME="Name" maxlength="25">
<P>
Address: <INPUT TYPE="TEXT" NAME="userAdd" maxlength="50">
<P>
Password: <INPUT TYPE="Password" NAME="userPassword" maxlength="15">
<P>
Email: <INPUT TYPE="TEXT" NAME="email" maxlength="15">
<P>
<INPUT TYPE="submit" NAME="Go" VALUE="Register!">
</FORM>
</BODY>
</HTML>
Insert Statement in ASP (not for exam)
INSERT INTO Register(Name,Address,Password,Email)

VALUES(Request.form(“Name”), Request.form(“Address”), Request.form(“Password”),
Request.form(“Email”))
Register is the table where information received through the form is to be inserted.
Servlets
Servlets are very fast Java applications on the server side which are available in an active form in the
memory of the server. They use JDBC to connect to the databases.
Server Side Scripts
They basically include ASP, JSP or PHP. Active Server Pages (ASP) is the product of Microsoft, Java Server
Pages (JSP) is the product of Sun Microsystems and Hypertext Preprocessor (PHP) is the product of
Apache Software Foundation. Their code can be embedded within the HTML document and they use
extensions (.asp), (.jsp) or (.php), as the case may be. The servers sees the extension of the file and processes

E-COMMERCE – V
the relevant ASP, JSP or PHP code embedded within the HTML code and provides the result of such
code to the client side.
ODBC/JDBC
ODBC (Open database connectivity) and JDBC (Java based database connectivity) drivers are also
present on the server side. Scripts or programs use these to establish connection with databases for
querying.
Basic difference between CGI scripts, ASPs, Servlets etc.
Here, you can note some basic difference between CGI scripts, servlets, ASP, JSP etc. We know that the
code we write is translated into an executable form. There are two ways to do this translation. One is
that we compile the code or convert it into machine language using a software called compiler, as we use in
case of C or C++. The other way is that we interpret the code (line by line) at the run time using a
program called interpreter. Browser is an interpreter. Compiled code is usually faster than the
interpreted one as regards execution. Technologies like ASP, PHP and Coldfusion interpret their code
except the new version of ASP (ASP.net) where the code is compiled. In case of JSP a program called
JSP engine compiles the code. This compilation takes place only once, and then the JSP page is
converted into a Servlet. The property of a servlet is that it is always in an active form which means that
it remains in the server memory. Therefore, any subsequent calls to the page have faster response time.
This probably is the only main difference between a JSP and a Servlet. Another difference between ASP
and JSP is that ASP mostly uses VBScript and JSP uses Java programming language for coding. Note
that among the CGI scripts, Perl scripts are interpreted and C++ scripts are compiled. However, CGI
scripts are generally believed to be relatively slow, since each CGI request generates a new process
which is heavy for the system. Therefore, CGI scripts are no longer a very popular option.
ASP
We can discuss ASP a little more in detail. It runs best on IIS (Internet Information Server) which is
freely available with Windows NT and Windows 2000. ASP engine is a piece of software that is a part
of IIS and interprets/translates an ASP code. There are mainly seven predefined objects in ASP called
intrinsic objects. To have some idea of the ASP objects, we can have a look at the two important ones,
that is, request and response objects. Response
object is used to send information to the client and Request object is used by the server to
retrieve information from the client.
ASP examples (not for exam)
Following is the example of Response object. We use its “write” function to write some
information on our web page. ASP normally uses VBScript as the scripting language. In
ASP, a variable is generally defined using Dim statement as shown in the code below.
ASP statements are contained within <% and %> which are called delimiters. VBScript by
default assumes that any symbol that is not a keyword is a variable. This might cause serious
problems when you are writing an ASP application. What if you mistype a variable name and
it will be considered by the server as a new variable. To avoid this you must write Option
Explicit at top of your each ASP file.
<%@ language=VBScript %>

<%option explicit%>
<%Dim lastname
Dim firstname
Dim myage
lastname=“Ali”
firstname=“Imran”
myage=30

E-COMMERCE – V
%>

E-COMMERCE – V
<html>
<head><title>It is easy</title></head>
<body>
My name is <%=firstname%> <%=lastname%> and my age is <%Response.Write
myage%>
</body>
</html>
Suppose that we want to collect data from a form (Fig. 4) using ASP and then resend a page
to the client having that information written on it. For that one can develop the following
ASP code. Note the use of “Request.form” for collecting data form the form.
<%@Language="VBSCRIPT"%>
<%option explicit%>
<%Dim loginname
Dim name
loginname=Request.Form("userlogin")
name=Request.Form("username")
%>
<html>
<head><title>It is easy</title></head>
<body>
My name is <%Response.Write name%> and I am going to use
<%Response.Write loginname%> as my login
</body>
</html>
Fig. 4
When a user clicks at Register! the information filled by him in the above two boxes would
be delivered to the ASP file whose code you have seen above. This would happen because
we keep the name or URL of the above ASP file as value of the action attribute in the
form tag.
VBScript offers a lot of flexibility for programming. We can use functions, If statements,
For loops etc. Consider the following example where a For loop has been used:
<%@Language=“VBSCRIPT”%>
<%option explicit%>
<HTML>
<Body>
Test1
<%
Dim myString=“ecommerce”
%>

E-COMMERCE – V
<%If Time>=#12:00 AM# and Time<=#12:00 PM# then%>
<h3>Good Morning Pakistan</h3>
<%else%>
<h3>Hello Everyone <p>
<%
Dim j
For j=1 to 3
Response.write mystring
response.write “<p>” Next %></h3> <% end if %> </Body> </HTML> Result of the above code
would be similar to the one shown in Fig. 5 below. Note that the words ecommerce are printed thrice due
to for loop written in a specified format in VBScript.
Fig. 5

E-Commerce - IT430 Handouts - Removed

Uploaded by

Copyright:

Available Formats

E-Commerce - IT430 Handouts - Removed

Uploaded by

Document Information

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

E-Commerce - IT430 Handouts - Removed

Uploaded by

Copyright:

Available Formats

E-COMMERCE – IT430 VU

Electronic Commerce (4th edition) by Gary P. Schneider

© Copyright Virtual University of 1

A common classification of EC is by the nature of transaction:

HTTP is a four step process per transaction

© Copyright Virtual University of 2

Makes a TCP/IP connection

Side Effect of HTTP Transfers

© Copyright Virtual University of 3

Why networking your computer

International organization for standard’s (ISO) model

© Copyright Virtual University of 5

Data link layer

Internet layers- TCP/IP stack

© Copyright Virtual University of 7

This mapping of layers is also shown in Fig. 3 below:

© Copyright Virtual University of 8

© Copyright Virtual University of 9

© Copyright Virtual University of 1

© Copyright Virtual University of 1

Domain name system

© Copyright Virtual University of 1

© Copyright Virtual University of 1

Getting domain names and IP addresses

Media access control (MAC) address

© Copyright Virtual University of 1

© Copyright Virtual University of 1

Fiber optic cables

Telephone and electrical wire networks

They can also be used for connectivity purpose.

© Copyright Virtual University of 1

Address resolution protocols (ARP) and address resolution protocol (RARP)

Role of ISPs on internet

© Copyright Virtual University of 1

Hypertext markup language

Looking at the Code

© Copyright Virtual University of 1

-<b> and </b> are used for bold text.

-<i> and </i> are used for italic text.

-<u> and </u> are used of underlined text.

-<big> and </big> for bigger font size.

-<small> and </small> for smaller font size.

© Copyright Virtual University of 2

Result is shown in Fig. 3 below.

Creating basic HTML

For creating/viewing a web page take the following steps:

© Copyright Virtual University of 2

Applying images in HTML

<HTML> <BODY> <HI>On Sale Cassettes</H1> <Img Src=“cassette.gif”> </Body></HTML>

© Copyright Virtual University of 2

To download an image from the web, do the following:

© Copyright Virtual University of 2

Changing colors in a page

Red Green Blue

<html> <head> <title>Introduction to e-commerce</title> <Meta name=“description” content=“E-

© Copyright Virtual University of 2

Spanning text across multiple rows or columns

<HTML> <HEAD><TITLE> Example - COLSPAN </TITLE> </HEAD> <BODY> <TABLE

<HTML> <HEAD><TITLE>Spanning Text</TITLE> </HEAD> <BODY> <TABLE

‘ ’ is the code for a blank space in HTML.