Tips from the Webster

Outline

My offerings
Image Maps
Text & background color
Browser characteristics
Getting it to look good at AOL
General HTML info still under construction
Web Masters
Graphics in the Web
News on and about the Web


Building Image-Maps for Your Web Site


An image-map is a cgi-bin document containing first a default http:(full URL for a non-hit), then a string of shape names linked to their coordinates and the full URL to correspond to, each entry separated by a line feed. My circles didn't want to work, so all my lines read like this:
  • rect http://planet-hawaii.com/~planet/he.html 20,121 27,128
where the two point references are the upper left and lower right corners of the hot zone. One way to determine their value is to view your document locally (at least it works with Netscape) with your gif set up as an image-map - in my case it looks like this:
  • <a href="world.gif.map"><img height=315 width=617 src="world.gif" ismap border=0></a><br>
and read the coordinates off from the box at the bottom of the window. For operational purposes with our server, the upload version of this line is:
  • <a href="/cgi-bin/imagemap/user/mslavin/world.gif.map"><img height=315 width=617 src="world.gif" ismap border=0></a><br>
New notes on imagemaps: WebMap today allowed me to create a hot zone with a lefthand coordinate of -1, which resulted in a nonfunctioning zone. When I changed the number to zero, it did function and allowed me to perform my experiment and confirm my guess: If a pair of zones overlap, the one closest to the top of the list is activated. (Thus, I can add regional defaults to the end of the .map file.)

Making image-maps is reduced to a graphical process by WebMap ($20 shareware), though I've needed to use a few ResEdit fixes... The simplified version of the results of my putzing is:

  • 1. Make picture in a Draw format unless you expect instant perfection from yourself. Save the drawing in a safe place.
  • 2. Convert copy to gif so WebMap can use it. Open it in WebMap and draw objects and fill in their links. I (will now) save my WebMap gif as PicName.gif.webmap so when I'm foolish enough to move a new gif into the folder it won't overlay the file with the map resource attached. Save often...
  • 3. Export text file of map in NCSA format (in our case and probably yours - check with the administrator.) Name it gifName.map where gifName is any arbitrary name that makes sense to you.
  • 4. (This step is crucial on a Mac platform, since we use a return character rather than a line-feed) Take the finished HTML page referencing the map image, and the .map file (text list of default and links) and change the return characters to line-feeds. I drop both on PlainText, choose the appropriate item from the Convert menu, save and quit. Several other text applications, usually for the sake of internet savvy, have this feature, but the word processor I like to use as an HTML editor (WriteNow) does not. As for why this is necessary - the .map file is used as, I suppose, a UNIX code file by the server in order to resolve the click into a URL. Why the page of HTML need the same treatment I haven't the foggiest idea, but it won't work without it.
  • 5. Upload the .map, .gif (not the gif.webmap!) and HTML files and bug the system administrator or sysop for a pointer to it.
  • 6. Check it out. Online. The server does the map processing, not Netscape, so local viewing doesn't work.
  • 1a. Add or delete something in your drawing. Thank god it wasn't a painting instead.
  • 2a. Convert it to a gif IN A DIFFERENT FOLDER so WebMap can use it. Use ResEdit to copy the resource from the old gif and stick it on the new one, so you don't have to put all those URLs in again.
  • ...Repeat steps as needed. I had WebMap crash a number of times and wipe out lotsa work every time, so save often and save time. Once the pointer is in the server, things will keep working until the name or location of the .map changes. And once the first pointer is engineered, new ones (for new image-map documents) simply get added to the list in the server's config file.

Text and Background Colors


HTML 3.0 supports defining of colors for the background and text in a document. Netscape currently supports these definitions as part of the document body tag:
  • bgcolor=#(color) to fill the background of the entire document.
  • text=#(color) defines the color of general text.
  • link=#(color) defines the color of hyperlink text items and linked-image bounding boxes, prior to following the link.
  • vlink=#(color) (visited link) defines the color of hyperlink text items and linked-image bounding boxes, after following the link.
  • alink=#(color) (active link) defines the color of hyperlink text items and linked-image bounding boxes, while being activated or clicked on.
In all cases (color) is specified by a 6-digit hexadecimal number where the digits represent RRGGBB, the red/green/blue composition of the color, with 16*16 or 256 choices for each. An example is the body tag for this document:

<body bgcolor="#f6e1f1" text="#8f2c00" link="#460090" vlink="#ac1c21" alink="#d41c00">

I found that trying numbers at random, more or less, gave less than satisfying results! I determined that an exact color may be found as follows:

  • Open a RGB color wheel somewhere. I like to use SimpleText enhanced with the wonderful ColorMenu (which includes a ton of other goodies) by Alessandri Levi Montalcini (freeware). It uses alot less memory than a fancy graphics application, and likewise launches very fast. A real bonus is its big color wheel.

