Learn About HTML

Getting Started
Web Publishing
Web Design
Hyperlinks
Other Media
Presentational Effects
HTML Tables
HTML Forms
HTML Frames

Section 1: Getting Started

1.1. What is ... and where can I learn more about it?

HTML

HyperText Markup Language is a simple markup language used to create platform-independent hypertext documents on the World Wide Web. Most hypertext documents on the web are written in HTML.

W3C's HTML 4.01 Recommendation URL: http://www.w3.org/TR/html4/
WDG's HTML 4.0 Reference URL: http://www.htmlhelp.com/reference/html40/
Jukka Korpela's "Getting Started with HTML" URL: http://www.cs.tut.fi/~jkorpela/html-primer.html

CSS

Cascading Style Sheets are a standards-based mechanism for suggesting presentational style (e.g., fonts, colors, layout) for HTML documents. CSS is flexible and cross-platform, and is designed to preserve the accessibility of the document's structural content (even when all or part of the author's style sheet is ignored). A single style sheet can be used by multiple documents to suggest a common cohesive style, which is more efficient than using repetitive presentational markup in each individual document.

W3C's CSS Level 2 Recommendation URL: http://www.w3.org/TR/REC-CSS2/
WDG's Guide to Cascading Style Sheets URL: http://www.htmlhelp.com/reference/css/
The HTML Writers Guild's CSS FAQ URL: http://www.hwg.org/resources/faqs/cssFAQ.html

SGML

Standard Generalized Markup Language is a language used to define the syntax of markup languages. HTML is an SGML application (a markup language defined in SGML).

W3C's "On SGML and HTML" URL: http://www.w3.org/TR/html401/intro/sgmltut.html

XML

Extensible Markup Language is another language used to define the syntax of markup languages. XML is a subset of SGML, and is designed to represent arbitrary structured data in a text format.

W3C's XML 1.0 Recommendation URL: http://www.w3.org/TR/REC-xml
W3C's "XML in 10 Points" URL: http://www.w3.org/XML/1999/XML-in-10-points.html

XHTML

Extensible HyperText Markup Language is a reformulation of HTML as an XML application. Because it is an XML application, the syntax requirements of XHTML are more restrictive than those of HTML. Otherwise, XHTML 1.0 mirrors the functionality of HTML 4.01.

W3C's XHTML 1.0 Recommendation URL: http://www.w3.org/TR/xhtml1/

SSI ("SHTML")

Server-Side Includes allow various directives (e.g., to include the content of another file) to be embedded within web documents. The web server processes SSI directives each time a document that uses SSI is retreived. Documents that use SSI are often identified with a .shtml filename extension, but there is no "SHTML" language as such. Implementation details vary among web servers; consult your server documentation for details.

SSI Documentation for the Apache server URL: http://www.apache.org/docs/mod/mod_include.html

CGI

Common Gateway Interface is a standard interface between external programs and web servers. Unlike static HTML documents, CGI programs can produce dynamic information based on form data submitted by the user, on information in a database, or on any other data available to the program.

WDG's CGI Programming FAQ URL: http://www.htmlhelp.com/faq/cgifaq.html.

1.2. Where can I find a list of all the current HTML tags?

The current recommendation is XHTML 1.0, which is a reformulation of HTML 4.01 as an XML 1.0 application. HTML 4.01 is an update with minor corrections to HTML 4.0. HTML 4 extends HTML 3.2 to include support for frames, internationalization, style sheets, advanced tables, and more. The new markup introduced by HTML 4 is not well supported by current browsers, but much of it can be used safely in non-supporting browsers.

Recommended materials on HTML 4:

http://www.w3.org/TR/html4/ -- the official HTML 4.01 Recommendation
http://www.htmlhelp.com/reference/html40/ -- a handy HTML 4.0 reference, with notes on using poorly supported features safely

Recommended materials on HTML 3.2:

http://www.w3.org/TR/REC-html32 -- the official HTML 3.2 Recommendation
http://www.htmlhelp.com/reference/wilbur/ -- a more readable version of the above
http://mirror.subotnik.net/jkorpela/HTML3.2/ -- Jukka Korpela's "Learning HTML 3.2 by Examples"

Some materials on browser-specific versions of HTML:

http://www.blooberry.com/indexdot/html/supportkey/a.htm -- Brian Wilson's checklist of browser support for HTML tags and attributes
http://developer.netscape.com/docs/manuals/htmlguid/index.htm -- a list of Netscape HTML tags (early 1998)
http://msdn.microsoft.com/workshop/author/html/reference/elements.asp#ie40_html -- a list of Microsoft HTML tags

1.3. How can I show HTML examples without them being interpreted as part of my document?

Within the HTML example, first replace the "&" character with "&" everywhere it occurs. Then replace the "<" character with "<" and the ">" character with ">" in the same way.

The next Q&A addresses the more general issue of representing arbitrary characters in HTML documents.

1.4. How do I get a ... character in my HTML?

The answer to the previous question addressed the special case of the less-than (<), greater-than (>), and ampersand (&) characters. In general, the safest way to do HTML is in (7-bit) US-ASCII, and expressing characters from the upper half of the 8-bit code by using HTML entities. See the answer to "Which should I use, &entityname; or &#number; ?"

Working with 8-bit characters can also be successful in many practical situations: Unix and MS-Windows (using Latin-1), and also Macs (with some reservations).

The available characters are those in ISO-8859-1, listed at URL: http://www.htmlhelp.com/reference/charset/. On the Web, these are the only characters widely supported. In particular, characters 128 through 159 as used in MS-Windows are not part of the ISO-8859-1 code set and will not be displayed as Windows users expect. This includes the em dash, en dash, curly quotes, bullet, and trademark symbol; neither the actual character nor &#nnn; is correct. (See the last paragraph of this answer for more about those characters.)

On platforms whose own character code isn't ISO-8859-1, such as MS DOS, Macs, there may be problems: you'd have to use text transfer methods that convert between the platform's own code and ISO-8859-1 (e.g Fetch for the Mac), or convert separately (e.g GNU recode). Using 7-bit ASCII with entities avoids those problems, and this FAQ is too small to cover other possibilities in detail. Mac users - see the notes at the above URL.

If you run a web server (httpd) on a platform whose own character code isn't ISO-8859-1, such as a Mac, or IBM mainframe, it's the job of the server to convert text documents into ISO-8859-1 code when sending them to the network.

