•Site Purpose

•HTML Tables

•Fonts &
Type alignment

•Images

•Links

Fonts are very important to the layout of your website. There are many things that you can do with them and there are many things that you can't very easily do with them. The base font tag looks like this:

<font>Your text goes between these tags</font>

The font tag has some attributes that you can add to it to change the basic things like: size, color, and face (or the font type). These attributes are added by typing size="#" or color= or face= inside the opening font tag. One can look like this:

<font size="5" color="#CC00FF" face="Arial, Helvetica, sans-serif">Your text would appear like this</font>

This is how that code looks in a browser:

Your text would appear like this

Size ranges from 1 to 7 in HTML, with 7 being the biggest. You can also change the font size by increasing/decreasing the font size like this <font size="+2">

Color can be set as the name of the color such as red, green, silver, rust, etc. but the most popular way of setting a font color is to use it's Hexadecimal value. Click here to open a window that has a list of all the color names and explains Hexadecimal codes.

Face is what changes the actual font that is used to display the words. As a good habit there are usually more then one font face listed, all are similar fonts, but are listed just incase the user viewing the site does not have the first one. With that said you always want to try to use commons fonts for your text so everyone can view it. If you list a face that the user doesn't have, it defaults back to Times New Roman of a generic serif font. Here is a list of 5 common sets of similar fonts used:

Some other simple things that you can do with type is make it Bold, Italic, and Underlined (even though you can underline text, it is wise not to underline anything that isn't a link, since they are usually underlined)

Alignment

Text Alignment in HTML is fairly simple, there are only a few things you can do to align the text. Number one place the text in between <P></P> tags and add the align attribute to it (left, center, or right). A fast way to get text centered is to place <center></center> tags around it. Two, place the text into a table cell that already has align and valign to it.

A small trick that can sometimes be used is to use a clear image (or picture shim) to move text to a specific spot, an example of this is at the top of this page where the title is. View the source of the page and find where the word "Fonts" is in a table with a background. The clear image was used to move the line of text down so it looks like it is centered vertically on the image.