E-COMMERCE – IT430

VU

Lesson 01 Course outline E-COMMERCE

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/ntier 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 Pakistan

1

E-COMMERCE – IT430

VU

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 Business-to-Consumer (B2C): retailing transactions with individual shoppers – typical shopper at Amazon.com is a consumer Consumer-to-Consumer (C2C): consumer sells directly to consumers, examples -individuals selling in classified ads, auction sites allowing individuals to put up items for auction – e.g, e-bay Consumer-to-Business (C2B): individuals who sell products or services to organizations and those who seek sellers and conclude a transaction Intra Business (organizational) 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- machine that initiates internet request Web server – machine that services internet request Browser - software at the client side to interact with web data Intranet – an internal network of computers confined to a single place Extranet – when two or more intranets are connected with each other, they form an Extranet – e.g, Virtual Private Network Internet – a global network of networks is defined as internet 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 protocol that uses the internet as the communication structure. It links documents stored in computers that communicate on the internet. It is based on Hypertext Transfer Protocol (HTTP) - native protocol of WWW designed for making web page requests. HTTP is a four step process per transaction 1. Client Makes an HTTP request for a web page © Copyright Virtual University of Pakistan

2

E-COMMERCE – IT430

VU

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 log files. Bad news is that user privacy is not maintained. What can you do with this data? Rearrange your site by knowing which portions of your web site are popularly accessed and which are ignored by the users Change your marketing strategy – e.g., you can introduce some promotional scheme for boosting the 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

© Copyright Virtual University of Pakistan

3

E-COMMERCE – IT430

VU

Lesson 02 WHAT IS A NETWORK A network can be anything from a simple collection of computers at one location connected through a connectivity media to the internet (a global network of networks). Local Area Network (LAN) is a serverbased 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 2 3 4 File sharing Hardware sharing – printer sharing, for example Program sharing User communication through a machine called e-mail server

Network protocol Network protocols are those standard rules using which computers on a network communicate and exchange data with each other. A group of protocols that prepare the data for communication on the 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 Interconnection Reference Model and it proposes a 7 layer architecture. Each layer (except physical layer) at the sending 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 information © Copyright Virtual University of Pakistan

4

E-COMMERCE – IT430

VU

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 modes of communication are simplex, half-duplex and full-duplex. Simplex means communication in one direction only. Half-duplex means communication in two directions but one party can send data at a time. Full-duplex means communication in two directions while both parties are able to send data simultaneously. It also places special checkpoints on data packets to trace any lost packets. Transport layer 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 © Copyright Virtual University of Pakistan

5

E-COMMERCE – IT430

VU

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

© Copyright Virtual University of Pakistan

6

E-COMMERCE – IT430

VU

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. © Copyright Virtual University of Pakistan

7

E-COMMERCE – IT430

VU

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

© Copyright Virtual University of Pakistan

8

E-COMMERCE – IT430

VU

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.

© Copyright Virtual University of Pakistan

9

E-COMMERCE – IT430

VU

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

© Copyright Virtual University of Pakistan

10

E-COMMERCE – IT430

VU

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 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.
38

© Copyright Virtual University of Pakistan

11

E-COMMERCE – IT430

VU

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:

© Copyright Virtual University of Pakistan

12

E-COMMERCE – IT430

VU

Name Resolution
2
Root Name Server

1

ecom.cs.vu.edu vu.edu, 128.196.128.233 Local Name server
8

3 4 5 6
CS Name Server VU Name Server

Client

ecom.cs.vu.edu 192.12.69.60

ecom.cs.vu.edu cs.vu.edu, 192.12.69.5 ecom.cs.vu.edu ecom.cs.vu.edu

7

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.

© Copyright Virtual University of Pakistan

13

E-COMMERCE – IT430

VU

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

© Copyright Virtual University of Pakistan

14

E-COMMERCE – IT430

VU

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 © Copyright Virtual University of Pakistan

15

E-COMMERCE – IT430

VU

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 © Copyright Virtual University of Pakistan

16

E-COMMERCE – IT430

VU

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

© Copyright Virtual University of Pakistan

17

E-COMMERCE – IT430

VU

Lesson 05 BASICS OF HTML john@hotmail.com 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 tag which has its closing tag. The entire text work (including tables, images, lists, buttons etc.) is contained within a pair of tag.A 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: My first page © Copyright Virtual University of Pakistan

18

E-COMMERCE – IT430

VU

A simple page with just this sentence Result is shown in Fig. 2 below.

Fig. 2 Text formatting -Paragraph tag can be used for text formatting e.g, Education provides a better understanding of life 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’. tag is used to provide a line break. -Education provides a better understanding of life would align the enclosed text in the center. - and are used for bold text. - and are used for italic text. - and are used of underlined text. - and for bigger font size. - and 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: internet and ecommerce Example code This is my main title Here is the first paragraph. This is some bold text This text is in the Arial font.

© Copyright Virtual University of Pakistan

19

E-COMMERCE – IT430

VU

Result is shown in Fig. 3 below.

