Webpages by hmoda


									    Web Pages and E-Commerce

         A guide to HTML and other issues

MSc E-Commerce
• Hyper Text Markup Language
• Consists of a fixed set of tags or elements
    – e.g. <HEAD> <BODY> <TABLE>
• Most tags (but not all) have ending tags
    – e.g. <TABLE> </TABLE>
• Many tags have attributes, whose values can
  be set
    – g.g. <BODY bgcolor=“yellow”>
MSc E-Commerce
                         The Browser
• Presents the user interface ( Web Page) to the user
• Browsers understand HTML
• HTML sent in plain text to Browser, which makes the
• HTML is not very strict
   – Attribute values OK with or without quotes “”
   – NB Always use “” around attribute values, why?
       • <input type=“text” name=“txt1” value=John Smith >
       • Value will actually be John not John Smith
• Browsers can often handle poor HTML

   MSc E-Commerce
                 Browser Laxity
•   Browsers lax about HTML syntax
•   Tolerant of lack of well-formed rules
•   <p> came to mean new line not paragraph
•   <b> Bold is turned off by <I> as well as </b>
•   HTML authors became lax too
•   Hand held devices lack power to interpret lax
MSc E-Commerce
• It is recommended that web pages should use XHTML
  rather than HTML to get round some of the laxity
  problems with HTML
• XHTML is a stricter version of HTML based on XML
   – All attribute values must be within quotes “ “ or ‘ ‘
   – All tags must have a closing tag e.g <p> …</p> or must be
     closed e.g. <br /> not just <br>
   – Tags are case sensitive
   – Tags must be nested correctly
• Note: these rules are not enforced by Browsers, but it
  may help with displays on other devices
  MSc E-Commerce
                  Rival Browsers
• Internet Explorer – most widely used
• IE runs on Windows and Macs – not Linux
• Firefox – newer cross platform Browser – has growing market
• Other Browsers only small % share today
    – Netscape, Opera and others
• Various versions of all the main browsers
• Problem – some differences between the main browsers and
  between different versions of browsers
• IE 6 is now a little old – newer versions of other browsers
  implement current standards more than IE does

MSc E-Commerce
     Browser HTML Differences
• Should not be differences with HTML with
  latest versions
• Netscape - older versions
    – had <LAYER> not <DIV>
    – Does not support absolute positioning
• HTML Control tags (<INPUT…>) not
  visible in Netscape unless within
MSc E-Commerce
                 Extra Features
• Browsers added non-standard features for
  competitive advantage
• Standards lagged behind Browsers
• Browsers added support for Frames, Script,
  <OBJECT> tag, and style sheets
• Dynamic HTML for client processing
• XML (Fairly recent versions of Browsers
MSc E-Commerce
                 Some Problems
• Support for new features varies
• Client side Script -
    – IE 4 - JScript VBScript
    – Other Browsers - JavaScript
    – some minor differences between JScript and
• Objects -
    – IE Applets and ActiveX
    – Other Browsers - Applets only
MSc E-Commerce
    – IE – Yes – other Browsers extent of support
      varies, particularly with older versions
• Result - Script may not work in Browser
• Solutions
    – Limit use of client script
    – Prepare different versions for particular browsers
    – Tell user to use particular browser - good idea?

MSc E-Commerce
• XML must be transformed into “HTML”
  for display in a Browser
• Can be done on client through use of
  attached style sheets BUT there are browser
  version problems
• Solution – transform on Server and send out
  content in “HTML”

MSc E-Commerce
   Displaying XML in a Browser
• In IE 5 and Netscape 6
    – as an XML Tree (not suitable for Web Page)
    – formatted by CSS Style Sheet
• In IE 5 and 6
    – Can be transformed by XSL Style Sheet
    – BUT only to an earlier XSL standard, unless Client
      machine has an upgrade installed
    – Without upgrade XSL to current standard = poor results
• Don’t send XML to browsers instead transform
  XML by XSL on the server

MSc E-Commerce
                 Basic Structure
•   <HTML>
•   <HEAD>
•   <TITLE>Appears at top of Browser</TITLE>
•   <STYLE>CSS Sheets etc</STYLE>
•   <METADATA>Keywords></METADATA>
•   </HEAD>
•   <BODY>All displayed contents go here</BODY>
•   </HTML>

MSc E-Commerce
                 Basic Structure (2)
• Not all the main tags are required
• Minimum is the HTML & BODY pairs
• Be careful with Metadata
    –   Keywords used in Search Engines
    –   Don’t be misleading, in hope of getting hits
    –   Don’t use on any page users can’t start on
    –   Don’t use on any page within a frame

MSc E-Commerce
                 “Well Formed”
• Means Tags should be
    – closed correctly <TR> ….. </TR>
    – nested correctly <TR><TD>..</TD></TR>
•   If not nested it may still work (font effects)
•   Sometimes it won’t (Table Rows and Cols)
•   Not all Tags come as pairs (<BR>)
•   Browsers lax about <p>

MSc E-Commerce
     Some Rules for Page Design
• Nielsen’s 10 Tips
• Nielsen reconsidered
• E-loyalty – the content of the page is good
  but what about the colours?
• Critically examine existing sites

MSc E-Commerce
         Some Rules for a Site
• Don’t make the user login till necessary
• Make sure pages are quick
   – Have few and small graphics per page
   – Big pictures only 1 per page
   – Don’t usually use Applets etc
• Make sure Navigation is easy
• Keep user informed
• Some sites need phone backup – have phone
  number on every page
• Use SSL for credit cards etc
• Have security policy and say what it is
MSc E-Commerce
• Make sure site can be used by people with poor
    – Don’t use tiny fonts
    – Don’t set absolute font sizes – this is very common and
      very annoying for those with poor sight.
    – Use alt attribute with pictures <IMG >
    – Make sure site can be driven by keyboard only
      (accesskey attribute)
• Sites – easy to use by poorly sighted easy to use
  by everyone

MSc E-Commerce
                 Usability (2)
• Test site in current versions of main
• Test site in older versions if still widely in
• Test pages under Windows and Linux
• Test pages with low and high resolutions
• Make sure there are no Java Script errors in
  the various browsers
MSc E-Commerce
                 Learning HTML
• Plenty of Books on HTML
• View Source of Web pages
• Learn interactively at w3schools.com

MSc E-Commerce
• Technique for changing appearance
• 3 different Approaches
    – Inline - Set Style attribute of an individual Tag
    – Embedded - use <Style> Tag in the <HEAD>
    – Linked - an external css file in <STYLE>
• In 2 & 3 you set style for all occurrences of
  particular tags
• Methods can be combined
MSc E-Commerce
 Why Use External Style Sheets
• Makes it easier to have common appearance to
  several pages
• Easier to maintain, only need to change contents
  of .css file
• Reduces quantity of HTML on page as well
• Cascading Style Sheets means can use more than
  one css file on same page to control appearance of
  the same tag(s)
• CSS work with HTML - but also important with
• Learn interactively at w3schools.com
MSc E-Commerce
                 XML and HTML
• Form and Content are mixed in HTML
• XML separates Form and Content
• XML data has to be transformed into
  HTML or (XHTML) to create a Web Page
• Transformed either by
    – CSS Style Sheet
    – XSL Transformation (or Both)
• XML not a replacement for HTML
MSc E-Commerce

To top