Frequently Asked Questions: Useful Page

HTML
Frequently Asked Questions

How do I upload files to my site?
There are several different ways to get files or graphics onto a Web server so that
they can be accessed through the Internet. It depends on how your Web hosting
provider has set up their system, and free home page services like Geocities and
Angelfire may have different procedures than full-fledged Internet Service
Providers like AOL or Netcom. All I can suggest is that you contact your service
provider, or look for more detailed information in their online help files.
Where can I find more detailed information?
My Bare Bones Guide to HTML is designed to be a concise cheat sheat, not a
step-by-step tutorial. The HTML guides section of my WWW Help Page links to
several more detailed resources. The World Wide Web Consortium maintains the
official HTML specification, and has many useful resources on its site.
How do I put pictures on my page?
You first need to create the image in a graphics program. The standard format for
Web page graphics is GIF, although JPEG is also supported by the major
browsers today. The next step is to put the graphic onto your Web server. How
you do this depends on your Web hosting provider, but it will usually be the same
way you upload your Web pages to the server. To display the graphic on your
page, use the tag <img src="filename.gif">. Replace "filename.gif" with the name and
path to your image file. If the file is in the same directory as the Web page, you
just need the name of the file; if it is somewhere else you need to use the directory
or full URL of the file.
How do I put sounds on my page?
There are several ways to add sound files to your page that play automatically
when the page is loaded. The makers of Crescendo, a plugin for playing MIDI
sound files, have a useful page explaining various options and how to implement
them.
Is there a site that shows which tags work on which browsers?
There have been several attempts to do this, but I'm not aware of any really good
source of comparisons between the browsers. The trouble is that there are many
different versions of each browser, and many different tags. All current browsers
should support the tags in the official HTML 3.2 specification, but the major ones
also support nonstandard tags and sometimes have slightly different
implementations. One place that has fairly good compatibility info is
Browsercaps.
My page looks good on one browser, but not on another.
There are slight differences between browsers, such as Netscape Navigator and
Microsoft Internet Explorer, in areas such as page margins. The only real answer
is to use standard HTML tags whenever possible, and view your pages in multiple
browsers to see how they look.
How do I specify page breaks in HTML?
No license: PDF produced by PStill (c) F. Siegert - http://www.this.net/~frank/pstill.html

There is no way in standard HTML to specify where page breaks will occur when
printing a page. HTML was designed to be a device-independent structural
definition language, and page breaks depend on things like the fonts and paper
size that the person viewing the page is using.
The colors on my page look different when viewed on a Mac and a PC.
The Mac and the PC use slighly different color palettes. There is a 216 "browser
safe" color palette that both platforms support; the Microsoft color picker page
has some good information and links to other resources about this. In addition, the
two platforms use different gamma (brightness) values, so a graphic that looks
fine on the Mac may look too dark on the PC. The only way to address this
problem is to tweak the brightness of your image so that it looks acceptable on
both platforms.
How do you create tabs or indents in Web pages?
There was atag proposed for HTML 3.0, but it was never adopted by any major
browser and the draft specification has now expired. You can simulate a tab or
indent in various ways, including using a transparent GIF, but none are quite as
satisfactory or widely supported as an official tag would be.
How do I upload files to my site?

There are several different ways to get files or graphics onto a Web server
so that they can be accessed through the Internet. It depends on how your
Web hosting provider has set up their system, and free home page services
like Geocities and Angelfire may have different procedures than full-
fledged Internet Service Providers like AOL or Netcom. All I can suggest
is that you contact your service provider, or look for more detailed
information in their online help files.
Where can I find more detailed information?
My Bare Bones Guide to HTML is designed to be a concise cheat sheat,
not a step-by-step tutorial. The HTML guides section of my WWW Help
Page links to several more detailed resources. The World Wide Web
Consortium maintains the official HTML specification, and has many
useful resources on its site.
How do I put pictures on my page?
You first need to create the image in a graphics program. The standard
format for Web page graphics is GIF, although JPEG is also supported by
the major browsers today. The next step is to put the graphic onto your
Web server. How you do this depends on your Web hosting provider, but it
will usually be the same way you upload your Web pages to the server. To
display the graphic on your page, use the tag <img src="filename.gif">.
Replace "filename.gif" with the name and path to your image file. If the
file is in the same directory as the Web page, you just need the name of the
file; if it is somewhere else you need to use the directory or full URL of the
file.
How do I put sounds on my page?
There are several ways to add sound files to your page that play
automatically when the page is loaded. The makers of Crescendo, a plugin
for playing MIDI sound files, have a useful page explaining various

options and how to implement them.
Is there a site that shows which tags work on which browsers?
There have been several attempts to do this, but I'm not aware of any really
good source of comparisons between the browsers. The trouble is that there
are many different versions of each browser, and many different tags. All
current browsers should support the tags in the official HTML 3.2
specification, but the major ones also support nonstandard tags and
sometimes have slightly different implementations. One place that has
fairly good compatibility info is Browsercaps.
My page looks good on one browser, but not on another.
There are slight differences between browsers, such as Netscape Navigator
and Microsoft Internet Explorer, in areas such as page margins. The only
real answer is to use standard HTML tags whenever possible, and view
your pages in multiple browsers to see how they look.
How do I specify page breaks in HTML?
There is no way in standard HTML to specify where page breaks will
occur when printing a page. HTML was designed to be a device-
independent structural definition language, and page breaks depend on
things like the fonts and paper size that the person viewing the page is
using.
The colors on my page look different when viewed on a Mac and a PC.
The Mac and the PC use slighly different color palettes. There is a 216
"browser safe" color palette that both platforms support; the Microsoft
color picker page has some good information and links to other resources
about this. In addition, the two platforms use different gamma (brightness)
values, so a graphic that looks fine on the Mac may look too dark on the
PC. The only way to address this problem is to tweak the brightness of
your image so that it looks acceptable on both platforms.
How do you create tabs or indents in Web pages?
There was atag proposed for HTML 3.0, but it was never adopted by any
major browser and the draft specification has now expired. You can
simulate a tab or indent in various ways, including using a transparent GIF,
but none are quite as satisfactory or widely supported as an official tag
would be.
Advanced HTML FAQ
GENERAL
• How to print the current document programmatically?
• Can I calculate the load time of my HTML file?
• Why the browser changes the frame size when I resize the window?
• How can I always load a page from the server and not from the cache?

• Can I have a scroll bar within a table cell?
• What is a KEYGEN tag ?
• Is their a tag to declare page break?
• Can I prevent the viewer from seeing the HTML source code and saving it?
• What is the character set that can be used with HTML document?
• Can I open mailbox or news by clicking on the link?

How to print the current document programmatically?
Netscape Communicator introduces a Javascript way to do this using:
javascript:self.print()
This will simulate the print button of Communicator and display the Print dialog box.
This facility is not available with the Navigator 3.0
Sample code:
<A HREF="javascripe:self.print()"> Print Current Page</A>
Can I calculate the load time of my HTML file?

One possible solution may be to calculate the time difference between the start and the
completion of loading.
START time can be noted at the beginning of the HTML file and the END ( at the end of
Loading) time can be noted using onLoad event as it is called after Loading. Then take the
difference.
Sample code:
<HEAD>
<SCRIPT>
Start = new Date()
function NoteTime()
{
Stop = new Date()
Diff = Stop.getTime() - Start.getTime();
alert(Diff);
}
</SCRIPT>
</HEAD>
<BODY onLoad='NoteTime()'>
.....................
.....................
</BODY>
Why the browser changes the frame size when I resize the window?
Although we can define the sizes of the frames with ROWS or COLS attribute, but browser can
always approximate some of values to make the total height of rows equal to the height of the
window or the total width of the columns equal to the width of the window. Thus it is not possible
to place the frames exactly with the pixel definitions. Communicators Layer concept will provide
solution to this problem.
How can I always load a page from the server and not from the cache?
The possible solutions to this problem are:
1. If downloading file comes with pragma: no-cache header then it will not be stored into cache.
This can be achieved by having
<HEAD>
<META HTTP-EQUIV = "Pragma" CONTENT="no-cache">
</HEAD>

in the downloading file.
Thus each time browser will load it from the server.
2. From client side you can achieve it by setting memory and disk cache size to ZERO.
Can I have a scroll bar within a table cell?
No, it is not possible to have a scroll bar within a table cell.
What is a KEYGEN tag ?
The KEYGEN tag facilitates the generation of key material and submission of the public key as
part of an HTML form. Syntax for KEYGEN tag is:
<KEYGEN NAME="name" CHALLENGE="challenge">
The following URLs will provide more information on KEYGEN tag:
http://home.netscape.com/eng/security/ca-interface.html
http://developer.netscape.com/docs/manuals/htmlguid/tags2.htm#1076160
Is their a tag to define page breaks?
Currently there are no tags available to define the page breaks or to control the printing operation.
It is possible to print a page with javascript print() method but not to control the operation.
There are some new steps to provide solution to this using CSS Printing Extensions. For more
information refer to CSS Printing Extensions.
Can I prevent the viewer from seeing the HTML source code and saving it?
No, It is not possible to stop the user from viewing the source code directly or from saving the
code to his local disk.
The indirect way is to have a .js file, that writes the document part. Include it in the Script tag and
call this while loading the file.
What is the character set that can be used with HTML document?
HTML uses the ISO 8859-1 (Latin 1) character set for the encoding of documents. Description
about the ISO 8859-1 character set is available at ISO 8859-1 character set overview document.
Can I open mailbox or news components by clicking on the link?
It is possible to open Mail and News components by specifying the URL as 'mailbox:folder' and
'news:folder'.
Sample code:
<a href="mailbox:Inbox">MailBox</a><BR>
<a href="news:netscape-devs-adv-html">Newsgroup</a>
FORMS
• How to disable the ENTER key from activating the form submission?
• Is there a way to submit a form and ignore the response?
• Can I send form data to an email address by clicking on Submit button?
• Is it possible to send the form data to the plug-in?
• Can I change font for the Input text element?
• How can I upload a file to server?
• Can I change the target depending on the form data?
• How to change the name-value pair of the form elements?
• How to change dynamically the number of name-value pairs sent to action from a form?

• How can I give a WAIT message to user while he submits the form and waiting for the response?
• Can I use 'Accept' attribute with the form input type File?
How to disable the ENTER key from activating the form submission?
This can be achieved by submitting the form using the onClick event handler instead of onSubmit
event handler. It is necessary to return false on event handler onSubmit to prevent submit on
hitting ENTER key.
Sample code:
<FORM NAME="form1" OnSubmit="return false">
<INPUT NAME="entry"> <P>
<INPUT TYPE="submit" VALUE="SubmitForm"
onClick = "document.form1.submit()">
<P>
</FORM>
Is there a way to submit a form and ignore the response?
After submitting the form data to server, it will send the response to the client. This will update
the current display on client side. However it is possible to retain the current display and ignore
the response from the server. This can be achieved by targeting the response to a dummy frame.
Sample code:
<FRAMESET ROWS="100%,*">
<FRAME SRC="Form.html" NAME="FormFrame">
<FRAME SRC=about:blank NAME="DummyFrame" NORESIZE>
</FRAMESET>
Then in the Form.html,
<FORM METHOD="POST" ACTION="xxxxx" TARGET="DummyFrame">
Thus, result will be put into non-vizible frame without affecting the form display.
Can I send form data to an email address by clicking on Submit button?
One can send form data to email address by setting the ACTION attribute to 'mailto:emailid'.
Sample code:
<FORM METHOD="POST" ACTION="mailto:reader@company.com" >
Is it possible to send the form data to the plug-in?
Yes, It is possible to send the form data to the local plug-in. Assign the filename invoking the
plug-in to the form's ACTION with get method.
i.e., <FORM METHOD="GET" ACTION="filename.xyz" >
// to invoke the plug-in supporting *.xyz files
This will send the form data along with the URL. The data will be at NPStream parameter of
NPP_NewStream function.
Can I change font for the Input text element?
With Navigator 3.0 or below it is not possible to use font tag with Input, Select elements. With
Communicator it is possible to change the fonts of these elements using Font tag.
How can I upload a file to server?
You can upload a file using <INPUT TYPE='file'> within a FORM tag. This will allow you to
select files through browse button.
To upload more than one file it needs to define multiple <INPUT TYPE='file'> tags as it is not
possible to choose multiple files through a single INPUT tag.
Can I change the target frame depending on the form input?
Yes, It is possible to change the target frame using javascript target property. Use onSubmit event
handler to define the target's

depending on the form data and then return true.
Following code gives an example:
.................
function Check()
{
if(document.form1.text1.value=='abcd')
document.form1.target='frame1'
else
document.form1.target='frame2'
return true;
}
...............
<form name='form1' action="action_name" target=_top onSubmit='return Check()'>
How to change the name-value pair of the form elements?
It is possible to change the name and value's of the form elements using javascript. This will be
helpful to define different sets of name-value pairs to be sent to the action code.
Sample code:
if (code == 'flower')
document.form[0].elements[0].name= 'rose'
document.form[0].elements[0].value= 10
if (code == 'fruit')
document.form[0].elements[0].name= 'apple'
document.form[0].elements[0].value= 100
How to change dynamically the number of name-value pairs sent to action from a form?
One more use of checkbox is that, the name value pair corresponding to this is sent only if it is
CHECKED. Thus define the elements that you want to select and send dynamically as checkboxes
and then programmatically assign them as checked to post. Javascript gives a way to mark the
checkboxes. i.e., by assigning document.form1.check1.checked = 1;
How can I give a WAIT message to user while he submits the form and waiting for the response?
If the document URL is changed immediately after submission of the form, then the link to the
URL specified by action attribute will stop. Thus directly it is not possible to show the wait
message file in the same frame or window. Two possible solutions to this are:
1. Display the message in some other frame
2. Copy the form data into a similar form in an hidden frame and send it targeting the response to
original frame and meanwhile display the WAIT message.
Can I use 'Accept' attribute with the form input type File?
ACCEPT attribute is a feature of Input tag of file type. This allows to list all media types or type
patterns for the input. ACCEPT attribute can't be used, as is not implemented. Future versions may
support it.
For more information on this, please refer to RFC 1867.
FRAMES
• Is it possible to control backward and forward movements in each frame?
• How to load two independent frames from one link?
• Why parent property does not refer to the parent window?
• Why window.opener.frame[i] is not referring to a frame within an opener window?
• When tried to read the URL of a frame some times it gives [objet Location] instead of actual
location. Why?

• Is there any way to allow a frame to have a vertical scroll bar if it needs one, but never to have a
horizontal scroll bar?
Is it possible to control backward and forward movements in each frame?
It is not possible to handle the backward and forward movements of each frame using toolbar
Back & Forward. It can be achieved by having our own Back/Forward buttons for each of the
frames.
Sample code:
<FORM NAME="TestHist">
Frame1:
<INPUT TYPE="button" NAME="fram1"
value=">>"onClick="parent.frame1.history.back()">F1
value="<<"onClick="parent.frame1.history.forward()">F1
<BR>
Frame2:
value=">>"onClick="parent.frame2.history.back()">F2
value="<<"onClick="parent.frame2.history.forward()">F2
</FORM>
How to load two independent frames from one link?
It can done by specifying the both the actions in the same event.
Sample code:
<INPUT TYPE="button" NAME="menuframe" value="Load frames"
onClick="parent.mainframe.document.location=
'http://home.netscape.com';
parent.submenuframe.document.location=
'file:///c|/LocalDir/SubMenuFile.htm'">
Why parent property does not refer to the parent window?
The parent property refers to the FRAMESET window of a frame. If you are trying to refer to the
window opener then one should use opener property. If a source document opens a destination
window by calling the open method, then opener property specifies the window of the source
document. The opener property is evaluated from the destination window.
Why window.opener.frame[i] is not referring to a frame within an opener window?
You can refer to the frames of the opener window by :
window.opener.parent.frame[i]
Because window.opener refers to the frame that has opened the window and thus it is necessary to
use parent property to refer the frameset window. From this window it is possible to refer any of
the frames.
When tried to read the URL of a frame some times it gives [objet Location] instead of actual
location. Why?
This is due to security reasons. If the frame document is of the local server then the URL can be
read. Otherwise, if it is from some other server then the URL or location properties will give string
as [objet Location] .
Is there any way to allow a frame to have a vertical scroll bar if it needs one, but never to have a
horizontal scroll bar?
There is no separate controls for the vertical and horizontal scroll bars. The FRAME tag attribute
SCROLLING="yes|no|auto" is for both and thus it is not possible to have them in two different
modes.
IMAGES
• Can I display the image only if date is valid?

• How to open file using imagemaps?
• How can I link to two URLs by clicking on a Imagemap?
• How to grab the coordinates of a spot clicked on an image map?
• What happens if I assign fractional values to the height and width attributes?
Can I display the image only if date is valid?
This is a way of controlling the image display depending on the date. The following JavaScript
code shows how to display the image only from mm1/dd1/yy1 to mm2/dd2/yy2,
<SCRIPT>
function DisplayIfDateValid(url)
{
today = new Date()
from = new Date(yy1,mm1,dd1)

until = new Date(yy2,mm2,dd2)
if((until.getTime()> today.getTime()) &&(from.getTime()< today.getTime()))

document.writeln('<IMG SRC=\"'+url+'\">')
}
</SCRIPT>
How to open file using imagemaps?
In Imagemaps the Area tag will define the coordinates and the respective URL to be invoked on
mouse click.
Here is a sample code that shows how to open files by clicking on imagemapes. It is possible to
open File1 or File2 by clicking the mouse button on I or II half of Img1.
<MAP name="FileMap">
<AREA COORDS='0,0,100,100' HREF='file:///c:/File1.html'>
<AREA COORDS='100,0,200,100' HREF='file:///c:/File2.html' >
</MAP>
<IMG SRC="file:///c:/Img1.gif" WIDTH='200' Height='100' border='0' USEMAP='#FileMap'>

