|
 |
|
|
Overview: |
|
|
Text enhancements...what are they? When I say the phrase "text enhancements", I'm referring to the style of text. Things such as text size, bold, italics, underline, font face, etc. are all part of HTML text enhancements. Here in this lesson, I'm going to explain the very basic ones, and then even some more advanced techniques. On with the show! ... |
|
|
|
|
|
Text Size ~~ Advanced Text Size ~~ Bold, Italics, Underline ~~ Font Face
Font Color ~~ In Summary |
|
|
 |
|
|
Text Size |
|
|
Let's go ahead and begin with changing the size of your text. In HTML, we have two options to choose from when it comes to typing code for text size. The most common way to change size, however, is by using what are called Heading commands. Check out the stuff below, and see if you can grasp any of it. After I list the commands and what they do, I'll review a bit, and continue with the next part of the lesson. Good luck!! |
|
|
|
|
|
The Commands: |
|
|
|
<H1>Text to be in Heading 1 goes here!</H1> : Heading 1
<H2>Text to be in Heading 2 goes here!</H2> : Heading 2
<H3>Text to be in Heading 3 goes here!</H3> : Heading 3
<H4>Text to be in Heading 4 goes here</H4> : Heading 4
<H5>Text to be in Heading 5 goes here!</H5> : Heading 5
<H6>Text to be in Heading 6 goes here!</H6> : Heading 6 |
|
|
Back to Top |
|
|
|
|
|
The Above in Plain English: |
|
The above commands are pretty self explanatory. The "H" in the tag stands for "Heading" and the number beside it is the size. The only thing that might confuse you is that the smaller numbers are actually bigger text sizes. Just don't get mixed up with that. That pretty much takes care of Heading commands. They're rather simple, so I guess that's why they're the most popular. |
|
|
|
|
|
|
Advanced Text Size Commands: |
|
|
|
Advanced text size commands...What?! You mean there's more? Yep! There sure is, but guess what! They're really not as hard as you might think. These commands give you a little more control over the actual size of the text. Take a look below, and you'll see what I mean. |
|
|
|
|
|
The Commands: |
|
|
|
<FONT SIZE="-6">Text goes here!</FONT> : Text Size
<FONT SIZE="-1">Text goes here!</FONT> : Text Size
<FONT SIZE="+0"> Text goes here!</FONT> : Text Size
<FONT SIZE="+1">Text goes here!</FONT> : Text Size
<FONT SIZE="+6">Text goes here!</FONT> : Text Size |
|
|
Back to Top |
|
|
|
|
|
Note: Those are not *all* of the font size commands. There are actually quite a few more. I've displayed a few there to give you a basic idea of how to use them. The font size numbers go from -6 to +6. There's not hardly any difference at all between -6 and -2, so that's why I didn't display them, and the text just gets bigger from there on. |
|
|
|
|
|
|
The Above in Plain English: |
|
|
Again, this is pretty much self explanatory. You can see that we're talking about the font's size here, so that's what is displayed in the HTML code. You'll want to pay attention to the plus sign (+) and minus sign (-) before the number. Also remember to put quotations (" ") around the size number. |
|
|
|
|
|
Bold, Italics, and Underline Commands: |
|
|
Three very important commands in HTML, especially in web sites built to persuade the audience or viewer. They're used mainly to help emphasize certain words in the text. These three HTML commands are also probably the easiest you'll find! Cruise on down and take a look for yourself... |
|
|
|
|
|
The Commands: |
|
|
<B>Text to be bolded goes here!</B> : Bold Text
<I>Text to be italicized goes here!</I> : Italicized Text
<U>Text to be underlined goes here!</U> : Underlined Text |
|
|
Back to Top |
|
|
|
|
|
Font Face Commands: |
|
|
Font face....Here's where you really get to have some fun. The font face commands give life to the text. By default (meaning the preset to something; in this case the font) a pretty regular font is selected for web browsing. If a font face isn't defined to change that default, the text is plain. Below, you're gonna learn how to use HTML commands to change the font of your text... |
|
|
|
|
|
The Commands: |
|
|
<FONT FACE="Name of Font">Text in the new font goes here!</FONT> :
Text in a new font |
|
|
Back to Top |
|
|
|
|
|
The above codes shouldn't scare you too much. You should remember above where we used the <FONT> command to change the text size. We just replaced the size parameter to face and we changed the look of the font. How about that!
There is one thing you should keep in mind though when changing fonts all over the place. A visitor to your page can *only* see the font if it's installed on their computer system. That means that if you're using some weird font called "Woah, this is a cool font dude", be aware that someone else viewing your page may only see the default font if they don't have "Woah, this is a cool font dude" installed on their computer. If they don't then the generic, plain ole font is used in its place. |
|
|
|
|
|
Font Color Commands: |
|
|
If you read the Introduction tutorial lesson, you will remember the way to set the text in the <BODY> command. There will be times though, that you might want to change the color of text in parts the document, instead of using that same old color throughout. The commands below will show you exactly how to do that! ... |
|
|
|
|
|
The Commands: |
|
|
<FONT COLOR="orange">Text to be orange goes here!</FONT> :
Orange Text |
|
|
You should be getting the hang of this font stuff by now. You're using basically the same command, only you're changing what you want to do to the font. In this case, you're changing the color, so you use the Color parameter...simple as that. Any color you'd like to use will be fine. I picked orange, just because I think it's a neat color. Whatever strikes your fancy is great. |
|
|
Back to Top |
|
|
|
|
|
Another tip just for future reference. Remember the font size and font face commands that I told you about further on up in this tutorial? You may notice that all of the font commands mentioned in this tutorial have something in common. It's rather obvious actually...look real close now...Yes! *Ding Ding Ding*! You got it! It's the word FONT! :) In HTML, there are ways to combine commands to not only conserve space, but to simply organize your HTML commands. Anything dealing with the font of a text using the <FONT> command can be combined into one line of HTML code. Here's an example of how you'd do this... |
|
|
The Example:
In this example, let's say that we want to make the text a size of "+2", change the color to green, and use Lucida Calligraphy as the actual font. Here's how to do it: |
|
|
<FONT SIZE="+2" FACE="Lucida Calligraphy" COLOR="green">Text to be +2 and green goes here!</FONT>
Result of the above code: Text would look like this! |
|
|
In the code above, lets say you didn't want to change the font, but wanted to just use the default...or, you didn't want to change the color, etc. If that's the case, you just wouldn't add those to the <FONT> code. Another thing I should point out is that the parameters (sub parts... i.e. size, face, color) of the <FONT> code can be arranged however you want. You can put those in *any* order you'd like. It doesn't necessarily have to go "Size, Face, Color". Any order will do.
Also, the technique used above (combining codes into one long code) works with several other HTML commands. As we run across them, I'll be sure to mention it so you'll know that it can be done. |
|
|
Back to Top |
|
|
|
|
|
In Summary: |
|
|
Well, this about wraps up the HTML Commands dealing with "Enhancing Text". You should now know how to change your text size (two different ways), color, font, and use effects such as bold, italics, and underline. You should also be able to combine your <FONT> commands into one line of code, so that you can better organize your HTML commands.
Keep practicing all this new information with your pages, and then figure out where each of the above things actually looks good on your site. Practicing everything you learn will help you to memorize the commands, and will eventually help you become a great webmaster! |
|
|
Back to Top |
|
|
|
|
|
 |
