Browser Basics:
Save It Yourself

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9+, Chrome, Firefox; Notepad? Icon: Change web

To save a complete web page yourself, with all its graphics and other needed files, can be tricky. You need three things to see the page the same way it appears from the Internet:

  1. The source code for the page itself.
     
  2. All of the graphics and any other files needed to run the page.
     
  3. The correct folder structure to put the related files in.

It's much easier in IE5+ than in IE4, as you will see. 

Some web pages are different each time you visit. Stock market charts, weather maps, and news reports are examples of such pages. Other pages are interactive, containing a form, game, or activity that is controlled by a program on the server instead of by the source code for the page. You may can save the page as it looks at the time, but the saved page won't change or react any more.


Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser Basics     ConnectingTo subtopics
    IE InterfaceTo subtopics
    NavigatingTo subtopics
    PrintingTo subtopics
    Saving Arrow - Subtopic open
    icon-footprintSubscribe
    icon-footprintSave yourself
    icon-footprintSave framed
    SearchingTo subtopics
    Summary
    Quiz
    ExercisesTo subtopics

Project 2: HTML BasicsTo subtopics

Search 
Glossary  
Appendix

Source code:

Example of source code The source code is a  plain text file that contains all of the text on the page and the addresses of the graphics and other files that the page uses.

Graphics:

Every picture on the page is a separate graphic, even things like arrows To subtopics Arrow - Current topic, bullets * *,  icons  Tip Printer  and text in fancy fonts Fancy text . Depending on your browser version, you may have to save each graphic separately!

Paths to graphics & files:

The source code contains URLs for graphics like "../images/mydivider.gif", attached files like stylesheets and scripts, and linked pages like http://www.cnn.com. If you don't put these items in the same relative location, the browser won't be able to find them. This can get tricky!

You can try saving all the files and graphics to a single folder and see if the page displays correctly.

If it does not, you have two choices. You can read the paths from the source code and create folders to match or you can change the paths in the source code. You'll want to use the method that is the least amount of work for you.

Warning Links from a page you saved yourself to other pages may not work, depending on how the links were coded. If the link has the full URL, like http://www.jegsworks.com/index.html, it will still work if you are connected to the Internet. If the link is a relative link like "basics/index.html", it won't work from your hard drive unless you saved that page, too, and put it in the right folder.

Icon Step-by-Step 

Step-by-Step: Save It Yourself

  Icon Step-by-Step

What you will learn:

to save a page
to save an image
to save a background image
to change the path to an image for a saved page
what a transparent image is used for

in IE5:
the differences in the four file types to save in

Start with: Connected IE openClass disk