How can I link to two URLs by clicking on a Imagemap?
With imagemap you can link to a URL by assigning to HREF attribute. If it is required to open a
file and play sound on a single click, here is a trick. Call JavaScript function like this:
<AREA COORDS="0,0,100,100" HREF="JavaScript:OpenLocs('URL1','URL2')">
Where OpenLocs function opens two links:
function OpenLocs(location1,location2)
{
parent.frame1.location.href = location1;
parent.frame2.location.href = location2;
}
How to grab the coordinates of a spot clicked on an image map?
Specify the image as a standard image map with ISMAP attribute and with this whenever you
click on the image, Navigator requests URL of the form
URL?x,y
Here x and y are the horizontal and vertical coordinates of the mouse pointer when clicked. These
coordinates are in pixels from top-left of the image. Here is a code that grabs and displays the
coordinates.

<A HREF="samefile.htm"><IMG SRC="img.gif" ISMAP></A>
<script>
str = location.search
commaloc = str.indexOf(",")
alert(str.substring(1,commaloc)+","+str.substring(commaloc+1,str.length))
</script>
What happens if I assign fractional values to the height and width attributes?
The browser will truncate it. If you want to round the values, use javascript method
Math.round(number).
LAYERS
• Can I make a selection to change the layer in another frame?
• Why the layer having applet always appears at the top?
• Can I have layer behind the body elements?
• I am not able to create layers dynamically, why?

Can I make a selection to change the layer in another frame?
The following JavaScript function 'MoveTop' can be called from another frame (provided both
have same parent) to take the overlapped layer 'topLayr' to the top of 'prvLayr'.
<SCRIPT>
function MoveTop()
{
parent.LayerFrame.document.topLayr.moveAbove(parent.LayerFrame.document.prvLayr);
}
</SCRIPT>
Why the layer having applets, plug-ins, forms always appears at the top?
There are special limitations on applets, plug-ins and form elements inside layers. As these
elements uses the native window.
Please refer here for more documentation:
Using Applets, Plug-ins and Forms in Layers
Can I have layer behind the body elements?
No, It is not possible to have a layer behind the body elements.
I am not able to create layers dynamically while loading the page, why?
It is possible to create a new Layer object by using the new operator only after the page has
completely finished loading. For more information on creating layers dynamically
The other HTML FAQ

Author: Arnoud "Galactus" Engelfriet <galactus@htmlhelp.com>
This is an attempt to answer some of the more frequently asked questions in
comp.infosystems.www.authoring.html. It is an addition to the WWW FAQ and
concentrates on basic questions for the most part. You will find browser-specific tricks in
here, with notes on their limitations and compatibilities with older versions and other
browsers.
1. How do I indent the first line in my paragraphs?

2. How do I indent a lot of text?
3. Can I put markup in ALT text?
4. How do I include one file in another?

5. How do I get scrolling text in the status bar?
6. How do I hide my source?
7. How can I make a custom rule, or a list with custom bullets?
8. How do I display the current date or time in my document?
9. For what screen size should I write?
10. How do I get my visitor's e-mail addresses?

11. How do I do a pagebreak?
12. How do I make a table which looks good on AOL and Prodigy?
13. How do I center a table?
14. How do I make animated GIFs?
15. Is there a way to get indexed better by the search engines?
16. How do I redirect someone to my new page?

17. How do I get a back button on my page?
18. How do I force a download?
19. Why is my binary file not downloaded, but shown on the screen?
20. How do I use an image instead of the standard submit button?
21. How do I get a so-and-so character in my HTML?
22. How do I get a counter?

23. How do I detect what browser is being used?
24. I want to get an audio file to play automatically when someone visits my site!
25. Should I put quotes around attribute values or not?
26. Should I use lower case or upper case for tags?
27. My images/hyperlinks are coming out all wrong, or don't load! What's up?
28. How do I get a button which takes me to a new page?

How do I indent the first line in my paragraphs?
This isn't really possible in a reliable way, until style sheets are more widely supported.
At this moment, there are several browser-specific kludges and tricks available, but these
are not guaranteed to work.
1) Use a number of ( ) characters. Netscape and related browsers do not
collapse these, like normal spaces, so this appears as an indent in these browsers. Other
browsers can display it as one space.
2) Put a <DD> at the beginning of the line. This is syntactically invalid, but Netscape
works around this by indenting the line at this point. Of course, other browsers will
handle this differently, and there is no guarantee that Netscape will keep doing this.
3) Use a blank, transparent GIF, using WIDTH and HEIGHT to indicate the desired
whitespace. This is a very ugly solution, as it only works if you have image loading on,
otherwise you get the "Image" icon at the beginning of the line. Not all browsers support
resizing using these attributes, and you can only "indent" a certain number of pixels, not
characters. So the amount of "indentation" varies with the font size used to display your
document.
How do I indent a lot of text?

Again, there is no reliable way to do this. Netscape will indent text inside a
<BLOCKQUOTE>, but other browsers don't have to do this. These could show the text
in italics, or perhaps with quotation marks around the text. This could come out very
strange.
An alternative is to use <DL> without <DT> and <DD>, which is invalid HTML, but
several browsers work around this error by indenting the text inside it. This is not
guaranteed to work.
If you are willing to use tables for layout purposes, there is another option. Create a one-
cell table, as follows:
<CENTER>
<TABLE width="80%">
<TR><TD><DIV align=left>

</DIV>
</TD></TR>
</TABLE>
</CENTER>
A drawback to this solution is that very long blocks inside a table may take a while to
download and may not appear until the entire table has been downloaded. Another
drawback is that it may force users to resize their viewing window after they have
become accustomed to their preferred settings.
Can I put markup in ALT text?

