Results 1 to 3 of 3

Thread: BBCode guide

  1. #1
    Endorsed by Daryl Dixon Member Manjam5's Avatar
    Join Date
    May 28th, 2013
    Location
    Ohio
    Age
    19
    Gender
    Posts
    394
    Album
    Member Photo Albums

    Exclamation BBCode guide

    Hi! I'm Ezra. I've been working with BBcode for several years now, and this is roughly my 4th guide. BBCode is very simple to learn and should only take you a few hours to remember in its entirety. Most of what you'll read in this guide is for beginners, but it can be used for advanced users who want to touch up on their knowledge.

    If you have any questions/concerns/corrections, send me a PM!

    Also, please don't reply to this topic! It will be locked in a few hours by a G-mod to prevent replies. Thanks!

    NOTE: Bold font is used to denote an important term.

    Sections

    The guide will be arranged into sections. This makes it easier for everyone involved:


    1. Text Formatting (very easy to learn and remember. text formatting modifies text color, size, etc...)
    2. Lists (lists are quite useful to any thread. I'm using one right now!)
    3. Links (learn how to link videos, websites, and pictures to your thread)
    4. Adding Code (adding HTML, PHP, and code examples.)
    5. Tables (organize information with tables. This section is slightly more advanced)
    6. Images (inserting images into your thread)
    7. Other (anything not covered in the other sections




    Introduction to BBcode

    BBcode, much like HTML has rules about how to format your code. Because it's modeled to resemble HTML, many of the formatting rules are the same. If you're familiar with HTML, you can skip this section all together.

    The first thing you should know is how to properly use a tag in BBcode. Everything you make in BBCode must have an opening tag and a closing tag. An opening tag consists of an opening bracket "[" and a closing bracket "]". In between the two brackets is the content of the tag. example: [VIDEO]. An ending tag consists of an opening bracket "[" a forward slash "/" and a closing bracket "]" example: [/VIDEO]. A closing tag is an exact copy of an opening tag, except on the closing tag you add a slash before the text. Once all of the tags are combined, they form an element. Here is an example of an element in action: [B] Hello, World [/B] This element would print out the text "Hello, World" in bold type font.

    If you don't understand the basics of BBcode yet, no problem! I'll show more examples of BBcode in action as we go along. If you have any problems getting your code to work or if you're still confused, feel free to PM me

    On this thread I have only included BBCode that works with this forum. Forum Admins can design their own BBCode, therefore different forums may have different codes. There are also some BBCode tags that no longer are supported by most web browsers. For the sake of the readers, I have left those out.
    Updated: 4/24/2014

    Last edited by Manjam5; Apr-25-2014 at 01:06 AM.

  2. #2
    Endorsed by Daryl Dixon Member Manjam5's Avatar
    Join Date
    May 28th, 2013
    Location
    Ohio
    Age
    19
    Gender
    Posts
    394
    Album
    Member Photo Albums

    Post Re: BBCode guide


    Text Formatting

    Who needs writing skills when you have text formatting... AMIRITE? No? Okay, I guess I'm not right. Anyway, text formatting is a very important part to creating a good thread. Threads without even the smallest amount of text formatting tend to look slightly dull and unorganized. Below I'll include all of the basic text formatting tags as well as proper use for each individual one:

    Name Example Use Output
    Bold
    HTML Code:
    [B]Hello, world![/B]
    Thickens text Hello, world!
    Italic
    HTML Code:
    [I]Hello, world![/I]
    Emphasis/style Hello, world!
    Underline
    HTML Code:
    [U]Hello, world![/U]
    Underlines text Hello, world!
    Strike
    HTML Code:
    [S]Hello, world![/S]
    Cross out text Hello, world!
    Font
    HTML Code:
    [FONT=impact]Hello, world![/FONT]
    Changes font Hello, world!
    Size
    HTML Code:
    [SIZE=3]Hello, world![/SIZE]
    Changes Size Hello, world!
    Color
    HTML Code:
    [COLOR=RED]Hello, world[/COLOR]
    Changes color
    Color Chart
    Hello, world!
    Left
    Center
    Right
    HTML Code:
     [LEFT]Left Text[/LEFT][CENTER]Center Text[/CENTER][RIGHT]Right text[/RIGHT]
    Modifies text
    alignment
    Left text
    Center text
    Right text
    Subscript
    HTML Code:
     This is [SUB]Subscript[/SUB]
    Below regular
    text
    This is Subscript
    Superscript
    HTML Code:
     This is [SUP]Superscript[/SUP]
    Above regular
    text
    This is Superscript
    Highlight
    HTML Code:
    [HIGHLIGHT]Hello, world![/HIGHLIGHT]
    Highlights text Hello, world
    Indent
    HTML Code:
    [INDENT]Hello, world![/INDENT]
    Indents text
    Hello, world!
    Quote
    HTML Code:
    [QUOTE=manjam5]Hello![/QUOTE]
    Makes a quote
    Quote Originally Posted by manjam5
    Hello!


    Fonts:
    Spoiler Spoiler:

    ​Lists

    Lists are pretty straight forward to use. A list consists of the opening tag, an attribute, content, and closing tag. When combined, these simplistic elements all form a list.

    A fun thing about the BBcode list tag is that it allows you to create numerous types of lists. You're not just limited to numbers and bullet points.

    Name Example Use Output
    Bulletpoint
    HTML Code:
    
    
    [LIST][*] Item 1[*] Item 2 [/LIST]
    
    
    Used to make an unordered/bullet point list
    • Item1
    • Item 2
    Numerical
    HTML Code:
    
    
    [LIST=1] [*] Item 1 [*] Item 2 [/LIST]
    
    
    Used to make an ordered numerical list
    1. Item 1
    2. Item 2
    Upper-Alphabetical
    HTML Code:
    
    
    [LIST=A] [*] Item 1 [*] Item 2 [/LIST]
    
    
    Creates an Upper-case alphabetical list
    1. Item 1
    2. Item 2
    Lower-Alphabetical
    HTML Code:
    
    
    [LIST=a] [*] Item 1 [*] Item 2 [/LIST]
    
    
    Creates a Lower-case alphabetical list
    1. Item 1
    2. Item 2


    Links
    Links are an essential part of making a post. You can post links to videos, websites, pictures, games, and files. Next to text formatting code, I see links used more than any other element. Links have a lot of practical uses, so learning how to utilize them all can be important.

    Name Example Use Output
    Unnamed link
    HTML Code:
    [URL]http://forums.govteen.com/forum.php[/URL]
    Make a regular link without a title http://forums.govteen.com/forum.php
    Link W/ Title
    HTML Code:
    [URL=http://govteen.com]Website name[/URL]
    Add a title to the link Website name
    Embed a Video
    HTML Code:
    [video=youtube;Mcc0zx-CxjA]https://www.youtube.com/watch?v=Mcc0zx-CxjA[/video]
    Embed a video into the post Video removed to save space! Sorry!
    Email
    HTML Code:
    [EMAIL]manjam5@test.com[/EMAIL]
    Add a direct link to your email address manjam5@test.com


    Adding Code

    If you're a programmer like me, you know how important it is to have clean code when writing your programs. The same is true when you're posting your code onto a forum for assistance. The [HTML], [PHP], And [CODE] Tags help maintain the original formatting of your code. They also prevent it from being compiled..

    Name Example Use Output
    CODE
    HTML Code:
    [CODE]#include <iostream>int main(){ std::cout << "Hello World!"; }[/CODE]
    (Sorry about the formatting here!)
    Adding code to your thread
    Code:
     #include <iostream>
    int main()
    {  std::cout << "Hello World!";
    return 0;}
    PHP
    HTML Code:
    [PHP]Print Hello, world![/PHP]
    Adding PHP examples to your thread
    PHP Code:
    Print HelloWorld
    HTML
    HTML Code:
    [HTML]<h1>Hello, world!</h1>
    [/HTML]
    Adding HTML examples to your thread
    HTML Code:
    <h1>Hello, world!</h1>
    Noparse
    HTML Code:
    [noparse][B]Hello, world[/noparse]
    Allows you to post BBCode without it being
    compiled
    [B]Hello, world[/B]



    Creating Tables

    Creating tables are useful for quite a few things. See those boxes above? those are all tables. Tables consist of Rows and Columns. A table row is defined using the TR tag. A table column is defined using the TD tag. Tables also have a primary Table tag. When combined, these tags create a table. I'll show you an example of a 2 row, 3 column table:

    Column 1, Row 1 Column 2, Row 1 Column 3, Row 1
    Column 1, Row 2 Column 2, Row 2 Column 3, Row 2

    So as you can see, it has 2 rows and 3 columns for each row. Here is an example of how that table was made:
    HTML Code:
    [table="width: 500, class: grid"]
    [tr]
    [td]Column 1, Row 1[/td]
    [td]Column 2, Row 1[/td]
    [td]Column 3, Row 1[/td]
    [/tr]
    [tr]
    [td]Column 1, Row 2[/td]
    [td]Column 2, Row 2[/td]
    [td]Column 3, Row 2[/td]
    [/tr]
    [/table]
    The [TABLE] tag at the top tells the forum that a new table has been defined. Inside of the main [TABLE] tag are the attributes. In this case we have a widthattribute which defines how wide a table is be default, and a class/grid attribute telling the forum what type of border the table should have. In the example above, we use a table with a grid border. A "grid border" class makes the border around your table well defined. The other border options are Outer_grid and no border. If you don't want a border, just leave out the class attribute and it won't include a border. Another important attribute of the [TABLE] tag is the Alignment attribute. To add alignment, add either Align: right, Align: left, or Align: center. By default, tables will align to the left. Despite being automatically aligned to the left side of the screen, it is more proper to add the Align: left attribute.


    Last edited by Manjam5; Apr-25-2014 at 02:28 AM.

  3. #3
    Endorsed by Daryl Dixon Member Manjam5's Avatar
    Join Date
    May 28th, 2013
    Location
    Ohio
    Age
    19
    Gender
    Posts
    394
    Album
    Member Photo Albums

    Post Re: BBCode guide

    Pictures

    Pictures are my personal favorite part of BBcode. Next to text formatting, inserting pictures is the easiest thing you can do. There are only two different type of images, linked and unlinked. Unlinked image just show an image whereas linked images show an image that if clicked on takes you to a URL.


    Name Example Use Output
    Unlinked Image
    HTML Code:
    [IMG]http://forums.govteen.com/images/govteen/misc/logo.png[/IMG]
    Posting an unlinked image
    Unlinked Image
    HTML Code:
    [URL=http://forums.govteen.com/forum.php][IMG]http://forums.govteen.com/images/govteen/misc/logo.png[/URL][/IMG]
    Posting a linked image




    Other


    Congratulations! By now, you should have a greater understanding of BBCode. If you don't want to, you don't have to finish this section. I just want to touch up on some things I might have missed in the last sections.


    You may have seen me use the word "Attribute" quite a bit in this. Attributes are the extra data that you assign inside of the opening tag. For example: [TABLE="class: grid, width: 929, align: center"] In this example, Class: grid, width: 929, and align: center are the attributes. This has the same basic meaning as in HTML/CSS.


    You may have also noticed that all of my tags are capitalized. The case of your tag doesn't change how it runs. So you could write [video] or you could write [VIDEO]. You could even do this if you wanted to: [ViDeO]. People generally use lower-case tags when they write BBCode. However, you can do whatever makes you feel most comfortable. When making some attributed, be mindful of the case. When you're making a list and you need to assign list-type attributes to the

    [LIST] tag, the case you use does matter.


    I'd like to also point out that the align tags can be used to align more than just text. You can align anything that is contained within them :3


    If you'd like to include BBCode in a message/on a thread without it compiling, use the [NOPARSE][/NOPARSE] tags. They allow you to type out BBCode without it being compiled by the system.

    If you want to reference this guide, please give me/govteen full credit for it. I spent my time writing it, crediting me is the least you can do.


    PLEASE DO NOT REPLY - PLEASE DO NOT REPLY - PLEASE DO NOT REPLY - PLEASE DO NOT REPLY - PLEASE DO NOT REPLY

    As much as I appreciate feedback, the mods have requested that nobody replies to this topic. It will be locked in a few hours to prevent replies. If you have feedback (good or bad), I'd love to hear it in my private messages. Thanks!
    Last edited by Manjam5; Apr-25-2014 at 01:07 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Your tex bbcode is broke.
    By Zero Beat in forum GovTeen Headquarters
    Replies: 1
    Last Post: Jul-20-2012, 06:48 AM
  2. images and bbcode
    By joshua.justice in forum GovTeen Headquarters
    Replies: 3
    Last Post: Sep-28-2010, 03:51 PM
  3. LaTeX BBcode
    By It's Been Fun! in forum GovTeen News, FAQ and Help Articles
    Replies: 0
    Last Post: Sep-25-2008, 10:18 AM
  4. LaTeX BBcode
    By It's Been Fun! in forum GovTeen Headquarters
    Replies: 33
    Last Post: Sep-25-2008, 09:09 AM
  5. The Best flirting guide ever
    By Taboosun in forum Love and Dating
    Replies: 0
    Last Post: Nov-22-2004, 08:39 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •