The Web Design Group

Web Authoring FAQ: Presentational Effects


English - Nederlands - Français
Table of Contents - Entire FAQ (HTML) - Entire FAQ (Text)
Previous Section - Next Section

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 April 26, 2007.

Section 8: Presentational Effects

  1. How can I make a list with custom bullets?
  2. How can I make a custom horizontal rule?
  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 or justify text?
  7. How do I indent the first line in my paragraphs?
  8. How do I indent a lot of text?
  9. How do I eliminate the margins around my page?
  10. How do I do a page break?
  11. How can I have a custom icon when people bookmark my site?
  12. How do I get an audio file to play automatically when someone visits my site?

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

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

There are several methods, none completely satisfactory:

See also

8.2. How can I make a custom horizontal 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>

See also

8.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.

See also

8.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 (or GMT/UTC), not the local time 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.

8.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.

8.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.

See also

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

Use a style sheet with the following ruleset:

P { text-indent: 5% }

See also

8.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 also

8.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.

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">

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.

See also

8.10. How do I do a page break?

You can use a style sheet to specify page breaks. However, while page-break-before is fairly well supported by current browsers, other page-break properties (and values for page-break-before other than always) are poorly supported.

Be cautious when specifying page breaks on the Web. Differences in printing environments (fonts, font sizes, paper size, printer margins, etc.) will change the ideal locations for page breaks.

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.

See also

8.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.

See also

8.12. How do I get an audio file to play automatically when someone visits my site?

Most browsers support the EMBED element for this, provided that the user has a suitable plug-in for the sound file. You can reach a slightly wider audience if you use BGSOUND as well. To avoid problems with browsers that support both, place the BGSOUND in a NOEMBED container:

<embed src="your_sound_file" hidden=true autostart=true>
<noembed><bgsound src="your_sound_file"></noembed>

Note that these elements are proprietary and not in any HTML standard. (The HTML standard way of doing this is not well supported.)

Be aware that some users find it annoying for music to automatically start playing. They may not have the volume set properly on their speakers, or they may be listening to something else. As a courtesy to your users, you may prefer to offer the sound file as a link:

<a href="your_sound_file">Listen to my sound! (5 kB MIDI)</a>

See also

Table of Contents - Entire FAQ (HTML) - Entire FAQ (Text)
Previous Section - Next Section