Font Basics

Earlier, you learned how to create a HTML link that don't look like a bunch of gibberish. But, you've also noticed how people are able to put fancy looking fonts in their profile or in their posts.

Now you can too! Here's how:


The look and feel of out text can help convey what/how we feel.

Sometimes we feel happy and funky; Sometimes we're all business. Your font choice can make all the difference.

To emphasize a word or a phrase, you can apply a Bold or Italic style to the word or phrase. You can even Combine them!

To do this, simply surround the word or phrase with the appropriate tag. Here are some examples:
<b>This text will be bold</b>
<i>This will be italic text</i>
<b><i>This will be combination text</i></b>

If you want to do more, like change the color, size or font, you must use some additional HTML tags. The only catch is that as HTML has evolved, some of the tags used to create the fonts, have changed, or have been deprecated (phased out).

However, these older <FONT> attributes are still supported by most browsers. Which is a good thing, because the older tags are easier to learn to use. So in this tutorial, we'll be using the older <FONT> tag. The newer <STYLE> elements will be discussed in the advanced section, below.

The <FONT> has three (3) attributes:

  • color
  • size
  • face

So a fully formed <FONT> tag looks like:
<FONT color="#FFCCAA" size="4" face="Sans Serif">Text To Display</FONT>
<FONT color="#FFCCAA" size="4" face="Sans Serif">Text To Display</FONT> (with the style applied)
NOTE: The FONT tag uses an opening and closing tag, such as <FONT...>Display Text</FONT>

You don't need to provide all 3 items, only the ones you want to change. If you only want to change the color, use: <Font color="#FF0000">Red Text</FONT> to create some red colored text.

The color attribute describes the color used to draw the text on the page. Like most places on the internet color is normally described using a hexadecimal notation such as #ff3500. The # means that a hexidecimal value is starting. The FF is the Red component of the color, 35 represents Green and 00 is the Blue component.
(NOTE: On MySpace, the leading # is often stripped out by the various editors on their site. Still this doesn't seem to affect things. So, use the #, but don't worry if it gets stripped out by MySpace.)

To make it easier to come up with standard colors, you can visit sites such as this one: SiteDirections.

The size attribute is a relative size measure, where "3" is a "normal" sizee font. "4" is a larger font, "2" is a smaller font. You can also use "+1" or "-1" to make a font larger or smaller.

Lastly, the face element is simply the font's name. Common fonts are "Arial", "Comic Sans MS" and "Courier".

To use the newer CSS based way of fomatting your text, view the advanced discussion, below.

Continue to Clickable Images >>

Was this useful?;
Comments:
Link Basics   Font Basics   Clickable Images   CSS Basics   Home

If you have any questions or comments just contact me.