News Flash! As of Aug 9, HTML ColourTool version 2.0 probably makes the following segment obsolete. It gives the Hex code directly from the same big color wheel! It's $10 shareware though, and ColorMenu is still really great and free.

  • I type 5 big apples (Chicago opt-shift-K or control-T) to serve as swatches and, selecting one, play with its color by choosing "other" from the Color menu, and using the RGB model. The color needs to be specified by only these three numbers.
  • When I get them where I want, I note the RGB percentage composition, and multiply each by 256, using a calculator (like MegaCalculator) that will show the result in hex form. The hex results are then noted in the SimpleText document for future reference, and placed in the HTML body tag and tested locally.
Another very nice tool that develops some really nice effects and colors, and has a user interface you really don't want to miss, is HTML Special Effects by Tim Howland, an incredible shareware deal at $5.

What's my Web Page Look Like on Another Browser?

The variety of rendering specifics among the current browser choices is amazing. In my own pages I have hybridized HTML style in order to improve rendering on two particular browsers. Yesterday I viewed my results in yet a third, and found that in a number of cases the page was unreadable or just not rendered at all. A wider survey showed that there is far more variation than I had ever dreamed. While I'd like to look great in all situations, I don't know if it is possible. I am currently choosing to simply record my observations here.

In my choices of how to introduce formatting tags, I try to keep in touch with such information as may be found at Bob Allison's Web Survey Averages and have interpolated the results to adjust for the newness of America Online's Web Browser.

Browser and features apparently supported:   transparent
                           bkgcolor  tables  GIFs        other notes
--------------------------------------------------------                        
Netscape 1.1N (Mac)             yes   yes   yes
AOL Web Browser 1.0 (Mac)       yes   no    yes          
AOL Web Browser (?current Win)  no    no    yes
Mosaic: Enhanced 1.022 (Mac)
           "Ventana"            no    no    yes
        "Spry" (?current Win)   no    no    yes
        Fat 2.0.0 B7 (Mac)      no    yes   yes   poor tolerance for my jumbled tags, and
                                                  for comments enclosing other tags.
While the newest Netscape 2.0b1 provides a wealth of new and cool features, it is a bit too buggy still to enjoy local document viewing with.

Please note: all standard disclaimers apply regarding trademarks, product endorsement, etc. These observations are my own alone and intended only for news, research, and informational purposes only. They may be erronious (if so please email me!) and in no way reflect any opinion or responsibility of ICNet.


Getting a Web Page to Look as Good as Possible on America Online's Browser

Well, I may not be an expert at all this yet, but in order to preserve my own experience with this inter-browser tweaking stuff I shall do my best to present my notes here. First, let me say that I went to great lengths to get my web site looking as I wanted it to on Netscape, while trying to follow various recommendations in the literature on the web. It was quite a shock to see the results of my work via AOL's brand new browser. It doesn't seem to support tables or font sizes, and I had lots of that stuff in my markup. So here's the notes, until I get to revise them:
  • OK, let's start with lists. My Netscape code was, for one reason or another, rather sloppy in this regard, but since tables are not supported at AOL, lists need to have end tags! I place them between the </td> and <td> tags,or the </tr> and <tr> tags, since Netscape inserts an implied <p> at the end of a properly terminated list. Now Netscape ignores the </ul> tag just as AOL ignores all the table markup. I don't like extra space inside the bottom of a table, and prefer to get as much on my monitor as I can wihout needing to scroll the page.
  • Since table formatting is ignored, I've had to figure out where to put in lots of <br> markers in such a way that Netscape will ignore them. I usually put them just before the </table> tag or in the same place as the </ul> tag (see above).
  • Sometimes all the text in a document, at least viewed locally, is in monospaced type. The reason is that, seemingly at random, the AOL browser inserts a <PRE> tag at the beginning of a document. Check the "View Source..." menu option if you experience this. I've inserted a few leading </pre> tags to correct this glitch, and some have probably remained in the text.
  • Sometimes a little line appears trailing a graphic. I don't know if it happens in a nonMac environment, but the damn thing is a RETURN character, stuck in to make the text at my workstation more readable. They should be ignored by the browser, but they're not. I've now deleted all of them, running the text together in a clump. As with the previous note, I have no idea if this is a local-viewing-only problem.
  • While my transparent-background GIFs seem to work fine *locally*, they don't coming back over the wire. I reworked my buttons to match the background color of the page, and then made *that* the transparent color. Note: Transparency in a remotely viewed gif is often restored by reloading the page.
  • Addendum: It's a while since I wrote the above lines, and I have since trashed many of my list items and inserted a series of bullets in graphcs form. Oh, well. I get about twice as much info in the window of outmoded browsers this way.
I'm sure there are a few caveats I've neglected to get in here, like the precise nesting order of some of these things, but check out my source code and please be kind. Rule Number One for "Good HTML" is to attempt to present a document that is passably attractive in all browsers. I really liked the way my pages looked in Netscape before I made these changes, but considering that AOL is possibly the second most popular platform today, I suppose I can live with a few imperfections.
home index Xrefs mail Netscape tips Macintosh tips HTML tips Netsurfing... Shopping... eZines

5 November 1995 mslavin@shore.intercom.net

RSVP Any and all feedback is encouraged and will be answered!
Many thanks to ICNet for providing this opportunity for me to join the growing www community.