Changing Appearance of Text |
|
![]() ![]() ![]() ![]() |
There are a lot of ways to
change the appearance of the text you are displaying. There are the tried and true methods
that have been part of HTML for a while. Then there are some new capabilities that've been
added by browser developers such as Netscape and Microsoft. I'll talk about how to use the
"old" ones first then we'll explore some of the new functions that have become
available in the last year or so.Basic Text FormattingTraditionally, if you want to emphasize a word or phrase in a document you have two choices - make it bold or make it italic. To make text bold simply enclose it like <b>bold</b>. If you want to make a whole phrase be in bold simple enclose it <b>a whole bold phrase</b>. In fact, if you want to make the rest of your document bold then simply forget to put on the ending tag, </b>. But the purists argue that it's not the author's place to tell the viewers how they should render text. So an additional tag has been added to replace <b>. It is <strong>. This tag then leaves it up to the individual browser settings or text reading program to decide how it renders such text. You can make up your own mind. I know that more often than not, I use <b> because it's shorter and I probably won't misspell it! To show text in italics you enclose it like <i>italics</i>. Similarly, if you want to make the whole phrase be in italic then enclose it thusly <i>this whole phrase will be in italics</i>. If you leave off the closing </i> you'll find the rest of your document is in italic font. Like bold, the purists have come up with another to do italic. It's called <em>. This is short for emphasis. Again, it's your choice. You can also play with the size of the letters. This is dangerous. Especially if you develop on large, high-resolution monitor. Your text may look might small on the screen so you tweak it to make it bigger. Then you get home and try it on your old 13" monitor and feel like you're reading the LARGE PRINT READER'S DIGEST! Use this capability wisely. Don't substitute using the <h1> through <h6> tags to make stuff bigger or darker. These should be used only for headings since some browsers or reading programs will try to determine document layout using headings. Anyway, to make print bigger or smaller you can use the <big> or <small> tags. Enclose the text you want to modify with <big>bigger</big> or <small>smaller</small> and you're ready. If you want to make your text even bigger or smaller then just use more of the <big> or <small> tags. It would look like <big><big>bigger</big></big> or the same thing with <small>. It seems that you can carry this on for as long as you want until you reach the maximum size supported by the fonts installed on the viewing computer. There are 7 font sizes that are displayed by a browser. They are numbered from 1 to 7 with 1 being the biggest and 7 being the smallest. You could use the <font> tag to control the size of your characters. If you put in the tag like <font size=+1>bigger</font> it would look like bigger. This is how I do it. But having played with <big> and <small> I think I might just switch. If you're feeling particularly stubborn and self-destructive then I would suggest trying out the <basefont> tag. I've used it a couple of times but then had to go back and remove it as it created some maintenance nightmares for me. I'd suggest you steer clear of this one. Advanced FormattingOnce you've sized your text then you might want to play with the color. You've got to be really careful how you do this though. Remember, the browser's going to color the links and you don't want to confuse you're viewers by adding the same colors on non-link text. However, I know that you'll try this one out anyway. You specify the color using the <font> tag as well. It looks like this, <font color="fuchsia">lovely isn't it?</font> which comes out like lovely isn't it? Check out the <font> page for the color definitions. Another thing you can do, using a non-3.2 add on to the <font> tag, is set the font name itself. Now this depends on the user having fonts installed on their computer. I would hazard a guess that a lot of your viewers will be running some form of windows so they will have at least a basic set of fonts. The worst that can happen is you'll use the default font they have defined. To do this you'd enter something like <font face="Arial">This should be in Arial</font> which would be rendered This should be in Arial. Pretty cool, huh? But another warning - don't overuse this tool. The "experts" recommend consistency in documents. Too many fonts can make a document look very disorganized or amateurish. But this one can be very effective when you want to create that special look. I do use it a little and I've enjoyed having it around. I hope this has helped spark your imagination and shown you how to create those special effects you've been trying to achieve. Now, when you're ready, let's move on to see how you put in lists. |
![]() ![]() ![]() ![]() |
Comments to author: mrusk@radix.net All contents copyright © 1996-1997 Michael T. Rusk |