Wireless Markup Language

(WML)

Sujata Mishra
Regd. No – 04/004
Electronics & Tele- Comm. Engg.
 Outlines
 Introduction
 WML vs. HTML
 Basic Features of WML
 WML Deck and Card
 An Example of WML Document
 Structure of a WML Document
 WML : Tables
 WML : Image
 Linking Cards
 Navigation
 WML Generic Metadata :<meta>
 Advantages of WML
 Limitations of WML
 Conclusion
 References
Sujata Mishra 2
 Introduction
What is WML ?
 WML is a markup language based on XML for wireless
devices.

 Specifying content and user interface for narrowband

devices, such as mobile phone, PDAs.

 A part of the Wireless Application Protocol (WAP).

 formerly called HDML (Handheld Devices Markup

Language) .

 Interpreted and rendered by Micro-browsers.

Sujata Mishra 3
 WML vs. HTML
WML is the wireless equivalent of HTML for the Web. But
there are many differences between WML and HTML.

 WML requires very little bandwidth resources compared to

HTML.
 WML uses lesser power to process compared to HTML.
 WML has a different mechanism for linking between its pages
called “cards” as compared to linking between HTML pages.
 WML browsers are stricter than HTML browsers by not being
tolerant of errors.
 In HTML both tag set and tag semantics are predefined and fixed.
But WML provides facility to define its own tags.

Sujata Mishra 4
 Basic Features of WML
WML includes four major functional areas:
 Text presentation and layout -includes text and image

support, including a variety of formatting and layout.

 Deck/card organizational metaphor- all information in WML

is organized into a collection of cards and decks.

 Inter-card navigation and linking -WML includes support for

explicitly managing the navigation between cards and decks.
Also supports anchored links similar to HTML.

 String parameterization and state management- all WML

decks can be parameterized using a state model.Variables can be
used in the place of strings and are substituted at run-time. This
parameterization allows for more efficient use of network
resources.
Sujata Mishra 5
 WML Deck and Card
 A major difference between HTML and WML is that the
basic unit of navigation in HTML is a page, while that in
WML is a card.

 A WML file can contain multiple cards and they are grouped
to form a deck.

 When a user goes to a WAP site, the mobile browser loads a

WML file that contains a deck of cards from the server.

 Only one card will be shown on the screen of the wireless

device each time.

 Links, text, images, input fields, option boxes and many

other elements can be put in a card.
Sujata Mishra 6
An Example of WML Document
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM
//DTD WML 1.3//EN" "http://www.wapforum.org
/DTD/wml13.dtd">
<wml>
<card id="card1" title="WML Tutorial">
<p>Hello World</p> Nokia Mobile Browser 4.0
</card>
<card id="card2" title="WML Tutorial">
<p>Welcome to the world of WML</p>
</card>
</wml>

Sony Ericsson T610

Sujata Mishra 7
Sony Ericsson T68i
 Structure of a WML Document
An WML document consists of:
 Prolog
 Elements
 Attributes
 Entity references
 Comments

Sujata Mishra 8
 WML : Prolog
 Prolog is the first structural element that is present in
the WML document.
 Every WML document starts with the prolog.
 Usually divided into a XML declaration and
a DOCTYPE declaration.
 The prolog components are not WML elements and
they should not be closed with />.
 Example:
<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN "

"http://www.wapforum.org/DTD/wml13.dtd">

Sujata Mishra 9
 XML Declaration
 All WML documents are XML documents. So, there is an
XML declaration at the start.
 The XML declaration specifies the XML version of the
document.
 The character encoding of the document can also be specified
Like,
<?xml version="1.0" encoding="UTF-8"?>

 There should have no whitespace before the XML declaration.

Sujata Mishra 10
 DOCTYPE Declaration
 All WML documents must have the DOCTYPE declaration.
 Placed between the XML declaration and the <wml> element.

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"

"http://www.wapforum.org/DTD/wml13.dtd">

 The DOCTYPE declaration specifies the name of the DTD

