CSS (cascading style sheets) memberi Anda kendali besar atas bagaimana konten pada halaman web Anda ditampilkan di layar. Kontrol ini juga meluas ke media lain, seperti saat halaman web dicetak.
Anda mungkin bertanya-tanya mengapa Anda ingin menambahkan fitur cetak ke halaman web Anda; Lagi pula, kebanyakan orang sudah tahu atau dapat dengan mudah mengetahui cara mencetak halaman web menggunakan menu browser mereka.
Tetapi ada situasi di mana menambahkan tombol cetak atau tautan ke halaman tidak hanya akan membuat proses lebih mudah bagi pengguna Anda ketika mereka perlu mencetak halaman tetapi, mungkin bahkan yang lebih penting, memberi Anda lebih banyak kontrol atas bagaimana hasil cetakan itu akan muncul kertas.
Inilah cara menambahkan tombol cetak atau tautan cetak pada halaman Anda, dan bagaimana menentukan bagian mana dari konten halaman Anda yang akan dicetak dan mana yang tidak.
Menambahkan Tombol Cetak
Anda dapat dengan mudah menambahkan tombol cetak ke halaman web Anda dengan menambahkan kode berikut ke dokumen HTML Anda di mana Anda ingin tombol muncul:
onclick = "window.print (); return false;" />
Tombol akan dilabeli sebagai cetak halaman ini ketika muncul di halaman web. Anda dapat menyesuaikan teks ini dengan apa pun yang Anda suka dengan mengubah teks di antara tanda kutip berikut
nilai =dalam kode di atas.
Perhatikan bahwa ada satu ruang kosong sebelum teks dan mengikutinya; ini meningkatkan tampilan tombol dengan menyisipkan beberapa ruang antara ujung teks dan tepi tombol yang ditampilkan.
Menambahkan Tautan Cetak
Lebih mudah menambahkan tautan cetak sederhana ke halaman web Anda. Masukkan saja kode berikut ke dalam dokumen HTML Anda di mana Anda ingin tautannya muncul:
mencetak
Anda dapat menyesuaikan teks tautan dengan mengubah "cetak" menjadi apa pun yang Anda pilih.
Membuat Bagian Khusus Dapat Dicetak
Anda dapat mengatur kemampuan bagi pengguna untuk mencetak bagian tertentu dari halaman web Anda menggunakan tombol atau tautan cetak. Anda dapat melakukan ini dengan menambahkan a print.css file ke situs Anda, menyebutnya di kepala dokumen HTML Anda dan kemudian mendefinisikan bagian-bagian yang ingin Anda buat dengan mudah dicetak dengan mendefinisikan kelas.
Pertama, tambahkan kode berikut ke bagian kepala dokumen HTML Anda:
type = "text / css" media = "print" />
Selanjutnya, buat file bernama print.css. Dalam file ini, tambahkan kode berikut:
body {visibility: hidden;}
.print {visibility: visible;}Kode ini mendefinisikan semua elemen dalam tubuh sebagai tersembunyi ketika dicetak kecuali elemen memiliki kelas "cetak" yang ditugaskan padanya.
Sekarang, yang perlu Anda lakukan adalah menetapkan kelas "print" untuk elemen-elemen halaman web Anda yang ingin Anda cetak. Misalnya, untuk membuat bagian yang didefinisikan dalam elemen div dapat dicetak, Anda akan menggunakan
Hal lain pada halaman yang tidak ditugaskan untuk kelas ini tidak akan dicetak.