_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1  Wiley and the book authors 2001 E-Commerce: Fundamentals and Applications Chapter 3 : Client-Side Programming

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications2  Wiley and the book authors 2001 Outline Key issues on client-side Web programming Web page design and production techniques Overview of HTML Basic HTML tags on Web page design such as:  Hyperlinks  Images & Image maps  HTML Tables  HTML Frames  HTML Forms Other advanced techniques such as Cascading Style sheets and JavaScript

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications3  Wiley and the book authors 2001 Important factors on Client-side Web programming Major factors in client-side Web programming include: Downloading time Data validation (e.g. type checking) Usability of existing computer software  measured by how easily and how effectively it can be used by a specific set of users, given particular kinds of support, to carry out a defined set of tasks, in a defined set of environments

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications4  Wiley and the book authors 2001 Important factors on Client-side Web programming (cont.) Factors which make up a usable user interface: System feedback Consistency Error prevention Performance / efficiency User like / dislike Error recovery

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications5  Wiley and the book authors 2001 Web page design and production Major steps in Web page design and production: Define audiences and the information requirements Develop logical design of the Web site Develop the perceptual design Content creation Programming Posting and hosting the site

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications6  Wiley and the book authors 2001 Overview of HTML Hypertext Markup Language (HTML) is a markup language for telling a Web browser how to format and display a Web page It is a subset of the Standard Generalized Markup Language (SGML) - a formal markup language for defining document format. HTML employs pre-defined tags to specify the format of a web page. For example, by putting the word “Italics” inside the tag pairs (i.e., Italics ), the word “Italics” will be displayed by the Web browser in Italics form.

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications7  Wiley and the book authors 2001 HTML - Basic format The basic structure of a HTML document is formed by the following tags:

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications8  Wiley and the book authors 2001 Basic HTML tags and a simple example A simple web page First level heading Second level heading The font face is Courier and the font size is 15pt. The font colour is red. The text is in italic form. The text is underlined. The text is expressed in bold face. This is superscript and this is subscript. This text is blinking.

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications9  Wiley and the book authors 2001 Simple example (cont’d) This is a simple bullet list: First item Second item This is a simple numbered list: First item Second item

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications10  Wiley and the book authors 2001 Snapshot of the example Web Page (Fig. 3.3)

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications11  Wiley and the book authors 2001 Links Define by, HREF gives the URL to be accessed The URL can be absolute or relative:  Art (absolute URL)  Science (in the current directory)  (go back one directory)  (in the webroot directory) What are the differences? 

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications12  Wiley and the book authors 2001 There are two commonly used compressed image formats:  GIF and JPEG GIF:  Lossless compression  Transparent  Give 256 colors  Support animation (animated GIF)  Suitable for general-purpose images JPEG:  Lossy compression  Give “million of colors”  Suitable for photos Images

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications13  Wiley and the book authors 2001 Here is an example of the image tag using all the attributes:  SRC: URL of the image  ALT: image description during loading  HEIGHT: height of the image  WIDTH: width of the image  BORDER: border size  ALIGN: alignment method You can also create an image link, e.g., Images (cont.)

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications14  Wiley and the book authors 2001 HTML Table The table tag is... The row tag is... The heading tag is... The data cell tag is... Fig. 3.4 shows an example of a simple table incorporating the table tags and other common attributes.

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications15  Wiley and the book authors 2001 Table Example (Fig. 3.4)

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications16  Wiley and the book authors 2001 What are HTML Forms? Forms are generally used to obtain data from the client for submission to the server. Typically, a program in the server is invoked to process the data, possibly with the assistance of the backend system. The result (in most cases, an HTML file) will then be passed to the web client by using the HTTP.

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications17  Wiley and the book authors 2001 HTML Forms - general format General format: Form input elements Regular HTML content  ACTION: URL of the program for processing the form data  METHOD: methods for passing data to the server:  GET: attach at the end of the URL  POST: embed in the HTTP request message

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications18  Wiley and the book authors 2001 Common HTML Form elements Common HTML Form elements include:  Input tag types:  Text  Password  Checkbox  Radio button  Submit button  Reset button  Button (to be assigned a function using JavaScript)  File  Hidden  Image  Textarea  Select menu

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications19  Wiley and the book authors 2001 Cascading Style Sheets (CSS) In HTML 4.0, Cascading Style Sheet (CSS) is available to separate the style from the structure By using CSS, a single style sheet can be applied to several web pages requiring the same style There are three types of CSS, namely  external style sheets;  embedded style sheets;  inline style sheets.

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications20  Wiley and the book authors 2001 What is JavaScript? JavaScript is a scripting language proposed by Netscape to enhance the functions of HTML It is often called an Object-oriented (OO) scripting language with syntax looking like Java It can be used to produce interactive and dynamic Web pages It is supported by most commonly-used browsers including MS. IE and Netscape’s Navigator. Unlike the server-side programs, a JavaScript code is included in an HTML document and executed on the client-side For details, refer to Netscape's site on JavaScript (

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications21  Wiley and the book authors 2001 Basic structure of JavaScript A JavaScript code is embedded between the and tags as follows: HTML file with JavaScript code <!--- Put the JavaScript code here. //--> …

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications22  Wiley and the book authors 2001 Sample JavaScript: Hello World A sample Javascript example: Hello World JavaScript Hello World <!-- document.write(" "); document.write(" JavaScript : Hello World!! "); document.write(" "); document.write("Current URL is: "); document.write(location.toString()); document.write(" Current time is: "); document.write(Date()); //-->

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications23  Wiley and the book authors 2001 Sample JavaScript : Hello World (Fig. 3.6)