Wise-Women: Tutorial: Ten Minutes to WML, by Virginia DeBolt

Wireless Markup Language - you keep telling yourself you ought to learn it but you don't have time what with keeping up with HTML, CSS, JavaScript and everything else you have to learn.

I put off WML, too. Then when I finally looked at it, I realized I already knew most of it because I know HTML. The little bit I didn't know took about ten minutes to figure out.

Know HTML? Got ten minutes? Let's learn WML.

WAP, the Wireless Application Protocol, allows you to write for mobile phones and other small hand-held devices. WML is the markup language used to create documents for WAP enabled devices. A WML document is called a "deck" and contains one or more small chunks of information displayed on "cards."

A deck skeleton

Here's the basic minimum for a deck. Write it with your favorite text editor. Don't forget to save it with the .wml extension. To view your WML coding, you will need to have either a WAP gateway that translates WML to html, or have the .wml extension as a registered MIME type on your server. I've included a screenshot of how your code should appear on a wireless device.

<?xml version="1.0"?>

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

  "http://www.wapforum.org/DTD/wml_1.1.xml">

  <wml>

  put one or more cards here

  </wml>

Notice we are writing a subset of XML, so tags must be lowercase, closed, and properly nested. Values must be quoted. The deck can contain a "head" element with "meta" information about the document.

Add a card

Every card needs at least one "p" element. Use the id attribute to give the card a name so you can link to it from other cards in the deck. As in HTML, the id attribute must be unique for each card in the deck. Use the title attribute to create a title in the top of the window. Here we go:

<?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="card1" title="My First Ever WML Card">

  <p>I made a WML card! Woo Hoo!</p>

  </card>

  </wml>

Add a link

Links use the familiar <a> tag or the <anchor> tag with a "go" task. (The anchor tag may also have the tasks "prev" and "refresh.") Here's an example of both types of links. To link to another card in the same deck, the # is used. Note that the new card is created within the same file as the first card in 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="card1" title="My First Ever WML Card">

  <p>I made a WML card! Woo Hoo!</p>

  <p><a href="somewhere.wml">Get Somewhere</a></p>

  <p>

  <anchor>New page

  <go href="new.wml"></anchor>

  </p>

  </card>

<card id="card2" title="My Second Card">

  <p><a href="#card1">Back to Card One</a>

  </p>

  </card>

  </wml>

Do the Do

The "do" element allows you to create an action. "Do" elements can be within the card, or defined outside the cards. WML has a "template" element that can be used to create something on every card in a deck. Let's add a back button to every card in our deck by inserting a "do" element into the deck with a template. We will use the "prev" task to complete our template. Note that the strict XML rules we must follow require the closing slash in the empty <prev/> tag.

<?xml version="1.0"?>

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

  "http://www.wapforum.org/DTD/wml_1.1.xml">

  <wml>

  <template>

  <do type="prev" label="Back">

  <prev/>

  </do>

  </template>

  <card id="card1" title="My First Ever WML Card">

  <p>I made a WML card! Woo Hoo!</p>

  <p><a href="somewhere.wml">Get Somewhere</a></p>

  <p>

  <anchor>New page

  <go href="new.wml"></anchor>

  </p>

  </card>

<card id="card2" title="My Second Card">

  <p><a href="#card1">Back to Card One</a>

  </p>

  </card>

  </wml>

Love to format?

You can apply basic formatting to text with the familiar HTML tags:  for bold, <big> for big,  for emphasized,  for italic,  for small,  for strong,  for underlined,   for line break. You can make simple tables with <table>, <tr> and <td> tags. The character entities you know and love such as & for an ampersand, ' for an apostrophe,   for a non-breaking space, and " for a quotation mark are also supported in WML.

A comment is <!--some comment>. Note the closing bracket on the comment does not have two hyphens as in HTML.

WML will accept the <img/> tag, but the image must be very small and saved with a .wbmp file extension. Only some of the browsers can display them at this time and only in black and white.

End of Lesson One

That takes care of the basics. There are more advanced features in WML, including forms, variables, and even the WMLScript scripting language. That would require more than our ten minute crash course will allow, but not by much. By now you should realize that if you really want to dig in and start writing WML, it won't be a great mental stretch for you. In fact, you could say you already knew it all the time!

More Information

Good sources of information about WML are the wap-uk.com site and the w3.schools.com site. There is a converter that will change your images to wbmp files online at teraflops.com/wbmp/. For WAP emulators check AnywhereYouGo.com or wapemulator.com, the WAP Forum can be found at wapforum.com/.

Virginia DeBolt is owner of the Web Teacher blog and author of the book Integrated HTML and CSS: A Smarter, Faster Way to Learn.