HTML For Dummies Title Tag

HTML For Dummies

Introduction: How HTML Formats Stuff
Document Tags: HTML, Head, Title, Body
Paragraph Tags: Line Breaks and Centering
Text Formatting: Bold, Underline, Italics, Size/Color
File References: Links, Anchors, and Images
Tables
Lists
About SSI

Tips and Troubleshooting:

Spacing Your Text
Relative URLs
Closing Your Tags and Other Shortcuts
List of Colors
List of Special Characters
More Help?

Introduction

So you want to make a shrine but don't know how to go about it without making everyone mad because you don't understand all this technical mumbo jumbo? SSI? CSS? What the hell?

Relax. ^^; The templates provided by us are all you need. But to use those, you can't use a HTML editor like FrontPage or DreamWeaver; you'll have to stick to good ol' Notepad or another regular text editor. Problem, of course, is that to use THAT you'll need to know HTML. Anxiety attack!

For starters, let me point out that HTML is NOT a programming language. Actually, it's just a way of formatting text to make it look all nice and neat for the various browsers. Basically, you enclose your text in tags to format it. Tags are of the following format.

The left tag is called an opening tag, and the right one (with the slash) is called a closing tag. You must close ALL your tags (more or less), or many browsers will get screwed up. There are a very few tags you don't have to close, and I'll note those. Check the bottom of the document for some shortcut tips on closing your tags if you're too lazy. 8-) Some tags also have options, which look like this:

These options are sometimes mandatory and sometimes, well, optional. Their order never matters, by the way. For example,

is identical to

Sometimes there is no "=" followed by a value; these options are self-explanatory. If they're there, they're ON, otherwise they're OFF. For example, <TABLE BORDER> gives you a table with a border, whereas plain old <TABLE> would give one without a border. In the rest of this document, optional options will be in italics.

A note about spacing. In HTML, spaces don't matter. The following block of text:

The     quick   brown fox
jumped   over
the lazy dog

will come out as follows:

The quick brown fox jumped over the lazy dog

See? Spaces don't matter, and neither does the Return key. Look at Paragraph Tags for how to make those spaces and line breaks manually. This also means that you can space out your tags however much you want: Put them all on one line, or do just one tag per line. Or a mixture! You can get your own feel for it.

Be careful with your errors! Common errors are forgetting to close your tags (putting the > at the end). Doing this will cause the browser to think that all the text until the next > is one big tag, and generally speaking it'll just ignore it and won't display it! This is even harder to catch if you've got a bunch of images or links close together. Another problem is misspelling the tag name or the option name, or putting (e.g.) a "-" instead of an "=" (I do that one a lot ^^;) Doing that will make it completely ignore the tag name or option name.

Our last note is that tags and everything in them (besides for URLs and anchor names) don't care about capitalization either. I like capitalizing my tags because it makes them stand out, but you do what you feel.

And a post-final note: I'll refer to absolute and relative values several times. To make myself perfectly clear: absolute values are a set number or value that never changes (e.g. "100", "http://www.rpgclassics.com/"). 100 is always 100. Relative values are values *compared* to something else, usually the screen resolution or your current URL. For example, "50%" of screen width is half of the screen width; if the screen width changes, the value of "50% of screen width" will change too. Half of 100 is 50, but half of 60 is 30. Just making sure. 8-)

Now on to the actual workings of the tags themselves. Listed here is just the bare bones which you'll need to make shrines; there's a bunch more tags, but you don't have to bother with them. Sometimes when I speak of tags I'll use just the initial tag name (e.g. <IMG>), without any options. Newly introduced tags will be in BOLD.

Document Tags

