[TUTORIAL DIRECTORY](http://www.kongregate.com/forums/1/topics/30440) ### LANGUAGES [English](http://www.kongregate.com/forums/1/topics/36542?page=1#posts-758204) ## Introduction * * * Many of you are disappointed when your wonderfully created post is mashed into one, never-ending word wall all because your post has too many characters. Well you have to worry NO MORE- because this guide will show you everything you need to know about making your long post the way you want it! * * * # The Basics * * * Most of you are aware of how to use the [bq.], [\* & \_], or [!] tags on your post for coding, but these methods of coding get disabled after your post reaches a certain character count. So, I’ll be first teaching you about popular Kongregate code, HTML style. * * * ### Quotes Example: > Quotes look like this. Here is how you normally quote somebody: `bq. Users post you're quoting` In HTML: `<blockquote> Users post you're quoting``</blockquote>` These methods aren’t completely necessary, since you can quote somebody by clicking “Quote Post” on the post you want to quote. * * * ### Bold and Italics Example: **Bold text looks like this.** Example: _Italicized test looks like this._ Bold in Kongregate `*Important Text*` Bold in HTML `<b>Important Text</b>` Bold in HTML `<strong>Important Text</strong>` Italics on Kongregate `_Sarcasm Here_` Italics in HTML `<i>Sarcasm Here</i>` `<em>Sarcasm Here</em>` `<cite>Sarcasm Here</cite>` * * * ### Underlined and Slashed Text Example: Underlined text looks like this. Example: ~~Slashed text looks like this.~~ Underlined `+Text+` OR `<ins>Text</ins>` Slashed Text `-Text-` OR `<del>Text</del>` * * * ### Images Example: Image →  On Kongregate `!Image URL!` In HTML `<img src='Image URL'>` In HTML (To specify dimensions) `<img src='Image URL' width='Width in Pixels' height='Height in Pixels'/>` * * * ### Images (That Link to a Website) Example: Click on the image → [](http://www.kongregate.com/accounts/hokage4354) Links an image to any url. `<A HREF="URL"> <IMG SRC="URL of Image"></a>` * * * ### Links Example: [Linked Text](http://www.kongregate.com/accounts/hokage4354) To link to an on-the-web location. On Kongregate `"Link text":url` In HTML `<a href="url">Link text</a>` * * * ## Advanced & Extra * * * These are some extra and more advanced HTML codes that, when used wisely, can really come in handy. Includes important codes for long post. * * * ### Text Size ###### Very Small Text `<h6>Text</h6>` ##### Small Text `<h5>Text</h5>` #### Normal Text #### `<h4>Text</h4>` ### Medium Text ### `<h3>Text</h3>` # Large Text `<h1>Text</h1>` ## Extra Large Text `<h2>Text</h2>` ### Big/Small **Big Text** `<big>Text</big>` Small Text `<small>Text</small>` * * * ### Text Position Example: Upper Text Regular Text Lower Text Upper Half `^Text^` OR `<sup>Text</sup>` Bottom Half `~Text~` OR `<sub>Text</sub>` * * * ### Paragraphs/Divider These are used to skip lines and create bodies of text. Sample: `<p>This is your paragraph</p>` Divider Sample: `<p>This is some text.</p>` `<hr />` `<p>This is some text.</p>` * * * ### Code Tags Code tags are used to disable code in order to display coding. `@Phooltk@` `<code>code here</.code>` `(Remove the period)` Similarly, =,=‘s before and after text deactivate coding. `==*Bold*==` will become \*Bold\* * * * ### “Gray Boxes” Example: ` I’m in a box!` Puts a gray box around text, and changes text type. `<pre>In Gray Box</pre>` * * * Feel free to add or contribute, and thanks for reading!

Don’t forget \<.embed\> (with the dot :P). Doubt you’ll ever use it, but I posted aC’s “report posts” flash thingy in a thread somewhere using embed.

> *Originally posted by **[MyDreamName](/forums/1/topics/36542?page=1#posts-758217):*** > > Don’t forget \<.embed\> (with the dot :P). Doubt you’ll ever use it, but I posted aC’s “report posts” flash thingy in a thread somewhere using embed. Embed is a whole different thing. I’m just focusing on HTML that a regular user will find handy.

Good job, bookmarked. Thanks!

> *Originally posted by **[googoolyeye](/forums/1/topics/36542?page=1#posts-758231):*** > > Good job, bookmarked. Thanks! Once again, the pleasure’s all mine. ;) Thanks for reading.

Line break is \< hr \>. Otherwise great guide. :)

The html version of quoting must have \< /blockquote \> at the end, I think.

Thanks, I’ll fix those things.

Dude this helped alot, thankyou! PS. I love The Legend Of Zelda!

> *Originally posted by **[BlackBone](http://www.kongregate.com/forums/1/topics/36542?page=1#posts-759221):*** > > Dude this helped alot, thankyou! > PS. I love The Legend Of Zelda! Same here. :p

Some special symbols: &lt; = \< &gt; = \> &amp; = & These allow you to write HTML-tags without using \<code\>…\</code\>.

here, a bunch you don’t have here, some more useful than others… neaten ‘em up if you want. Some won’t be obvious from the text used. ` <em>Phooltk</em> <big>Phooltk</big> <small>Phooltk</small> ^Phooltk^ or <sup>Phooltk</sup> ~Phooltk~ or <sub>Phooltk</sub> <del>Phooltk</del> -Phooltk- +Phooltk+ or <ins>Phooltk</ins> <tt>Phooltk</tt> <h1>Phooltk</h1><h2>Phooltk</h2><h3>Phooltk</h3><h4>Phooltk</h4><h5>Phooltk</h5><h6>Phooltk</h6> <ul><li>Phooltk<li/><li>Phooltk<li/></ul> <ol><li>Phooltk<li/><li>Phooltk<li/></ol> <br> <hr> <div>Phooltk</div> <img src="http://cdn4.kongregate.com/user_avatars/0020/8468/dogcatcht1.gif" alt="[text displayed on mouseover in IE with no title defined and under properties otherwise]" width="[see below*]" height="[height]"> *default = in pixels, can also do width="x%" where 100% is post width rather than default picture width. Both y and x are scaled by this factor making 'height' redundant. % cannot be used for y. -- ==Phooltk== @Phooltk@ or <code>Phooltk</code> <pre>Phooltk` _Phooltk_ **Phooltk** Phooltk Phooltk or Phooltk Phooltk or Phooltk ~~Phooltk~~ ~~Phooltk~~ Phooltk or Phooltk Phooltk # Phooltk ## Phooltk ### Phooltk #### Phooltk ##### Phooltk ###### Phooltk - Phooltk - - Phooltk - 1. Phooltk 2. 3. Phooltk 4. * * * Phooltk ![[text displayed on mouseover in IE with no title defined and under properties otherwise]](http://cdn4.kongregate.com/user_avatars/0020/8468/dogcatcht1.gif) \*default = in pixels, can also do width=“x%” where 100% is post width rather than default picture width. Both y and x are scaled by this factor making ‘height’ redundant. % cannot be used for y. — Phooltk `Phooltk` or `Phooltk` `Phooltk`

I added some of the stuff you mentioned.

fixed the lists you may find the ==s useful for making the list cleaner, they won’t work on html but should mean text isn’t processed for textile, or something **text** → \*text\* a lot of the textile stuff seems to be really fragile, html is generally less annoying.

I already mentioned bold. And after a certain amount of characters “textile” get’s deactivated.

No, not the bold, the point was enclosing in double equals shows the asterisk instead of making it bold, which is actually pretty useful to stop stuff going bold, superscript etc when you don’t want it to.

> *Originally posted by **[phooltk](http://www.kongregate.com/forums/1/topics/36542?page=1#posts-759977):*** > > No, not the bold, the point was enclosing in double equals shows the asterisk instead of making it bold, which is actually pretty useful to stop stuff going bold, superscript etc when you don’t want it to. Oh I see. \*Bold\*

Épica.

> *Originally posted by **[EndlessSporadic](/forums/1/topics/36542?page=1#posts-805709):*** > > Épica. Gracias, señor. imponente.

> *Originally posted by **[EndlessSporadic](/forums/1/topics/36542?page=1#posts-805709):*** > > Épica. What does that mean? Sorry, I don’t speak Spanish. Anyway, well done!

> *Originally posted by **[Marh](/forums/1/topics/36542?page=1#posts-805720):*** > > *Originally posted by **[EndlessSporadic](/forums/1/topics/36542?page=1#posts-805709):*** > > > > Épica. > > What does that mean? Sorry, I don’t speak Spanish. > > Anyway, well done! Means “Epic” :p

If you’re smart enough to make a guide like this, you should be clever enough to understand I was joking.

> *Originally posted by **[Marh](/forums/1/topics/36542?page=1#posts-805732):*** > > If you’re smart enough to make a guide like this, you should be clever enough to understand I was joking. ::facepalm::

> *Originally posted by **[Marh](/forums/1/topics/36542?page=1#posts-805732):*** > > If you’re smart enough to make a guide like this, you should be clever enough to understand I was joking. I saw no italics or joking-ness in your post. :3

Don’t use Google translator to translate it to Spanish. The translation is seriously bad, and you have JaumeBG which apparently feels like translating all of them.