Cara Membuat Tampilan yang Berbeda Pada Saat di Print
Pernahkah teman-teman berfikiran bagaimana cara merancang tampilan yang berbeda di ketika 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 ketika di print, dan sebagainnya. bagimana teman-teman telah menangkap ya apa yang saya maksud. oke jangan kemana-mana simak terus ya.
Mas apakah hanya dapat merancang di media print saja, jawabannya ya tentu tak 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 yakni nilai bawaan atau default jadi ketika kita tak menggunakan media type apa-apa karenanya nilai media typenya yakni all, dan berarti kode CSS bagi segala media yang ditampilkan. karena saya ingin belajar cara merancang tampilan yang berbeda di ketika di print, karenanya saya gunakan media type yang print.
Oke kini kita masuk pada contoh pembuatannya ya teman-teman:
Pertama-tama saya ingin teman-teman merancang style CSS bagi tampilan printnya, disini saya menamakan filenya dengan print.css.:
h1{color:green;}
p{font-size:18px;color:red;}ini yakni style css bagi 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 merancang tampilan yang berbeda di ketika 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 yakni contoh strktur cssnya -->
</head>
<body>
<h1>cara merancang tampilan yang berbeda di ketika di print</h1>
<p>
Belajar di Source Code Aplikasi betul-betul mengasyikan.
</p>
</body>
</html>
Oke kini kita liat tampilan di layar screen dan di layar print:
Tampilan sebelum di layar print:
Tampilan setelah di halaman print:
Dapat dilihat perbedaanya ya teman-teman, kini tinggal imajinasi teman-teman saja mau di style seperti apa di ketika di halaman print, oke saya rasa lumayan hingga disini dulu belajar kita mengenai cara merancang tampilan yang berbeda di ketika di print,semoga bermanfaat dan hingga jumpa.
Sumber https://kursuswebsite.org
