How to Create a Print Button on a Web Page

by Louise Balle

A "Print" button on your Web page enables your visitors to quickly print the contents of the page. When the button is pressed, the browser's print dialog pops up. Then all the user has to do is choose his printer from the list, change the properties if he desires and click "OK" to print the Web page.

1

Open the file that contains the HTML code for your Web page in a plain text or HTML editor.

2

Go to the <body> section of your HTML code. Find the exact point in your page where you want to insert your print button. Ideally, it should be at either the very top or bottom of the page. Type <p></p> to create a blank paragraph to create space between the previous line and the button.

3

Create an input tag, as you would in a form, and use JavaScript code to give your button the print function. Type "<input type='button' onClick='window.print()' value='Print' />" without the final quotation marks to tell the user's browser to bring up the "Print" dialog box. You can change "Print" under the value attribute to whatever word or phrase you want.

4

Type in a break tag -- -- to go to the next line and write a short line underneath the "Print" button to describe why the user should press the button. For example, you could type "Click here to print this page." You can also add this line before the print button if you want to.

5

Save the HTML file and upload it to your website. Click the "Print" button to test it out.

Tip

  • check Alternatively, you can create a JavaScript link to create your print button. Type "" -- without the final quotation marks. The "imagehere.jpg" reference should contain your own link to an "Print" button image on your Web server. You can create this button in an image editing program, such as Adobe Photoshop.

About the Author

Louise Balle has been writing Web articles since 2004, covering everything from business promotion to topics on beauty. Her work can be found on various websites. She has a small-business background and experience as a layout and graphics designer for Web and book projects.

Photo Credits

  • photo_camera Jack Hollingsworth/Photodisc/Getty Images