Post by krisandkris on Dec 31, 2015 1:17:36 GMT
My Article
The Title - Eventhough there is a title in the thread name, you should include a formatted title into the post as well. It does not have to be same (but it can be). Try to choose short, snappy title as well as short thread name. Both title and thread name can be capitalized but never full uppercase!
[h1]The Title[/h1]This is a template article for everyone to use as a reference for formated posts on this forum. It both explains common syntax of BBCode and shows some recommended use of it.
This little paragraph may be called the Abstract. It shall contain a short summary of what is in the article. No details, more like commercial to attract reader's attention. For shorter articles it can be very short (one sentence) or missing.
[font size="4"]The Abstract[/font]Text Formatting
The Subtitle - If you decide to split your article in multiple sections, give them their own subtitles.
[font size="5"]The Subtitle[/font]Default font size in posts is set to 10pt. However, recommended size for the basic paragraph text in article is 12pt. The best way to secure this is to wrap whole article into following tags.
[font size="3"]...whole post...[/font]Usual text alignment is either left or justify. You are allowed to use both as long as you keep it uniform but I recommend justify. Posts align to the left by default so again, If you want to use justify, wrap whole article into following tags:
[div align="justify"]...whole post...[/div]Forum native font family is Arial, Helvetica, sans-serif and I suggest everyone to keep it. If you, however, need to change it for some particular use, you need apply following tags on the part of text you want to change. Special font 'Valrea Round' is used for most headings and titles (see 'The Title' above).
[font face="comic sans ms"]My text.[/font]All the tags mentioned so far (along with others like color, bold, italics etc.) are accessible via top edit toolbar. That means instead of typing all of these, you can insert them by clicking the button (and making the choice eventually). All these formatting options should be used decently and with reason, mainly to highlight important words.
Another thing that you may set is padding. Default padding is 5px. As well as basic font size, this is best to apply on whole article.
[div style="padding-left: 5px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px;"]When making longer article, do not forget to make paragraphs in order to make the text easier to read. Another great tool is horizontal rule.
With a tag as simple as this,
[hr]Tables and Lists
Lists have great use in articles, especially when you need to write down a set of properties. Imagine creating a description of some Lego model, you can do it like this:
- Includes 999 minifigures
- 200" tall
- 60000 LEGO® pieces
- Fully detailed interior
[ul type="disc"]
[li]Includes 999 minifigures[/li]
[li]200" tall[/li]
[li]60000 LEGO[sup]®[/sup] pieces[/li]
[li]Fully detailed interior[/li]
[/ul]There are multiple list types which you can select using the button on the toolbar. It is very similar with simple tables, although I do not think these may be useful as often as lists. Basic table (created via button) looks like this.
| Row 1 column 1 | Row 1 column 2 |
| Row 2 column 1 | Row 2 column 2 |
[table][tbody]
[tr]
[td style="border: 1px solid #000; padding: 3px;"]Row 1 column 1[/td]
[td style="border: 1px solid #000; padding: 3px;"]Row 1 column 2[/td]
[/tr]
[tr]
[td style="border: 1px solid #000; padding: 3px;"]Row 2 column 1[/td]
[td style="border: 1px solid #000; padding: 3px;"]Row 2 column 2[/td]
[/tr]
[/tbody][/table]Links
Another basic thing you will certainly need is inserting clickable links with your own text. It looks all better than showing whole URL. Any word (or words) in your text can become hypertext link, just need to wrap these into correct tag. Then you have your link as a result.
[a href="http://"]your text[/a]Images
Almost every article needs some images. Therefore you need to be able to include and format them. What is very important is outsourcing. That allows you to display image which is actually stored on another website (most likely your photo web hosting like flickr, photobucket...). This is very important because the image does not fill the limited server storage this forum has. Please do NEVER include images as attachments! Proper image code is following:
[img src="your-image-url" alt="Illustrative image"]If you want your image to serve as clickable hypertext link, all you need is to wrap the code above into link tags.
[a href="your-link-url"][img src="your-image-url" alt="Illustrative image"][/a]There are many options how to format images - border, width, height. Learning how to use these is the matter of practise. You should always use common style for images that have similar context (role) in your article. In most cases the best way is only to modify width. Changing both width and height without using proper ratio will adversely distort the image.
The basic alignment is done by wrapping previous image code into following tags.
Left
[div align="left"]insert image code here[/div]Right
[div align="left"]insert image code here[/div]Center
[div align="center"]insert image code here[/div]or[center]insert image code here[/center]Here is the example of outsourced, linked and centered image:
If you want your layout to be a bit more interesting you might want to align image and paragraph next to each other.
| This layout looks quite fancy already. It's particularly useful if you want to use decent sized image without wasting the rest of page width. Unfortunately, there are no direct tags available on this forum that would allow text to wrap around images. Therefore you need to use your knowledge of tables to do this layout trick. As usual, code is bellow. If you decide to use this align ("thumbs up"), do not forget to think about how does it look. Finding a good match of image size and paragraph length may take a while. As you can see here, this paragraph could be a little longer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . just about this long. |
[table style="border-collapse:separate;border-spacing:3px;width:100%"][tbody][tr][td style="width:40%"][a href="your link URL"][img src="your image URL" width="100%"]
[/a][/td][td style="vertical-align: top;"][div align="justify"]Your text[/div][/td][/tr][/tbody][/table]A table without line borders with only one row and two columns and some cell spacing - as easy as that. And it also concludes the content of this article. Obvious but important note is that most of BBCode tags can be stacked and used inside each other.
I hope the way I explained everything is comprehensive and this will be useful for many of you. Getting used to it may require some practice but in the end it is all rather simple. Of course, feel free to ask any question regarding this topic.
Following code (spoiler) puts all the examples above together into one ready-to-use template. After reading through this guide, you should be able to modify and use this code for your own articles.
Good luck!
krisandkris ,
Forum Admin
[div align="justify" style="padding-left: 5px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px;"][font size="3"]
[h1]Title[/h1]
[font size="4"]Abstract[/font]
[font size="5"]Subtitle[/font]
[hr]
[font size="5"]Subtitle[/font]
[ul type="disc"]
[li]List item[/li]
[li]List item[/li][/ul]
[table][tbody][tr][td style="border:1px solid #000;padding:3px;"]Row 1 column 1[/td][td style="border:1px solid #000;padding:3px;"]Row 1 column 2[/td][/tr][tr][td style="border:1px solid #000;padding:3px;"]Row 2 column 1[/td][td style="border:1px solid #000;padding:3px;"]Row 2 column 2[/td][/tr][/tbody][/table]
[font size="5"]Subtitle[/font]
Your text paragraph with link [a href="http://http://www.mocpages.com/group.php/24440"]your link[/a] your text paragraph with link.
[font size="5"]Subtitle[/font]
[div align="center"][a href="your-link-url"][img width="800" alt="Big linked centered image" src="your-image-url"][/a][/div]
[table style="border-collapse:separate;border-spacing:3px;"][tbody][tr][td][a href="your-link-url"][img src="your-image-url" width="400px"]
[/a][/td][td style="vertical-align: top;"][div align="justify"]your text[/div][/td][/tr][/tbody][/table]
[/font]
[/div]