There are three main document tags. If you're using the templates, you won't have to worry about these at all (you're just writing in the body) but you should know about them and what they do. You can skip this section and still be able to make your shrine if you work strictly from the templates (just be sure to see what the <TITLE> tag does).

The <HTML> tag starts and ends the <HTML> page. Nothing should be before its beginning tag and nothing should be after its ending tag.

The <HEAD> tag has a bunch of hidden stuff in there, like <META>; (which deals with search engines), JavaScript code if you want, and, more importantly, the <TITLE> tag.

The text enclosed in the <TITLE> tag will appear at the top of the browser bar. For example, the title tag of the file you're viewing right now is "HTML For Dummies Title Tag". You should change this tag for every page you work on so it reflects the content of the page.

Finally, we have the <BODY> tag. Everything inside the <BODY> tag will actually show up on the browser. Unlike the other tags, the <BODY> tag has options. However, for shrines, you will not have to worry about this tag at all. Your <BODY> tags will be set by RPGC automatically using SSI.

Paragraph Tags

Now we deal with bare bones of writing text: doing paragraphs. Paragraphs won't indent in HTML; all we deal with is skipping lines. For starters: The <BR> tag (which does not need to be closed, by the way) does an automatic line break; it goes to the next line. For example:

I'm about to do a line break<BR>I did it!

...does the following:

I'm about to do a line break
I did it!

Now we get to the <P> tag. The <P> tag (which also doesn't have to be closed, although a redundant </P> tag does exist - don't bother using it) actually skips a line when it's written. All these lines I'm skipping in this document is a new <P> tag. However, it's got an extra option as follows.

The "alignment" word should be replaced with "left", "center", or "right" depending on how you want your paragraph aligned. I used a <P ALIGN="center"> to center that code above. Er, and don't bother about aligning your paragraph to the left! It does that anyway! ^^; By the way, even if you insert a <BR> line break, the alignment of a paragraph will continue, until it hits a closing <P> tag or another opening <P> tag. For example, this code:

<P align=right>This is right-aligned
<BR>and so is this!

...gets this:

This is right-aligned
and so is this!

Another way to center stuff is to use the <CENTER> tag. Everything between the opening and closing <CENTER> tags will be centered, including paragraphs, images, tables, you name it. Very old browsers can't handle it, though. I use it and no one's yelled at me, though. ^^;

Finally we come to the neat-o <HR> tag (again, doesn't have to be closed). <HR> puts a Horizontal Rule (or break) into your document as follows (dum-duh-duh-dahh!)

Isn't that sweet? You can customize it (colors, size, etc.) but there's no real point. ^^; On to the next section.

Formatting Text

Most of these tags are simple as pie. Let's get through the easy ones first.

The <B> tag: Everything between the opening and closing tags will be in bold.

The <I> tag: Everything between the opening and closing tags will be in italics.

The <U> tag: Everything between the opening and closing tags will be underlined. Note that links are also underlined usually, so be careful you don't confuse your reader! These three tags can be nested, so you can get some words that are in bold italic underline. 8-)

Next we get the useful <FONT> tag. The format is as follows:

OK. The size of a font ranges from 1 to 7; default is usually 3. It's a bad, a very bad idea, to set absolute font sizes (to set the font to 5, for example). What you should do is set relative font sizes. That way it shows up differently on different browsers, which is GOOD. So, if you want to make the size two sizes bigger, you'd do <FONT SIZE="+2"> and to make it one size smaller you'd make it <FONT SIZE="-1"> . As for the "color", see below for a list of them. The font FACE is the name of any font most people have on their computer, such as "Times New Roman", "Arial", or "Verdana". Note that you should use text color sparingly in your shrines, since shrine layout can change without you being aware of it, and the colors you chose may no longer show up!

Some people (like me) like using the <H#> tags. Every browser has six preset header tags, ranging from <H1> (largest) to <H6> (smallest). It sets the font to a preset size and sometimes bolds/underlines it as well. For example, the headings on this document use the <H3> tag, which bolds it and sets the font to 5 on my copy of Internet Explorer. It varies from computer to computer, so it's also GOOD, because it lets your user decide what they should see. The only thing is that you can't use it in tables or lists. Ah well. 8-) Next topic.

File References

Finally we get to links! To link a file, here's what you do.

<A HREF="URL">Text Attached To The Link</A>

The HREF stands for Hypertext REFerence. I think. Anyway, that'll look like this:

Text Attached To The Link

Clicking that will get you to "URL". Well, there isn't any actual location called "URL", so clicking that won't get you anywhere. 8-) For more info on URLs (it's a bit too complicated to get into here), see the appendix. NOTE: Anything in between the opening and closing tags will be linked, including pictures! Linked pictures, by default, have a colored border around them.

One last thing about regular links: you can link to an e-mail address (clicking it will open the default e-mail client) by using "mailto:" instead of "http://" in the URL. The URL to send e-mail to me is "mailto:cidolfas@rpgclassics.com". Don't forget the mailto:! Otherwise the browser will think you're talking about a website and you'll get to a nonexistent page instead of sending an e-mail. ^^;

Now we'll talk about anchors. Anchors are a way to jump from one spot in a document to another spot in that document - or to a spot halfway down a different document. There are two parts to an anchor. First is the <A NAME> tag. Simply, it's this:

Basically, you find where you want to set the anchor on your page. You enclose one or two words in an <A NAME> tag, and name that spot whatever you want. That's your anchor; you can get to any spot on the page, not only the top of the page. Now, to access that spot from anywhere, you do the following:

<A HREF="#anchor name">Text Attached To The Link</A>

For example, way up at the top of this document is a bunch of anchors attached to a bunch of <A NAME> tags. That's why you can jump down to any header you want. As an added bonus, you can also jump to an anchor on a different HTML page as follows. Say the other HTML page is in your current folder and is called page1.html, and there's an <A NAME> tag on that page that's called "anchor1". All you do is:

<A HREF=page1.html#anchor1>Text Attached To The Link</A>

And voila. 8-) You'll go to page1.html, and jump to the "anchor1" spot on that page. Next I want to talk about images. The <IMG> tag does not have to be closed, by the way.

Whew! The SRC stands for "source", by the way. Now, let's see. If you align your image to the left, all the text will be to the right of it and will kind of "spill out" below it. Ditto if you align it to the right. Aligning it to the center gets messy; I usually don't do it at all. ^^; You can center it by giving it its own paragraph using <P ALIGN="CENTER">. Let's get us an example, shall we?

Uweeheehee! Now for the rest. ALT is what people will see when they put their mouse over the picture. Put your mouse over Ultros and you'll see "Ultros Loves You!" They'll also see that text if the picture fails to load for whatever reason.

You can set the width and height of the image to a set amount of pixels (say, if you want to squish it a bit). The BORDER="0" should be used if the picture is linked to somewhere else using the <A HREF> tag. If it is, a border will automatically be put around the picture. If you don't want that border there, use the BORDER="0" option. For example, that Ultros pic is linked to the mailbag. But it doesn't have a border, because I used the BORDER="0" option. If I left that option out, here's what it'd look like:

(As an aside, if you should wish, you can also embed music into a document page by using the <EMBED SRC="URL"> tag, where "URL" is the URL of the music file. There are some extra options there too, but I won't go into them right now.)

That's it for that part. On to my favorite... -_-

Tables

Tables! Tables tables tables! I love tables. 8p Yep, tables are fun. I know, they look messy and nasty, but they're the best way to get things looking good. What are they? Er, they're tables. You put stuff in them, lined up all nice and neat. You can have a border, background, alignment, and even nest tables within themselves. Let's see the tags. First is the actual <TABLE> tag, which declares the start of a table. Then comes the <TR> tag, which declares a table row, and then a <TD> tag (table cell) or <TH> tag (same as <TD>, but in a header type of font, usually bold and centered). Note that text cannot appear within the <TABLE> or even the <TR> tags, but have to be inside all three tags: <TABLE>, <TR>, and <TD> or <TH>. So we'll have something looking like this:

<TABLE>
<TR>
<TD>something</TD><TD>something</TD> etc...
</TR>
<TR>
<TD>something</TD><TD>something</TD> etc...
</TR>
etc... (more table rows)
</TABLE>

As you can see, you have the <TABLE> tag enclosing the entire table; the <TR> tag enclosing an entire row of cells, and the <TD> or <TH> tags enclosing a specific cell. Let's see each tag by itself now.

Right. The "alignment" shifts the entire table to the left, right, or center (similar to the <P> tag). The table width can be either an absolute number of pixels, or a percentage. Let me make this clear. DO NOT USE ABSOLUTE TABLE WIDTHS. People have different resolutions, and what looks fine on yours looks "fubar" on someone else's. What you *can* do is use percents; make the WIDTH="10%" or 50%, or whatever % you want, of the document instead. That works a bit nicer. 8-) You generally shouldn't have to do even that, though. O_o See the appendix for a list of background colors; you can also link to a background picture instead if you wish (located at "URL"). Note that specific <TR>s or <TD>s can have their own background pictures or background colors, which will override the table colors/backgrounds. Oh, and if you include the BORDER option, it'll give the table a border. Duh. 8-) If there's no border, it'll just arrange the cells nicely but you won't see any separations. That said, let's see the TR.

Basically the same as the <TABLE> tag, but the alignments and colors only affect that row of cells. Note the addition of the VALIGN (Vertical Align) option, though. You can set it to TOP, MIDDLE, or BOTTOM. Self-explanatory otherwise. Now we get to the actual cell, which is a bit more interesting.

OK. Again, all the alignments, colors, and backgrounds will override those of either the <TR> or the <TABLE> tags. And if the <TD> width is larger than the <TABLE> or <TR> width, it'll stretch the table to the <TD> width. Also: say you set the first column of the first row to have a width of 10%, and the first column of the second row to have a width of 5%. Everything will still have a width of 10%, because all <TD>s in the same column are set to the largest width any <TD> has in that column. In other words, columns don't have variable widths, and rows don't have variable heights (it'd look really messy otherwise); they're all nice straight lines, and they'll use the largest value they're given.

Confused just yet? Let's take a look at some simple examples.

<TABLE BORDER><TR><TD>A Table!</TD></TR></TABLE>

A Table!

See how the text is inside the <TABLE>, <TR>, and <TD> tags? That's the only way it can be. This is the simplest possible table (er, unless you make one without a border). Now let's see multiple columns.

<TABLE BORDER><TR><TD>First Cell</TD><TD>Second Cell</TD></TR></TABLE>

First Cell Second Cell

Now we've got a table, a single row, and two cells next to each other. You can have as many cells as you like. Finally, let's take a look at multiple rows.

Cell One/One Cell One/Two

Cell Two/One

Now we have two rows. The top row has two columns, the bottom row has only one. Note that we don't need to have an extra <TD> tag in the bottom row; it's basically filled in for us anyway, since the top row already has two columns. ^^;

Now we get to the spans. COLSPAN lets you set a table cell to stretch across two or more columns. When you do that, the browser will "automatically fill in" those columns with the current <TD> and you won't have to fill them in with more <TD> tags. Let's see an example.

1 2

3

The code for that was as follows:

Now, for the second <TR>, I only did one <TD> tag, because the second cell was "overwritten" by the first <TD>, which I set COLSPAN="2". That cell basically takes the place of two cells. If I had put in two <TD>s in that row, it'd add an extra cell! Now let's experiment with ROWSPAN. This one lets a cell "overwrite" the cell(s) *below* it instead of to the right of it. Again:

1 2

3

Code for that is:

Using combinations of ROWSPAN and COLSPAN, you can get some pretty complicated tables! Don't get confused! Look at the Tales of Phantasia Armor page for a good example of using both COLSPAN and ROWSPAN in tandem. Look at the page source using Notepad to see exactly what code I used.

Finally, we can nest tables inside each other. You can make a table of tables! Look at this baby.

1 2

3 4

1

2 3

1 2

3

1 2

3 4

This is a non-border table which has four border tables inside it. Here's the huge code for it, beware, it's not pretty, but once you break it up it makes perfect sense. ^^; Just break HTML up into its little bits and everything becomes simple.

As a final example, the Special Character List below shows a useful border table outlining two non-border tables. OK, we're done!

Lists

OK... well, you don't really need to know lists either. I use them a bit, but some don't. They can be useful, so read on if you want. 8-)

