In this guide I will attempt to answer these questions:

Please read through from the start as I will explain a few important concepts at the beginning that will be necessary to be able to use the tags later on.

What is HTML?


The letters HTML stand for HyperText Markup Language. While HTML isn't all that much of a language, per se, it still has translators who can read it and create a much more understandable page of information out of it. HTML translators are called web browsers. Common ones are Microsoft's Internet Explorer, Netscape, Mozilla's Firefox, and Opera. On the internet, web pages are sent to your browser by web servers where they decode it and display the page as it was intended. Anyone can write a web page with HTML, but this guide is to show you how to use pieces of HTML to format your posts and add pictures to your avatar (nickname) and signature. One thing to keep in mind is that in a tag based language like HTML, you must always close your tags. Very bad things will happen if you don't, and while you may not understand this yet, just remember it.

CSS stands for cascading style sheets and they are a powerful way to change how an entire webpage appears. I cover very little CSS in this, but in version 2.1 of this guide, I changed the colors, fonts, and sizes to style tags, which are using CSS to change how the text is rendered by the browser.

How do I add pictures to my posts/signature/nickname?


As I just mentioned, HTML is a tag based language, meaning that all information in HTML code that needs to be translated is set off within 'tags' which are made easy for the browser to spot by enclosing them in 'greater than' and 'less than' signs (< and >, respectively). There is a tag for each type of formatting you need in HTML. To add pictures to a document, you need the image tag: <img> This tag tells the browser to add an image at that point in the document. This doesn't tell it what image to put there, however. It needs to know where that image is on the internet to display it in your page. If you have a picture on your hard drive that you want to put as a signature or avatar, or to put in a post, you must put that file on the internet so that anyone that views your post can download the picture to see it. There are several free image hosting websites on the internet, the best being photobucket.com. There you must register an account before you can upload your pictures, but after you do, you can always log in to the page to see all the pictures you have uploaded and can manage your pictures online. If you prefer to avoid the hassle of creating another account name at another website, use tinypic.com. There you can upload a picture on the main page with no strings attached. On either of these websites, after uploading your picture, it will give you the image tag for your picture with the address to your picture already in the tag. All you need to do is copy and paste this tag into your post or change the height and paste in your nickname/signature and you're good to go. If you want to post a picture that you found on the internet, you don't need to go through all this because it's already on the internet. In your browser, right click on the image and click properties. This will give you the location, or address (URL), to the picture on the internet. You need to select this and copy it (Ctrl + C in Windows). You now need to add this to your image tag. What I need to explain is that in HTML tags, there are sometimes two or three different parts: an opening title (this defines what the tag is), the properties (separated by spaces), and the closing tag (which is not always required). For the image tag, img is the opening title. Since the image tag doesn't need a separate ending tag you add a space and foward slash at the end of the tag to close it; you also need to add a few attributes. In a tag the attrubutes go after the opening title but before the second bracket. The two main attributes you need to add at Gendou.com are src and height. SRC is short for SOURCE and is the address of the image on the internet. Height is how big you want the browser to display the image. For sigantures, images should not be higher than 100 (pixels). For avatars in nicknames, the image should not be higher than 25.

Important Note:

The height attrubute only tells the browser to scale the image to a particular size for display only. If you link to an image sized for a desktop background and use the height attribute to make it the correct size, the image that other users have to download is still unnecessisarily large (sometimes over 1 MB!). To comply with the 100kb size limit at the gendou.com forums, resize the image itself to a small size before uploading it to your host. If you already have the image on your photobucket account, click the edit button next to it. It will show you the picture and a number of options. Above the image it will show you the dimentions and the size. If the dimentions are over 200 pixels in either direction you can use the option below to reduce the picture size by 50% to help reduce size.
Remember, the 100kb limit is all of the pictures in your signature and nickname added together. If you're having trouble reducing the size of your signature or nickname, consider putting some of the pictures in the "About Me" section of your profile instead. If you're having technical trouble with any particular image, ask for help in the HTML for Noobs thread in the forum.

Lets assume that I need to upload a picture for my signature. First, since I don't want to bother creating an account, I go to tinypic.com and upload my picture. I copy the tag it gives me and paste it into my edit profile page at gendou.com. Right now I have:

<img src="http://tinypic.com/jrsozc.gif" alt="Image hosted by TinyPic.com" />

You notice the two parts I talked about: the opening title and the properties. Here, tinypic.com has added an alt property. This will not affect your image so you can delete it or just leave it. In this case I have no height property so I will add one:

<img src="http://tinypic.com/jrsozc.gif" alt="Image hosted by TinyPic.com" height="100" />

Also notice how each property is enclosed in quotation marks. Be sure not to forget the mark at the end of each line as well as the beginning. If these are removed, your post can mess up the entire thread when viewed. From this point I can click the preview button in my profile editor to see how my new signature will look. This same process applies to getting an image for an avatar except for two things: remember that the height for an avatar is 25 at max instead of 100, and you should add another property to the tag to make it display right. Add: align="absmiddle" and then your avatar will stay aligned with the text around it better.

To preserve the links on the fourm the way Gendou has intended them, if photobucket or tinypic adds anchor tags around the image tag they provide you with, please remove them from your nickname. I.E.:

<a href="http://photobucket.com" target="_blank"><img src="http://i2.photobucket.com/albums/y2/noahm73/dd6e3253.jpg" border="0" alt="Photobucket - Video and Image Hosting"></a>

The bold part should be removed to leave just the image tag: (be sure to add the space and slash at the end)

<img src="http://i2.photobucket.com/albums/y2/noahm73/dd6e3253.jpg" border="0" alt="Photobucket - Video and Image Hosting" />