Fig. 3 Heading in HTML Six different levels of headings can be created in HTML. Their syntax is given below: Level 1 – largest text Level 2 Level 3 Level 4 Level 5 Level 6 – smallest text 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 Start up a browser 4 Open up your file 5 6 File menu -> Open Browse to find your file 7 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 and are used to create unordered list. and are used to create the ordered list. Use and tags in between as shown below: Item1 Item2 Item3 Item1 Item2 Item3 © Copyright Virtual University of Pakistan

20

E-COMMERCE – IT430

VU

Result is shown in Fig. 4 below.

Fig. 4 Note that tag is used to create a horizontal line. Width, size, align and noshade are its attributes. and tags do not have corresponding closing tag. You can also use square, disc or circle type of bullets,e.g, Square. 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; First>second Applying images in HTML To apply an image in html, use 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: On Sale Cassettes Result is shown in Fig. 5 below.

Fig. 5 Commonly used formats of image files are .gif, .jpg etc. Common attributes of image tag are shown below, for example: Width and height attributes specify size of the image and align attribute specifies the positionof the image on the page.

© Copyright Virtual University of Pakistan

21

E-COMMERCE – IT430

VU

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 tag. Note that you can also create your own images using a graphics package.

© Copyright Virtual University of Pakistan

22

E-COMMERCE – IT430

VU

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 , 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 and becomes clickable. See the following example: Computer Science Welcome to Virtual University in Pakistan

Result is shown in Fig. 1 below.

Fig. 1 In order to create a mailto link, one should use the following syntax: email address 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: 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, . Consider the following example: Computer Science Welcome to Virtual University in © Copyright Virtual University of Pakistan

23

E-COMMERCE – IT430

VU

Pakistan Result is shown in Fig. 2 below.

Fig. 2 Meta information Meta information is the information about the web page content, and is located in the 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: Introduction to e-commerce Page goes here 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 and . All other table tags fit between these two tags. (table row tag) and (corresponding end tag) are used to create/add a row. (table data tag) and (corresponding end tag) are used to divide a row into number of columns to create cells. (table header tag) and (corresponding end tag) labels each column as a heading. To provide the caption of a table and can be used. A basic 2 row, 2 column table Cell1 Cell 1 Cell 2 Cell2 Cell 3 Cell 4 Cell3C ell4 © Copyright Virtual University of Pakistan

24

E-COMMERCE – IT430

VU

Spanning text across multiple rows or columns Attributes ‘colspan’ and ‘rowspan’ are used in tag for spanning the cells to a particular no. of columns or rows, respectively, as is shown in the examples below: Example - COLSPAN   This section contains the contents of your web page. Result is shown in Fig. 5 below.

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 and . ‘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: 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: “Label” is the value that appears on the button. You may not want to use ‘value’ attribute. When the submit © Copyright Virtual University of Pakistan

26

E-COMMERCE – IT430

VU

button is clicked, the form data is shipped to the URL specified by the 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 and tag. The size of the text area is fixed on the basis of value of attributes ‘cols’ and ‘rows’. Note the following example: Text Area Example Today's Burning Question First Name: Last Name: Today's Burning Question: How to make Pakistan a developed country? Please enter your answer in the text area below: 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.

© Copyright Virtual University of Pakistan

27

E-COMMERCE – IT430

VU

