|
|
Building Web Pages From Ground Zero By Professor Nibble ã Nibble University 2000-2007 HyperJump to Font Face, Font Size, Font Color, Center, Assignments FONTS & CENTER - Lesson 4 |
|
|
Always remember that it is the browser that makes an html web page come alive. And, because there is more than one browser on the market, you cannot be absolutely certain that your web page will be viewed as you intended. Netscape and Microsoft continually have a feature war, so a tag that works with one browser may not work with another. There is a standard list of tags that should be recognized by most browsers, and these are the ones I try to use. Choosing a font is a lot like visiting Las Vegas. Sometimes you come back a winner, and sometimes you don't. If the computer viewing your web page does not have the font installed that you use, the browser will replace it with its default font. Therefore, it is a good idea to stick with common fonts, such as Times New Roman, Arial, or Comic Sans MS. Microsoft Windows installs these three fonts automatically, so you can be pretty sure at least those using Windows will have no problem. |
|
|
The font tag looks like this - <FONT> </FONT> In this lesson we are going to learn about tag attributes. If you put the font tag around some text and expect to see something happen, you're on a slow boat to nowhere. This is a tag that is useless without one or more attributes. The three attributes you will use are - FACE, SIZE, COLOR |
|
|
|
|
|
You use FACE to select a particular font style from those installed on your computer. If you do not use this attribute, your fonts will usually come out as Times New Roman and in that case you wouldn't use the <FONT> tag at all. My favorite basic font is Comic Sans MS. These HTML lessons are done in my favorite font style. Let's see this tag in action: |
|
|
<FONT FACE="Times New Roman">This is Times New Roman</FONT> |
|
|
Result: This is Times New Roman |
|
|
Remember your html tags can be uppercase or lower. I will use uppercase and the color red throughout these lessons for easier viewing. Now, notice that I stuck the attribute FACE="Times New Roman" inside the <FONT> tag. The format of the attribute is: name of the attribute - equal sign - what we want the attribute to be, in quotes Remember this and you are insured to be a success in life! Now, I almost don't even want to tell you this, but I will anyway. I have never used this feature, but you may find it handy. I can do this: <FONT FACE="Times New Roman, Arial, Timbuktu"> </FONT> What I'm doing here is saying to the browser that visits my web page, "Look at my page with Times New Roman and if you don't have that try Arial and if you don't have that try Timbuktu and if you don't have that stick it in your ear." (just kidding - the browser will display its default font if it can't find any you list) Note there is still only one set of quotes around the names of the fonts. We use the size and color attributes the same way, and we often include all three of them in a single tag. Let's look at the size. |
|
|
There are two ways to change your font size - Actual and Relative. Actual Size <FONT SIZE="3"> </FONT> There are two things to note here. One, the number is in quotes just like our font face attribute. Second, the sizes of fonts are from 1 to 7. Unlike our headings, as the number gets bigger, the font gets bigger. The default font size is "3", so if that's what you want you don't need to use the size attribute. Relative Size <FONT SIZE="+2"> </FONT> The sizes are from -2 to +4. Everything here is in relation to the default font of 3. If you want your font to be 2 sizes larger than the default you use +2. If you want your font to be 2 sizes smaller than the default you use -2. Personally, I prefer the REAL thing and usually use the Actual Size. Look at this example: <FONT FACE="Arial" SIZE="7">Gabonzo Beans</FONT> |
|
|
Result: Gabonzo Beans |
|
|
OK. The third attribute for the font tag is COLOR. |
|
|
There are two ways to change font color. One is to use the name of a color that the browser is supposed to know, and the other is to use a color number. Color numbers are done in hexadecimal code. You don't need to know a thing about hexadecimal numbers, so don't get panicky. Believe it or not, I prefer using the hexadecimal numbers over color names. There are over 400 color names and I don't know Spring Green from Peach Puff, and I don't want to take the chance that the browser visiting my web page knows any better than I do. My html editor has a handy color chooser. I visually find the color I want and it will automatically insert the hexadecimal number. There are also color charts to be found all over the Internet. |
|
|
Here are some common colors in hexadecimal form: FFFFFF FF0000 FFFF00 008000 0000FF FF00FF 00FF00 00FFFF And even though I can't show it on this page, BLACK would be 000000 Note: The 0 in a hexadecimal number is a number not a letter. Hexadecimal numbers include 0123456789ABCDEF. Example: |
|
|
<FONT COLOR="Red">The color of this text is red. </FONT> <FONT COLOR="#FF0000">The color of this text is red, too. </FONT> |
|
|
Result: The color of this text is red. The color of this text is red, too. |
|
|
First off, red on a blue background looks pink unless you make it really big and bold. The point is, the name Red and the hexadecimal number FF0000 give the same results. Be sure to notice the # sign in front of the hexadecimal number. |
|
|
I'm not going to give you an example of all three attributes used at one time. I think you can figure that out and prove it by doing the assignments. |
|
|
I don't know why I'm talking about the CENTER tag in this lesson. I do weird things sometimes. Aligning text and graphics on an html page can be a real challenge. Things just don't work as easily as using a word processor. However, CENTER is a pretty straightforward tag. Basically, it will center the text or graphic you put between the tags. Example: |
|
|
<CENTER> Edges make me nervous! </CENTER> |
|
|
Results: Edges make me nervous! |
|
|
|
|
|
Assignment 2 - Lesson 4
|