Deny Sri Supriyono

Dalam artikel ini, kita akan coba untuk berkreasi dengan tag code dan mengubah sedikit tampilannya dengan bantuan tag pre dan CSS.

Kita akan menggunakan tag pre dan code untuk menampilkan kode program HTML, CSS dan PHP serta menambahkan background gambar sebagai informasi tambahan untuk tag code sehingga akan memiliki tampilan seperti di bawah ini:

Hasil akhir dari artikel ini juga akan menampilkan horizontal scrollbar ketika text yang ditampilkan sangat panjang, seperti contoh di bawah ini:

Hasil dari artikel ini sudah dites dan berjalan dengan baik di Internet Explorer, Mozilla Firefox, Opera dan Safari.

Sedikit mengenai PRE dan CODE

pre adalah sebuah tag yang bisa digunakan untuk menampilkan text sebagai “preformatted” - yang berarti semua spasi dan baris baru akan ditampilkan apa adanya.

code biasanya digunakan untuk mendefinisikan kode, misalnya kode program komputer.

Contoh penggunaan pre dan code:

Untuk menuliskan source code HTML - supaya tidak dianggap sebagai kode HTML yang harus dieksekusi oleh browser - kita harus mengkonversinya terlebih dahulu. Dalam artikel ini, saya menggunakan HTML Special Character Converter dari website Chris Hardy.

I. Menyiapkan image

Untuk tutorial ini, dibutuhkan 3 image berukuran 40×40 pixel yang bisa dibuat dengan menggunakan aplikasi pengolah gambar. Beri nama file dengan html.gif, css.gif dan php.gif.

Bisa juga menggunakan image yang saya gunakan dalam tutorial ini: html.gif, css.gif dan php.gif.

II. Membuat halaman HTML

Berikut ini halaman HTML yang akan menjadi dasar bahan tutorial kali ini. Bisa dilihat di dalam kode di bawah, setiap tag code memiliki class sendiri-sendiri yang nanti akan berguna di tahap berikutnya.

Hasilnya bisa dilihat di halaman mempercantik-code-1.html. Terlihat di halaman itu, text ditampilkan dengan font monospace. Text yang sangat panjang ditampilkan apa adanya sehingga keluar dari container (yang berwarna biru muda) dan menghasilkan horizontal scrollbar di bagian bawah browser.

III. Mengatur tag CODE

Untuk tag code yang ada di antara tag pre, kita tentukan lebarnya sebesar 355px, mengubahnya menjadi block level element, memberikan padding sebesar 20px dan border 1px dengan warna abu-abu di semua sisi. Tidak lupa menambahkan overflow:auto, sehingga ketika text yang ditampilkan sangat panjang dan melebihi lebar dari tag code yang sudah kita tentukan - kita akan mendapatkan scrollbar.

Hasilnya bisa dilihat di halaman mempercantik-code-2.html. Tampilan di browser Mozilla Firefox, Opera dan Safari sudah seperti yang kita inginkan, tapi tidak dengan browser Internet Explorer. Untuk sementara, kita biarkan dulu masalah dengan IE.

IV. Memberi background image

Sekarang, kita akan memberikan background image yang berbeda untuk tag code yang memiliki class html, css dan php dengan kode CSS di bawah ini:

Hasilnya bisa dilihat di halaman mempercantik-code-3.html. Tag code sudah memiliki warna background abu-abu dengan background image di pojok kanan atas. Kalau nggak ada browser yang namanya IE, artikel ini sudah selesai sampai di tahap ini.

Di tahap selanjutnya, kita akan coba untuk memperbaiki tampilan di browser IE.

V. Memperbaiki tampilan di browser IE

Kita akan memanfaatkan conditional comment - sehingga hanya browser IE saja yang mengeksekusi kode di dalamnya.

Beginilah kode lengkap conditional comment-nya yang akan kita tambahkan di bawah baris kode </style>:

Jadi, apa gunanya style yang ada di dalam conditional comment di atas?

Sekarang kita perhatikan halaman yang sudah kita buat sejauh ini dengan menggunakan browser IE. Seperti terlihat, text ditampilkan tanpa menghiraukan spasi yang sudah dibuat dan text panjang tidak ditampilkan memanjang ke samping, tapi ditampilkan di baris baru ketika sudah memenuhi lebar dari tag code.

Untuk memperbaikinya, kita tambahkan style white-space:pre untuk tag code, supaya kode yang kita tulis tetap ditampilkan seperti apa adanya.

Dengan menambahkan style di atas, tampilan di browser IE sudah hampir seperti tampilan di browser lainnya - hanya saja sekarang dengan tambahan vertical scrollbar yang sebenarnya tidak diperlukan. (Lihat hasil)

Untuk menghilangkan vertical scrollbar ini, kita tambahkan lagi untuk tag code style overflow-y:hidden yang hanya dimengerti oleh browser IE. (Lihat hasil)

Satu lagi, posisi background image untuk tag code yang memiliki text panjang tidak berada di tempat yang semestinya. Seharusnya, posisi background image ada di pojok kanan atas dan tetap berada di posisinya meskipun kita scroll.

Untuk memperbaikinya, kita perlu tambahkan background-attachment:fixed untuk class html, css dan php.

Hasil akhir

Building a wall, one brick at a time - inilah hasil akhirnya.

Sekarang kita bisa menuliskan kode menggunakan tag code dengan tampilan yang cantik dan saya yakin hasil akhirnya masih bisa dikembangkan sehingga tampil lebih cantik.

Selamat bereksperimen dengan tag code! Semoga bermanfaat - dan seperti biasa, ditunggu saran serta kritiknya demi perbaikan.

Belajar CSS? Yuuuk!