Emphasizing Text with Color and Size

More on text -- how to change it's size and color

Ahhh, that did feel good. I don't know about you, but I was getting tired!

Okay, we've learned a lot about text -- how to write it, how to format it [ for the visitor's browser ], and how to add emphasis to words, phrases or ideas. But wait !! There's more !! We can also make some or all of our written text smaller, larger or change it's displayed color. We can even change the font itself as well, but I'm not going to get into that on this tutorial because of basic problems it can cause.

Not to jump around too much, but one thing does bear mentioning here. The color of your text throughout the document as well as the color of your links [ there are three types which we'll discuss later ] is set up in the <BODY> tag. Once set up, this is the default value throughout the document. I'm not going to get into this just now, but you should keep it in mind. We'll talk about what can be done with the <BODY> tag a little later. The <BODY> tag is where page backgrounds come into play as well.

So what about size and color? How do we change these things to make our page stand out? Well, I'm going to show you using the 'Mary had a little lamb.. ' example.

Anything we do with a font ( if this is a new term to you, a font is nothing more than the style of text were using ] is, strangely enough, done with the set of  tags. Just like the special emphasis tags we talked about in the last lesson, the  tags are a paired set. If you don't close out the command, all text from the point of insertion on will carry the new style you've specified. Multiple opening  tags without their corresponding closing tag,  may cause unpredicable results which are very difficult to track down and correct. So be sure to always use the closing tag.

At this point in the tutorial, we are going to discuss two attributes of the  tag; color and size. There are more than just these two. But before we proceed, let me clear up the terminology. An attribute of a tag -- any tag -- is a property of that tag. You might think of a car as an example. It's attributes might be model, make, year, color and so on. It works this way with HTML tags too. If you use a tag, but don't specify all of it's attributes, HTML will use the default value -- whatever that may be. In certain cases, such as with the  tag, there is no logical reason to use the tag unless you are going to specify one of it's attributes.

That said, let's learn about the size and color attributes of the  tag. First the size attribute:

Your visitors web browser is set to a default value for text size [ specified in points ]. You as an author have absolutely no control over this. You can, however increase or decrease the point value in increments using the  tag. The increments are numbered from 1 to 7, with 7 being the largest allowable change. Let's say we want to increase the first word in our sample sentence to the next increment upwards [ make it larger ].

Here's our sentence:

Mary had a little lamb, it's fleece was white as snow.

Here's how we change the size of the first word, 'Mary':

Mary had a little lamb, it's fleece was white as snow.

And here's how it will look:

Mary had a little lamb, it's fleece was white as snow.

Looks like bold text, right? But it's marginally larger too. Let's take it to the next increment and see what happens.

Mary had a little lamb, it's fleece was white as snow.

Mary had a little lamb, it's fleece was white as snow.

Going 'whole-hog', let's increase it to the maximum:

Mary had a little lamb, it's fleece was white as snow.

Mary had a little lamb, it's fleece was white as snow.

A little large you say? Okay, let's take it the other way and make it smaller than the surrounding text.

Mary had a little lamb, it's fleece was white as snow.

Mary had a little lamb, it's fleece was white as snow.

Hmmm, just like Alice in Wonderland --- one side makes you larger, and one side makes you small .....

You control the increments up or down, larger or smaller with the plus [ + ] and minus [ - ] symbols -- not a difficult concept. Now, why would you want to do this? I don't know, perhaps just for appearance like in some of the old parchments where the first letter of the paragraph is much larger than the rest. Perhaps just to emphasize, using size, a particular word or group of words. It's really up to you.

One thing I should mention here, before you get carried away, is that making a letter, word or group of words larger in text which is more than one line in length will offset the spacing for the rest of that line. This is best illustrated with an example. We'll use a sentence from Oscar's story to demonstrate.

There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.

Right-o, let's make the 'T' in 'There' [ first letter of the first word ] larger in the classical style. Here's the way to code it:

There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.

And our result:

That's it. I trust you can see the difference. If that doesn't bother you, have a ball !

Now for the second attribute of the  tag and my personal favorite, color.

There are two ways to specify a color change in HTML using the  tag. Either with a hexidecimal number [ usually abreviated to 'hex' by computer nerds] or by typing the name of the color. Both have advantages and disadvantages, but I'm going to stress the use of typing the color here because it's easier to use. Let's cover the hex method first just to get it out of the way. If this is too confusing to you, just skip by it and go on to our next section where we type the name of the color in.

Computers use the hexidecimal system for certain operations for reasons not understood by myself. However, understanding why is not necessary in order to use the system. Each color available is expressed as a six digit group of letters and numbers. Each individual digit is indicated by a number from zero to fifteen, where A=10, B=11, C=12 and so on. When you figure out all the possible combinations of these six individual digits -- each representing a value from zero to fifteen, you come up with over 16 million possible colors [ 16,777,216 to be exact ]. Each of the primary colors -- Red, Blue and Green -- are represented by a pair of these digits. Therefore we have three value pairs in our color command. The first two digits represents the Red value, the second two digits represents the Green value and the third; yep, you guessed it; represents the Blue value

Now, why would anyone want to subject himself to such torture and use this system? Control, boys and girls, control. Anyone who can't come up with a color they like out of all those choices -- well, they don't need to be making webpages.

What's it look like? Well, the color BLACK is represented by the hex number 000000. That is, no Red, no Blue, no Green. At the other end of the spectrum the color WHITE is represented by the hex number FFFFFF. That is, max Red, max Blue and max Green. All of the other colors fall in between.

So, how do we use this ..... We simply specify the hex number for the color attribute we want in the  tag -- like so:

In this case the color we've selected is Red. How do I know to enter FF0000 to get the color 'Red'? Well, that's the drawback. Unless you have a color chart or want to spend an awful lot of time trying number combinations, you don't really know what you're going to get. But let's look at an example using this method anyway. Back to our old friend, Mary.

Mary had a little lamb, it's fleece was white as snow.

Let's make the word 'white' yellow in color [ Mary's lamb has been rolling in the wrong kind of snow ! ]. Here's the code to change the color:

Mary had a little lamb, it's fleece was white as snow.

Our sentence now looks like this:

Mary had a little lamb, it's fleece was white as snow.

That's it. Simple enough once you get passed the difficulty in figuring out which hex combination gives you which color. For those of you who want to use this method, I've included a simple color chart at the bottom of this page. It will at least give you an idea of what values to use.

The second method for specifying a color, and my personal favorite, is much easier to use -- but much more limited. I mean, how hard is it to type the word 'orange' in order to tell HTML that you want a font color to be orange. The drawback with this method is the number of colors available. Since each color name must be mapped to a value, no one is going to sit down and map over 16 million different colors. But then, you probably don't require that range of choices, either. As a consequence of this, the major browsers -- NetScape and Explorer -- have different numbers of colors available as an english command. In the days of NetScape 3 and Explorer 2, the NetScape browser would recognize 148 named colors and the Explorer browser recognized 16 named colors. Naturally, if it were important to me to ensure that a specified color showed up on a visitor's browser, I'd use the Explorer listing since all of it's colors will also show up in NetScape.

If you try to work it the other way and specify a color that the visitor's browser does not recognize, the  will just display the page's default color -- which is the same as the rest of your text.

Before I give you an example of the 'named color' method, let me list the colors I know to be available in Explorer 2. Netscape has all of these plus many more, but then I'm not going to sit here and type out a listing of 148 color names -- sorry.

Named colors available are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. Stick with these or use the hex method above.

All right, let's have an example. We'll use Mary and her lamb again to demonstrate.

Mary had a little lamb, it's fleece was white as snow.

Let's make the word 'white' yellow in color [ Mary's lamb is still rolling in that nasty snow ! ]. Here's the code to change the color:

Mary had a little lamb, it's fleece was white as snow.

Our sentence now looks like this:

Mary had a little lamb, it's fleece was white as snow.

It goes without saying [ but I'll say it anyway ] that you can combine the size and color attributes in the  tag to gain a desired effect. Let's look at a quick example using Mary once again. This time, we'll give her a BIG [ as well as yellow ] lamb.

Here's our code:

Mary had a little lamb, it's fleece was white as snow.

And here's how it looks in a browser:

Mary had a little lamb, it's fleece was white as snow.

Now I know your next question. Can I emphasize text using the  tag and one of the tags from the previous lesson?

The answer to this is YES, you can. Just add the appropriate tags. In the way of an example, we'll give the big, yellow lamb above italisis  for added emphasis. Just remember not to mix tags.

Here's our code:

Mary had a little lamb, it's fleece was white as snow.

And here's how it looks in a browser:

Mary had a little lamb, it's fleece was white as snow.

Well, let's use some of what we've learned in Oscar's web page. How about if we emphasize the first 'T' in the first paragraph, olde English sytle by making it both larger and a little different color than the rest of the text. Let's also change the color of both 'palm tree' and 'dried insects' in the first paragraph. We'll use an example of each method to change color.

Note: I'm doing this pretty flippantly, without regard to the effect on the over all page. But then I'm doing it to demonstrate the teaching points. When you design your page, be cautious with arbitrarily changing colors and font sizes for no good reason. You can easily 'turn off' your visitors by overusing stuff like this.

Okay, our code once again and the resulting page in Fig 5:

<title> My Pet Turtle, Oscar </title>

</HEAD>

<BODY>

<CENTER><H1>Oscar, the Painted Turtle</H1></CENTER>

  There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.

  Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.

  Oscar was purchased at a local pet shop here in Korea for the tidy sum of 4,000 won [ that's about 3 dollars, U.S. money ]. He was just a little tyke about the size of a quarter when I bought him and brought him home. I've alway's enjoyed strange and unusual pets and you don't get much stranger than a turtle.

  Oscar is a true turtle, as opposed to a tortoise, and spends all of his time in the water. His home consists of a 55 gallon aqarium -- completely filled with water, several rocks to hide under, and some plastic plants. These latter are more for my benefit than his, since he can't eat them [ though he tries ] and I doubt that he appreciates their asethic value.

  I've had Oscar for about three years now and am amazed at how he's grown. At the present time he is larger than a grown man's hand -- and still growing. Oscar will eat just about anything, but his favorite food seems to be small green frogs that abound around my neighborhood. Fish are also welcomed, and I can no longer keep tropical fish as pets along with him as I used to. Sooner or later he'll eat them.

  Turtles are interesting in several respects -- one being the length of time they can remain completely under water. And so forth and so on ......

</BODY>

</HTML>

Fig 5

Okay. So much for emphasizing text with color and size. Let's Review:

To change the size or color of our selected text we use the  set of tags.
Size and color are called attributes of the  tag and equate to it's properties much like the year, model and make equate to the properties of an automobile.
The size of your selected text may be incremented or decremented in steps. Seven is the maximum value which you can use, up or down.
The actual size of the changed font will depend upon what your vistor has set in his web browser -- you have no control over that.
There are two ways to specify the color of your selected text using the  tag -- the hex method or the named color method. Both have advantages and disadvantages.
If you decide to use the 'named color' method, keep in mind the limitations of each browser. I suggest you stick with the more limited one to ensure that you're page displays the way you would like it to.
You can mix and match attributes within the  tag as well as include other types of emphasis tags along with them. Remember to keep the tags straight.

Let's take a breather, then we'll return and look into how to insert an image into our document.

[Click on the icon below to proceed to the next step in the lesson]