The Web Design Group

Web Authoring FAQ: Presentational Effects


This list of Frequently Asked Questions is maintained by the WDG and was last updated on November 29, 1999. It may be found at the following URLs:

If you would like to contribute to this FAQ, please send mail to <darin@htmlhelp.com>. All contributors will be listed at the bottom of the FAQ.

6. Presentational Effects

  1. How can I make a custom rule?
  2. How can I make a list with custom bullets?
  3. Where can I get a "hit counter"?
  4. How do I display the current date or time in my document?
  5. How do I get scrolling text in the status bar?
  6. How do I right align text or images?
  7. How can I specify fonts in my Web pages?
  8. How do I indent the first line in my paragraphs?
  9. How do I indent a lot of text?
  10. How do I do a page break?
  11. How do I have a fixed background image?
  12. How do I have a non-tiled background image?
  13. How can I have a custom icon when people bookmark my site?

6.1. How can I make a custom rule?

Your best option is likely a centered IMG with a line of "--" characters as ALT text:

<P ALIGN=center><IMG SRC="custom-line.gif" ALT="--------------------"></P>

For an experimental but somewhat more graceful approach, read about CSS1 and the Decorative HR at <URL:http://ppewww.ph.gla.ac.uk/%7Eflavell/www/hrstyle.html>.

[Table of Contents]

6.2. How can I make a list with custom bullets?

There are several methods, none completely satisfactory:

[Table of Contents]

6.3. Where can I get a "hit counter"?

A hit counter is a small script or program that increases a number every time a document is accessed from the server.

Why do you want one? If you believe that it will tell you how many times your documents have been accessed, you are mistaken. No counter can keep track of accesses from browser caches or proxy caches. Some counters depend on image-loading to increment; such counters ignore accesses from text-mode browsers, or browsers with image-loading off, or from users who interrupted the transfer. Some counters even require access to a remote site, which may be down or overloaded, causing a delay in displaying your documents.

Most web servers log accesses to documents stored on the server machine. These logs may be processed to gain information about the *relative* number of accesses over an extended period. There is no reason to display this number to your viewers, since they have no reference point to relate this number to. Not all service providers allow access to server logs, but many have scripts that will output information about accesses to a given user's documents. Consult your sysadmin or service provider for details.

Counter services and information are available from Yahoo's list of counters: http://www.yahoo.com/Computers/World_Wide_Web/Programming/Access_Counts/

Log analysis tools and scripts are at http://www.yahoo.com/Business_and_Economy/Companies/Computers/Software/Internet/World_Wide_Web/Log_Analysis_Tools/

<URL:http://www.markwelch.com/bannerad/baf_counter.htm> is another good source for counter information.

A discussion of the limitations of web-traffic statistics is at <URL:http://www.cranfield.ac.uk/docs/stats/>

[Table of Contents]

6.4. How do I display the current date or time in my document?

With server-side includes. Ask your webmaster if this is supported, and what the exact syntax is for your server. But this will display the local time on the server, not for the client. And if the document is cached, the date will of course be incorrect after some time. JavaScript can be used to display the local time for the client, but again, as most people already have one or more clocks on their screen, why display another one?

If you plan on putting the current date or time on your pages, using a CGI, JavaScript or VBScript, take an extra breath and consider that it will take resources, add time to the loading of the page, and prevent good caching. If you find that you really have a need to use it, for instance to inform readers of the up-times of an FTP server, then by all means do so. If, on the other hand, your only reason is 'it looks cool!' - then reconsider.

[Table of Contents]

6.5. How do I get scrolling text in the status bar?

This is not an HTML question; it's done with JavaScript. Check any page which has this feature, and copy the script from the source.

This script has two big problems. One, usually it uses the decrement operator (c--) at some point. The "--" sequence in a comment actually closes it on some browsers, so your code may "leak" on those browsers. The same goes for ">".

Second, keep in mind that many people consider this even worse than <BLINK>, and that it also suppresses the status information which normally appears there. It prevents people from knowing where a link goes to.

[Table of Contents]

6.6. How do I right align text or images?

You can use the ALIGN=right attribute on paragraphs, divisions, and headers, just as you use ALIGN=center to create centered paragraphs and such. This will right align your text (ragged left).

Perhaps what you really want is justified text, in which the left and right edges are both aligned so that all lines are the same length. (This is sometimes incorrectly called "right justify".) There's no way to justify text in HTML 3.2, but it can be done in a CSS1 style sheet with "text-align: justify". (Before you do that, a caveat: though justified text may look pretty, human factors analysis shows that ragged right is actually easier to read and understand.)

For images, you can use <IMG ALIGN=right SRC="..." ALT="..."> before the running text. The image will float at the right margin, and the running text will flow around it. Remember to use <BR CLEAR=right> or <BR CLEAR=all> to mark the end of the text that is to be affected in this way.

