 |
|
 |
 |
 |
|
 Print this Article (NS4) Netscape Navigator Internet Explorer Opera Neoplanet
|
 Forums
HTML General Programming Flash Site Dev Grafix (Art)
|
 Laboratory
Smart HTML Color Lab Generators
|
 HTML Editors
Simple Editor(Win*) EditPad(Win95) AOLPress(Win95) BBEdit(Mac) Dreamweaver CuteHTML
|
|
Related Files
Font Creator True Type Fonts WEFT Icon Creator
|
 Contents
Introduction to Ultimate Enlightenment
Body Works
Images and Eye Candy
Lists and Forms
Tables
Frames and those that Float
Meta Data
Sound of Music
Channel Surfing
|
Introduction to Ultimate Enlightenment [ Part II ]
By Lisa Hui
Fonts and Colors
- Ooooh, the colors!
When you finally get bored of the default font style and colors (black letters on a white background) used to display text in the browser (Times New Roman and Helvetica), you may want to look into the font tag and its parameters.
Recalling the tag format I mentioned earlier: <TAG PARAMETER="ATTRIBUTE">, which is how the font tag is used, we will begin with the simplest parameter, size. <font> is the TAG and size is a possible parameter, so our font size tag should look something like: <font size="Some Size">. Each font has a default size, and the default size varies for each font type. There are generally two ways to specify the size, relatively or absolutely.
If you want to increase the size of the text by one notch, use the following tag, just tell the size parameter to make it one level bigger than it is right now. Should you want to make it one notch smaller, tell the size parameter to make it one level smaller than it is right now. This is relative to the size the font is set at right now (which in most cases is called the basefont).
| Code | What you see in the browser |
| <font size="+1">Text</font> | Text |
| <font size="-1">Text</font> | Text |
To make it absolute, just set the size parameter to the integer size you desire (the maximum integer size is 7):
| Code | What you see in the browser |
| <font size="">Text</font> or <font size="0">Text</font> |
Text |
| <font size="1">Text</font> | Text |
| <font size="2">Text</font> | Text |
| <font size="3">Text</font> | Text |
| <font size="4">Text</font> | Text |
| <font size="5">Text</font> | Text |
| <font size="6">Text</font> | Text |
| <font size="7">Text</font> | Text |
The default size for fonts may also vary by browser and computer platform, especially if you're using different fonts, and you can specify the basefont between your <HEAD> </HEAD> tags with the following tag: <BASEFONT SIZE="Size Number">.
This brings me to the next part, font typefaces. Face is another possible parameter for your font tag. This is used to specify what font you wish to use in rendering your marked-up words. Microsoft Internet Explorner (MSIE) and Netscape Navigator (NS) use Times New Roman or Helvetica as a default (when no font is specified). To set a custom font, add the following parameter to your <font> tag, which looks something like: <font face="Some Font">
| Code | What you see in the browser |
| <font face="">Text</font> | Text |
| <font face="Arial">Text</font> | Text |
| <font face="Helvetica">Text</font> | Text |
| <font face="Verdana">Text</font> | Text |
| <font face="Times New Roman">Text</font> | Text |
| <font face="Courier">Text</font> | Text |
| <font face="CAC Champagne">Text</font> | Text |
| <font face="Wingdings">Text</font> | Text |
| <font face="Quake">Text</font> | TEXT |
| <font face="Typewriter">Text</font> | Text |
| <font face="MS Sans Serif">Text</font> | Text |
| <font face="Chicago">Text</font> | Text |
| <font face="System">Text</font> | Text |
There is a huge number of fonts you can use on your page, although, if the visitor's computer doesn't have that font installed, they will see only the default font. There are ways to "stream" (dynamically send and use a certain file) or embed font files on your page so that they will be automatically loaded by the browser when the visitor visits your site (you don't even have to worry about them not seeing the fonts you wish to write your pages in), and you can read about it in our advanced HTML section. Another alternative would be to specify more than one typeface. You can list several fonts in the attribute for the font face parameter and the browser will use the first one it comes to in the list that is installed on the visitor's computer: <font face="Font#1,Font#2,Font#3,etc"> This also allows you to compensate for the discrepancies between computer platforms :)
Below is a short list of fonts that are comparabable between Macintosh and PC systems. If you find any errors or would like to add some information, please notify html@3dinfinity.com
| Macintosh | PC |
| Helvetica | Arial, Helvetica |
| Times, TimesNR, New Century Schoolbook | Times New Roman |
| Symbol | Symbol |
| Geneva, Sans Serif | MS Sans Serif, Helvetica, Arial, Verdana |
| New York, Serif | MS Serif |
| Chicago | Chicago |
| Zapf Dingbats | WingDings |
| Palatino | No Equivalent |
| Courier | Courier New, Monospace |
Another parameter that font can take in is color. This is where you can get to be a little wild (though I've certainly seen my share of bad color use on websites :b). <FONT COLOR="Some Color">. The attribute ("Some Color") can either be a color name or a hexadecimal value representing RGB, the three primary colors.
The 16 original color names are: Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, and Aqua [in any kind of capitalization you prefer :)]. Also, check out this table with other supported color names.
| Code | <font color="Teal">Jack</font> jumps over the candlestick and burns his behind. |
| What you see in the browser | Jack jumps over the candlestick and burns his behind. |
Hexadecimal values, also referred to as sRGB values, offer a wider range of colors, although there's a range of "browser safe" colors (some browsers don't support certain hex values - doesn't that ?). These tags looks something like <FONT COLOR="#RRGGBB"> where R, G, and B stand for the Red, Green and Blue sections of the spectrum, and you'll see that commonly used on websites for those really nice shades of color.
| #000000 | #000000 | #000000 | |||
| #110000 | #001100 | #000011 | |||
| #220000 | #002200 | #000022 | |||
| #330000 | #003300 | #000033 | |||
| #440000 | #004400 | #000044 | |||
| #550000 | #005500 | #000055 | |||
| #660000 | #006600 | #000066 | |||
| #770000 | #007700 | #000077 | |||
| #880000 | #008800 | #000088 | |||
| #990000 | #009900 | #000099 | |||
| #AA0000 | #00AA00 | #0000AA | |||
| #BB0000 | #00BB00 | #0000BB | |||
| #CC0000 | #00CC00 | #0000CC | |||
| #DD0000 | #00DD00 | #0000DD | |||
| #EE0000 | #00EE00 | #0000EE | |||
| #FF0000 | #00FF00 | #0000FF |
Now, to make your life (and my life) easier, I've included a palette of browser safe color codes in our color help index. What's the difference between browser safe colors and the normal 256 colors you ask? The browser safe color range includes only 216 of the 256 color palette; the remaining 40 colors vary between the Macintosh and PC consoles.
Through color mixing (juxtaposing pixels of different colors in a checkerboard fashion - called dithering), you will be able to achieve a range of 10 million colors. To find out more about it, check out the Color Mix website.
Dithering also happens to produce some negative effects. If the color that is being displayed on a computer isn't defined by the computers color palette, it will attempt to dither it, that is, trying to "simulate" the color by alternating pixels of colors that closely approximate it. An example that Robert B. Hess of Microsoft, in his article "The Safety Palette" uses: imagine having to build a solid purple square by juxtaposing pixels of red and blue. This sometimes leads to severe degradation of image quality =\ We'll get more in depth about this in the next section about image files.
Finally, by putting all these elements together (size, face, color), we will have quite a bit of flexibility when putting text on a web page. It is possible to use more than one parameter in a TAG (in any order). Something like <font face="Arial" size="2" color="Red"> would be perfectly ok.
Gradient Effects - the rainbow room
This is the motherlode of font color effects! The RGB color table above is an example of a gradient of colors, where any or each color of the spectrum gradually shifts hue (see the red column change from black to bright red).
It can be cheesy if overused, but if you like gradients, head over to our scriptorium to view/download a JavaScript that creates text with pizazz or this handy-dandy gradient creator using solely cut-and-paste HTML for your pages.
[Gradient Generator]
Horizontal Rule
The <hr> tag has several allowable parameters: color, size, width, align and noshade. Size affects it's vertical "thickness." Let's compare this to the default <hr> tag; by default, the horizontal rule is transparent [blends in with the background color of the page], uses shading to achieve a simple imprint effect and has a size of 2. This is how it looks:
Now, let's experiment with changing it's size:
| Code | What you see in the browser |
| <hr size="1"> |
|
| <hr size="2"> |
|
| <hr size="3"> |
|
| <hr size="4"> |
|
| <hr size="5"> |
|
| <hr size="6"> |
|
| <hr size="7"> |
|
The width parameter affects it's horizontal length (how far it stretches across the screen). With this we can control it absolutely (by using pixel numbers) or relatively (by using percentages).
Let's make it 100 pixels wide:
| Code | <hr width="100"> |
| What you see in the browser |
|
Maybe you want to make it 1/2 the width of the browser window? That would definitely depend on what the width of the browser window is right now wouldn't it ? :) Well, the surefire solution: just say that the width of the horizontal rule is 50% of the screen (out of 100%).
| Code: <hr width="50%"> |
|
|
If you didn't set your background to a different color (other than the default one that your browser displays) you will be able to specify a color for your horizontal rules (Netscape 4.03- may not render properly if a different background color is specified). Otherwise, it will turn out to be the same color as your background. Let's now specify what color it should be. <hr> works like the font tag in which you simply name the color. For example, <hr color="Red"> produces this:
If we turn off the shading, we could produce a solid red line like this: <hr color="Red" noshade>
A useful set of tags, in my opinion, are the heading tags. They are in the form of <H#> where # is an integer 1-6. In essense, they basically give you the combined effect of: <font size="7-#"><b>Text</b></font><p> in a compact "shortcut" tag. The purpose? The # denotes the importance of this marked up text (with 1 being the most important and large)
| Code | What it looks like in the browser |
| <H1>Text</H1> | Text |
| <H2>Text</H2> | Text |
| <H3>Text</H3> | Text |
| <H4>Text</H4> | Text |
| <H5>Text</H5> | Text |
| <H6>Text</H6> | Text |
And that wraps up our introductory HTML tutorial! I hope it has been enlightening for you (novice and veteran HTML coders alike). As you progress through the sections, expect to learn things you'll be hard-pressed to find anywhere else. I've done my fair share of research on this topic, and I intend to prove exactly that :)
Last Updated August 10, 1999
