WML TUTORIAL: Please note that this tutorial is for newbie coders.
Here is an example code of WML, please note that this code is very important, you have to make use of it everytime you create a WML document/page.
Apart from the Hello World part, everything is mandatory; the first line tells us this is an XML document - eXtensible Markup Language, a group of HTML-like languages of which WML is part - the second line is where to find the specification of this particular variety of XML (wml_1.1, stored on the WapForum website). Notice how the DOCTYPE line is mostly in capitals to start with, all this has to be shown case and all!
Then we have the <wml> and <card> tags, which is the start of some actual WML, and so are closed again at the bottom of the deck.
Now copy and paste the above code and save the file as test.wml open it with winwap browser or upload it to your server, then direct your browser to the url eg http://yourdomain/test.wml ...
Thats it for your first wml page
...........................
Now lets move on to something a little more advanced. Advanced? lol its not advanced at all its pretty simple, the following tutorial will teach you how to "align" your text in ur document/page.
*ALIGN = left, center, right
*MODE = wrap, nowrap
As there are no other alignment tags - no <center>...</center> you'll need to use paragraph alignment to center text. To stop centering you'll need to close the paragraph and open a new one, as in the followinf example:
As you can see the HEADER and FOOTER stuff is NOT included as i would like to keep this simple, but if you were to compile this code on a fresh piece of page, you have to include the HEADER(1st tutorial) and FOOTER... Note that if you do not wish to align your text to center or right the default implied alignment will be left and you do not have to specify this in your code.
The mode attribute has two possible values, wrap and nowrap. wrap is, as you might expect, just the standard way that text will go to the end of the line and then drop down to carry on at the beginning of the next line. nowrap however allows you to only take up one line; it'll show a line's worth of text, and when you move down so that the line has "focus" then it'll do a strange jump to the next line's worth of text, and then the next line's worth, and then the next in a kind of strange scroll text effect (although a scroll text usually scrolls a pixel or a character at a time, not whole words). This could be useful for a list of links, for example, so that you can show a concise list on screen, but as the user scrolls down it they get a longer description.
................
Now to add some EFFECTS to your page
* bold
* Italic
* underline
* emphasised
* strongly emphasised
*<big></big> big
* small
You may have notice that all the effects are exactly the same as in HTML. However some devices do not have support for effects but not to worry this will not display an error when a certain device with no effects support try to access your page, it will just ignore it and display normal fonts.
The bold and big tags together with the centering will make the headline - "Welcome!" - stand out more; even if the big tag isn't supported at least there's the boldness to fall back on, and if for some reason this doesn't work it should be centered.
............
Now for the next code we going to add some pics to your page
IMAGES
*<img />attributes:
*src= filename
*alt= alternative text incase image can't be shown
*height = height in pixels of image
*width = width in pixels of image
*hspace = horizontal border width
*vspace = vertical border width
As you can see there is no real suprises with the image tag - apart from that closing slash at the end of the tag it's pretty much identical to HTML. You can even have an alignment tag to align the image to the top, middle or bottom. One thing to watch out for though is that, apart from the src attribute which you obviously need to tell the browser where to load the image from, you must have an alt attribute - even if it's empty, as in alt="" - otherwise some phones will throw up an error. Remeber most phones have small screens therefore u have to keep ur images down to about 96x40 pixels in size or 100x50 alot of the new phones will be able to handle images of 200 or above, but lets keep it simple...
Now for the most important thing in your document/page is LINKING. A hypertext document woudn't be complete without HYPERLINKING, and you'll be glad to know that a WML link is the same as a simple HTML link - example:
It's even possible to have images in links, as in this example:
However you cannot have other tags inside links, for example the following will generate an error:
Now for an auto redirect ontimer in your page 
Notice that the timer is set for 50, but the text says that the jump will occur in five seconds; this is because the timer is set in tenths of a second, so setting the timer to 5 would only be half a second.
BACK BUTTON:
There's one other navigation link that you might want to add to your card, which goes just outside the closing </p> right near the end - you can add a back button to either one of the phone's keys, and/or the navigation menu. It's good to do this as some 'phones have no method of going back through the history without this tag.
Thats it for now, i hope you learnt something, i know i learnt alot just by typing and reading this lol.
Here is an example code of WML, please note that this code is very important, you have to make use of it everytime you create a WML document/page.
Code:
<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> Hello World! </p> </card></wml>
Then we have the <wml> and <card> tags, which is the start of some actual WML, and so are closed again at the bottom of the deck.
Now copy and paste the above code and save the file as test.wml open it with winwap browser or upload it to your server, then direct your browser to the url eg http://yourdomain/test.wml ...
Thats it for your first wml page
...........................
Now lets move on to something a little more advanced. Advanced? lol its not advanced at all its pretty simple, the following tutorial will teach you how to "align" your text in ur document/page.
*ALIGN = left, center, right
*MODE = wrap, nowrap
As there are no other alignment tags - no <center>...</center> you'll need to use paragraph alignment to center text. To stop centering you'll need to close the paragraph and open a new one, as in the followinf example:
Code:
<p align="center"> Welcome! </p> <p align="left"> Hello and welcome to my website! </p>
The mode attribute has two possible values, wrap and nowrap. wrap is, as you might expect, just the standard way that text will go to the end of the line and then drop down to carry on at the beginning of the next line. nowrap however allows you to only take up one line; it'll show a line's worth of text, and when you move down so that the line has "focus" then it'll do a strange jump to the next line's worth of text, and then the next line's worth, and then the next in a kind of strange scroll text effect (although a scroll text usually scrolls a pixel or a character at a time, not whole words). This could be useful for a list of links, for example, so that you can show a concise list on screen, but as the user scrolls down it they get a longer description.
................
Now to add some EFFECTS to your page
* bold
* Italic
* underline
* emphasised
* strongly emphasised
*<big></big> big
* small
You may have notice that all the effects are exactly the same as in HTML. However some devices do not have support for effects but not to worry this will not display an error when a certain device with no effects support try to access your page, it will just ignore it and display normal fonts.
Code:
<p align="center"> <big>[b]Welcome[/b]</big> </p> <p align="left"> Hello and Welcome to my website! </p>
............
Now for the next code we going to add some pics to your page
IMAGES
*<img />attributes:
*src= filename
*alt= alternative text incase image can't be shown
*height = height in pixels of image
*width = width in pixels of image
*hspace = horizontal border width
*vspace = vertical border width
As you can see there is no real suprises with the image tag - apart from that closing slash at the end of the tag it's pretty much identical to HTML. You can even have an alignment tag to align the image to the top, middle or bottom. One thing to watch out for though is that, apart from the src attribute which you obviously need to tell the browser where to load the image from, you must have an alt attribute - even if it's empty, as in alt="" - otherwise some phones will throw up an error. Remeber most phones have small screens therefore u have to keep ur images down to about 96x40 pixels in size or 100x50 alot of the new phones will be able to handle images of 200 or above, but lets keep it simple...
Code:
<p align="center"> img src="4.wbmp" alt="Welcome!"/> </p> <p align="left"> Hello and Welcome to my website! </p>
Now for the most important thing in your document/page is LINKING. A hypertext document woudn't be complete without HYPERLINKING, and you'll be glad to know that a WML link is the same as a simple HTML link - example:
Code:
[url="destination.file"]Some Text[/url]
Code:
[url="index2.wml"][img]banner.wbmp[/img][/url]
Code:
[url="index2.wml"]<big>[b]This will fail![/b]</big>[/url]
Code:
<wml><card title="test 2" ontimer="http://zeroacid.yakom.net/home.wml"> <timer value="50" /> Please wait five seconds or [url="http://zeroacid.yakom.net/home.wml"]Click here[/url] to go to[b]zeroacid forums[/b] </p> </card></wml>
BACK BUTTON:
There's one other navigation link that you might want to add to your card, which goes just outside the closing </p> right near the end - you can add a back button to either one of the phone's keys, and/or the navigation menu. It's good to do this as some 'phones have no method of going back through the history without this tag.
Code:
</p> <do type="accept" label="Back"> <prev/> </do> </card></wml>
" border="0" alt="tease.gif" />t;line-height:100%">Wirelessly posted (Nokia3200/1.0 (4.1
Profile/MIDP-1.0 Configuration/CLDC-1.0 UP.Link/1.1)
Comment