Transcript Electronic Commerce

Electronic Commerce
COMP3210
Session 3: Designing , Building and Evaluating e-Commerce Initiatives
– Part I
Dr. Paul Walcott
Department of Computer Science, Mathematics and Physics
University of the West Indies, Cave Hill Campus
Barbados
© 2007 Dr. Paul Walcott
The Department of Computer Science Mathematics and Physics, University of the West Indies, Cave Hill Campus, Barbados
Session Objectives

The objectives of this session are:





Comprehend Web site usability issues
To understand HTML and cascading style sheets
To analyse some basic Web site design principles
To apply five criteria in order to determine the
credibility of an Internet source
To construct a Web site using e-commerce and Webbased software
Web Site Design Principles1,2

In this section we
will:


http://www.cybermarket.co.uk/ishop/images/923/429_904.jpg
Briefly discuss
interface design
Present some Web
site design principles
Web Site Design Principles Cont’d

What is an interface?

It is the front end (or user controls) of a
device
E.g. a remote control is the interface for a
television set
 Or a light switch is the interface for an electric
light

Web Site Design Principles Cont’d

So what makes a good Web interface?

It must be easy to use


Important items are always available, yet not
intrusive


E-commerce site should provide links to the checkout
The purpose of the Web site must be immediately
understandable; things must be arranged logically


The Web site functionality must be easy to deduce
This includes no cryptic icons
In addition, the site should be interesting and
colourful (without being irritating)
Web Site Design Principles Cont’d

When designing a Web site the designer must
consider:


The type of screen or device that the Web page will
be displayed on (is it in colour etc.)
Whether the page will be printed



Although this is a secondary issue
The size of the screen
The designer unfortunately does not have full
control over these media
Web Site Design Principles Cont’d

It is important to set a Web site theme. This
is a multi-step process:



Set the Web site goals
Determine your audience
Define the look and feel of the Web site
Web Site Design Principles Cont’d

To determine the goals of your Web site consider
asking the following questions:




What is the purpose of creating your Web site?
Should I concentrate on only one goal?
What will happen if the goals change and how will it
affect the maintenance of the Web site?
Goals need to be balanced against available
resources and time
Web Site Design Principles Cont’d

To determine the audience of the Web site
consider the following factors:






Visitor’s age: young, elderly or ageless?
Language: is there a requirement to support more
than one?
Culture
Income group: who can afford your product/service?
Educational sophistication: scientific Web sites have
less images
Attention span: after a few clicks the visitor might
leave
Web Site Design Principles Cont’d

When considering the Web site look and
feel it is important to communicate:


The company’s logos, name, products and
location
The unique qualities of the company
Web Site Design Principles Cont’d

Design principles





Nonlinear
presentation
One or two screens
per page
Simple navigation
Small graphics for
faster page loading
Appealing visual
effects
Web Site Design Principles Cont’d

The WWW is characterised by:




Non-linear information delivery
Pages that are viewed on desktop PCs, Notebooks
computers, Web-enabled mobile phones and Palm
PCs
Multiple Internet connection options including Fibre
optic lines, TV cable and dial-up phone lines
These characteristics must be considered when
designing a Web site
Web Site Design Principles Cont’d

Nonlinear Presentation:


Traditional media, e.g. a lecture, present
information in a linear way
A Web site should utilise multidimensional hyperlinks for quick, usercentered navigation
Web Site Design Principles Cont’d

One or Two Screens Per Page:

The home page of a Web site should be no
longer than one or two pages
Effective home pages present corporate
information, logos and links on the first or second
screen
 This prevents the need for a significant amount of
scrolling, since the top of the page is what a visitor
sees when entering the site

Web Site Design Principles Cont’d

Simple Navigation:

The layout of a Web site should be clear
and simple allowing easy navigation
Hyperlinks should be grouped together logically
 Each hyperlink should connect a major topic or
category e.g. Products

Web Site Design Principles Cont’d

Navigational links could be presented as:




A bar of file folders
A line of small rectangular or oval buttons
A list of underlined text
For easy navigation links should be placed:


On the left, right or top side of the screen
Or frames could be used which freeze the
navigation controls on the screen
Web Site Design Principles Cont’d

Smaller Graphics For Faster Page
Loading:

The larger the graphics the longer a Web
page will take to load, especially on a
narrow-band connection (e.g. dial-up)

Visitors will probably get fed up and leave the site
Web Site Design Principles Cont’d

As a general rule:




JPEG (Joint Photographic Expert Group
image format) is a 24-bit (16.7 million
colours) image format
Photographs should use the JPEG format
A JPEG pictures on a Web page should be
smaller than 50KB
Not more than two (2) 50KB JPEG images
should be on a single Web Page
Web Site Design Principles Cont’d

Alternatively:



The GIF format (Graphics Interchange
Format by CompuServe) is an 8-bit (256
colours) image format
The GIF format is therefore suitable for
navigation buttons, logos and Icons
Navigation buttons should be smaller than
5KB each

Typical buttons are 1-2KB each
Web Site Design Principles Cont’d

Appealing Visual Effects:

Appealing visual effect can be made using
the right combination of style, layout and
colour
12 point Times New Roman or 11 point Arial fonts
are typically used for regular text
 Headings are usually in a different colour, bold or
in a larger font

Web Site Design Principles Cont’d

Colour contrast between text and background
is crucial



It is best to use a light background colour and dark
text
Special effect (e,g. blinking text) are suitable
for short text strings, e,g, “Special Offer” not
long sentences
Always check the page layout on 12.1” – 15”
diagonal screens since this is the monitor size
for the average user
Web Site Design Principles Cont’d

Some additional design hints include:

Always ensure that the user can get to all
important pages (e.g. product descriptions)
using a small number of mouse clicks


Users get fed-up after a few mouse clicks
Always design your Web site for the
slowest connection speed, and the earliest
browser used by your target audience
Web Site Design Principles Cont’d

Some additional design hints include:

When creating information sites include a lot of
white space; make the pages simple and
uncluttered


Users get fed-up after a few mouse clicks
Always write an outline for your content and
decide whether each major topic will be on a
separate Web page (recommended); and which
sub-topics require their own pages
Constructing a Web Site3,6,7,8

http://www.madventurer.com/images/photo-building-house-past-project.jpg
Software and
hardware
requirements
Constructing a Web Site Cont’d

From the company goals you should be able to
estimate





The number of visitors that will use your site
The number of pages viewed by the average visitor
The average and maximum allowed size of each page
The maximum allowed number of simultaneous
visitors
This allows the software and hardware
requirements to be determined
Constructing a Web Site Cont’d

First let us review some fundamentals
about Web clients and servers
Constructing a Web Site Cont’d
Web Clients and Servers
 When an individual connects to the Internet to
view a document, they become a client on the
Webs client/server network
 The client/server architecture is used for LANs,
WANs and the Web.
 Typical request serviced by servers connected to
these networks include request to print, to retrieve
information and to access databases
Constructing a Web Site Cont’d
Web Clients and Servers
 Web servers typically have




More memory
Larger and faster disk drives than client computers
Web browser software e.g. IE, Netscape and
Firefox is the software that makes computers
work as Web clients
The Internet connects several different types of
computers together, therefore Web software must
be platform neutral
Constructing a Web Site Cont’d
Dynamic Content
 A static page is an unchanging page retrieved