There are two types of lists. Unordered lists (<UL> tag) use dots, squares, or circles in a kind of bullet list. Ordered lists (<OL> tag) use numbers of various methods to enumerate things in a numbered bullet list. <OL>s are particularly useful when you're numbering (say) a list of items and forget one. You can just go back, insert a list item (<LI> tag, which is the same for both lists) and the browser will automatically number them for you. The actual list tags are pretty simple. Here's the <UL> tag:

The UL types can be "disc", "circle", or "square". Each individual list item can have its own type as well if you want. See, simple. 8-) And here's the OL tag.

Same as before, but the type is different. Here the type can be "A", "a", "I", "i", or "1". In order, they count: alphabetically (capitals, then lowercase), Roman numerals (capitals, then lowercase), or Arabic numbers (regular numbers).

Nesting Lists: Every <UL> or <OL> tag causes the browser to indent the text as well as (usually) to skip a line. If you nest <UL> or <OL> tags (put one list inside the other) it'll indent some more. So it's dangerous to use more than two or three of these, but it can be very useful. See, for example, the Pickpocketing Guide for Star Ocean 2. Also note that each nested <UL> will automatically pick a different type than the one its parent list has. Here's an example for <UL>:

Meat
Potatoes
Fruit
- Apples
- Oranges
- Pears

