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:
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 be able to save the page as it looks at the time, but the saved page won't change or react any more.
The source code is a plain text file that contains the text on the page and the addresses of the images and other files that the page uses. Various HTML tags tell the browser which parts are headings, paragraphs, tables, etc.
Every picture on the page is a separate graphic, even things like arrows , bullets , icons and text with fancy fonts and effects, like.
Depending on your browser version,
you may have to save each graphic
The source code contains URLs for graphics like ../images/mydivider.gif, attached files like style sheets and scripts, and linked pages like ../basics/index.html . If you don't put these style sheets and scripts 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.
Broken links: On a page you save yourself, links 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.
Framed pages: An earlier version of these lessons included discussion of framed pages. I have dropped this material because few sites use frames anymore. They were deprecated (declared obsolete and dropped) in HTML5 when that standard was finalized in 2014.
You have several choices in the Save as type box.
Step-by-Step: Save Web Page
What you will learn:
to save a page as Web Page, complete
Double click on the file home-complete-Lastname-Firstname.html
The page My Home Page opens in
your default browser. It looks nearly the same as the original. Only the background image is missing. Any images that are added using CSS (Cascading Style Sheets) will not be saved.
The illustrations show a flash drive named drive J. Yours, of course, may use a different letter. Or you may be saving your files to a hard drive or network folder.
Note: Chrome automatically changes the space in web project1 to %20, which is the code for a space in a URL. That allows web servers that do not allow spaces in file names to find the file.
Click on the Save button.
Hmm. There are some parts missing here! The images aren't here. That's what happens when you save only the HTML. Each browser shows the missing image locations in a different way.
IE: Shows a small icon and the ALT text, if there is room in the space that the image should take up.
Chrome: Shows a broken image icon and the ALT text inside a rectangle that is the size of the image.
Firefox: Shows the ALT text where the image should be, but does not show an icon or an outline.
Click the Back button to return to the original My Home Page.
Below the outline for the house image in the 'HTML only' copy of My Home Page, Chrome shows 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. The whole page is one giant table. The transparent image keeps the 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.
IE offers an additional file format, Web Archive, single file. Instead of putting the images into a separate folder, IE can put the images AND the HTML source code into a single file. This makes it very easy to move the page to a different drive.
In Internet Explorer, return to the original My Home Page, which has all of the images and background.
Sometimes you don't need the whole page, just an image on the page.
Save to the web project1 folder with the name and file type that the dialog suggests, computer.gif.
The image file
joins the copies of the whole page that you made earlier.
(If you are using IE, you have an additional item.)
A web page can have an image in the background, underneath the text and other images. This might be a solid block of color or a single large image or a small image that is tiled across the page over and over. The page My Home Page has a background formed from a long, narrow image that is blue on the left end and white to the right. A cropped version shows below. The original is 2000 pixels wide so that it won't repeat horizontally inside the window.
In previous browser versions, you could right click on an area with no text or other images and the context menu had a choice to save the background image. Chrome does not do this. Microsoft Edge does not either. IE shows the commands but they are unavailable (IE11 on Win8. and Win10). Firefox lets you View Background Image which shows the image in a browser window by itself. You can save from there.
I have not found an explanation for IE's unavailable commands.