HTML For Noobs (v3) by psoplayer

In this guide I will attempt to answer these questions: (click to jump to that section)

• What is HTML?
• How do I add pictures to my posts/signatures/nickname?
• How do I get different fonts, sizes, colors, and add formating like links to other webpages?
• Ok, that's covered the basics; hows for some cool advanced techniques?!?
• What do you know, HTML is pretty cool! Where can I learn more?

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 tutorial 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, Apple's Safari, Mozilla's Firefox, and Opera. On the internet, web pages are sent to your browser by web servers where they interpret 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 the browser displays individual pieces of HTML or entire pages. I cover very little CSS in this, but if you understand all this and want to learn more, there are several places you can go. The way I use style tags later in this guide is a way you can use little bits of CSS to affect just that tag. For a more in depth explanation of CSS, kiseno has written several excellent guides on CSS.

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, my personal choice being imageshack.us. There you can upload a picture on the main page with no strings attached. After uploading your picture, it will give you a multitude of bits of text for the image:

What you see circled there in the red is the address to your image 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. You need to understand is that in HTML tags, there are three distinct parts: an opening title (this defines what the tag is), the attributes (sometimes none, can be more than one, separated by spaces), and a close of some kind (sometimes just a slash in the tag, sometimes another tag of the same title with a slash). Here's two examples:

There are two tags here but working together they really just form one pair. The first, strong, makes text bold. It extends around text so it needs separate opening and closing tags, so you see the <strong> tag and separate </strong> closing tag. In HTML a forward slash denotes a close. Any text between the opening and closing tags will be rendered as bold text in a browser. This example has no attributes.

This is a tag to insert an image. Here, img is the opening title. Since the image tag just represents a single item on a page, it doesn't use a separate ending tag. Instead you add an extra space and foward slash at the end of the tag to close it. This is known as a 'self-closing tag'. You will also note that this tag has two attributes. The three main attributes you need to add to an image tag at Gendou.com are src, height, and alt. SRC is short for SOURCE and is the address of the image on the internet. Height is how large you want the browser to display the image, measured in pixels. Without the height tag, the broser will display the image at its original size. At any other size it will stretch it to fit. The standing rules at gendou.com are in sigantures, images should not be higher than 100 (pixels). For avatars in nicknames, the image should not be higher than 25, and please keep width to a reasonable ammount. Alt is a required tag which doesn't have an apparant effect on the image most of the time, but it is important. It defines some alternate text for the browser to display in the case that the image doesn't load properly. Try to find something slighty descriptive to put here to help people understand what should supposed to be there when the image doesn't load.

So, if you're picking up on this quickly, you now understand what you need. Once you've uploaded your image to a site and have the address to it (URL), just create an image tag for yourself:

Also notice how each property is enclosed in quotation marks. Be sure not to forget the quotation mark at the end of each line as well as the beginning. If either of these are removed, your signature can mess up entire threads and will be zapped without hesitation.

All of this is pretty much the same for an avatar except for a few things: remember that the height for an avatar is no larger than 25 at instead of 100, and you should add an attribute to the img tag to make it display right. Add: border="0" and then your avatar will stay aligned with the text around it better. Also, you should probably use your nickname of choice for the alt text, so we at least know who you are! You can also add another attribute: title to get a pop-up tooltip when someone hovers over your avatar. Use it just like an alt, or however you like. So:

Here's the code that I use for my nickname image:

And here's how it turns out:

If you want to insert an image somewhere in a post that you don't have the URL address for, but is still hosted on the internet, you can get it from the properties in the browser. Navigate to the image, right click and view the properties of the image. Copy the address to the image and go back to where you will post it. In your post you can create a basic image tag:

Just paste in the address (Ctrl + V in Windows) and give it a good alt text. The image will be displayed in your post exactly as it is. Please don't insert massive images in your posts though. If an image is really that big, use the height attribute to scale it down.

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 and italics, it is only a matter of one short word without the need for any properties:

will give:

Some text should be bold.

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

will give:

Some text should also be italicized.

HTML tags can be used within other tags as well:

will give:

HTML can be fun.

Creating links is almost like combining an image tag with a strong or em tag. The anchor tag (shortened to simply: a) is used to create links. It requires both an address for the page you are linking to and a closing tag surrounding the text to be click-able. The only required property is the href property. This is the same as the src property for the image tag.

will give:

This will link to Google.

Anything you put between the opening tag and the closing tag (text, images, whatever) will be click-able, so if you so desired, and entire paragraph could link to a site. When you put an anchor tag around an image tag you can click on the image like you could the text in my example. The only note here is that an image inside an anchor tag is drawn with a border around it by the browser. If you do not want this simply add this attribute to your image tag: border="0"

You can add colors and different fonts by using bits of CSS styling (which you could also use for bold and italics, but it's much easier with strong and em). CSS (Cascading Style Sheets) is a whole different ball game which I could possibly write an entire different guide on, but it's not half as useful as HTML at gendou really. Here we are just going to use snipits of CSS inside a universal attribute which contains CSS and can be added to just about any tag. The style attribute will apply the contained CSS rules to the part of the page affected by the tag the attribute is in. In order to just use the style attribute and for that sole reason, we have a special tag span which doesn't do anything at all, except provide for uses such as styling the containg elements and text.

CSS has a syntax all its own, but largly, it's just a collection of specalized attributes, only insted of equals and quotes it will take the attribute name, a colon (:), the value you are setting to the attribute, and a semicolon(;) to end the attribute. You can use as many attributes as you want in one style tag.

First up are font-size and color. To define a color, you can use simple English color names, or define it by RGB value, prefixing it with a pound character (#). If you don't know how to use RGB color, don't worry about it, just use color names.

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

You can also define the size as a percentage of what normal sized would be (e.g., 200% for double size, 50% for half size, etc.)

will give:

Big and little is possible with HTML.

Also:

will give:

Little Red Riding Hood went to Grandmother's house.

You can change fonts with the font-family CSS attribute. 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. If the font name has spaces in it, you will need to put single quotes around it ('like this').

will give:

This looks completely different thanks to HTML.

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, you don't have to worry about getting things onto different lines, but when you are designing your "About Me" section, you ever notice how everything has an annoying habit of all going on the same line? Well, that's because HTML typically ignores any extra spaces, including line-returns. Gendou has programmed the forum to take care of this for you while posting, but in the "About Me" you're on your own. To break a line you'll need the line break tag: <br /> (note the self-closing, as it represents a stand-alone element on a page, like an img tag).

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 by itself, 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!

HTML For Noobs 2006-2008 by Noah Manneschmidt is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.