and the URL to the DTD.
 DTD contains information about the syntax of the markup
language.
 It defines what elements and attributes can be used in the
markup and the rules that they should be used.

Sujata Mishra 11
 WML : Elements
 Elements are most common form of markup.
 WML elements must contain a start tag and a
matching end tag prefixed by a slash.
<city> Kharagpur </city>
 Empty elements can be written as <city/> instead of both
tags without contents.
 WML is case-sensitive. Elements are all in lowercase.
 Element naming convention:
Must begin with an underscore or letter.
Can contain letters, digits, underscore, hyphen, and
periods.

Sujata Mishra 12
Sujata Mishra 13
 WML : Elements & Attributes
<wml> Element
 <wml> is the root element of WML.
 All other elements should be enclosed within the
<wml></wml> tags.

<card > Element

 The <card> element specifies the content of a card.
 In order to store content within a document, the WML
<card> container tag is provided.
Sujata Mishra 14
 Attributes of <card>
Attributes Description

id Name of the card. Acts as an anchor for navigating to the card.

<card id="start" title="Juicy Studio">
<!-- Content of card -->
</card>
newcontext Determines whether or not a new context is initialised. If a new
context is set, all variables are reset and the history stack is
cleared. The possible values for this attribute are true or false.

<card id="start" title="Juicy Studio" newcontext="true">

<!-- Content of card -->
</card>
onenterback Allows to specify a URI to open if the card has been navigated to
through a prev task.
ward
<card id="start" title="Juicy Studio"
onenterbackward="#main">
<!-- Content of card -->
Sujata Mishra 15
</card>
Attributes Description
onenterfor Allows to specify a URI to open if the card has been navigated to
through a go task.
ward
<card id="start" title="Juicy Studio"
onenterforward="#intro">
<!-- Content of card -->
</card>

ontimer Specifies the URI to open if the timer expires.

<card id="start" title="Juicy Studio"

ontimer="#nextcard">
<!-- Content of card -->
</card>
title Title used for the card. Some devices display the title on the
screen if there is enough space.
Sujata Mishra 16
 WML : Elements & Attributes
<p> Element

 The <p> element defines a paragraph of text.

 The anchor links and images can also be included in the

<p> element.

Sujata Mishra 17
 Attributes of <p>

Attributes Description
align used to change the horizontal alignment of a paragraph.
• left
• center
• right

mode used to set the text-wrapping mode.

wrap - text longer than the screen width will be broken
apart and displayed on multiple lines.
nowrap - the text of the paragraph will be displayed on a
single line and how a long line is displayed
depends on the WAP browser used.

Sujata Mishra 18
<wml>
<card id="card1" title="WML Tutorial">
<p align="center">Hello world. Welcome to our WML tutorial.</p>
</card>
</wml>

Sony Ericsson T68i

Sony Ericsson T610

Nokia Mobile Browser 4.0

Sujata Mishra 19
<wml>
<card id="card1" title="WML Tutorial">
<p mode="nowrap">Hello world. Welcome to our WML
tutorial.</p>
<p mode="wrap">You can learn how to build your own WML site in
this tutorial.</p>
</card>
</wml>

Sujata Mishra 20
 WML : Entity References
They are used to reference data that is not directly in the
structure.

 Can be internal or external.

 Built-in entity references are used to represent &, <,
>, “ and ‘.
 The String
Tom&Jerry(“Don’t write x<y”)
would be written as
Tom&amp;Jerry(&quot;Don&apos;t
write x&lt;y&quot;)
Sujata Mishra 21
 WML : Comments
 Comments are placed inside <!-- --> in WML.

 Can contain any data except the literal string “--”.

 All data between these two tags are ignored by the

WAP Browsers.

<!-- This is a comment in WML -->

<!-- This is a multi-line comment -->

Sujata Mishra 22
 WML : Line Breaking
 <br/> is the line breaking tag in WML.
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML
1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd">