Lesson 07 TEXT BOXES, CHECK BOXES, RADIO BUTTONS - - here ‘value’ attribute would pre-fix the information in the text box which is given as its value (e.g, http://) - -‘size’ is used to set size of the box. - -‘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 Check Box Example Describe Your Phobia! What is your phobia? (Please check all that apply): living below the poverty line Worker of Nationalist Party Supporter ofRepublican Party American Australian Hungarian Indian Iranian Pakistani French Select your favorite city: Sydney London Lahore Countries visited last year: This is a link to 3.HTM Note that ‘target’ is an attribute of the 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.

© Copyright Virtual University of Pakistan

32

E-COMMERCE – IT430

VU

Fig. 4 Code - 3.htm Horizontal Frames This text is from 3.HTM to return to my home page. 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 and tags to assign a link to each of these regions. 3. Add a special version of the 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: 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 A B 399,0 C

© Copyright Virtual University of Pakistan

35

E-COMMERCE – IT430

VU

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 to define the image map Note that we use area tag within the 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: 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. 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.

© Copyright Virtual University of Pakistan

36

E-COMMERCE – IT430

VU

Lesson 09 TAG ATTRIBUTES, SOUNDS FILES, ANIMATIONS 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, Sound Files Sound file formats are: AU,WAV,MP3,MIDI. Sound files can be used in anchor tag as follows: Click here for some greeting!. We can also embed such files using embed tag. Example - Embedding Example - Embedding Click the Play button for some nice music: Result is shown in Fig. 1 below.

Fig. 1 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, 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 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. Tag Text that we put between and 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 © Copyright Virtual University of Pakistan

37

E-COMMERCE – IT430

VU

height Bgcolor=“color” – specifies marquee background Example - Marquee Marquee Discover this amazing compatibility between Islam and Modern Science !

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 tag and a end tag into your document. Put the style tags before body tag. Insert all your style definitions between the style tags. Example An Example of Embedded Method

© Copyright Virtual University of Pakistan

38

E-COMMERCE – IT430

VU

Result is shown in Fig. 4 below.

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 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 tag inside a web page header to apply these style definitions. mystyles.css: h1{color:red} p{font-size:34pt} Example This heading will appear red This line has a 34pt font

Result is shown in Fig. 5 below.

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: © Copyright Virtual University of Pakistan

39

E-COMMERCE – IT430

VU

This heading has font-size 40-point

Result is shown in Fig. 6 below.

Fig. 6

© Copyright Virtual University of Pakistan

40

E-COMMERCE – IT430

VU

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 h1 {font-size:24pt; Color:Blue} This heading has font-size 40-point This heading has 24point font-size Result is shown in Fig. 1 below.

Fig. 1 Applying a style to a section tag is used to divide a page into separate sections. Browser inserts a line break before the tag and after the end tag. By including the “style” attribute inside the tag, one can apply an inline style to everything inside and tags. Example - tag This heading uses a 30-point font This sentence will have 30-point font This heading, too

© Copyright Virtual University of Pakistan

41

E-COMMERCE – IT430

VU

Result is shown in Fig. 2 below.

Fig. 2 Applying a style to a word or phrase Use and and insert the style attribute inside the tag. tag does not provide any line break. Example This heading has font-size 40-point Result is shown in Fig. 3 below.

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 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 Style Sheets: Style Classes This text is in red This text is in green Result is shown in Fig. 4 below.

Fig. 4

© Copyright Virtual University of Pakistan

42

E-COMMERCE – IT430

VU

Using styles to control fonts Style Sheets: Font Sizes Our store offers books on following subjects: Physics, Math, Computer Science, Literature, Ecommerce, History andIslam You can also buy DVDs and music CDs. We offerGreeting Cards, too. Result is shown in Fig. 5 below.

Fig. 5 Font family styles Style Sheets: Font Families This sentence is in Times New Roman This one is in Arial Font Type This is in Courier New Font Type The Arial Font Family This line is in Tahoma Font Family © Copyright Virtual University of Pakistan

43

E-COMMERCE – IT430

VU

Result is shown in Fig. 6 below.

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.

Font Weights You can find books in this shop on subjects such as: Physics, Math, History, Fiction, Poetry, E-commerce, Computer Science, Sociology, Music Result is shown in Fig. 7 below.

Fig. 7 Indenting the first line of a paragraph We can use the property text-indent keeping its value in inches or centimeters. Indenting the first line © Copyright Virtual University of Pakistan

44

E-COMMERCE – IT430

VU

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. 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. Result is shown in Fig. 8 below.

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: 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. 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. 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. 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. Result is shown in Fig. 9 below.

Fig. 9

© Copyright Virtual University of Pakistan

45

E-COMMERCE – IT430

VU

Text decoration styles We can use the property ‘text-decoration’ in inline styles as follows: Text Decoration Introduction to Ecommerce Introduction to E-commerce Introduction to E-commerce Introduction to E-commerce Result is shown in Fig. 10 below.

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.

Style Sheets: Text Transform We love Pakistan We love Pakistan We love Pakistan We love Pakistan Result is shown in Fig. 11 below.

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: © Copyright Virtual University of Pakistan

46

E-COMMERCE – IT430

VU

background-color:blue background-color:#0000FF background-image:URL(filename) Example – Color Styles Backgrounds using Style Sheets This is an example of some blue text in yellow background using Style Sheets. 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. We can also use different background style to highlight individual words as in the present case. 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

Result is shown in Fig. 12 below.

Fig. 12

© Copyright Virtual University of Pakistan

47

E-COMMERCE – IT430

VU

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 (, …) is considered to have an invisible box around it. Stuff inside , to , and 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 This is some text contained in a box. This paragraph is contained in a box 100 pixels high. This paragraph is contained in a box 100 pixels wide. Result is shown in Fig. 2 below.

Fig. 2 © Copyright Virtual University of Pakistan

48

E-COMMERCE – IT430

VU

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 Padding Mind is everything; what you think you become! Mind is everything; what youthink you become! Mind is everything; what you think you become! Result is shown in Fig. 3 below.

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’ © Copyright Virtual University of Pakistan

49

E-COMMERCE – IT430

VU

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 This line is written in a box having inset style border and a border width of 1 centimeter. This line is written in a box having ridge style border and different border colors. Result is shown in Fig. 4 below.

Fig. 4 Margins margin-top: specifies the size of the top margin margin-right: specifies the size of the right margin marginbottom: 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 P{margin-top:100px;margin-bottom:100px;marginleft:200px;margin-right:200px} The great thing in this world is not so much where we are, but in what direction we are moving This heading appears with a bottom margin of 100 pixels

© Copyright Virtual University of Pakistan

50

E-COMMERCE – IT430

VU

Result is shown in Fig. 5 below.

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 DIV {font-size: 18pt} Books Section Toys Section Music Section Clothes Section We must believe in luck. For how else can we explain the success of those we do'nt like?