Other Media
How do I let people download a file from my page?
Why did my link to a ... file download a bunch of characters instead?
How do I force the browser to show/play a file itself?
How do I force the browser to download a file?
How do I make animated GIFs?
How can I create a thumbnail image that is linked to the full-sized image?
Why am I getting a colored whisker to the left or right of my image?
How can I display random images?
Why are my images coming out all wrong or not loading?
How do I prevent people from saving my images?
Can I put markup in ALT text?
How do I get an audio file to play automatically when someone visits my site?
How can I strip all the HTML from a document to get plain text?

Section 5: Other Media

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5.5. How do I make animated GIFs?

Check out the following resources:

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

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

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

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

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

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

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

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

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

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

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

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

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

5.8. How can I display random images?

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

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

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

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

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

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

Here are some other possibilities:

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

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

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

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

5.11. Can I put markup in ALT text?

No. Character entities (&copy;, &#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.

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

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

<EMBED SRC="your_sound_file" HIDDEN=true AUTOSTART=true>
<NOEMBED><BGSOUND SRC="your_sound_file"></NOEMBED>

For more on the EMBED element, see URL: http://developer.netscape.com/docs/manuals/htmlguid/tags14.htm#1286379. For more on the BGSOUND element, see URL: http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/bgsound.asp. Note that these elements are proprietary and not in any HTML standard. (The HTML standard way of doing this is not well supported.)

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

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

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

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

The CoffeeCup HTML Editor has an HTML Stripper built in.

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