And here's one for <OL>. Note that depending on the browser, <OL>s may or may not change their types automatically. It's good to set the types yourself for <OL>s.

Disc I
Disc II
Disc III
1. Final Boss
2. Side Quests

That's it for lists. Always remember to close all your <UL> and <OL> tags, or you'll have all your text slowly sliding to the right. 8-)

About SSI

Well, you don't really have to know this either if you're working from the templates, but what the hey. SSI stands for Server Side Includes. Basically, it's a way to actually stick other documents into your own document without lifting a finger! 8-) The only SSI tag we're actually using is the following.

This replaces that line of code with everything in the document "filename". That's all. The only thing you have to actually do is save all your files with the ending ".shtml" instead of ".html" or ".htm". Otherwise it won't work.

We use this to great advantage by putting things we might change (like styles, copyright notices, background colors, etc.) into a separate document and including that document in all our HTML pages. Then if we decide to change the font we use, all we have to do is change one document instead of several hundred!

One last thing to note is that SSI does not recognize absolute URLs; you MUST use relative URLs for the filename.

That's all there is to it! You shouldn't be using your own SSI code for your shrines, but only the ones we have up there already. You have to make your own table of contents to include, though. Just work from the templates. Ooh, wait, though. The only thing you have to note is that if you put an HTML page in a subdirectory, because you have to use the parent ".." method, you'll have to change the includes for the subdirectory to jump back one extra folder. Again, see Relative URLs for more info. Note that you'll only have to do this for your table of contents, since the other ones use the root "/" to access the includes.

