Contents
- Text Formatting
- Creating Links
- Posting Images
- Posting YouTube Videos
- Posting Lists
- Posting Tables
- Text Formatting:
- 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, use [b][/b]:
[b]Hello[/b]
becomes Hello
- To make a piece of text underlined, use [u][/u]:
[u]Good Morning[/u]
becomes Good Morning
- To make a piece of text italicized, use [i][/i]:
This is [i]Great![/i]
becomes This is Great!
- To make a piece of text bold, use [b][/b]:
- How to change the text color 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, e.g. #FFFFFF, #000000. For example, to create red text you could use:
[color=red]Hello![/color]
or
[color=#FF0000]Hello![/color]
Both will output Hello!
- Changing the text size is achieved in a similar way using [size=][/size]. This tag is dependent on the template the user has selected but the recommended format is a numerical value representing the text size in percent, starting at 20 (very small) through to 200 (very large) by default. For example:
[size=50]TINY[/size]
will generally be TINY
whereas:
[size=200]HUGE![/size]
will be HUGE!
- 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, e.g. #FFFFFF, #000000. For example, to create red text you could use:
- How to post subscript and superscript.
If you are posting technical info you may find that you want to post text as a superscript or subscript. Using the following tags you can!- To make a piece of text subscript, use [sub][/sub]:
The water is 90[sub]degrees[/sub].
becomes The water is 90degrees.
- To make a piece of text superscript, use [sup][/sup]:
You have to check the water 1[sup]st[/sup].
becomes You have to check the water 1st.
- To make a piece of text subscript, use [sub][/sub]:
- How to create bold, italic and underlined text.
- Creating Links:
- Linking to another site
phpBB BBCode supports a number of ways of creating URIs (Uniform Resource Indicators) better known as URLs.- The first of these uses the [url=][/url] tag, whatever you type after the = sign will cause the contents of that tag to act as a URL. For example to link to phpBB.com you could use:
[url=http://www.phpbb.com/]Visit phpBB![/url]
This would generate the following link, Visit phpBB!
- If you want the URL itself displayed as the link you can do this by simply using:
[url]http://www.phpbb.com/[/url]
This would generate the following link, http://www.phpbb.com/
- Additionally, phpBB features something called Magic Links, this will turn any syntactically correct URL into a link without you needing to specify any tags or even the leading http://. For example typing http://www.phpbb.com into your message will automatically lead to http://www.phpbb.com being output when you view the message.
- The same thing applies equally to e-mail addresses, you can either specify an address explicitly for example:
[email]no.one@domain.adr[/email]
which will output no.one@domain.adr or you can just type no.one@domain.adr into your message and it will be automatically converted when you view.
As with all the BBCode tags you can wrap URLs around any of the other tags such as [img][/img] (see next entry), [b][/b], etc. As with the formatting tags it is up to you to ensure the correct open and close order is following, for example:
[url=http://www.google.com/][img]http://www.google.com/intl/en_ALL/images/logo.gif[/url][/img]
is not correct which may lead to your post being deleted so take care.
- The first of these uses the [url=][/url] tag, whatever you type after the = sign will cause the contents of that tag to act as a URL. For example to link to phpBB.com you could use:
- Linking to another site
- Showing Images in Posts:
- Posting Images
phpBB BBCode incorporates a tag for including images in your posts. Two very important things to remember when using this tag are: many users do not appreciate too many images being shown in posts and secondly the image you display must already be available on the internet (it cannot exist only on your computer for example, unless you run a webserver!). Read below on how to get your pictures on the internet. To display an image you must surround the URL pointing to the image with [img][/img] tags. The URL has to be directly to the image, and not the page that the image is on. You will know if you have the right URL as it will end in an image extension (ie. '.jpg' '.gif' '.bmp'). For example:
[img]http://www.google.com/intl/en_ALL/images/logo.gif[/img]
You can link an image in a post by adding the URL code around the image code if you wish.
[url=http://www.google.com/][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/url]
would generate:
- Posting your own pictures.
The key to posting picture that you take online, is that they have to be uploaded somewhere. There are free image hosting sites that you can use to upload your images to the web. Once they are online, all you have to do is get the URL for the image. Remember that the URL has to be a direct URL to the image and end in an image extension (ie. '.jpg' '.gif' '.bmp'). Below are are few free image hosting sites.
http://www.flickr.com
http://photobucket.com and
http://imageshack.us
- Posting Images
- Posting YouTube Videos:
- How to embed a play-able YouTube video inside your post.
Instead of posting a link to a YouTube video, you can actually post a video directly inside your posts. This is a playable video so that members do not have to travel away from the forum or open a new window to watch the video. Because of multiple methods that you can view a YouTube video on YouTube, just copying the URL does not work. You need to obtain the video ID. But you are in luck, because the Video ID is displayed in the URL! In general the Video ID is the string of characters between watch?v= and &, or it is the last string of characters in the URL. Below are some examples with the Video ID's highlighted.
http://www.youtube.com/watch?v=EKC5aqv2huw
http://www.youtube.com/watch?v=EKC5aqv2huw&playnext_from=TL&videos=ciD7SGxdtqw&feature=grec
http://www.youtube.com/user/15FSP#p/a/u/1/EKC5aqv2huw
To embed the video into a post, wrap the Video ID in [youtube][/youtube].
[youtube]EKC5aqv2huw[/youtube]
Will look like so!
- How to embed a play-able YouTube video inside your post.
- Posting Lists:
- 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 favorite colors you could use:
[list]
[*]Red
[*]Blue
[*]Yellow
[/list]
This would generate the following list:
- Red
- Blue
- Yellow
- Red
- 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:
[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
Whereas for an alphabetical list you would use:
[list=a]
[*]The first possible answer
[*]The second possible answer
[*]The third possible answer
[/list]
giving
- The first possible answer
- The second possible answer
- The third possible answer
- Go to the shops
- Creating an Unordered list.
- Posting Tables:
- Creating a table with BBCode.
The format for creating a table is very similar to HTML code. So if you are familiar with HTML coding for tables, it should be natural transition. If not, well hopefully this is written well enough that you will be able to post tables after reading through it.- To have a table you must first define a table with [table][/table]. Inside the table parameters you place the code to add a row with [tr][/tr]. Inside the row parameters you place the code to add a cell with [td][/td]. You can have multiple rows in a table, and multiple cells in a row.
[table]
[tr][td]A TABLE![/td][/tr]
[/table]
Shows up asA TABLE!
[table]
[tr][td]Row 1 - Cell 1[/td] [td]Row 1 - Cell 2[/td][/tr]
[tr][td]Row 2 - Cell 1[/td] [td]Row 2 - Cell 2[/td][/tr]
[/table]
Shows up asRow 1 - Cell 1 Row 1 - Cell 2 Row 2 - Cell 1 Row 2 - Cell 2
- You can also add a header styled cell to a table with [th][/th]. Use this code in place of the plain cell code [td][/td].
[table]
[tr][th]Header - Cell 1[/th] [th]Header - Cell 2[/th][/tr]
[tr][td]Row 1 - Cell 1[/td] [td]Row 1 - Cell 2[/td][/tr]
[/table]
Shows up asHeader - Cell 1 Header - Cell 2 Row 1 - Cell 1 Row 1 - Cell 2
- Sometimes you may want to have a cell that spans the width of multiple cells. You can do this to plain cells with the code [tdm=#][/tdm], and to header cells with the code [thm=#][/thm]. Where # is the number of cells you want it to span.
[table]
[tr][thm=3]The Header[/thm][/tr]
[tr][tdm=2]Row 1 - Cell 1[/tdm] [td]Row 1 - Cell 2[/td][/tr]
[tr][td]Row 2 - Cell 1[/td] [td]Row 2 - Cell 2[/td] [td]Row 2 - Cell 3[/td][/tr]
[/table]
Shows up asThe Header Row 1 - Cell 1 Row 1 - Cell 2 Row 2 - Cell 1 Row 2 - Cell 2 Row 2 - Cell 3
- And you can add all types of formatting inside a table as well, including images and links.
[table]
[tr][thm=3][color=yellow][u]The Header[/u][/color][/thm][/tr]
[tr][tdm=2][url=http://www.google.com]Link to google[/url][/tdm] [td]Row 1 - Cell 2[/td][/tr]
[tr][td]Row 2 - Cell 1[/td] [td]Row 2 - Cell 2[/td] [td]Row 2 - Cell 3[/td][/tr]
[tr][tdm=3][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/tdm][/tr]
[/table]
Shows up asThe Header Link to google Row 1 - Cell 2 Row 2 - Cell 1 Row 2 - Cell 2 Row 2 - Cell 3
- To have a table you must first define a table with [table][/table]. Inside the table parameters you place the code to add a row with [tr][/tr]. Inside the row parameters you place the code to add a cell with [td][/td]. You can have multiple rows in a table, and multiple cells in a row.
- Creating a table with BBCode.
