cambiacartas.com - página de ayuda: Guía BBCode

Guía BBCode

Introduction
What is BBCode?

Text formatting
How to create bold, italic and underlined text
How to change the text colour or size
Can I combine formatting tags?

Block formatting
How to change the background color
How to add a border around your text
How to align your text
How to reduce the width of your text

Quoting and creating links
Quoting text from others
Linking to another site

Generating lists
Creating an Un-ordered list
Creating an Ordered list

Showing images in your messages
Adding an image to a message

Other matters
Inserting smilies

What is BBCode?: BBCode is a set of codes or tags that you add to your text and let you format it, change its aspect, and insert external resources.
BBCode is like a special and reduced implementation of the HTML language, where the tags are enclosed between square braces, [ and ], instead of < and >. There is always an opening tag, which you place at the beginning of the text you want to alter, and a closing tag, which you place at the end and which is of the form [/tag].
In our web you may add BBCodes writing them directly in your text, or you can let the buttons interface at the top of the text area help you.

How to create bold, italic and underlined text

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

To make a piece of text bold enclose it in [b][/b], eg.

[b]Hello[/b]

will become Hello
For underlining use [u][/u], for example:

[u]Good Morning[/u]

becomes Good Morning
To italicise text use [i][/i], eg.

This is [i]Great![/i]

would give This is Great!

How to change the text colour 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 viewers browser and system:

Changing the colour of text is achieved by wrapping it in [color=""][/color]. You can specify either a recognised colour name (eg. red, blue, yellow, etc.) or the hexadecimal triplet alternative, eg. #FFFFFF, #000000. For example, to create red text you could use:

[color="red"]Hello![/color]

or

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

will both output Hello!
Changing the text size is achieved in a similar way using [size=""][/size]. This tag is dependent on the template you are using but the recommended format is a numerical value representing the text size in pixels, starting at 1 (so tiny you will not see it) through to 29 (very large). For example:

[size="9"]SMALL[/size]

will generally be SMALL

whereas:

[size="24"]HUGE![/size]

will be HUGE!

For your convenience you can also just select the text you want to change and select the color or size from the drop-down menus at the top of the text area.

Can I combine formatting tags?: Yes, of course you can. For example to get someone's attention you may write:

[color="red"][b]LOOK AT ME![/b][/color]

this would output LOOK AT ME!

We don't recommend you output lots of text that looks like this, though!
Remember that you must make sure that tags are closed in the correct order. For example, the following is incorrect:

[b][u]This is wrong[/b][/u]

while this is correct:

[b][u]This is right[/u][/b].

How to change the background color

To alter the color of the background on which your text is written the following tags can be used:

Changing the background color is achieved with the [bgcolor=""] and [/bgcolor] tags. You can specify either a recognised colour name (eg. red, blue, yellow, etc.) or the hexadecimal triplet alternative, eg. #FFFFFF, #000000. For example, to create an orange background you could use:

[bgcolor="orange"]Text on an orange background[/bgcolor]

or

[bgcolor="#FFAA44"]Text on an orange background[/bgcolor]

will both output:
Text on an orange background

For your convenience you can also just select the text whose background you want to change and select the color from the drop-down menu at the top of the text area.

How to add a border around your text

To draw a rectangle around your text the following tags can be used:

Drawing a border is achieved with the [border] and [/border] tags. For example:

[border]Text inside a border[/border]

will become:
Text inside a border

How to align your text

To align your text to the right, or to center it, you can use the 'align' tag, which accepts three possible attributes:

To align your text to the right you wrap it in [align="right"] and [/align] tags. For example:

[align="right"]Right-aligned text[/align]

will become
Right-aligned text
To center your text you can wrap it in [align="center"] and [/align] tags, or you can use the shortcut [center][/center] tag. For example:

[align="center"]Centered text[/align]
or [center]Centered text[/center]

will become
Centered text
To align your text to the left you can wrap it in [align="left"] and [/align] tags, though this is not necessary as all text gets aligned to the left by default. For example:

[align="left"]Normal, left-aligned text[/align]

will become
Normal, left-aligned text

How to reduce the width of your text

To restrict the width of a paragraph the following tags can be used:

Changing the paragraph width is achieved with the [width=""] and [/width] tags. For example, to restrict the width of a text to half the width of the containing page you could use:

[width="50%"]Text using only half the width of the horizontal space[/width]

will become:
Text using only half the width of the available horizontal space

Quoting text from others

There are two ways you can quote text: with a reference or without.

When you utilise the Quote button to add your own comments, you will notice that the text of the selected comment is added to the message window enclosed in a [quote=][/quote] block. This method allows you to quote with a reference to a person or whatever else you choose to put (always without quotes). For example, to quote a piece of text Mr. Blobby wrote, you would enter:

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

The resulting output will automatically add: quote from Mr. Blobby: before the actual text.
The second method allows you to blindly quote something. To utilise this enclose the text in [quote][/quote] tags. When you view the message it will simply show "quote": before the text itself.

Creating an Un-ordered list

BBCode supports two types of lists, unordered and ordered. They are essentially the same as their HTML equivalents. An unordered list ouputs 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 [*]. For example, to list your favorite colours you could use:

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

This would generate the following list:

Red
Blue
Yellow

Creating an Ordered list

The second type of list, an ordered list, places a sequencial number before each item. To create an ordered list you use [list=1][/list]. As with the unordered list, items are specified using [*]. For example:

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

will generate the following:

Go to the shops
Buy a new computer
Swear at computer when it crashes

Linking to another site

BBCode supports two ways of creating URLs.

The first of these uses the [url=""][/url] tag; whatever you type between the quotes will cause the contents of that tag to act as a URL. For example, to link to TradeCardsOnline.com you could use:

[url="http://TradeCardsOnline.com"]
Visit Trade Cards Online!
[/url]

This would generate the following link, Visit Trade Cards Online!
You can also write the URL directly in the text, and it will be turned automatically into a link without you needing to specify any tags. For example typing www.TradeCardsOnline.com into your message will automatically lead to www.TradeCardsOnline.com being output when you view the message.

Showing images in your messages: BBCode incorporates a tag for including images in your messages. Two very important things to remember when using this tag are: many users do not appreciate lots of images being shown in messages, and second, 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://TradeCardsOnline.com/img/logotrns17.gif[/img]

You can wrap an image in a [url][/url] tag if you wish, eg.

[url="TradeCardsOnline.com"][img]
http://TradeCardsOnline.com/img/logotrns17.gif
[/img][/url]

would generate:

Inserting smilies: The smilies you can use in your text are shown to the left of the text area. You can simply click on any of them, or you can type in its code, like :) o :(