We gaan de site bouwen die eerder schematisch is weergegevens. Voor het bouwen kun je gebruik maken van een standaard text editor. als je de files maar opslaat als *.wml. Voor deze tutorial is gebruik gemaakt van de NOKIA WAP toolkit (1.3B).

De eerste file komt er als volgt uit te zien

<?xml version="1.0"?> 
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> 

<wml> 
<template>
</template>

<card id="Welkom" title="Welkom"> 
<p> 
<b>CePe Infosolutions</b>
</p> 
</card> 

<card id="routes" title="Routes"> 
<p> 
Routes naar de vestigingen
</p> 
</card> 

<card id="help" title="help"> 
<p> 
help
</p> 
</card> 
</wml> 

De pagina begint met een header. Deze header vertelt dat de code die volgt XML is. WML is een gespecificeerd deel van de XML taal, daarom geen WML in de header maar XML. De tweede regel geeft aan welke versie van WML er gebruikt wordt en waar de client eventueel extra instructies kan halen hoe met deze file omgegaan moet worden.

Alle WML pagina's die je maakt moeten met deze header beginnen. De body van de pagina staat tussen de <wml></wml> tags, dit is te vergelijken met de html tags van gewone web pagina's.

• Alle content die buiten de wml tags is opgenomen levert een foutmelding op!
• WML is hoofd en kleine letter gevoelig: gebruik alleen kleine letters voor de tags!

Deck
Tussen de wml-tags staan onder andere de <template> en de <card> secties. Een deck kan allen  deze secties bevatten. In de secties wordt de overige content opgenomen. Alles wat buiten de secties staat leidt tot een foutmelding. Het maakt niet zoveel uit in welke volgorde de cards staan, als je maar in gedachte houdt dat de bovenste card altijd de eerste (en voorlopig enige) card is die de gebruiker ziet.

Elke card krijgt een eigen naam en id. Met behulp van het id kunnen we later navigeren tussen de verschillende cards.

De template sectie beschrijft de lay out van de standaard buttons. Je zou bijvoorbeeld een home of help button op elke pagina willen hebben.

Card
Welke informatie gaat er in een kaart? In een kaart gaat de informatie waarvan je verwacht dat die redelijkerwijs op een beeldscherm(pje) past. Een card kan onder andere tekst, en afbeelding en menu of een form bevatten.  In de voorbeeldcode zie je dat in elke card een regel tekst is opgenomen. De tekst van de eerste card is vetgemaakt. Het resultaat ziet er als volgt uit.

Een logo zou natuurlijk mooier zijn. Het maken van een monochroom twee kleuren logo is niet echt makkelijk. Met behulp van de plugin van Unwired en een beetje experimenteren in Paint Shop Pro moet het lukken. Als je een plaatje gemaakt hebt is het de vraag: hoe krijg ik hem in mijn WML document? Met de <img> tag neem je afbeeldingen op in je pagina net als met HTML er zijn twee verschillen:

• De alt attribuut is verplicht (de tekst die je ziet in plaalts van of bij een plaatje)
• De <img> tag heeft geen sluit tag, de tag sluit zichtzelf weer:

Een tag om een afbeelding op te nemen ziet er dus als volgt uit

<img src='bestand.wbmp' alt='bestand'>

Om nu het CéPé logo op te nemen op de eerste pagin is de eerste card als volgt veranderd:

<card id="Welkom" title="Welkom"> 
<p align='center'> 
<img src='cepe.wbmp' alt='CePe logo'/>
</p> 
</card>

Om de afbeelding netjes over te laten komen hebben is de paragraph alignment op center gezet, wat wil zeggen dat de afbeelding gecentreerd wordt. Het resultaat ziet er zo uit:

In het volgende deel van de tutorial navigeren tussen de cards

Deze tutorial is gemaakt door Cepe Infosolutions, vragen en commentaar zijn welkom: info@cepe.nl