LZT 108 3339
Mobile Phone
R380
Design Guidelines
for WAP Services
e
Contents
PREFACE _______________________________________________ 2
Who Should Read this Guide?
Overview of Contents
2
2
2
Related Publications
Ericsson Publications
Other Publications
2
2
Terminology
3
Abbreviations
Definitions
3
3
GENERAL USABILITY ASPECTS ____________________________ 4
USER INTERFACE ISSUES_________________________________ 5
The Browser Display
The On-screen Keyboard
Navigating
5
6
6
DESIGN COMPONENTS ___________________________________ 7
Using Text
Font Size and Font Style
7
7
8
9
Line Spacing and Line Breaks
Paragraphs
Indented Paragraphs
The Card Title Bar
10
11
Using Select Lists
11
Single Choice Lists
Multiple Choice Lists
11
12
Using Buttons
13
14
15
17
18
18
Using Input Fields
Using Images
Using Hyperlinks
Using Images as Hyperlinks
Using Tables
THE PIZZA PENGUIN EXAMPLE ___________________________ 21
1
PREFACE
This document describes how to design WAP services for the Ericsson Mobile Phone R380.
Who Should Read this Guide?
This document is intended for developers of WAP services who want a deeper insight into
designing applications for the Ericsson R380 WAP browser.
It is assumed that the reader is familiar with the WAP concept and WML.
Overview of Contents
The chapters in this document are organized as follows:
General Usability Aspects
This chapter gives an overview of issues to be taken into account when developing
WAP services for Ericsson R380.
User Interface Issues
This chapter gives a description of the physical and logical input/output devices of the
R380 and the way these are used together with WAP services.
Design Components
This chapter contains information about graphical user interface components. The
chapter also contains several examples of WML code as well as figures showing how
these are presented in the browser.
The Pizza Penguin Example
This chapter contains a complete WAP application in WML code.
Related Publications
Ericsson Publications
[1]
WAP White Paper
February 1999
AU-System AB
Other Publications
[2]
Wireless Application Protocol Architecture Specification
Version 30-Apr-1998
Wireless Application Protocol Forum, Ltd.
2
[3]
WAP Wireless Markup Language Specification, Version 1.1
Version 16-JUN-1999
Wireless Application Protocol Forum, Ltd.
Terminology
Abbreviations
GIF
Graphics Interchange Format
Hypertext Transfer Protocol
Uniform Resource Identifier
Uniform Resource Locator
Wireless Application Protocol
WAP Bitmap
HTTP
URI
URL
WAPTM
WBMP
WML
Wireless Markup Language
Definitions
Bookmark
A named reference to a URL. Enables the user to keep track of
favorite pages and then return to them, easily, later on.
Card
A single WML unit of navigation and user interface. May contain
information to present to the user, instructions for gathering user
input, etc.
Card Contents
Subject data stored or generated at an origin server. The card
contents display text, images, buttons and other controls supported
by WML as a response to a user request. When a user performs an
action in the card contents, the WAP Browser responds according to
the WML specification.
Card Title
An attribute in the WML Card element specifying advisory
information about the card.
Card Title Sequence
A generic concept for visualizing the progress and history of a WML
application. The number of titles in the sequence is dependent on the
number of cards that have been browsed.
Current Card
Deck
The card whose contents is currently displayed in the browser.
A collection of WML cards.
Image
WBMP or GIF image contained in a Card.
newcontext
An attribute in the Card element indicating that the current browser
context should be re-initialized upon entry to this card.
WAP Application
A collection of WML cards, with the newcontext attribute set in the
entry card.
WAP service
A WML application residing on a web site.
The R380 WAP browser.
WAP Services
3
GENERAL USABILITY ASPECTS
When it comes to designing any kind of electronic service, simplicity is the key to gaining
acceptance and appreciation from users. Simplicity is even more important in a mobile
environment since the user often needs to concentrate on other things as well as using the
terminal.
Keep information and text short and meaningful. Since overview is crucial, keep lists and
menus fairly short. Do not force the user to scroll through more than 4-5 displays (corresponds
to 25-35 lines). Try to avoid long words and abbreviations because the screen real estate is
limited. Hard to understand abbreviations might be misinterpreted. Try to use short and
meaningful words instead.
Remember that there is a size limit to what can, in practice; be sent to the terminal in one deck.
Keep the size of the decks at less than 3.800 bytes (images not included). Images should not be
more than 3.800 bytes per image. Use images to supplement text rather than replace it.
Depending on service, it could be wise to stay well below the above-mentioned limits from a
usability perspective. We recommend user testing on all services being done in a live
environment.
Use few levels in menu hierarchies since:
1. The user can easily get lost in complex and deep menu systems.
2. Depending on the bearer and the structure of the WML code, it could be slow to move
down through a multi-level menu system.
Use header texts since headers are used as card titles, which describe the contents of a card.
Card titles should say something about the context the user is currently in. Card titles are also a
navigational aid for users, helping them to remember where they are in an application.
Use links to access more information. Links are a powerful tool for linking different
information items and preventing long pages of text.
Tip: A R380 browser can be identified at the server side by the contents of the HTTP/1.1
header User-Agent request field. At the server side knowledge of the identity of the requesting
browser then can be used in order to start WAP services tailor-made for this particular
browser.
The above-mentioned identity of the R380 browser is:
“R380 2.0 WAP1.1”
Unfortunately no standardized method exist in order to pull out this information. The methods
are different depending brand and version of the Internet server used. Please consult your
Internet server documentation for details on how to make use of the information contained in
the HTTP header fields.
4
USER INTERFACE ISSUES
The Browser Display
The Ericsson R380 display is a grey scale black and white touchscreen with a resolution of
360x120 pixels with 0.23 pitch. This means an active screen size of almost 83x28mm.
The browser display has three sections: the Browser Area, the Card Title bar at the top, and the
Toolbar to the right.
Browser Area
The Browser area is where the card content is presented to the user. The size of the area is
310x100 pixels. This includes a top margin of 2 pixels and a left and right margin of 3 pixels
each, which reduces the size of the usable area.
If a card content is too extensive to be visible in full, only the beginning of the card will be
visible when first displayed. In this case a vertical scroll bar appears to the right in the browser
area. The scroll bar reduces the browser area width by 16 pixels.
Since the browser does not have a horizontal scroll bar, all text is wrapped.
Graphical components, text and images are displayed in the browser area starting in the upper
left-hand corner and shown in the same order as they appear in the WML code.
Card Title Bar
The Title bar shows which card is presently being displayed and also the cards that have been
browsed through previously. If there are more cards being browsed through than can fit into the
Title bar, only the most recent titles are displayed.
This is a good reason to keep card titles short and meaningful.
5
Toolbar
The Toolbar is an area containing buttons required by the browser.
The On-screen Keyboard
Text input is done with on-screen keyboards or a character recognition screen. Three different
keyboard layouts are available: an alpha layout, a numeric layout and a layout with national
characters.
Touching anywhere in an input field makes the keyboard, or character recognition screen,
appear.
Navigating
In order to navigate to a WAP service, three methods are available.
•
Frequently visited locations can be bookmarked once and then reached easily using the
Bookmark. When bookmarking, the title of the application entry card is the default name of
the bookmark. The number of bookmarks that can be saved is in practice almost unlimited.
•
•
Newly visited locations can be reached by using the History list.
New locations can be reached by entering the URL in the Open Location dialog using the
on-screen keyboard.
Browsing through information in an application is done by activating hyperlinks and touching
buttons in the browser area.
In order to provide an easy way of navigating backwards, the Toolbar contains a Back button.
Touching the Back button navigates the user back in the WAP services. Next after the first card
in the current service has been reached, the first card in the previous service is displayed.
6
DESIGN COMPONENTS
This chapter gives an overview of the graphical user interface components and a description of
their corresponding WML elements. These items are then used when designing WAP services.
The “Look and Feel” of the components is described and guidelines are made on component
usage. The WML elements and their attributes are also listed and a brief description is given.
The WML element descriptions are, supplemented with WML code as well as figures showing
the way this is displayed in the browser area of the R380.
Note! The description below does not include all possible WML elements and attributes, but all
elements affecting the graphical user interface.
Using Text
Font Size and Font Style
The font used in R380 is a proportional font. A proportional font gives a dynamic and
minimized width for each character, which improves readability of the displayed texts. This
generally allows more characters to be displayed per line.
The used typeface name is “Swiss A” and three different font sizes are used: small, normal and
big.
Font size
Height
Number of lines
Small
Normal
Big
9 pixels
7.5
7
10 pixels
14 pixels
5
The normal and big fonts can be shown in either regular or bold style, the small font only in
regular.
WML
The R380 browser supports all emphasis elements. The big and small elements change the
font size. The em, strong, i, b and u elements are all handled in the same manner (all
fonts, except small, are shown in bold).
7
A text formatting example
<wml>
<card id="first" title="Pizza Penguin" newcontext="true">
<p align="center">
<br/>
<b><big><a href="#second">Welcome</a></big></b><br/>
to<br/>
The Mobile Way of Ordering Pizza.<br/><br/>
<a href="#fifth">[Contact Us]</a>
</p>
</wml>
Line Spacing and Line Breaks
The line spacing in the R380 browser is single line with one additional pixel before the line and
one after. If a line is too long to fit horizontally in the browser area, the line will be word-
wrapped onto multiple lines. Any suitable inter-word space is used as line break point.
Text can co-exist with images, select lists, buttons, input fields and hyperlinks all on the same
line.
WML
The beginning of a new line is defined by a br element.
The br element affects all contents in the browser view. Text, images, select lists, buttons,
input fields, hyperlinks and tables are positioned on a new line according to the current
alignment.
The br element can also be used inside a table cell (see Using Tables below).
A line break example
The example below shows how the br element will affect the card content appearance.
<wml>
<card id="init" title="BR tag">
<p>
This text will continue until the end of the line and
then wrap to a new line. This is the normal way of
displaying text. This sentence is followed by a br
element.<br/>
So, this sentence will start on a new line.<br/><br/>
This sentence is preceded by two br elements.
Here is some more text, blah, blah, ...
</p>
</card>
</wml>
8
Paragraphs
Text on a WML card comprises one or more paragraphs.
A paragraph always starts on a new line and is preceded by an extra line space of 3 pixels.
Text within a paragraph is by default displayed left aligned. However, it can optionally be
displayed right aligned or centered.
WML
Paragraphs are defined by using the p element.
The p element also establishes the alignment attribute for a paragraph.
Attribute
Description
align
The align attribute can take the following values: left,
right and center. Left alignment is the default alignment
mode.
A paragraph example
The example below shows how the p element and the align attribute affect the card content
appearance.
<wml>
<card id="init" title="P tag">
<p>
<b>LEFT</b><br/>
This text is left aligned. The text will continue until
the end of the line and then wrap to a new line.<br/>
</p>
<p align="center">
<b>CENTER</b><br/>
This text is centered. The text will continue until the
end of the line and then wrap to a new line.<br/>
</p>
<p>
</p>
<p align="right">
<b>RIGHT</b><br/>
This text is right aligned. The text will continue until
the end of the line and then wrap to a new line.
</p>
</card>
</wml>
9
Indented Paragraphs
Related text and other components can be grouped together to increase usability. Such groups
can be nested.
Each group is indented 20 additional pixels and preceded by an extra line space of 3 pixels.
A header in bold font can optionally precede a group. In such a case a so-called hanging indent
applies.
WML
The beginning of a group is defined by using the fieldset element.
Attribute
Description
title
The value of the title attribute, if present, will be used
as a leading text to the group of text and objects. The text
following the title will be located on a new line.
A fieldset example
The example below shows how the use of fieldset elements affects the card content
appearance.
<card id="pizzainfo" title="What's On">
<p>
<fieldset title="Cappriciosa">
Mozzarella, tomato sauce, prosciutto, olives, artichokes
and mushrooms
</fieldset>
<fieldset title="Quatro Staggioni">
Tomato, mozzarella, ham, artichokes and mushrooms
</fieldset>
<fieldset title="Margherita">
Fresh tomatoes, fresh mozzarella & basil
</fieldset>
.
.
.
.
</p>
</card>
</wml>
10
The Card Title Bar
See Card Title Bar on page 5.
WML
The title in the Card Title bar is defined by using the title attribute in the card element.
Using Select Lists
A select list is an input component that specifies a list of options for the user to choose from.
Single and multiple choice lists are supported.
Single Choice Lists
A single choice list is used for the selection of one and only one item in a list. The list is
presented as a drop-down listbox.
In its closed state the listbox displays the currently selected value within angled brackets (see
Select Pizza in the example below). The component is 15 pixels high and surrounded by 5
pixels of white space to the left and right. The width adapts to the length of the text within the
brackets. However, if the total width should have exceeded 150 pixels the text is truncated.
In its opened state, a list with an optional scrollbar is displayed. The number of lines is
unlimited (see Select Size in the example below).
The text in a single choice list is displayed using the Normal bold font.
WML
Two elements define a single choice list: select and option.
Single choice lists are specified using the select element with the multiple attribute set
to No. Each list item is specified by an option element.
The select element
Attribute
Description
multiple
The multiple attribute can take the following values:
Yes and No. The default value is No.
To create a single choice list, this attribute is set to No.
The title attribute is not supported.
11
The option element
Text in the option element content is used in the drop-down list.
The title attribute is not supported.
An example of a single choice list
<p>
<b>Select Pizza</b>
<select>
<option>Cappriciosa</option>
<option>Quatro Staggioni</option>
<option>Margherita</option>
<option>Campagnola</option>
<option>Siciliana</option>
</select>
<a href="#pizzainfo">What's On</a>
</p>
<p>
<b>Select Size</b>
<select>
<option>Large</option>
<option>Medium</option>
<option>Small</option>
</select>
</p>
Multiple Choice Lists
A multiple choice list is used for the selection of zero, one or more items in a list. The list is
presented as a number of check boxes, one for each choice.
Each check box is located on a new line and followed by 2 pixels of white space.
Multiple choice lists may be organized into hierarchical groups. Each new hierarchical group is
indented 20 pixels and preceded by an extra line space of 3 pixels. A header in Normal regular
font can, optionally, precede a group.
WML
Three elements define a multiple choice list: select, option and optgroup.
Multiple choice lists are specified using the select element with the multiple attribute
set to Yes. Each check box item is specified by an option element.
12
The select element
Attribute
Description
multiple
The multiple attribute can take the following values:
Yes and No. The default value is No.
To create a multiple choice list, this attribute is set to Yes.
The option element
Text in the option element content is displayed to the right of the check box using the
Normal regular font.
The title attribute is not supported.
The optgroup element
The optgroup element allows grouping of related option elements into a hierarchy.
Attribute
Description
title
The value of the title attribute is used as a leading text
to the group of options. The text is located on a new line.
An example of a multiple choice list
<p>
<b>Select Extras</b>
<select multiple="true">
<option>Mushrooms</option>
<option>Mozzarella</option>
<option>Garlic</option>
</select>
</p>
Using Buttons
Buttons are components that start actions or change states.
Buttons are shown as rounded rectangles and designed to contain text of variable length.
Buttons have a constant height and a minimum, standard width, from which it can be lengthened
to accommodate the contained text. The text in a button is displayed using the Normal Bold
font.
Buttons are placed three pixels below the current baseline and surrounded by 5 pixels of white
space to the left and right.
A button may be located anywhere in the text flow of the browser area.
13
WML
Buttons are defined by using the do element.
Pressing the button invokes the action defined in the do element.
The R380 supports the following attributes:
Attribute
Description
label
The value of the label attribute is used as text on the
button. The text is not truncated.
type
If no label is specified, then the value of the type
attribute is used on the button.
The type attribute can take the following values: accept,
prev, help, reset, options, delete and unknown.
Note: If two do elements have identical type values, name attributes must be specified in order
to create unique bindings.
A do example
<p align="center">
<do type="accept" label="Continue">
<go href="#third"/>
</do><br/>
</p>
Using Input Fields
Input fields are the only components enabling a user to enter text.
The input field displays the text within angled brackets. The component is 15 pixels high and
surrounded by 5 pixels of white space to the left and right. The width adapts to the length of the
text within the brackets. However, if the total width should have exceeded 150 pixels the text is
truncated. An empty field is displayed as if it contained three space characters.
The text in an input field is displayed using the Normal bold font.
14
Touching the screen anywhere in an input field makes the keyboard, or character recognition
screen, appear (see The On-screen Keyboard above).
WML
Input fields are defined by using the input element.
The following attributes are supported:
Attribute
Description
type
The type attribute can take the following values: text and
password.
If type is set to password, the characters entered in the
On-screen Keyboard are replaced by asterisks when
displayed.
value
If no pre-load value is defined for the input object, the
value of the value attribute is used as a default text in
the input field.
maxlength
title
Maximum number of characters a user can enter.
The value of the title attribute is used as label in the
first line of the On-screen Keyboard component.
An input example
<p>
Name<input type="text" title="Enter name:" name="name"/><br/>
Address<input type="text" title="Enter address:"
name="address"/>
</p>
Using Images
The R380 browser supports images in WAP bitmap (WBMP) and GIF formats.
WBMP supports black and white.
If the GIF format is used, three different “colors” are available:
White
0% black
Mid-grey
Black
50% black
100% black
An image is always loaded after the WML code. During the load time, the browser displays a
rectangular placeholder. See the figure below.
15
However, the R380 user can choose not to load images at all. In this case, the placeholder is
permanent.
There is no limitation on the height of an image. A user must scroll in order to view a large
image.
However, if the image is wider than the browser area, only the leftmost part of the image is
visible.
WML
The img element indicates that an image is to be included in the text flow.
The R380 supports the following attributes:
Attribute
Description
alt
An alternative textual representation for the image used
when card contents including an image is copied into
another R380 application.
src
The source (URI) of the image.
vspace
This attribute specifies the amount of white space to be
inserted above and below the image.
The default value is 0.
hspace
height
width
This attribute specifies the amount of white space to be
inserted to the left and right of the image.
The default value is 0.
This attribute indicates the vertical size of an image and is
used to reserve space when rendering the card before the
image is loaded.
This attribute indicates the horizontal size of an image and
is used to reserve space when rendering the card before
the image is loaded.
align
The align attribute can take the following values: top,
middle and bottom. Bottom alignment is the default
alignment mode for images.
The value of the align attribute indicates what part of
the image should be aligned to the corresponding part of
the current text line.
The vspace, hspace, height and width attributes are only supported when specified
as absolute values.
Tip: Always include the height and width attributes when using images. This guarantees that
the card layout pattern will be correct when first displayed, even if no images have yet been
loaded.
16
An image example
<p align="center">
<img alt="baker"src="baker.gif" vspace="5" width="40"
height="30"/><br/>
<b>The oven is turned on, and your pizza will be delivered
just in time.</b><br/>
</p>
Using Hyperlinks
Hyperlinks are underlined text or a graphic that can be tapped to navigate within a deck or go to
a new deck on a WML site, to initiate a voice call or to start composing an e-mail.
A hyperlink may be located anywhere in the text flow. Text in hyperlinks is displayed in the
same font as the text preceding the link, but the text is underlined. Touching a hyperlink
highlights the link text using reverse video. Touch and release on a link invokes the action
associated to the link.
WML
Hyperlinks are specified using the a element.
A hyperlink example
Three different links are shown in the example: a mailto link, a voice call link and an interdeck
link.
<card id="fifth" title="Contact Us">
<p align="center">
<br/>
<a href="mailto:[email protected]">
Send a mail to Pizza Penguin</a><br/><br/>
<a href="wtai://wp/mc;+464690510">Call Pizza Penguin
</a><br/><br/>
</p>
<p align="center">
<a href="#first">[Go to Start]</a>
</p>
</card>
17
Using Images as Hyperlinks
An image can also serve as a link. By default, there are no differences in image layout if the
image serves as a link or not. However, the R380 browser can be set to show image links with a
frame of 1 black and 1 white pixel. This affects the card layout.
WML
An image hyperlink example
<p align="center">
<br/>
<a href="mailto:[email protected]">
<img alt="Penguin" src="mail.gif" width="44"
height="50"/></a>
          
