Avatar codes are created to allow images and text to be formated and posted in HTML based chatrooms, so that it looks good. There are many different combinations available. Within this page, you'll find the basics necessary to enable you to code your own avatars, and also change existing codes you may have.

Firstly, the fundamental rule of coding with HTML is to remember that its built up using sections of codes. For example, you can code the text, then code the avatar, place the avatar, and add a mouse over, all in different parts of the code.

* - Please keep in mind. with most commands, they come in a pair. to begin the commant you place it between these brackets - <> and to END the command, place it between the same brackets and add a slash mark, like so - </>.

** - It is vital to remember also, that within these commands, you may need to use the "quotation marks". The reason for this being, if for example your using the <Font Face=Arial> command. It will recognise the one word font name without the "quotation marks" but it will NOT recognise a multiple word font name without the "quotation marks" like so - <Font Face=Tempus Sans ITC>. Another example of this exception to the rule would be mouse overs for avatars.

Formatting Text

<B> </B>	This will allow you to make your text BOLD.
<I> </I>	Place this command before and after the text you wish to appear in ITALICS.
<U> </U>	This will allow you to underline your text.
<EM> </EM>	Place this command before text you wish be emphasised. This can be used in place of the italics command.
<STRONG> </STRONG>	Again, this can be used to emphasise text.
<Font size=4> </Font>	This command can help you size your text. Like so.
<CENTER> </CENTER>	This will allow you to center your text.
<Font color=red> </Font>	Using this command allows you to determine what colour your font will be. To view the colour chart Click Here.
<Font Face=Arial> </Font>	You can alter the type setting on your text using this command. However, in order to see the fonts, you must ensure that they are installed on your computer.
<BR>	This command will allow you to create a line space between text and avatar etc. Like so.
<P>	This command is similar to the line break command, but it creates a new paragraph instead. Like so. * - Please note that some chatrooms do not recognise this command, therefore you will have to use the BR command twice to get the same effect.

Formatting Images

<img src=http://www.avatarsbydesign.com/sample/sample.jpg> Using this section of code, placing your image link in, will allow your image to post within an HTML based chatroom. For this example, I've coloured the link green. This is the part of the code that determines what image you will show.

<img src=http://www.avatarsbydesign.com/sample/sample.jpg alt='Groovey Mouse Over goes Here'> As you will see, its the same basic code, but this time, I've added red text which is your mouse over. The mouse over posts 'within these quotation marks' - therefore, please do NOT use apostrophe's as this will end your code before the closing quotation mark.

<img src=http://www.avatarsbydesign.com/sample/sample.jpg alt='Groovey Mouse Over goes Here' align=left> In this example, the text in pink determines the positioning of the avatar. This can be either left, right, bottom, top, middle, center.

<img src=http://www.avatarsbydesign.com/sample/sample.jpg alt='Groovey Mouse Over goes Here' align=left border="2"> Using the border=? part of the code allows you to apply a basic border to your image. It also allows you to ensure that there is NO border around your image, if you are using an active link.

<A href=http://www.anysite.com target=new><img src=http://www.avatarsbydesign.com/sample/sample.jpg alt='Groovey Mouse Over goes Here' align=left border="2"> </A> This sample shows how to code an active link, so that when you click the avatar it opens a NEW WINDOW and the site that is used in the code should appear. The TARGET=NEW part requests that the site be oppened in a new window. The </A> part is essential so that only the image is active. without it, everything you type will be an active link.

Sample Avatar Codes

Sample 1 <font color=#CABDCE>Sample<br><center><img src=http://www.avatarsbydesign.com/graphics/sampleava.jpg alt='Sample Mouse Over'><br><br> Click here to view the code as it will be seen in the chatroom.

Sample 2 <img src=http://www.avatarsbydesign.com/graphics/sampleava.jpg alt='Sample Mouse Over' align=left><br><center><font color=#CABDCE>Sample<br><br> Click here to view the code as it will be seen in the chatroom.

Sample 3 - With An Active Link <a href=http://www.avatarsbydesign.com target=new><img src=http://www.avatarsbydesign.com/graphics/sampleava.jpg alt='Sample Mouse Over' align=right border="0"></a><br><center><font color=#CABDCE>Sample<br><br> Click here to view the code as it will be seen in the chatroom.

Sample 4 - With An Active Link Under The Name <center><img src=http://www.avatarsbydesign.com/graphics/sampleava.jpg alt='Sample Mouse Over'><br><br><font color=#CABDCE>Sample<br><a href=http://www.avatarsbydesign.com target=new><font color=white ALINK=white VLINK=white>Site Name Here</a><br><br><font color=#CABDCE> Click here to view the code as it will be seen in the chatroom.

These codes are not set in stone. You can mix and match using the tips and codes on this page to experiment with your avatars.