BBCode:Tutorial

This page is under ongoing construction



The Basics

Bbcode is a way to format text in forum posts. It is in some ways similar to HTML. It uses tags, which are little pieces of code enclosed in brackets, such as [b] to make bold text. For every tag, you need a closing tag too. The closing tag is the same as the opening tag except that it has a / symbol at the front. For example, the tag [/b] is code for "stop making the text bold." There is text between the opening and closing tags, that is the text that is modified by the tags.

For example, If you want to say "I love pizza" and want the word "love" to be in bold, you would type

I [b]love[/b] pizza.

This would create, "I love pizza."

Writing Messages in the AoPS Community

The Buttons

Post a reply.PNG This is a picture of what you see when you create a topic or post a reply.

The bold Button

The Bold button.jpeg button is for bold tags. When you click on it, your screen should look like this: Clicked on bold button.PNG These are called bold tags. Then, you can type in any text you want: Type in bold text.PNG When you submit it, it should look like this: Submitted Bold Text.PNG

The Italics Button

The Italics button.jpeg button is the italics button. When you click on it, your screen should look like this:

Clicked on italics button.jpeg

Then you can type in your italicized message:

Italics message.jpeg

When you submit, it should look like this:

Italics result.jpeg

The Underline Button

The Underline button.jpeg button is for underlining text. When you click on it, the symbols [u] and [/u] appear. Then you can type in whatever you want to be underlined:

Underline typing.jpeg

When you submit it, it should look like this:

Underline result.jpeg

Note: you can also highlight text and then click the underline button.

The Quote Button

The Quote button.jpeg button is for quoting text. You can write an anonymous quote, or quote a specific user or person. When you click on it, you get [quote] and [/quote]. Then type in the quote:

Typing generic quote.jpeg

When you hit submit, it looks like this:

Published generic quote.jpeg

Or, alternatively, you can say who quoted it:

Specific quote typing.jpeg

And you get this:

Specific quote published.jpeg

You can also quote a post by clicking this button in the forum.

Arrow to quote button.jpeg

You will be taken to a reply page that looks like this:

Specific quote typing.jpeg

[[File

The Hide Button.JPG Button

The Hide Button.JPG button embeds text in a little interactive clicky. When you click on it, your screen should look like this: Clicked on the Hide Button.JPG Then put in your text: 1+1=2.JPG When you submit, you get this: Hidden Text.JPG
If you click on the words "Hidden Text", you get this: Open Hidden Text.JPG
Or you can label your hidden text. First, write in the title of the hidden text: Labeled Hidden Text.JPG
And then submit:
Published Labeled Hidden Text.JPG Open Labeled Published Hidden Text.JPG

The Code Button.JPG Button

The Code Button.JPG button is for posting code that you don't want to be rendered, ie LaTeX. When you click on it, your screen should look like this: Clicked on the Code Button.JPG Type in your code: Typed in Code.JPG And submit:
Submitted code tag.JPG

The List Button.JPG, List= Button.JPG, and StarButton.JPG Buttons

The List Button.JPG, List= Button.JPG, and StarButton.JPG buttons are for making ordered and unordered lists. To start an unordered list, click on the List Button.JPG button and then use the Enter key to make your screen look like this: Clicked on the List Button.JPG Then click on the StarButton.JPG to start a entry in your list. Making an Unordered List.JPG Type in your entry: Making an Unordered List 2.JPG And do so for all your entries, making sure to stay inside the [list] tags: Making an Unordered List 3.JPG And then submit: Published Unordered List.JPG If you want to make an ordered list on the other hand, use the List= Button.JPG button. Clicked on the List= Button.JPG And type in the number "1": Typed in the number 1.JPG Then add your entries: Making an Ordered List.JPG After you submit, it should look like this: Published Ordered List.JPG

The Img button.JPG Button

The Img button.JPG button is for embedding images in posts. If you have this image:
http://img259.imageshack.us/img259/4337/artofproblemsolvinglogo.jpg
And you want it to show up like this:
Art of Problem Solving Logo.jpg
You use [img] tags. Click on the Img button.JPG button and your screen should look like this:
Clicked on the Img button.JPG
Now insert the link to the image. Make sure it is a direct link.
Img coding.JPG
When you submit, you should get the image!
Published image.JPG

The URL button.JPG Button

The URL button.JPG button is for parsing and naming URLs. If you click it, your screen should look like this:
Clicked on the URL button.JPG
Now type in your URL:
Typed in URL.JPG
When you submit it, it should be parsed:
Parsed URL.JPG
Alternatively, if you want a link that goes somewhere but is not actually named the URL, do this:
Parsed Named URL.JPG