Web Wizards!

How to Copy an HTML File

One of the best ways to learn HTML is to find pages you like, then look at the page source to see how the page was put together. You can use the ideas you find to create your own web pages.

Remember, it's perfectly okay to copy the tags and use other people's HTML ideas, but it isn't okay to steal the content of the page (don't copy other people's stories and pictures and use them without permission). Of course (ahem), you have complete permission to copy and use the pictures, music and text you find here in the Web Wizards pages. Also, while many file types can be copied to your local disk, there are some that are designed to prevent you from making a copy. If you find that you can't save a file, it could be that the software is designed to prevent you from making a copy.

To copy a file:

  1. Click the link to the step you want to copy.
  2. Choose Save As... from the File menu.
  3. Choose the location on your computer where you want to save the file.
  4. Be sure to save the file as HTML, not text.
  5. Click OK to save your own copy!

How to Copy a Graphics File

You can also download your own copy of games.gif. The instructions below are for Netscape Communicator, but Microsoft Internet Explorer works pretty much the same way.

To copy this graphic using Netscape on a Macintosh:

  1. Click on the picture above and hold the mouse button until the pop-up menu appears.
  2. Choose "Save this Image as..."
  3. Choose the location on your own computer where you want to save the file
  4. Click OK.

To copy this graphic using Netscape with Windows:

  1. Right-click the graphic and choose "Save this Image As..." from the pop-up menu.
  2. Choose the location on your own computer where you want to save the file
  3. Click OK.

How to Copy a Background Image

Copying a background image can be tricky, depending on which browser you're using. In Netscape version 6.2 (and possibly earlier versions) there is the command Save the Background Image to Disk, which makes it very easy.

For convenience, I've added links to the background graphics to the example pages for chapters 3 and 4. You can right-click the links and choose Save As... to save the graphic directly to your local disk.

However, that doesn't teach you how to get the background graphics from sources other than this website. Here are some tips for capturing background images.

If you're not using Netscape, you need to know how to go directly to the file by entering its URL. Use the View Page Source (or View Source) command to look at the HTML code for the page. Look at the <BODY> tag to find the BACKGROUND argument (which will be the name of the file you want to copy). Now, change the URL in your navigation bar so that you're pointing your browser directly to the image, rather than to the web page that contains it.

For example, if you want to get the file pickles.gif from Chapter 3, the URL to the sample page is http://www.epcomm.com/webwiz/chapter3/index_b.html. If you replace the name of the HTML file with the name of the graphic, you will have a link that goes directly to the file you want. http://www.epcomm.com/webwiz/chapter3/pickles.gif. Once you've opened the file you can save it directly for disk.

If the graphic is not in the same folder, it may have a relative link. For example, the graphic might appear in an images directory. In that case, the URL might look something like this:

<BODY BACKGROUND="../imgs/picture.gif">

If that's the case, you need to change the URL to include the path starting at the directory above the path where the HTML file is located.

For example, if you're looking at a page at this URL:

http://www.epcomm.com/folder1/folder2/index.htm

And it uses this <BODY> tag:

<BODY BACKGROUND="../imgs/picture.gif">

The URL to the file would be:

http://www.epcomm.com/folder1/imgs/picture.gif

Use the Back button to return to the page you came from.

Back to the Web Wizards Example Page!

This page is carefully scrutinized, categorized and Simonized by none other than Webmaster Dennis! Send me your comments and questions! epistomolus@hotmail.com
Last updated February 23, 2007.