Now lets assume I want to make the Google logo picture appear in the middle of my post. I will go to google.com and view the properties of their main image. I copy the address to their image and go back to my new post at gendou.com. In my post I type:

<img src="" />

I then move my cursor between the two quotation marks and paste (Ctrl + V in Windows) the address to the Google logo. I now have all I need for that image tag:

<img src="http://www.google.com/intl/en/images/logo.gif" />

How do I get different fonts, sizes, colors, and add formatting like links to other webpages?

Getting other effects with HTML is just a matter of knowing which tag to use. These tags are the ones you must remember to close. To close a tag is to put another tag of the same type after it, only with a forward slash before the title of the tag. It is not necessary, to repeat all the properties in the closing tag, however. To use bold, underline, and italics, it is only a matter of one letter without the need for any properties:

<b>Some text</b> should be bold.

will give:

Some text should be bold.

Note the closing tag after I was done with what I wanted to be bold.

<i>Some text</i> should also be italicized.

will give:

Some text should also be italicized.

HTML tags can be used within other tags as well:

<u>HTML</u> <b>can be <u>fun</u></b>.

will give:

HTML can be fun.

Warning of DOOM #1: 

Be sure you close the tags in the opposite order you opened them. In the previous example, having the tags like this: <b>can be <u>fun</b></u> could have caused all sorts of problems and is very bad. DON'T DO THIS!!!


You can add colors and different fonts to your posts by using the span tag with the style element. This tag requires both properties and a closing tag:

<span style="font-size:large;">Big</span> and <span style="font-size:small;">little</span> is possible with HTML.

will give:

Big and little is possible with HTML.

<span style="font-size:small; color:red;">Little</span> <span style="color:red;">Red Riding Hood</span> went to <span style="color:#4488FF;">Grandmother's house</span>.

will give:

Little Red Riding Hood went to Grandmother's house.

When using sizes, you can use seven preset names for size:

  • xx-small
  • x-small 
  • small
  • medium
  • large
  • x-large
  • xx-large 

When using colors you can type out the name of many basic colors to get the desired color. If you know how to define colors using hexadecimal codes, you may prefix the color's hex code with a # symbol as in my example to use any color in the RGB pallet.

To use a different font, you use the name of the font you want to use. Also remember that many people only have a few fonts that came with their computer by default. If you use any fonts other than the gendou.com default, please restrict them to common ones.

<span style="font-family:impact;">This looks completely different</span> thanks to HTML.

will give:

This looks completely different thanks to HTML.

Of course you can combine the font-family, color, and font-size properties in one span tag to make different sized fonts as well.

Creating links is almost like combining an image tag with the font tag. The anchor tag (a) is used to create links. It requires both an address for the page you are linking to and a closing tag. The only required property is the href property. This is the same as the src property for the image tag.

<a href="http://www.google.com/">This</a> will link to Google.

will give:

This will link to Google.

Any text you put between the opening tag and the closing tag will be linkified, so if you so desired, and entire paragraph could link to a site. You can also put an anchor tag around an image tag making it so you can click on the image like you could the text in my example. The only note here is that an image in an anchor tag is usually put inside a border by the browser. If you do not want this simply add this property to your image tag: border="0"

Warning of DOOM #2:

Always, always, ALWAYS remember to put the </a> after making a link. Forgetting to do so will make many bad things happen. Many, many bad things. Don't do it either.

Ok, that's covered the basics; hows for some cool advanced techniques?!?

If you want to show someone else HTML code without the browser actually interpreting your tags and doing what they say, you can use the <xmp> tag. It will take whatever is between the opening and closing tags, ignoring any other HTML tags and display it in its own separate paragraph in a monospaced font.

<xmp><a href="http://www.google.com/">This</a> will link to Google.</xmp>

will give:

<a href="http://www.google.com/">This</a> will link to Google.

When you are posting in the forum and you hit the enter key, it breaks the line and creates a new line of text, which is exactly how it appears after you post it, but in HTML all empty space is ignored except for single spaces. Gendou has programmed the reply box to automaically add those line breaks in for you, but by default, the browser will ignore those. This holds true for your signature at gendou.com in that Gendou has left this box as raw HTML. Pressing enter to make a new line in the editor box doesn't change a thing when you actually view your signature. To create a new line with HTML, you have to tell the browser to do so. The line break tag is <br />; as with the img tag, there is no separate closing tag, so the space and slash are added at the end.

This is on<br />two different lines.

Will give:

This is on
two different lines.

Not only do HTML browsers ignore line breaks, they also ignore all spaces, beyond one space between words. Gendou has not changed any of the boxes at gendou.com to preserve your spaces exactly as you type them, so you'll have to revert to using HTML to get your way! There are several different ways to get spaces, but the would be a non-breaking space code.

There are many different little codes you can use in HTML to insert special characters. All start with one of these: & and end with a semicolon: ;
Certain letter codes will determine which character is inserted. For example &copy; will give you the copyright symbol: ©
A non-breaking space (basically just a space that isn't ignored) can be entered with &nbsp;

If you just enter that, it doesn't look like much, because the browser just renders that as a regular space that you would get from the spacebar. Put some words on either side of it and then paste a few of those bad boys in between, click that preview button and you'll see the difference.

What do you know, HTML is pretty cool! Where can I learn more?

You can find all the tags you could ever need to use here.

You can also see the HTML used to make any webpage by clicking View > Source... in Internet Explorer or Ctrl + U in Firefox. You can learn nifty tricks and new properties to use this way. Or maybe you might just end up being more confused. Either way, I hope this helped you make better posts and nicer signatures! See you on the forum!

Get Firefox!