We’ll talk about how to create a printer-friendly website in this article. In the world we live in now, many of us can get on the web almost anywhere. This might make you think that printing a web page is a thing of the past, but that isn’t always the case. There are still a number of reasons why people might want to print out a webpage.
You never know how people will decide to read the content on your website. They might use a desktop computer or laptop to visit your site, or they might be one of the many people who do so on a mobile device of some kind. Web professionals today make sites that look good and work well on a wide range of devices and screen sizes to accommodate this wide range of visitors. However, print is an option that many people don’t think about.
How to create a printer-friendly website
- Click the “Start” button, type “Notepad” in the search box and click on “Notepad” in the list of results.
- Click Notepad’s “File” menu, then click “Open” and use the file manager to locate the HTML file you want to edit. Click the “Open” button.
- Type the following code on a blank line above the “</head>” tag in your HTML file:
<link href="print.css" type="text/css" rel="stylesheet" media="print">
- This code instructs the browser to load a CSS file that contains Web page printing instructions.
- Type a unique class name in every HTML tag that you don’t want to show up on the printed page or in a browser’s print preview. For example, you could add class=”noprint” to a div tag that has Web ads or navigation menus.
- If the tag already has a class name, you can add another name by typing a space after the existing class name and then typing the new class name. For example, to add the class name “noprint” to a div that already has the class name “menu,” type:
class="menu noprint"
- Press “Ctrl-S” to save your HTML file.
- Click the “File” menu, then click “New” to start a new Notepad document.
- Type the following code, substituting “.noprint” with the class name you want to use:
.noprint {display: none}
- The “display:none” property and attribute makes any class with that tag name invisible when you print or print-preview the Web page.
- Press “Ctrl-S” to save the file.
- Type “print.css” as the file name, then click the “Save” button.
FAQ
What makes a page PrintFriendly?
Most web pages have information and links that are only useful while you are looking around the site. Pages that are easy to print are made to fit on an 8.5″x11″ or A4 sheet (see paper sizes) and only include the page’s content (plain text and images) and information about where they came from.
How do I print a web page without cutting it off?
When you print in landscape mode, you can be sure that nothing will be cut off at the edges. Before you print, most browsers require you to go to the file menu, click on “page setup,” and then check the “landscape” box in the page setup window.
Is PrintFriendly free?
PrintFriendly cleans up and formats web pages so that they can be printed well. PrintFriendly gets rid of ads, navigation, and other useless stuff on web pages, so when you print, you use less paper and ink. It’s easy to use and free.