No. Character entities (©, &#nnn; and such) are permitted, though.

If you want to know how to write good ALT texts without markup, please see Alan
Flavell's essay on choosing ALT texts.
How do I include one file in another?

Use server-side includes, if your server supports them. Ask your Webmaster if this is the
case, and if so, what the exact syntax is for your server.
Since server-side includes make the document slower, they are not always desirable. If
your documents only have a static footer, which doesn't change every day, you might be
better off by using an editor which can insert files in the current document, or a
preprocessor. The C preprocessor can do this, but there are also several HTML-specific
preprocessors available. I recommend Orb 1.3.
How do I get scrolling text in the status bar?

This is not an HTML question, it's done with a 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.
How do I hide my source?

You can't. The source is necessary for the browser to display your document. You have to
send the complete, unencrypted source to the browser. Even if a particular browser
doesn't have a "View source" option, there are many that do, and you can always retrieve
the document by hand (using telnet) to get its source. Or check the browser's cache.
You can of course put a few hundred empty lines above the actual source, then newbies
who don't see the scrollbars will think there is nothing there.
How can I make a custom rule, or a list with custom

bullets?
There was a proposal in the now-expired HTML 3 draft to handle exactly this: just add
SRC to the <HR> or <UL> tag, indicating where the image can be found. But until this is
more widely supported, you have to use <IMG> for the rule, with a lot of "--" characters
as ALT text for text browsers, and using a <DL> with only <DD> tags for each item.
Make sure you use ALIGN for the image, which should go at the beginning of the item,
of course. This isn't as beautiful as a "real" list.
An alternative is using a two column table, with the bullets in the left column, and the
text in the right. But this won't work well on non-table supporting browsers.
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 as most people already
have one or more clocks on their screen, why display another one?
For what screen size should I write?

HTML does not depend on screen size. The text will be wrapped by the browser when
the end of the screen is encountered. The only exception to this is when you use <PRE>-
formatted text, which will only wrap at the line breaks you indicate. So make sure these
lines are no longer than 70 characters, otherwise text mode users will see ugly line breaks
on their terminals. And users of graphical browsers might have to scroll horizontally to
see the rest, which is one of the most hated things to do when you read a document.
Of course, an image cannot be wrapped, so you have to be careful with that. 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!
How do I get my visitor's e-mail 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.
In Netscape 2.0, it was possible to automatically submit a form with a mailto as action,
using Javascript. This would send e-mail 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 is fixed in Netscape 2.01.
The most reliable way is to put up a form, asking the visitor to fill in his e-mail address.
If you offer him something in return, he will most likely do it.
How do I do a pagebreak?
You don't. HTML is not a page layout language. It's up to the browser to decide where
and how to insert page breaks when the document is being printed.
However, style sheets (not widely supported yet, although Microsoft's Internet Explorer
is beginning to use it) will include support to indicate preferred points for page breaks,
probably somewhat like the way LaTeX handles this.
How do I make a table which looks good on AOL and

Prodigy?
The best way is probably to include a version in preformatted text. This can be seen by
any browser, including Lynx.

If you absolutely must have a table, check out Alan Flavell's document on tables for a
good discussion.
How do I center a table?

The "correct" way of doing it is <TABLE ALIGN=CENTER>, but this doesn't work in
several popular browsers. Put <CENTER> around the entire table for these browsers.
This causes some problems with browser that do support CENTER but not tables, such as
Lynx. In these browsers, the contents of the cells is now displayed centered, which is not
what is intended. To avoid this, you can put the cell's contents in <P ALIGN=left> or
<DIV ALIGN=left> depending on the amount of text in the cell.
How do I make animated GIFs?

Ask on the comp.infosystems.www.authoring.images group.
Is there a way to get indexed better by the search

engines?
Yes. Put these two statements in the <HEAD> part of your documents:
<META NAME="keywords" CONTENT="keyword keyword keyword keyword">
<META NAME="description" CONTENT="description of your site">
Both may contain up to 1022 characters. If a keyword is used more than 7 times the
keywords tag will be ignored altogether. Also, you can't put markup (other than entities)
in the description or keywords list. Infoseek and Alta Vista are using this.
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 way to do this. You can of course also simply put up a small page with a text
like "This page has moved to http://new.url/, please adjust your bookmarks".
A Netscape-only solution, which doesn't work on 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.)
How do I get a back button on my page?

In HTML, this is impossible. Going "back" means that you go to the previous page in
your history. You might be able to create a link to the URL specified in the
"HTTP_REFERER" environment variable in your document, but that only creates a link
to a new location in your history. Even worse, the information in that variable can be

plain wrong. Some browsers incorrectly send the variable when you use a bookmark or
type in an URL manually, and some don't send that variable at all. Then you would end
up with an empty link.
A JavaScript could use "history.back()" to do this, but this only works in Netscape 2.
For a more detailed explanation, please see Abigail's "Simulating the back button".
How do I force a download?

You can't. Next question, please.
Ok, I'll explain anyway. :-) When someone downloads a document, the server tells the
browser what type of file it is. The browser then picks the appropriate helper application,
or displays it himself. If the server doesn't know the file type, it tells the browser that the
file is "text/plain", or just plain text. You will have to ask your server admin to configure
this particular file with the MIME type you want.
"Forcing" a download is not what you are supposed to do. After all, what is more
convenient than having the proper application started when I download a particular file?
Browsing through a download directory can be quite a pain. And most browsers allow the
user to download to disk if they want to.
If the file must be saved to disk, as there is absolutely NO other way to handle it, the
MIME type should be "application/octet-stream".
Why is my binary file not downloaded, but shown on

the screen?
Actually, the browser has downloaded the document, it is just treating it as a plain text
file. This is because the server said it was a plain text file. To get the file in the helper
application (or plug-in), you will have to configure the server to send out the right MIME
type, and the browser to start the appropriate helper application for files with that MIME
type.
How do I use an image instead of the standard submit

button?
Use <INPUT NAME=foo TYPE=image SRC="http://url.to/image.gif"> instead of the
normal submit tag. There is no way to do this for the reset button.
Note that some browsers will also send the x and y coordinates of the location where the
user clicked on the image to the server. They are available as "foo.x=000&foo.y=000" in
the CGI input.
How do I get a so-and-so character in my HTML?

HTML text is supposed to be written in the ISO Latin-1 character set. A complete
overview of all the characters in this set is available from:
• http://www.w3.org/pub/WWW/MarkUp/html3/latin1.html

• http://ppewww.ph.gla.ac.uk/%7Eflavell/iso8859/
• http://uts.cc.utexas.edu/%7Echurchh/latin1.html
How do I get a counter?

Either ask your Webmaster for access to the log files, or for a server-side include which
can do this, or use one of the freeware counters available at the CGI archives. There is no
HTML tag to do this.
Counters are quite pointless, though. They can be set to any value the owner wants, so
they don't give you any information. Because of the delay that often occurs when using
an external counter, your visitors may get annoyed with the long loading time of your
document. The server's logfile provides a lot more reliable information for you, and you
don't have to bother your readers with it.
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 1.2" to get at Netscape enhanced documents.
And of course, if a cache proxy keeps the Netscape enhanced document, someone with an
other browser will also get this document if he goes through the cache.
I want to get an audio file to play automatically when

someone visits my site!
Bleh. What if I visit your site at 3am, and there's someone sleeping in the next room?
For Netscape, this is done using the <EMBED> tag. You can also do this with the
Netscape <META> refresh tag, as described earlier. Just put the URL of the audio file in
the CONTENT field.
There is also a MS Internet Explorer specific tag to do this: <BGSOUND SRC=URL>
which plays the file specified in the SRC attribute automatically. You can add LOOP
followed by a value or the keyword "INFINITE" to indicate how many times the sound
should be played.
Should I put quotes around attribute values or not?

It depends. It is never wrong to use them, but you don't have to if the attribute value
consists only of letters, digits, periods and/or hyphens. This is explained in the HTML 2.0
specs.
Oh, and keep in mind that if you use double quotes, you should escape any quotes inside
the value with """ so you don't accidentally terminate the value prematurely.
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. Many people
prefer upper case, as it makes the tags "stand out" better amongst the text.
My images/hyperlinks are coming out all wrong, or

don't load! What's up?
Most likely you forgot to close a quote at the end of an HREF or SRC. 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.
This especially happens if you use comment tags to "comment out" text with HTML tags.
Although the correct syntax is  (without "--" occurring anywhere inside the
comment), some browsers will think the comment ends at the first > they see.
How do I get a button which takes me to a new page?

This is done with a small form:
<FORM ACTION="http://url.you.want.to.go.to/" METHOD=GET>
<INPUT TYPE=submit VALUE="Text on button" NAME=foo>
</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.
1.4. 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.
[Table of Contents]
1.5. 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/>.
[Table of Contents]
1.6. 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".
[Table of Contents]
1.7. How can I include comments in HTML?

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:
• 
• 
• 
• 
• <!>
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.
[Table of Contents]
1.8. 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.
1. The browser strips everything after the last slash in the base document's URL and
appends the relative URL to the result.
2. 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).
3. 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/>.
[Table of Contents]
1.9. Should I end my URLs with a slash?

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/>.
[Table of Contents]
1.10. 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/>.
[Table of Contents]
1.11. 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".
2.1. Where can I put my newly created Web pages?

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.
[Table of Contents]
2.2. How can I get my own domain name?

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.
[Table of Contents]
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.
[Table of Contents]
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.submit-it.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.
[Table of Contents]

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 earch 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.
[Table of Contents]
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>.

[Table of Contents]
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.)
[Table of Contents]
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.
[Table of Contents]
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/>.
[Table of Contents]
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.
[Table of Contents]
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.

[Table of Contents]
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.
[Table of Contents]
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.
[Table of Contents]
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.

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).
[Table of Contents]
3.2. Which should I use, &entityname; or &#number; ?

In HTML, characters can be represented in three ways:
1. a properly coded character, in the encoding specified by the "charset" attribute

of the "Content-type:" header;
2. a character entity (&entityname;), from the appropriate HTML specification
(HTML 2.0/3.2, HTML 4, etc.);
3. 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
• http://www.czyborra.com/
• http://mirror.subotnik.net/jkorpela/chars.html
• http://ppewww.ph.gla.ac.uk/~flavell/charset/
[Table of Contents]
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.
[Table of Contents]
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>.
[Table of Contents]
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.

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?"
[Table of Contents]
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.
[Table of Contents]
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.
[Table of Contents]
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.
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
[Table of Contents]
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>
[Table of Contents]
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.
[Table of Contents]
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.
[Table of Contents]
4.5. How do I create a button which acts like a link?

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.
[Table of Contents]
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.
[Table of Contents]
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"></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.
[Table of Contents]
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:
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.
[Table of Contents]
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).
[Table of Contents]
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.

[Table of Contents]
4.11. How do I link an image to something?

Just use the image as the link content, like this:
<A HREF=...><IMG ...></A>
[Table of Contents]
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>
[Table of Contents]
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>.
[Table of Contents]
4.14. How do I turn off underlining on my links?

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}
[Table of Contents]

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>
[Table of Contents]
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 }
[Table of Contents]
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.
(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:\path\file.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).

[Table of Contents]
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">
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.)
[Table of Contents]
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
Unclassified binary data (often used for compressed file or
application/octet-stream
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.
[Table of Contents]
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.
[Table of Contents]
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".
[Table of Contents]
5.5. How do I make animated GIFs?

Check out the following resources:
• http://members.aol.com/royalef/gifanim.htm
• http://www.webreference.com/dev/gifanim/
[Table of Contents]
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=...></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.
[Table of Contents]
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.
[Table of Contents]
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.
[Table of Contents]
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.
(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. 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:\path\image.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.)
[Table of Contents]
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.
[Table of Contents]
5.11. Can I put markup in ALT text?

No. Character entities (©, &#nnn; and such) are permitted, though.
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>.
[Table of Contents]
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>
[Table of Contents]
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.
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.
Some HTML authoring tools have an option to strip all HTML as well. Two programs of
note are
• HomeSite, available from <URL:http://www.allaire.com/>
• DiDa, available from <URL:http://www.faico.net/>
If you are looking for another method (in other words you want to make things more
difficult on yourself), you can obtain programs which will strip away all HTML markup
from a document. Try doing a search at <URL:http://www.altavista.com/> for the phrase
"HTML stripper".
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>.
[Table of Contents]
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).
[Table of Contents]
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/>
[Table of Contents]
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.
[Table of Contents]
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.
[Table of Contents]
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>.
[Table of Contents]
6.7. How do I eliminate the space around/between my images?

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

<TD ...>
<IMG SRC=... ALT=...>
<IMG SRC=... ALT=...>
</TD>
with this:
<TD ...><IMG SRC=... ALT=...><IMG SRC=... ALT=...></TD>
According to the latest specifications, the two should be equivalent. However, common
browsers do not comply with the specifications in this situation.
[Table of Contents]
6.8. How do I indent the first line in my paragraphs?

Use a style sheet with the following ruleset:
P { text-indent: 5% }
See <URL:http://www.htmlhelp.com/reference/css/> for more information on style

sheets.
[Table of Contents]
6.9. How do I indent a lot of text?

Use a style sheet to set a left margin for the whole document or part of it:
/* Entire document */
BODY { margin-left: 20% }
/* Part of a document with CLASS="foo" */

.foo { margin-left: 15% }
See <URL:http://www.htmlhelp.com/reference/css/> for more information on style
sheets.
[Table of Contents]
6.10. How do I eliminate the margins around my page?

The most appropriate way is to suggest margins with a style sheet. Cascading Style
Sheets use the margin property to specify margins. More information about Cascading
Style Sheets can be found at: http://www.htmlhelp.com/reference/css/
More information about the CSS margin property can be found at:
http://www.htmlhelp.com/reference/css/box/margin.html
With proprietary HTML extensions, you can set the margins for certain browsers.
Internet Explorer 3+ supports the TOPMARGIN and LEFTMARGIN attributes.
Internet Explorer 4+ added support for the BOTTOMMARGIN and RIGHTMARGIN
attributes. Navigator 4+ supports the MARGINWIDTH and MARGINHEIGHT
attributes. Most other browsers ignore these proprietary extensions.

CSS and proprietary HTML can be combined. The following is effective in most
browsing situations:
<body marginheight="0" topmargin="0" vspace="0" marginwidth="0" leftmargin="0" hspace="0"
style="margin:0">
More information is available at

<URL:http://mirror.subotnik.net/jkorpela/www/margins.html
Also note that Navigator always leaves room for a scrollbar on the right, but draws the
scrollbar only when the document is long enough to require scrolling. If the document
does not require scrolling, then this leaves a right "margin" that cannot be removed.
[Table of Contents]
6.11. How do I do a page break?

Page breaks are offered in Cascading Style Sheets, Level 2, but they are not well
supported by browsers. See <URL:http://www.w3.org/TR/REC-CSS2/page.html#page-
breaks> for information on CSS2 page breaks.
In general, page breaks are not appropriate on the Web since what makes a nice page
break for you with your font and font size may be a poor page break for me with my font
and font size.
If you need to produce a nicely formatted printed copy of your HTML documents, you
might also consider using special purpose tools rather than your browser's Print function.
For example, html2ps generates nicely formatted PostScript output from HTML
documents, and HTML Scissor uses special HTML comments for suggesting page
breaks.
[Table of Contents]
6.12. How can I specify fonts in my Web pages?

If you want others to view your web page with a specific font, the most appropriate way
is to suggest the font rendering with a style sheet. Cascading Style Sheets use the font-
family property to specify font faces. More information about Cascading Style Sheets
can be found at: http://www.htmlhelp.com/reference/css/
More information about the CSS font-family property can be found at:
http://www.htmlhelp.com/reference/css/font/font-family.html
With HTML, the BASEFONT element can be used to suggest specific fonts for the
entire document. The BASEFONT element affects the entire document. More
information about the BASEFONT element can be found at:
http://www.htmlhelp.com/reference/html40/special/basefont.html
With HTML, the FONT element can also be used to suggest specific fonts. The FONT
element must be repeated inside every block-level element, since it can contain only
inline (text-level) elements. Use of the FONT element brings numerous usability and

accessibility problems, see: http://www.mcsr.olemiss.edu/%7Emudws/font.html
More information about the FONT element can be found at:
http://www.htmlhelp.com/reference/html40/special/font.html
Whether specifying fonts with CSS or with HTML, authors run the risk that a reader's
system has a font by the same name but which is significantly different. For example,
"Chicago" can be a nice text font, a display font with letters formed by "bullet holes", or a
dingbat font with building images (for creating skylines).
Also, authors must either use fonts (or groups of similar fonts) that are commonly
available on many systems, or provide dynamic fonts for their readers. Readers who do
not have the specified font(s) installed, or who do not download the dynamic fonts
provided byt the author, will see a default font. Some browsers may use a less legible
substitute font than their normal default font in cases where author-specified fonts are not
found.
Netscape and Microsoft have developed competing formats for dynamic fonts. TrueDoc
works on Navigator 4+ and (with a plugin) on Internet Explorer 4+. OpenType works on
Internet Explorer 4+. For more information about TrueDoc (including the WebFont
Maker), see: http://www.truedoc.com/webpages/intro/
For more information about OpenType (including Microsoft's Web Embedding Fonts
Tool (WEFT)), see: http://www.microsoft.com/typography/web/
For practical advise on using fonts on the web, see Todd Fahrner's "Beyond the FONT
tag: Practical HTML text styling" at: <http://style.metrius.com/font_size/livetext.html>
[Table of Contents]
6.13. How can I specify colors?

If you want others to view your web page with specific colors, the most appropriate way
is to suggest the colors with a style sheet. Cascading Style Sheets use the color and
background-color properties to specify text and background colors. To avoid conflicts
between the reader's default colors and those suggested by the author, these two
properties should always be used together. More information about Cascading Style
Sheets can be found at: http://www.htmlhelp.com/reference/css/
More information about the CSS color property can be found at:
http://www.htmlhelp.com/reference/css/color-background/color.html
More information about the CSS background-color property can be found at:
http://www.htmlhelp.com/reference/css/color-background/background-color.html
With HTML, you can suggest colors with the TEXT, LINK, VLINK (visited link),
ALINK (active link), and BGCOLOR (background color) attributes of the BODY
element. If one of these attributes is used, then all of them should be used to ensure that
the reader's default colors do not interfere with those suggested by the author. Here is an
example:
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#000080">

More information about the BODY element can be found at:
http://www.htmlhelp.com/reference/html40/html/body.html
Authors should not rely on the specified colors since browsers allow their users to
override document-specified colors.
[Table of Contents]
6.14. How do I change the color of some text?

The most appropriate way is to use suitable structural markup, and to suggest the desired
color with a style sheet. If you want to specify a color for only certain cases of an
element, then you can use a class to specify which cases are special. The following CSS
example specifies that emphasized text with the class "special" should be green (on a
white background):
EM.special { color: green; background: white; }
When displayed according to this CSS ruleset, the emphasized text in the following
HTML example will be displayed in green:
normal text <EM CLASS="special">emphasized text</EM> normal text
More information about Cascading Style Sheets can be found at:

http://www.htmlhelp.com/reference/css/
With HTML, the FONT element can also be used to suggest colors. Use of the FONT
element brings numerous usability and accessibility problems, see:
http://www.mcsr.olemiss.edu/%7Emudws/font.html
More information about the FONT element can be found at:
http://www.htmlhelp.com/reference/html40/special/font.html
[Table of Contents]
6.15. How can I specify background images?

If you want others to view your web page with a background image, the most appropriate
way is to suggest the background with a style sheet. Cascading Style Sheets use the
background-image property to specify a background image. More information about
Cascading Style Sheets can be found at: http://www.htmlhelp.com/reference/css/
More information about the CSS background-image property can be found at:
http://www.htmlhelp.com/reference/css/color-background/background-image.html
With HTML, you can suggest a tiled background image with the BACKGROUND
attribute of the BODY element. Here is an example:
<body background="imagefile.gif" bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080"
alink="#000080">
More information about the BODY element can be found at:

http://www.htmlhelp.com/reference/html40/html/body.html

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

body { color: black; background: white url(foo.gif) fixed }
Note that the fixed property used in the above style sheet is supported by Internet Explorer
3+, Netscape Navigator 5+, and other browsers. In contrast, the proprietary
BGPROPERTIES=fixed attribute is supported only by Internet Explorer 3+.
[Table of Contents]
6.17. How do I have a non-tiled background image?

body { color: black; background: white url(foo.gif) no-repeat }
[Table of Contents]
6.18. How can I have a custom icon when people bookmark my site?
This is a feature introduced by Internet Explorer 5.x. By default, the browser requests a
file named "favicon.ico" at the same base URL as the document being bookmarked. If it
doesn't find this file, then it will try again in the root directory of your site. Web authors
can specify a different path for the icon file with a <LINK> element like this: <LINK
REL="SHORTCUT ICON" HREF="/pathname/filename.ico">
The image should be 16 by 16 pixels, in the Windows icon format. If your graphics
program doesn't support the Windows icon format, you can use a tool like the free Java-
based icon generator at <URL:http://www.favicon.com/> to convert/create your icon.
7.1. How do I make a table which looks good on non-supporting browsers?

See Alan Flavell's document on tables for a good discussion at
<URL:http://ppewww.ph.gla.ac.uk/%7Eflavell/www/tablejob.html>.
[Table of Contents]
7.2. Can I nest tables within tables?

Yes, a table can be embedded inside a cell in another table. Here's a simple example:

<table>
<tr>
<td>this is the first cell of the outer table</td>
<td>this is the second cell of the outer table,
with the inner table embedded in it<br>
<table>
<tr>
<td>this is the first cell of the inner table</td>
<td>this is the second cell of the inner table</td>
</tr>
</table>
</td>
</tr>
</table>
The main caveat about nested tables is that Netscape has problems with them if you don't
close your TD and TR tags meticulously. You're best advised to include every </TD> and
</TR>, even though the HTML spec doesn't require them; otherwise Netscape users may
not be able to view your page.
[Table of Contents]
7.3. How can I use tables to structure forms?

Small forms are sometimes placed within a TD element within a table. This can be a
useful for positioning a form relative to other content, but it doesn't help position the
form-related elements relative to each other.
To position form-related elements relative to each other, the entire table must be within
the form. You cannot start a form in one TH or TD element and end in another. You
cannot place the form within the table without placing it inside a TH or TD element. You
can put the table inside the form, and then use the table to position the INPUT,
TEXTAREA, SELECT, and other form-related elements, as shown in the following
example.
<FORM ACTION="[URL]">
<TABLE BORDER="0">
<TR>
<TH>Account:</TH>
<TD><INPUT TYPE="text" NAME="account"></TD>
</TR>
<TR>
<TH>Password:</TH>
<TD><INPUT TYPE="password" NAME="password"></TD>
</TR>
<TR>
<TD> </TD>
<TD><INPUT TYPE="submit" NAME="Log On"></TD>
</TR>
</TABLE>
</FORM>
[Table of Contents]
7.4. How do I center a table?

The "correct" way of doing it is <TABLE ALIGN=CENTER>, but this doesn't work in several
popular browsers. Put <CENTER>; around the entire table for these browsers.
This causes some problems with browsers that do support CENTER but not tables, such as
Lynx. In these browsers, the contents of the cells are now displayed centered, which is
not what is intended. To avoid this, you can put the cell's contents in <P ALIGN=left> or
<DIV ALIGN=left> depending on the amount of text in the cell.
[Table of Contents]
7.5. How do I align a table to the right (or left)?

You can use <TABLE ALIGN="right"> to float a table to the right. (Use ALIGN="left" to float
it to the left.) Any content that follows the closing </TABLE> tag will flow around the
table. Use <BR CLEAR="right"> or <BR CLEAR="all"> to mark the end of the text that is to
flow around the table, as shown in this example:
<TABLE ALIGN="right">...</TABLE>
The table will float to the right.
This text will appear to the left of the table.
<BR CLEAR="right">
This text will appear below the table,
even if there is additional room to its left.
[Table of Contents]
7.6. Can I use percentage values for <TD WIDTH=...>?

The HTML 3.2 and HTML 4.0 specifications allow only integer values (representing a
number of pixels) for the WIDTH attribute of the TD element. However, the HTML 4.0
DTD allows percentage (and other non-integer) values, so an HTML validator will not
complain about <TD WIDTH="xx%">.
It should be noted that Netscape and Microsoft's browsers interpret percentage values for
<TD WIDTH=...> differently. However, their interpretations (and those of other table-
aware browsers) happen to match when combined with <TABLE WIDTH="100%">. In
such situations, percentage values can be used relatively safely, even though they are
prohibited by the public specifications.
[Table of Contents]
7.7. Why doesn't <TABLE WIDTH="100%"> use the full browser width?
Graphical browsers leave a narrow margin between the edge of the display area and the
content. For information on how you can specify that the browser omit these margins, see
the answer to the question "How do I eliminate the margins around my page?"
Also note that Navigator always leaves room for a scrollbar on the right, but draws the
scrollbar only when the document is long enough to require scrolling. If the document
does not require scrolling, then this leaves a right "margin" that cannot be removed.
[Table of Contents]

7.8. Why is there extra space before or after my table?
This is often caused by invalid HTML syntax. Specifically, it is often caused by loose
content within the table (i.e., content that is not inside a TD or TH element). There is no
standard way to handle loose content within a table. Some browsers display all loose
content before or after the table. When the loose content contains only multiple line
breaks or empty paragraphs, then these browsers will display all this empty space before
or after the table itself.
The solution is to fix the HTML syntax errors. All content within a table must be within a
TD or TH element.
[Table of Contents]
7.9. Are there any problems with using tables for layout?
On current browsers, the entire table must be downloaded and the dimensions of
everything in the table must to be known before the table can be rendered. That can delay
the rendering of your content, especially if your table contains images without HEIGHT
or WIDTH attributes.
If any of your table's content is too wide for the available display area, then the table
stretches to accomodate the oversized content. The rest of the content then adjusts to fit
the oversized table rather than fitting the available display area. This can force your
readers to scroll horizontally to read your content, or can cause printed versions to be
cropped.
For readers whose displays are narrower than the author anticipated, fixed-width tables
cause the same problems as other oversized tables. For readers whose displays are wider
than the author anticipated, fixed-width tables cause extremely wide pargins, wasting
much of the display area. For readers who need larger fonts, fixed-width tables can cause
the content to be displayed in short choppy lines of only a few words each.
Many browsers are especially sensitive to invalid syntax when tables are involved.
Correct syntax is especially critical. See the answer to "How can I check for errors?"
Even with correct syntax, 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.
Some browsers ignore tables, or can be configured to ignore tables. These browsers will
ignore any layout you've created with tables. Also, search engines ignore tables. Some
search engines use the text at the beginning of a document to summarize it when it
appears in search results, and some index only the first n bytes of a document. When
tables are used for layout, the beginning of a document often contains many navigation
links that appear before than actual content.
Many versions of Navigator have problems linking to named anchors when they are
inside a table that uses the ALIGN attribute. These browsers seem to associate the named
anchor with the top of the table, rather than with the content of the anchor. You can avoid
this problem by not using the ALIGN attribute on your tables.

If you use tables for layout, you can still minimize the related problems with careful
markup. Avoid placing wide images, PRE elements with long lines, long URLs, or other
wide content inside tables. Rather than a single full-page layout table, use several
independent tables. For example, you could use a table to lay out a navigation bar at the
top/bottom of the page, and leave the main content completely outside any layout tables.
8.1. How do I use forms?

The basic syntax for a form is: <FORM ACTION="[URL]">...</FORM>
When the form is submitted, the form data is sent to the URL specified in the ACTION
attribute. This URL should refer to a server-side (e.g., CGI) program that will process the
form data. The form itself should contain
• at least one submit button (i.e., an <INPUT TYPE="submit" ...> element),
• form data elements (e.g., <INPUT>, <TEXTAREA>, and <SELECT>) as needed,
and
• additional markup (e.g., identifying data elements, presenting instructions) as
needed.
A more detailed explanation of the use of forms is available at

<URL:http://mirror.subotnik.net/jkorpela/forms/>. If you want to install CGI programs
on your server, the following are useful resources:
• the CGI Programming FAQ <URL:http://www.htmlhelp.com/faq/cgifaq.html>
• the CGI section of the W3C's Security FAQ
<URL:http://www.w3.org/Security/faq/wwwsf4.html>
• the list of prewritten CGI scripts/programs at <URL:http://www.cgi-
resources.com/Programs_and_Scripts/>
[Table of Contents]
8.2. How do I get form data emailed to me?

The only reliable mechanism for processing form submissions is with a server-side (e.g.,
CGI) program. To send form data to yourself via email, you should use a server-side
program that processes the form submission and sends the data to your email address.
Some web service providers make standard form-to-email programs available to their
customers. Check with your service provider for details.
If you can install CGI programs on your own server, see the answer to the previous
question for a list of useful resources.
If you can't run CGI programs on your own server, you can use a remotely hosted form-
to-email services. A list of such services can be found at
<URL:http://cgi.resourceindex.com/Remotely_Hosted/Form_Processing/>. Note that the

provider of a remotely hosted service will have access to any data submitted via the
service.
Forms that use ACTION="mailto:..." are unreliable. They may work for some of your users,
but they will fail for others who have different software configurations.
[Table of Contents]
8.3. How can I use tables to structure forms?

Small forms are sometimes placed within a TD element within a table. This can be a
useful for positioning a form relative to other content, but it doesn't help position the
form-related elements relative to each other.
To position form-related elements relative to each other, the entire table must be within
the form. You cannot start a form in one TH or TD element and end in another. You
cannot place the form within the table without placing it inside a TH or TD element. You
can put the table inside the form, and then use the table to position the INPUT,
TEXTAREA, SELECT, and other form-related elements, as shown in the following
example.
<FORM ACTION="[URL]">
<TABLE BORDER="0">
<TR>
<TH>Account:</TH>
<TD><INPUT TYPE="text" NAME="account"></TD>
</TR>
<TR>
<TH>Password:</TH>
<TD><INPUT TYPE="password" NAME="password"></TD>
</TR>
<TR>
<TD> </TD>
<TD><INPUT TYPE="submit" NAME="Log On"></TD>
</TR>
</TABLE>
</FORM>
[Table of Contents]
8.4. How do I make a form so it can be submitted by hitting ENTER?

The short answer is that the form should just have one <INPUT TYPE=TEXT> and no
TEXTAREA, though it can have other form elements like checkboxes and radio buttons.
For a more detailed answer, see
<URL:http://ppewww.ph.gla.ac.uk/%7Eflavell/www/formquestion.html>.
[Table of Contents]
8.5. How do I set the focus to the first form field?

You cannot do this with HTML. However, you can include a script after the form that
sets the focus to the appropriate field, like this:

<FORM ID="myform" NAME="myform" ACTION=...>
<INPUT TYPE="text" ID="myinput" NAME="myinput" ...>
</FORM>
document.myform.myinput.focus();
//--></script>
A similar approach uses <BODY ONLOAD=...> to set the focus, but some browsers seem to
process the ONLOAD event before the entire document (i.e., the part with the form) has
been loaded.
[Table of Contents]
8.6. How can I make a form with custom buttons?

Rather than a normal submit button (<INPUT TYPE=submit ...>), you can use an image of a
custom submit button. Use <INPUT NAME=Send TYPE=image SRC="http://url.to/image.gif"
ALT="Send" VALUE="Send">. Most browsers will also send the x and y coordinates of the
location where the user clicked on the image to the server. They are available as
"Send.x=000&Send.y=000" in the CGI input. For more information, see <URL:
http://ppewww.ph.gla.ac.uk/%7eflavell/www/trysub.html>.
For the reset button, one could use <BUTTON TYPE=reset ...>, JavaScript, and/or style
sheets, although none of these mechanisms work universally. For more information, see
<URL:http://mirror.subotnik.net/jkorpela/forms/imagereset.html>.
[Table of Contents]
8.7. Can I have two or more Submit buttons in the same form?
Sure. This is part of HTML 2.0 Forms support (some early browsers did not support it,
but browser coverage is now excellent).
You will need to give your Submit buttons a Name attribute, and, optionally, a Value
attribute. In order to determine which button was used, you will want to use distinctive
Names, or Values, or both. Browsers will display the Value, in addition to sending it to
the server, so choose something that's meaningful to the user as in the following example:
<INPUT TYPE=SUBMIT NAME=join VALUE="I want to join now"> -or-
<INPUT TYPE=SUBMIT NAME=info VALUE="Please send full details">
Note that if you are using image submit buttons, you need to provide different Value
attributes for them too.
If you're unsure what results you're going to get when you submit your form, TipJar has a
standard script which you can use. Code this, for example (assuming method "post"):
<form method="post" action="http://www.tipjar.com/cgi-bin/test">
and then go through the motions of submitting your form. The TipJar server decodes the
form input, and displays the result to you.

[Table of Contents]
8.8. Can I have two or more actions in the same form?

No. A form must have exactly one action. However, the server-side (e.g., CGI) program
that processes your form submissions can perform any number of tasks (e.g., updating a
database, sending email, logging a transaction) in response to a single form submission.
[Table of Contents]
8.9. Can I require that some fields be filled in?

Yes. Have the server-side (e.g., CGI) program that processes the form submission send
an error message if the field is not filled in properly. Ideally, this error message should
include a copy of the original form with the original (incomplete) data filled in as the
default values for the form fields.
In addition, you could use JavaScript in the form's ONSUBMIT attribute to check the
form for those who have JavaScript enabled. If the form is incomplete, have the
ONSUBMIT event handler inform the user of the problem and return false. Note that the
server-side program should not rely upon the checking done by the client-side script.
[Table of Contents]
8.10. How can I allow file uploads to my web site?

First of all, the RFC for this is located at
<URL:http://www.ics.uci.edu/pub/ietf/html/rfc1867.txt>.
File upload is handled by the CGI.pm Perl5 library available from
<URL:http://stein.cshl.org/WWW/software/CGI/cgi_docs.html>. The most recent
versions of the cgi-lib.pl library also support file upload.
These things are necessary for Web-based uploads:
• An HTTP server that accepts uploads.
• Access to the /cgi-bin/ to put the receiving script.
• A form implemented something like this:
<form method="POST" enctype="multipart/form-data" action="fup.cgi">
File to upload: <input type=file name=upfile><br>
Notes about the file: <input type=text name=note><br>
<input type=submit value=Press> to upload the file!
</form>
Not all browsers support form-based file upload, so try to give alternatives where
possible. Also, if you need to do file upload in conjunction with form-to-email, the Perl
package MIME::Lite handles email attachments.
[Table of Contents]

8.11. How can I use forms for pull-down navigation menus?
There is no way to do this in HTML only; something else must process the form.
JavaScript processing will work only for readers with JavaScript-enabled browsers. CGI
and other server-side processing is reliable for human readers, but search engines have
problems following any form-based navigation.
9.1. What are frames? What is a frameset?

Frames allow an author to divide a browser window into multiple (rectangular) regions.
Multiple documents can be displayed in a single window, each within its own frame.
Graphical browsers allow these frames to be scrolled independently of each other, and
links can update the document displayed in one frame without affecting the others.
A frameset is a particular combination of frames. To use frames, one document must
define the frameset, so that other documents can be displayed in the frames. This
document is called the frameset document. The frameset document should also include
alternative non-framed content in a <NOFRAMES> element.
The HTML 4 frames model has significant design flaws that cause usability problems for
web users. Frames should be used only with great care. The Web Design Group's guide to
frames <http://www.htmlhelp.com/design/frames/> includes guidelines on the suitable
use of frames, in addition to a description of the related HTML syntax.
[Table of Contents]
9.2. How do I make a link or form in one frame update another frame?
In the frameset document (the HTML document containing the <FRAMESET> and
<FRAME> elements), make sure to name the individual frames using the NAME attribute.
The following example creates a top frame named "navigation" and a bottom frame
named "content":
<FRAMESET ROWS="*,3*">
<FRAME NAME="navigation" SRC="navigation.html">
<FRAME NAME="content" SRC="content.html">
<NOFRAMES><BODY>

</BODY></NOFRAMES>
</FRAMESET>
Then, in the document with the link, use the TARGET attribute to specify which frame
should be used to display the link. (The value of the TARGET attribute should match the
value of the target frame's NAME attribute.) You can specify the target frame for a link
(e.g., <A TARGET="content" HREF=...>) or for a form (e.g., <FORM TARGET="content"
ACTION=...>). Also, you can use <BASE TARGET=...> to change the default target frame for
the entire document (normally, the default target frame is "_self", the current frame).
[Table of Contents]

9.3. Why do my links open new windows rather than update an existing
frame?
If there is no existing frame with the name you used for the TARGET attribute, then a new
browser window will be opened, and this window will be assigned the name you used.
Furthermore, TARGET="_blank" will open a new, unnamed browser window.
In HTML 4, the TARGET attribute value is case-insensitive, so that abc and ABC both refer
to the same frame/window, and _top and _TOP both have the same meaning. However,
most browsers treat the TARGET attribute value as case-sensitive and do not recognize
ABC as being the same as abc, or _TOP as having the special meaning of _top.
Also, some browsers include a security feature that prevents documents from being
hijacked by third-party framesets. In these browsers, if a document's link targets a frame
defined by a frameset document that is located on a different server than the document
itself, then the link opens in a new window instead.
[Table of Contents]
9.4. How do I update two frames at once?

There are two basic techniques for updating multiple frames with a single link: The
HTML-based technique links to a new frameset document that specifies the new
combination of frames. The JavaScript-based solution uses the onClick attribute of the link
to update the additional frame (or frames).
The HTML-based technique can link to a new frameset document with TARGET="_top"
(replacing the entire frameset), but there is an alternative if the frames to be updated are
part of a nested frameset. In the initial frameset document, use a secondary frameset
document to define the nested frameset. For example:
<FRAMESET COLS="*,3*">
<FRAME SRC="contents.html" NAME="Contents">
<FRAME SRC="frameset2.html" NAME="Display">
</FRAMESET>
A link can now use TARGET="Display" to replace simultaneously all the frames defined by
frameset2.html.
The JavaScript-based solution uses the onClick attribute of the link to perform the
secondary update. For example:
<A HREF="URL1" TARGET=Frame1
onClick="top.Frame2.location='URL2';">Update frames</A>
The link will update Frame1 with URL1 normally. If the reader's browser supports
JavaScript (and has it enabled), then Frame2 will also be updated (with URL2).
[Table of Contents]
9.5. How do I get out of a frameset?

If you are the author, this is easy. You only have to add the TARGET attribute to the link
that takes readers to the intended 'outside' document. Give it the value of _top.
In many current browsers, it is not possible to display a frame in the full browser
window, at least not very easily. The reader would need to copy the URL of the desired
frame and then request that URL manually.
I would recommend that authors who want to offer readers this option add a link to the
document itself in the document, with the TARGET attribute set to _top so the document
displays in the full window if the link is followed.
[Table of Contents]
9.6. How do I make sure my framed documents are displayed inside their
frameset?
When the sub-documents of a frameset state are accessed directly, they appear without
the context of the surrounding frameset.
If the reader's browser has JavaScript support enabled, the following script will restore
the frameset:
<SCRIPT TYPE="text/javascript">

</SCRIPT>
A more universal approach is a "restore frames" link:
<A HREF="frameset.html" TARGET="_top">Restore Frames</A>
Note that in either case, you must have a separate frameset document for every content
document. If you link to the default frameset document, then your reader will get the
default content document, rather than the content document he/she was trying to access.
These frameset documents should be generated automatically, to avoid the tedium and
inaccuracy of creating them by hand.
Note that you can work around the problem with bookmarking frameset states by linking
to these separate frameset documents using TARGET="_top", rather than linking to the
individual content documents.
[Table of Contents]
9.7. Is there a way to prevent getting framed?

"Getting framed" refers to having your documents displayed within someone else's
frameset without your permission. This can happen accidentally (the frameset author
forgot to use TARGET="_top" when linking to your document) or intentionally (the
frameset author wanted to display your content with his/her own navigation or banner
frames).
To avoid "framing" other people's documents, you must add TARGET="_top" to all links
that lead to documents outside your intended scope.
Unfortunately, there is no reliable way to specify that a particular document should be
displayed in the full browser window, rather than in the current frame. If you can
configure your server to send the proprietary header Window-Target: _top in the HTTP
response, then Netscape browsers will display your document in the full browser
window. However, other browsers ignore this header, and it doesn't work to use <META
HTTP-EQUIV="Window-target" CONTENT="_top"> in the document itself to mimic the HTTP
response.
Another workaround is to use <BASE TARGET="_top"> in the document, but this only
specifies the default target frame for links in the current document, not for the document
itself.
If the reader's browser has JavaScript enabled, the following script will automatically
remove any existing framesets:

</SCRIPT>
An alternative script is

</SCRIPT>
</HEAD>
<BODY onLoad="breakOut()">
[Table of Contents]
9.8. How do I specify a specific combination of frames instead of the

default document?
This is unfortunately not possible. When you navigate through a site using frames, the
URL will not change as the documents in the individual frames change. This means that
there is no way to indicate the combination of documents that make up the current state
of the frameset.

The author can provide multiple frameset documents, one for each combination of frame
content. These frameset documents can be generated automatically, perhaps being created
on the fly by a CGI program. Rather than linking to individual content documents, the
author can link to these separate frameset documents using TARGET="_top". Thus, the
URL of the current frameset document will always specify the combination of frames
being displayed, which allows links, bookmarks, etc. to function normally.
[Table of Contents]
9.9. How do I remove the border around frames?

Removing the border around frames involves both not drawing the frame borders and
eliminating the space between the frames. The two major frames-capable browsers use
different proprietary attributes to achieve this.
Netscape recognizes the BORDER attribute on FRAMESET. It can be set to 0, in which case
the border will not be shown, and the spacing will be set to zero.
Microsoft Internet Explorer recognizes the FRAMEBORDER and FRAMESPACING attributes
on FRAMESET, but in some versions also on FRAME for individual frames. Both attributes
must be set to 0.
So, the most widely supported way to display borderless frames is <FRAMESET ...
BORDER=0 FRAMEBORDER=0 FRAMESPACING=0>.
Note that these attributes are proprietary and not part of the HTML 4 specifications. Also,
removing the border around a frame makes it impossible to resize it, as this border is also
used in most GUIs to change the size of the window.
[Table of Contents]
9.10. How do I make a frame with a vertical scrollbar but without a

horizontal scrollbar?
The only way to have a frame with a vertical scrollbar but without a horizontal scrollbar
is to define the frame with SCROLLING="auto" (the default), and to have content that does
not require horizontal scrolling. There is no way to specify that a frame should have one
scrollbar but not the other. Using SCROLLING="yes" will force scrollbars in both directions
(even when they aren't needed), and using SCROLLING="no" will inhibit all scrollbars
(even when scrolling is necessary to access the frame's content). There are no other
values for the SCROLLING attribute.
[Table of Contents]
9.11. How do I change the title of a framed document?

The title displayed is the title of the frameset document rather than the titles of any of the
pages within frames. To change the title displayed, link to a new frameset document
using TARGET="_top" (replacing the entire frameset).

[Table of Contents]
9.12. Why aren't my frames the exact size I specified?

Netscape Navigator seems to convert pixel-based frame dimensions to whole
percentages, and to use those percentage-based dimensions when laying out the frames.
Thus, frames with pixel-based dimensions will be rendered with a slightly different size
than that specified in the frameset document. The rounding error will vary depending on
the exact size of the browser window.
Furthermore, Navigator seems to store the percentage-based dimensions internally, rather

than the original pixel-based dimensions. Thus, when a window is resized, the frames are
redrawn based on the new window size and the old percentage-based dimensions.
There is no way to prevent this behavior. To accomodate it, you should design your site
to adapt to variations in the frame dimensions. This is another situation where it is a good
idea to accomodate variations in the browser's presentation.
[Table of Contents]
9.13. Are there any problems with using frames?

The fundamental problem with the design of frames is that framesets create states in the
browser that are not addressable. Once any of the frames within a frameset changes from
its default content, there is no longer a way to address the current state of the frameset. It
is difficult to bookmark - and impossible to link or index - such a frameset state. It is
impossible to reference such a frameset state in other media. When the sub-documents of
such a frameset state are accessed directly, they appear without the context of the
surrounding frameset. Basic browser functions (e.g., printing, moving
forwards/backwards in the browser's history) behave differently with framesets. Also,
browsers cannot identify which frame should have focus, which affects scrolling,
searching, and the use of keyboard shortcuts in general.
Furthermore, frames focus on layout rather than on information structure, and many
authors of framed sites neglect to provide useful alternative content in the <NOFRAMES>
element. Both of these factors cause accessibility problems for browsers that differ
significantly from the author's expectations and for search engines.
For further discussion, see
<URL:http://www.htmlhelp.com/design/frames/whatswrong.html>
[Table of Contents]
9.14. Do search engines dislike frames?

Search engines can link directly to framed content documents, but they cannot link to the
combinations of frames for which those content documents were designed. This is the
result of a fundamental flaw in the design of frames.

Search engines try to provide their users with links to useful documents. Many framed
content documents are difficult to use when accessed directly (outside their intended
frameset), so there is little benefit if search engines offer links to them. Therefore, many
search engines ignore frames completely and go about indexing more useful (non-
framed) documents.
Search engines will index your <NOFRAMES> content, and any content that is accessible
via your <NOFRAMES> content. Such content should be useful when accessed directly
from a search-engine link.
1. What is a good HTML to text converter?

The best way to convert HTML into plain text is with a web browser. Load the
document you wish to convert and either select your entire document and copy it
to the clipboard or use the "save-as" feature.
2. How do I add a subject to my email link?

Oh, yet another touch and go question. While people have suggested that
[?subject:] will add a subject to your email, it is not a valid email address and will
cause the email to disappear without being sent in some email clients.
<a href="mailto:email@isp.net?subject:your+subject">email me</a>
As stated in http://www.w3.org/Addressing/rfc1738.txt:
A mailto URL takes the form:
mailto:<rfc822-addr-spec>
where <rfc822-addr-spec> is (the encoding of an) addr-spec, as

specified in RFC 822.
RFC 822 can be found at ftp://www.internic.net/rfc/rfc822.txt, and declares [addr-
spec] as [local-part "@" domain]. Nothing more.
Alternatively, the attribute [title=""] is a suggested way to add a subject. It is a
valid HTML 4.0 attribute and will not cause the email to disappear in email
clients that do not support it.
<a href="mailto:email@isp.net" title="your subject">email me</a>
3. How do I send my forms to an email address?

A CGI script is the only reliable way to submit a form to an email address. It has
been suggested that mailto: can submit a form, but this doesn't work in a all
browsers including popular ones.
o http://www.cgi-
resources.com/Programs_and_Scripts/Remotely_Hosted/Form_Processing
/

o http://www.sbrady.com/hotsource/cgi/index.html#ffp
4. How do I change two frames with one link?

Multiple frames can be updated with embedded framesets. Instead of creating all
of your framesets within the main frameset document you will create some of
them and refer to another document that contains information on the remaining
frames.
If you wanted the following layout.

---------------------------------------
| | |
| | banner |
| | |
| n |-------------------------|
| a | |
| v | |
| b | |
| a | |
| r | |
| | main |
| | |
| | |
| | |
| | |
| | |
---------------------------------------
You would create one frameset to start out with.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

<html>
<head>
<title>This Site - Welcome</title>
</head>
<frameset cols="150, *">
<frame src="navbar.html" name="nav"
longdesc="navbarinfo.html">
<frame src="mainarea.html" name="mainarea"
longdesc="mainareainfo.html">
<noframes>
<body>
<p>Content of the noframes version.
<ul>
<li>Some information
<li>More information
</ul>
</body>
</noframes>
</frameset>
</html>
Then in the file mainarea.html you will have another frameset that defines 'banner'
and 'main'.

<html>
<head>
<title>mainarea</title>
</head>
<frameset rows="200, *">
<frame src="banner.html" name="banner"
longdesc="bannerinfo.html">
<frame src="main.html" name="main"
longdesc="maininfo.html">
<noframes>
<body>
<ul>
</ul>
</body>
</noframes>
</frameset>
</html>
When you want to update both frames at the same time you will target mainarea
and load another frameset identical to the one in mainarea.html but that contains
information on the new desired frames.

<html>
<head>
<title>anotherarea</title>
</head>
<frameset rows="200, *">
<frame src="banner2.html" name="banner2"
longdesc="banner2info.html">
<frame src="credits.html" name="credits"
longdesc="creditsinfo.html">
<noframes>
<body>
<ul>
</ul>
</body>
</noframes>
</frameset>
</html>
While you can use JavaScript to update two frames, this method will not work on
non JavaScript enabled browsers. Using JavaScript is much easier to set up, but
you will be sacrificing functionality for simplicity. If you do still wish to use
JavaScript you can find a script at the following page.
o http://www.sbrady.com/hotsource/javascript/twoframes.html
5. How do I remove the borders and margins from my frames?

You've created your frame markup, you've created all your files, but there's those
annoying borders and margins around your frames! Take a deep breath and use
the following attributes in exactly the same format to get rid of 'em.

<frameset cols="100,*" border=0 spacing=0 frameborder=0 framespacing=0>
<frame src="top.html" name=top border=0 marginwidth=0 marginheight=0 spacing=0 frameborder=0
framespacing=0>
<frame src="main.html" name=main border=0 marginwidth=0 marginheight=0 spacing=0 frameborder=0
framespacing=0>
</frameset>
Or, the completly valid way.

<frameset cols="100,*">
<frame src="top.html" name=top marginwidth=0 marginheight=0 frameborder=0>
<frame src="main.html" name=main marginwidth=0 marginheight=0 frameborder=0>
</frameset>
6. How do I protect my HTML and/or images from being stolen?

Protecting your html or images from being 'stolen' from your webpage is not
possible. It is a total myth. When a user accesses your webpage all your images
and your entire html document is downloaded into the person's cache (a folder
that stores webpages and images). Since it is already on their computer's hard
drive there is no way to prevent them from 'stealing' it. Your only recourse is to
copyright your html or image and if someone uses your property without
permission you can take legal action against them.
o http://www.clari.net/brad/copymyths.html
o http://www.aimnet.com/%7ecarroll/copyright/faq-home.html
o http://www.tufts.edu/departments/fletcher/multi/texts/UNTS13444.txt
o http://www.loc.gov/copyright/
7. How do I password protect a directory?

If you have an Apache or Netscape Enterprise Server you can use Basic
Authentication to password protect a directory. Basic Authentication does offer a
certain level of security but it does not offer strong security.
o http://www.apacheweek.com/features/userauth
o http://hoohoo.ncsa.uiuc.edu/docs/tutorials/user.html
8. How do I include one file in another?

See Next FAQ.
9. Where can I find out what *.shtml, *.shtm, or SSI is?

Server Side Includes let you take multiple files and combine them into one
working file before the document is sent to the user. SSI makes it easier to
maintain large sites by allowing you to change only one file instead of the entire
site. SSI also has other applications such as including the current date, the last
time the document was updated, the URL of the current page, and more. Files that
are parsed by the server sometimes have the extension *.shtml or *.shtm.
o http://hoohoo.ncsa.uiuc.edu/docs/tutorials/includes.html
o http://www.anu.edu.au/CNIP/authors/resources/ssisum.html
o http://www.internetter.com/ssi/index.shtml
o http://www.carleton.ca/%7edmcfet/html/ssi.html
10. How do I display special characters like > < © &?

ISO-Latin-1 (also called ISO8859-1) Character Codes are used to display 'special'
characters. Failure to use these codes could result in mis rendered documents.
You can find Character Entities and Numeric Entities at the following pages.
o http://www.w3.org/TR/REC-html40/sgml/entities.html
o http://www.sbrady.com/hotsource/html/char.html
11. How do I make a background sound play on my page?

Many people find background sounds annoying. The time required to load most
audio files is less then satisfactory and the quality of the file leaves even more to
be desired. Your best bet is to link to the audio file and let the user decide if they
want to listen.
<a href="dog.wav">Dog - "Woof Woof"</a>
There is no 'standard' way supported fully by browsers to make sound play in the
background of a webpage. However, you can use proprietary tags from Navigator
and Explorer.
<embed src="bgsound.wav" autostart="TRUE" hidden="TRUE" loop="TRUE">
<noembed>
<bgsound src="bgsound.wav" loop="-1">
</noembed>
12. How do I automatically redirect my users to a new webpage?

Contrary to popular belief, redirection is a function of the server, not an HTML
tag. If you are interested in *refeshing* a document see below, other wise, read

on. If you have a NCSA or Apache server you can redirect from one URL to
another by creating a file called .htaccess. In that file place the following:
Redirect oldvirtualURL newURL
Change oldvirtualURL to the path of the old URL and newURL to the path of the
new url. An example of a redirection would be:
Redirect /path/to/file.html http://www.domain.com/newpath/to/file.html
o http://hoohoo.ncsa.uiuc.edu/docs/howto/Redirect.html
The "meta refresh" tag is a Netscape incarnate and doesn't work in all browsers. If
you use this solution you should always include a link within the document to the
new page. Meta tags are placed within the <head> tags and after the the <title> tag.
Replace [S] with the number of seconds to wait before refreshing, and
[http://www.domain.com/page.html] with the URL of the page you wish to "refresh" to.
<META HTTP-EQUIV="Refresh" CONTENT="S; URL=http://www.domain.com/page.html">
13. How do I add a "hit counter" to my page?

You have the option of using a CGI script on your server or a free counter service.
In either case not all of your visitors will be counted. If the script is not executed
because the user has stopped the page from completely loading that 'hit' will not
be counted. In the case of a graphical counter, anyone who visits your page with a
non image enabled browser will not be counted.
o http://www.rahul.net/mcgrew/counters.html
o http://www.worldwidemart.com/scripts/
o http://www.scriptsearch.com/
o http://www.markwelch.com/bannerad/baf_counter.htm
14. Why doesn't my page show up in browser X?

Some browsers use 'error correction', this means if it encounters invalid HTML
the browser 'guesses' what should really be there. No two browsers 'guess' the
same and in the end your page might not load in one browser while it looks fine in
others. By validating your markup you will be able to spot problems in your
markup and fix them.
o http://www.flfsoft.com/html/html_validators.html
o http://www.sbrady.com/hotsource/html/validation.html

15. What resolution should I author my pages for?
You shouldn't author your pages for one specific resolution. Textual and other
data will wrap to fit within the size of the viewable area. The only time you would
run into trouble is if you were doing something like using tables to layout your
pages (which is *not* what they were intended for).
16. How do I remove the little blue spec from the bottom right side of my
image?
This happens when you make an image a link and there is a space between the
end of the image tag and the ending [</a>] tag. Nothing has physically happening
to the image; what is really happening is the extra space is being turned into a link
and is therefor underlined.
Example of problem markup:

<a href="path/to/file.html"><img src="image.gif" alt="example">
</a>
Fixed markup:
<a href="path/to/file.html"><img src="image.gif" alt="example"></a>
17. Where can I find a server to host my website?

You have the option of using a pay provider or a free provider. When picking a
host you have to look at the cost per month to you, what comes with the hosting
(e.g. SSI, CGI, real audio etc.), do they limit the number of kilobytes you can
transfer a month, and anything else you find important.
o http://webhostlist.InternetList.com/
o http://www.freewebspace.net/
18. How do I get a visitor's email address?

There is no way to "grab" a user's email address without them knowing. If you
want their address ask them to email you (but don't expect them to be too happy if
you end up SPAMing them).
19. Why isn't my web browser working?

If you are having difficulties with your web browser try the following groups.
o news:comp.infosystems.www.browsers.mac
o news:comp.infosystems.www.browsers.ms-windows

o news:comp.infosystems.www.browsers.x
o news:comp.infosystems.www.browsers.misc
20. I'm having trouble with HTML in my WebTV signature?

It is not proper netiquette to post HTML on USENet. If you have questions
concerning WebTV try the following group.
o news:alt.online-service-webtv
21. How do I post HTML email/newsgroup messages?

Not everyone has news or email readers capable of rendering HTML. HTML
messages not only look terrible in non HTML readers but it also makes the post
larger and therefor it takes longer for it to download. HTML was developed for
use on the world wide web and that's where it should stay.
22. How do I offer a downloadable file on my page?

So long as your server is configured properly, all you must do to offer a file for
download on your webpage is: a) upload the file b) create a link to that file with
the <a> element.
<a href="path/to/file.ext">Download my File</a>
If, when you use the above method to invoke a download, strange characters start
appearing, your server is not configured properly. Contact the server administrator
and ask him or her to configure the proper content type.
23. What is the Websafe pallet and where can I find it?
The Websafe Pallet consists of 216 colors that can be displayed correctly, without
dithering (bleeding), on cross-platform, cross-browser, 256 color systems.
Websafe Colors consist of the following doubles: 00, 33, 66, 99, CC, and FF. The
following page has a complete listing of the Websafe Pallet.
o http://www.sbrady.com/hotsource/html/websafe.html
24. When I create webpages, am I "programing with code" or "authoring

with markup"?
You are authoring with markup; here's why:

An HTML file itself is not a program; it can be more accurately described as a
"datafile". But, what we use to render that datafile is a program. We commonly
refer to those programs as "browsers" or "user agents".
Programs, as defined by any knowledgeable person of computer science, revolve
around iterations and conditional executions. Certain instructions are carried out
based on variables and equations. A program has the potential to branch out into
different actions.
HTML datafiles to not have that potential or "ability".
By determining that HTML datafiles are not programs, you can then make the
statement that when you create an HTML datafile, you are not "programing" it.
You are, in fact, authoring it using markup. Hence, HyperText Markup Language;
not HyperText Programing Language.
25. How do I remove spacing between a table border and an image?

The rendering of the spaces is caused by the "table-data-cell-space-bug." If you
wish to have an image "seamlessly" render inside a table there must be no spacing
between your table-data-cell markup and image markup.
Example of problem markup:

<table border=0 cellspacing=0 cellpadding=0><tr>
<td> <img src="foobar.gif" width=20 height=20 alt="alternate text"> </td>
</tr></table>
Fixed markup:
<table border=0 cellspacing=0 cellpadding=0><tr>
<td><img src="foobar.gif" width=20 height=20 alt="alternate text"></td>
</tr></table>
26. I want to start my own Webdesign Company but have questions

about costs, fees, etc.?
With the way today's technology market is booming, many of you are looking for
a way to cash in and ride the wave (or perhaps you just enjoy web development).
It seems like a week doesn't go by that a ".com" company's IPO doesn't double or
triple in the first day of trading. Hold on a second because before you can catch
that "killer wave" and ride into early retirement in your Jag there's a few things
you need to know.
Skills (Frontpage users need not apply)

Website authoring is a craft that combines as much of art as it does technical
know-how. A website with a slick user interface but poorly designed HTML or
back-end will impress some while failing in not-so-"ideal" situations (ie. different
user agents, heavy load, etc.). On the opposite end of the spectrum, a rock-solid
website that brings tears (not of joy) to the eyes of visitors is equally doomed. If

you happen to be weak in one area, consider sub-contracting that work out or
even bringing onboard a partner(s).
Some specific skills that will be essential (or even required) are: Website
Authoring (HTML, CSS, JS), Programming (Perl, PHP, C), Image Editing
(Photoshop, Paint Shop Pro, GIMP), Server Maintenance (Unix, Linux),
Webserver Software (Apache).
Cost
Starting up your own web-related business can be done with a small initial
investment. Many people already have computers, internet connections, software,
peripherals, among other things needed to run a business. Your own domain name
will be essential (no Geocities pages) for any serious business venture and won't
run you much money ($35 USD per year plus $360 USD per year for hosting).
Even with that in mind, costs can climb steeply depending on how far you want to
take your business.
A big question you should ask yourself is whether you want to offer webhosting
and other related services to your clients (here is where the cost starts to go up).
Fortunately, the many costs involved with webhost (bandwidth, machines, UPS,
secure complex) can be averted by providing your hosting through a reseller
program. Many ISPs offer reseller programs that can quickly turn a profit. For
example, you might buy 1MB of space for $0.50 and resell it for $1.50 when
bundled with other services such as email accounts, ftp access, and advanced
server-software.
o Register a Domain Name
http://www.icann.org/registrars/accredited-list.html
o Lucrative Reseller Program
http://www.iserver.com/
What should I charge?
It is against the law in many countries for competing businesses to share pricing
information with each other. With that said, please don't ask me or anyone else in
this group or any other group what we charge. But take heart, there have been
many surveys on billing practices and billing rates.
o FAQ on Price Fixing

http://www.hwg.org/resources/faqs/priceFAQ.html
o Interactive Salary Guide
http://www.pencomsi.com/industry.html
o JobStar's Salary Surveys
http://jobstar.org/tools/salary/
o NetMarketing Web Price Index
http://www.netb2b.com/wpi/

o The Real Rate Survey
http://www.realrates.com/survey.htm
o Freelancing in the Web World
http://www.wired.com/news/news/technology/story/16201.html?wnpg=6
o ZDNet SalaryZone
http://www.zdnet.com/enterprise/salaryzone/
1. What is HTML?
HyperText Markup Language:
HTML is a plain text file with commands <markup tags> to tell the Web browsers how to
display the file.
Tim Berners-Lee created HTML while at CERN, (the European Laboratory for Particle
Physics) in Geneva.
2. How do I start?
Here's a basic HTML document layout:
<HTML>
<HEAD>
<TITLE>Snowi's Stuff</TITLE>
</HEAD>
(Note: The words between the TITLE tags, in this case, "Snowi's Stuff" will show up on
the header line of browsers viewing the page; and also, it will be the default title when the
page is added to a browser's favorites or bookmarks.)
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#cc0000" VLINK="#000066"

ALINK="#ffff00">
<H1>Snowi's Stuff</H1>
Type the "stuff" here.
(Note: The following is how to make the word "Snowhawk's" a link to the Web page
http://www.snowhawk.com/)
<A HREF="http://www.snowhawk.com/">Snowhawk's</A>
</BODY>
</HTML>
That's the basic beginnings of writing an HTML file. You save it in notepad, word,
whatever text editor, as yourfile.html (or .htm if your system doesn't allow 4 characters
for the file type). Then you FTP the file to your server. [Your ISP (Internet Service
Provider) will give you their FTP address of where to upload your files. If your service
doesn't offer Web site space, there are several that offer free Web space.]

3. How do I change the color of my background or text?
Include the element "bgcolor" with a color code in your body tag:
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#cc0000" VLINK="#000066"
ALINK="#ffff00">
BGCOLOR: is the color you want for the background
TEXT: the color you want to designate for regular text
LINK: the color for new text links (pages that have not been displayed by the reader's
browser)
VLINK: the color for text links to pages that the reader's browser has already displayed
ALINK: the color a text link will change to during the process of choosing it (as it is
clicked with the mouse)
* Color codes: Web Safe Color Chart and also Non-Dithering Colors by Hue
To change the color of a word, or sentence, you put <FONT COLOR="#cc0000"> before
the text you want colored, and </FONT> at the end. (substituting the "cc0000" with the
code for the color you want)
In the color code "#CC0000" - the "CC" position is red, center "00" position is green, and
last "00" position is blue.
Web Safe Colors use lower numbers for darkest colors, going 00, 33, 66, and 99, then cc,
and ff... with 'ff' being the lightest.
4. How do I use a picture as the background?
Include the element "background" with the name of the graphics file:
<BODY BACKGROUND="gumby.gif" BGCOLOR="#ffffff" TEXT="#000000"
LINK="#cc0000" VLINK="#000066" ALINK="#ffff00">
(Note: the "bgcolor" element remained along with the added "background" element. This
way, the browser will display the color you designate while the background graphic is
loading. Not required, but using a color similar to the background file will ensure viewers
can see your page well enough to begin reading while the background graphic is loading.)
5. How do I add music to my page?

Some people use the Netscape specific &/or Explorer specific code, however I
recommend you make it a link and let the reader choose whether or not they want to hear
music.
Like this...
<A HREF="http://www.snowhawk.com/sounds/hvnearth.mid">Heaven on Earth</A>
would allow the reader to choose the link Heaven on Earth. Then the reader's software
will open the link for them to hear the midi. Some people do use the other method,
however it is only operational to that specific browser. (Like only Netscape users could
hear it for Netscape's specific code.. or the same for Internet Explorer's code.)
6. How do I align text next to a graphic?
By including the "align" element in the "img" tag.
<IMG SRC="wflower.jpg" WIDTH="25" HEIGHT="25" ALIGN="top" BORDER="0"
ALT="wildflower photo"> Photo of wildflowers in Texas</A>
(The align="top" would align the text "Photo of wildflowers in Texas" next to the graphic
at the top. - Other options are "middle" or "bottom.")

7. How do I make a graphic a link?
Including the "img" tag between the "a href" tag and the "a" closing tag:
<A HREF="http://www.snowhawk.com/wildlife.html"><IMG SRC="leopard.jpg"
WIDTH="25" HEIGHT="25" ALIGN="top" BORDER="0" ALT="link to
wildlife"></A>
8. How do I make a new paragraph?

Inserting the <P> tag at the beginning of your paragraph will drop the text down two
lines. (If you insert the <BR> tag, it will drop your text down one line.)
9. How do I make headings and text larger or smaller?

There are 6 sizes to the heading tags:
This is using the <H1> tag

You would type this as follows:

<H1>Heading here, ending with the closing tag</H1>
The next text you type would then be displayed 2 lines below.
The Heading tags will default align to the left. If you want to center the heading, you
would use:
<H3 align=center>Heading here</H3>
...to have the heading aligned to the right, you would use:
<H3 align=right>Heading here</H3>
To adjust the size of any text, use the <FONT SIZE="-1">to go smaller one size, ending with
closing tag</FONT> And <FONT SIZE="+1">for text one size larger.</FONT>
To center any text, or image, you begin the line with the center tag:
<CENTER><FONT SIZE="-1" COLOR="#009900">text</FONT></CENTER>
Always close the last tag first... such as "font" was closed before "center" above;
otherwise the browsers have a "field day" with your text.

10. Where can I find graphics to use on my page?
There are many sites offering free use of graphics, although most will require a link to
them, showing credit. You can do a search at any of the search engines and get thousands
of places to look. You can also buy CDs with graphics on them. Check to be sure they
state "royalty free" on the CDs. Here's my collection of graphics links, which includes
how to make your own graphics, and where to find graphics offered by folks for public
domain.
11. How do I make text show as bold?

Placing the <B>tag before the text will make everything bold, until you close the tag
with</B> (Or using <STRONG>tags</STRONG > will do the same.)
12. How do I make text show in italics?

Placing the <I>tag before the text will make everything in italics, until you close the tag
with</I> (Using <EM>emphasis tags</EM > will do the same.)
13. How do I know if my HTML is correct?

It's good to validate your HTML. Just because you can see the Web page ok on your
browser doesn't mean every browser will show it that way, or even be able to access the
Web page. Browsers attempt to "work around" HTML errors, and the differences can be
subtle or drastic. That's why the folks at WC3 have worked up the specifications of what
works for every browser. Although some may display it a little different, at least you
know they can access your page. (The different browser programs have their own set of
"whistles and bells" that just won't do the same... especially Microsoft Internet Explorer
and Netscape Navigator.)
Where is the download archive?

In January 1998, we changed the download format for the Windows
versions of the tutorial from .ZIP files (which many people were unable to
properly decompress) to an executable (.EXE) file. See the most current
links for downloads from our page at:
http://www.mcli.dist.maricopa.edu/tut/download.html
"I thought I should be doing the tutorial off line, but

then can't access my pages because my web browser
keeps trying to dial up my PPP. How do you run it off
line for Web page design?"
Most web browsers have a Preferences or Options menu where you put
the address of your favorite "home" page--that is, every time you launch
the browser, it attempts to connect to this site. Some browsers have an
option where you can specify it to start with a blank or empty page.
Another approach is to cancel the connection when your modem tries to
dial. Another idea (which you can do easily when you finish our tutorial)
is to create your very own Home Page that sits on the hard drive. Use your
web browser to Open... or Open Local... and find the page. Use your

mouse to copy the address or file path indicated in the URL field (usually
near the top of a browser window) and then paste it into the area of your
Preferences/Options that says "Home Page". This way, when ever the web
browser starts, you see your custom page with all the links you like, and
you do not have to wait or even connect to an Internet server.
"I've created my web pages, but why can't anyone else

see them on the Internet? What's the URL to my hard
drive?"
When you create your web pages, think of them as being able to see out to
the entire Internet world (when you are connected to the network). BUT
the entire world cannot see back into your computer since it does not have
a WWW address on the Internet. If you want to publish on the Internet,
you must first locate an Internet Service provider that rents space on its
World Wide Web server. If you are at a school or a large company,
contact your network administrators. You may want to contact the
company that provides your access to the Internet and ask if they rent web
server space. If you are shopping for a net provider, try MecklerMedia's
Provider List or WebISPList.
Another option is to use the free web page hosting service offered by
Geocities or you can search for other free services sing the tools at
Freewebspace.net
"I've created my web pages on my desktop computer --

how do I get them to a WWW server"
So you have arranged somehow to get web server space! Generally,
WWW servers are UNIX computers and you will have to find a utility to
transfer files from your desktop computer to the WWW server. If you do
not have a program, search the ShareWare.com for a "ftp" utility. If the
WWW server you will use is a Macintosh or Windows-based computer,
you may be able to transfer the files over your local network. This is one
question you will have to ask of whomever is providing you access to the
WWW server.
"I've updated my web pages but do not see the changes

in my web browser. Why?"
First, double-checked that you have Saved your HTML file from your text
editor. The try using the Reload option in your web browser. Or, the
browser may be looking at another copy of the HTML file; in the browser,
use Open File... to read in the intended document.

"Why don't I see the text in my <title>....</title> tag on my
Web page?"
Recall from lesson 1 that the <title>....</title> tag is part of the information
in the HEAD of your HTML file; only the BODY is displayed on the
page. The text in the title tag should appear on the menubar of your web
browser and it is how the browser will track your pages from its
navigation/history menus. It's not uncommon to write what appears to be
redundant HTML:
<html>
<head>
<title>New Products from Zippy Communications</title>
</head>
<body>
<h1>New Products from Zippy Communications<h1>
......
......
</body>
</html>
The same text is used twice -- once for the web browser to identify the
page and once in the <h1> tag to put the same title on the page.
"When I load my web pages into my web browser, why

do I see odd characters at the top of the screen."
If you are using a word processing program to create your HTML files, be
sure that you are saving them as plain text (ASCII) format -- these
characters are hidden formatting codes. For Windows users, do not use the
Write application -- it will add a bothersome "1" at the top of the screen.
Your best bet is to start out by using the simplest text editor possible -- the
Windows NotePad or TeachText/SimpleText for the Macintosh. Once you
know the basic tags, then go looking for a program to help with the
shortcuts.
"Why do I see an icon with a question mark rather then

my inline image?"
This icon means that your web browser could not locate the image file.
first check to see that it is in the same folder/directory that you reference
in the <img src= "..."> tag. Next make sure the spelling of the file name
exactly matches the file name written in the <img src= "..."> tag

"Why do I see an icon with a broken corner rather then
my inline image?"
In this case, the external file is a format not recognized by your web
browser. Make sure that the file is in the GIF format.
Could you please help with a tag that makes all HTML
commands inside the tag text/ignored?
Bad news first...
There is no such tag. Even if you use <pre>...</pre> tags, your browser will
interpret any HTML as... HTML.
Good news next...

All you need to do is substitute the "special characters" (see lesson 9) to
replace all occurences of the < and > characters:
• Replace all "<" with "<"
• Replace all "<" with "<"
This will display them as the characters and not interpret them as HTML.
"How can I make the downloading function work? Is it

just to specify where my zip-file is, the path to it? Or do
I have to make a FTP server on our server. Is that all
there is to it or is there some other magic working
behind the scene on your server that I need to be aware
of to make it work on our server?
No magic necessary. Just build your <a href=....> links to point at the file.
Even when you access files locally (like from your hard drive, your web
browser will know how to handle the files. For Windows files, .zip and .exe
files are pretty standard. Macintosh files on the other hand should always
be compressed as BinHex (.hqx). Most web servers are preset to transmit
files who's names end in these extensions.
"How do you create a counter that shows how many

times someone has visited your page?"
Counters require programs that run from a web server, which is really
beyond the scope of just "Writing HTML." There are scads of information

for counters at the Yahoo Access Counts page. See also Web Counter or
Internet Counter for a free service to add web page "hit-o-meters".
I downloaded the Windows Zip archive and when I

click on the Start link it cannot find locate file
TUT/INDEX.HTM. Why?
We no longer provide the downloads in .ZIP format and have made it into
a hopefully easy to use .EXE file. See the links from the download page.
I can't get the volc.html file to load on my browser? I'm

using Internet Explorer, is there anything I need to do?
With all the browsers out there, we had to write the directions to be
generic. Here is how you open a local file in Microsoft Internet Explorer:
1. Select Open... from the File menu.
2. This allows you to type in a URL or provide the file path to a local
file (the latter is what you want to do). The easiest way is to click
the Browse button and use the dialog box to select the volc.htm file
on your hard drive.
3. The easiest way is to arrange your desktop so that adjacent to the
Explorer window you can see the folder/directory window that
contains your HTML documents -- you can then just click, drag the
icon for your file and drop it into the Explorer window.
"This tutorial is great! Can I make copies?"

Yes, you can download the entire tutorial and use at your location.
However, you must make sure that you give credit to the Maricopa Center
for Learning and Instruction and the Maricopa Community Colleges. You
may NOT sell it for profit or alter the content without permission.
How can I have a sound play when my page opens?"

Generally, we recommend against doing this. To the viewer it can arrange
from annoying to obtrusive. You should provide the viewer the choice to
hear a sound.
But if you insist... use the <embed> tag to point to a sound file (AIFF,
WAV, or MIDI formats):
<center>
<embed src="sounds/groovy.wav" WIDTH=144 HEIGHT=60 autostart=true>

</center>
"Can I make a web page on webTV"

I cannot say I have first hand knowledge, but others have written us and
said it was possible. You can find the answers (and more) from the webTV
Resources site a collection of resources collected by webTV users.
While webTV is primarily a viewing technology for the web, with some
patience and some pointers, you may be able to use it as a creation tool. In
our opinion, though, if this is anything other than a hobby, get a real tool
for the job.
"How can I force the text not to wrap at the edge of the
browser window?"
There are some page designs where you may not want the text content to
wrap-- notably a large table of data perhaps in a <pre>...</pre> or perhaps a
timeline where you would like the user to use the scroll bar to navigate
through content laid out in horizontal layout.
There is a subtle variation of the line break tag, namely the No Break tag
<nobr>...</nobr> which tells the browser to not wrap whatever is inside,
which could be text, pictures, or any content. The usage would be
something like:
<nobr>
<h1>Come Scroll with me, away to the right, as I list
out all of the long answers to the
meaning of life accessible only to those that can scroll,
scroll, scroll...</h1>
</nobr>
Another example is a framed page where the lower frame contains a
horizontal scrolling list of links to images.
"How do I get rid of the underlining of hyperlinks?"

Historically this was not an option- it was an option for the person viewing
your set to set in their web browsers. However, the features avilable to
browsers that support Cascading Style Sheets (version 4.0 browsers) can
accomplish "un-underlined" links.
Just place the following code inside the <HEAD>...</HEAD> of your HTML
file:
<style type="text/css">
<1--
A:link, A:visited, A:active { text-decoration: none }
-->

</style>
Use this keeping in mind that many people may not know test is hypertext
without the familiar underlining.
Tables
How can I create a blank cell in a table that displays its borders?
Put a non-breaking space character in the cell using " ".
How can I space out a table cell with blank lines?
Users often ask how they can space out items vertically in a tabled list. Adding a <P> tag at the end of each
cell doesn't work because Internet Explorer ignores tags that don't contain any content. Instead, use <P>
and <BR> tags (or two <P> tags, depending on how much space you need) and add a non-breaking space in
between:
<p> <br>
Frames
Why does my page display as blank with some browsers?
Pages that use frames must also include content for browsers that do not support frames. You include the
alternate content in the <NOFRAMES> section of your frameset document. If you don't provide this
content, your page will appear blank in Internet Explorer 2.0 or other browsers that don't support frames.
See the next question for more information on coding for non-frame browsers.
How do I code frames to be compatible with non-frame browsers?
The document containing your frameset commands must also contain a <NOFRAMES> section that
contains the HTML material you want the other browsers to display, for example:
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="80,100%" FRAMEBORDER="no" FRAMESPACING=0>
<FRAME SRC= NAME= >
<FRAME SRC= NAME= >
<NOFRAMES>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#000000">
Content to be displayed by other browsers...
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
Browsers that don't support frames will ignore the <FRAMESET>, <FRAME>, and <NOFRAMES> tags
and will display the contents of the <BODY> section.
Note: The <FRAME> tags should not appear between <BODY> and </BODY> tags.
How do I create a link that changes the content of a different frame?
Include TARGET="framename" in the link, for example:
<A HREF="http://www.my.com/my.htm" TARGET="frame1">
Note that target names are case sensitive. You can also use any of the following predefined target names:
Target Description
name
_blank Load this link into a new, unnamed window.
_self Load this link within the current frame.

_parent Load this link into your parent frame (same as self if current
frame has no parent).
_top Load this link at the topmost level (same as self if current frame
is at the top).
Why do my links open a new window instead of changing the frame contents?
Internet Explorer interprets target frame names strictly and is case sensitive. For example, if you define a
frame called "FRAME1" and have an anchor that links to "frame1," the target name will not be recognized.
Links to undefined targets open new windows.
How do I create a link that changes two or more frames?
One easy method is to link to a new frameset page using TARGET="_top". Any documents or images
common to both framesets will be loaded quickly from the cache.
You can change two frames at once by using scripting within the anchor:
<A LANGUAGE="VBScript" HREF="http://target1.htm" TARGET="frame1"
onClick="parent.frame2.location.href='http://target2.htm'">
The HREF and TARGET on the first line specify the update for one frame, and the second line includes a
script that changes the second frame. Substitute the appropriate frame names in each case. Note that you
may need other changes in the script, depending on the structure of your page.
You can use scripting to change selected frames and (optionally) to perform other functions from a single
click, as follows:
<A HREF="" name="ClickMe">Click me!</A>
<SCRIPT Language = "VBScript">

</SCRIPT>
How do I reference floating frames?
If you are using only floating frames, you can reference them exactly like standard frames:
<IFRAME SRC="page1.htm" NAME="Frame2"></IFRAME>
parent.frames(0).location.href="newpage.htm"
<A HREF="newpage.htm" TARGET="Frame2">
If you combine floating frames with regular frames, the floating frames have to be treated differently.
Floating frames are added to the document object, not to the '"regular" frames collection. (This information
wasn't included in the SDK documentation, but it will be added in a future version of the documentation.)
To access a floating frame on the current page, use the following:
document.FloatingFrameName.whatever
To access a floating frame in a different frame, use the following:
top.frames[n].document.FloatingFrameName.whatever
How do I refresh a frame or an entire window during testing?
To refresh a frame, right-click within the frame and select Refresh from the shortcut menu, or left-click
within the frame and click the Refresh button on the Internet Explorer toolbar. Press F5 to refresh the entire
frameset.
How do I print the contents of a frame?
To print the contents of a frame, right-click within the frame and select Print from the shortcut menu, or
left-click within the frame and click the Print button on the toolbar. Internet Explorer 4.0 allows you to
choose printing the entire screen, the selected frame, or all frames individually. You cannot print the
complete multi-frame window from Internet Explorer 3.0.

How can I use an image as a frame border?
You can use an image as a frame border by adding extra "border" cells to your table. Here's an example of
a table that has a five-pixel-wide "border" tiled with the image "Test.gif":
<HTML>
<BODY>
<TABLE BORDER=0 CELLSPACING=0>


<TR>
<TD HEIGHT=5 COLSPAN=3 BACKGROUND="test.gif"></TD>
</TR>
<TR>

<TD WIDTH=5 BACKGROUND="test.gif"></TD>
<TD>

<FONT SIZE=7>Hi there!</FONT>
</TD>

<TD WIDTH=5 BACKGROUND="test.gif"></TD>
</TR>

<TR>
<TD HEIGHT=5 COLSPAN=3 BACKGROUND="test.gif"></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Style Sheets
How are measurements handled?
In general, you should specify font sizes and line-height using point size rather than pixels. A font that is
16-pixels tall may look fine on the screen, but it looks small on a 300-dpi printer. For indents and other
measurements, you might consider using inches.
What's the difference between the <DIV> and <SPAN> tags?
Think of <DIV> as a container version of <BR>. The <BR> tag allows you to add a simple line break into
your document. The <DIV> tag, being a container, also allows you to specify additional attributes, such as
CLASS for assigning a CSS class to this section.
If all you want to do is provide simple highlighting of a word or short phrase in a longer sentence without
line breaks, use <SPAN>. This is a "do nothing" container tag that implies no default formatting of its own.
However, it is a container, so you can assign a CLASS (or STYLE) attribute to it to achieve your goal.
Thus, to highlight a word in a sentence use the following code:
This is your last <span style="background:yellow; color:red;
font-weight:bold">Warning</span>, proceed at your own risk.

How do I use external style sheets?
To use external style sheets, place your style definitions in a separate file with a .css extension, and link to
this file from your Web page as follows:

<LINK REL=STYLESHEET TYPE="text/css" SRC="http://www.my.com/mystyle.css">
The external file must not include the
<style>

</style>
tags that are used for style sheets within a document.
Note: <BODY> settings do not work in external style sheets in Internet Explorer 3.0.
How can I create shadowed text?
Although CSS does support shadowed text (via text placement on the page), you should be careful using
this feature because non-CSS-aware browsers will not be able to display it correctly. Think about how your
page will look in other browsers, and determine whether the benefit of getting shadowed text via CSS is
worth the cost of damaging your information in non-CSS browsers.
There are some excellent examples of text shadowing and other capabilities available via CSS on
http://www.microsoft.com/typography/css/downloads/entrance.htm , but these examples are not
compatible with non-CSS browsers.
How can I set a font for the entire document?
Place a BODY command within the document head as follows:
<HTML>
<HEAD>
<STYLE>

</STYLE>
</HEAD>
<BODY>
<H1>This</H1> is a sample page
</BODY>
</HTML>
The BODY command cannot be used in a linked external style sheet in Internet Explorer 3.0. You should
always list alternative fonts in case the primary choice is not available, as explained in the next question.
Which fonts can I use?
A font has to reside on the user's computer in order to be displayed. This means that you must use fonts that
either you can count on to be on the user's system or users can legally download through your site. You can
and should list multiple fonts in order of preference to handle the cases where a desired font isn't available,
for example:
<font face="Verdana, Trebuchet MS, Arial, Helvetica, Helv, Geneva, Swiss, Sans-Serif,
System">
To a certain point, there is no way to solve the problems with cross-platform fonts just using the FACE
attribute. Not only are you perhaps going to run into systems that you weren't expecting, but you can also
run into systems where the user didn't install (or removed) the "common" font you were wanting.
Depending on your actual needs, requirements, and expectations, a good way of dealing with this would be
as follows:
<font face="Verdana, Arial, Helvetica, Swiss" style="font-family:'Verdana, Arial, sans-serif,';">
While this is sort of robust in the usage of the font FACE attribute, it is also taking advantage of the CSS
addition of a "generic" font name. When the browser encounters "Sans-Serif" as a font name, it will
undertake the task of locating a font on the system that matches that type. While which sans-serif font is
selected is no longer in the authors scope, it does allow the author to say "I at least want a sans-serif font."

Additional information, including embedding fonts for use by Internet Explorer 4.0, is available at:
http://www.microsoft.com/truetype/web/default.htm.
Be careful: Most commercial fonts are not licensed for redistribution. Read the license carefully for any
fonts you have purchased before making them available on your site. Several fonts are installed with the
full version of Internet Explorer 3.0, but are not included with the minimal installation. You can offer users
a link to the Microsoft Typography page ( http://www.microsoft.com/typography/ ) to install these fonts,
or use the following links to download individual fonts:
• Verdana: ftp://ftp.microsoft.com/developr/drg/truetype/verdana.exe
• Comic Sans MS: ftp://ftp.microsoft.com/developr/drg/truetype/comic.exe
• Arial Black: ftp://ftp.microsoft.com/developr/drg/truetype/ariblk.exe
• Impact: ftp://ftp.microsoft.com/developr/drg/truetype/impact.exe
Forms
How can I control the use of the ENTER key to submit a form?
If you have a single form on your page, pressing the ENTER key submits the form, even if you don't have
an <INPUT TYPE=SUBMIT> button. This can bypass your validation script. The easiest way to prevent
this action is to define a second form on the page. It may be empty, or it may contain only a hidden form.
For example, place this after the real form:
<form method=get>
<input type="hidden">
</form
How can I have multiple Submit buttons on my form?
Although HTML won't allow multiple Submit buttons, you can simulate this with graphics that serve as
Submit buttons combined with some scripting, for example:
<script language="javascript">

</script>
<FORM METHOD="POST" ACTION="javascript:submit_Form()" name="testForm">

<input type="textbox" name="myLittleTextBox">
<INPUT TYPE=IMAGE SRC="babble.gif" NAME="whatever">
</FORM>
<a href="javascript:submit_Form_DownloadFile()"><IMG SRC="babble.gif"></a>

<a href="javascript:sumit_Form_ReadInformation()"><IMG SRC="babble.gif"></a>
<a href="javascript:reset_Form"><IMG SRC="babble.gif"></a>
How can I put a Submit button in a different frame from the form?
You can't have the form's Submit button in another frame because the button has to exist within the same
<FORM></FORM> containment as the elements it needs to submit. However, you can call the Submit
method of the form from another frame. For example:
<input type=button name=remote value="submit">
<script language="vbscript">

</script>
This code will put a Submit button in the first frame of the page. When the user clicks the button, it will
call the Submit method of the first form in the second frame.
How can I send mail from my forms?
Internet Explorer handles a mailto command by opening a new mail message with the address filled in, but
it does not consistently insert the Subject line or message text. Internet Explorer doesn't use an internal mail
system; it can work with many different mail systems. The Subject line can be inserted only for mail clients
that support this feature.
The most dependable way to use e-mail with a form is through a script or program on the server. Many
Internet Service Providers (ISPs) provide such scripts to anyone with a Web site on their servers.
Warning: If you use a script that sends mail from your account to an address specified in the HTML page,
someone could capture your HTML source and modify it to cause your server to send mail from your
account to any address they want. For security, always use server programs or scripts that have the
destination address hard-coded or that work only with HTML pages located on that server.
Special Effects with Marquees

How do I create a marquee that scrolls vertically?
You need to use the ActiveX™ marquee control that is included with Internet Explorer. The CODEBASE
parameters are not required because this control will always be installed with the browser. The page that is
to display the marquee will include code similar to the following (see the next question for specifics on
how to control the scrolling direction and other variations):
<OBJECT
ALIGN=CENTER
CLASSID="clsid:1a4da620-6217-11cf-be62-0080c72edd2d"
WIDTH=100 HEIGHT=90 BORDER=0 HSPACE=0
ID=marquee >
<PARAM NAME="ScrollStyleX" VALUE="Circular">
<PARAM NAME="ScrollStyleY" VALUE="Circular">

<PARAM NAME="szURL" VALUE="marqcont.htm">
<PARAM NAME="ScrollDelay" VALUE=60>
<PARAM NAME="LoopsX" VALUE=-1>
<PARAM NAME="LoopsY" VALUE=-1>
<PARAM NAME="ScrollPixelsX" VALUE=0>
<PARAM NAME="ScrollPixelsY" VALUE=-3>
<PARAM NAME="DrawImmediately" VALUE=0>
<PARAM NAME="Whitespace" VALUE=0>
<PARAM NAME="PageFlippingOn" VALUE=0>
<PARAM NAME="Zoom" VALUE=100>
<PARAM NAME="WidthOfPage" VALUE=100>
</OBJECT>
The page that is the marquee (referred to as Marqcont.htm in the code above) will have code similar to the
following:
<TABLE BORDER=0>
<TR>
<TD WIDTH=100 HEIGHT=60 ALIGN=CENTER VALIGN=CENTER>
<SPAN STYLE="font: 10pt/12pt Arial; color: purple; font-weight: bold">
This site is enhanced for
<BR>
<IMG ALIGN=CENTER width=88 height=31 SRC="ie_stat.gif" border=0>
</TD>
</TR>
</TABLE>
What other scrolling effects can I create with marquees?
The ScrollPixelsX and ScrollPixelsY values control the direction of scrolling movement. X values control
horizontal movement, and Y values control vertical movement. Positive values move to the right or bottom,
negative values move to the left or top. Thus, X=0 and Y=-3 results in scrolling from bottom to top. If both
the X and Y values are non-zero, the movements are combined, resulting in a slanted movement.
The Zoom parameter can be used to cause an explosive effect by contracting and expanding the contents.
Including the following lines in the OBJECT definition causes the contents of the marquee to switch
between different contents when the user right-clicks the marquee.
<PARAM NAME="szURL" VALUE="alphabet.htm">
<PARAM NAME="PageFlippingOn" VALUE="1">
<PARAM NAME="OtherURL0" VALUE="alphabet2.htm">
<PARAM NAME="OtherURL1" VALUE="alphabet3.htm">
How can I control the background color of a marquee?
You cannot use BackColor with the Marquee control. Instead, set the BGCOLOR in the body of the HTML
file being displayed by the control.
Why is my marquee being formatted incorrectly?
You cannot use any other tags, such as <FONT> or anchor (<A>), inside <MARQUEE> tags. They can be
used outside, applying to the entire marquee, as follows:
<A HREF="nextpage.htm">< <FONT SIZE=+2><MARQUEE>Message
Here</MARQUEE></FONT></A>
Authoring for Multiple Browsers

How can I detect which browser is being used?
Whenever possible you should be testing for the capabilities of the browser (for example, VBScript
support), rather than identifying the browser. This will automatically handle upgraded versions of browsers.
If that's not practical, you must use scripting code such as the following:

<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
A wide variety of scripts for detecting particular browsers, versions, and capabilities can be found by
searching the archives of the IE-HTML mailing list .
How can I embed a sound for both Internet Explorer and Netscape Navigator?
You can now use the <EMBED> tag for both browsers, as follows:
<EMBED SRC="sound.au" height=2 width=2 autostart=true hidden=true>
If you're going to use the sound as part of a complex page, place the tag towards the bottom of your code
(but still within </BODY>). Wave files can take a little time to load and tend to hold up the display of your
page while they do so. (This may cause users to click the Stop button in frustration before they see what
you have to offer.)
Some site developers prefer to use browser-detection scripts that create different tags using features unique
to each browser, for example:
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
If you have problems with MIDI files, be sure your server has the proper MIME types for MIDI files:
MIME Type Description Suffix/file extension
Audio/x-midi MIDI .mid
Audio/midi MIDI .mid
Display Problems
How can I prevent the colors in my page from being dithered?
You should use only the 216 colors in the standard palette supported by both Internet Explorer and
Netscape Navigator to ensure that your page will look good on systems running in 256-color mode. These
colors include any combination of red, green, and blue components of 0, 51, 102, 153, 204, and 255 (hex
00, 33, 66, 99, CC, and FF). The following graphic shows all 216 colors:

How can I resize a control when the window is resized?
Place the control in a frame of the desired size, with WIDTH="100%" and HEIGHT="100%".
Why does a dot appear after an image?
A dot appears after an image if there is white space after the <IMAGE> tags in an anchor. This can come
from a space like this:
<A HREF="some.htm"><IMG SOURCE="some.gif"> </A>
It will also happen if the anchor is split across two lines, like this:
<A HREF="some.long.URL.htm" TARGET="_top"><IMG SRC="some.gif">
</A>
How can I get rid of the gray box that appears while loading the Layout control?
Simply place a WIDTH=0 inside the HTML Layout Control Object tag:
<OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF"
ID="c" width=0 STYLE="LEFT:0;TOP:0">
</OBJECT>
Note: The HTML Layout Control technology, originally released with Internet Explorer
3.0, is now natively supported by Internet Explorer 4.0. Please see the HTML Layout
Control home page for further information.
What screen resolution should I design for?
Surveys indicate that the great majority of users operate in 640x480 resolution with 256 colors. However,
you should always try to find out the requirements of your target audience and base your design on that
data. For example, if you are trying to sell high-end technology to power users, you can count on different
requirements.
You should always view your site in the widest possible range of screen resolutions and color depths. If
there is a problem under some configurations, you will need to fix it before your users discover it. If you
are running Windows 95, be sure to install the QuickRes PowerToy so you can change resolutions and
color depths easily. The PowerToys are currently at
http://www.microsoft.com/windows95/downloads/contents/wutoys/w95pwrtoysset/default.asp?site=95 .
How can I determine the user's screen resolution?
There aren't any general automated solutions to this. Different versions of Internet Explorer may provide
the screen resolution or the window size in different ways. Other browsers do not provide either
measurement. Many users with systems operating in high resolutions prefer to keep the browser covering
just a portion of the screen. Thus the window size can be any value, not just one of the standard screen
sizes. In practice it is rarely if ever practical to provide HTML pages based on the window size because of
the range of possibilities. If you cannot design the page to gracefully adjust to different sizes, you should
either design for a single size (normally 640x480) or provide links that allow the user to choose. These
links could easily use script to open a new window of the appropriate size containing the corresponding
page.

Links
How do I redirect a user to a new URL?
The following example displays a line of text for three seconds before automatically jumping to a new
URL. Note that the quotes around the CONTENTS value must surround both the time delay and the target
URL. The delay can be zero, but remember that the page will still be visible until the new page is
downloaded.
<HTML>
<HEAD>
<TITLE>Old page</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF TEXT=#000040>
<META HTTP-EQUIV="REFRESH" CONTENT="3; URL=newpage.htm">
<FONT FACE="ARIAL" SIZE=3>
<i>We've moved! I'll take you to our new page now...</i>
<BR>
</FONT>
</BODY>
</HTML>
Why don't my links to a section within a page work?
The NAME value is case sensitive. You must use the same form when it's defined and when it's referenced.
These will work:
<A NAME="Section3">
<A HREF="#Section3">
<A HREF="page2#Section3">
These won't work:
<A NAME="Section3">
<A HREF="#section3">
<A HREF="page2#section3">
How can I describe a link in the status bar when the mouse points to an image?
Include a simple JScript in the anchor, like this:
<a href="main.html" target="main" onMouseOver="window.status='Back to the first
page'; return true"><img src="home.gif" alt="home" border=0
hspace=0 vspace=0 ></a><br>
Other Topics
How can I keep my page from being cached?
To keep your page from being cached (for example, if your content is dynamic and determined by a server
application), use the <META> tag as follows:
<META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">
Note that the expiration date should be already past. <META> tags are used in the <HEAD> section of the
HTML page. Refer to http://www.w3.org/pub/WWW/Protocols/HTTP/1.1/spec.html for further
details. Internet Explorer does not support HTTP-EQUIV Pragma no-cache.
How can I display small animations in my page?
There are currently two ways to display animations: using AVI files and animated GIFs.
• AVIs are movies that can include sound and more than 256 colors. AVI files can be compressed
using a number of techniques. AVIs are currently only supported by Internet Explorer.

• Animated GIFs contain multiple images in 256-color GIF format with a specified interval to pause
between images. They cannot contain sound. Animated GIFs are supported by many browsers. For
more information, see
http://dir.yahoo.com/Arts/Visual_Arts/Animation/Computer_Animation/Animated_GIFs/Collectio
ns/ .
How can I display a watermark?
Use the following code:
<BODY BACKGROUND="myimage.gif" BGPROPERTIES=FIXED>
How can I embed a document or spreadsheet in the middle of my page?
Use a floating frame, for example:
<IFRAME WIDTH="75%" HEIGHT="55%" NAME="fframe" SRC="hlsimple.doc">
<FRAME WIDTH="75%" HEIGHT="55%" NAME="fframe" SRC="hlsimple.doc">
<EMBED SRC="hlsimple.doc" width=200 height=100>
</IFRAME>
To view the embedded document or spreadsheet, the users must have the appropriate application installed.
To open Hlsimple.doc in the example above, they will need Microsoft Word or Word Viewer, so it may be
appropriate to provide a link to http://www.microsoft.com to download a viewer. Viewers are available for
Microsoft Word, Microsoft Excel, and Microsoft PowerPoint®. You can also convert the document,
spreadsheet, or presentation to HTML using appropriate Internet Assistant add-ons. The resulting HTML
files may require further enhancements (for example, you may need to use style sheets to retain the original
appearance). These HTML files can also be displayed in floating frames as shown above.
Why is a parameter in one of my tags being ignored?
A parameter value that contains non-numeric characters must always be enclosed in quotes. Thus, if you
specify size in percentages, you must use quotes (for example, WIDTH="50%"). This rule also applies to
any other parameters with non-numeric values, such as HREF. Some browsers will accept some of these
values without quotes, but don't count on this always working properly.
How can I start my favorite HTML editor within Internet Explorer?
Although you can't change the program started by the View Source menu item, you can add a customized
Edit command button like this:
1. Open Internet Explorer.
2. From the View menu, select Options.
3. Click the Programs tab.
4. Click the File Types button.
5. Select "Internet Document (HTML)" in the list box.
6. Click Edit.
7. If an action named Edit is listed, select it and click the Edit button, then proceed to step 10 below.
8. Click New.
9. Type Edit in the Action field.
10. Enter the command line needed to execute your desired editor in the Application used to
perform action field. You need the full path to the executable file, so it's easiest to use Browse to
locate it. Most editors require "%1" (including the quotes) after the file name.
11. Click OK or Close as needed to close all open dialog boxes.

12. Exit and restart Internet Explorer.
How can I display a message while an ActiveX control is downloading?
You can display a message in the space allocated to an object using the STANDBY parameter in the
<OBJECT> tag, such as this example:
<OBJECT ID="Menu" WIDTH=200 HEIGHT=400
standby="Downloading the menu control… Please Wait"
CLASSID="…">
Frequently Asked Questions about the

Dynamic HTML Editing Component
What is the Dynamic HTML Editing Component?
The Microsoft Dynamic HTML (DHTML ) Editing Component allows Web authors and application
developers to add WYSIWYG DHTML editing capabilities to their Web sites and applications. The editing
component uses Microsoft's Component Object Model (COM) technology to provide access to editing
services such as basic HTML formatting, tables, undo/redo, find, and absolute positioning.
The DHTML Editing Component uses Internet Explorer to render HTML, so the editing environment is
always in sync with the browsing environment. Web authors and developers can use any language,
including Visual Basic, VBScript, JScript, C, C++, and Java to access editing services and provide a user
interface for editing features. The DHTML Editing Component allows you to offer the following features:
• Basic formatting, including bold and italics for selected text or an entire paragraph, adding images,
and changing the background color of any element
• The ability to insert and edit (add, delete, or change cells) tables on the fly
• Undo and redo editing commands
• Ability to drag and drop any object, text, or element anywhere on the page
• Support for an invisible grid to help positioning items on a page

Web authors and developers can also access the Document Object Model (DOM) to add sophisticated,
custom editing features to their applications. In addition, you can edit pages created with Active Server
Pages technology seamlessly, without changing the original server script. If you begin with existing
HTML, the DHTML Editing Component will preserve your original formatting (the original white space
and tags will remain).
Two types of components are available: the DHTML Editing DocObject and the DHTML Editing ActiveX
control. The ActiveX control provides many high-level features and can be used from development
environments such as Visual Basic, Visual J++ and Visual C++.
Who would benefit from using this component?
In addition to HTML authoring, Help, and e-mail applications, any Win32® application that edits or
outputs HTML could use the editing component for rich formatting or easy layout. In addition, corporate
developers can include this control in their Visual Basic applications to build HTML-based forms for their
application front-ends.
Where can software vendors obtain the component?
The DHTML Editing Component is a system component in Microsoft Internet Explorer 5. If you have
Internet Explorer 5 installed, you can develop applications, and you can deploy them to users who also
have Internet Explorer 5.
If you will be deploying applications to users who are still using Internet Explorer 4, you can use an earlier
version of the DHTML Editing Component, which is available as a downloadable SDK from here.

Where can I learn more about the DHTML Editing Component?
See the Features page for a full list of features. For a developer's perspective on the DHTML Editing
Component, read DHTML Editing Made Easy by Nancy Cluts, also on this site.
You can also work with sample applications that illustrate the DHTML Editing Component. To get the
samples, visit the MSDN Online Web Workshop Samples site. Display the table of contents (TOC), open
the node for Reusing Browser Technology, and then select the sample called DHTML Editing Control. The
Gallery contains a live sample that you can run directly as a Web application. It also offers a downloadable
file that contains additional samples that illustrate how to use the DHTML Editing Component in Visual
Basic and C-based applications.
Where can I learn more about Dynamic HTML?
The key things you need to learn to become fluent in Dynamic HTML are the Dynamic HTML Object
Model (DOM) and Cascading Style Sheets (CSS). See the DHTML, HTML & CSS area of the MSDN
Online Web Workshop for overviews and detailed information about DHTML, CSS, and the DOM. For
detailed specs on DHTML DOM and CSS, visit the World Wide Web Consortium Web site ).
How do I use the DHTML Editing control?
The following HTML fragment shows how to insert the DHTML Editing control into a Web page:
<OBJECT
CLASSID="clsid:2D360200-FFF5-11D1-8D03-00A0C959BC0A"
ID=DHTMLEdit
HEIGHT=400
WIDTH=500>
</OBJECT>
Note the use of the ID attribute, which allows the control to be accessed by name. If you are using the
control in a Visual Basic application, you can add the control as a component (named "DHTML Edit
Control for IE5") to your project and it will be available in the component toolbox. For examples of how to
use the control, see the Visual Basic sample VBEdit and the Web sample HelloWld, both available for
download from the MSDN Online Web Workshop Samples site.
If you are hosting the control in a Microsoft Foundation Classes (MFC) application, insert the control into
the project. A wrapper class for the control will be placed in your project and will be available in the
resource editor. Either place the control on a dialog resource or create the control dynamically.
How do I load HTML into the component from memory?
The DHTML Editing control's DocumentHTML property provides access to the contents of the currently
loaded document. You can assign a BSTR containing HTML to the DocumentHTML property to load
HTML from memory.
If you are using the DocObject, you must create a Stream from an HGLOBAL and use the
IPersistStreamInit::Load method. Please see the documentation for more information on using
IPersistStreamInit. See the HelloWld Web sample, available for download from the MSDN Online Web
Workshop Samples site, for an example of how to load HTML using the control's DocumentHTML
property.
How do I access the Internet Explorer Document Object Model from the DHTML
Editing Component?
The DHTMLEditing control provides access to the underlying Internet Explorer Document Object Model
through the DHTML DOM property. This property returns the Document object of the currently loaded
Web page. The following JavaScript function demonstrates how to do this:
function ShowAll()
{
dom = DHTMLEdit.DOM;
len = dom.all.length;
str = "";
for ( i=0; i<len; i++ )

str += dom.all[i].tagName + "\n";
alert( str );
}
You can access the DOM from the DocObject by calling QueryInterface on the DocObject's IUnknown
interface specifying IID_IHTMLDocument2:
IHTMLDocument2* pDom = NULL;
lpUnk->QueryInterface(IID_IHTMLDocument2, (void **) &pDom);
How do I insert new elements into a document?
Many commands are available that allow you to insert new HTML elements and apply formatting to
existing HTML. They are invoked by calling the ExecCommand method with the appropriate command
ID. Please refer to the documentation for the comprehensive set of available commands. The following
HTML demonstrates how to insert a table with default values:
<SCRIPT LANGUAGE=JavaScript SRC="DHTMLEd.js">


</SCRIPT>
<SCRIPT LANGUAGE=JavaScript>
function insertTable()
{
DHTMLEdit.ExecCommand(DECMD_INSERTTABLE,
OLECMDEXECOPT_DONTPROMPTUSER,
tableInfo);
}
</SCRIPT>
<OBJECT ID=tableInfo
CLASSID="clsid:47B0DFC7-B7A3-11D1-ADC5-006008A5848C">
<--
create the tableInfo object
give it an ID so you can reference
it in the insertTable function
&--gt;
</OBJECT>
You can also insert new HTML elements by accessing the Internet Explorer Document Object Model. The
exact method will depend on how you want to insert the HTML. If you need to insert HTML elements
relative to an existing element, the insertAdjacentHTML method is available on all elements. If you are
replacing the user selection, you can create a TextRange object and call the pasteHTML method. This
method can also be used to insert HTML at the current insertion point (caret). If you are modifying the
HTML of an existing element, you can set the innerHTML or outerHTML properties, which are available
on all elements. Note that the innerHTML property is only supported on block elements.
How do I insert script into the document?
To insert a script element into a document, use the following technique:
Dim scriptElement As String
' The script in the element inserted below will be executed

' when the DHTMLEdit control's DocumentComplete event fires.
' It will display a modal dialog box displaying the string

' "Document Loaded!"
scriptElement = "<body> <script for=editor

event=""DocumentComplete()"">
alert(""Document Loaded!"");" </script>"
' Now inject the script into the document

DHTMLEdit1.DOM.body.insertAdjacentHTML "AfterBegin", scriptElement
If the DHTML Editing control's SaveDocument method is called after executing this code, you'll see that
the <SCRIPT> element is the first element after the initial <BODY> tag.
How do I use ExecCommand and QueryStatus?
The ExecCommand method takes a numeric command ID and optional arguments, and typically operates
on the current selection. QueryStatus is used to determine if a given command is valid for the current
selection. ExecCommand and QueryStatus simplify the code necessary to update the user interface in
your application. Use QueryStatus to enable and disable toolbars and menus; use ExecCommand to
execute a command from a toolbar or menu.
How do I update my application's menus and toolbars based on the current
selection?
The DHTML Editing control fires the DisplayChanged event whenever the editing context has changed
(for example, when the user has selected an element or even just moved the cursor). Use this event to
update your menus and toolbars by calling the QueryStatus method. To see an example of how to use the
DisplayChanged event, see the VBEdit sample, available for download from the MSDN Online Web
Workshop Samples site.
How do I implement my own commands?
The Document Object Model (DOM) is the primary Application Programming Interface (API) for
modifying a document. If no command ID is available for an operation you want to provide in your
application, implement the functionality by using the DOM. You can use the DOM to insert and remove
HTML elements and modify existing elements using element properties or the CSS Object Model.
How do I obtain the currently selected text?
The current selection is accessed through the DOM's Selection object. The Selection object has a type
property that returns a value of "None," "Text," or "Control." If the type is "Text," you can call the
Selection object's createRange method to obtain a TextRange object corresponding to the selection. The
text can then be accessed through the TextRange object's text and htmlText properties. The following
JavaScript function demonstrates this:
function ShowSelection()
{
sel = DHTMLEdit.DOM.selection;
if ( "Text" == sel.type )
{
range = sel.createRange();
alert( range.htmlText );
}
else
alert( "No text selected" );
}
How do I find the selected element or the element under the insertion point?
The following is a an example of how to use the DOM Selection and TextRange objects to retrieve the
selected element or the element directly under the insertion point:
' Assuming you have the DHTMLEdit control on

' a Visual Basic form and the control's name is DHTMLEdit1 ...
' Note that you should check the type of the selection.
' The Selection object's property "type" can return three values:
' "None" - nothing is selected (just blinking cursor)

' "Text" - text or mixed text is selected
' "Control" - a form control or image is selected
Private Sub GetElementUnderInsertionPoint()

Dim rg As IHTMLTxtRange
Dim ctlRg As IHTMLControlRange
' branch on the type of selection and

' get the element under the caret or the site selected object
' print its outerHTML
Select Case DHTMLEdit1.DOM.selection.Type
Case "None", "Text"
Set rg = DHTMLEdit1.DOM.selection.createRange
' Collapse the range so that the scope of the

' range of the selection is the caret. That way the
' parentElement method will return the element directly
' under the caret. If you don't want to change the state of the
' selection, then duplicate the range and collapse it
rg.collapse
MsgBox rg.parentElement.outerHTML
Case "Control"
' an element is site selected
Set ctlRg = DHTMLEdit1.DOM.selection.createRange
' There can only be one site selected element at a time so the
' commonParentElement will return the site selected element
MsgBox ctlRg.commonParentElement.outerHTML
End Select
End Sub
How do I programatically set the position of the insertion point?
You can set the location of the insertion point programmatically by using the TextRange object. The
following code demonstrates how to set the insertion point at the end of the document:
Dim range As IHTMLTxtRange

Set range = DHTMLEdit1.DOM.body.createTextRange()
range.collapse False
range.Select
How do I trap an event such as ondoubleclick?
The DHTML Editing control provides events for the mouse and keyboard. You can also sink events for
specific elements in a document.
How do I sink document object model events in Visual Basic?
You can sink DOM events in Visual Basic using the WithEvents statement. You must include a reference
in your Visual Basic project to MSHTML.TLB.
How can I make a portion of a document read-only (non-editable)?
Sink the document's onkeydown event. In the onkeydown event handler, examine the element under the
insertion point and if you want this element to be read-only, set the event object's returnValue property to
False. This will cancel the onkeydown event, and the onkeypress and onkeyup events will not fire.
Dim WithEvents docEvents As DHTMLDocument
Private Sub DHTMLEdit1_DocumentComplete()

' Sink the document's events
Set docEvents = DHTMLEdit1.DOM
End Sub
Private Sub docEvents_onkeydown()

' Make the entire document read-only
' This disables all keyboard input into the current document
' including the delete and arrow keys
DHTMLEdit1.DOM.parentWindow.event.returnValue = False
End Sub
Why does my onclick event handler never get called?
The onclick event does not fire in edit mode for the document object exposed through the control's DOM
property, or any other HTML element within the document. However, the DHTML Editing control
provides an onclick event handler that fires when the document or other elements are clicked. Developers
can handle the onclick event and find the element under the insertion point in their event handler.
Why won't my VBScript events fire when I script them with Visual InterDev?
When you add the DHTML Editing control onto a page in Visual InterDev, code is generated that
resembles the following (the OBJECT tag parameters have been excluded for clarity):
<HTML>
<HEAD>
<META name=VI60_defaultClientScript content=VBScript>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript>

</SCRIPT>

</HEAD>
<BODY>
<P>
<OBJECT classid=clsid:2D360201-FFF5-11D1-8D03-00A0C959BC0A
id=DHTMLSafe1></OBJECT>
</P>
</BODY>
</HTML>
To make this code work, you must insert parameters for any events which take them. The following
example shows the parameters added to the ShowContextMenu event handler.
<HTML>
<HEAD>
<META name=VI60_defaultClientScript content=VBScript>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript>

</SCRIPT>
</HEAD>
<BODY>


The parameters are part of the event signature in VBScript and are not optional. (In JScript they are
optional.)
How do I display a shortcut menu?
When the user right-clicks within the DHTMLEditing control's window, the ShowContextMenu event is
fired. You can handle this event and provide a shortcut menu by calling the control's SetContextMenu
method. If the user selects a menu item, the ContextMenuAction is fired, indicating which item was
chosen. The following JavaScript event handlers demonstrate this:
<SCRIPT LANGUAGE=JavaScript SRC="DHTMLEd.js">
</SCRIPT>
<SCRIPT LANGUAGE=JavaScript FOR=DHTMLEdit EVENT=ShowContextMenu(x,y)>

menuStrings = new Array();
menuStates = new Array();
menuStrings[0] = "Grayed item";

menuStrings[1] = "Checked item";
menuStrings[2] = "Unchecked item";
menuStates[0] = OLE_TRISTATE_GRAY;
menuStates[1] = OLE_TRISTATE_CHECKED;
menuStates[2] = OLE_TRISTATE_UNCHECKED;

DHTMLEdit.SetContextMenu( menuStrings, menuStates );
</SCRIPT>
<SCRIPT LANGUAGE=JavaScript FOR=DHTMLEdit

EVENT=ContextMenuAction(itemIndex)>
alert( "You selected item " + itemIndex );
</SCRIPT>
How can I remove the underline from a hyperlink?
The appearance of hyperlinks and other elements can be controlled through CSS attributes. The following
is an example of a style sheet that removes the underline for all hyperlinks in a document:
<STYLE>
A{
text-decoration: none;
}
</STYLE>
You can override a style sheet by using inline styles on specific elements. For example, to remove the
underline from a specific hyperlink, you could set the style attribute of the Anchor as follows:
<A href="http://www.microsoft.com"
style="text-decoration: none">Look, no underline!</A>
Does the DHTMLEditing Component support drag-and-drop from an external
source?
The DHTML Editing DocObject and control register themselves as drop targets for the Clipboard format
CF_HTML. When a drag operation is in progress involving this Clipboard format and the mouse is
released on the DHTML Editing Component's window, the component will inject the HTML from the drop
source's IDataObject into the current document at the point where the mouse is released. If the control's
AbsoluteDropMode property is set and the HTML is capable of being absolutely positioned (such as with
a table or button element), the HTML will be absolutely positioned. This is useful if you have implemented
a toolbox or control palette and you are dragging controls onto the DHTML Editing control
How can I receive drop notifications?
To participate in a drag/drop operation and receive drop notifications, you must host the DocObject and
implement the IDocHostUIHandler::GetDropTarget method. See the Microsoft SiteBuilder Network
Workshop for more information on the IDocHostUIHandler interface.
How do I print programmatically?
You can print the current document in the DHTML Editing Control using the control's PrintDocument
method. If you are hosting the DocObject, you can print a document using ExecCommand and the
command IDM_TRIED_PRINT.
What are the DESIGNTIMESP attributes that I see in an element's outerHTML?
The DHTML Editing Component uses a number of attributes internally to maintain document state during
an editing session. These attributes are filtered out upon saving a document. However, if the outerHTML
property of an element is accessed during an editing session, these attributes may be present. The DHTML
Editing control provides the FilterSourceCode method for filtering these attributes from an arbitrary string
of HTML. If you are using the DHTML Editing Component DocObject, you can use the FilterOut method
with the dwFilterSourceCode flag.
How do I deploy the DHTML Editing Component with my application?
The DHTML Editing Component documentation provides information on how to deploy an application that
is based around the DHTML Editing Component.

Frequently Asked Questions: Useful Page

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Frequently Asked Questions: Useful Page

Uploaded by

Copyright:

Available Formats

HTML

Frequently Asked Questions

No license: PDF produced by PStill (c) F. Siegert - http://www.this.net/~frank/pstill.html

How do I upload files to my site?

No license: PDF produced by PStill (c) F. Siegert - http://www.this.net/~frank/pstill.html

Advanced HTML FAQ

• Can I calculate the load time of my HTML file?

No license: PDF produced by PStill (c) F. Siegert - http://www.this.net/~frank/pstill.html

• What is a KEYGEN tag ?

• Is their a tag to declare page break?

• Can I open mailbox or news by clicking on the link?

Can I calculate the load time of my HTML file?

No license: PDF produced by PStill (c) F. Siegert - http://www.this.net/~frank/pstill.html

• Is there a way to submit a form and ignore the response?

• Can I send form data to an email address by clicking on Submit button?

• Is it possible to send the form data to the plug-in?

• Can I change font for the Input text element?

• How can I upload a file to server?

• Can I change the target depending on the form data?

• How to change the name-value pair of the form elements?

No license: PDF produced by PStill (c) F. Siegert - http://www.this.net/~frank/pstill.html

Then in the Form.html,

<FORM METHOD="POST" ACTION="xxxxx" TARGET="DummyFrame">

No license: PDF produced by PStill (c) F. Siegert - http://www.this.net/~frank/pstill.html

• How to load two independent frames from one link?

• Why parent property does not refer to the parent window?

• Why window.opener.frame[i] is not referring to a frame within an opener window?

No license: PDF produced by PStill (c) F. Siegert - http://www.this.net/~frank/pstill.html

No license: PDF produced by PStill (c) F. Siegert - http://www.this.net/~frank/pstill.html

• How can I link to two URLs by clicking on a Imagemap?

• How to grab the coordinates of a spot clicked on an image map?

from = new Date(yy1,mm1,dd1)

if((until.getTime()> today.getTime()) &&(from.getTime()< today.getTime()))

<IMG SRC="file:///c:/Img1.gif" WIDTH='200' Height='100' border='0' USEMAP='#FileMap'>

Where OpenLocs function opens two links:

No license: PDF produced by PStill (c) F. Siegert - http://www.this.net/~frank/pstill.html

• Why the layer having applet always appears at the top?

• Can I have layer behind the body elements?

• I am not able to create layers dynamically, why?

The other HTML FAQ

No license: PDF produced by PStill (c) F. Siegert - http://www.this.net/~frank/pstill.html

4. How do I include one file in another?

10. How do I get my visitor's e-mail addresses?

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

22. How do I get a counter?

28. How do I get a button which takes me to a new page?

No license: PDF produced by PStill (c) F. Siegert - http://www.this.net/~frank/pstill.html

How do I indent a lot of text?

Can I put markup in ALT text?

No license: PDF produced by PStill (c) F. Siegert - http://www.this.net/~frank/pstill.html

How do I include one file in another?

How do I get scrolling text in the status bar?

How do I hide my source?

How can I make a custom rule, or a list with custom

How do I display the current date or time in my

No license: PDF produced by PStill (c) F. Siegert - http://www.this.net/~frank/pstill.html

For what screen size should I write?

How do I get my visitor's e-mail addresses?

How do I make a table which looks good on AOL and

No license: PDF produced by PStill (c) F. Siegert - http://www.this.net/~frank/pstill.html

How do I center a table?

How do I make animated GIFs?

Is there a way to get indexed better by the search