HTML How-Tos

The font "tag" (a fancy way of saying <font>) has several attributes. Color, size, and font face are three of them. You can mix and match them in any combination. The format is the same for each:

<font attribute1=" attribute1 value" attribute2 =" attribute2 value" attribute3 ="attribute3 value">text</font>

Size attributes:	Color samples:
1- Looks like this 2- Looks like this 3- Looks like this 4- Looks like this 5- Looks like this 6- Looks like this	Red looks like this Blue looks like this Navy looks like this Yellow looks like this Aqua looks like this Purple looks like this

So.

<font size="4" color="purple" face="Courier">This will be big, purple, and in Comic Sans MS font</font>

should show up as

This will be big, purple, and in Courier font

Or:

<font size="1">this will be very small</font>

should show up as

this will be very small

A note about font face:

The font face will only be seen by those who have the font installed on their system. This takes a lot of the fun out of the funky fonts.

Missing the close quote confuses a page of HTML. The post text doesn't show up and the subsequent posts are of an odd color.

Top

Posting "Spoilers"

It is customary to post critical movie plot information in text that can only be seen if the user clicks on it. Do Not Use White Font! It will show up clearly on non-white backgrounds, and you can't assume that at The Perfect World. The button to the right of the posting window, Invisible Font, will set the appropriate tags to hide the text for any user setting.

<span class="invisible">The Butler Did It</span>

Top

Lists

There are two sorts of lists: bullet and numbered .

List Tags:

<ul> Starts bullet list (or unordered list, which is what the u stands for)

</ul> ends a bullet list

<ol> starts numbered list (ordered list, which is what the o stands for)

</ol> ends a numbered list

<li> identifies a list item

<ul>
<li>Here is my first bullet
<li>Second bullet
</ul>

should be

Here is my first bullet
Second bullet

Ordered Lists

<ol>
<li>Here is my first bullet
<li>Second bullet
</ol>

should be

Here is my first bullet
Second bullet

Top

Tables

Basic table structure:

<table>	this begins the table
<tr>	this begins a row
<td>	this begins a cell
</table>	this ends a table

You don't have to end a row or a cell with a / tag, but it's good practice. Netscape in particular does unpleasant things with it.

The <table> tag has many options. A few of interest:

Border tag--You can set a border to frame your table and make it look pretty. You can also border at the row and cell level, but Netscape doesn't handle it consistently (sez the IE bigot).
bgcolor tag--you can set the background color of the table to anything you like. You can also bgcolor at the row and cell level.
Cellpadding, cellspacing--sets the space around the cells.
Font tags--they all work as described above.

Unless you know a great deal about tables, it's best not to get adventurous. Here is a sample:

<table border="1" bgcolor="white">
<tr>
<td>Here is row 1, column 1</td>
<td>Here is row 1, column 2</td>
</tr>
<tr>
<td>Here is row 2, column 1</td>
<td>Here is row 2, column 2</td>
</tr>
</table>

looks like this:

Here is row 1, column 1	Here is row 1, column 2
Here is row 2, column 1	Here is row 2, column 2

Top

Links:

How do I link?
The HTML code for linking a URL is:

should be

My Link

a HTML code for "anchor", as in you are anchoring an item to the page.

href The HTML tag to indicate that the anchor is a URL.

"[url]" Enter the entire URL, from http to the end, in double quotes.

target="new" This opens the link in a new window. It is optional, but useful. The target name can be anything; you could make it "joe" or "newwindow".

Text This is the actual anchor text, what people will click on. It can be as long or as short as you like.

/a Ends the anchor tag

Top

Images

Make sure you have a .gif or .jpg URL address. Any other URL address means the image is linked into the HTML.

If you need to find the .gif or .jpgURL on a page, just do a right click on the image. Select Properties (in IE) or View Info (in Netscape). A small window will appear in either case with the fully qualified URL.

Sizing the image:

If the image is huge, just resize it using the width= tag. 150 is a good starting point;425 is the maximum. You don't need to use the height= tag, the browser will set the proportions accordingly.

Can my image be on my own personal computer?

No. Your image has to be online. There are a diminishing number of free websites that allow you to link in images to other server. Many times your ISP will provide you with some webspace that you can use.

Top

Combine Links and Images

Just substitute the image tag for text in the linking procedure.

becomes

Top

Images in Tables

This is especially neat if you want to wrap text around an image.

<table align="left"<tr><td><img src=" http://www.theperfectworld.us/perfectgray.gif" width="150"></td></tr></table>

But make sure you have enough text to wrap around the image, otherwise the page will use the next post. No big deal. Just something to be aware of.

Top

<ul>	Starts bullet list (or unordered list, which is what the u stands for)
</ul>	ends a bullet list
<ol>	starts numbered list (ordered list, which is what the o stands for)
</ol>	ends a numbered list
<li>	identifies a list item

a	HTML code for "anchor", as in you are anchoring an item to the page.
href	The HTML tag to indicate that the anchor is a URL.
"[url]"	Enter the entire URL, from http to the end, in double quotes.
target="new"	This opens the link in a new window. It is optional, but useful. The target name can be anything; you could make it "joe" or "newwindow".
Text	This is the actual anchor text, what people will click on. It can be as long or as short as you like.
/a	Ends the anchor tag