=========================================================================== Today on The World Vol. 4 #144 Wednesday, June 3, 1998 =========================================================================== And so it continues... Chapter 3 of the potentially endless HTML tutorial. By the way, those of you who are reading this with programs that "render" embedded HTML tags (such as Eudora, Netscape Communicator, Internet Explorer) may run into the problem of your program rendering the example HTML tags in these tutorials. If it seems like words and examples are missing from these tutorials, or if it has strangely garbled formatting, then you should try (a) disabling the rendering of HTML in your program, or (b) save these tutorials to disk and look at them with a text editor (such as WordPad or SimpleText). (kibo) --------------------------------------------------------------------------- Today I'm going to use Chapter 3 of the HTML tutorial to talk about something that many purists don't consider "proper" HTML -- changing the fonts and colors in other people's browsers -- but I know you want to know this, and hey, you can't break anything. (Basically, some people don't like the tag because it was invented by one of the browser manufacturers, not by the actual W3C standards body, and because a lot of people use it tastelessly to make really ugly ransom-note-style pages.) Some of the stuff in this chapter is rather cryptic (particularly the hexadecimal color numbers), but if you're having trouble grasping it, don't worry -- you don't HAVE to change colors or fonts on your Web page. (Most information looks okay displayed in plain letters.) If Chapter 3 gives you a headache, you can just skip ahead to Chapter 4. HTML TUTORIAL -- CHAPTER 3 -- COLORS & FONTS 3.1 COLORS Here's another skeletal page to start with. Please paste this into a new window in your text editor and save this new Web page as fancypage.html: Fancy Page.

Hello, World!

I am having fun learning HTML.