from a disk
 A dynamic page is a page created by a program
(script) based on user input

E.g. a Web client inquires about the status of an order
and the Web page that is returned is created from
information stored in a database
Constructing a Web Site Cont’d
Dynamic Content
 This property (being dynamic) can affect the
performance of the Web Server


static pages are delivered faster than dynamic pages
The first Web site to provide dynamic pages used
server side scripting


Programs running on the Web server that create web
pages
These technologies are slow
Constructing a Web Site Cont’d
Dynamic Content
 Newer technologies used for generating dynamic
content include:



Microsoft’s Active Server pages (ASP)
Sun’s Java Server Pages (JSP)
Apache’s PHP Hypertext Preprocessor (PHP)
Constructing a Web Site Cont’d
Dynamic Web Pages: The Future
 Some critics say that ASP/JSP/PHP etc. do
not solve the problem since they simply
shift the responsibility of Web page
creation from people to programs
 A project that is currently underway to
tackle the problem of dynamic Web page
creation is the Apache Cocoon project
Constructing a Web Site Cont’d
Dynamic Web Pages: The Future
 The Apache Cocoon project:

Is creating a Web development framework that



Allows programmers to query the system using data in XML
format
Receives output in multiple formats including HTML
The content is stored in XML tags which describes
the semantics (meaning) of each content item


A Java servlet handles the information request
A style sheet is applied to the data
Constructing a Web Site Cont’d
Servers
 A Server is any computer used to provide
files or make applications available to other
computers connected to it through a
network


Server software refers to the programs that
run on the server
Web Servers are connected to the Internet
and serve Web pages (e.g. Apache)
Constructing a Web Site Cont’d
Servers


E-mail Servers handle incoming and
outgoing email
Database Servers are server computers on
which database management software runs
Constructing a Web Site Cont’d
Web Client/Server Communication
 When a Web Client requests a page from a Web
server the following occurs




The request is converted into HTTP by the browser
and sent to the Web Server
The Server receives the request and retrieves the
information requested by the Client
The Server formats the information using HTTP and
sends it back to the Client
The Client displays the information in the browser
Constructing a Web Site Cont’d
Web Client/Server Communication
 Web pages may take long to appear because each
page element requires a separate request/response
Constructing a Web Site Cont’d
2/3-Tier Client/Server Architecture
 The typical Web Client/Server model is two tier
because it has one client and one Server
 In the three-tier Client/Server model the third tier
includes Server applications that supply
information to the Web Server

E.g. a catalog style Web site with search, update and
display functions: the catalog database and database
management software would make up the third tier
Constructing a Web Site Cont’d
Web Server Hardware
 Web Servers have
more memory, faster
hard drives and faster
processors (or
multiple processors)
than desktop
machines
Constructing a Web Site Cont’d
Cost
 A high-end desktop PC with 512MB RAM, 3GHz
processor, a 200GB IDE drive, a good monitor
and DVD/CD-RW drive cost between US$2000 $4000 (in 2004)



A low end Web server might cost the same amount
Companies spend between US$6,000 and
$400,000 for a Web server
Suppliers of these servers include Dell, Gateway
and Hewlett Packard
Constructing a Web Site Cont’d
Web Server Architectures
 Server farms refer to large (hundreds, or
thousands) of Web servers used to handle daily
traffic on large Web sites
 A Centralised architecture uses a few very large
and very fast computers
 A Distributed/decentralised architecture uses a
larger number of less powerful computers
Constructing a Web Site Cont’d
Web Server Architectures
 The Centralised architecture requires


Expensive computers
Is more susceptible to technical problems


If one or a few of the servers are unavailable then
a large proportion of the site is unavailable
As a result a backup/recovery plan is essential
Constructing a Web Site Cont’d
Web Server Architectures
 The Distributed/decentralised architecture:




Spreads the risk over a large number of servers
The smaller servers are less expense than larger ones
(the cost of 100 smaller servers is usually less that
the cost of one large one)
Additional hubs and switches are required to link the
servers together and to the Internet
These sites might also use load-balancing systems
which are an additional cost
Constructing a Web Site Cont’d
Load Balancing Systems3
 A load-balancing switch:


A piece of network hardware that monitors
the workload of servers attached to it
Assigns incoming web traffic to the server
with the most available capacity at the given
time
Constructing a Web Site Cont’d
Why Load-balance?
 Allows Highly-Trafficked Sites To Maintain Fast
Response Times
 Server Redundancy - If An Application Server
Goes Down, Your Site Stays Up
 Better Site Performance = Better User Experience
= Better Sales Results
 Readies Your Hosting Configuration For Traffic
Growth & Intense Traffic Spikes
Constructing a Web Site Cont’d
Simple Load-Balancing
 Traffic enters the site
from the Internet
through a router (not
shown in diagram)
 This traffic is then
directed to the
appropriate Web
server by the loadbalancing switch
www.inetu.com
Constructing a Web Site Cont’d
Load Balancing
Systems Cost
 Load-balancing
switches and software
cost between
US$10,000 and
US$50,000
www.inetu.com
Constructing a Web Site Cont’d


http://www.madventurer.com/images/photo-building-house-past-project.jpg
It should now be clear
what hardware and
server software is
required to construct
a Web site
In this next section
we will discuss the
client-side and serverside software used to
construct Web sites
Constructing a Web Site Cont’d
Client-side Technologies
 Client-side Web technologies include:





HTML
XML
JavaScript
VBScript
Java Applets
Constructing a Web Site Cont’d
Server-side Technologies
 Server-side Web technologies include:




Perl/CGI
JSP
PHP
Microsoft ASP
Constructing a Web Site Cont’d

http://www.madventurer.com/images/photo-building-house-past-project.jpg
In addition to the clientside and server-side
software that has just
been discussed, it is also
important to know the ecommerce software that
is available to businesses,
who either want to host
their own Web sites, or
want to outsource the
hosting function
Constructing a Web Site Cont’d
Finding and Evaluating Web Hosts
 When a company takes on the responsibility of
hosting their own Web site this is called selfhosting
 Small and mid-size businesses tend to outsource
to a third party, i.e. use a Web hosting service
provider
 These third parties are called Internet Service
Providers (ISPs), Commerce Service Providers
(CSPs), Managed Service Providers (MSPs) or
Application Service Providers (ASPs)
Constructing a Web Site Cont’d
Finding and Evaluating Web Hosts Cont’d
 To find a host a company must determine what
type of service they require, for example:



A shared hosting service where the Client’s Web site
is on a server which hosts other Web sites
A dedicated hosting service where only the Client is
hosted on the Server
Or, a co-location service where the Client installs his
own hardware and software, and rents a physical
space, a reliable power supplier and an Internet
connection
Constructing a Web Site Cont’d
Finding and Evaluating Web Hosts Cont’d
 A list of Internet service providers can be found
on:





http://thelist.internet.com
http://www.hostindex.com
http://www.tophosts.com
http://www.hostSearch.com
Exercise: use the above sites to find ISPs in North
America
Constructing a Web Site Cont’d
Electronic Commerce Software
 The software requirement for e-commerce
site vary tremendously and are dependent
on several factors including:


