How to Make A Wap site?
Wap site Tutorial - 1- CREATE A WML FILE
To create a WML files you can use any html editors (notepad, too) but I suggest Apoo that you can download apoo editor .
The first thing to do when you create a WML file is to declare the specification of the wml code.
Now we can start writing the code that will be placed between the tags <WML> and </WML>
The text will be placed between the tags <CARD> and </CARD>
In a single WML page could be more than CARD. Each card has the attribute "ID" that is the name of it.
Wap site Tutorial - 2- TEXT FORMATTING
The difference between WML and HTML here is very little. Simply at the end of each tag must be placed a slash (/).
For example <p align="left"/> or <br/>
You can place the tag <br/> at the beginning of the line, too
About bold, italic and underlined text the WML is equal to HTML: <b> </b> the first, <i> </i> the second and <u> </u> the third.
With tags <small></small> and <big> </big> you can decrease or increase the size of the text.
Wap site Tutorial - 3 - TABLES
Also here the differences are small.
The tag is always <table> </table> but not exist the tag <tbody>
The attributes of <table> are "title" (the title of the table), "align" (C=center, L=left and R=right) and "columns"(the number of the columns, not supported by all mobiles)
This is an example
Wap site Tutorial - 4- IMAGES
WML files support only one kind of images: .wbmp. On the web you can find many free software that convert images in this format.
Placing an image is very similar to HTML, this is an example:
You can see that the principal difference is that you must place a slash (/) at the end of the tag <img>.
Attributes of align are middle,top and bottom.
There're also special images that require a different tag: for example emoticons and icons.
To load an emoticon (or a icon) you can use "localsrc" instead of "src". Obviusly each emoticon has a name that you can see here. DEVO METTERE IMMAGINE
This is an example:
Here you can find the complete list LIST
Wap site Tutorial - 4- LINKS
An external link is similar to HTML. The tag is <a href=""> </a>
An attribute of <a> is "title", too. By declaring it, you will obtain a better result in some mobile.
This is for a normal link, but if you want a link controlled by mobile keys (for example when you choose "menu" in a mobile), you need another tags.
link is a link made with <a href>, NEXT is made with next tags.
The first is <do> </do>. This tag has two important attribute: "title" and "type". The first is the title that will appear on the mobile (for example "NEXT").
About the second we suggest to write "accept", this mean the pressure of the key.
Then there is the tag <go/> that will be placed between <do> and </do>. It has the attributes "href" and "method". The first is equal to the "href" of <a>. "Method" is equal to the "method" of forms, now we can leave it empty.
This is an example where there is a link that link to another CARD in the same file:
You can see that if you would make a link to another CARD you must place a # before the ID of the CARD.
You can replace the tag <go/> with <prev/>, so by pushing the key you will go to the previous view.
Another way to surf the site is using the numeric keybord.
For this exist the attribute "accesskey", it is an attribute of <a> and it can has any value between 0 and 9 (the keys of the mobile)
Wap site Tutorial - 5- FORMS
The code needed to place a text field is similar to HTML, in fact the tag is <input/>.
A particular attribute of <input/> in WML is "emptyok". If it has value equal to "false" the visitor must fill this field.
Another is "format", if you set it "X" all text will be written in capitol letters. If you want that the visitor write only a limited number of chars (all capitol letters) you can set "format" as place the maximum numer of chars before "X" ("10X", "3X", etc..). By replacing "X" with "x" you will obtain the same result with not capitol letters.
An example:
Another attribute is "type". If you set this to "password", you'll obtain a password field.
Another element of forms is the multiple choice. It's made with the tags <select> and <option>. The most inportant attribute of select is "multiple", by setting it to "true" you will obtain a radio button (multiple selection allowed), if "false" a check box(multiple selection not allowed).
An example:
Wap site Tutorial - 6- A SPLASH SCREEN
With the function <timer> you can create a splash screen. This tag has the attribute "value", this value is the number of seconds*10 (for example, for 5 seconds you must write 50).
Then you must declare the attribute "ontimer", this is an attribute of <CARD> and it explain what must be view in the splash screen.
An example:
Wap site Tutorial - 7- ADVANCED FEATURE
This code collect many new function of WML
We will start with the attribute "ordered" of <CARD>, if setted to "true" all action will be performed in order as we have typed them. If set to "false" action will follow a hierarchical order.
Then we added the attribute "method" to <go> choosing "post". This mean that informations placed in <postfield value=$xxxx> will be sent to the HTTP server "http://www.testw.com/cgi". These info will be typed by the visitor in the two
text fields.
Then we have the tag <do>, its work is to clear the two text fields.
Note : THIS IS A VERY SMALL AND QUICK GUIDE TO WML, I HAVE LEFT BACK MANY OTHER FUNCTION (AS <ONEVENT>). ANYWAY WITH THIS TUTORIAL YOU CAN EASILY WRITE A SIMPLE BUT FULL FUNCTIONAL WAP SITE WHEN YOU CAN STORE YOUR JAVA GAMES, RINGTONES OR GIVE ADDITIONAL FEATURES TO VISITORS OF YOUR SITE.
To create a WML files you can use any html editors (notepad, too) but I suggest Apoo that you can download apoo editor .
The first thing to do when you create a WML file is to declare the specification of the wml code.
HTML Code:
<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
The text will be placed between the tags <CARD> and </CARD>
In a single WML page could be more than CARD. Each card has the attribute "ID" that is the name of it.
Wap site Tutorial - 2- TEXT FORMATTING
The difference between WML and HTML here is very little. Simply at the end of each tag must be placed a slash (/).
For example <p align="left"/> or <br/>
You can place the tag <br/> at the beginning of the line, too
About bold, italic and underlined text the WML is equal to HTML: <b> </b> the first, <i> </i> the second and <u> </u> the third.
With tags <small></small> and <big> </big> you can decrease or increase the size of the text.
Wap site Tutorial - 3 - TABLES
Also here the differences are small.
The tag is always <table> </table> but not exist the tag <tbody>
The attributes of <table> are "title" (the title of the table), "align" (C=center, L=left and R=right) and "columns"(the number of the columns, not supported by all mobiles)
This is an example
HTML Code:
<table align="C" title="label" columns="3"> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> </table>
WML files support only one kind of images: .wbmp. On the web you can find many free software that convert images in this format.
Placing an image is very similar to HTML, this is an example:
HTML Code:
<img alt="talt text" src="http://www.asite.com/logo.wbmp" align="middle" height="100" width="100"/>
Attributes of align are middle,top and bottom.
There're also special images that require a different tag: for example emoticons and icons.
To load an emoticon (or a icon) you can use "localsrc" instead of "src". Obviusly each emoticon has a name that you can see here. DEVO METTERE IMMAGINE
This is an example:
HTML Code:
<img alt=":)" localsrc="smileyface" />
Wap site Tutorial - 4- LINKS
An external link is similar to HTML. The tag is <a href=""> </a>
An attribute of <a> is "title", too. By declaring it, you will obtain a better result in some mobile.
This is for a normal link, but if you want a link controlled by mobile keys (for example when you choose "menu" in a mobile), you need another tags.
link is a link made with <a href>, NEXT is made with next tags.
The first is <do> </do>. This tag has two important attribute: "title" and "type". The first is the title that will appear on the mobile (for example "NEXT").
About the second we suggest to write "accept", this mean the pressure of the key.
Then there is the tag <go/> that will be placed between <do> and </do>. It has the attributes "href" and "method". The first is equal to the "href" of <a>. "Method" is equal to the "method" of forms, now we can leave it empty.
This is an example where there is a link that link to another CARD in the same file:
<CARD>
<do type="accept" title="next">
<go href="#CARD2"/>
</do>
<p>
push the key to go to the next view
</p>
</CARD>
<CARD id="CARD2">
<p>
next view.
</p>
</CARD>
<do type="accept" title="next">
<go href="#CARD2"/>
</do>
<p>
push the key to go to the next view
</p>
</CARD>
<CARD id="CARD2">
<p>
next view.
</p>
</CARD>
You can replace the tag <go/> with <prev/>, so by pushing the key you will go to the previous view.
Another way to surf the site is using the numeric keybord.
For this exist the attribute "accesskey", it is an attribute of <a> and it can has any value between 0 and 9 (the keys of the mobile)
Wap site Tutorial - 5- FORMS
The code needed to place a text field is similar to HTML, in fact the tag is <input/>.
A particular attribute of <input/> in WML is "emptyok". If it has value equal to "false" the visitor must fill this field.
Another is "format", if you set it "X" all text will be written in capitol letters. If you want that the visitor write only a limited number of chars (all capitol letters) you can set "format" as place the maximum numer of chars before "X" ("10X", "3X", etc..). By replacing "X" with "x" you will obtain the same result with not capitol letters.
An example:
<input name="city" maxlength="2" emptyok="false" format="10X" value="CA" />
Another element of forms is the multiple choice. It's made with the tags <select> and <option>. The most inportant attribute of select is "multiple", by setting it to "true" you will obtain a radio button (multiple selection allowed), if "false" a check box(multiple selection not allowed).
An example:
<select multiple="true" name="color">
<option value="1">red</option>
<option value="2">yellow</option>
<option value="3">blue</option>
</select>
<option value="1">red</option>
<option value="2">yellow</option>
<option value="3">blue</option>
</select>
With the function <timer> you can create a splash screen. This tag has the attribute "value", this value is the number of seconds*10 (for example, for 5 seconds you must write 50).
Then you must declare the attribute "ontimer", this is an attribute of <CARD> and it explain what must be view in the splash screen.
An example:
<CARD ontimer="welcome.wml">
<timer value="50"/>
<p>this is the homepage</p>
</CARD>
<timer value="50"/>
<p>this is the homepage</p>
</CARD>
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="test" ordered="false">
<do type="ACCEPT">
<go method="post" href="http://www.testw.com/cgi">
<postfield name="name" value="$name"/>
<postfield name="surname" value="$surname"/>
</go>
</do>
<do type="options" label="Clear">
<refresh>
<setvar name="name" value=""/>
<setvar name="surname" value=""/>
</refresh>
</do>
<p> Your name: <input title="name" name="name"/>
Your surname: <input title="surname" name="surname"/>
</p>
</card>
</wml>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="test" ordered="false">
<do type="ACCEPT">
<go method="post" href="http://www.testw.com/cgi">
<postfield name="name" value="$name"/>
<postfield name="surname" value="$surname"/>
</go>
</do>
<do type="options" label="Clear">
<refresh>
<setvar name="name" value=""/>
<setvar name="surname" value=""/>
</refresh>
</do>
<p> Your name: <input title="name" name="name"/>
Your surname: <input title="surname" name="surname"/>
</p>
</card>
</wml>
We will start with the attribute "ordered" of <CARD>, if setted to "true" all action will be performed in order as we have typed them. If set to "false" action will follow a hierarchical order.
Then we added the attribute "method" to <go> choosing "post". This mean that informations placed in <postfield value=$xxxx> will be sent to the HTTP server "http://www.testw.com/cgi". These info will be typed by the visitor in the two
text fields.
Then we have the tag <do>, its work is to clear the two text fields.
APPENDIX - CHARS
To display & type &
To display $ type $
To display "" type ""
To display ' type &apos
To display < type <
To disply > type >
To display $ type $
To display "" type ""
To display ' type &apos
To display < type <
To disply > type >
Note : THIS IS A VERY SMALL AND QUICK GUIDE TO WML, I HAVE LEFT BACK MANY OTHER FUNCTION (AS <ONEVENT>). ANYWAY WITH THIS TUTORIAL YOU CAN EASILY WRITE A SIMPLE BUT FULL FUNCTIONAL WAP SITE WHEN YOU CAN STORE YOUR JAVA GAMES, RINGTONES OR GIVE ADDITIONAL FEATURES TO VISITORS OF YOUR SITE.
Comment