Those of you with photographic memories will recognize it as the same old "skeleton" we started with in Chapters 1 & 2, with different text. Eventually when we get to the advanced topics you'll learn about the document structure of HTML (what the , , and tags are for, etc.) but currently we're still just working on putting text on the page and styling the text. Anyway, try viewing fancypage.html with your browser. Nothing fancy about that, is there? What color background does it have in your browser? Because the HTML doesn't request any particular color, you get your browser's default color (it might be dove gray, white, beige, baby blue, or anything else--you can change your browser's preferences. I like a slightly yellowish parchment color, myself.) But you've probably seen a lot of pages where the text is in funny colors. Let's colorize ours. Change the tag to: View fancypage.html and see what happens. Now try changing it to: Yuk! Notice how we're doing this: optional "BGCOLOR" and "TEXT" color attributes in . (Incidentally, these options were not in the original HTML standard, but most browsers know them.) The colors themselves are specified as "#RRGGBB", where the color is three pairs of hexadecimal digits corresponding to red, green, and blue values. (Don't worry about what that means if you don't know; there's a color chart later on.) In addition to picking a color for the whole of the page (every page has one and only one ), we can change colors within the document as well, with the tag (which is not supported by the earliest browsers.) Change the line to this: and add these paragraphs below the "I am having fun" line:

This page should be dark brown with bluish text, except where I temporarily change it with "FONT" tags.

Text text text text red text text text text green text text text.

Now view mypage.html with your browser, and if all went well, you should have a few words in different colors on your page. How does this work? Well, FONT COLOR="#RRGGBB" changes the color of the text temporarily. Think of it like ... or ...: you should use it only within a paragraph. (If you want to change the color of ALL the text on the page, the color code would go in .) Those of you who have worked extensively with computer graphics will be able to pick RGB triplets (well, sextuplets in HTML's case) out of your head to make whatever color you want, but for those who are baffled by this "#663300 equals brown" business, here's a chart of some of potentially useful combinations. Please paste this into fancypage.html after the last paragraph of text and view it in your browser:

    White             FFFFFF
    Very Light Gray   CCCCCC
    Light Gray        999999
    Dark Gray         666666
    Very Dark Gray    333333
    Black             000000
    Deep Red          990000
    Red               FF0000
    Orange            FF9900
    Yellow            FFFF00
    Yellowish Green   99FF00
    Dark Green        009900
    Green             00FF00
    Light Green       99FF99
    Bluish Green      00FF99
    Bright Cyan       00FFFF
    Baby Blue         9999FF
    Light Blue        6666FF
    Blue              0000FF
    Dark Blue         000099
    Purple            9900FF
    Magenta           FF00FF
    Pink              FF9999
    Tan               CC9966

If those 24 are all the colors you'll ever need (ha), you can just pick them from my list above. If you feel adventurous, try making your own hexadecimal #RRGGBB combinations. (The ones I listed above are among those guaranteed to work on computers that only display 256 colors.) For some useful charts of hundreds of HTML colors, see The World's help area: http://world.std.com/help/web/colortable-small.shtml http://world.std.com/help/web/colortable-big.shtml On computers (Windows or Mac OS) that are displaying a maximum of 256 simultaneous colors there are only 216 "Web-safe" colors that are guaranteed to be available. Those colors consist of any combination of "00", "33", "66", "99", "CC", and "FF", as in "#0066FF". In other words, there are only six luminances of red, six of green, and six of blue -- thus six of gray -- which are guaranteed to be available on all computers. Intermediate colors, such as "#816B34", would display slightly off-color on computers that are limited to 256.) NOTE 1: The numbers should have quote marks around them and any letters in the hexadecimal values (A through F) should be capitalized. Why? Because I've come across at least one browser that doesn't like COLOR=#ffffff and needs COLOR="#FFFFFF". And yes, the # sign is mandatory. NOTE 2: Some Web browsers support a set of named colors, such as . While these make it easier to design pages if you can't process hexadecimal numbers in your head, every browser has its own set of color names. One of the most popular browsers doesn't support ANY color names. (It turns out that WebTV supports more color names than anything else.) So you should stick to hexadecimal numbers if you want everyone to see your colors. If you pick a background color for the page (BGCOLOR in ) you should also pick a text color (TEXT) that contrasts with it, as you don't know what the defaults in other people's browsers are. In other words, don't make the letters white unless you also make the background dark, because other people might have their browsers set to white backgrounds. (You should set both options or neither.) You may also pick the colors of links (LINK), visited links (VLINK), and the color which links flash when they are clicked (ALINK). Change the line to this to see a plain gray background with black text, blue unvisited links and purple visited links: (If you want to see the link colors in action, either add some ... links yourself, or copy some of the examples from Chapter 2.) 3.2 FONT SIZES , as I mentioned a while ago, is not a completely standard tag. While it is being integrated with HTML standards, it is not recognized by the earliest browsers--and current browsers have different degrees of support. (It works in the last few versions of Netscape Navigator and Microsoft Internet Explorer.) You can use it to change colors, sizes, and typefaces. Try adding this to fancypage.html and see what happens:

My text is bigger and biggest and smaller and smallest... if this works.

Size 7.

Size 6.

Size 5.

Size 4.

Size 3.

Size 2.

Size 1.

The font sizes in HTML are not numbered the same as typographers are used to: there are no sizes "12-point" or "24-point". This is because the person looking at your page can choose what the default size is. You can make your type larger or smaller relative to your reader's default size, with a total range of seven to choose from. These sizes are numbered from 7 (biggest, like

) to 1 (smallest) with 3 being normal size. There's a second, slightly less obscure way to pick sizes: Instead of remembering "7 equals

", you can use positive or negative offsets from the standard size, that is, +4 (biggest) through -2 (smallest). In other words, you can request up to "four sizes above normal" down to "two sizes below normal".

Plus 4.

Plus 3.

Plus 2.

Plus 1.

Normal.

Minus 1.

Minus 2.

Try viewing that and see what happens if you change your browser's settings to use a larger or smaller default font. Clear as mud, no? If you don't want to think about such things, there's always the and tags, which do the same thing as changing to the +1 and -1 sizes, in a more elegant way:

This paragraph has some big type in it and some small type in it.

I like that method because it doesn't require using ..., so I can turn it on and off without interrupting the other thing I'm using for: changing typefaces. 3.3 TYPEFACES HTML is not PageMaker. Although you can more or less change typefaces and font sizes, you can never quite be sure what will come out the other end. This is because the purpose of the Web browser is to show your information to other people formatted however they need: their screen or window WILL (not may, WILL) be a different size than yours, they will have different defaults, and they will have different fonts installed. So keep in mind that the more elaborate your Web typography becomes, the more testing you'll want to do with different browsers, different window sizes, different computers, etc. to see how your page changes from browser to browser. In HTML, you can choose a particular typeface (such as Helvetica, Palatino, Arial, Garamond, etc.) with the tag, but because you never know what typefaces other people have installed, you can (and should) specify a "wish list" with the typeface you really want first, followed by some others that might substitute if it's not available. (The list should generally end with some typefaces which are readily available.) Try adding these paragraphs to fancypage.html:

This paragraph should be in a serif font, preferably Baskerville. If not Baskerville, Times New Roman. If that font can't be found, it'll try to use Times. If there's no Times, then Palatino. If no Palatino, New York.

Not all computers have the same fonts, so you should always specify some alternatives if you use FONT FACE tags. If none of the fonts in the list is available, the browser will use some default font.

This paragraph should be in a sans-serif font, preferably Futura. Macs come with Times, Helvetica, and Geneva, and Windows comes with Times New Roman and Arial, so these two lists of fonts include the basic serif and sans-serif fonts to help increase the probability that we're trying to use one that the other people have.

Results are not guaranteed to be the same as what I saw when I tested this (in fact, I can promise that I have fonts installed that you don't have) but notice that each of the two lists of desired fonts ends with "standard" ones: the first list, where I'm trying to select a roman typeface (Baskerville) ends with the standard Windows roman fonts (Times New Roman) and the standard Mac roman fonts (Times, Palatino, New York) because I know that most people haven't bought Baskerville. The second list, where I'm trying to find a sans-serif font (Futura) ends with the standard Windows sans-serif font (Arial) and the Mac sans-serif fonts (Helvetica, Geneva). Note that names must be matched exactly, which is why I look for three different incarnations of Futura. In terms of the HTML "rules", ... is supposed to go within a paragraph (such as

...

). But if you have a particularly long "wish list" of typefaces, turning this on at the start of every paragraph and off at the end of each gets tedious (not to mention wasting download time for all those long redundant lines.) So sometimes I violate the rule and put one ... around ALL the text paragraphs on my pages, even though that's technically non-kosher. (That also means that I have to use and to change sizes, since if a ever showed up I'd lose my choice of typefaces.) So if you put ... outside your

...

groups, be warned that things may get a little weird. (In fact,

...

doesn't work correctly inside ... . That's all for Chapter 3. Chapter 4 will talk about background images and regular images, and how to link them. In other words, we're just about to get to the good stuff... (kibo) ========================================================================== [] Send suggestions for tips & URLs to today@world.std.com. We're also collecting links for our Web pages at eyeguy@world.std.com. [] To contact CUSTOMER SUPPORT, send mail to support@world.std.com or call 617-739-0202. [] To subscribe to the "Today" mailing list, send a note saying 'subscribe announcements' to majordomo@world.std.com. Subscriptions to this mailing list are open to World customers only. [] Rambo is VERY happy today. He got goldfish! [] Today on The World is (C) Copyright 1998 by Software Tool & Die. Its contents may freely be redistributed as long as credit is given.