How to Correctly Insert Tags - bbCode Basics

I've mentioned this in other lessons, but better to talk about it in detail.

Often you need to combine several tags in some part of the text to change different aspects of it (color, style & font for example), in this case, it's important to close the first tag opened last, so that it wraps the text to format & also all the tags inserted after it,or else you may get some unpredictable results.

To understand better, let's first talk about some basics:

To get the effect needed on text, tags have to wrap this text, that's why they are inserted in two parts, the first, the "opening tag" in the beginning of the content and the second, the "closing tag", in the end of the content.

The closing tag differ from the opening tag by a "/" symbol (forward slash) added into it, let's see an example:

For the tag used to give strong emphasis to the text, we have:

[B] - Opening Tag

[/B] - Closing Tag

Use to wrap text:

This part is plain, [B]this part is bold[/B] & this is plain.

Result:

This part is plain, this part is bold & this is plain.

Now how to combine tags?

Better to use an example:

Let's say we want our text Bold & Blue (more about colors HERE), we have two options to insert tags:

This way:

This part is plain, [B][color=blue]this part is bold & blue[/color][/B] & this is plain.

Or this way:

This part is plain, [color=blue][B]this part is bold & blue[/B][/color] & this is plain.

In both the result is the same, the following:

This part is plain, this part is bold & blue & this is plain.

Always the first tag opened is the last one closed!

Then the following two examples are wrong:

This part is plain, [B][color=blue]this part is bold & blue[/B][/color] & this is plain.

This part is plain, [color=blue][B]this part is bold & blue[/color][/B] & this is plain.

Those kinds of combinations may give the needed results sometimes (which, I agree, is the most important), but still it's a wrong coding and often will mess up your posts.

Changing Forums Messages Colors - bbCode Basics

We talked about text style Bold, Italic, Underline, let's talk now about colors!

Usually the text in Forums has a default color that depends according to the theme, background color etc, but you're allowed to change the colors of your messages completely or partly using bbCode.

To change color is easy, you just need the tag [color] to wrap your text, but here, there's something else to set in addition to the starting tag [color] & the end tag [/color], I talked generally about this additional element in my intro:

... tags can have various options, for example for different colors, text sizes, etc.

certainly the [color] tag alone won't change the text color, it needs an option to specify the desired color, the option is added into the opening tag after a "=" sign, so that it looks like this:

[color=option]

Now, what to put instead of the word "option" in the sample above?

Each color in HTML has a code, those are used in bbCode as well.

For the basic colors, & even some more complicated, you can simply put color's name as the code,

You have one word names: Black, Grey, White, Blue, Green, Red, Yellow, Orange, Brown, Purple, Sienna, Navy, Indigo ...

& some composed names: DarkGreen, SeaGreen, DarkOliveGreen, DarkSlateBlue, SandyBrown ...

You can always use the editors that most of forums offer to select the color you want with one click after you select the part of your message you want to colorize.

Now what about the millions of other colors?

Each color has its own unique code of six characters that can be used into the [color] tag. For example the code for Blue is 0000ff, in the [color] tag, you type the symbol "#" before it, so that:

[color=#ooooff]This is Blue[/color]

and

[color=blue]This is Blue[/color]

Will give us the same result:

This is Blue

Want to add more style?A Bold & Blue text for instance? Easy:

[B][color=#ooooff]This is Blue[/color][/B] or [color=#ooooff][B]This is Blue[/B][/color] (Always the first opened tag closed last, checkout: How to Correctly Insert Tags)

Will look:

This is Blue

Checkout THIS for a list of 216 colors called "web safe", each is displayed in two lines, but you should type it in one line & preceded with the symbol "#" as shown in the example above.

For the many other colors, you can find & select the codes in Photoshop or other graphics editors, or you might use Pixie, a great little Freeware, get it from HERE.

Posts Formatting: Bold, Italic, Underline - bbCode Basics

The most basic & most used text formatting on forum are probably Bold & Italic styles, Underline is less used but it's similar to the two others, that's why I included it in this lesson.

All three are pretty simple to use, let's have a look at the, if you read the Intro, I said this:

bbCode is composed of a number of tags, are composed of square brackets [...] & a code inside (instead of dots) that makes any tag different from others.

The codes that interest us are B for Bold, I for Italic & U for Underline, the tags then are:

[B] - Bold

[I] - Italic

[U] - Underline

let's see another part of bbCode intro

The tags have to wrap your content in order format it, that's why a tag is always inserted twice: in the beginning then in the end of the text you need to format, with a little difference, the tag in the end have to include the character "/" (forward slash)

[...]Your Content[/...]

So, if you want to format a word, phrase, paragraph or a whole article, just wrap it with the desired tag:

[B]Bold[/B] will look: Bold

[I]Italic[/I] will look: Italic

[U]Underline[/U] will look: Underline


Nothing simpler, & in some popular kinds of forums, most of time you don't need to type the tags, only to select your text, click on a button & it's wrapped automatically.

Now a last thing, if you want to add more than one style to your text, simply add more tags, but remember always the tag you open first should be closed last (as explained in detail HERE), you would some times get some unpredictable results ... examples:

Wrong: [B][I]Your Text[/B][/I]

Right: [B][I]Your Text[/I][/B]

How Does bbCode Work? - bbCode Basics

If you are familiar with HTML, bbCode will appear much simpler to you, it uses different codes but works basically the same way.

bbCode is composed of a number of tags, are composed of square brackets [...] & a code inside (instead of dots) that makes any tag different from others.

The tags have to wrap your content in order format it, that's why a tag is always inserted twice: in the beginning then in the end of the text you need to format, with a little difference, the tag in the end have to include the character "/" (forward slash)

[...]Your Content[/...]

In addition, tags can have various options, for example for different colors, text sizes, etc.

This was just an intro, will next start with the basic use of some tags, then go for more advance use. :)

A New Blog Has Born!

Hello!

So this is ANOTHER blog of mine started, this time I'll be posting information on forums especially on the code used on most of boards to format text in posts "bbCode", a simplified form of HTML I dare to say, then easier to learn.

Well, I didn't make this blog to teach you bbCode from A to Z, but to solve some problems you may encounter & to make things easy to understand (I hope).

Stay Tuned! :)