<a href="wtai://wp/mc;+464690510"><img alt="Baker"
src="phone.gif" width="42" height="50"/></a><br/>
</p>
Using Tables
Due to its wide display, the R380 browser has good support for tables. Tables are used to make
information easier to grasp and analyze.
The R380 browser displays a table in columns and rows without a border. The table is located
on a new line. Empty table cells and empty table rows are significant and are included in the
presentation of the table.
A column’s contents can be left aligned, centre aligned, or right aligned. The browser will
handle a multiple-lines cell, which may result from wrapping of cell contents.
The width of each column is determined by the maximum width of the text or images in that
column. If the width of the table turns out to be too large, the size of each column is reduced
proportionally and the contents wrapped if possible.
Tables can also be used to format card contents that includes images in an appealing way.
18
In addition to text and images, tables can also contain hyperlinks and images used as hyperlinks.
WML
The table element is used together with tr and td to create a set of aligned columns of text
and images.
The tr element is used as a container to hold a single table row.
The td element is used as a container to hold a single table cell data.
Attribute
Description
align
Alignment of cell content is fully supported.
The align attribute can take the following values:
L (left), R (right) and C (centre). Left alignment is the
default alignment mode.
columns
Specifies the number of columns for the table.
The Polar Weather table example
<card id="First" title="Polar Weather" newcontext="true">
<p>
<table align="ccccc" columns="5">
<tr>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
</tr>
<tr>
<td>
<img alt="weather"src="rain.gif" width="30" height="30"
hspace="10" vspace="3"/></td>
<td>
<img alt="weather"src="cloudy.gif" width="30" height="30"
hspace="10" vspace="3"/></td>
<td>
<img alt="weather"src="sun_in_cloud.gif" width="30"
height="30" hspace="10" vspace="3"/></td>
<td>
<img alt="weather"src="sun.gif" width="30" height="30"
hspace="10" vspace="3"/></td>
<td>
<img alt="weather"src="sun.gif" width="30" height="30"
hspace="10" vspace="3"/></td>
</tr>
19
<tr>
<td>Rain</td>
<td>Overcast</td>
<td>Partly Cloudy</td>
<td>Sunny</td>
<td>Sunny</td>
</tr>
<tr>
<td>5-10°C</td>
<td>6-7°C</td>
<td>10-11°C</td>
<td>10-14°C</td>
<td>14-20°C</td>
</tr>
</table>
</p>
</card>
The Pizza Penguin table example
<card id="first" title="Pizza Penguin" newcontext="true">
<p>
<table align="cc" columns="2">
<tr>
<td>
<a href="#second"><img alt="Penguin" src="bigpenguin.gif"
hspace="4" vspace="3" width="88" height="88"/></a></td>
<td>
<br/><b><big><a href="#second">Welcome</a></big></b><br/>
to<br/>
The Mobile Way of Ordering Pizza.<br/><br/>
<a href="#fifth">[Contact Us]</a></td>
</tr>
</table>
</p>
</card>
20
THE PIZZA PENGUIN EXAMPLE
Below is a complete WML code listing from a WAP demonstration application. The examples
in the previous chapters were mainly selected from this application.
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="first" title="Pizza Penguin" newcontext="true">
<onevent type="ontimer">
<go href="#second"/>
</onevent>
<timer value="70"/>
<p>
<table align="cc" columns="2">
<tr>
<td>
<a href="#second"><img alt="Penguin" src="bigpenguin.gif"
hspace="4" vspace="3" width="88" height="88"/></a></td>
<td>
<br/><b><big><a href="#second">Welcome</a></big></b><br/>
to<br/>
The Mobile Way of Ordering Pizza.<br/><br/>
<a href="#fifth">[Contact Us]</a></td>
</tr>
</table>
</p>
</card>
<card id="second" title="Order">
<p>
<b>Select Pizza</b>
<select title="Type">
<option>Cappriciosa</option>
<option>Quatro Staggioni</option>
<option>Margherita</option>
<option>Campagnola</option>
<option>Siciliana</option>
</select>
<a href="#pizzainfo">What's On</a>
</p>
<p>
<b>Select Size</b>
<select title="Size">
<option>Large</option>
<option>Medium</option>
<option>Small</option>
</select>
</p>
21
<p>
<b>Select Extras</b>
<select title="Extras" multiple="true">
<option>Mushrooms</option>
<option>Mozzarella</option>
<option>Garlic</option>
</select>
</p>
<p align="center">
<do type="accept" label="Continue">
<go href="#third"/>
</do><br/>
<a href="#fifth">[Contact Us]</a>   
<img alt="Penguin" src="xspenguin.gif" width="11"
height="19"/>   
<a href="#first">[Go to Start]</a>
</p>
</card>
<card id="third" title="Delivery">
<p>
<b>Please Enter Your Name and Address</b>
</p>
<p>
Name<input type="text" title="Enter name:" name="name"/><br/>
Address<input type="text" title="Enter address:"
name="address"/>
</p>
<p align="center">
<do type="accept" label="Submit order">
<go href="#sixth"/>
</do><br/>
<a href="#fifth">[Contact Us]</a>   
<img alt="Penguin" src="xspenguin.gif" width="11"
height="19"/>   
<a href="#first">[Go to Start]</a> 
</p>
</card>
<card id="fifth" title="Contact Us">
<p align="center">
<br/>
<a href="mailto:[email protected]">
<img alt="Penguin" src="mail.gif" width="44"
height="50"/></a>
          