The size of the enterprise and its projected
traffic
The budget
Constructing a Web Site Cont’d
Electronic Commerce Software Cont’d
 All e-commerce solutions must provide at
least the following:



A catalog display
Shopping cart capabilities
Transaction processing
Constructing a Web Site Cont’d
Electronic Commerce Software Cont’d
 Larger e-commerce site require additional
functionality, such as:






Middleware that links the company’s existing system
(inventory control, order processing and accounting)
to the e-commerce system
Databases and Applications
Supply chain management software
Customer relationship management software
Content management software
Knowledge management software
Constructing a Web Site Cont’d
Catalog Display
 This is used to organise the goods being sold
 Static catalog



This is a simple list written in HTML that appears on
one or more Web pages
To add or delete items from the catalog it is require to
edit the HTML pages
Dynamic catalog


Information is stored in a database
May feature photographs of items, detailed
descriptions and search facilities
Constructing a Web Site Cont’d
Catalog Display Cont’d
 Smaller Web stores selling fewer than 40 items
only need a list of products or product categories


Images of all the products might be able to fit on the
same page
Larger stores require


More sophisticated navigation, and product
organisation tools
Also they must often alternative ways of finding
products, e.g. product categories as well as a free-text
search capabilities, e.g. “stereos”
Constructing a Web Site Cont’d
Shopping Carts
 In the earlier years of e-commerce text forms
were used to enter orders. These forms were error
prone because customers had to:


Write down product codes, unit prices and other
information about the products before going to the
order form
Customers also had to write down the price of the
item which was often on another page
Constructing a Web Site Cont’d
Shopping Carts Cont’d
 Modern shopping carts keep track of the items a
customer selects, allowing them to add or remove
items, or simply to view the cart
 All information about the item, including its price
and product code are stored in the shopping cart
automatically
 The clicking of a button (e.g. the checkout
button) executes the purchase transaction
Constructing a Web Site Cont’d
Shopping Carts Cont’d
 Some Web commerce sites allow the
storage of items in a shopping cart over a
period of days, allowing the user to come
back and pay for the items at that time
Constructing a Web Site Cont’d
Shopping Carts Cont’d
 Companies that sell shopping cart software
include:

http://www.salescart.com/
A one off cost of $250-$400
 ASP, ASP.Net & PHP


http://www.webgenie.com/
Single User license $495
 Perl/CGI

Constructing a Web Site Cont’d
Transaction Processing
 Transaction processing occurs when the Shopper
proceeds to the virtual checkout



At this point volume discounts, sales tax and
shipping costs are calculated (sales tax and shipping
charges must be kept current)
These calculations must also include any coupons,
special promotions or time sensitive offers (e.g. make
a purchase by a given date and get a discount)
A secure communication link is subsequently
established to transmit payment information
Constructing a Web Site Cont’d
Middleware
 Links the e-commerce software to existing
system
 Middleware may be written in-house or bought
from middleware vendors or consulting firms
 The total cost of a middleware implementation
can range from $50,000 to millions

E.g. of middleware vendors are www.beasys.com and
www.broadvision.com
Constructing a Web Site Cont’d
Databases
 A database manager stores software in a
highly structured way
 The database structure determine how easy
the database manager can retrieve the
information stored in the database
 Smaller e-commerce sites can use low cost
databases such as Microsoft Access
Constructing a Web Site Cont’d
Databases Cont’d
 Larger e-commerce sites require more expensive
data management software such as:




IBM DB2
Microsoft SQL Server
Oracle
These packages cost between US$5,000 and
US$200,000
Constructing a Web Site Cont’d
Databases Cont’d
 An increasing number of companies and
organisations are beginning to use MySQL
which is open source software

Customers pay for service support if required
Constructing a Web Site Cont’d
Application Integration
 Application programs perform specific functions,
e.g. creates invoices
 An application server receives its input from Web
servers which in turn is supplied by the user
 The function of the application software is
dictated by the rules of the business; this is called
business logic
Constructing a Web Site Cont’d
Application Servers
 Application servers are divided into two groups:

Page-based application systems which return pages
generated by scripts containing rules for presenting
the data


Examples include Macromedia ColdFusion, Java Server
Pages (JSP), Active Server pages (ASP) and PHP: Hypertext
Preprocessor (PHP)
This technology works well for small to mid size sites
Constructing a Web Site Cont’d
Application Servers Cont’d

Component-based application systems
separate the presentation logic from the
business logic. Each logical component is
created in a separate module

E.g. Enterprise JavaBeans (EJBs), Microsoft
Component Object Model (COM) and Object
Management Group Common Object Request
Broker Architecture (COBRA)
Constructing a Web Site Cont’d
Web Services
 An accepted definition is not yet available
 However it is a combination of software
tools that allow application software in one
organisation to speak to application
software in another organisation over a
network
Constructing a Web Site Cont’d
Web Services Cont’d




E.g. a mortgage application service company
obtaining information from consumers
forwarding the information to a Building
Society for a mortgage decision
decision is relayed back to the service
company
These services use XML
Constructing a Web Site Cont’d
E-Commerce Software for Small to Mid-Size EBusinesses
 E-commerce software for small to mid-size
business is typically provided by commerce
service providers (CSP)
 CSP have the advantage of


Offering free or low-cost e-commerce site building
software
Cost typically less than US$20 month
Constructing a Web Site Cont’d
E-Commerce Software for Small to MidSize E-Businesses Cont’d



Service appropriate for small businesses
selling no more than 50 items
Transaction volumes of fewer than 20 a day
E.g. ValueWeb hosts over 180,000 Web site
for over 130 countries
Constructing a Web Site Cont’d
Mall-style CSP
 Provide small businesses with:





An Internet connection
Web site creation tools
Little or no banner advertising clutter
Shopping cart software, and payment processing
The monthly fee is higher than lower-end
providers (therefore less ads)


May charge a one-time setup fee
Percentage or fixed charge for every transaction
Constructing a Web Site Cont’d
Mall-style CSP Cont’d
 Examples include eBay Stores and Yahoo!
Stores
Constructing a Web Site Cont’d
Estimating Operating Costs For Small Web
Business Using ISP

The first year cost (in US dollars) for Web businesses that
sell less than 50 different items








Initial site setup fee
Annual maintenance
Domain name registration
Scanner or digital camera
Photo editing software
Occasional HTML design help
Merchant credit card setup
Total first year cost
$200
$1200
$70
$500
$100
$400
$200
$2670
Constructing a Web Site Cont’d
Cost of Self Hosting a Site for a Small Business
 Setup and Web site maintenance includes





Equipment: (server and network gear) one time cost
of US$3000 - $20000
Communication: T1 or fractional T1 cost US$1200 US$12,000 per year
Physical location: (e.g. room security, air conditioning
and communication access) cost $5,000 a year
Staff: minimum cost US$50,000 - US$100,000
annually
Total cost US$60,000 - US$100,000 or more for the
first year, and about the same in subsequent years
Constructing a Web Site Cont’d
Cost of Self Hosting a Site for a MediumSize and Large Business
 The startup cost is US$100,000 US$500,000


Recurring annual cost of 50% this amount
Large businesses spend US$1 million US$50 million to launch, with 50%
recurring annual cost
Constructing a Web Site Cont’d
Software Tools For Medium-Size to Large EBusinesses
 The software tools for midsize to large businesses