<wml>
<card id="card1" title="Line Break">
<p>
Before br<br/>After br
</p>
</card>
</wml>

Sujata Mishra 23
 Font Size and Style
 WML includes a number of tags that can be used to change the font
size and style of the text.

 Some older WAP browsers do not support these tags or only support a
subset of these tags, even though these tags are defined by the WML
specification.

 Unsupported WML tags will be ignored by WAP browsers but will not
cause any errors.
Bold: <b></b>
Underline: <u></u>
Italic: <i></i>
Big: <big></big>
Small: <small></small>
Emphasis: <em></em>
Strong: <strong></strong>Sujata Mishra 24
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD ML 1.3//EN"
"http://www.wapforum.org/DTD/wml13.dtd">

<wml>
<card id="card1" title="Font Style">
<p>
<b>Bold</b><br/>
<i>Italic</i><br/>
<u>Underline</u><br/>
<small>Small</small><br/>
<big>Big</big><br/>
<em>Emphasis</em><br/>
<strong>Strong</strong>
</p>
</card>
</wml>

Sujata Mishra 25
 WML : Tables
The <table> element may be used to display tabular data.
Attribute Description
align Determines how the table is aligned on the device.
•center
•left
•right

<table columns="2" align="center">

columns Specifies how many columns will be displayed. This is a required

field, and cannot be zero. <table columns="2">
title Used to specify a title for the table.

<table columns="2" title="Temperatures">

Sujata Mishra 26
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD ML 1.3//EN"
"http://www.wapforum.org/DTD/wml13.dtd">

<wml>
<card id="page1" title="Table in WML">
<p>
<table columns="3" align="LCR">
<tr>
<td>Col 1</td> <td>Col 2</td> <td>Col 3</td>
</tr>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>
</p>
</card>
</wml>

Sujata Mishra 27
 WML : Image
 The <img> element is used to add an image to a WML card.

 As the img tag doesn't have a closing tag, a forward slash

is required at the end of the element.

 Older WAP-enabled wireless devices can only display

WBMP images.

 Newer ones support image formats commonly used on the

web such as GIF, JPG and PNG.

Sujata Mishra 28
Attribute Description
align Determines how the image is aligned with the text.
• top
• middle
• bottom

alt Textual description of the image. The text is displayed on the

device while the image is being downloaded. If images are not
supported on the device, the alternative text is displayed in its
place.
Height of the image. If this attribute is provided, the required
height
space is allocated to the rendered page while the image
downloads. may also be used to resize the height of an image.
src Used to specify the location of the image source.

Width of the image. If this attribute is provided, the required

width
space is allocated to the rendered page while the image
Sujata Mishra 29
downloads. may also be used to resize the width of an image.
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"
"http://www.wapforum.org/DTD/wml13.dtd">

<wml>
<card id="card1" title="Image in WML">
<p>
<img src="smile.gif" alt="Smile" height="62" width="60" /><br/>
Welcome to our WML tutorial.
</p>
</card>
</wml>

Sujata Mishra 30
If the image file does not exist, the result will become:

Sujata Mishra 31
 Linking Cards
A Element
 The id attribute is used to identify the name of the card to
link to.
 There are three ways of specifying a link to another card.
Absolute Link
– contains the full path to the page
– typically used to link to other WAP sites.
– example :
<a href="http://www.juicystudio.com/index.wml">
Visit Juicy Studio</a>
Sujata Mishra 32
Relative Link
– contains the name of the WML file, either in the
same directory, or with the relative path from the
current directory.
– example :
<a href="recent.wml">Recent Posts</a>
Relative Link to a particular card :
<a href="recent.wml#today">Recent Posts</a>
In-Document Link
– used for WML documents that contain more than
one card.
– uses the card id to locate the card.
– example :
<a href="#announce">Announcements</a>
Sujata Mishra 33
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="index" title="Index Page">
<p>
<a href="#first">First Link</a><br/>
<a href="#second">Second Link</a><br/>
<a href="#third">Third Link</a>
</p>
</card>
<card id="first" title="First Card">
<p>
This is the first card.<br/>
<a href="#index">Back to Index</a>
</p>
</card>
<card id="second" title="Second Card">
<p>
This is the second card.<br/>
<a href="#index">Back to Index</a>
</p>
</card>
<card id="third" title="Third Card">
<p>
This is the third card.<br/>
<a href="#index">Back to Index</a>
</p>
</card>
</wml> Sujata Mishra 34
 Navigation