<a href="wtai://wp/mc;+464690510"><img alt="Baker"
src="phone.gif" width="42" height="50"/></a><br/>
</p>
<p align="center">
<a href="#first">[Go to Start]</a> 
22
</p>
</card>
<card id="sixth" title="Oven On">
<p align="center">
<img alt="baker" src="baker.gif" vspace="5" width="40"
height="30"/><br/>
<b>The oven is turned on, and your pizza will be delivered
just in time.</b><br/>
</p>
<p align="center">
<a href="#fifth">[Contact Us]</a>   
<img alt="Penguin" src="xspenguin.gif" width="11"
height="19"/>   
<a href="#first">[More Pizzas]</a> 
</p>
</card>
<card id="pizzainfo" title="What's On">
<p>
<fieldset title="Cappriciosa">
Mozzarella, tomato sauce, prosciutto, olives, artichokes
and mushrooms
</fieldset>
<fieldset title="Quatro Staggioni">
Tomato, mozzarella, ham, artichokes and mushrooms
</fieldset>
<fieldset title="Margherita">
Fresh tomatoes, fresh mozzarella & basil
</fieldset>
<fieldset title="Campagnola">
Tomato, mozzarella, zucchini, eggplant, peppers and
mushrooms
</fieldset>
<fieldset title="Siciliana">
Carciofini, prosciutto, pomidoro, fresh mozzarella &
whustel
</fieldset>
</p>
<p align="center">
<a href="#fifth">[Contact Us]</a>   
<img alt="Penguin" src="xspenguin.gif" width="11"
height="19"/>   
<a href="#first">[Go to Start]</a> 
</p>
</card>
</wml>
23
|