Chat Whisper Alcoves

How To Use an Avatar
(or -- a basic lesson in HTML)

Basic Use

<img src="http://www.domain.com/directory/filename.jpg">Your Name

Centered

<center><img src="http://www.domain.com/directory/filename.jpg"> Your Name

Adding Color

<center><img src="http://www.domain.com/directory/filename.jpg"> Your Name

With Hexadecimal Color where you place the color the code would be the six 0's would be replaced with whatever color you had chosen.

Download a free color picker here.

Online Color Picker here.

Alt Tags

If you want to get a bit fancier, you can add an alt tag to your image. This is the text that others see when they run their cursor over your image. It can say anything you want, though you should keep it short as long text sometimes gets lost on small screens. the code for this would immediately follow your image location, put a single space after the " and then type alt="Your quote". It would look like this:

<center><img src="http://www.domain.com/directory/filename.jpg" alt="your quote"> Your Name 

In some newer browsers this will not work so you will have to replace the alt with title like this:

<center><img src="http://www.domain.com/directory/filename.jpg" title="your quote"> Your Name 

Sizing

If you know the size of your avatar, this is a very good thing. the code would go in the img section after your image code. To find the img size, right click on the image and look under properties it will say "Dimensions". Once coded it will look something like this:

<center><img src="http://www.domain.com/directory/filename.jpg" Height="200" WIDTH="200" alt="your quote"> Your Name 

Linking to an avatar

If you want to link your website to your avatar, it would look like this:

<center><a href="AvitarMaker.tripod.com/" target="new"><img src="http://www.domain.com/directory/filename.jpg" alt="your quote"></a> Your Name

Obviously if you want the link to show up on your name, you would place the code before and after your name. Always place the target as "new" so that the link opens in a new page. There is nothing more annoying or rude than clicking on someone's link and losing the chatroom.

Text Size and Font

To add size to your text or change the font the codes are and

Remember, not everyone has the same fonts, and if someone doesn't have your font, they won't see it. Alot of the really cool fonts are smaller and require a larger font size to see them properly. If someone doesn't have your font, they will see your font on the default font face, and it will be as large as you set it.

For example if you are using a font and set the size at 6 and it shows up semi small on your screen at 6, it will look like this to other chatters:

My font size is size 6!

In the same respect if you use something that you have to shrink to see on your screen, other chatters could end up seeing something like this:

My font size is size 1!

Using new and cool fonts is fun, *BUT* it's quite rude to use hard to read fonts or very large text. When I see someone with a swirly hard to read font, I usually don't even listen to what they are saying because it strains my eyes to read what they are writing. Also, when I see someone using very a LARGE font size, I cringe and sometimes ignore them as well simply because it is very hard to read.

Moral: Try to keep your font size about 3. Set your name at 4 or 5, those are large enough. They look like this in arial font face:

That said, I used Book Antiqua to create this page at normal font size, which is 3. If you don't have Book Antiqua font, you are viewing it in whatever the default is for your browser and it will look quite normal.

Simple HTML Lesson

<center> = centers your text
 enters a line break
 changes the color


 stops the color
<a href>beginning tag to add a link
</a> end tag to stop a link
<img alt="quote"> adds a quote to your avatar
 makes bold text
turns off bold
 italicizes your text
turns off italics
 starts a new paragraph