Basic WML

Introduction

This is a brief introduction to some basic WML markup and techniques to enable you to build a basic mobile site. It's handy to have access to a WAP enabled mobile phone or an emulator (links available here).

What is WML? Well WML is an acronym for Wireless Markup Language. It's the mobile phones equivalent of HTML (well some mobiles can also understand HTML). WML is based on XML.

A WML page is based on a deck of cards. This is because a phones screen is very small so the information you want to get across needs to be laid out in a suitable way. As several cards can be returned in one deck, it means that navigation between decks can be very fast. This is important as mobiles generally have very limited connection speeds.

Lets say Hello World! in a WML page.

<?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="main" title="Hello World"> <p> Hello World! </p> </card> </wml>

As you can see at the top of the WML page we have to declare that the page is XML and we give its doctype as WML. For more information about this read the XML specification, but for now lets just assume it works.

What we are really interested in is the page markup.

A WML deck must be enclosed by <wml> and </wml> tags.

A WML card must be enclosed by <card> and </card> tags. In this example we've give the card an id of main and a title of Hello World. The id is used so we know which card we are looking at in a deck. The title is used to let the user know which part of the site they are looking at. There are other attributes we could of given the card, but we won't worry about them for now.

All text that is to be displayed in the main body of the screen has to be given between <p> and </p> tags. In this case, we've just said Hello World!.

Adding Another Card To The Deck

That's simple enough, but we'll probably want our site to have more than one page. Let's add a second page, and provide links between the cards on the deck.

<?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="main" title="Hello World"> <p> Hello World! </p> <p> <a href="#page2">Page 2</a> </p> </card> <card id="page2" title="Page 2"> <p> This is page two! </p> <p> <a href="#main">Main Page</a> </p> </card> </wml>

As we can see from the example above, the new card is added below the first one and between the <wml> and </wml> tags. On both cards we've added an extra paragraph to contain our link.

Thankfully the WML standard has adopted the URL as it's standard for addressing pages. This means our link between the cards on the deck looks very similar to as it would in HTML. In the main card we've added the code <a href="#card2">Card 2</a> to link to the second card in the deck. We've used the relative link of #card2. The # means we are using the current deck and main2 is the id we gave the second card. This will take us to the card called main2 when the link is called.

We can also add a link to an external WAP site if we wanted. Say we wanted to link to the WAP version of Tubeplanner.com, we'd add a link like this somewhere in one of the cards.

<a href="http://wap.tubeplanner.com/">Tubeplanner.com</a>

Special Characters

As WML is XML based, we have to be careful about escaping characters correctly. This is because characters such as & have special meanings to WML, so we can't use them in our text in their raw form. We much escape them, so & becomes &. Here is a table of commonly used escapes.

Character	Name	WML Escape
&	Ampersand	&
'	Apostrophe	'
>	Greater Than	>
<	Lessr Than	&lt;
	Non-breaking Space	&nbsp;
"	Quote	&quot;

We don't have to name these escapes if we don't want to. It is perfectly valid, though slightly less obvious to use a characters UTF8 number. For example, & would become &. We can escape any character this way, even characters that don't normally need to be escaped.