Anchor Element
 The anchor element specifies the head of a link.
 The tail of a link is specified as part of other elements.
e.g. a card name attribute.
 Anchored links can not be nested.
 The <anchor> element extends the <a> element to
perform a go, prev, or refresh task
go element- used to specify the URI.
prev element- used to return to the previous page.
refresh element- used to refresh the card's variables.
Sujata Mishra 35
 <?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="index" title="Index Page">
<p>
<anchor>First Link<go href="#first"/></anchor><br/>
<anchor>Second Link<go href="#second"/></anchor><br/>
<anchor>Third Link<go href="#third"/></anchor>
</p>
</card>
<card id="first" title="First Card">
<p>
This is the first card.<br/>
<anchor>Back to Index<prev/></anchor>
</p>
</card>
<card id="second" title="Second Card">
<p>
This is the second card.<br/>
<anchor>Back to Index<prev/></anchor>
</p>
</card>
<card id="third" title="Third Card">
<p>
This is the third card.<br/>
<anchor>Back to Index<prev/></anchor> </p>
</card> Sujata Mishra 36
</wml>
 WML Generic Metadata :<meta>
 The meta element contains generic meta-information
relating to the WML deck.
 Meta-information is specified with property names and
values.
 Metadata is placed at the document head.
 A WAP browser will ignore the metadata if it does not
understand the metadata's meaning.
 metadata of any sort can be specified in a WML file
without affecting the cards' look.

Sujata Mishra 37
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD
WML 1.3//EN"
"http://www.wapforum.org/DTD/wml13.dtd">
<wml>
<head>
<meta name="author" content="Andrew"/>
</head>
<card id="card1" title="WML Tutorial">
<p>Hello World</p>
</card>
</wml>

Sujata Mishra 38
 Advantages of WML
 WML is part of the WAP standard and its use is required.

 Transmission of WML (WMLC) documents requires less bandwidth

compared to HTML documents because WML documents are
simpler and WML is compressed before it is sent to the WAP device.

 Compared to HTML documents, displaying WML documents

requires less processing power and memory. Consequently, a WAP
device can work with a less powerful (cheaper) CPU and the use of
less power means that the battery can operate longer without
recharging.

 WML provides support for limited graphics with a limited gray

scale.
Sujata Mishra 39
 Limitations of WML
 Like HTML, WML does specify how the content is to be displayed.
Thus microbrowsers on different WAP devices are likely to display
the WML content differently.

 WAP devices such as WAP phones will not accept large decks (1.4K
for some WAP phones).

 There are many variations between WAP phones (Screen sizes,

keypads, and soft keys). This variation is similar to the variation
found with Web browsers and their platforms. The problem is harder
in case of WML because there are many more WAP devices than
Web browsers and their platforms. so it is harder to figure out the set
of features that will work reasonably well on all or most WAP
devices.

Sujata Mishra 40
 Conclusion
 WML offers software developers an entirely new,
exciting platform on which to deploy their applications.

 With this new platform, however, comes a host of

tradeoffs and challenges. While it may take several
iterations for developers and vendors to get their product
offerings right.

 There is no doubt that WAP opens the door to a new era

in application development and deployment.

Sujata Mishra 41
 References
 www.seminartopics4u.org
 http://en.wikipedia.org/wiki/Wireless_Markup_
Language
 http://www.wapforum.org/
 http://www.allnetdevices.com/faq

Sujata Mishra 42
Sujata Mishra 43
Sujata Mishra 44