Advertise Here

Author Topic: [Guide] BBCode and Basic HTML  (Read 50991 times)

0 Members and 1 Guest are viewing this topic.

Offline Crasy

  • Global Moderator
  • *
  • Posts: 3960
  • Semi-Retired ;)
    • View Profile

  • Total Badges: 29
    Badges: (View All)
    Poll Starter Poll Voter Seventh year Anniversary Arcade Highscore Windows User
[Guide] BBCode and Basic HTML
« on: July 24, 2006, 11:09:29 am »
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 Code
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
Code: [Select]
[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
Code: [Select]
[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
Code: [Select]
[b]Text You Want Bold[/b]
Tag: Italics
Example: I'm in Italics
Code: [Select]
[i]Text You Want In Italics[/i]
Tag: Underline
Example: I'm Underlined!
Code: [Select]
[u]Text to be Underlined[/u]
Tag: Strikeout
Example: 1...2...3...This is StruckOut!
Code: [Select]
[s]Text To Be Struckout[/s]
Tag: Glow
Example: I'm Glowing with Happiness!
Code: [Select]
[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
Code: [Select]
[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
Example: I'm Moving!
Code: [Select]
[move]Text to Marquee[/move]
Tag: Preformatted Text
Example:
 I'm Preformatted

Code: [Select]
[pre]Text to be Preformatted[/pre]
Tag: Left Align
Example:
I'm on the Left Side
Code: [Select]
[left]Text to be on the Left[/left]
Tag: Center Align
Example:
I'm Centered
Code: [Select]
[center]Text to be Centered[/center]
Tag: Right Align
Example:
I'm on the right
Code: [Select]
[right]Text to be Right Aligned[/right]
Tag: Horizontal Rule
Example:
Code: [Select]
[hr]
Note: There is not a end tag for this one

Tag: Font Size
Example: I'm HUGE! I'm Small
Code: [Select]
[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
Code: [Select]
[font=Verdana]Text To be Changed[/font]
Again...change the word "Verdana" to whatever font you want

Tag: Colour
Example: I'm Red
Code: [Select]
[color=Black]Text to be Coloured[/color]
Again...change the colour in the tag

Tag: Insert Flash
Example: None
Code: [Select]
[flash=200,200]Flash File Name[/flash]
Tag: Insert Image
Example:
Code: [Select]
[img]URL of Image[/img]
Tag: Insert Link
Example: www.smfforfree.com/support or Click Here
Code: [Select]
[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
Code: [Select]
[email]E-Mail[/email]
Tag: Insert FTP Link
Example: ftp://something/something
Code: [Select]
[ftp]FTPLink[/ftp]
Tag: Insert Table Guide To Making a Table
Example: None--See Guide Above
Code: [Select]
[table]Table Data and other table BBCode[/table]
Tag: Insert Table Row
Example: None--See Guide Above
Code: [Select]
[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
Code: [Select]
[td][/td]
Note: These need the Table Row code and Insert Table code to be effective

Tag: Superscript
Example: I'm Higher!
Code: [Select]
[sup]Superscripted Text[/sup]
Tag: Subscript
Example: I'm Lower
Code: [Select]
[sub]Subscripted Text[/sub]
Tag: Teletype
Example: Teletype
Code: [Select]
[tt]Text to be teletype[/tt]
Tag: Insert Code
Example:
Code: [Select]
This is CodeCode: (without the spaces)
[ code ][ /code ]

Tag: Insert Quote
Example:
Quote
Blah, blah, blah
Code: [Select]
[quote]Quote[/quote]
Note: You may define who said the quote like this [quote="QUOTED THING"][/quote]

Tag: Insert List
Example:
  • Stuff
  • More Stuff
Code: [Select]
[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
Code: [Select]
[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
Code: [Select]
<b> Text to be Bolded</b>
Tag: Italics
Code: [Select]
<i>Italicized Text</i>
Tag: Underline
Code: [Select]
<u>Underlined Text</u>
Tag: Strike Through
Code: [Select]
<del>StruckOut Text<del>
Tag: Marquee
Code: [Select]
<marquee>Text to Marquee </marquee>
Tag: Left Align
Code: [Select]
<left> Left-Aligned Text</left>
Tag: Center Align
Code: [Select]
<center> Text to be Centered</center>
Tag: Right Align
Code: [Select]
<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.
Code: [Select]
<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
Code: [Select]
Hello on Line 1 <br>
          Hello from Line 2 <br>

Tag: Horizontal Rule
Code: [Select]
<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 Hi
size=" "   
Ex. <font size="10pt"> Hi </font> or Hi
face=" "
Ex <font face="Veranda">Hi</font> or Hi

Tag: Hyperlink
Code: [Select]
<a href="WHAT YOU ARE LINKING TO"> CLICKABLE TEXT </a>Ex. Google

Tag: Mailto (Insert E-mail)
Code: [Select]
<a href="mailto:someone@somewhere.com">CLICKABLE TEXT</a>
Tag: Insert Image
Code: [Select]
<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 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: Subscript
Code: [Select]
<sub> Text </sub>
Tag: Superscript
Code: [Select]
<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!
« Last Edit: April 01, 2008, 08:05:33 pm by simply sibyl »
Did my answer help you? Want to help out hosting costs?


Every donation counts.

Offline DC

  • SMF For Free Sr. Member
  • *
  • Posts: 295
    • View Profile

  • Total Badges: 18
    Badges: (View All)
    Topic Starter Combination Level 4 Level 3 Level 2
Re: Guide to BBCode and Basic HTML
« Reply #1 on: July 24, 2006, 11:17:36 am »
if you click on help, you will also find out about bbc tags  http://smfsupport.com/support/Themes/default/help/posting.english.html#bbcref

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: [Guide] BBCode and Basic HTML
« Reply #2 on: February 29, 2008, 09:32:48 pm »
+-ღMyrtleღ-+


Thanks Crasy, I'm placing this at my forum. Thanks!
Point them to the Help Tab too Myrtle  ;)
Tell them to Click on Posting  then look under References on that page look for SMF Bulletin Board Code

This is what they will see:
http://www.smfsupport.com/support/index.php?action=help;page=post#bbcref

Offline GodGurl25

  • SMF For Free Member
  • *
  • Posts: 39
    • View Profile
    • AnimeHouse forum

  • Total Badges: 11
    Badges: (View All)
    Topic Starter Combination Level 2 Level 1 10 Posts
Re: [Guide] BBCode and Basic HTML
« Reply #3 on: May 04, 2008, 02:47:33 am »
Um can I ask? Is there a HTML code for code?
I have many questions for forums. So I joined here. LOL. Hehe
Trying to make friends.

Offline LaundryLady

  • Helpers
  • *
  • Posts: 3253
  • Internet Challenged
    • View Profile

  • Total Badges: 26
    Badges: (View All)
    Seventh year Anniversary Sixth year Anniversary Search Poll Voter Level 5
Re: [Guide] BBCode and Basic HTML
« Reply #4 on: May 04, 2008, 07:44:06 am »
Here is a really good site for someone that knows nothing about html.  I used it to teach myself enough html to start setting up a webpage.

http://gazoo.net/htmhell/


And I Play:  Mafia-Mandemz

Offline happy to be here

  • SMF For Free Newbie
  • *
  • Posts: 19
    • View Profile

  • Total Badges: 9
    Badges: (View All)
    Topic Starter Combination Level 2 Level 1 10 Posts
Re: [Guide] BBCode and Basic HTML
« Reply #5 on: August 21, 2008, 10:18:24 am »
how do i make the text large in my post.

Offline Jessie

  • SMF For Free Hero
  • *
  • Posts: 754
    • View Profile
    • iSimple

  • Total Badges: 18
    Badges: (View All)
    Windows User Apple User Mobile User Topic Starter Combination
Re: [Guide] BBCode and Basic HTML
« Reply #6 on: August 21, 2008, 03:54:59 pm »
how do i make the text large in my post.
[size=*SIZE#*pt] *TEXT*[/size]
Feel free to PM me or email me. ;)

My Forum :)

Offline Andrew

  • Helpers
  • *
  • Posts: 2060
  • Andrew at your service
    • View Profile
    • Alabama Weather Prediction

  • Total Badges: 32
    Badges: (View All)
    10 Poll Votes Level 6 Eighth year Anniversary Seventh year Anniversary Sixth year Anniversary
Re: [Guide] BBCode and Basic HTML
« Reply #7 on: January 17, 2009, 06:47:26 pm »
I tried to do this:
Code: [Select]
<img src="http://www.piratesonlineforums.com/forums/images/smilies/8/sign0184.gif" alt="I have an idea!"> (for my avatar, and to show members  some examples of what HTML can do) But none of it shows up. I thought that this would be "Basic HTML"

I go to Admin CP->Posts and Topics->Bulletin Board Code and EVERYTHING there is checked. Anyone got any help for this? Thanks!

Offline Jessie

  • SMF For Free Hero
  • *
  • Posts: 754
    • View Profile
    • iSimple

  • Total Badges: 18
    Badges: (View All)
    Windows User Apple User Mobile User Topic Starter Combination
Re: [Guide] BBCode and Basic HTML
« Reply #8 on: January 17, 2009, 06:53:56 pm »
That codes not BBC for one. BBC uses [ and ] while HTML uses < and >.
Your trying to make it your avatar? You only need the direct URL.
If your trying to post the image you use:
Code: [Select]
[img] image URL here [/img]
Feel free to PM me or email me. ;)

My Forum :)

Offline Andrew

  • Helpers
  • *
  • Posts: 2060
  • Andrew at your service
    • View Profile
    • Alabama Weather Prediction

  • Total Badges: 32
    Badges: (View All)
    10 Poll Votes Level 6 Eighth year Anniversary Seventh year Anniversary Sixth year Anniversary
Re: [Guide] BBCode and Basic HTML
« Reply #9 on: January 17, 2009, 06:59:38 pm »
Which is exactly what's in there now, im trying to have it say "I have an idea" on mouseover

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: [Guide] BBCode and Basic HTML
« Reply #10 on: January 17, 2009, 07:00:53 pm »
Jesse you can post some basic html in posts so long as you have the option checkmarked under Features and Options>Bulletin Board Code>enable Basic HTML in posts.     img src is one of them.   You can do it without having to use the html tags.

That should work, exactly as you have it Andrew. . .   thinking here

Offline Jessie

  • SMF For Free Hero
  • *
  • Posts: 754
    • View Profile
    • iSimple

  • Total Badges: 18
    Badges: (View All)
    Windows User Apple User Mobile User Topic Starter Combination
Re: [Guide] BBCode and Basic HTML
« Reply #11 on: January 17, 2009, 07:02:48 pm »
What's in where? Your post or avatar?
Feel free to PM me or email me. ;)

My Forum :)

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: [Guide] BBCode and Basic HTML
« Reply #12 on: January 17, 2009, 07:05:48 pm »
wait a sec..  Andrew are you saying you put the html code in where you put the code for your avatar in your Profile?
I thought you mean in a post.    You cannot do that in the profile.   You can only use the direct link to the image there.

Offline Andrew

  • Helpers
  • *
  • Posts: 2060
  • Andrew at your service
    • View Profile
    • Alabama Weather Prediction

  • Total Badges: 32
    Badges: (View All)
    10 Poll Votes Level 6 Eighth year Anniversary Seventh year Anniversary Sixth year Anniversary
Re: [Guide] BBCode and Basic HTML
« Reply #13 on: January 17, 2009, 07:09:41 pm »
no no no no. I put this in for my Avatar:
Code: [Select]
[img]http://www.piratesonlineforums.com/forums/images/smilies/8/sign0184.gif[/img]
Originally I AM trying to put it in a post, eh sorry for the confusion  :idiot2:

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: [Guide] BBCode and Basic HTML
« Reply #14 on: January 17, 2009, 07:13:07 pm »
no no no no. I put this in for my Avatar:
Code: [Select]
[img]http://www.piratesonlineforums.com/forums/images/smilies/8/sign0184.gif[/img]
Originally I AM trying to put it in a post, eh sorry for the confusion  :idiot2:

In your Profile for an avatar -  direct link to the image only

In a post - if you have that set correctly it should work.   i cant figure out what would stop it from working.
Until we figure it out you know you can do it this way right?

Code: [Select]
[html]
<img src="http://www.piratesonlineforums.com/forums/images/smilies/8/sign0184.gif" alt="I have an idea!">
[/html]

 

Related Topics

  Subject / Started by Replies Last post
Custom BBCode

Started by guest1608 Suggestions

1 Replies
1881 Views
Last post July 30, 2007, 12:52:24 am
by Kimmie
8 Replies
10451 Views
Last post November 17, 2007, 09:47:08 am
by [SAP]Francis
1 Replies
1576 Views
Last post June 27, 2008, 08:21:37 pm
by Crasy
2 Replies
1645 Views
Last post February 06, 2009, 08:50:22 pm
by Andrew
8 Replies
1905 Views
Last post June 01, 2009, 07:06:45 am
by killerj012