Tips and Troubleshooting

Here we deal with slightly more intricate topics. If you're down here you should already basically know how to write in HTML, but you might want to know more specific details, as follows.

Spacing Your Text

As I've said, all your spaces and Return keys are belong to us: they don't make a dent in the browser's formatting of your text. So how to deal with making your text show up just the way you want? Here's a few tricks.

1. Block Quotes. The <BLOCKQUOTE> tag indents everything between the opening and closing tags inwards. For example,

Why, look you now, how unworthy a thing you make of me! You would play upon me; you would seem to know my stops; you would pluck out the heart of my mystery; you would sound me from my lowest note to the top of my compass; and there is much music, excellent voice, in this little organ, yet cannot you make it speak. 'Sblood, do you think I am easier to be played on than a pipe? Call me what instrument you will, though you can fret me, you cannot play upon me.
Hamlet, Act III, Sc.II

Note that I also added a <P ALIGN="RIGHT"> inside the <BLOCKQUOTE>, and that was also indented.

2. Tables! Use tables without borders and with 100% width to evenly space your text across the width of the screen. For example,

Column 1 Column 2 Column 3

As a variant, you can make each <TD> align differently, to spread the cells all the way to the left, center, and right.

Column 1 Column 2 Column 3

3. The <PRE> tag. Text inside the <PRE> tags is considered to be preformatted. The "fox/lazy dog" text I wrote in the introduction used the <PRE> tag. Be careful, though, because different browsers interpret it different ways. Don't use this instead of tables, for example. But it can be very useful for adding extra spaces or skipping lines (e.g.) for charts/maps using letters and ASCII characters.. Another warning: Text wrapping will be turned off in the <PRE> tag, so it can majorly screw up pages' looks if you overuse it. If you don't want to use that in a particular case (and you shouldn't use it more than you have to), look at the next suggestion...

4. Use nbsp. There are several special characters which wouldn't show up if you typed them normally. One of them is the space key, of course. To manually make a space, type the following in:   Just copy and paste that for as many spaces as you want. (It stands for "non-breaking space".) However, this makes code very hard to read, so avoid it if you can. There is one thing it's very good for though, and that's skipping multiple lines.

By default, you can only skip one line no matter how many <BR> and <P> tags you put in. The solution? Use multiple <P> tags, but put a single   after every <P> tag. You can then get this:

Line 1

Line 2 (after four Ps and three  s)

That should help you out a bit!

Relative URLs

OK. Here's a run-of-the-mill URL.

http://www.rpgclassics.com/cc/images/serge.jpg

Let's break it up a bit. The http://www.rpgclassics.com/ is the server you're on. cc/images/ are a folder and a subfolder within that server. serge.jpg is the name of the file we're dealing with.

When you're dealing with link or image sources, there are several ways for you to write the "URL" I keep referring to. One is by writing the entire URL, but that's just pointless if everything is on the same server. Let's look at the different ways you can access this file.

