Someone needs to make a guide about both BBCode and HTML so I thought I might as well take a shot at it...
First off is BBCode
BBCode stands for B
BBCode is used for defining how a post should look. See this text, how it's bold?
That's BBCode. You can also make your text move, glow, be underlined, be centered or just about anything to make your post look how you would like it.
To define how to make text look you simply wrap it in BBCode.
For example Hi
is made by
The code is what made Hi bold.
All BBCode is defined by a [ and a ]. All BBCode has a start and end tag(a end tag is usually the start tag with a /)
See how all the BBCode below is relatively the same except the letters between the code are different
Those letters and numbers tell the forum how to make the post look.
Simply put a tag at the start of something and a tag at the end. The code will do that rest
Now onto what each tag does and how to use it.
Note: BBCode does NOT work in Headers/Footers
Example: I'm Sooo Bold
[b]Text You Want Bold[/b]Tag:
Example: I'm in Italics
[i]Text You Want In Italics[/i]Tag:
Example: I'm Underlined!
[u]Text to be Underlined[/u]Tag:
1...2...3...This is StruckOut!
[s]Text To Be Struckout[/s]Tag:
Example: I'm Glowing with Happiness!
[glow=red,2,300]Text to Glow[/glow] Tag:
Now notice how after the word glow in the start tag you have =red,2,300
That is to define how your glow is to look. Change red to green and you'll
have a green glow. Change the numbers to change the size of the glow.
Example: Hiding in the Shadows
[shadow=red,left]Text to be Shadowed[/shadow]Tag:
Again you have the ability to define how the shodow looks.
Change the red to whatever colour and the left to whatever direction.
[move]Text to Marquee[/move]Tag:
[pre]Text to be Preformatted[/pre]Tag:
I'm on the Left Side
[left]Text to be on the Left[/left]Tag:
[center]Text to be Centered[/center]Tag:
I'm on the right
[right]Text to be Right Aligned[/right]Tag:
Note: There is not a end tag for this one
Example: I'm HUGE! I'm Small
[size=10pt]Text to be Sized[/size]Tag:
Again there's a part to be defined.
Simply change the number before "pt"
Bigger Number=Bigger Text
Example: I'm Different
[font=Verdana]Text To be Changed[/font]Tag:
Again...change the word "Verdana" to whatever font you want
Example: I'm Red
[color=Black]Text to be Coloured[/color]Tag:
Again...change the colour in the tag
[flash=200,200]Flash File Name[/flash]Tag:
[img]URL of Image[/img]Tag:
or Click Here
[url]URL of Resource[/url]Tag:
or if you want a link like the Click Me example
[url=URL OF RESOUCE]Text to be Clicked[/url]
Insert FTP Link
Insert Table Guide To Making a Table
Example: None--See Guide Above
[table]Table Data and other table BBCode[/table]Tag:
Insert Table Row
Example: None--See Guide Above
[tr]Table Date or BBCode for a Table Column[/tr]Tag:
Note: You need the Insert Table tags for these to work
Insert Table Column
Example: None--See Guide Above
Note: These need the Table Row code and Insert Table code to be effective
Example: I'm Higher!
Example: I'm Lower
[tt]Text to be teletype[/tt]Tag:
This is Code
Code: (without the spaces)
[ code ][ /code ]Tag:
Blah, blah, blah
Note: You may define who said the quote like this [quote="QUOTED THING"][/quote]
Note: Simply insert more [li][/li] for a longer list
Notes about BBCode:
- You don't have to memorize all this code. I'm just putting it all out there. You have some VERY simple buttons above the post form. Simply click on the buttons to get the raw code or highlight whatever text you would like to wrap the tags in and click the button and it will wrap the text in the tags for you
- You can nest BBCode and use multiple codes on the same text. Like This See how it's underlined, bold and coloured? Simply put more than one BBCode around the text like this
HTML is somewhat like BBCode.
First off(not like it really matters but it's nice to know) HTML stands for H
It works like BBCode for the most part except instead of [ and ] it's < and >. Many of the tag names are almost the same. For example bold in BBCode is [ b ][ /b ]. In HTML it is simply < b >< /b > (without spaces obviously)
You may use HTML in many areas of your forum(usually labelled) including but not limited to the headers, footers and post form(if enabled).
You may enable HTML in the post form under the Admin Control Panel in Features and Options.
Now I will go over the many HTML tags that may be used in your forum. I will not go over all of them since the list is extremely long but just the important ones. All of the tags I list below may be used in the post form.Basic HTML Tags:
I will not provide an example of what each tag does since examples are already provided above.
<b> Text to be Bolded</b>Tag:
<marquee>Text to Marquee </marquee>Tag:
<left> Left-Aligned Text</left>Tag:
<center> Text to be Centered</center>Tag:
<right>Right ALigned Text</right>Tag:
Indent a Paragraph
Allow me to explain this one. In order to create a proper paragraph you should use this tag since indents and hitting space a lot to create a indent doesn't work. Please use this tag instead.
<p> Blah blah paragraph 1Tag:
<p> Blah blah paragraph 2
Again I should explain this. If you were writing something in HTML you cannot simply press Enter to go down a line. You MUST enter this tag for the eqivilent of pressing Enter
Hello on Line 1 <br>Tag:
Hello from Line 2 <br>
Font Size/Color and Face
Again I should explain the next three tags. All formatting for fonts all happen in the same tag. But in order to change attributes like Color, Size and Face you need to use, well, attributes. Again may I remind you..like every other tag <font> needs a end tag (</font>)
A attritbue is this in bold: <font color="red"
> Text </font>
You can also combine attributes.
So if you wanted to change both colour and size of text then it would be <font color="red" size="4"> Text </font>
Here's the font attributes you can use:color=" "
Ex.<font color="red">Hi</font>or Hisize=" "
Ex. <font size="10pt"> Hi </font> or Hiface=" "
Ex <font face="Veranda">Hi</font> or HiTag:
<a href="WHAT YOU ARE LINKING TO"> CLICKABLE TEXT </a>
Mailto (Insert E-mail)
<a href="mailto:email@example.com">CLICKABLE TEXT</a>Tag:
<img src="URL OF IMAGE">
Attributes: <img src="URL" border="0"> <-No border
<img src="URL" alt="TEXT DISPLAYED ON HOVER"> <--Hover you mouse on any image on this page. That little word is the "alt" attribute.
<img src="URL" width="100" height="100"> <--Width and heightTag:
Again, I need to explain. HTML tables are a lot like tables in BBCode. If you don't know how to make a BBCode table here's a Guide
A HTML table starts with <table> and ends with </table>
A table row is <tr> and </tr>
A table column is called a Data Cell and is <td> and </td>
Also as an extra tag you have <th> and </th> which is a table heading.
You can also insert attributes into the <table> tagl like <table border="0"> <--No border. Change to 1 or more for a border.
And <table bgcolor="red"> <--Makes for a red background colour.
There are more but I won't go into them. PM if you want more.Tag:
<sub> Text </sub>Tag:
<sup> Text </sup>Tag:
There's different kinds of lists in HTML too.Ordered List
<li> First Thing </li>
<li> Second Thing </li>
<li> Third Thing </li>
<li> Milk </li>
<li> Coffee </li>
<li> Lettuce </li>
That covers every BBCode tag in HTML there.
That covers the basic stuff. I think that's done.
If you have any comments or questions simply PM me or even simpler, post here!