Pernahkah teman-teman berfikiran bagaimana cara membuat tampilan yang berbeda pada saat di print, maksud dari tampilan yang berbeda disini ialah, dimana ketika kita ingin mengeprint tetapi style yang di keluarkan berbeda misal, judul yang tadinya berwarna hijau jadi merah saat di print, dan sebagainnya. bagimana teman-teman sudah menangkap ya apa yang saya maksud. oke jangan kemana-mana simak terus ya.
Mas apakah hanya bisa membuat di media print saja, jawabannya ya tentu tidak ya, oiya sebutan cara ini dinamakan media type ya teman-teman. Terdapat 9 nilai media type yang didukung yaitu: all, aural, braille, handheld, projection, print, screen, tty, dan tv. Dan nilai all adalah nilai bawaan atau default jadi ketika kita tidak menggunakan media type apa-apa maka nilai media typenya adalah all, dan berarti kode CSS untuk semua media yang ditampilkan. karena saya ingin belajar cara membuat tampilan yang berbeda pada saat di print, maka saya gunakan media type yang print.
Oke sekarang kita masuk dalam contoh pembuatannya ya teman-teman:
Pertama saya ingin teman-teman membuat style CSS untuk tampilan printnya, disini saya menamakan filenya dengan print.css.:
h1{color:green;}
p{font-size:18px;color:red;}
ini adalah style css untuk tampilannya printnya ya teman-teman, saya memberikan h1 dengan warna hijau dan Pnya 18px dan berwarna merah.
Oke bagaimana file indexnya, file indexnya seperti ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cara membuat tampilan yang berbeda pada saat di print</title>
<-e-style type="text/css">
h1{color:red;}
p{font-size:18px; color: blue;}
<-e-/style>
<link href="print.css" rel="stylesheet" media="print"> <!-- dan ini adalah contoh strktur cssnya -->
</head>
<body>
<h1>cara membuat tampilan yang berbeda pada saat di print</h1>
<p>
Belajar di dumetschool sangat mengasyikan.
</p>
</body>
</html>
Oke sekarang kita liat tampilan di layar screen dan di layar print:
Tampilan sebelum di layar print:
Tampilan setelah di halaman print:
Bisa dilihat perbedaanya ya teman-teman, sekarang tinggal imajinasi teman-teman saja mau di style seperti apa pada saat di halaman print, oke saya rasa cukup sampai disini dulu belajar kita tentang cara membuat tampilan yang berbeda pada saat di print,semoga bermanfaat dan sampai jumpa.