
Web Authoring FAQ
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 was created the Web Design
Group, and is posted regularly to the newsgroup comp.infosystems.www.authoring.html.
It was last updated on October 20, 2001.
It is the best "Frequently Asked Questions" source for Web Design that I could
find. My thanks to the WDG for making this an "open souce" document.
To return to the "Index" of this page, use the "Return to Top" link
beneath the sliding left menu.
- Preamble
- Copyright
and Disclaimer
- Where
is the latest version of this document?
- Credits
- Other Documents
- Where
can I learn about the WWW?
- Where
can I learn about HTML?
- Where
can I find a list of all the current HTML tags?
- Where
can I learn about CSS?
- Where
can I learn about SGML?
- Where
can I learn about XML (XSL)?
- Where
can I learn about XHTML?
- Where
can I learn about SSI ("SHTML")?
- Where
can I learn about CGI?
- Where can
I learn about JavaScript (LiveScript, JScript, EMCAScript,
DOM)?
- Getting
Started
- What
is everyone using to write HTML?
- How
can I show HTML examples without them being interpreted
as part of my document?
- How
do I get special characters in my HTML?
- Should
I put quotes around attribute values?
- How
can I include comments in HTML?
- How
can I avoid using the whole URL?
- Should
I end my URLs with a slash?
- How
can I check for errors?
- What
is a DOCTYPE? Which one do I use?
- Web
Publishing
- Where
can I put my newly created Web pages?
- How
can I get my own domain name?
- How
can I block my hosting service's advertisements?
- Where
can I announce my site?
- Is
there a way to get indexed better by the search engines?
- How
do I prevent my site from being indexed by search engines?
- How
do I redirect someone to another page?
- How
do I password protect my web site?
- How
do I stop my page from being cached?
- How
do I hide my source?
- How
do I hide my URL?
- How
do I detect what browser is being used?
- How
do I get my visitors' email addresses?
- Why
is my custom 404 message not displayed?
- Web
Design
- How
do I include one file in another?
- How
do I run a program on my web page?
- Which should
I use, &entityname; or &#number; ?
- Should
I use lower case or upper case for tags?
- For
what screen size should I write?
- Why does
my page display fine in one browser but incorrectly or
not at all in another?
- Why
does the browser show my plain HTML source?
- How
do I freeze the URL displayed in a visitor's browser?
- How
do I put links along the left side of my page?
- How
can I specify colors?
- How
do I change the color of some text?
- How
can I specify my scrollbar colors?
- How
can I specify fonts in my Web pages?
- Hyperlinks
- How
do I create a link?
- How
do I link to a location in the middle of an HTML document?
- How
do I create a link that opens a new window?
- How
do I create a link that opens a new window of a specific
size?
- How
do I create a button which acts like a link?
- How
do I create a back button on my page?
- How
do I create a button that automatically bookmarks my site?
- How
do I create a button that prints my page?
- How
do I create a link that sends me email?
- How
do I specify a subject for a mailto link?
- How
do I turn off underlining on my links?
- How
can I have two sets of links with different colors?
- How
can I make links change when the cursor is over them?
- Why
are my hyperlinks coming out all wrong or not loading?
- Why
does my link work in Internet Explorer but not in Netscape?
- Images
- How
can I display an image on my page?
- Which
image format should I use?
- How
do I link an image to something?
- How
can I create a thumbnail image that is linked to the full-sized
image?
- How
do I link different parts of an image to different things?
- How
do I eliminate the blue border around linked images?
- Why
am I getting a colored whisker to the left or right of
my image?
- How
do I eliminate the space around/between my images?
- Why
are my images coming out all wrong or not loading?
- How
do I make animated GIFs?
- How
can I display random images?
- How
do I prevent people from saving my images?
- Can
I put markup in ALT text?
- How
do I align an image to the right (or left)?
- How
can I specify background images?
- How
do I have a fixed background image?
- How
do I have a non-tiled background image?
- Other
Media
- How
do I let people download a file from my page?
- Why
did my link to a ... file download a bunch of characters
instead?
- How
do I force the browser to download a file? How do I force
the browser to show/play a file itself? How do I force
a file to be opened by a particular program?
- How
do I get an audio file to play automatically when someone
visits my site?
- How
can I strip all the HTML from a document to get plain text?
- Presentational
Effects
- How
can I make a custom rule?
- How
can I make a list with custom bullets?
- Where
can I get a "hit counter"?
- How
do I display the current date or time in my document?
- How
do I get scrolling text in the status bar?
- How
do I right align or justify text?
- How
do I indent the first line in my paragraphs?
- How
do I indent a lot of text?
- How
do I eliminate the margins around my page?
- How
do I do a page break?
- How
can I have a custom icon when people bookmark my site?
- HTML
Tables
- How do
I make a table which looks good on non-supporting browsers?
- Can
I nest tables within tables?
- How
can I use tables to structure forms?
- How
do I center a table?
- How
do I align a table to the right (or left)?
- Can
I use percentage values for <TD WIDTH=...>?
- Why
doesn't <TABLE WIDTH="100%"> use the full browser
width?
- Why
is there extra space before or after my table?
- Are
there any problems with using tables for layout?
- HTML
Forms
- How
do I use forms?
- How
do I get form data emailed to me?
- How
can I use tables to structure forms?
- How
can I eliminate the extra space after a </form> tag?
- How
do I make a form so it can be submitted by hitting ENTER?
- How
do I set the focus to the first form field?
- How
can I make a form with custom buttons?
- Can
I have two or more Submit buttons in the same form?
- Can
I have two or more actions in the same form?
- How
can I require that fields be filled in, or filled in correctly?
- Can
I prevent a form from being submitted again?
- How
can I allow file uploads to my web site?
- How
can I use forms for pull-down navigation menus?
- HTML
Frames
- How
do I create frames? What is a frameset?
- How
do I make a link or form in one frame update another frame?
- Why
do my links open new windows rather than update an existing
frame?
- How
do I update two frames at once?
- How
do I get out of a frameset?
- How
do I make sure my framed documents are displayed inside
their frameset?
- Is
there a way to prevent getting framed?
- How
do I specify a specific combination of frames instead of
the default document?
- How
do I remove the border around frames?
- How
do I make a frame with a vertical scrollbar but without
a horizontal scrollbar?
- How
do I change the title of a framed document?
- Why
aren't my frames the exact size I specified?
- Are
there any problems with using frames?
- Do
search engines dislike frames?
Copyright © 1996-2001
by the Web Design Group. This
material may be distributed only subject to the terms and conditions
set forth in the Open Publication License, v1.0 or later (the latest
version is presently available at http://www.opencontent.org/openpub/).
This information is offered in good faith and in the hope that it
may be useful, but it is not guaranteed to be correct, up to date,
or suitable for any particular purpose. The author accepts no liability
in respect of this information or its use.
The official home of this document on the Web is:
All information contained in this FAQ was originally compiled by
members of the Web Design Group, principally Arnoud "Galactus" Engelfriet,
John Pozadzides, and Darin McGrew. The Dutch translation of this
FAQ was prepared by Rijk van Geijtenbeek. The French translation
of this FAQ was prepared by Cédrik Rousseau.
Additional input has been provided by Boris Ammerlaan, Martin Atkins,
Lori Atwater, Alex Bell, Robert Breeser, Stan Brown, Roger Carbol,
Alex Chapman, Jan Roland Eriksson, Jon Erlandson, Mark Evans, Peter
Evans, Joe Faulds, Alan Flavell, Rijk van Geijtenbeek, Lucie Gelinas,
Bjoern Hoehrmann, Tina Marie Holmboe, Cliff Howard, Thomas Jespersen,
Peter Jones, Nick Kew, Jukka Korpela, Simon Lee, Nick Lilavois, Kelly
Martin, Neal McBurnett, Glen McDonald, Dan McGarry, Ken O'Brien,
Timothy Prodin, Steve Pugh, Liam Quinn, Colin Reynolds, Kai Schätzl,
Randal L. Schwartz, Doug Sheppard, Sue Sims, Toby Speight, Warren
Steel, Ian Storms, Peter Thomson, Daniel Tobias, Diane Wilson, and
no doubt others I've forgotten to credit.
The World Wide Web is "the universe of network-accessible
information (available through your computer, phone, television,
or networked refrigerator...)." The World Wide Web began as a networked
information project at CERN.
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.
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.
HTML 4
HTML 3.2
Browser-Specific Markup
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.
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).
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. XSL is
a stylesheet language for styling XML documents.
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.
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.
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.
JavaScript is a cross-platform, interpretted, object-oriented
language originally designed for client-side web scripting. The elements
of web pages can be manipulated via JavaScript as objects specified
by the Document Object Model (DOM). This enables dynamic
effects like image roll-overs and interactive effects like pages
that change in response to user input without being reloaded from
the server.
LiveScript was Netscape's initial pre-release name for
JavaScript. JScript is Microsoft's implementation of the
language. ECMAScript is a standardized version based upon
Netscape's JavaScript and Microsoft's JScript.
It seems that everyone has a different preference for which tool
works best for them. You may find lists of HTML authoring tools at:
Keep in mind that typically the less HTML the tool requires you
to know, the worse the output of the HTML. In other words, you can
always do it better by hand if you take the time to learn a little
HTML.
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.
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
write HTML is in US-ASCII (ANSI X3.4, a 7-bit code), 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/>.
ISO-8859-1 is intended for English, French, German, Spanish, Portuguese,
and various other western European languages. (It is inadequate for
many languages of central and eastern Europe and elsewhere, let alone
for languages not written in the Roman alphabet.) On the Web, these
are the only characters reliably 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. These
characters include the em dash, en dash, curly quotes, bullet, and
trademark symbol; neither the actual character (the single byte)
nor its &#nnn; decimal equivalent is correct in HTML. Also, ISO-8859-1
does not include the Euro currency character. (See the last paragraph
of this answer for more about such characters.)
On platforms whose own character code isn't ISO-8859-1, such as
MS-DOS and Mac OS, there may be problems: you 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, but this FAQ
is too small to cover other possibilities in detail. Mac users -
see the notes at <URL:http://www.htmlhelp.com/reference/charset/>.
If you run a web server (httpd) on a platform whose own character
code isn't ISO-8859-1, such as a Mac or an IBM mainframe, then 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 not in ISO-8859-1, you must use HTML
4 or XHTML rather than HTML 3.2, choose an appropriate alternative
character set (and for certain character sets, choose the encoding
system too), and use one method or other of specifying this. 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/~flavell/charset/>.
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".
A comment declaration starts with "<!", followed
by zero or more comments, followed by ">". 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:
<!-- Hello -->
<!-- Hello -- -- Hello-->
<!---->
<!------ Hello -->
<!>
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 "<!--", ends with "-->",
and does not contain "--" or ">" anywhere
in the comment. Do not put comments inside tags (i.e., between "<" and ">")
in HTML markup.
See <URL:http://www.htmlhelp.com/reference/wilbur/misc/comment.html> for
a more complete discussion.
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/>.
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.
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/>.
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/>.
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".
Many ISPs offer web space to their dial-up customers. Typically
this will be less than 5MB, and there may be other restrictions;
for example, many do not allow commercial use of this space.
There are several companies and individuals who offer free web space.
This usually ranges from 100KB up to 1MB, and again there are often
limitations on its use. They may also require a link to their home
page from your pages. For pointers to providers of free web space,
see <URL:http://www.freewebspace.net/>.
There are also many web space providers (aka presence providers)
who will sell you space on their servers. Prices will range from
as little as $1 per month, up to $100 per month or more, depending
upon your needs. Non-virtual Web space is typically the cheapest,
offering a URL like: http://www.some-provider.com/yourname/ For a
little more, plus the cost of registering a domain name, you can
get virtual web space, which will allow you to have a URL like http://www.yourname.com/.
If you have some permanent connection to the Internet, perhaps via
leased line from your ISP then you could install an httpd and operate
your own Web server. There are several Web servers available for
almost all platforms.
If you just wish to share information with other local users, or
people on a LAN or WAN, you could just place your HTML files on the
LAN for everyone to access, or alternatively if your LAN supports
TCP/IP then install a Web server on your computer.
The Internet Corporation for Assigned Names and Numbers (ICANN)
maintains a list of accredited registrars at <URL:http://www.icann.org/registrars/accredited-list.html>.
Any of the companies on this list can register a domain name for
you.
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.
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.
See <URL:http://www.robotstxt.org/wc/exclusion.html>.
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.)
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://httpd.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.
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://httpd.apache.org/docs/mod/mod_expires.html> for
information about setting the Expires header, and <URL:http://httpd.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/>.
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.
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.
With that said, it is possible to somewhat obscure URLs via a misfeature
of frames. See the answer to "How do I freeze the
URL displayed in a visitor's browser?"
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.
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.
If no browser displays your custom 404 messages, then your server
probably is not configured properly.
If only Internet Explorer ignores your custom 404 messages, then
you've been caught by its "friendly" HTTP
error messages. When a special HTTP response (e.g., a 404 response)
is shorter than 512 bytes, Internet Explorer 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
longer.
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. A preprocessor converts its source into a plain
HTML document that you publish on your server. In contrast, documents
that use server-side inclusion are processed every time the document
is retrieved from the server.
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 preprocessing, 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 preprocessing 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
<!--#include virtual="/urlpath/to/myfile.htm" -->
However, 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).
Another approach is to create a database-backed site, as described
in "Philip and Alex's Guide to Web Publishing" at <URL:http://www.arsdigita.com/books/panda/>.
A simple change to the database template instantly changes the whole
site.
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).
Browsers don't allow web authors to download and run arbitrary programs
on the client system, because that would be an unacceptable security
risk. Users would be unable to visit untrusted web sites safely.
You can link to an executable program file, allowing users to download
it. Users could then choose to run the program, assuming that it
runs on their operating systems, and that they are not concerned
about software viruses.
If you want to run the program on your web server, then check your
server documentation for configuration details for server-side programs.
General information is available in the CGI Programming FAQ: http://www.htmlhelp.com/faq/cgifaq.html
When client-side scripting (e.g., JavaScript) is enabled on the
client system (browser), it can be used to perform computations and
to manipulate the data on and appearance of a web page.
If you want to launch a specialized viewer for a particular kind
of file, say Adobe Acrobat Reader when the visitor follows a link
to a PDF file, then that should be handled automatically by the visitor's
browser, assuming that it is configured correctly. You need only
configure your server to send the file with the correct MIME type.
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
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.
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>.
There are several possibilities.
First, you may have incorrect HTML or CSS syntax. Browsers vary
in their ability to guess what you meant, and different browsers
recover differently from syntax errors. For example, Netscape Navigator
is especially sensitive to invalid table syntax, so a document with
such errors may look fine in other browsers, but not display at all
in NN. See the answer to "How can I check
for errors?"
Second, you may have valid HTML and CSS that different browsers
interpret differently. For example, the CSS specifications allow
conforming browsers to ignore certain properties and property values.
Also, it is not clear from the specifications 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. This includes
external style sheets, which should be sent as "text/css".
Fourth, you have have encountered a browser bug. For example, many
common browsers handle CSS better when HTML documents include optional
closing tags like </p> and </li>.
Likewise, Netscape Navigator handles nested tables better
when optional closing tags like </tr>, </th>,
and </td> are used, and some versions
ignore frameset documents that define only a single frame.
Another possibility is different user option settings in the browsers.
See also the answers to "Why are my hyperlinks
coming out all wrong or not loading?" and "Why are my images
coming out all wrong or not loading?"
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". Often, using the filename extension ".html" or ".htm" is
all that is necessary.
See the answer to "Why did my link
to a ... file download a bunch of characters instead?" for
more details.
If you are seeing this behavior while viewing your HTML documents
on your local Windows filesystem, then your text editor may have
added a ".txt" filename extension automatically. You should rename
filename.html.txt to filename.html so that Windows will treat the
file as an HTML document.
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.
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. Here is an example:
<table align="left">
<
tr><td><!-- links go here --></td></tr>
<
/table>
<
!-- content goes here -->
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.
Jakob Nielsen makes some interesting points about the design of
site navigation links in his column, "Is Navigation Useful" <http://www.useit.com/alertbox/20000109.html>.
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.
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/~mudws/font.html
More information about the FONT element can be found at: http://www.htmlhelp.com/reference/html40/special/font.html
Starting with version 5.5, Internet Explorer supports Microsoft's
proprietary CSS properties for scrollbar colors: scrollbar-3dlight-color, scrollbar-arrow-color, scrollbar-base-color, scrollbar-darkshadow-color, scrollbar-face-color, scrollbar-highlight-color, and scrollbar-shadow-color.
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. 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/~mudws/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 novelty font containing images of city buildings (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+. Navigator 6
does not support dynamic fonts. 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 advice on using fonts on the web, see Todd Fahrner's "Beyond
the FONT tag: Practical HTML text styling" at: <http://style.cleverchimp.com/font_size/livetext.html>
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
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>
<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.
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.
This is best done with a small form:
<FORM ACTION="[URL]" 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.
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/~abigail/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.
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.com/',
'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.
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.
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).
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.
If you want to turn off link underlining when you're looking at
pages in your browser, check your browser's configuration options.
In Netscape 3, for example, see Options | General Preferences | Appearance;
in Netscape 4 it's Edit | Preferences | Appearance | Colors; in Internet
Explorer see View | Options | General.
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}
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>
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 }
Your markup may include HTML syntax errors that affect links. For
example, there may not be quotes around attribute values that
require quotes, or there may be a missing closing quote at the
end of the HREF attribute value.
Perfectly valid markup may trigger common browser bugs. For example,
even though a ">" character is valid inside (quoted) attribute
values, several older browsers will think the tag ends there, so
the rest of the tag's attributes are displayed as normal text. Likewise, ">" characters
inside comments can trigger similar browser bugs. (See the answer
to "How can I include
comments in HTML?" for practical guidelines.)
As another 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.
It is also possible that your URLs are incorrect. For example, your
web authoring software may have used file URLs (e.g., file:C:\path\file.html).
If so, then you should replace them with relative URLs (e.g., file.html)
or http URLs (e.g., http://example.com/path/file.html).
See the answer to "How can I check
for errors?" HTML validators will find syntax errors in your
markup. HTML checkers/linters can find some syntax errors and valid
markup that is known to trigger some common browser bugs. Link
checkers can find links to incorrect URLs.
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/>
Use an IMG element. The SRC attribute specifies the location of the image. The ALT attribute
provides alternate text for those not loading images. For example:
<img src="logo.gif" alt="ACME Products">
For more information on images and the IMG element,
see: http://www.htmlhelp.com/reference/html40/special/img.html
Here is a simple rule of thumb:
Lots of colors? Use JPEG. Solid colors and sharp lines? Use GIF
(or PNG).
Different image formats compress the image data differently. Their
different compression algorithms have different strengths and weaknesses.
The GIF and PNG formats are excellent with images that have relatively
few colors and no gradations. Most small web graphics fall into this
category. These formats will compress these images well, and any
lettering, lines, and edges in the images will remain sharp.
On the other hand, the JPEG format is excellent with images where
colors blend smoothly from one to another. Photographs are good examples,
because they usually have many subtle shadows and variations of color.
For comparisons of the different image formats, see <URL:http://www.adobe.com/studio/tipstechniques/GIFJPGchart/main.html>
Note that AOL's cache proxy servers convert GIF and JPEG images
to their highly compressed ART image format (*.art) files, and by
default, AOL browsers are configured to use these small, low-quality
versions rather than the originals.
Just use the image as the link content, like this:
<A HREF=...><IMG ...></A>
|