Basic BBCode Support for Mobile Pages

What is BBCode?
BBCode is a special implementation of HTML. BBCode itself is similar in style to HTML, tags are enclosed in square brackets [ and ] rather than < and > and it offers greater control over what and how something is displayed on your mobile pages. The following is Winksite's implementaion of BBCode.

BB Code	Description
[b]text[/b]	Makes text bold.
[i]text[/i]	Makes text italicized.
[u]text[/u]	Underlines text.
[img]http://somesite/image.jpg[/img]	Inserts an image into the page.
[url=http://somesite/]link text[/url]	Inserts a word or phrase linked to a URL into the page.
[url]http://somesite/[/url]	Inserts a URL into the page.
[left]left align[/left]	Aligns enclosed items to the left.
[center]centered[/center]	Aligns enclosed items to the center.
[right]right align[/right]	Aligns enclosed items to the right.
[hr]	Inserts a horizontal rule. Note there is no closing tag.
[br]	Inserts a break/line space. Note there is no closing tag.
[list]	Starts a bulleted list.
[/list]	Ends a bulleted list.
[numbered]	Starts a numbered list.
[/numbered]	Ends a numbered list.
[item]list item goes here[/item]	Insert an item within a bulleted or numbered list.

Creating Links
BBCode supports a number of ways of creating links.

• The first of these uses the [url=][/url] tag, whatever you type after the = sign will cause the contents of that tag to act as a URL. For example to link to google.com you could use:
  
  [url=http://www.google.com/]Visit Google.[/url]
  
  This would generate the following link, Visit Google.
  
• If you want the URL itself displayed as the link you can do this by simply using:
  
  [url]http://www.google.com/[/url]
  
  This would generate the following link, http://www.google.com/

Adding Images to Pages
BBCode incorporates a tag for including images in on your mobile pages. Two very important things to remember when using this tag are: many users do not appreciate lots of images being shown on pages  as it slows loading time of the mobile pages and secondly the image you display must already be available on the internet. To display an image you must surround the URL pointing to the image with [img][/img] tags. For example:

[img]http://www.google.com/intl/en_ALL/images/logo.gif[/img]

As noted in the URL section above you can wrap an image in a [url][/url] tag if you wish, e.g.

[url=http://www.google.com/][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/url]

would generate:



An Example Winksite Using the BBCode Image Tag: Tokyo Walks
View an example of BB Code used to insert images for a tour. Select a "walk" link from the "Tokyo Walks"mobile site embedded below.

Creating an Unordered list

BBCode supports two types of lists, unordered and numbered (ordered.) They are essentially the same as their HTML equivalents. An unordered list outputs each item in your list sequentially one after the other indenting each with a bullet character. To create an unordered list you use [list][/list] and define each item within the list using [item][/item]. For example to list your favourite colours you could use:

[list]
[item]Red[/item]
[item]Blue[/item]
[item]Yellow[/item]
[/list]

This would generate the following list:

• Red
• Blue
• Yellow

Creating a Numbered list

The second type of list is a numbered list. To create a numbered list you use [numbered][/numbered]. As with the unordered list, items are specified using [item][/item]. For example:

[numbered]
[item]Go to the shops[/item]
[item]Buy a new phone[/item]
[item]Swear at computer when it crashes[/item]
[/numbered]

will generate the following:

1. Go to the shops
2. Buy a new phone
3. Swear at computer when it crashes