Web Authoring FAQ: Presentational Effects

This document answers questions asked frequently by web authors. While its focus is on HTML-related questions, this FAQ also answers some questions related to CSS, HTTP, JavaScript, server configuration, etc.

This document is maintained by Darin McGrew <darin@htmlhelp.com> of the Web Design Group, and is posted regularly to the newsgroup comp.infosystems.www.authoring.html. It was last updated on October 20, 2001.

Section 7: Presentational Effects

How can I make a custom rule?
How can I make a list with custom bullets?
Where can I get a "hit counter"?
How do I display the current date or time in my document?
How do I get scrolling text in the status bar?
How do I right align or justify text?
How do I indent the first line in my paragraphs?
How do I indent a lot of text?
How do I eliminate the margins around my page?
How do I do a page break?
How can I have a custom icon when people bookmark my site?

The following questions have moved to other sections of the FAQ.

9.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]

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

There are several methods, none completely satisfactory:

Use the list-style property of Cascading Style Sheets. This should be the preferred method of using custom bullets, but unfortunately it's not widely supported by browsers. However, non-supporting browsers will see a normal bullet, so using this method today is not a problem. See <URL:http://www.htmlhelp.com//reference/css/> for more information on style sheets.
Use a <DL> with <DD> tags with preceding images (with ALIGN and suitable ALT text) and no <DT>; this won't be as beautiful as a "real" list.
Use a two-column table, with the bullets in the left column and the text in the right. Since browsers show nothing before downloading the entire table, this can be slow with long lists.
Create the bullet with the indent built in. For example, if you use a bullet that is 10 pixels across you can make the background 25 pixels (transparent) and put the bullet all the way on the right. This will create a 15-pixel indent to the left of the bullet. It will add slightly to the byte size of the graphic but since it is all one color it won't add much. This method doesn't work well with any list items that are longer than a line (and remember that you don't know how long a line will be on the visitor's screen).

[Table of Contents]

9.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://dir.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Programming/Access_Counters/

A discussion of the limitations of web-traffic statistics is at <URL:http://www.goldmark.org/netrants/webstats/>

[Table of Contents]

9.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]

9.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]

9.6. How do I right align or justify text?

The HTML solution is to use the ALIGN="right" attribute on paragraphs, divisions, headings, etc. This will right align your text (ragged left). Note that the ALIGN attribute is deprecated by HTML 4 in most contexts.

The CSS mechanism is to use the text-align: right property in your ruleset. This example right aligns all paragraphs with the class="note" attribute:

p.note {text-align: right}

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".) This presentation can be suggested in HTML with the ALIGN="justify" attribute. This CSS example justifies all paragraphs with the class="adcopy" attribute:

p.adcopy {text-align: justify}

Before you justify text, there are some caveats. Although justified text may look pretty, human factors analysis shows that ragged right is actually easier to read and understand. Furthermore, browser bugs and poor implementations may further reduce the legibility of your text.

For more information, see <URL:http://www.cs.tut.fi/~jkorpela/www/justify.html>.

[Table of Contents]

9.7. 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]

9.8. 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]

9.9. How do I eliminate the margins around my page?

The most appropriate way is to use a style sheet to specify margin and padding properties. More information about Cascading Style Sheets can be found at: http://www.htmlhelp.com//reference/css/

With proprietary HTML extensions, you can set the margins for certain browsers. Internet Explorer 3+ supports the TOPMARGIN and LEFTMARGIN attributes. Internet Explorer 4+ added support for the BOTTOMMARGIN and RIGHTMARGIN attributes. Navigator 4+ supports the MARGINWIDTH and MARGINHEIGHT attributes. Most other browsers ignore these proprietary extensions.

CSS and proprietary HTML can be combined. The following is effective in most browsing situations:

<body marginheight="0" topmargin="0" marginwidth="0" leftmargin="0" style="margin:0;padding:0">

More information is available at <URL:http://www.cs.tut.fi/~jkorpela/www/margins.html

Also note that Navigator always leaves room for a scrollbar on the right, but draws the scrollbar only when the document is long enough to require scrolling. If the document does not require scrolling, then this leaves a right "margin" that cannot be removed.

[Table of Contents]

9.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]

9.11. 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 a 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, see <URL:http://msdn.microsoft.com/workshop/Author/dhtml/howto/ShortcutIcon.asp> or search for "favicon.ico" at <URL:http://msdn.microsoft.com/workshop/essentials/versions/ICPIE5.asp>

[Table of Contents]

Copyright © 1996-2001 by the Web Design Group. This material may be distributed only subject to the terms and conditions set forth in the Open Publication License, v1.0 or later (the latest version is presently available at http://www.opencontent.org/openpub/).