Chapter III

Paragraphs [P][/P] are the most basic division of text in HTML. They set apart text with the equivolent of a double space. Change the alignment of a paragraph by adding the alignment attribute inside:

[P ALIGN="center"]text or image[/P]

Parargraphs can be aligned left, right, or center. Left is the default. Images can be placed alone in paragraphs to set them apart a double space, as well, or inside the text.

To change the appearance of a the default text font, add the [FONT][/FONT] tags. Attributes must be placed within these tags to change the appearance. Common font attributes are face and size. The face is the style of the font itself. The default face is different for every browser, but is usually something basic and generic such as arial or geneva. My pages here are in verdana.

[FONT FACE="verdana"]text text[/FONT]

Then, to change the size of the font, add the size attribute:

[FONT SIZE=+1]text blah text[/FONT]

You can put an actual point size as the number, or type + or - to make the font bigger or smaller than the default 12. Remember that all the desired attributes can be included in the single beginner tag. This page has the font tags as such:

[FONT FACE="verdana" SIZE=-1]text[/FONT]

Font styles such as bold, italic, or ~~strikethrough~~ are not added in the [FONT] tag. They have their own tags, as such:

[B]bold[/B]
[EM]italic or emphasized[/EM]
[S]~~strikethrough~~[/S]

For italics, the tags [I][/I] can also be used, but not all browsers recognize them. They cause the same effects as the [EM][/EM] tags.

Remember to always include the closer tags after the text you wish to be affected. If it is left out, all text after the beginner tag will have the appearance.

Sometimes a section of text lends itself well to lists. Lists may be numbered or have a default bullet. To create a numbered list ( appears as below, ) follow these steps:

Place the beginner tag for an ordered ( numbered ) list [OL] where desired; within paragraphs or sections of text.
Everytime you wish to begin a new number on the list, add the unpaired list item tag [LI]
Each time you put the [LI] tag, it will automatically appear as the next sequential number. You do not need to insert breaks [BR] between list items.
At the end of the last numbered list item, place the closing ordered list tag [/OL]

You may also wish to have an unnumbered list. These appear with bullets or markers in front of each list item. Start out by putting the beginner unnumbered list tag [UL].

Just as with ordered lists, use the [LI] tag to begin each new item.
Each bullet will look the same, and will appear with every list item.
End with putting the closer unnumbered list tag [/UL]

If you wish to have a different sort of bullet, you can make or d/l them and use them as images. But, don't use the ordered or numbered list tags, because there will still be numbers or default bullets. Instead, begin a paragraph and insert breaks [BR] before each bullet.

Blockquotes are sometimes useful if you want to indent a section of text. They appear just as I've used throughout this page. You can insert them in any section of text with the [BLOCKQUOTE][/BLOCKQUOTE] tags, as shown below:

[BLOCKQUOTE]spiffy indented blockquote text[/BLOCKQUOTE]

These are quite useful when constructing outlines without numbers or bullets.

Tables are a way of arranging data in a basic chart. They are, however, a little bit difficult to master. First of all, you must know what rows and columns are. Rows are horizontal lines, and columns are vertical. Start out by placing the table tags [TABLE][/TABLE] where desired. The header, or top, of each column is marked by the table header tag [TH][/TH]. You should list these first. The table row tags [TR][/TR] mark the beginning and end of each row. Each piece of information or data cell is placed between table data tags [TD][/TD]. The cells of each row must be placed between the table row tags. I'll use an example of cd info to demonstrate.

Max. Rating = five asterisks *****

ARTIST ALBUM NAME RATING
Aerosmith Nine Lives ****

Third Eye Blind self-titled *****

Spice Girls Spice World ( not applicable; they actually owe ME asterisks )

This basic table was achieved using the tags as follows:

[TABLE]
[TH]ARTIST[/TH][TH]ALBUM NAME[/TH][TH]RATING[/TH]
[TR][TD]Aerosmith[/TD][TD]Nine Lives[/TD][TD]****[/TD][/TR]
[TR][TD]Third Eye Blind[/TD] [TD]self-titled[/TD][TD]*****[/TD][/TR]
[TR][TD]Spice Girls[/TD][TD]Spice World[/TD][TD]( not applicable; they actually owe ME asterisks )[/TD][/TR]
[/TABLE]

Notice how each row begins with the table row tag [TR] and all cells [TD]cell text[/TD] in that row are between the beginner [TR] and the closer [/TR]. The column headings [TH][/TH] do not need to be placed in a row; they automatically appear as the top row and in bold. While this table has no border lines, it's very easy to add them. Borders are an attribute, added in the [TABLE] tag.

[TABLE BORDER=x]

The variable x represents the size, 1 being the smallest. With a size one border, the example table appears as:

Max. Rating = five asterisks *****

ARTIST	ALBUM NAME	RATING
Aerosmith	Nine Lives	****
Third Eye Blind	self-titled	*****
Spice Girls	Spice World	( not applicable; they actually owe ME asterisks )

Other attributes which can be added to the [TABLE] tag are:

ALIGN="..." aligns table to left, right, or center
BORDERCOLOR="#......" specifies border line color by hexidecimal number ( must be used with the BORDER attribute )
BORDERCOLORDARK="#......" sets the dark color for a 3d border ( must be used with the BORDER attribute )
BORDERCOLORLIGHT="#......" sets the light color for a 3d border ( must be used with the BORDER attribute )
CELLPADDING=x creates a space between cell border and cell contents; x being the size in pixels
CELLSPACING=x inserts space between cells themselves; x being the size in pixels
FRAME="..." specifies outside border for the table: BORDER, ABOVE, BELOW, VSIDES ( vertical sides ), HSIDES ( horizontal sides ), LHS ( left-hand side ), or RHS ( right-hand side )
NOWRAP keeps rows from wrapping if they extend past the right margin

The best way to learn how to code tables is by trying each option again and again. Observe how each change looks and soon you'll be able to make it appear exactly as you wish.