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:
- The source code for the page itself.
- All of the graphics and any other
needed to run the page.
- The correct folder structure to put the related
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:
Lessons > Web
Before you start...
Project 1: Browser Basics
Project 2: HTML Basics
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.
Every picture on the page
is a separate graphic, even things like arrows
, bullets , icons and text in fancy
. Depending on your browser version,
you may have to save each graphic
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
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.
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.
Step-by-Step: Save It Yourself
What you will learn:
to save a page
to save an image
save a background image
to change the path to an image for a saved
what a transparent image is
the differences in the four file types to save
Save Source Code
- On your Class disk create a new folder named web in the folder my docs.
- With 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
| . The Save As dialog
appears for you to save the browser's current page.
name: Type a:\my docs\web\home.htm in the File name text box. (This is not
the original name of the file.)
If you are
using IE4, select HTML as the file type.
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
- Click on the Save button. Congratulations. You
just saved your first web page!
View your saved page by typing the
path a:\my docs\web\home.htm
in the Address bar and then
Hmm. There are some parts missing here! You have
more saving to do!
Click the Back button
to return to the original My Home Page.
Save an Image
Right click on the image of the computer on the page My Home Page and choose The Save
Picture dialog appears.
- Save to the my docs\web folder
with the name and file type that IE suggests, computer.gif.
If you use a different name, the image will not display unless you change the source code to match!
- 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:
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
the page to see how IE handles the other missing images.
- Use the Back button to return to My Home Page.
Save the Background Image
Right click on a blank area of the page and choose to save the background image. Wasn't as blank as you thought!
- Accept the name that IE suggests blueborder.jpg and save to the web
- 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
- Use the Back button to return to My Home Page.
- Right click on the house in the upper left and choose
- Save to your new folder web on the Class disk as house.gif .
- Repeat for all the other images on the
- Use the Forward button to return to home.htm.
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
Change Path to Image
From the browser menu
select | . The source file opens in
- From the Notepad menu
select | so you do not have to
scroll horizontally to read the code.
- 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!!)
- 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.
The 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!!
the revised file using | .
- Close Notepad.
- 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!
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
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
. The name suggested should be
Save It Yourself in IE5
In 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
- 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 . 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.
- From the menu, select | .
Home Page to the web folder on your
Class disk with the name home2.htm and with the type Web Page,
A dialog box show the
progress of the save operation as the source code and all needed files
Open 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
Open the folder home2_files . Here are the files
that IE5 saved automatically. Neat! [Do not close this window yet.]
- Save My Home Page again to the web folder, using the name home3.mht and the type Web Archive, single file (*.mht) .
Switch back to the Explorer window and show the
The file home3.mht is much larger than
home2.htm. It contains all the images also instead of saving them
separately. Bigger but easier to move somewhere