[Table of Contents]

6.7. How can I specify fonts in my Web pages?

If you want others to view your web page with a specific font, the most appropriate way is to suggest the font rendering with a style sheet. See: http://www.htmlhelp.com/reference/css/font/font-family.html

The FONT element can also be used to suggest a specific font. Use of the FONT element brings numerous usability and accessibility problems, see: http://www.mcsr.olemiss.edu/%7Emudws/font.html

More information about the FONT element can be found at: http://www.htmlhelp.com/reference/html40/special/font.html

Either way, authors run the risk that a reader's system has a font by the same name but which is significantly different. (e.g., "Chicago" can be a nice text font, or a display font with letters formed by "bullet holes", or a dingbat font with building images for creating skylines).

Also, authors are limited to choosing a font (or a group of similar fonts) that are commonly available on many systems. If a reader does not have the font installed on their system, they will see a default font. Some browsers may use a less legible substitute font than their normal default font in cases where "the specified font wasn't found".

[Table of Contents]

6.8. How do I indent the first line in my paragraphs?

Use a style sheet with the following ruleset:

P { text-indent: 5% }

See <URL:http://www.htmlhelp.com/reference/css/> for more information on style sheets.

[Table of Contents]

6.9. How do I indent a lot of text?

Use a style sheet to set a left margin for the whole document or part of it:


  /* Entire document */
  BODY { margin-left: 20% }

  /* Part of a document with CLASS="foo" */
  .foo { margin-left: 15% }

See <URL:http://www.htmlhelp.com/reference/css/> for more information on style sheets.

[Table of Contents]

6.10. How do I do a page break?

Page breaks are offered in Cascading Style Sheets, Level 2, but they are not well supported by browsers. See <URL:http://www.w3.org/TR/REC-CSS2/page.html#page-breaks> for information on CSS2 page breaks.

In general, page breaks are not appropriate on the Web since what makes a nice page break for you with your font and font size may be a poor page break for me with my font and font size.

If you need to produce a nicely formatted printed copy of your HTML documents, you might also consider using special purpose tools rather than your browser's Print function. For example, html2ps generates nicely formatted PostScript output from HTML documents, and HTML Scissor uses special HTML comments for suggesting page breaks.

[Table of Contents]

6.11. How do I have a fixed background image?

Use a style sheet with the following ruleset:

body { color: black; background: white url(foo.gif) fixed }

Note that the fixed property used in the above style sheet is supported by Internet Explorer 3+, Netscape Navigator 5+, and other browsers. In contrast, the proprietary BGPROPERTIES=fixed attribute is supported only by Internet Explorer 3+.

[Table of Contents]

6.12. How do I have a non-tiled background image?

Use a style sheet with the following ruleset:

body { color: black; background: white url(foo.gif) no-repeat }

[Table of Contents]

6.13. How can I have a custom icon when people bookmark my site?

This is a feature introduced by Internet Explorer 5.x. By default, the browser requests an file named "favicon.ico" at the same base URL as the document being bookmarked. If it doesn't find this file, then it will try again in the root directory of your site. Web authors can specify a different path for the icon file with a <LINK> element like this: <LINK REL="SHORTCUT ICON" HREF="/pathname/filename.ico">

The image should be 16 by 16 pixels, in the Windows icon format. If your graphics program doesn't support the Windows icon format, you can use a tool like the free Java-based icon generator at <URL:http://www.favicon.com/> to convert/create your icon.

For further information, search for "favicon.ico" at <URL:http://msdn.microsoft.com/workshop/essentials/versions/ICPIE5.asp>.

[Table of Contents]


For additions or omissions to this FAQ, please contact <darin@htmlhelp.com>.

All information contained herein was originally compiled by members of the Web Design Group, principally Arnoud "Galactus" Engelfriet, John Pozadzides, and Darin McGrew.

Additional input has been provided by Boris Ammerlaan, Lori Atwater, Alex Bell, Stan Brown, Roger Carbol, Alex Chapman, Jan Roland Eriksson, Jon Erlandson, Mark Evans, Alan Flavell, Lucie Gelinas, Bjoern Hoehrmann, Tina Marie Holmboe, Peter Jones, Nick Kew, Jukka Korpela, Simon Lee, Nick Lilavois, Neal McBurnett, Glen McDonald, Dan McGarry, Ken O'Brien, Timothy Prodin, Steve Pugh, Liam Quinn, Colin Reynolds, Kai Schätzl, Doug Sheppard, Sue Sims, Toby Speight, Warren Steel, Ian Storms, Peter Thomson, Daniel Tobias, and Diane Wilson.

Thanks everyone!


Home, Reference, FAQs, Tools, Design, Feature Article, BBS, Links

Copyright © 1996-1999. Web Design Group All rights reserved.