TUTORIAL DIRECTORY

LANGUAGES

English

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 →

Links an image to any url.

<A HREF="URL"> <IMG SRC="URL of Image"></a>

---

Links

Example: Linked Text

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:

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:

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:

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
3. Phooltk

---

*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:

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:

Épica.

Gracias, señor. imponente.

Originally posted by EndlessSporadic:

Épica.

What does that mean? Sorry, I don’t speak Spanish.

Anyway, well done!

Originally posted by Marh:

Originally posted by EndlessSporadic:

É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:

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:

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.