|
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="#D83A97" 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:
Arial, Helvetica,
sans-serif
Times New Roman,
Times, serif
Courier New, Courier,
mono
Georgia,
Times New Roman, Times, serif
Verdana,
Arial, Helvetica, sans-serif |
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)
| <B>Bold</B> |
Bold |
| <I>Italic</I> |
Italic |
| <U>Underline</U> |
Underline |
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.
|
