You need to Log in!

Guide to BBcode

 :: Tutorials

View previous topic View next topic Go down

Guide to BBcode

Post by Merci on 18/11/2010, 9:33 pm

Message wrote:All Credit Goes Yo My Good Friend Van, For Typing This Up.
Bulletin Board Code, or more known as BBCode is a special implementation of HTML. Whether you can actually use BBCode in your posts on the forum is determined by the administrator. In addition you can disable BBCode on a per post basis via the posting form. BBCode itself is similar in style to HTML, tags are enclosed in square brackets [ and ] rather than < and > and it offers greater control over what and how something is displayed. It is easy, fun and useful. You can use this in your sigs, forums and our site chat in the Main Page. Note that you should never leave a space when using a BBCode. I put spaces there so I could show you what to type when using one.

  • List of BBCodes:


Images

A very important things to remember when using this tag is 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 ] *Link* [ /img ] tags. For example:

[ img ] http://www.google.com/intl/en_ALL/images/logo.gif [ /img ] (Without Space)

Generating this:






Bold, Italic, Underlined and Striked Text

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

  • Bold: To create bold text, use this tag: [ b ] *Text* [ / b ]
    Generating this *Text*

  • Italic: To create italic text, use this tag [ i ] *Text* [ / i ]
    Generating this *Text*

  • Underlined: To create underlined text, use this tag [ u ] *Text* [ / u ]
    Generating this *Text*

  • Strike: To create striked out text, use this tag [ strike ] *Text* [ / strike ]
    Generating this *Text*





Quotes, Spoilers, Codes, Exponent, Index, and Hidden Texts


  • Quotes: To create a quote, use this tag [ quote ] *Text* [ / quote ]
  • Quoting a Person: To quote a person, use this tag [ quote = " Name " ] *Text* [ / quote ]

    Generating this
    *Text*
    or
    Name wrote:*Text*

  • Spoilers: To create spoilers, use this tag [ spoiler ] *Text* [ / spoiler ]
    Generating this (Click to activate)
    Spoiler:
    *Text*

  • Codes: To create codes, use this tag [ code ] *Text* [ / code ]
    Generating this
    Code:
    *Text*

  • Exponent: To create exponent texts, use this tag [ sup ] *Text* [ / sup ]
    Generating this *Text*

  • Index: To create index texts, use this tag [ sub ] *Text * [ / sub ]
    Generating this *Text*

  • Hidden: To create hidden texts, use this code [ hide ] *Text* [ / hide ]
    Generating this


Note that I do not get the point of Hidden Texts when they aren't even hidden.




Linking Text and Images


  • To link images, you will be needing the link to your Image.
    Eg: http://www.google.com/intl/en_ALL/images/logo.gif
    Then, you will need to attach your URL.
    Eg: http://www.google.com/

    You need to use a slightly different tag which will be this
    [ url = *Link* ] [ img ] *Link2Image* [ / img ] [ / url ]

    Generating this(Click):


  • Linking text will be simpler than linking images.
    You'll need this tag: [ url = *Link* ] *Text* [ / url ]

    Generating this(Click):
    *Text*


It also works with emails using this tag [ email ] *Email* [ / email ]
Generating this parishilton@hoe.com




Changing Text Color

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


  • Color Name Form [ color = red ] *Text* [ / color ]

    or

  • Hexadecimal Form [ color = #FF0000 ] *Text* [ / color ]

    Generating this:

  • Color Name Form *Text*

    or

  • Hexadecimal Form *Text*





Creating an Unordered list

BBCode supports two types of lists, unordered and ordered. They are essentially the same as their HTML equivalents. 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 [ list ] [ / list ] and define each item within the list using [ * ]. For example to list your favourite 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, gives you control over what is output before each item. To create an ordered list you use [ list = 1 ] [ / list ] to create a numbered list or alternatively [ list = a ] [ / list ] for an alphabetical list. As with the unordered list, items are specified using [ * ]. For example:


  • Numerical List:

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

Generating the following:

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



  • Alphabetical List

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

Generating the following:

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





Scrolling


BBCode supports two types of scrolling, horizontal and vertical scrolling. Scrolling is another kind of way in displaying creative texts

  • Horizontal Scrolling
    To display horizontal scrolling, use this tag [ scroll ] *Text* [ / scroll ]
    Generating this: *Text*

  • Vertical Scrolling
    To display vertical scrolling, use this tag [ updown ] *Text* [ / updown ]
    Generating this: *Text*





Text Alignment and Line Breaking.

The final BBCode will be about Text Alignment and Line Breaking.
Text Alignment changes and displays the position of your text. Line Breaking displays a line after a paragraph, to show neatness in stories, or anything for that matter to end certain topics.


  • Text Alignment - Left:
    To display left text alignment, use this tag [ left ] *Text* [ / left ]
    Generating this:
    *Text*

  • Text Alignment - Center:
    To display center text alignment, use this tag [ center ] *Text* [ / center ]
    Generating this
    *Text*

  • Text Alignment - Right:
    To display right text alignment, use this tag [ right ] *Text* [ / right ]
    Generating this
    *Text*

  • Line Break:
    To display a line break, use this tag [ hr ]
    Generating this



End

If you have noticed, the entire topic design was made by BBCodes. It took 4 hours to make this topic and alot of hard work and effort. I have not put 'all' the BBCodes in here.I may add them in a later period of time. Please feel free to try them out in this topic, otherwise try preview them. May the abuse of BBCodes begin and may you not over - abuse them!

-------------
I don't want to set the world on fire. I just want to start, a flame in your heart.
avatar
Merci
Hammerhead
Hammerhead

Posts : 373
Status Update : Climbin' in your windows, snatchin' your people up.

Back to top Go down

Re: Guide to BBcode

Post by James on 18/11/2010, 9:43 pm

Very easy, yet thorough.

-------------
avatar
James
Judge
Judge

Posts : 303
Status Update : I'm the leader, biotch.

Back to top Go down

Re: Guide to BBcode

Post by Merci on 18/11/2010, 9:46 pm

I cannot tell you how long it took Van and everyone helping him to put this together. xD

-------------
I don't want to set the world on fire. I just want to start, a flame in your heart.
avatar
Merci
Hammerhead
Hammerhead

Posts : 373
Status Update : Climbin' in your windows, snatchin' your people up.

Back to top Go down

Re: Guide to BBcode

Post by Luffy on 19/11/2010, 8:08 am

James wrote:Very easy, yet thorough.

Agreed.

-------------




I'm the one who's going to be the Pirate King.
avatar
Luffy
Crown
Crown

Posts : 828
Status Update : 'Screw you guys, I'm going home' - Eric Cartman

Back to top Go down

Re: Guide to BBcode

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top

- Similar topics

 :: Tutorials

 
Permissions in this forum:
You cannot reply to topics in this forum