Formatting Your Posts -- BBCode 101

[wolverinept]

BBCode is short for Bulletin Board Code, the lightweight markup language used to format posts on message boards, blogs and more. It is similar to HyperText Markup Language (HTML) in the sense that BBCode also uses tags to format something specific (contained within the tag). In BBCode, tags are indicated by rectangular brackets surrounding a keyword.

BBCode was implemented as a method of providing a safer, easier, and a more limited way of allowing posts to be formatted on forums. Before BBCode, forums sometimes allowed users to include HTML code in their posts, which had many security issues (i.e., the user could execute JavaScript code, break the layout of the site, and so on). With BBCode being parsed by the forum scripts, it is easier to control what the user can and cannot do when formatting their posts.

Basic BBCode tags are often very similar across many different forums, but there are some variants in existence as well. The following coding guidelines describe the standard BBCode tags available to the NOD forum.

_____________________________________________________________

Text Formatting

BBCode includes tags to allow you to quickly change the basic style of your text. This is achieved in the following ways:

How to create bold, italic and underlined text

To make a piece of text bold, enclose it like this

Code: Select all

[b]Hello[/b]

and it will become
Hello

For underlining use

Code: Select all

[u]Good Morning[/u]

and it becomes
Good Morning

To italicize text use

Code: Select all

This is [i]Great![/i]

would create
This is Great!

How to change the text color or size

To alter the color or size of your text the following tags can be used. Keep in mind that how the output appears will depend on the viewer's browser and system:
To change the color of text, you can specify either a recognized color name (e.g. red, blue, yellow, etc.) or the hexadecimal triplet alternative, e.g. #FFFFFF, #000000. For example, to create red text you could use:

Code: Select all

[color=red]Hello![/color]

or

Code: Select all

[color=#FF0000]Hello![/color]

Both will output
Hello!

Changing the text size is achieved in a similar way. The recommended format is a numerical value representing the text size in percent, starting at 50 (tiny) through to 25 (huge) by default. For example:

Code: Select all

[size=50]TINY[/size]

will generally be
TINY

whereas:

Code: Select all

[size=200]HUGE![/size]

will be
HUGE!

Can I combine formatting tags?

Yes, of course you can. For example, to get someones attention you may write:

Code: Select all

[size=200][color=red][b]LOOK AT ME![/b][/color][/size]

this would output
LOOK AT ME!
_____________________________________________________________

Quoting with a Reference or Without

There are two ways you can quote text in your post, with a reference or without.
When you utilize the Quote function to reply to a post, you should notice that the post text is added to the message window enclosed in quote="" tags. This method allows you to quote with a reference to a person or whatever else you choose to put! For example, to quote a piece of text Mr. Blobby wrote you would enter:

Code: Select all

[quote="Mr. Blobby"]The text Mr. Blobby wrote would go here[/quote]

The resulting output will automatically add "Mr. Blobby wrote:" and it would look like this

Mr. Blobby wrote:

The text Mr. Blobby wrote would go here

The second method allows you to blindly quote something without a referance. To utilize this, do not use the quote="" tags.

Code: Select all

[quote]Now is the time for all good men to come to the aid of their country.[quote]

When you view the message it will simply show the text within a quotation block, like this

Now is the time for all good men to come to the aid of their country.

_____________________________________________________________

Generating Lists

BBCode supports two types of lists, unordered and ordered. They are essentially the same as their HTML equivalents.

Unordered List. 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 the keyword "list" and define each item within the list using [*]. For example, to list your favorite colors you could use

Code: Select all

[list]
[*]Red
[*]Blue
[*]Yellow[/list]

This would generate the following unordered list

• Red
• Blue
• Yellow

Ordered List.
The second type of list, an ordered list, gives you control over what is output before each item. To create an ordered list you use "list=1" to create a numbered list or alternatively "list=a" for an alphabetical list. As with the unordered list, items are specified using [*].

For example:

Code: Select all

[list=1]
[*]Go to the shops
[*]Buy a new computer
[*]Swear at computer when it crashes[/list]

will generate the following:

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

Whereas for an alphabetical list you would use:

Code: Select all

[list=a]
[*]The first possible answer
[*]The second possible answer
[*]The third possible answer[/list]

giving you this:

1. The first possible answer
2. The second possible answer
3. The third possible answer

_____________________________________________________________

Creating Links

Linking to another site

BBCode supports a number of ways of creating URLs (Uniform Resource Locators) better known as URLs.
The first of these uses the "url=" tags. Whatever you type after the "=" sign will cause the contents of that tag to act as a URL. For example to link to yahoo.com you could use:

Code: Select all

[url=http://www.yahoo.com/]Please Visit Yahoo![/url]

This would generate the following link:

Please Visit Yahoo!
*The link will open in the same window or a new window depending on a users browser settings.


If you want the URL itself displayed as the link you can do this by simply using:

Code: Select all

[url]http://www.yahoo.com/[/url]

This would generate the following link:
http://www.yahoo.com/

Additionally, BBCode features something called Magic Links. Magic Links will turn any syntactically correct URL into a link without you needing to specify any tags or even the leading "http://".
For example, typing "www.yahoo.com" into your message will automatically lead to http://www.yahoo.com being output when you view the message.

Linking an e-mail address

The same thing applies equally to e-mail addresses. You can either specify an address explicitly, for example:

Code: Select all

[email][email protected][/email]

Which will output
[email protected]

or you can just type "[email protected]" into your message and it will be automatically converted when you view it, like this:

[email protected]

_____________________________________________________________

Showing Images in Posts

BBCode incorporates a tag for including images in your posts. Two very important things to remember when using this tag are: (1) many users do not appreciate lots of images being shown in posts, and (2) the image you display must already be available on the internet (it cannot exist only on your computer for example, unless you run a webserver!).
To display an image you must surround the URL pointing to the image with the "img" tag. For example:

Code: Select all

[img]http://www.google.com/logos/veteransday08.gif[/img]

Which will display the image below in your post:


You can also use an image as a link to another site. To do this the "img" tag must be wrapped with the "url" tag, like so:
Code:

Code: Select all

[url=http://news.google.com/news][img]http://news.google.com/images/news.gif[/img][/url]

Which will display an image as a clickable link. Click the image below and it will take you to the Google News homepage.