If you want to use characters outside of the ISO-8859-1 repertoire, you must use HTML 4 rather than HTML 3.2. See the HTML 4.01 Recommendation at URL: http://www.w3.org/TR/html4/ and the Babel site at URL: http://babel.alis.com:8080/ for more details. Another useful resource for internationalization issues is at URL: http://ppewww.ph.gla.ac.uk/%7Eflavell/charset/.

1.5. Should I put quotes around attribute values?

It is never wrong to quote attribute values, and many people recommend quoting all attribute values even when the quotation marks are technically optional. XHTML 1.0 requires all attribute values to be quoted. Like previous HTML specifications, HTML 4 allows attribute values to remain unquoted in many circumstances (e.g., when the value contains only letters and digits). See URL: http://www.w3.org/TR/html4/intro/sgmltut.html#attributes for the exact rules.

Be careful when your attribute value includes double quotes, for instance when you want ALT text like "the "King of Comedy" takes a bow" for an image. Humans can parse that to know where the quoted material ends, but browsers can't. You have to code the attribute value specially so that the first interior quote doesn't terminate the value prematurely. There are two main techniques:

Escape any quotes inside the value with " so you don't terminate the value prematurely: ALT="the "King of Comedy" takes a bow". (" is not part of the formal HTML 3.2 spec, though most current browsers support it.)
Use single quotes to enclose the attribute value: ALT='the "King of Comedy" takes a bow'.

Both these methods are correct according to the spec and are supported by current browsers, but both were poorly supported in some earlier browsers. The only truly safe advice is to rewrite the text so that the attribute value need not contain quotes, or to change the interior double quotes to single quotes, like this: ALT="the 'King of Comedy' takes a bow".

1.6. How can I include comments in HTML?

A comment declaration starts with "". A comment starts and ends with "--", and does not contain any occurrence of "--" between the beginning and ending pairs. This means that the following are all legal HTML comments:





<!>

But some browsers do not support the full syntax, so we recommend you follow this simple rule to compose valid and accepted comments:

An HTML comment begins with "" and does not contain "--" or ">" anywhere in the comment.

See URL: http://www.htmlhelp.com/reference/wilbur/misc/comment.html for a more complete discussion.

1.7. How can I avoid using the whole URL?

The URL structure defines a hierarchy similar to a filesystem's hierarchy of subdirectories or folders. The segments of a URL are separated by slash characters ("/"). When navigating the URL hierarchy, the final segment of the URL (i.e., everything after the final slash) is similar to a file in a filesystem. The other segments of the URL are similar to the subdirectories and folders in a filesystem.

A relative URL omits some of the information needed to locate the referenced document. The omitted information is assumed to be the same as for the base document that contains the relative URL. This reduces the length of the URLs needed to refer to related documents, and allows document trees to be accessed via multiple access schemes (e.g., "file", "http", and "ftp") or to be moved without changing any of the embedded URLs in those documents.

