HTML Basics:
Print

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

When you want to print a web page, you will get better results with IE than with FrontPage or FPX. 

Typically, printing from IE will take less paper and photos are often of better quality.  Transparent images will print as transparent.


Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by HandTo subtopics
    WYSIWYG
    FrontPage/FPXTo subtopics
    Images in HTMLTo subtopics
    FormattingTo subtopics
    TablesTo subtopics
    Print
    ConvertTo subtopics
    Summary
    Quiz
    ExercisesTo subtopics

Search 
Glossary  
Appendix

Printing Issues

Images

In FrontPage and FPX the transparent color in a transparent gif image will not be transparent. In IE it will remain transparent.

Photos usually print better from IE. 

Wrapping

The printed version of a web page may not look exactly like what you saw on the screen. Things can wrap quite differently, depending on how the width of the paper compares to the size of the window. 

Dialog: Internet Options - Advanced tab - Print background colors and imagesBackgrounds

The background will not print from FrontPage and FPX, but it may from IE. You can set  Tools  |  Internet Options  |  Advanced  in IE to allow printing of backgrounds and background images.

TipDo not print backgrounds. Printing backgrounds can take a long time and will probably make the page hard to read. Plus, it wastes ink.

Page Breaks

Many web pages will not fit on a single sheet of paper. HTML code cannot control where the page breaks for printing. Sometimes the top of an image will print on one sheet and the bottom on the next sheet!  Advanced stylesheets can set page breaks, but this feature is not widely supported by browsers yet. Someday!

Header/Footer

IE allows you more control for what information prints in the header and footer. The IE Page Setup dialog uses standard codes for date, time, page, URL, window title, etc. In FrontPage and  FPX you have only a few choices.

Icon Step-by-Step

Step-by-Step:Print in FrontPage/FPX vs. IE

  Icon Step-by-Step
What you will learn:

to print from FrontPage or FPX
to print from IE
how IE prints compared to FrontPage/FPX 

 Start with:   Class disk, hector 21.htm (FrontPage or FPX)

Print with FPX

  1. Open the Page Setup dialog. [File menu].
     
  2. Type:
     in the textbox Header:  &T  hector21.htm  

    In the textbox Footer  Page &P  and the current date.

    Translation of the codes: 

    &T will print the page title, which includes your name. 
    &P prints the page number. 

    There don't seem to be any other codes that work in FPX Page Setup. These are not the same codes used by other programs.

  3. Click on Button: Print Preview the Print Preview button to see the Print Preview. Make corrections if any are needed.

    Print Preview - 3 sheets

  4. Print Print by clicking Text Button: Print... the Print button in the Print Preview window.

    Tip The background color and image did not print. But the transparent background of the gifs did print! The grill image is split between two pages. 

Print with IE

  1. Open the same page hector21.htm in IE.
     
  2. Check the Page Setup dialog. 

    Header:  &w&bYour Name &bPage &p of &P 

    Footer:  &u&b&d &t 

    Translation of the codes:

    &w prints the Window title, which includes your name. 
    &b centers and a second &b justifies at the right. 
    &p prints the page number.
    &P prints the total number of pages
    &u is for the page URL. 
    &d is the date. 
    &t is the time.

  3. IE5.5 If you are using IE5.5 or later, check the Print Preview. [File | Print Preview...]

    Print Preview - in IE of hector21.htm  

  4. Print Print by clicking Text button: Print... the Print button in the Print Preview window. This time the transparent backgrounds print correctly.

    TipIE has an option to print with the page background. Tools | Internet Options | Advanced.

Compare Print-outs

  1. Make a list of where your HTML editor prints differently than IE. Which differences are important? Which can be controlled or changed?
     
  2. Compare the IE print-out to the screen version. What are the differences? Which are important?

TipWhen you print web pages, remember that in the Print dialog you can choose to print only some of the pages. You can also select part of page and print the  Selection.