include:





Macromedia Dreamweaver
Microsoft FrontPage
Visual Studio .Net – for dynamic pages
Shopping carts, content management software
Middleware
Constructing a Web Site Cont’d
Software Tools For Medium-Size to Large EBusinesses Cont’d
 Buying and using mid-range e-commerce
software has an annual cost of US$2,000 US$50,000



Offers connectivity to database systems
Provides connections to existing inventory control
software
E,g, IBM Websphere Commerce Professional Edition
(cost US$80,000 per processor)
Constructing a Web Site Cont’d
E-Commerce Software for Large Businesses
 Higher transaction loads required
 Software cost much more
 Extensive support for B2B commerce
 Requires several dedicated computers, Web
server systems and firewalls
 E.g. IBM WebSphere Commerce Business
Edition
Constructing a Web Site Cont’d
Customer Relationship Management
 The goal is to understand the customer’s
specific needs and customise the product to
suit them
 A customer whose needs are being met
exactly is willing to pay more for goods or
services
Constructing a Web Site Cont’d
Customer Relationship Management Cont’d
 CRM software requires input from





Sales automation
Customer service centre operation
Marketing campaigns
Customer activity data from the Web site
This helps managers to:




Gather business intelligence
Plan marketing strategy
Perform customer behaviour modelling
Product and service customisation
Constructing a Web Site Cont’d
Customer Relationship Management
Cont’d
 E.g. Siebel Systems; price starts at around
US$200,000; an average of about
US$5,000 per user
Constructing a Web Site Cont’d
Supply Chain Management
 Helps to coordinate planning and operations with
industry partners
 SCM software helps with



Planning: helps companies develop coordinated
demand forecast using information from partners
Execution: helps with warehousing and
transportation management
E.g. i2 Technologies. A wholesaler with 3-4
distribution Centres might have to pay US$1 million
for the SCM software
Constructing a Web Site Cont’d
Content Management Software
 Used to update or maintain Web site
content
 Allows control of large amount of text,
graphics and media files
 E.g. Documentum which cost between
US$200,000 - $500,000
Constructing a Web Site Cont’d
Knowledge Management Software
 Helps companies to






Collect and organise information
Share information among users
Enhance the ability of users to collaborate
Retain knowledge gained to be used by future users
E.g. IBM Lotus Discovery Server
KM software can cost between US$50,000 to US$1
million or more
Evaluating Web Sites4

The Internet provides a
rich source of
information, however


http://www.class.uidaho.edu/psyc218/images/evaluate.jpg
Although it is tempting
to think that everything
is on the Internet, it is not
There are many Web
sites with inaccurate,
confusing and
misleading information
Evaluating Web Sites Cont’d


Since there is no editor in charge of the
Internet it is necessary to evaluate Web
sites before using the information on them
Many criteria have been suggested in the
literature for the evaluation of the
credibility of an Internet source
Evaluating Web Sites Cont’d

However the criteria that this course will
adopt are:





Authority
Accuracy
Objectivity
Currency
Coverage
Evaluating Web Sites Cont’d
Authority
 Authority is concerned with the credentials of the
author of the information




Who has created the Web page content?
Is there any author contact information?
What degrees or experience does the author have?
These questions help to determine whether the
author is a reliable source or even an expert in the
subject area
Evaluating Web Sites Cont’d
Accuracy
 This is concerned with the accuracy of the
information contained in the Web site



Can any of the facts be verified against another
source?
Are there spelling or grammatical errors (since this
helps to indicate whether the author took care in
writing the material)?
Is there a person or body responsible for the accuracy
of the information (e.g. the Publishers of a Journal do
blind peer reviews)?
Evaluating Web Sites Cont’d
Objectivity
 This is an attempt to determine whether the
information is objective or biased


Does the author have a clear point of view?
Is the site run by Government, a University or
a business trying to sell a product?
Evaluating Web Sites Cont’d
Currency
 This is concerned with the publication date of the
article
 On Web sites this is not always clear
 Information that is updated regularly is more
likely to be useful as references for research
papers
 Web sites with links that go nowhere (i.e. dead
links) often indicate that it has been abandoned or
that the information is simply not up to date
Evaluating Web Sites Cont’d
Coverage
 This is concerned with whether information about
a given topic is covered in-depth
 Shorter articles, which are most common on the
Internet, tend not to have the depth of information
required for research papers
 Articles for bibliographies or a list of references
provide a valuable source of additional articles
that can be used
Evaluating Web Sites Cont’d

Typically, the order of importance of
sources are:




Peer-reviewed Journals
Peer-reviewed conference proceedings
.gov, .edu sites (run by the government and
Universities)
.org, .com, .net sites (run by individuals or
companies)
Web Site Usability5,9,10,11

“From whence we
came”

Early Web sites
simply provided
information and
often did not include
e-mail addresses;
those who did did
not have enough
staff to respond to
the email
Web Site Usability Cont’d

A visitor should be given access to the:





organisation’s history,
A statement of objectives/mission statement
Information about products or services
A way to communicate with the organisation
Every visitor to a Web site is a potential
customer

It is difficult to meet all the needs of visitors
Web Site Usability Cont’d

Some of the motivations of visitors
include:





Learning about products and services
Buying products or services
Obtaining general company information
Identification of the management team and
their contact information
Obtaining company financial information in
order to make investment decisions
Web Site Usability Cont’d
Meeting Visitors Needs
 To meet the needs of Web site visitors you must
consider:




The expectation level and experience when they enter
your site
The communication channel used to connect and the
bandwidth
The web browser used
The add-ins available for the browser being used
Web Site Usability Cont’d
Build Flexible Web sites
 Separate version with and without frames
 Text-only versions (for visually impaired people
who use special browser software)
 Give users the option to download smaller
versions of graphics
 If audio or video clips included, give user the
option to select the connection type (so that
adjustments may be made for bandwidth)
Web Site Usability Cont’d
Build Flexible Web sites Cont’d
 Let users select the level of detail, viewing
format and download format
 Offer visitors multiple information formats
(e.g. HTML, PDF or Excel spreadsheet for
financial data)
Web Site Usability Cont’d
Macromedia Flash
 There has been some controversy
surrounding the use of Macromedia Flash:


The files (which are not rendered in HTML)
take a long time to download, especially if
you do not have a broadband connection
Few major e-commerce sites use these type of
animated graphics pages
Web Site Usability Cont’d
Macromedia Flash Cont’d


