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
BBCode stands for
Bulliten
Board
CodeBBCode 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
[b]Hi[/b]
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
[b][/b]
[i][/i]
[u][/u]
[s][/s]
[table][/table]
[flash=200,200][/flash]
[img][/img]
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
BBCode Tags:Tag: Bold
Example:
I'm Sooo Bold[b]Text You Want Bold[/b]
Tag: Italics
Example:
I'm in Italics[i]Text You Want In Italics[/i]
Tag: Underline
Example:
I'm Underlined![u]Text to be Underlined[/u]
Tag: Strikeout
Example:
1...2...3...This is StruckOut![s]Text To Be Struckout[/s]
Tag: Glow
Example:
I'm Glowing with Happiness![glow=red,2,300]Text to Glow[/glow]
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.
Tag: Shadow
Example:
Hiding in the Shadows[shadow=red,left]Text to be Shadowed[/shadow]
Again you have the ability to define how the shodow looks.
Change the red to whatever colour and the left to whatever direction.
Tag: Marquee
[move]Text to Marquee[/move]
Tag: Preformatted Text
Example:
I'm Preformatted
[pre]Text to be Preformatted[/pre]
Tag: Left Align
Example:
I'm on the Left Side
[left]Text to be on the Left[/left]
Tag: Center Align
Example:
I'm Centered
[center]Text to be Centered[/center]
Tag: Right Align
Example:
I'm on the right
[right]Text to be Right Aligned[/right]
Tag: Horizontal Rule
Example:
[hr]
Note: There is not a end tag for this one
Tag: Font Size
Example:
I'm HUGE! I'm Small[size=10pt]Text to be Sized[/size]
Again there's a part to be defined.
Simply change the number before "pt"
Bigger Number=Bigger Text
Tag: Font Face
Example:
I'm Different[font=Verdana]Text To be Changed[/font]
Again...change the word "Verdana" to whatever font you want
Tag: Colour
Example:
I'm Red[color=Black]Text to be Coloured[/color]
Again...change the colour in the tag
Tag: Insert Flash
Example: None
[flash=200,200]Flash File Name[/flash]
Tag: Insert Image
Example:
[img]URL of Image[/img]
Tag: Insert Link
Example:
www.smfforfree.com/support or
Click Here[url]URL of Resource[/url]
or if you want a link like the Click Me example
[url=URL OF RESOUCE]Text to be Clicked[/url]
Tag: Insert E-Mail
Example:
email@email.com[email]E-Mail[/email]
Tag: Insert FTP Link
Example:
ftp://something/something[ftp]FTPLink[/ftp]
Tag: Insert Table
Guide To Making a TableExample: 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]
Note: You need the Insert Table tags for these to work
Tag: Insert Table Column
Example: None--See Guide Above
[td][/td]
Note: These need the Table Row code and Insert Table code to be effective
Tag: Superscript
Example:
I'm Higher![sup]Superscripted Text[/sup]
Tag: Subscript
Example:
I'm Lower[sub]Subscripted Text[/sub]
Tag: Teletype
Example:
Teletype[tt]Text to be teletype[/tt]
Tag: Insert Code
Example:
This is Code
Code: (without the spaces)
[ code ][ /code ]
Tag: Insert Quote
Example:
Blah, blah, blah
[quote]Quote[/quote]
Note: You may define who said the quote like this [quote="QUOTED THING"][/quote]
Tag: Insert List
Example:
[list]
[li]Stuff[/li]
[li]More Stuff[/li]
[/list]
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
[color=Maroon][u][b]Like This[/b][/u][/color]
Basic HTML
[/b][/u][/size]
HTML is somewhat like BBCode.
First off(not like it really matters but it's nice to know) HTML stands for
Hyper
Text
Markup
Language
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.
Tag: Bold
<b> Text to be Bolded</b>
Tag: Italics
<i>Italicized Text</i>
Tag: Underline
<u>Underlined Text</u>
Tag: Strike Through
<del>StruckOut Text<del>
Tag: Marquee
<marquee>Text to Marquee </marquee>
Tag: Left Align
<left> Left-Aligned Text</left>
Tag: Center Align
<center> Text to be Centered</center>
Tag: Right Align
<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 1
<p> Blah blah paragraph 2
Tag: Line Break
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>
Hello from Line 2 <br>
Tag: Horizontal Rule
<hr>
Tag: 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: Hyperlink
<a href="WHAT YOU ARE LINKING TO"> CLICKABLE TEXT </a>
Ex.
GoogleTag: Mailto (Insert E-mail)
<a href="mailto:someone@somewhere.com">CLICKABLE TEXT</a>
Tag: Insert Image
<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 height
Tag: Tables
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 GuideA 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: Subscript
<sub> Text </sub>
Tag: Superscript
<sup> Text </sup>
Tag: Lists
There's different kinds of lists in HTML too.
Ordered List (Uses Numbers)
<ol>
<li> First Thing </li>
<li> Second Thing </li>
<li> Third Thing </li>
</ol>
Unordered List (Bullets)
<ul>
<li> Milk </li>
<li> Coffee </li>
<li> Lettuce </li>
<ul>
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!