More on Formatting Text

In the last lesson, we have learnt the basic text effects with HTML. We will now learn more on formatting text with HTML. This will more or less cover the various formatting tags in HTML.

Remember in the first part of this tutorial, when we were talking about elements and variables? One of the strengths of HTML is that you can denote several different variables in a single element tag. In future versions of HTML, it's likely that you will have to use this form of markup instead of simple <P><I> style, so you need to learn it and understand it now.

Start with fonts. The primary tag for marking up fonts is <FONT></FONT>. Now, if you tag an element with <FONT> alone, it will do - nothing at all. No change will be apparent, nada.

But if you add a variable inside the <FONT> tag, it will do something different:

<FONT size="+1">Suddenly, I'm bigger text!</FONT>

That new bit inside your <FONT> tag, size, is called an attribute. Attributes are qualities that you can set to specific values; in this case, "+1" is the value. All values are always inside quotes.

For a real-life example, let's talk about eyes. You probably have a pair of these. So if I were describing you using HTML, I might tag you:


Your eyes have a color:

<EYES color="">You</EYES>

and the color has a value:

<EYES color="blue">You</EYES>

You may also have an eye shape:

<EYES color="blue" shape="almond" number="2">You</EYES>

See how that works? You will find this exact syntax everywhere in HTML. By memorizing your tags and the attributes that go with them, and in certain cases the values that are valid, you will have mastered most HTML markup without breaking a sweat. Later, we'll have a couple of small things to add, but this is the bulk of what you need to know about your tags.

Your <FONT> tag can have the following attributes (in some cases, the values must also be selected from a list):

size - This attribute can either have a plain numeric value ("2") or it can specify an increase or decrease in the value relative to the surrounding text ("+2" or "-3")

face - defines the font. You don't want to get fancy with this, as the font you call must be included in the user's list. For the most part, stick with Times New Roman, Courier, or Arial.

color - defines the color of your text. This can be either a numeric value in hexadecimal code or a pre-defined color called by name, like "red".

<FONT> is an acceptable means for creating text right now, and you should get used to the syntax of it. However, the W3C has deprecated this tag as well. Though there is no doubt that millions of web designers will continue using it, you will need to know stylesheets in order to create pages that are valid for future versions of HTML.

For now, don't worry about whether or not to use <FONT>. Just use it. I am betting that the W3C will discover that, regardless of what they want, most people will continue using it, and browsers will continue supporting it. They are not always right!

You will also notice that the tags are in all caps, while the attributes and values are in lowercase. This is not required for most HTML (XML likes it), but it helps when you're reading code to see where your tags fall in a complex string of code. It's a good idea to get into the habit of coding this way, not least because future versions of HTML are likely to require this format.

Nesting Code

By now, there may be some times when you have multiple tags formatting the same element:

<H1><FONT color="red">Hello, there, World!</FONT></H1>

The end tags need to be included in REVERSE ORDER from the opening tags. This keeps your code tidy and ensures you don't forget to delete a tag when you're changing things.

No, the world will not end if you swap the order, nor will your computer explode. But in some cases, code that is not nested properly may not work.

You may also wonder what order to put things in - <FONT> first or second? The rule is, paragraph-level formatting goes first, then all formatting that affects specific text. Because <H1> affects an entire paragraph, that one needs to go on the outside.

Try This:

Using the page you've created, type a new paragraph. Select different words or phrases, and format them differently. Get wild. Do some words in red fonts, or try different colors you don't know will work. Play with it. Watch your code nesting, and make sure you play with at least one <FONT> element that requires more than one formatting change, like both size and color.

After learning this lesson dealing with more on formatting text, I see that you are progressing very nicely. Keep it up!

When you're comfortable with this, move on to the next tutorial.