Browser Basics:

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

Printing Web Documents

Most web pages are not designed with printing in mind.

The printed web page may be surprisingly different from what you saw on the screen. Text may wrap differently on paper than on the screen. Part of a wide page may not be printed at all.

Browser with Jan's Illustrated Computer Literacy 101 Print preview of Jan's Illlustrated Computer Literacy 101
Web page Printed page

Under the default settings the background color or graphic will not be printed. This is usually good. Printing in black and white or grayscale may lose information that was conveyed by colored text.

IE5.5 Internet Explorer has been late in providing a way to preview before printing compared with other browsers. Print preview is not available until version 5.5!

Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser Basics     ConnectingTo subtopics
    IE InterfaceTo subtopics
    NavigatingTo subtopics
    Printing Arrow - Subtopic open
    SavingTo subtopics
    SearchingTo subtopics
    ExercisesTo subtopics

Project 2: HTML BasicsTo subtopics


Alternate version for print?

Some web sites provide a separate file in a word processing or PDF (Portable Document Format) file to download for printing, at least for some pages.

Other sites provide a link to a separate printer friendly web page. Such a page would leave out navigation bars and sidebar information. It's a big difference, as the example below shows.

Example of link to friendly version: Printer Friendly link

Standard CNNFN window Printer Friendly version of page
Normal web page Printer friendly page

Problems with printing Web pages

Page width:

A web page may be wider than your paper, especially if it is designed for a large screen resolution. When printed, text will be wrapped to fit the paper, but a large graphic cannot wrap. Neither can a table that has its width set to a certain number of pixels. The printer will not print what will not fit on the paper!

Solution: Print in Landscape orientation. (May still not be wide enough)

Solution: Save the page or image to your hard disk. Open it in an appropriate application (spreadsheet or word processor for a table, graphics program for an image) and print from there.

Color loss:

Most of us print web pages in black and white or gray scale, rather than the more expensive color inks. You will lose information that was shown by the color of the text or images. Light colors on a dark background when printed in grayscale, will not show up well unless you print the background. But printing a dark background can take a LOT of ink.

Solution: Print in color, if you can.

Graphic quality:

Graphics that look really great on the screen may print poorly, especially color graphics printed in black and white.  Your printer can show more dots per inch than your screen can.

Images may look odd without the background that they were created to go with. Transparent images may print with a background color.

Solution: Print in color. (The images may still look blurry.)

Solution: Print the page background. Tools | Internet Options... | Advanced | Printing: Print background colors and images

Animated graphics:

Your computer can only print one image (called a cel) out of the set of images that make up an animation. It might not be a useful image. It could even be a blank cel! [Spelling: Yes, there are only 3 letters in the word cel.]

Solution: (If you want to print a single cel) Save the animation to your hard drive. (Right click | Save) Open it with an animation program. Print from this program or save the cel you want. Open the saved cel in a graphics program and print.

Dialogs for printing Web pages

You have a choice of ways to mess up your print job! There are three different dialogs that affect how your print job is handled by the printer: Print, Page Setup, and Printer. Orientation and Page Size show up in two different dialogs. 

Are you experienced with printing other kinds of documents? Then you will not be surprised by much here. The Print dialog, however, has some features that you should look at.

Print dialog
Which printer? What parts?  How many?

 File  |  Print...   opens the Print dialog. Below are explanations of the parts of the dialog.


Dialog - PrintAll the installed printers are shown in the drop list. One will be the default printer, used for any document unless you choose a different one. This list can include items that aren't physical printers, like a computer fax.

The Print to file check box lets you save a copy of a document that is ready to print on the selected printer. It does not print at this time, but is saved in a file.

The Properties button opens the printer's own dialog, where you have other choices, as shown below.

Dialog: Print | General (IE6)Icon: IE6IE6 displays icons for all the printers.


Choose how many copies you want. 

For documents with several pages, when you print more than one copy, you can choose whether to print all copies of a page together or to print the whole document through and then go back and print the second copy all the way through. This second way is called collating. It will save you a lot of paper cuts and time since you won't have to put the pages in order yourself.

Print Range
AllPrints the whole web page, using as many sheets of paper as necessary. 
Pages from ? to ?   Allows you to print only some of the pages that the All choice would print. The dialog does not tell you ahead of time how many sheets of paper it takes to print the whole web page and there is no print preview in IE until Internet Explorer 5.5. You need to already know how the web page prints.
Selection Prints only what you have highlighted in the browser. Very useful when you do not need the whole page.
Print framesYou can choose to print a framed page just like you see it on the screen, only the selected frame, or each frame individually. The drawing changes so you can see what your choice will mean.
Print all linked documents Prints also all the pages that are links on the part you are printing. Dangerous! Only use this you know what the links are, such as a sequence of pages on one topic.
Table of links At the end of the printing IE will add a table containing all of the links on the page. This is useful for printing pages of interesting links since the page text does not usually include the link's URL. 

Dialog: Print | Options (IE6)Icon: IE6IE6 has a separate Options tab for the last three items above.

Printer Properties
What quality? What colors? What media?

Dialog- Printer properties File  |  Print...  |  Properties  opens a dialog that adjusts settings for how the printer prints. Each printer company designs its own dialog that offers choices that fit the particular printer. You will generally see the choices like those listed here somewhere in the printer's dialog.

Colors: Black text, grayscale, color photo, or color graphics. Gray scale means all colors will be printed in shades of gray. 

Quality: normal, draft or fast (less ink, less quality), presentation or high (most ink, best quality)

Orientation: portrait or landscape

Media: plain paper, glossy paper, cardstock, transparency, etc. It makes a big difference what you choose here, especially for slick paper or transparencies.

Media Size: The actual size of what you are printing on - letter, legal, normal envelope (No. 10), A4, etc.

Page Setup dialog
What will the page look like?

Dialog - Page Setup  File  |  Page Setup  opens a dialog that controls many features of the page layout. Unfortunately, it is not as user friendly as we would like. There are no nice icons to help you see what you've chosen. In the Headers and Footers section you must use special codes.

Paper Size - Letter is the default choice.

Paper Source - Tray or Automatic Feeder will be the default choice.

Paper Orientation - Portrait (vertical) or Landscape (horizontal)

Margins - Left, Right, Top, and Bottom. Most printers can print with margins of .5" of the top and bottom and of .25" of the left and right. Save paper! Use small margins.

Printer codesHeader and Footer of the pages. You can type into the text boxes whatever you want to print in the header or footer of each sheet of paper.

Unfortunately, you must use codes to automatically include useful information like the URL, page number, and total number of pages.

Tip Where is the list of codes? In the Page Setup dialog, put your cursor in the text box for the header or the footer and press the F1 key on your keyboard. The list of codes shows as a popup tip.

Also, you could click the Dialog Help button button in the dialog title bar and then click on the header or footer text box.

The default settings in Page Setup add text to the top and bottom of the page.

Sample printout with header and footer

Top left: title of the page (the words on the title bar when you view the web page)

Top right: the page number and the total number of pages it takes to print the web page.

Bottom left: URL

Bottom right: date in short format.

WarningIf you click on Button - Print the Print button on the toolbar, you will not have the opportunity to change any of the settings in the dialogs. IE will use the settings from the last time you printed.