Some tasks however do lend themselves to
animation (e.g. pants fitting at
http://www.leefit.com/)
One solution is to offer Flash or non-Flash
pages
Web Site Usability Cont’d
Web Site Design Goals
 A Web site developer should try to meet the
following goals:




Provide easily accessible organisational information
Provide a two-way communication link with the
organisation
Encourage return visitors (e.g. announce upcoming
content) and keep the attention of existing visitors
Provide full access to products and services
Web Site Usability Cont’d
Customer Trust and Loyalty
 Customer trust/loyalty translates to return visits

A customer that purchases a product from a business
and gets good service will begin to trust the business.
Multiple good experiences leads to loyalty

A 5% increase in customer loyalty can yield 25-80% profit
Web Site Usability Cont’d
Customer Trust and Loyalty
 Customer service on E-commerce sites



Research indicates a rating between average to low
There is often a lack of integration between the call
centres and the Web site
E-mail responsiveness is also an issue (slow or no
replies to emails)
Web Site Usability Cont’d
Usability Testing
 Companies are only now performing usability
testing on their Web sites
 Average e-commerce sites frustrate up to 70% of
their users (resulting in the user leaving the site
without purchasing anything)


Sites are confusing or difficult to use
In many cases simple changes can improve the
usability of the site
(See http://www.cs.umd.edu/hcil/ and http://www.useit.com/alertbox/ for
further details)
Web Site Usability Cont’d
Customer-centric Web Design
 The following guidelines serve to meet the needs
of the customer (as opposed to any Web site
visitor):




Arrange links in the way that a customer would use
them
It should be possible to access information quickly
Keep product and service descriptions simple, do not
over sell by including a lot of marketing
Keep the language simple and jargon free
Web Site Usability Cont’d
Customer-centric Web Design Cont’d

The Web site should work with the oldest
browser, running on the oldest computer at
the lowest bandwidth



This might mean several different versions of the
Web site are required (what about the cost of
updating content?)
Label all navigational aids clearly
Test text visibility on smaller monitors
Web Site Usability Cont’d
Customer-centric Web Design Cont’d



Choose colour combinations that would not
impair the vision of colour-blind visitors
Test the usability of your site using potential
users
Always ensure that enough information has
been provided for the customer otherwise
they will go elsewhere.
Web Site Usability Cont’d
Web site Response Times 9,10,11
 The required response time for hypertext
navigation is one second, therefore your
Web pages should be no more than 3KB
(assuming a 28.8kbps modem which most
users have).
 The above limitation rules out most
graphics
Web Site Usability Cont’d
Three Important Response Times
 The basic advice on response times are:




0.1 seconds for a user to feel that a system is
instantaneous
1.0 seconds for the user’s thought to remain
uninterrupted
10 seconds for keeping a users attention
Generally, the response time should be as fast as
possible
Web Site Usability Cont’d
Continuous Feedback
 When an immediate response is not possible
continuous feedback should be provided
 Myers11 suggests a percentage completed
indicator, if the operation takes more than 10
seconds, which has three advantages:



It assure the user that the system has not crashed
It indicates how long the user has to wait
It provides the user with something to look at, which
makes the wait less painful (for this reason a graphic
progress bar is far better than text)
Web Site Usability Cont’d
Continuous Feedback Cont’d
 When the amount of work to be done by an
operation is unknown a percentage completed
indicator might be inappropriate
 In this case a number of progress indicators are
still available:


If an operation has a defined set of steps, these steps
could be displayed as they are started and completed
As a last resort progress indicator, such as dots
printed on a status line or a spinning ball could be
used – which indicates that the system is working
Web Site Usability Cont’d
Continuous Feedback Cont’d
 For operations that complete within 2 – 10
seconds a percentage done indicator is
unnecessary10
Building a Web Site
In this section you will
learn how to:
 Create Web pages
using XHTML 1.0
http://www.madventurer.com/images/photo-building-house-past-project.jpg
Building a Web Site Cont’d


A Web site comprises of a set of Web pages
Each Web page is coded in a markup
language called the Hypertext Markup
Language1 (HTML) (often in association
with other scripting languages)

HTML is the language used for creating
hypertext documents on the World Wide Web
(WWW)
Building a Web Site Cont’d


HTML is used to format text and
information
HTML files are simply text files (with a
.html or .htm extension) that contain a
variety of elements called tags

Elements (delineated by tags) are used to
markup text (e.g. <B>Bold</B> makes text
bold) and browsers are responsible for
rendering (displaying) this text
Building a Web Site Cont’d




HTML is platform independent
HTML was implemented using the Standard
Generalized Markup Language1,2 (SGML)
Several versions of HTML have been created; the
latest are HTML 4.01 and XHTML 2.0
XHTML extends HTML and reformulates it into
XML

XML is the Extensible Markup Language which is
also implemented using SGML
Building a Web Site Cont’d

The World Wide Web Consortium (W3C)
is responsible for maintaining the HTML
recommendations

W3C can be found at http://www.w3c.org
Building a Web Site Cont’d

Standard Generalized Markup Language1,2 or
SGML (http://www.webreference.com/dlab/books/html/3-0.html)




Is a business standard for data storage and
interchange
Is an international standard for text information
processing
Provides distribution, search and retrieval of
electronically stored text
Is platform independent
Building a Web Site Cont’d

SGML was made to allow:



The structure of each document was defined in a
file called the document type definition (DTD)


the structuring of data
The formatting of data using a style sheet
Separation of presentation and validation
A parser (software capable of analysing document
syntax and structure) is subsequently used to
validate the document without processing it
Building a Web Site Cont’d

Typically a strict XHTML 1.01 document
contains:

Elements



The DOCTYPE element
One root element, i.e. HTML
A HEAD element


A BODY element


May contain the META, SCRIPT and TITLE elements, among
others
Contains block formatting and character formatting elements
Attributes
Building a Web Site Cont’d
Elements
 Elements are delimited by tags, e.g. the
body element which is delimited by the
<body> and </body> tags


These elements are simply containers
An element contains a string of characters
and nested elements
Building a Web Site Cont’d
Elements
 Element names are case sensitive, and must be
specified as lower-case
 All elements must be closed, e.g.
<b>This is bold</b>

Even the <br>, <hr> and <img> tags which did not
have to be closed in earlier versions of HTML

E.g. <br></br> or <br />
Building a Web Site Cont’d
Elements
 Some elements can not contain nested
elements, such as line break <br />
Building a Web Site Cont’d
Elements
 Elements may be classified into three groups:




Document type
Comment
Structure
Note that the document type and comment
elements are SGML commands, therefore must
begin and end with “<!” and “>”, respectively
Building a Web Site Cont’d
Elements
 In XHTML 1.0 a document type (DOCTYPE)
element must be specified before any other tag


The only exception to this rule is the comment (or
<xml> tags) which may appear before the
DOCTYPE element
The DOCTYPE element specifies that the
document conforms to SGML and the defined
document type definition (DTD)
Building a Web Site Cont’d
Elements
 But what is a DTD?1


It is a description of a markup language
It is a text document (e.g. html.dtd for the HTML
DTD) that contains formal definitions of all the data
elements of a given markup language (e.g. HTML,
SGML or XML)


Therefore it provides rules for tags and attributes
A document containing elements can then be checked
against a DTD to determine if it is valid
Building a Web Site Cont’d
Elements
 The DOCTYPE definition that we will use for
our documents is Strict XHTML 1.0:
<!DOCTYPE html PUBLIC “-//W3C//DTD
XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/
xhtml1-strict.dtd”>
 Any given XHTML 1.0 document can then be
validated using the validator tool at
http://validator.w3.org
Building a Web Site Cont’d
Elements
 The Comment is also an SGML declaration and is
opened with the characters “<!” and terminated
with “>”
 The actual Comment element therefore starts with
“--” and includes all text up to the next “--”


E.g. <!-- This is a comment -->
The structural elements are the remaining
elements that make up the heart of HTML, e.g.
tags such as <b> and <table>
Building a Web Site Cont’d

Attributes



Attributes are supplied by the HTML author and
allow changes to a characteristic of the element
Attributes are placed inside the start tag of an
element and consist of a name/value pair
e.g. <img src=“newImage.jpg” alt=“An
image of a dog” />

src and newImage.jpg are the attribute and value,
respectively
Building a Web Site Cont’d

Attributes


Attribute names are case-sensitive and must
be specified in lower-case
All attribute values must be quoted, either
with single or double quotes, e.g.
<img src=“smile.jpg” alt=“A smiling icon” />
 Or <img src=‘smile.jpg’ alt=‘A smiling icon’ />
 Or <img src=‘smile.jpg’ alt=“A smiling icon” />

Building a Web Site Cont’d

Tags



Tags specify the start and end of elements
Tags are delimited by the symbols “<“ and
“>”, e.g. the bold tag <b>
In XHTML 1.0 there is always an opening
and closing tag
Building a Web Site Cont’d

Character Sets

ASCII (American Standard Code for Information
Interchange) is an 8-bit (1 byte) character encoding
based on the English alphabet


First published as a standard in 1967
UTF-8 is a variable length character encoding for
Unicode and represents a single character in one to
four bytes

The initial encoding for UTF-8 corresponds with ASCII,
making this character set popular

See http://en.wikipedia.org/wiki/UTF-8
Building a Web Site Cont’d

Character Sets
The character encoding that will be used in
our XHTML 1.0 documents is the UTF-8,
which may be defined using the following
META element:
<meta http-equiv="content-type"
content="text/html; charset=UTF-8" />
 The META element must be placed within the
HEAD element

Building a Simple Web Page

Let us begin by building the
simple Web page illustrated on
the left. It displays:




the message “Welcome
World!” in bold text
a list of things that will be
appearing on the Web page
An image of the person who
built the page
Remember that a Web page is
just a text document with an
extension of .html (or .htm) so
we can use Microsoft Notepad
(or any text editor) to create it
Building a Simple Web Page Cont’d



The first line in any HTML document
should be a comment or the DOCTYPE
element (or the <xml> tag)
We will use a comment so that the author
of the Web site and what it does can be
documented
The format of the comment element is
illustrated below:
Building a Simple Web Page Cont’d
Comment
 Function


An XHTML 1.0 Code Example


Places a comment in an HTML document
<!–- This is an example of a
comment -->
Things to Note

A comment may extend over several lines
Building a Simple Web Page Cont’d



The next thing to include is the DOCTYPE
element for Strict XHTML 1.0
Next we include the <html> tag which simply
indicates that this is an HTML document
Remember that the <html> tag has a closing tag,
</html>

Note the use of the forward slash character “/” rather
than the black slash “\” in the closing tag
Building a Simple Web Page Cont’d



All HTML document should have a head element
and body element
The opening and closing tags for the head
element are <head> and </head> respectively
The head element specifies:



the title of the page, which appears at the top of the
browser window
The character set to use
Among other things
Building a Simple Web Page Cont’d

The format of the title element is simply:




The opening tag <title>
The actual title text, in our case “My first page”
The closing tag </title>
We can specify the UTF-8 character set using the
META element:
<meta http-equiv="content-type"
content="text/html; charset=UTF-8" />
Building a Simple Web Page Cont’d


What needs to be added now is the body element
whose opening and closing tags are <body>
and </body>, respectively
Within our body element we will display:




The Welcome World! header
A list of things that will appear on our site
A photograph of the author of the Web page
Let us begin by writing the HTML code for the
“Welcome World!” header
Building a Simple Web Page Cont’d


XHTML 1.0 allows six headers, <h1>
through <h6> to be used in documents
The <h1> header is the largest of these
headers and will be the one that we will use
in our simple HTML example

The syntax of the <h1> header is described
below
Building a Simple Web Page Cont’d
Headers
 Function

Define headers
An XHTML 1.0 Code Example
<h1>Chapter 1</h1>
<h2>1. An Introduction</h2>
<h3>1.1 Literature Review</h3>
 Things to Note





Headers <h1> through <h6> exist
<h1> is the largest header
<h6> is the smallest header
One of the parent elements can be the BODY element
Building a Simple Web Page Cont’d

The HTML code for our Welcome World!
header will therefore look like this:
<h1>Welcome World!</h1>
Building a Simple Web Page Cont’d


The next thing we need to do is to include
our list
We could have either used an ordered list
(the <ol> tag, a numbered list) or an
unordered one (the <ul> tag, a bulleted
list) to accomplish this

However, the unordered list was chosen
Building a Simple Web Page Cont’d

The list items that we want to include on our page
are:



The names of my friends
The phone numbers of my friends
Photographs of my friends

In order to do this, two HTML tags are be
required, <ul> and <li>

The syntax of these tags is described below:
Building a Simple Web Page Cont’d
Unordered Lists
 Function


Creates a bulleted list of items
Example HTML code
<ul>
<li>This is the first item</li>
<li>This is the second item</li>
</ul>

Things to Note

An unlimited number of list items (<li>) may be included
Building a Simple Web Page Cont’d

Our list will therefore look like this:
<div>The list of things that will
appear on this Web page are:</div>
<ul>
<li>The names of my friends</li>
<li>The phone numbers of my
friends</li>
<li>Photographs of my friends</li>
</ul>
Building a Simple Web Page Cont’d


Notice that the text that appeared before the list
was placed in <div> tags.
The DIV element simply allows us to specify a
division in an XHTML 1.0 document

the text could not be placed directly within the
BODY element


It had to be embedded within an element that can be a child
of the BODY element, such as the DIV element
The syntax of the DIV element is described
below
Building a Simple Web Page Cont’d
Division
 Function

Specifies a document section/division
An XHTML 1.0 Code Example
<div>This is a section in a document</div>
 Things to Note



Unlike the PARAGRAPH element a blank line does
not appear immediately after a division
A line break is placed before and after a division in
most browsers
Building a Simple Web Page Cont’d
Division
 Things to Note (Cont’d)


A <div> tag may contain <p> tags, and
header elements, i.e. <h1> to <h6>
For a list of the parents and children of this
tag go to:
http://www.zvon.org/xxl/xhtmlReference/Out
put/index.html
Building a Simple Web Page Cont’d


Finally we need to insert the image of the
author
Where can we get an image from?

There are a number of ways to get images
including:
Scanning a photograph using a digital scanner
 Taking a picture using a digital camera

Building a Simple Web Page Cont’d

For Web sites there are two main image formats
(a new format called PNG is also starting to
become popular). These are:

.GIF (Graphic Interchange Format) images which are
8-bit colour images


This means that the image may have up to 28 =256 different
colours
.JPG (short for .JPEG, Joint Photographic Experts
Group) which are 24-bit colour images

May have up to 224 different colours
Building a Simple Web Page Cont’d


Let us assume that we captured our image
using a digital camera and it is called
clown.jpg
We now need to use the IMG element to
display this image on our Web page
Building a Simple Web Page Cont’d
Images
 Function


Displays an image
An XHTML 1.0 code Example
<img src=“photo.jpg” alt=“My
picture” />
Building a Simple Web Page Cont’d
Images
 Attributes




Alt – defines a short description of the image
Height – specifies the height of the image
Width – specifies the width of the image
An HTML Code Example Using These Attributes
<img src=“photo.jpg” height=“50”
width=“40” alt=“Photograph” />

Resizes the image to 40x50
Building a Simple Web Page Cont’d
Images
 Things to Note



The alt attribute is required
Specifying the height and width of the image helps to
ensure that the layout of the page is not affected even
when the image has not yet loaded
This element has several other attributes (see
http://www.w3schools.com/tags/tag_img.asp for a
complete list)
Building a Simple Web Page Cont’d

The following HTML code displays our
image:
<img src=‘clown.jpg’ height =
“106” width=“84” />

Note that since our image is actually
84x106 no image resizing is required
Our completed page look like:

Building a Simple Web Page Cont’d
<!-File:
Description:
Author:
Date:
firstPage.html
Displays "Welcome World", followed by a list and an image
Paul Walcott
28/11/06
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>My first page</title>
</head>
<body>
<h1>Welcome World!</h1>
Welcome world! header
<div>The list of things that will appear on this Web page are:</div>
<ul>
<li>The names of my friends</li>
<li>The phone numbers of my friends</li>
<li>Photographs of my friends</li>
</ul>
The lists of things
on my site
<div><img src="images/clown.jpg" alt="A picture of Mr. Clown" height="106" width="84" /></div>
</body>
</html>
The Photo of Mr. Clown
Constructing Web Pages



So far we have only constructed a simple Web
page
In order to construct a more complicated Web
page we need to learn some more XHTML
elements.
In this section we will look at:

<b>, <strong>, <i>, <em>, <p>, <pre>, <hr>, <a>,
<table>

Also see the following Web sites:
http://www.zvon.org/xxl/xhtmlReference/Output/index.html
http://www.w3schools.com/tags/default.asp
Constructing Web Pages (Cont’d)
Bold
 Function

Renders as bold text
An XHTML 1.0 Code Example
<div><b>This text is bold</b></div>
 Things to Note


Although this is valid XHTML 1.0 you should really use styles
sheets instead


Most browsers will render the <strong> tag in bold anyway
The BOLD element is not a child of the BODY element – it is a
child of DIV though
Constructing Web Pages (Cont’d)
Strong
 Function

Renders as strong emphasised text
An XHTML 1.0 Code Example
<div><strong>This is strong text</strong></div>
 Things to Note



Most browsers will render the <strong> tag in bold
The STRONG element is not a child of the BODY
element – it is a child of DIV though
Constructing Web Pages (Cont’d)
Italics
 Function

Renders as italics text
An XHTML 1.0 Code Example
<div><i>This text is in italics</i></div>
 Things to Note


Although this is valid XHTML 1.0 you should really use styles
sheets instead


Most browsers will render the <em> tag (emphasise) in italics
anyway
The ITALICS element is not a child of the BODY element – it is
a child of DIV though
Constructing Web Pages (Cont’d)
Emphasise
 Function

Emphasises text
An XHTML 1.0 Code Example
<div><em>This text is emphasised</em></div>
 Things to Note



Most browsers will render this tag as italics
The EMPHASISE element is not a child of the
BODY element – it is a child of DIV though
Constructing Web Pages (Cont’d)
Paragraph
 Function

Specifies a paragraph
An XHTML 1.0 Code Example
<p>This is a paragraph</p>
 Things to Note


This element is separated from other elements
by a vertical break
Constructing Web Pages (Cont’d)
PreFormat
 Function


Specifies pre-formatted text
An XHTML 1.0 Code Example
<pre>This text is on the first line
This text is on the second line
and, this text is on the third line
</pre>
Constructing Web Pages (Cont’d)
PreFormat
 Things to Note



Line breaks and spaces embedded in text with
<pre> tags are normally preserved
A fixed pitch font is normally used
Is a child of the <body> tag
Constructing Web Pages (Cont’d)
Horizontal Rule
 Function

Inserts a horizontal rule/line
An XHTML 1.0 Code Example
<hr />
 Things to Note


This tag must be closed
Constructing Web Pages (Cont’d)
Anchor Tag
 Function


Defines an anchor; creates a bookmark within a
document or a hyperlink to another document
An XHTML 1.0 Code Example
<a id=“section1”>Section 1</a>
…
<a href=“#section1”>Link to Section 1</a>
<a href=“http://www.google.com”>Go to
Google</a>
Constructing Web Pages (Cont’d)
Tables
 Function


Creates a table
An XHTML Code Example

<table border =“1” cellspacing=“0” cellpadding =“0”>
<tr>
<td>row 1, col 1</td>
<td>row 1, col 2</td>
</tr>
<tr>
<td>row 2, col 1</td>
<td>row 2, col 2</td>
</tr>
</table>
Constructing Web Pages (Cont’d)
Tables
 Things to note



Tables may be nested
The table element is a child of the body element
Optional attributes for the <table> tag


Cellspacing – specifies the spacing in pixels between
adjacent cells
Cellpading – specifies the spacing in pixels between
the contents of a cell and the cell border
Constructing Web Pages (Cont’d)
Tables
 Optional attributes for the <table> tag
(Cont’d)

Width – sets the width of the table


The width of a cell may be expressed as a number
of pixels or a % of the screen’s width
Border – specifies the size of the border in
pixels, a value of 0 means that there is no
border
Constructing Web Pages (Cont’d)
Tables
 Attributes for the <td> tag




Rowspan – allows cells in adjacent rows to be
merged
Colspan – allows cells in adjacent columns to
be merged
Valign – sets the vertical alignment of the cell
Align – sets the horizontal alignment of the
cell contents
Constructing Web Pages (Cont’d)


Since tables are so important (they are
widely used on the Web today) it is
important to get a good grasp of them
We will achieve this through an extensive
set of examples
Constructing Web Pages (Cont’d)



In our first example a simple table without a
border is created
Notice how we use indentation in the XHTML
code to make it easier to distinguish between the
rows and the columns
On our screenshot the code is in the left window,
while the rendered XHTML is in the right
window

Note some elements, e.g. DOCTYPE have been
removed in order to simplify the code
Constructing Web Pages (Cont’d)
Constructing Web Pages (Cont’d)

In our next example, we use the border
attribute of the <table> tag to give the
table a border
Constructing Web Pages (Cont’d)
Constructing Web Pages (Cont’d)


In our next example we increase the
number of pixels between the contents of
the cell and the cell border
This is achieved using the cellpadding
attribute of the <table> tag
Constructing Web Pages (Cont’d)
Constructing Web Pages (Cont’d)


In our next example we increase the
number of pixels between adjacent cells
This is achieved using the cellspacing
attribute of the <table> tag
Constructing Web Pages (Cont’d)
Constructing Web Pages (Cont’d)




Sometimes we want a cell in a table to span
more than one cell
This is achieved through the colspan
attribute which merges adjacent horizontal
cells
The value of this attribute is set to the
number of cells that need to be merged
See the example
Constructing Web Pages (Cont’d)
Constructing Web Pages (Cont’d)

We can set the horizontal alignment of the
contents of a cell through the use of the
align attribute as shown in our next
illustration
Constructing Web Pages (Cont’d)
Constructing Web Pages (Cont’d)


Not only can we merge cells horizontal, we
can also do it vertically
This can be seen in our next example


Notice the use of the rowspan attribute
In addition this example demonstrates how
vertical align is achieved through the use of
the valign attribute
Constructing Web Pages (Cont’d)
Constructing Web Pages (Cont’d)


If you need to change the height or width
of a cell you should use cascading style
sheets
An interesting side-effect occurs when a
given cell is left blank


the given cell will not have a border
To solve this problem simply add a nonbreaking space (i.e. &nbsp;)
Constructing Web Pages (Cont’d)
Special Characters
 In HTML special characters, called
character entities, are represented in two
possible ways:



&code;
&#number;
A list of some of the popular special
characters have been presented below
Constructing Web Pages (Cont’d)
Code
&nbsp;
&lt;
&gt;
&frac14;
&amp; or &#38;
&quot;
&copy;
&apos;
Special Character
A non-breaking space
<
>
¼
&
“
©
‘
Cascading Style Sheets Cont’d


A cascading style sheet (CSS) allows the
size and style of fonts to be set for elements
within an HTML document
By defining styles in a single location (i.e.
a style sheet) any changes that need to be
made to the style subsequently is easily
achieved
Cascading Style Sheets Cont’d

Two versions of cascading style sheets are
maintained by W3 (http://www.w3.org):




CSS1 (http://www.w3.org/TR/CSS1)
CSS2 (http://www.w3.org/TR/CSS2)
CSS3 is still in a draft form
(http://www.w3.org/TR/css3-roadmap/)
Internet Explorer now supports CSS2

See http://www.w3.org/Style/CSS/ to determine the
browsers that are supported
Cascading Style Sheets Cont’d



The CSS1 specification includes font,
border, background, margin, link and list
styles
These styles can be embedded in a page or
in an external style sheet
The style can be applied to a single or
group of tags
Cascading Style Sheets Cont’d

“CSS2 supports media-specific style sheets so
that authors may tailor the presentation of their
documents to visual browsers, aural devices,
printers, braille devices, handheld devices, etc.
This specification also supports content
positioning, downloadable fonts, table layout,
features for internationalization, automatic
counters and numbering, and some properties
related to user interface. “
(http://www.w3.org/TR/REC-CSS2/)
Cascading Style Sheets Cont’d

Embedded Style Sheets

The tags required for embedded style sheets
are <style> … </style>

To ensure that the style sheet loads before the
page’s body it is included in the <head> …
</head> tags

The STYLE element also requires a TYPE
attribute of “text/css”
Cascading Style Sheets Cont’d

Embedded Style Sheets Example
<style type=“text/css”>
#blue { color : blue}
</style>
Cascading Style Sheets Cont’d

External Style Sheets

The tag required for external style sheets is
<link />

To ensure that the style sheet loads before the
page’s body it is included in the <head> …
</head> tags

The LINK element also requires a TYPE
attribute of “text/css”
Cascading Style Sheets Cont’d
External Style Sheets Example
<link type=“text/css” rel=“stylesheet”
href=“style.css” />
 And in a file called style.css the following
is defined:
#blue { color : blue}

Cascading Style Sheets Cont’d

The CSS1 specification has several
properties including the background and
color properties

These set the background and text colours,
respectively, for a number of HTML tags
including

<body>, <table>, <tr>, <td>, <th>,
<h1>, <p> and <pre>
Cascading Style Sheets Cont’d

The value associated with the background
and color properties are:



A recognised colour name e.g. blue
A set of hexadecimal numbers in the format
#RRGGBB, e.g. #0000FF for blue, or
A set of decimal number in the format rgb
(0…255, 0…255, 0…255), e.g. rgb(0,0,255)
for blue
Cascading Style Sheets Cont’d

There are three ways that a given style may be
associated with an HTML element (or group of
elements):

Using generic styles




ID
Class
Using tag specific styles
When creating new XHTML document the Class
style should only be used for backwards
compatibility
Cascading Style Sheets Cont’d

The format of the generic ID style is:
#Name1 {property1 : value1; …
propertyn : valuen}

And is used by an element, e.g. the Header
element in the following way:
<h1 id=“Name1”>Header</h1>
Cascading Style Sheets Cont’d

The format of the generic Class style is:
.Name2 {property1 : value1; …
propertyn : valuen}

And is used by an element, e.g. the Header
element in the following way:
<h1 class=“Name2”>Header</h1>
Cascading Style Sheets Cont’d

The format of tag specific styles is:
tagname {property1 : value1;
…
propertyn : valuen}

For example p {color : blue} which
sets the text in all paragraphs to blue
Cascading Style Sheets Cont’d

Let us look at a simple example.

In this example two styles are created



one using the CLASS attribute that creates a 14pt, red Serif
font with a yellow background style and
the other using the ID attribute that creates a 10pt green Arial
font with a white background style
And a style is also associated with the division
element

The style sets the text colour to blue
Cascading Style Sheets Cont’d
<html>
<head>
<style type="text/css">
<!-#newsheading {color : red;
background: yellow;
font-family : "Serif";
font-size : 14pt}
.comicTitle { color : green;
background : white;
font-family : "Arial";
font-size : 18pt}
div { color : blue }
-->
</style>
</head>
<body>
<div>Election results
<h1 id="newsHeading">Poll Results are in!</h1>
<h1 class="ComicTitle">Poll Results are in!</h1>
</div>
</body>
</html>
Cascading Style Sheets Cont’d
Cascading Style Sheets Cont’d

Note that it is recommended that you use
external rather that embedded style sheets
References
[1] Darnell, Rick, et al., “HTML4: Unleased”, Sams.net Publishing, First Edition, 1997
[2] Zhao, Jensen J., “Web design and development for e-business”, Prentice Hall, 2003
[3] INetU, “Load Balancing”, 2004. Online document available at
www.inetu.net/services/loadbalancing.php
[4] Burrell, Carolyn, Hingley, Chris, “Evaluating Business Web Sites”, 2002. Online document
available at
http://avconline.avc.edu/library/Distance_Ed/Business/eval_business_web_sites.htm
[5] Nielsen, Jakob, “Flash: 99% Bad”, Alertbox, Oct. 2000. Online document available at
http://www.useit.com/alertbox/20001029.html
[6] Schneider, Gary, P., “Electronic Commerce: The second wave”, Thomson Course
Technology, Fifth Annual Edition, 2004
[7] W3C, “HyperText Markup Language (HTML) Home Page”, 2004. Online document
available at http://www.w3c.org/MarkUp/
[8] Deitel, H., Deitel, P., Nieto, Frank, L., Lin, Ted, M., Sadhu, Praveen, “XML: How to Program”, PrenticeHall Inc., 2001
References
[9] Jakob Nielsen, “Why this site has almost no graphics”, 2005. Online document available at
http://www.useit.com/about/nographics.html
[10] Jakob Nielsen, “Response Times: The Three Important Limits”, 1994. Online document
available at http://www.useit.com/papers/responsetime.html
[11] Myers, B. A., “The importance of percent-done progress indicators for computer-human
interfaces.”, Proc. ACM CHI'85 Conf. (San Francisco, CA, 14-18 April), 1985, 11-17