Forums Kongregate

ES-Razzi Tutorials - HTML Formatting For Your Posts

98 posts

Flag Post

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!

 
Flag Post

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.

 
Flag Post
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.

 
Flag Post

Good job, bookmarked. Thanks!

 
Flag Post
Originally posted by googoolyeye:

Good job, bookmarked. Thanks!

Once again, the pleasure’s all mine. ;)

Thanks for reading.

 
Flag Post

Line break is

< hr >.

Otherwise great guide. :)

 
Flag Post

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

 
Flag Post

Thanks, I’ll fix those things.

 
Flag Post

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

 
Flag Post
Originally posted by BlackBone:

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

Same here. :p

 
Flag Post

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

 
Flag Post

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



Phooltk

[text displayed on mouseover in IE with no title defined and under properties otherwise]
*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
 
Flag Post

I added some of the stuff you mentioned.

 
Flag Post

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.

 
Flag Post

I already mentioned bold.

And after a certain amount of characters “textile” get’s deactivated.

 
Flag Post

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.

 
Flag Post
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*

 
Flag Post

Épica.

 
Flag Post
Originally posted by EndlessSporadic:

Épica.

Gracias, señor. imponente.

 
Flag Post
Originally posted by EndlessSporadic:

Épica.

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

Anyway, well done!

 
Flag Post
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

 
Flag Post

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

 
Flag Post
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::

 
Flag Post
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

 
Flag Post

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.