Last time I discussed how to use HTML to format text and create links and images in web pages. Today I'll talk a little about another very common language, BBCode.
BBCode (Bulletin Board Code) is used in formatting posts made on message boards, blogs and more. It is similar to HTML in the sense that in using BBCode you also use tags to format something specific. In BBCode tags are indicated by rectangular brackets [ ] surrounding a phrase, URL, image source or keyword, which is in turn transformed into HTML before being delivered to a web browser.
BBCode was implemented as method of providing a safer and easier way of allowing posts to be formatted on forums. Before BBCode, many forums allowed users to include HTML code in their posts, which had many security issues. BBCode solves this problem in being parsed by the forum scripts, making it easier to control what users can do and can not do.
The basic BBCode tags are often very similar accross many different forums, but there are some variants in existance as well. Sometimes BBCode tags has to be in specific cases (i.e. [b]bold text[/b] will work, while [B]bold tex[/B] will not). It is also very different as to which of the more unsafe and/or complex tags that are supported. For instance you cannot always expect the [img] image tag to be supported as allowing posters unlimited power to post any picture they like could have undesired effects.
Here are some of the more common codes and uses:
Name Syntax Purpose
Bold [b]{text}[/b] Makes {text} bold Italic [i]{text}[/i] Makes {text} italic Underline [u]{text}[/u] Underlines {text} Line-through [s]{text}[/s] Create a line-through/strike through on {text} Font-size [size={number}]{text}[/size] Changes the font-size of {text} Font color [color={color}]{text}[/color] Changes the color of {text} Center text [center]{text}[/center] Centers {text} on screen Quote [quote]{text}[/quote] Creates a quotation box containing {text} Quote (named) [quote={name}]{text}[/quote] Creates a quotation box quoting {name} as saying {text} Link [url]{url}[/url] Makes a link to {url} Link (named) [url={url}]{text}[/url] Makes a named link to {url} Example: [url= http://google.com/]Google[/url] Image [img]{url}[/img] Shows the image indicated by {url} Image (resized) [img={width}x{height}]{url}[/img] Shows {url} image resized to {width} and {height} List (unordered) [ul][li]{text}[/li]...[li]{text}[/li][/ul] Displays an unordered list of items List (ordered) [ol][li]{text}[/li]...[li]{text}[/li][/ol] Displays an ordered list of items Youtube videos [youtube]{id}[/youtube] Shows the youtube video indicated by {id} Google videos [gvideo]{id}[/gvideo] Shows the google video indicated by {id}
Advanced users sometimes take advantage of other codes which are commonly used in certain message boards:
[email] email@email.com[/email] email@email.com[quote] - Inserts a quote from a previous post into your reply[quote=Homer]D'oh![/quote] D'oh! [whisper] - Inserts a "whisper" (private) section into your post, which can only be seen by the person(s) specified (and admins of the board). Usage: [whisper=Username]Hi![/whisper] [spoiler] - Inserts a spoiler into your post. This ensures that anyone viewing the post will only be able to view the spoiler if they want to. Usage: [spoiler]Spoiler here[/spoiler] [list] - Inserts a bulleted list into your post. Usage: [list] [*] Item 1 [*] Item 2 [*] etc [/list] Output: Item 1 Item 2 etc [flash] - Inserts a flash movie into your post. Usage: [flash=width,height,true,#ffffff] http://url.com/flash.swf[/flash] [audio] - Inserts a sound into the post. Usage: [audio] http://url.com/sound.mid[/audio] [code] - Inserts a section of code into your post: [code]print "Hi!";[/code] print "Hi!"; [pre]Pre-formatted text[/pre] Use to display pre-formatted (usually monospaced) text |