Announcements > Basic Training

A Beginner's Guide To BBcode

liamnight:
The Beginner's Guide To BBcode

Are you new to BBcode? This is the right thread, even though there is a bar in each comment box that help you with BBcode, there is much more you need to know.

There are a couple of rules that you should know first before you apply BBcode in this forums:

[*]Do not spam BBcode, this can apply to common sense and it's obvious this won't be tolerated
   [*]Do not add too much BBcode in signatues, it can become too distracting
           [*]Test BBcode in discussion that are your own and in the Private Messages category.
[/list]

Sicnce the old forums used Html, and you are used to Html, it might be quite easier to learn BBcode than a user with no experience with Html. BBcode and Html is different but yet similar, for example, bolding:

Html: < b > bold text < /b >
BBC:  [ b ] bold text [ /b ]
Outcome: bold text
*When code is used, the spaces are taken away

Another example, for images:

Html: < img=image link >< /img >
BBC:  [ img ] image link [ /img ]
Outcome:
*When code is used, the spaces are taken away


Bold, Italics, Underlines, Strike-throughs

Bold, Italics, Underlines, and Strike-throughs are the first things you should learn about. They are the easiest.

Bolding, Italicing, and Underlining:

In the text box, the button on the help-bar will appear with the capital letter "B". When you click on it, the code [ b ][ /b ] will come out. Bolded text will appear fatter in width than a normal piece of text. The button for Italic will appear as a capital sideways "I" next to the bold and underlining button. When click on, the code [ i ][ /i ] will come out. Italic text will appear more of a sideways look than normal text. Underlined text can be brought in by clicking the button with letter of capital "U" with an underlin, where if clicked on the text [ u ][ /u ] will come out. Underlined words is self-excalamatory, it will appear underlined. Bolding, Italics, Underlines could be used for:

[*]Showing important words or pointing out important subjects or sentences
[*]Creating Subtitles or Titles
[*]Anything else to make text look different from the other common text.
[/list]

Example:

Spam will not be tolerated with no exceptions. Spamming will result in disciplinary action and that isn't fun.

Strike-throughs:

Strike-throughs could be brought in by clicking the button "S" with a line through it on the bar above every text box. The button will appear next to the underline button. When clicked on, the code [ s ][ /s ] will come out. When a strike-through is applied to text, the text will a line across the middle. Strike-throughs could be used for:

[*]Identifying removed text
[*]Showing that the text is not needed anymore
[*]Showing something that is completed on a to-do list (not referring to Geoff's To-Do list)
[/list]

Example:

My list of bug fixes on "Epic Game Olympics":
[*]Fix collision issue
[*]Fix hazards not being hazardous
[*]Background disappearing
[/list]


Alignments

In BBcode, there are 4 types of alignments you can do with the code: Preformatted Text, Left Align, Center Align, and Right Align

The buttons for all 4 alignments can be found next to the strikethrough and the font face button. Left, right, and center is obvious. Left alignment keeps the text on the left side, the center keeps the text on the center, and the right keeps the text on the right. Alignments could be used for:

[*]Decoration of text
[*](For pre-formatted text) Organizing text
[/list]

These are what the left alignments, right alignments, and center alignments look like:

Code:
[ left ] Left [ /left ]
[ center ] Cener [ /center ]
[ right ] Right [ /right ]

Outcome:
Left Center Right
Pre-formatted text will keep all the spacing. Without it, if you double space, the double space will be deleted and will be a single space. If the pre-formatted text is inserted in, there will be the double space. The text uses the [ pre ] [ /pre ] tags.

For example:

Text:

          Fire and water are natural enemies.                Water will burn out fire.

Code:

[ pre ]          Fire and water are natural enemies.                Water will burn out fire.[ /pre ]

Outcome, with the code:

          Fire and water are natural enemies.                Water will burn out fire.

Outcome, wihtout the code:

          Fire and water are natural enemies.                Water will burn out fire.


Superscript, Subscript, and Teletype

Superscript and Subscript

The buttons for superscript and subscript can be found below the 'font face' button. If you take a letter and cut it in half, there are two sides, the top side and the bottom side. If you make the text go superscript, the text will only cover the top half side. If the text goes Subscript, the text will take the bottom half.

For example:

Code:
[ sup ]Up[ /sup ][ sub ]Down[ /sub ][ sup ]Up[ /sup ][ sub ]Down[ /sub ][ sup ]Up[ /sup ][ sub ]Down[ /sub ]

Outcome:
UpDownUpDownUpDown

Teletype:

The teletype feature is useful for short code snips, not worth a separate code tag. The simple code is [ tt ][ / tt] with text between it.

For example:

Code:
[ tt ] Teletype [ /tt ] not teletype

Outcome:
Teletype not teletype




Inserting Images

Inserting images is a bit tricky, so listen closely on how to do it. Remember, do not add freakishly large images just for fun, it counts as BBcode abuse.

Image Links

Be sure the image link you put is correct. An example is:

www.fakewebsite.com/images/09/blabla/omg.png

You see, the link is valid because at the end, there is an extension with a .png . A .png file is an image file. Other image files are .jpeg, .jpg, .gif, .tif, and .raw. Extensions that are not an image code will not appear. Links ending with .swf, .html, .php, or .htm will definately not appear.
 
Regular Image Code

The regular image code is [ img ] Image link [ /img ]. For example, let's take this image. We would put it as [ img ] http://www.bbcode.org/images/lubeck_small.jpg  [ /img ]. The outcome will come out as:




Making the Image Clickable

The code to mke the image clickable has the following code: [ url=url link ][ img ]img link[ /img ][ /url ]

Example:

Code:

[ url=http://www.bbcode.org/images/lubeck.jpg ][ img ]http://www.bbcode.org/images/lubeck_small.jpg[ /img ][ /url ]

Outcome:



For the example above, it was made it so that if clicked on, it would go to the image source.


Inserting Flash, Hyperlinks, Emails, and FTP links

Inserting Flash

The flash code allows simple games or programs to be embedded onto the site. The code is [ flash =width,height][ /flash ] To use the code, insert the flash link (such as a .swf file) between it and insert the desired width and height. This is useful to embed Sploder games.

Hyperlinks

A hyperlink is a piece of text that if clicked on, it would bring you to a page. In this forums, hyperlinks are viewed as orange. There are 3 ways you can make a hyperlink.

1) Just the link

By inserting just the link in a text box, the forum will automaticly create a hyperlink for you. Here is an example, an link without any code that brings you to the sploder mainsite:

www.sploder.com

2) Simple code

You can insert hyperlinks alternatively by using simple BBcode. The code for using BBcode to provide a hyperlink is:

 
--- Code: ---[url] URL LINK [/url]
--- End code ---

Try it out. Replace "URL LINK" with the web page link you want the hyperlink to link to.

3) Desired Text

The 3rd way to make a hyperlink is by going a bit farther than number 2. Doing number 3 will give an option on the text that comes out. The code is:


--- Code: ---[url=url link] URL TEXT [/url]
--- End code ---

Replace "URL LINK" with the link you want the hyperlink to link to, then replace "URL TEXT" on what you want the text to come out as. For example:


--- Code: ---[url=sploder.com] Link To Sploder [/url]
--- End code ---

Would come out as:

Link To Sploder

Inserting email and FTP links

These 2 codes are probably one of the uncommonly used codes but I'll show you. The email code, which links to an email uses this code:


--- Code: ---[email] EMAIL [/email]
--- End code ---

Replace "EMAIL" with the actual email you want it to link to. When used and clicked on, Microsoft Outlook will pop up and let you send an email to the email you clicked on.

Ftp links should be only used if you are only linking to an FTP site. Though, it works almost the way as a regular hyperlink. The difference is that hyperlinks will go to links that start with http://. FTP links will go to sites that start with ftp://. The code for the FTP link is:


--- Code: ---[ftp] FTP LINK [/ftp]
--- End code ---

Most likely the Ftp link code will be the most un-used code.


Lists

Lists come out with 2 styles. Unordered lists and ordered lists. Unordered lists will list without numbers, with shapes if I'm correct. Ordered lists will list with numbers.

Unordered Lists

Unordered lists can be writen in 2 ways. The regular way, or the shortcut way. The regular way uses the following code:


--- Code: ---[list]
[li]LIST ITEM[/li]
[li]LIST ITEM[/li]
[/list]
--- End code ---

Replace "LIST ITEM" with the desired text you want to be in the list. The shortcut way has the following code:


--- Code: ---[list]
[*]LIST ITEM
[*]LIST ITEM
[/list]
--- End code ---

So, if the code was written like:


--- Code: ---[list]
[li]Lemons[/li]
[li]Peanuts[/li]
[/list]

[list]
[*]Shortcut
[*]Shortcut 2
[/list]

--- End code ---

Then, it would come out was:


* Lemons
* Peanuts
[*]Shortcut
[*]Shortcut 2
[/list]

<--------- Still working on Guide ---------->

liamnight:
Reserved

cmdbxx:
BBcode is like html, right?

EpicBlastGaming:
You should lock this so no spam comes in.

liamnight:

--- Quote from: cmdbxx on August 01, 2012, 10:03 am ---BBcode is like html, right?

--- End quote ---

Yes.

Navigation

[0] Message Index

[#] Next page

There was an error while thanking
Thanking...
Go to full version