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 text or images?
How do I eliminate the space around/between my images?
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 specify fonts in my Web pages?
How can I specify colors?
How do I change the color of some text?
How can I specify background images?
How do I have a fixed background image?
How do I have a non-tiled background image?
How can I have a custom icon when people bookmark my site?

Section 6: Presentational Effects

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.

6.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).

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://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.cranfield.ac.uk/docs/stats/

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.

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.

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".) This presentation can be suggested in a CSS1 style sheet with text-align:justify, or in HTML 4 with the deprecated attribute 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. For an explanation with nice examples, see URL: http://www.awpa.asn.au/html/images.html.

6.7. How do I eliminate the space around/between my images?

If your images are inside a table, be sure to set the BORDER, CELLSPACING, and CELLPADDING attributes to 0. Also, extra space between images is often created by whitespace around the <IMG> tag in the markup. For example, replace this:

<TD ...>
<IMG SRC=... ALT=...>
<IMG SRC=... ALT=...>
</TD>

with this:

<TD ...><IMG SRC=... ALT=...><IMG SRC=... ALT=...></TD>

According to the latest specifications, the two should be equivalent. However, common browsers do not comply with the specifications in this situation.

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.

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.

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

The most appropriate way is to suggest margins with a style sheet. Cascading Style Sheets use the margin property to specify margins. More information about Cascading Style Sheets can be found at: http://www.htmlhelp.com/reference/css/
More information about the CSS margin property can be found at: http://www.htmlhelp.com/reference/css/box/margin.html

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" vspace="0" marginwidth="0" leftmargin="0" hspace="0" style="margin:0">

More information is available at URL: http://mirror.subotnik.net/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.

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

6.12. 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. Cascading Style Sheets use the font-family property to specify font faces. More information about Cascading Style Sheets can be found at: http://www.htmlhelp.com/reference/css/
More information about the CSS font-family property can be found at: http://www.htmlhelp.com/reference/css/font/font-family.html

With HTML, the BASEFONT element can be used to suggest specific fonts for the entire document. The BASEFONT element affects the entire document. More information about the BASEFONT element can be found at: http://www.htmlhelp.com/reference/html40/special/basefont.html

With HTML, the FONT element can also be used to suggest specific fonts. The FONT element must be repeated inside every block-level element, since it can contain only inline (text-level) elements. 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

Whether specifying fonts with CSS or with HTML, authors run the risk that a reader's system has a font by the same name but which is significantly different. For example, "Chicago" can be a nice text font, a display font with letters formed by "bullet holes", or a dingbat font with building images (for creating skylines).

Also, authors must either use fonts (or groups of similar fonts) that are commonly available on many systems, or provide dynamic fonts for their readers. Readers who do not have the specified font(s) installed, or who do not download the dynamic fonts provided by the author, will see a default font. Some browsers may use a less legible substitute font than their normal default font in cases where author-specified fonts are not found.

Netscape and Microsoft have developed competing formats for dynamic fonts. TrueDoc works on Navigator 4+ and (with a plugin) on Internet Explorer 4+. OpenType works on Internet Explorer 4+. For more information about TrueDoc (including the WebFont Maker), see: http://www.truedoc.com/webpages/intro/
For more information about OpenType (including Microsoft's Web Embedding Fonts Tool (WEFT)), see: http://www.microsoft.com/typography/web/

For practical advise on using fonts on the web, see Todd Fahrner's "Beyond the FONT tag: Practical HTML text styling" at: http://style.metrius.com/font_size/livetext.html

6.13. How can I specify colors?

If you want others to view your web page with specific colors, the most appropriate way is to suggest the colors with a style sheet. Cascading Style Sheets use the color and background-color properties to specify text and background colors. To avoid conflicts between the reader's default colors and those suggested by the author, these two properties should always be used together. More information about Cascading Style Sheets can be found at: http://www.htmlhelp.com/reference/css/
More information about the CSS color property can be found at: http://www.htmlhelp.com/reference/css/color-background/color.html
More information about the CSS background-color property can be found at: http://www.htmlhelp.com/reference/css/color-background/background-color.html

With HTML, you can suggest colors with the TEXT, LINK, VLINK (visited link), ALINK (active link), and BGCOLOR (background color) attributes of the BODY element. If one of these attributes is used, then all of them should be used to ensure that the reader's default colors do not interfere with those suggested by the author. Here is an example:

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#000080">

More information about the BODY element can be found at: http://www.htmlhelp.com/reference/html40/html/body.html

Authors should not rely on the specified colors since browsers allow their users to override document-specified colors.

6.14. How do I change the color of some text?

The most appropriate way is to use suitable structural markup, and to suggest the desired color with a style sheet. If you want to specify a color for only certain cases of an element, then you can use a class to specify which cases are special. The following CSS example specifies that emphasized text with the class "special" should be green (on a white background):

EM.special { color: green; background: white; }

When displayed according to this CSS ruleset, the emphasized text in the following HTML example will be displayed in green:

normal text <EM CLASS="special">emphasized text</EM> normal text

More information about Cascading Style Sheets can be found at: http://www.htmlhelp.com/reference/css/

With HTML, the FONT element can also be used to suggest colors. 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

6.15. How can I specify background images?

If you want others to view your web page with a background image, the most appropriate way is to suggest the background with a style sheet. Cascading Style Sheets use the background-image property to specify a background image. More information about Cascading Style Sheets can be found at: http://www.htmlhelp.com/reference/css/
More information about the CSS background-image property can be found at: http://www.htmlhelp.com/reference/css/color-background/background-image.html

With HTML, you can suggest a tiled background image with the BACKGROUND attribute of the BODY element. Here is an example:

<body background="imagefile.gif" bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#000080">

More information about the BODY element can be found at: http://www.htmlhelp.com/reference/html40/html/body.html

If you specify a background image, you should also specify text, link, and background colors (see the answer to the question "How can I specify colors?") since the reader's default colors may not provide adequate contrast against your background image. The background color will be used by those not loading images. Authors should not rely on the specified background image since browsers allow their users to disable image loading or to override document-specified backgrounds.

6.16. 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+.

6.17. 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 }

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