If the HTML page you're writing is in the same folder as serge.jpg (for example, it's at "http://www.rpgclassics.com/cc/images/chara.html"), all you have to do is use "serge.jpg". Simple yet effective. 8-)

If the HTML page is at "http://www.rpgclassics.com/cc/chara.html" (remember, "images" is a subfolder of "cc") all you have to do is use "images/serge.jpg".

Now things get a bit more complicated. Let's say you're writing in an HTML page which is in a totally different folder, say http://www.rpgclassics.com/shrine1/html/ . You have two options to avoid using the full URL. First is using the parent directory. Every folder has this special directory, which looks like this: ".." That means that the browser will jump *back* one directory to look for the file. You can do this multiple times, too. So you can use this: "../../cc/images/serge.jpg" to access that file. The browser will jump back two folders to the root (main) folder, then go forward to "cc", "images", and finally "serge.jpg".

There's one more way to do it, and that's using the special root directory. It looks like this: "/" and automatically pushes you back to the root, i.e. to http://www.rpgclassics.com/ . So to access this file, you'd use this: "/cc/images/serge.jpg".

Each way has different pros and cons. Using the full URL is a bit tedious, but will work no matter where the HTML file is. However, if we ever move servers (say to www.newserver.com) nothing will work. Using the ".." is also good, but if you copy and paste that code into an HTML page in (say) a subfolder, it won't work any more. So I like the root "/" method the best. In fact, when you're doing your ToC (table of contents) file, you may have to use this. If you plan on putting HTML files in subfolders (say in the "ogrebattle/walkthrough" folder as well as the main "ogrebattle" folder), your ToC won't work if you just use the folder name or the parent directory, because it's coming from different folders. You'll have to use either the entire URL, or the root "/" method, to be right all the time.

Closing Tags And Other Shortcuts

Tags are annoying creatures, aren't they? We have to open them AND close them as well? What a pain! And then I hit upon a very nice little shortcut. Note that nearly every tag, when it closes, is followed by another identical tag. For example, </TR> tags are nearly always followed by another <TR> tag. So using a handy find/replace command (WordPad has one, for instance), all you have to do is

Find "<TR"
Replace with "</TR><TR". Note the absence of a >. This is because you can get both <TR> and <TR ALIGN="CENTER"> with this method.

But that just takes care of the TR tags, no? What do we do with the TD tags? Slightly more complicated, but here's the basic idea:

First, find "<TR" and replace with "</TD></TR><TR". Note that there's no closing > for the TR tag, because this way it'll find both <TR> and <TR ALIGN=CENTER> etc.

Next, find "<TD" and replace with "</TD><TD".

Finally, to get rid of extra closing tags, find "<TR></TD>" and replace with "<TR>". If you had any <TR ALIGN=CENTER>s or other such options, you'll have to do an extra find/replace as well. But you still just saved a bunch of time. 8-) Those are the worst tags to worry about; the rest you should have already been closing by yourself.

One last miscellaneous note is about the quotes "" after all the options. These quotes aren't strictly necessary; in fact, I rarely use them. ^^; The only times they HAVE to be used is if the thing you're quoting has more than one word (e.g. for ALT text for an image, where you want it to read "All your base are belong to us". If you don't use quotes, all it'll read is "All".) Not only that, it's very easy to miss an ending quote and screw up everything that comes afterwards. I have yet to see a browser that doesn't like it if you leave them out (though I could be wrong), so it's up to you again.

List of Colors

Colors in HTML consist of six digits, which are in hexadecimal. The first two digits represent the RED content of the color, the next two the GREEN content, and the last two the BLUE content (the acronym is RGB). Hexadecimal digits range from 0 (no color) up to 9, followed by A through F (full color). Common colors include:

000000: Black
FF0000: Red
00FF00: Green
0000FF: Blue
FFFFFF: White
FFFF66: Yellow

For a large list of colors, check out this great image which gives you all the colors and hex values you'll need.

List of Special Characters

Many characters won't show up in HTML. To make them show up, you'll have to use an &, followed by a number or some text, followed by a ; semicolon. Here's a table of commonly used symbols you'll want.

More Help?

If you can't understand something here, first make sure you've read everything up to the part you're trying to understand. If you're still stuck, you can ask me. If I get a question I think may be useful for the masses, I'll put it up here in an FAQ section. (I'll answer the e-mail either way. 8-))