Before the browser can use a relative URL, it must resolve the relative URL to produce an absolute URL. If the relative URL begins with a double slash (e.g., //www.htmlhelp.com/faq/html/), then it will inherit only the base URL's scheme. If the relative URL begins with a single slash (e.g., /faq/html/), then it will inherit the base URL's scheme and network location.

If the relative URL does not begin with a slash (e.g., all.html , ./all.html or ../html/), then it has a relative path and is resolved as follows.

The browser strips everything after the last slash in the base document's URL and appends the relative URL to the result.
Each "." segment is deleted (e.g., ./all.html is the same as all.html, and ./ refers to the current "directory" level in the URL hierarchy).
Each ".." segment moves up one level in the URL hierarchy; the ".." segment is removed, along with the segment that precedes it (e.g., foo/../all.html is the same as all.html, and ../ refers to the parent "directory" level in the URL hierarchy).

Some examples may help make this clear. If the base document is <URL:http://www.htmlhelp.com/faq/html/basics.html>, then

all.html and ./all.html: refer to <URL:http://www.htmlhelp.com/faq/html/all.html>
./: refers to <URL:http://www.htmlhelp.com/faq/html/>
../: refers to <URL:http://www.htmlhelp.com/faq/>
../cgifaq.html: refers to <URL:http://www.htmlhelp.com/faq/cgifaq.html>
../../reference/: refers to <URL:http://www.htmlhelp.com/reference/>

Please note that the browser resolves relative URLs, not the server. The server sees only the resulting absolute URL. Also, relative URLs navigate the URL hierarchy. The relationship (if any) between the URL hierarchy and the server's filesystem hierarchy is irrelevant.

For a full discussion of the proper form of URLs, see URL: http://www.w3.org/Addressing/.

1.8. Should I end my URLs with a slash?

When resolving relative URLs (see the answer to the previous question), the browser's first step is to strip everything after the last slash in the URL of the current document. If the current document's URL ends with a slash, then the final segment (the "file") of the URL is null. If you remove the final slash, then the final segment of the URL is no longer null; it is whatever follows the final remaining slash in the URL. Removing the slash changes the URL; the modified URL refers to a different document and relative URLs will resolve differently.

For example, the final segment of the URL http://www.htmlhelp.com/faq/html/ is empty; there is nothing after the final slash. In this document, the relative URL all.html resolves to http://www.htmlhelp.com/faq/html/all.html (an existing document). If the final slash is omitted, then the final segment of the modified URL http://www.htmlhelp.com/faq/html is "html". In this (nonexistent) document, the relative URL all.html would resolve to http://www.htmlhelp.com/faq/all.html (another nonexistent document).

When they receive a request that is missing its final slash, web servers cannot ignore the missing slash and just send the document anyway. Doing so would break any relative URLs in the document. Normally, servers are configured to send a redirection message when they receive such a request. In response to the redirection message, the browser requests the correct URL, and then the server sends the requested document. (By the way, the browser does not and cannot correct the URL on its own; only the server can determine whether the URL is missing its final slash.)

This error-correction process means that URLs without their final slash will still work. However, this process wastes time and network resources. If you include the final slash when it is appropriate, then browsers won't need to send a second request to the server.

The exception is when you refer to a URL with just a hostname (e.g., http://www.htmlhelp.com). In this case, the browser will assume that you want the main index ("/") from the server, and you do not have to include the final slash. However, many regard it as good style to include it anyway.

For a full discussion of the proper form of URLs, see URL: http://www.w3.org/Addressing/.

1.9. How can I check for errors?

Various software is available to find errors in your web documents automatically. HTML validators are programs that check HTML documents against a formal definition of HTML syntax and then output a list of errors. Validation is important to give the best chance of correctness on unknown browsers (both existing browsers that you haven't seen and future browsers that haven't been written yet).

HTML linters (checkers) are also useful. These programs check documents for specific portability problems, including some caused by invalid markup and others caused by common browser bugs. Linters may pass some invalid documents, and they may fail some valid ones.

All validators are functionally equivalent; while they may have different reporting styles, they will find the same errors given identical input. Different linters are programmed to look for different problems, so their reports will vary significantly from each other. Also, some programs that are called validators (e.g. the "CSE HTML Validator") are really linters/checkers. They are still useful, but they should not be confused with real HTML validators.

When checking a site for errors for the first time, it is often useful to identify common problems that occur repeatedly in your markup. Fix these problems everywhere they occur (with an automated process if possible), and then go back to identify and fix the remaining problems.

While checking for errors in the HTML, it is also a good idea to check for hypertext links which are no longer valid. There are several link checkers available for various platforms which will follow all links on a site and return a list of the ones which are non-functioning.

You can find a list of validators, linters, and link checkers at URL: http://www.htmlhelp.com/links/validators.htm. Especially recommended is the use of an SGML-based validator such as the WDG HTML Validator URL: http://www.htmlhelp.com/tools/validator/ or W3C HTML Validation Service URL: http://validator.w3.org/.

1.10. What is a DOCTYPE? Which one do I use?

According to HTML standards, each HTML document begins with a DOCTYPE declaration that specifies which version of HTML the document uses. The DOCTYPE declaration is useful primarily to SGML-based tools like HTML validators, which must know which version of HTML to use in checking the document's syntax. Browsers generally ignore DOCTYPE declarations.

See URL: http://www.htmlhelp.com/tools/validator/doctype.html for information on choosing an appropriate DOCTYPE declaration.

Note that the public identifier section of the DOCTYPE declaration is case sensitive. Some versions of Netscape Composer are known to insert the lower-case "-//w3c//dtd html 4.0 transitional//en", rather than the correct mixed-case "-//W3C//DTD HTML 4.0 Transitional//EN".

Section 2: Web Publishing

2.1. Where can I put my newly created Web pages?

There are lots of companies that can host your Website. The best thing to do is search Google, do your homework and find a provider that's right for you.

2.2. How can I get my own domain name?

Most of the Web hosting companies you will find can sell you a domain name too. Check with your provider, or you can always search Google to find a good domain name registrar.

2.3. How can I block my hosting service's advertisements?

Check the Terms of Service (TOS) agreement for your hosting service. It almost certainly prohibits interfering with the advertisements they add to your web pages. If you use some trick to block their advertisements on your own, then your hosting service may delete your account for violating its TOS.

However, there may be other options. Some hosting services will remove the advertisements if you pay a small monthly fee. Others will remove their default pop-up advertisements if you add static banners yourself.

2.4. Where can I announce my site?

comp.infosystems.www.announce -- a moderated newsgroup specifically geared toward this subject. You need to obtain its FAQ list before posting to it.
http://www.submitfire.coffeecup.com lets you submit site information to 10 different major index sites for free. If you wish to pay you may submit your site to more than 400 sites.
http://ep.com/faq/webannounce.html is the How to Announce your New Web Site FAQ.

2.5. Is there a way to get indexed better by the search engines?

There is no single technique, but a number of factors can help.

Search engines index the textual content of your site, so use a meaningful <TITLE>, use meaningful headings (<H1>, <H2>, and so on), and provide meaningful ALT text for images.
Many search engines ignore frames, so avoid them, and be sure to provide useful NOFRAMES content if you do use them.
Most search engines ignore image maps, forms, and JavaScript, so make sure that navigating your site doesn't depend on them. Provide normal links for site navigation.
Avoid using META refresh, because many search engines penalize sites that use it (META refresh has been used to trick search engines).
The indexing programs of some search engines (including AltaVista and Infoseek) will also take into account <META NAME="keywords" CONTENT="..."> tags that appear in the <HEAD> part of your documents. However, META keywords have been used to trick search engines, so many will ignore your keywords list if you repeat a given keyword too often. At this writing, "too often" means "more than 7 times" to some popular engines, but that may change in the future as indexing programs are changed to defend against trickery.
If you include a <META NAME="description" CONTENT="..."> tag in the <HEAD> part of your documents, then some search engines will use the content of this tag as your site's description when displaying search results. This won't affect your ranking in searches, but it can help search engine users understand what your site offers when a search does find your site.

The CONTENT attribute of the META keywords and description tags may contain up to 1022 characters, but no markup other than entities.

You might want to preview your site with a text-only browser like Lynx, to get an idea of how your site appears to search engines. Search Engine Watch at URL: http://searchenginewatch.com/ is a Web site dedicated to search engines and strategies for Web page authors.

Finally, note that some search engines ignore sites hosted by well-known free hosting services. Other search engines index only a certain number of documents per server, so while early customers of free hosting services may be indexed, later customers may be ignored.

2.6. How do I prevent my site from being indexed by search engines?

See URL: http://info.webcrawler.com/mak/projects/robots/exclusion.html.

2.7. How do I redirect someone to my new page?

The most reliable way is to configure the server to send out a redirection instruction when the old URL is requested. Then the browser will automatically get the new URL. This is the fastest and most efficient way, and is the only way described here that can convince indexing robots to phase out the old URL. For configuration details consult your server admin or documentation (with NCSA or Apache servers, use a Redirect statement in .htaccess).

If you can't set up a redirect, there are other possibilities. These are inferior because they tell the search engines that there's still a page at the old location, not that the page has moved to a new location. But if it's impossible for you to configure redirection at your server, here are two alternatives:

Put up a small page with text like "This page has moved to http://new.url/ -- please adjust your bookmarks."
A Netscape and MSIE solution, which doesn't work on many other browsers (and screws up the "back" button in Netscape) is:
<META HTTP-EQUIV="Refresh" CONTENT="x; URL=new.URL">
which will load the new URL after x seconds. This should go in the HEAD of the document. But if you do this, also include a short text saying "Document moved to new URL so-and-so" for other browsers. (The screwing-up bit refers to the fact that if you press "Back" after you have been redirected, you will be taken to the document with the META refresh. Then the refresh will be activated, and so you'll jump to the page you just tried to leave.)

2.8. How do I password protect my web site?

Password protection is done through HTTP authentication. The configuration details vary from server to server, so you should read the authentication section of your server documentation. Contact your server administrator if you need help with this.

For example, if your server is Apache, see URL: http://www.apache.org/docs/misc/FAQ.html#user-authentication.

JavaScript password scripts provide only a facade of security. At a fundamental level, they work in one of two ways. Some scripts convert the password into a URL, which keeps the document secret by limiting the number of people who know its URL. Some scripts check the password and then go to a specific URL, which protects the document only from those who don't view the JavaScript source to get the URL of the document. Neither mechanism is really secure.

2.9. How do I stop my page from being cached?

Browsers cache web documents; they store local copies of documents to speed up repeated references to documents that haven't changed. Also, many browsers are configured to use public proxy caches, which serve many users (e.g., all customers of an ISP, or all employees behind a corporate firewall). To effectively control how your documents are cached you must configure your server to send appropriate HTTP headers.

The Expires header is understood by virtually all caches. The cached document will be retrieved again automatically once it has expired. The Expires header must contain an HTTP date, which must be Greenwich Mean Time (GMT), not local time.

HTTP 1.1 introduced the Cache-Control header, which provides more flexibility for telling caches how to handle the document. For more information, see the HTTP 1.1 draft (see URL: http://www.w3.org/Protocols/;).

The configuration details vary from server to server, so check your server documentation. For example, if your server is Apache, see URL: http://www.apache.org/docs/mod/mod_expires.html for information about setting the Expires header, and URL: http://www.apache.org/docs/mod/mod_headers.html for information about setting other headers.

The Pragma header is generally ineffective because its meaning is not standardized and few caches honor it. Using <META HTTP-EQUIV=...> elements in HTML documents is also generally ineffective; some browsers may honor such markup, but other caches ignore it completely.

Further discussion can be found at URL: http://www.mnot.net/cache_docs/.

2.10. How do I hide my source?

You can't. The HTML source is necessary for the browser to display your document; you must send the complete, unencrypted source to the browser. Even if a particular browser doesn't have a "View Source" feature, there are many that do, and someone can always retrieve the document by hand (using telnet) or from the browser's cache.

There are tricks that make it more difficult for some readers to view or save your source (e.g., tricking newbies into thinking there's nothing there by adding dozens of blank lines to the beginning of the document, or using JavaScript to trap right-button mouse events). However, just as with tricks that try to protect images from being saved, these tricks have very limited effectiveness and can cause various problems for law-abiding users.

2.11. How do I hide my URL?

You can't. URLs are fundamental to navigation on the WWW. The URL is necessary for the browser to be able to retrieve your document. It is impossible to hide the URL of a resource from the browser.

2.12. How do I detect what browser is being used?

Many browsers identify themselves when they request a document. A CGI script will have this information available in the HTTP_USER_AGENT environment variable, and it can use that to send out a version of the document which is optimized for that browser.

Keep in mind not all browsers identify themselves correctly. Microsoft Internet Explorer, for example, claims to be "Mozilla" to get at Netscape enhanced documents.

And of course, if a cache proxy keeps the Netscape enhanced document, someone with another browser will also get this document if he goes through the cache.

For these reasons and others, it is not a good idea to play the browser guessing game.

2.13. How do I get my visitors' email addresses?

You can't. Although each request for a document is usually logged with the name or address of the remote host, the actual username is almost never logged as well. This is mostly because of performance reasons, as it would require that the server uses the ident protocol to see who is on the other end. This takes time. And if a cache proxy is doing the request, you don't get anything sensible.

But just stop to think for a minute... would you really want every single site you visit to know your email address? Imagine the loads of automated thank you's you would be receiving. If you visited 20 sites, you would get at least 20 emails that day, plus no doubt they would send you invitations to return later. It would be a nightmare as well as an invasion of privacy!

In Netscape 2.0, it was possible to automatically submit a form with a mailto as action, using JavaScript. This would send email to the document's owner, with the address the visitor configured in the From line. Of course, that can be "mickey.mouse@disney.com". This was fixed by Netscape 2.01.

The most reliable way is to put up a form, asking the visitor to fill in his email address. To increase the chances that visitors will actually do it, offer them something useful in return.

2.14. Why is my custom 404 message not displayed?

Recent versions of Internet Explorer default to "friendly" HTTP error messages. When a special HTTP response (e.g., a 404 response) is shorter than 512 bytes, the browser substitutes its own message for the one delivered by the server. As a user of Internet Explorer, you can disable this feature in the "Advanced" options panel. As a web author, your only recourse is to make the error page larger.

Section 3: Web Design

3.1. How do I include one file in another?

HTML itself offers no way to seamlessly incorporate the content of one file into another.

True dynamic inclusion of one HTML document (even in a different "charset") into another is offered by the OBJECT element, but due to shortcomings of browser versions in current use, it seems unwise to rely on this yet for essential content. The same can be said for IFRAME.

Two popular ways of including the contents of one file seamlessly into another for the WWW are preprocessing and server-side inclusion.

Preprocessing techniques include the C preprocessor and other generic text manipulation methods, and several HTML-specific processors. There is a nice annotated list of HTML preprocessors at http://www.idocs.com/wmr/software/html+preprocessors/.

Beware of making your "source code" non-portable. Also, the HTML can only be validated after pre-processing, so the typical cycle "Edit, Check, Upload" becomes "Edit, Preprocess, Check, Upload" (here, "Check" includes whatever steps you use to preview your pages: validation, linting, management walk-through etc.; and "upload" means whatever you do to finally publish your new pages to the web server).

A much more powerful and versatile pre-processing technique is to use an SGML processor (such as the SP package) to generate your HTML; this can be self-validating.

Examples of server-side inclusion are Server Side Includes (SSI, supported by Apache, NCSA, and other web servers), and Microsoft's Active Server Pages (ASP, supported by MS IIS). Processing occurs at the time the documents are actually retrieved. A typical inclusion looks like 

but be sure to consult your own server's documentation, as the details vary somewhat between implementations. The whole directive gets replaced by the contents of the specified file.

Using server-side inclusion (a potentially powerful tool) merely as a way to insert static files such as standard header/footers has implications for perceived access speed and for server load, and is better avoided on heavily loaded servers. If you use it in this way, consider making the result cacheable (e.g., via " XBitHack full" on Apache; setting properties of the "Response" object in ASP). Details are beyond the scope of this FAQ but you may find this useful: http://www.mnot.net/cache_docs/

Proper HTML validation of server-side inclusion is only possible after server-side processing is done (e.g. by using an on-line validator that retrieves the document from the server).

Finally, note that if the included file contains arbitrary plain text, then some provision must be made to convert the characters "&" and "<" (in the plain text file) to the entities "&" and "<" (in the HTML document).

3.2. Which should I use, &entityname; or &#number; ?

In HTML, characters can be represented in three ways:

a properly coded character, in the encoding specified by the "charset" attribute of the "Content-type:" header;
a character entity (&entityname;), from the appropriate HTML specification (HTML 2.0/3.2, HTML 4, etc.);
a numeric character reference (&#number;) that specifies the Unicode reference of the desired character. We recommend using decimal references; hexadecimal references are less widely supported.

In theory these representations are equally valid. In practice, authoring convenience and limited support by browsers complicate the issue.

HTTP being a guaranteed "8-bit clean" protocol, you can safely send out 8-bit or multibyte coded characters, in the various codings that are supported by browsers.

A. HTML 2.0/3.2 (Latin-1)

By now there seems no convincing reason to choose &entityname; versus &#number;, so use whichever is convenient.

If you can confidently handle 8-bit-coded characters this is fine too, probably preferred for writing heavily-accented languages. Take care if authoring on non-ISO-8859-based platforms such as Mac, Psion, IBM mainframes etc., that your upload technique delivers a correctly coded document to the server. Using &-representations avoids such problems.

B. A single repertoire other than Latin-1

In such codings as ISO-8859-7 Greek, koi8-r Russian Cyrillic, and Chinese, Japanese and Korean (CJK) codings, use of coded characters is the most widely supported and used technique.

Although not covered by HTML 3.2, browsers have supported this quite widely for some time now; it is a valid option within the HTML 4 specifications--use a validator such as the WDG's online HTML Validator at URL:http://www.htmlhelp.com/tools/validator/ which supports HTML 4 and understands different character encodings.

Browser support for coded characters may depend on configuration and font resources. In some cases, additional programs called "helpers" or "add-ins" supply virtual fonts to browsers.

"Add-in" programs have in the past been used to support numeric references to 15-bit or 16-bit code protocols such as Chinese Big5 or Chinese GB2312.

In theory you should be able to include not only coded characters but also Unicode numeric character references, but browser support is generally poor. Numeric references to the "charset-specified" encoding may appear to produce the desired characters on some browsers, but this is wrong behavior and should not be used. Character entities are also problematical, aside from the HTML-significant characters <, & etc.

C. Internationalization per HTML 4

Recent versions of the popular browsers have support for some of these features, but at time of writing it seems unwise to rely on this when authoring for a general audience. If you'd like to explore the options, you can find comprehensive background documentation and some practical suggestions at

3.3. Should I use lower case or upper case for tags?

Tags are case insensitive, so it doesn't matter. This is just a matter of style. (You may have noticed that this FAQ is not absolutely consistent in capitalization.) Many people prefer upper case, as it makes the tags "stand out" better amongst the text.

Attribute names can also be upper or lower case, as you prefer. But some attribute values are case sensitive. For example, <OL TYPE=A> and <OL type=A> are the same, but <OL TYPE=a> is different from both of them. (For clearer communication, it's worth getting the terminology right. In this example, OL is the element, TYPE is the attribute name, and A and a are the attribute values. The tag is <OL TYPE=A>.)

Entity names like are sometimes incorrectly referred to as tags. They are all case sensitive. For example, É and é are two different and valid entities; &NBSP; is invalid.

Note that XHTML 1.0 (a reformulation of HTML 4.01 as an XML 1.0 application) requires element and attribute names to be in lower case.

3.4. For what screen size should I write?

HTML does not depend on screen size. Normally, the text will be wrapped by the browser when the end of its display area is encountered. (Note that graphical browsers are often used with windows that are smaller than the full area of the screen.)

Preformatted lines (text within <PRE> elements) should only ever exceed 70 characters if the nature of the content makes it unavoidable. Longer lines will cause ugly line breaks on text-mode browsers, and will force horizontal scrolling on graphical browsers. Readers strongly dislike horizontal scrolling, except where they can realise that the nature of the content made it inevitable.

Images cannot be wrapped, so you have to be careful with them. It seems that 400 or 500 pixels is a reasonable width; anything above 600 will mean a certain percentage of users will have to scroll to see the rightmost bit. This percentage increases with your image width. Keep in mind that not everyone runs his browser at full screen!

(WebTV users have no ability to scroll horizontally, so anything beyond 544 pixels will be compressed by their browser. Some other devices may be even more limited.)

The use of tables for layout, especially when fixed-width cells are used, is the most usual single factor that prevents pages from adapting to various window widths. This is explained in detail at URL: http://www.dantobias.com/webtips/tables.html.

3.5. Why does my page display fine in browser X but incorrectly or not at all in browser Y?

There are several possibilities.

First, you may have some incorrect HTML. Browsers vary in their ability to guess what you meant. For instance, Netscape is much more fussy about tables than MS Internet Explorer, so a page with incorrect tables may look fine in MSIE but not display at all in Netscape. See the answer to "How can I check for errors?" for tips on finding your HTML errors. (In fact, even correct nested tables may not display correctly in Netscape. See the answer to "Can I nest tables within tables?" for what you can do about that.)

Second, you may have valid HTML that different browsers interpret differently. For instance, it is not clear from the spec what should be done with a string of   characters. Some browsers will collapse them for rendering as a single space; others will render one space per  .

Third, your server may be sending incorrect MIME types for some of your files. Internet Explorer incorrectly ignores server-provided MIME types, so it sometimes "does the right thing" when the server is misconfigured. Other browsers correctly heed the server-provided MIME types, so they will reveal server misconfigurations.

Other possibilities are a bug in one or the other browser, or different user option settings.

3.6. Why does the browser show my plain HTML source?

If Microsoft Internet Explorer displays your document normally, but other browsers display your plain HTML source, then most likely your web server is sending the document with the MIME type "text/plain". Your web server needs to be configured to send that filename with the MIME type "text/html". See the answer to "Why did my link to a ... file download a bunch of characters instead?" for more details.

If the code is being displayed in all browsers, then there is an error in the HTML source. Double-check all HTML to ensure that all tags and attributes have been closed correctly. The error is usually just above the line where the code is displaying.

3.7. How do I freeze the URL displayed in a visitor's browser?

This is a "feature" of using frames: The browser displays the URL of the frameset document, rather than that of the framed documents. (See the answer to the question "How do I specify a specific combination of frames instead of the default document?").

However, this behavior can be circumvented easily by the user. Many browsers allow the user to open links in their own windows, to bookmark the document in a specific frame (rather than the frameset document), or to bookmark links. Thus, there is no reliable way to stop a user from getting the URL of a specific document.

Furthermore, preventing users from bookmarking specific documents can only antagonize them. A bookmark or link that doesn't find the desired document is useless, and probably will be ignored or deleted.

3.8. How do I put links along the left side of my page?

A common way to do this is to use a two-column table with your links in the left column and your content in the right column. This is often combined with a background image that creates a colored strip on the left behind the links. The background image can tile vertically, but to avoid horizontal tiling the image should be extremely wide (e.g., 1600 pixels).

A variation of this technique (which minimizes some of the problems with using tables for layout) uses a single-cell table with ALIGN="left". Only the links go inside the table, which floats to the left. The document's content wraps to fill the space remaining to the right of and below the table.

Layout tables can be avoided entirely by using CSS. The navigation links and the page's main content are placed inside separate DIV elements, and then CSS is used to position these DIV elements relative to each other. The style sheet can use a smaller background image that repeats vertically and is aligned along the left, for example:

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

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

Finally, a navigation strip on the left can be implemented with frames. However, frames introduce problems that are best avoided if possible.

See the answer to the question, "How do I include one file in another?" for suggestions that will help you maintain common content like navigation links across all the documents at your site.

Section 4: Hyperlinks

4.1. How do I create a link?

Use an anchor element. The HREF attribute specifies the URL of the document that you want to link to. The following example links the text "Web Authoring FAQ" to <URL:http://www.htmlhelp.com/faq/html/>:

<A HREF="http://www.htmlhelp.com/faq/html/">Web Authoring FAQ</A>

For more information on links and the anchor element, see: http://www.htmlhelp.com/reference/html40/special/a.html

4.2. How do I link to a location in the middle of an HTML document?

First, identify the destination of the link with a named anchor (an anchor that uses the NAME attribute). For example:

<H2><A NAME="section2">Section 2: Beyond Introductions</A></H2>

Second, link to the named anchor. The URL of the named anchor is the URL of the document, with "#" and the name of the anchor appended. For example, elsewhere in the same document you could use:

<A HREF="#section2">go to Section 2</A>

Similarly, in another document you could use:

<A HREF="thesis.html#section2">go to Section 2 of my thesis</A>

4.3. How do I create a link that opens a new window?

<A TARGET="_blank" HREF=...> opens a new, unnamed window.

<A TARGET="foobar" HREF=...> opens a new window named "foobar", provided that a window or frame by that name does not already exist.

Note that links that open new windows can be annoying to your readers if there is not a good reason (from the reader's perspective) for them.

4.4. How do I create a link that opens a new window of a specific size?

With HTML, there is no way to control the size (or window decoration, or other features) of a new window. However, in JavaScript you can specify such details when using the window.open() function.

Start with a normal HTML link (possibly one that opens in a new window as described in the answer to the previous question). Then use the ONCLICK attribute to open a window with the desired appearance for those readers with JavaScript supported and enabled. The following example specifies a window named "popup" that is 300 pixels by 150 pixels.

<A HREF="foo.html" TARGET="popup" ONCLICK="window.open('foo.html', 'popup', 'width=300,height=150'); return false">View Foo</A>

Used in this manner, JavaScript can specify a new window with the desired appearance, without blocking access when JavaScript is unsupported/disabled.

In addition to the parameters height and width (which take a pixel count as a value), the third argument to the window.open() can include the following booloean parameters (which take "yes" or "no" as a value): directories, location, menubar, resizable, scrollbars, status, and toolbar. These boolean parameters control the presence of the corresponding window decorations in the resulting window.

4.5. How do I create a button which acts like a link?

This is best done with a small form:

<FORM ACTION="<var>[URL]</var>" METHOD=GET> <INPUT TYPE=submit VALUE="Text on button"> </FORM>

If you want to line up buttons next to each other, you will have to put them in a one-row table, with each button in a separate cell.

Note that search engines might not find the target document unless there is a normal link somewhere else on the page.

A go-to-other-page button can also be coded in JavaScript, but the above is standard HTML and works for more readers.

4.6. How do I create a back button on my page?

You cannot do this with HTML. Going "back" means going to the previous location in your history. You could create a link to the URL specifed in the HTTP Referer header (available in the HTTP_REFERER environment variable in CGI programs), but that creates a link forward to a new location in your history. Even then, the information in the Referer header can be wrong. Some browsers incorrectly send the Referer header when the user enters a URL manually or uses a bookmark. Some never send the Referer header (which is optional).

You could use JavaScript's history.back() to create a back button (or link). Naturally, this only works when JavaScript is supported and enabled.

For a more detailed explanation, please see Abigail's "Simulating the back button" at URL: http://www.foad.org/%7Eabigail/HTML/Misc/back_button.html.

Also, it is worth noting that the only navigation tool used more frequently than the "back" function is the hyperlink. Your readers almost certainly know how to use their browsers' "back" function. Users who don't know how to use basic functions of their browsers will only be confused when various pages imitate those functions in different ways.

4.7. How do I create a button that automatically bookmarks my site?

You cannot do this with HTML. However, Internet Explorer 4+ supports the window.external.AddFavorite() method, a proprietary extension to JavaScript that opens an "Add to Favorites" dialog. The following example avoids creating a non-functional button for those with other browsers, or for those with JavaScript disabled:

<script type="text/javascript"><!--
function addf() {
    window.external.AddFavorite('http://www.htmlhelp.org/',
                                'Web Design Group'); }
if(document.all) {
    document.write('<input type="button" onclick="addf()"'+
                   ' value="Bookmark WDG Site">'); }
//--></script>

It is worth noting that readers who know how to use bookmarks almost certainly know how to bookmark your site independently. Likewise, the few readers who don't know how to bookmark your site probably won't know how to use bookmarks that you create for them. Users who don't know how to use basic functions of their browsers will only be confused when various pages imitate those functions in different ways.

4.8. How do I create a button that prints my page?

You cannot do this with HTML. However, some browsers support the JavaScript window.print() method, which opens a "Print" dialog. The following example avoids creating a non-functional button for those with other browsers, or for those with JavaScript disabled:

<script type="text/javascript"><!--
if (window.print) {
    document.write('<input type="button" onclick="window.print()"'+
                   ' value="Print This Page">'); }
//--></script>

It is worth noting that readers who have printers almost certainly know how to use their browsers' print function. Users who don't know how to use basic functions of their browsers will only be confused when various pages imitate those functions in different ways.

4.9. How do I create a link that sends me email?

Use a mailto link, for example

Send me email at <A HREF="mailto:me@mydomain.com">me@mydomain.com</A>.

Note that any email address that you publish on the WWW like this will probably start receiving unsolicited commercial email (UCE, junk email). It's a good idea to protect your real email address (e.g., by filtering incoming email, or by using a separate address only for mailto links).

4.10. How do I specify a subject for a mailto link?

You can't, not in any reliable way. The methods that are frequently posted are not effective on all combinations of browser and email software (not even on all common combinations), and many of them have an important drawback: when they fail, the email will be lost.

If you really need a subject, you can do it by providing a form on your page, which submits data to a CGI program that emails the form data to you with your desired subject line. However, the form must have an input field for the visitor's email address, and you must hope that the visitor enters it correctly.

Here are some other ways to transmit subject-type information:

Create email aliases that are used only for certain mailto links, so you'll know that anything sent to a given alias is in response to the corresponding Web page(s).
The mail handlers for many Web browsers include an "X-Url" header that specifies the URL of the Web page that contained the mailto link. If you configure your mail reader to display this header, you'll see which Web page the sender is responding to much of the time.
Use <A HREF="mailto:user@site" TITLE="Your Subject">. Most browsers will ignore the TITLE attribute, but some minor browsers will use it as a subject for the email message. All browsers will send the mail.
Use <A HREF="mailto:user@site?subject=Your%20Subject">, which puts "Your Subject" (the space is encoded as "%20") in the "Subject" header field of the email message in most current browsers. The details of this RFC can be found at URL: http://info.internet.isi.edu/in-notes/rfc/files/rfc2368.txt. Note however that you will lose mail from users of older browsers, so you should consider whether the pre-filled subject is worth lost mail.

4.11. How do I link an image to something?

Just use the image as the link content, like this:

<A HREF=<var>...</var>><IMG <var>...</var>></A>

4.12. How do I eliminate the blue border around linked images?

Use the BORDER="0" attribute in the <IMG> element. For example:

<A HREF="doc.html"><IMG SRC="doc.gif" ALT="View document." BORDER="0"></A>

4.13. How do I link different parts of an image to different things?

Use an image map. Client-side image maps don't require server-side processing, so response time is faster. Server-side image maps hide the link definitions from the browser, and can act as a backup for client-side image maps for the few very old browsers that support server-side image maps but not client-side image maps.

The configuration details of server-side image maps vary from server to server. Refer to your server documentation for details.

Client-side image maps are implemented with HTML. The MAP element defines an individual image map and the AREA element defines specific linked areas within that image map. The USEMAP attribute of the IMG element associates an image map with a specific image. A detailed explanation (with examples) is available at http://www.htmlhelp.com/reference/html40/special/map.html. A tutorial is available at http://ppewww.ph.gla.ac.uk/~flavell/www/imgmaptut.html.

4.14. How do I turn off underlining on my links?

If you want to prevent links on your page being underlined when your visitors see them, there's no way in HTML to accomplish this. You can suggest this presentation using style sheets by defining

a:link, a:visited, a:active {text-decoration: none}

4.15. How can I have two sets of links with different colors?

You can suggest this presentation using style sheets. In your style sheet, define something like this:

a:link        {color: blue;   background: white}
a:visited     {color: purple; background: white}
a:active      {color: red;    background: white}
a.foo:link    {color: yellow; background: black}
a.foo:visited {color: white;  background: black}
a.foo:active  {color: red;    background: black}

Then use CLASS="foo" to identify the links of the second color in your HTML, like this:

<A CLASS="foo" HREF=...>...</A>

4.16. How can I make links change when the cursor is over them?

In your style sheet, use the hover pseudo-class to specify a different appearance for links when the cursor is over them. Specify the hover pseudo-class after the link and visited pseudo-classes. For example:

A:link { color: blue ; background: white } A:visited { color: purple ; background: white } A:hover { color: red ; background: white }

4.17. Why are my hyperlinks coming out all wrong or not loading?

Most likely you forgot to close a quote at the end of the HREF attribute. Alternatively, perhaps you used a ">" character somewhere else inside a tag. Although this is legal, several older browsers will think the tag ends there, so the rest is displayed as normal text.

This especially happens if you use comment tags to "comment out" text with HTML tags. (See the answer to "How can I include comments in HTML?") Although the correct syntax is  (without "--" occurring anywhere inside the comment), some browsers will think the comment ends at the first ">" they see.

Validators will show you any syntax errors in your markup, but checkers such as Weblint and HTMLchek can show you where you are liable to provoke known browser bugs. For example, some versions of Netscape Navigator are known to have problems with links to named anchors when the anchors are within a table that uses the ALIGN attribute. See also the answer to "How can I check for errors?"

Another possibility is that your web authoring software used file URLs (e.g., file:C:pathfile.html). If so, then you should replace them with relative URLs (e.g., file.html) or http URLs (e.g., http://server/path/file.html).

4.18. Why does my link work in Internet Explorer but not in Netscape?

Is there a space, #, ?, or other special character in the path or filename? Spaces are not legal in URLs. If you encode the space by replacing it with %20, your link will work.

You can encode any character in a URL as % plus the two-digit hex value of the character. (Hex digits A-F can be in upper or lower case.) According to the spec, only alphanumerics and the special characters -_.!*'() never need to be encoded.

You should encode all other characters when they occur in a URL, except when they're used for their reserved purposes. For example, if you wanted to pass the value "Jack&Jill" to a CGI script, you would need to encode the "&" character as "%26", which might give you a URL like the following: http://www.foo.com/foo.cgi?rhyme=Jack%26Jill&audience=child

Note that the "?" and other "&" character in this URL are not encoded since they're used for their reserved purposes. However, when this URL is used as an attribute value in an HTML document, the "&" character must be encoded as "&", like the following: <A HREF="http://www.foo.com/foo.cgi?rhyme=Jack%26Jill&audience=child">

For the technical details, see URL: http://www.w3.org/Addressing/

Section 5: Other Media

5.1. How do I let people download a file from my page?

Once the file is uploaded to the server, you need only use an anchor reference tag to link to it. An example would be:

<a href="../files/foo.zip">Download Foo Now! (100kb ZIP)</a>

It is possible that the server might need to be configured for some different file types. (See the next Q&A.)

5.2. Why did my link to a ... file download a bunch of characters instead?

If you are trying to link to a particular type of file and it is not returning your desired response, chances are that the server needs to have the type configured. Talk to your system administrator about getting them to add the content type. Here is a list of common types that often need configuring:

Content Type	Description
Application/msword	Microsoft Word Document
application/octet-stream	Unclassified binary data (often used for compressed file or executable)
application/pdf	PDF Document
application/wordperfect6.0	WordPerfect 6.0 Document
application/zip	ZIP archive
audio/x-wav	WAV audio format
audio/midi	MIDI audio format
audio/x-pn-realaudio	RealAudio
image/gif	GIF image format
image/jpeg	JPEG image format
image/png	PNG image format
text/html	HTML document
text/plain	Plain text
video/mpeg	MPEG video format
video/quicktime	QuickTime video format
video/x-msvideo	AVI video format

Another method of ensuring that your file is properly sent to the client is to compress it into a standard compression format. Virtually all servers are set to handle the .zip extension and it is widely recognized by users.

Some servers (NCSA, Apache, and others) can be configured to support user-configured content types. Details are server dependent, so consult your server admin or documentation.

Note that Internet Explorer incorrectly ignores server-provided MIME types, so it sometimes "does the right thing" when the server is misconfigured. Other browsers correctly heed the server-provided MIME types, so they will reveal server misconfigurations.

5.3. How do I force the browser to show/play a file itself?

You can't, because the Web doesn't work that way.

When the browser requests a document (hypertext, image, audio, multimedia, etc.), the server tells the browser what type of file it is. The server should be configured to identify a document's media type properly, as described in the answer to the previous question.

The browser then decides what to do with it. Different browsers are able to and configured to display different types of documents themselves. Browsers are usually configured to handle other file types by using helper applications or by offering to save the file. There is no way for a web author to override the way the browser is configured to handle any given type of file.

5.4. How do I force the browser to download a file?

You can't, because the Web doesn't work that way.

As explained in the answer to the previous question, the server is responsible for identifying a document's media type properly, and the browser is responsible for deciding how to handle the document (based on its media type). There is no way for a web author to override the way the browser is configured to handle any given type of file.

Most browsers allow the user to download to disk if they want to. If the file must be saved to disk, if there is absolutely NO other way to handle it, the MIME type should be "application/octet-stream".

5.5. How do I make animated GIFs?

Check out the following resources:

5.6. How can I create a thumbnail image that is linked to the full-sized image?

A thumbnail image is just a copy of the full-sized image that has been modified to reduce the size of the file. It is linked to the full-sized image with a normal link:

<A HREF="full-sized.jpg"><IMG SRC="thumbnail.jpg" ALT=<var>...</var>></A>

There are several techniques for reducing the size of the file for the thumbnail image, including

resampling/resizing the image to create a physically smaller image;
cropping the image to remove less significant parts of the image;
reducing the image quality to increase compression ratios; and
reducing the size of the color palette (e.g., converting to greyscale).

Thumbnail images can use multiple techniques simultaneously. For example, Jakob Nielsen advocates "Relevance-Enhanced Image Reduction", which combines resampling/resizing and cropping.

5.7. Why am I getting a colored whisker to the left or right of my image?

This is the result of including "white space" (spaces and newlines) before or after an IMG inside an anchor. For example:

<A HREF=...> <IMG SRC=...> </A>

will have white space to the left and right of the image. Since many browsers display anchors with colored underscores by default, they will show the spaces to the left and right of the image with colored underscores.

Solution: don't leave any white space between the anchor tags and the IMG tag. If the line gets too long, break it inside the tag rather than outside it, like this:

<A HREF=...><IMG SRC=...></A>

Style checkers such as Weblint will call attention to this problem in your HTML source.

5.8. How can I display random images?

There are two basic approaches. The most cache-friendly method is to use a normal IMG tag that refers to a CGI script that randomly redirects the browser to one of several images. There is an example of such a CGI script at URL: http://www.foad.org/%7Eabigail/CGI/random_images.html. See the CGI Programming FAQ URL: http://www.htmlhelp.com/faq/cgifaq.html for more information about CGI.

The second method is to generate the HTML dynamically using a mechanism like Server Side Includes (SSI) or CGI. This method is less cache-friendly, but it does allow the surrounding markup (e.g., HEIGHT and WIDTH attributes, or the URLs for linked/image-mapped images) to vary with the image. If your server supports SSI, the details can be found in your server documentation.

5.9. Why are my images coming out all wrong or not loading?

Most likely you forgot to close a quote at the end of the SRC attribute. Alternatively, perhaps you used a ">" character in an ALT text or somewhere else inside a tag. Although this is legal, several older browsers will think the tag ends there, so the rest is displayed as normal text.

Validators will show you any syntax errors in your markup, but checkers such as Weblint and HTMLchek can show you where you are liable to provoke known browser bugs. See also the answer to "How can I check for errors?"

Here are some other possibilities:

Your web authoring software may have used file URLs (e.g., file:C:pathimage.gif). If so, then you should replace them with relative URLs (e.g., image.gif) or http URLs (e.g., http://server/path/image.gif).
Your images may be in a format that is not widely supported, like Microsoft's BMP format or AOL's ART format. Be sure to save your images in a widely supported format like GIF, JPEG, or PNG. (Note that you need to convert the image data format; you can't just rename the file.)

5.10. How do I prevent people from saving my images?

You can't. The image file is necessary for the browser to display your document; you must send it to the browser. Even if a particular browser doesn't have a "Save Image" feature, there are many that do, and someone can always retrieve the image file by hand (using telnet) or from the browser's cache.

There are tricks that make it more difficult for some readers to save your images. However, just as with tricks that try to hide HTML source, these tricks cause various problems for law-abiding users and can't really prevent thieves from saving your images.

5.11. Can I put markup in ALT text?

If you want to know how to write good ALT texts without markup, please see Alan Flavell's essay on choosing ALT texts at URL: http://www.htmlhelp.com/feature/art3.htm.

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

For more on the EMBED element, see URL: http://developer.netscape.com/docs/manuals/htmlguid/tags14.htm#1286379. For more on the BGSOUND element, see URL: http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/bgsound.asp. 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>

5.13. How can I strip all the HTML from a document to get plain text?

Many browsers have a "Save As..." function that allows you to specify plain text as the output format. Another approach is to select all the text, copy it to the clipboard, and paste it into an editor.

The CoffeeCup HTML Editor has an HTML Stripper built in.

Lynx users can use "lynx -dump http://..." on the command line to print to file and append a list of referenced URLs as footnotes. If you want the output file without the footnotes, use the "p" command to "print" to a text file.

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.

CoffeeCup - HTML Editor, Flash & Web Design Software

CoffeeCup Support Knowledge Base