Membuat Halaman Web Bisa Dicetak Menggunakan CSS

Salah satu masalah klasik dengan website , adalah bahwa mereka tidak mencetak dengan sangat baik . Itu berarti bahwa elemen halaman ( teks , gambar, dll ) tidak berbaris , gambar yang tidak diinginkan dan link navigasi bisa dicetak - pada dasarnya anda memiliki kontrol yang sangat sedikit , dalam hal bagaimana halaman web Anda terlihat ketika mereka dicetak .
Apa solusinya !
Dengan kekuatan CSS , Anda hanya perlu membuat penambahan sederhana untuk halaman web Anda dan mereka akan menjadi bisa dicetak .

Konsep Dasar

    Orang-orang akan mencetak halaman Anda biasanya dapat membaca konten , bukan untuk melihat gambar . Anda perlu untuk menyembunyikan semua gambar dari printer dan ini dilakukan dalam style sheet cetak . Saya akan menjelaskan apa style sheet cetak dalam sekejap .
    Elemen navigasi tidak diperlukan dalam dokumen dicetak juga, sehingga semua elemen navigasi harus dihapus dari halaman yang dicetak .
    Katakanlah Anda dirancang halaman Anda dengan latar belakang hitam dengan teks putih . Anda tidak ingin printer mencetak semua orang hitam itu, mereka tidak akan terlalu senang dengan harga tinta hari ini ! Untuk mengatasi masalah ini , dalam style sheet cetak kami, kami akan mengatur warna halaman untuk ' putih ' dan warna teks ' hitam ' .
Print Style Sheet
Saya telah menyebutkan 'gaya cetak sheet ' beberapa kali tanpa penjelasan , mari kita berhati-hati itu sekarang . CSS saat ini memungkinkan Anda untuk link ke sheet lebih dari satu gaya halaman web Anda .
Alasan sederhana yang ingin melakukan hal ini , adalah agar Anda bisa memiliki halaman HTML ' perubahan' penampilan secara otomatis ketika seseorang mengunjungi halaman Anda dengan jenis tertentu dari perangkat . Jenis perangkat dapat mencakup komputer desktop yang khas , iPhone , ponsel Android , iPad dan printer ... antara perangkat lain !
Ia bekerja seperti ini , ketika Anda menghubungkan sebuah style sheet ke halaman HTML Anda, ada atribut yang dapat Anda tetapkan dalam link tag CSS yang memberitahu perangkat membaca halaman Anda jika harus menggunakan style sheet yang ditetapkan dalam link .
Jadi orang-orang dengan beberapa ide untuk jenis perangkat yang dapat ditentukan dalam link CSS . Untuk kepentingan artikel singkat ini dengan hanya dua dari mereka :

1. layar
2. mencetak

Berikut sepasang contoh link CSS yang mengarah ke gaya yang berbeda.

<link href="CSS/webdesignersHanbook_Print.css"  rel="stylesheet" type="text/css" media="print">    <link href="CSS/webdesignersHanbook_1.css"  rel="stylesheet" type="text/css" media="screen"> - See more at: http://www.csstutorial.net/2013/10/making-web-pages-printable-using-css/#sthash.kxWSITaP.dpuf

 <link href="CSS/webdesignersHanbook_Print.css"

rel="stylesheet" type="text/css" media="print">    

<link href="CSS/webdesignersHanbook_1.css"  

rel="stylesheet" type="text/css" media="screen">

<link href="CSS/webdesignersHanbook_Print.css"  rel="stylesheet" type="text/css" media="print">    <link href="CSS/webdesignersHanbook_1.css"  rel="stylesheet" type="text/css" media="screen"> - See more at: http://www.csstutorial.net/2013/10/making-web-pages-printable-using-css/#sthash.kxWSITaP.dpuf

<link href="CSS/webdesignersHanbook_Print.css"  rel="stylesheet" type="text/css" media="print">    <link href="CSS/webdesignersHanbook_1.css"  rel="stylesheet" type="text/css" media="screen"> - See more at: http://www.csstutorial.net/2013/10/making-web-pages-printable-using-css/#sthash.kxWSITaP.dpuf

<link href="CSS/webdesignersHanbook_Print.css"  rel="stylesheet" type="text/css" media="print">    <link href="CSS/webdesignersHanbook_1.css"  rel="stylesheet" type="text/css" media="screen"> - See more at: http://www.csstutorial.net/2013/10/making-web-pages-printable-using-css/#sthash.kxWSITaP.dpuf

<link href="CSS/webdesignersHanbook_Print.css"  rel="stylesheet" type="text/css" media="print">    <link href="CSS/webdesignersHanbook_1.css"  rel="stylesheet" type="text/css" media="screen">

- See more at: http://www.csstutorial.net/2013/10/making-web-pages-printable-using-css/#sthash.kxWSITaP.dpuf

Anda dapat melihat bahwa link CSS ini sebenarnya.

 media="print"

dan

media="screen"

 
Yang pertama ('Media = "print"') menunjuk pada style sheet yang telah diatur untuk pencetakan sementara yang lain (Media = "screen") sudah diatur untuk monitor PC normal. Saat ini sebagian besar browser tahu bahwa jika seseorang mencoba untuk mencetak halaman gaya yang ditandai dengan: 'Media = "print"' harus digunakan.

Jadi sekarang kita tahu bagaimana untuk memberitahu browser untuk digunakan saat mencetak halaman HTML, sehingga apa yang berbeda dalam style sheet cetak yang membuat pekerjaan ini?

Ada segala macam hal yang dapat Anda lakukan, tapi yang paling mudah adalah hanya untuk membungkus HTML dan gambar (Anda tidak ingin dicetak) dengan tag div dan memberikan semua orang div tag ID:

 

display: none

Cara terbaik untuk memahami hal ini, adalah untuk melihat itu bekerja. Buat halaman HTML sederhana dan menciptakan sebuah style sheet yang baru dan menyebutnya: print.css. Dalam style sheet Anda memasukkan kode ini:

 .noPrint {
            display: none;
            }

 Sekarang di halaman HTML Anda, hanya membungkus DIVs sekitar elemen Anda tidak ingin dicetak:

 <div class='noPrint'>    

<p>Text that I don't want printed.</p>     

</div>

 Jangan lupa untuk menyertakan link CSS Anda di halaman HTML Anda! Jadi pada dasarnya, setiap elemen di dalam DIVs yang memiliki kelas 'noPrint' diterapkan kepada mereka, tidak akan dicetak.

Hal lain yang harus Anda lakukan adalah membuat semua teks hitam dan putih halaman Anda:

  body { 
 

             font-family: Georgia, "Times New Roman", Times, serif;           

  
             font-size: 14px;     

             color: #000000;     

              background-color: #FFFFFF;  

           }

Buat Tombol Cetak

Untuk menutup tutorial ini, di sini adalah cara sederhana untuk membuat tombol 'print' pada halaman Anda menggunakan hanya sedikit code JavaScript:

 <a href="#" onClick=" window.print(); return false">Print this page!</a>