BBCODE tutorial - by Yakov

Six · May 12, 2007

In this tutorial I will be explaining BBcode and its uses

PART 1: Basics
PART 2: Allignment
PART 2: Text Configuration
PART 3: Linking
[PART 4: MISC

Basics

Definition

Code:

BBCode is an abbreviation for Bulletin Board Code, the markup language used to format posts in many message boards. The available tags are usually indicated by rectangular brackets surrounding a keyword, and they are parsed by the message board system before being translated into a markup language the web browsers understands, usually HTML or XHTML.

First off, always remember all starting tags start with a

Code:

and end with a

Code:

All ending codes start with

Code:

[/

and end with

Code:

Also note some codes you can't elaborate on such as size. IE

Code:

[size=17][/size]

won't work but

Code:

[size=18][/size]

will work. Some codes you can elaborate on such as color codes. You can do

Code:

[color=red]

or any other hexidemical color code. Also to show an image you use

Code:

[img][/img]

Allignment
Although Allighment tags do not work on Sythe.org on some other sites they do. The two most important Allignment tags and the only ones I will be discussing in this tutorial are

Code:

[center][/center]

and

Code:

[list][/list]

Center- puts whatever you are putting the tags into the center of your thread/post.
List- forms a list into your post/threat.

Code:

[list]
[*] Item 1
[*] Item 2
[*] etc
[/list]

Text Configuration
Editing the look of your text is by far the most used in forums. Here are the most used ones
Bold --

Code:

[b]insertthinghere[/b]

Italics --

Code:

[i]insertthinghere[i]

Underline --

Code:

[u]insertposthere[u]

Size --

Code:

[size =7] or [size=9] or [size=12] or [size=18] or [size=24] followed by [/size]

Color --

Code:

[color=darkred] or [color=red] or [color=orange] or [color=Brown] or [color=Yellow] or [color=Green] or [color=Olive] or [color=Cyan] or [color=Blue] or [color=darkblue] or [color=Indigo] or [color=Violet] or [color=White] or you can use [color =x] where x is a hexidecimal digit as in [color=#FF0000] finished by [/color]

Linking
This is best used for advertising something.
We have already learned that

is the tag for a code.

Taking a regular code such as [1mg]http://x.myspace.com/images/whoisin/logo.gif[/1mg] (i -> 1 on purpose)

Will produce

Now here is where it gets confusing.
in order to link that image to something you must use numerous codes.
An URL code. I want the above image to link to myspace so the url code is

Code:

[url=www.myspace.com][/url]

Problem is nothing is embedded (sp?) into the url so nothing will show we will use the above image to embed the url like this

Code:

[url=www.myspace.com][img]http://x.myspace.com/images/whoisin/logo.gif[/img][/url]

The above will produce this

If you click on that it will take you to www.myspace.com. That is your goal.

The next way you can link is through text. This is often used to link someone to an appropriate place.
We use the same url tag as before but instead of embedding an image we will embed text.
Such as this:

Code:

[url=www.myspace.com]MYSPACE[/url]

Which will produce
MYSPACE
Clicking on "MYSPACE" will redirect you to www.myspace.com

MISC
Another very important tag is the code tag, which I've been using throughout.
Code tags disable all tags inside it and allow easy highlighting.

Code:

[code]

[/CODE]
is a code tag.
That tag will show

Code:

text in codes

Another important tag is the quote tag. When you are directing your post towards somebody who has not posted right above you it is wise to use a quote tag. A regular quote tag is

Code:

[quote][/quote]

Shown as
Quote:

quote here etc

When trying to specify your post to a specific person it is wise to name your quote.
So you use

Code:

[quote="NAMEHERE"][/quote]

That will produce

NAMEHERE said:
hi

Some other useful tags are

Code:

[whisper=USERNAME][/whisper]

which will allow only the user you are whispering to and all admins and mods to view that part of your post. Very useful, but not enabled in this forum. Another useful tag is

Code:

[spoiler]Spoilerhere[/spoilter]

which allow the user to click a button in order to view the text. Not enabled in this forum either.

This concludes my tutorial on BBcode, I hope you have learned something from reading this

BBCODE tutorial - by Yakov

More options

Six

Guru

Similar threads