How to Create a Print Button on a Web Page

Save

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.

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

  • 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.

  • 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.

  • 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.

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

Tips & Warnings

  • Alternatively, you can create a JavaScript link to create your print button. Type "<a href='javascript:window.print()'><img src='imagehere.jpg' /></a>" -- 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.

Related Searches

  • Photo Credit Jack Hollingsworth/Photodisc/Getty Images
Promoted By Zergnet

Comments

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!