Save Source Code

  1. On your Class disk create a new folder named web in the folder my docs.
     
  2. Class diskWith Internet Explorer showing the page My Home Page from the resource files and your Class floppy disk in drive A, select from IE's menu  File  |  Save As... . The Save As dialog appears for you to save the browser's current page.
     
  3. File name: Type   a:\my docs\web\home.htm  in the File name text box. (This is not the original name of the file.)
     
  4. File type:
    IE4 If you are using IE4, select HTML as the file type.

    IE5Icon: IE6 If you are using IE5/6, select for Save as type:  Web page, HTML only (*.htm, *html)  This saves only the HTML code and no other files.
     
  5. Click on the Save button. Congratulations. You just saved your first web page!
     
  6. My Home Page - no images savedView your saved page by typing the path  a:\my docs\web\home.htm  in the Address bar and then press ENTER.
     
    Hmm. There are some parts missing here! You have more saving to do!
     

  7. Click the Back button to return to the original My Home Page.

 Save an Image

  1. Dialog - Save PictureRight click on the image of the computer on the page My Home Page and choose  Save Picture As...  The Save Picture dialog appears.
     
  2. Class disk Save to the my docs\web folder with the name and file type that IE suggests, computer.gif.

    Warning If you use a different name, the image will not display unless you change the source code to match!
     

  3. Click on the Forward button to return to the copy on your Class disk. (Or in the Address Bar type the path to your saved file:
     a:\my docs\web\home.htm  and press ENTER.)

    The saved web page will open in the browser, but only the computer image is displayed. The background and the house and other images do not show. You have not saved them yet.
     
  4. Scroll the page to see how IE handles the other missing images.
     
  5. Use the Back button to return to My Home Page.

 Save the Background Image

  1. My Home Page with background imageClass diskRight click on a blank area of the page and choose  Save Background As...  to save the background image. Wasn't as blank as you thought!
     
  2. Accept the name that IE suggests blueborder.jpg and save to the web folder.
     
  3. Click the Forward button to return to your saved page home.htm. The display should automatically refresh itself to show the background with the blue bar down the left. If it does not, press the F5 button on your keyboard or click the Refresh button on the toolbar.

 Save Other Images

  1. Use the Back button to return to My Home Page.
  2. Class diskRight click on the house in the upper left and choose  Save Picture A... 
     
  3. Save to your new folder web on the Class disk as  house.gif .
     
  4. Repeat for all the other images on the page.
     
  5. Use the Forward button to return to home.htm.
     
    Hmmm. The house still does not show but the other images do. The problem will be clear when you look at the source code (once you find the right line to read!) in the next section.

 Change Path to Image

  1. Source code with path highlightedFrom the browser menu select  View  |  Source . The source file opens in Notepad.
     
  2. From the Notepad menu select  Edit  |  Word wrap  so you do not have to scroll horizontally to read the code.
     
  3. Look through the code for paths for images. All images are in the same folder as the source code itself, except for one. They do not need anything for a path but their names. The image house.gif is the exception.

    The part of the code containing the path to house.gif is highlighted in the illustration. The path shows that this image is not in the same folder as the other images. When you saved the image to the web folder, the source code did not point to it any more. You can edit your copy of the source code to fix that. (Do not get palpitations! You are working with a copy of the original. Mistakes here will not cause disasters!!)
     

  4. Edit the path to read simply  src="house.gif"  Now the browser will look for the image in the same folder as the source code, which is where you put it.

    My Home Page with house icon showingWarningThe double quote marks are important. If one is missing, the browser will interpret all the characters that follow as part of the file name until it hits another ". Part or all of the page will vanish from the browser!!

  5. Class diskSave the revised file using  File  |  Save .
     
  6. Close Notepad.
     
  7. In IE click on Refresh to reload the page to show your change. Now the house shows at the left. You are a web page editor!

Transparent gif missing

Using a Transparent Image

Below the house image, there is a narrow rectangle for another missing image. No image showed here on the original page. What is it??

This mysterious image is a transparent image used to manage the spacing on the page. It keeps a table column on the left wide enough so that all the text in the column on the right is off of the blue border. The image is invisible itself. The rectangle is showing here because the image is missing.

This technique is a sneaky way around the tendency for HTML tables to collapse to the smallest size possible.

To save this transparent image, go back to the original My Home Page and right click in the area below the house until the popup menu includes  Save Picture As... . The name suggested should be croppedblue.gif.

IE5""Icon: IE6Save It Yourself in IE5 /6

Dialog- Save Web PageIn IE5 you have more choices in the Save as type box. You aren't stuck with having to use a Favorites shortcut to find the page. You can use other applications to view or edit the page if you save as one of these types.

  • Web Page, complete will save the source code as an HTML file and will put all the graphics, sounds, stylesheets, etc.  in a separate folder. All the paths are changed to match. Cool!
     
  • Web page, archive saves a snapshot of the page in a single file instead of all the little files separately. The file has the extension mht and uses the icon Icon for Web Archive. A good method for single pages! Having a single file makes it easy to move or copy to a floppy disk.
     
  • Web Page, HTML only is the same as the IE type HTML file. Only the source code is saved.
     
  • Text only is the same as IE4's Text file. The text on the page is saved in a txt file.

Start with: Connected IE OpenClass disk

  1. IE5""Icon: IE6From the menu, select  File  |  Save As... .
  2. Class diskSave My Home Page to the web folder on your Class disk with the name  home2.htm and with the type  Web Page, complete .
     
    Progress bar for Web Page, completeA dialog box show the progress of the save operation as the source code and all needed files are saved.
     
  3. Explorer - web folder with home2.htmOpen an Explorer window that shows the contents of the web folder.
     
    Earlier you saved My Home Page as home.htm and saved each image in the same folder. Where are the images for home2.htm? They were saved in a separate folder.

     
  4. Explorer showing folder home2_filesOpen the folder  home2_files . Here are the files that IE5 saved automatically. Neat! [Do not close this window yet.]
     
  5. Save My Home Page again to the web folder, using the name  home3.mht  and the type  Web Archive, single file (*.mht) .

     
  6. Explorer - web with mht archive fileSwitch back to the Explorer window and show the web folder again.
     
    The file home3.mht is much larger than home.htm and home2.htm. It contains all the images also instead of saving them separately. Bigger but easier to move somewhere else.