Deny Sri Supriyono | xHTML CSS Web Design | Indonesia » Belajar CSS http://blog.denysri.com An xHTML, CSS, Web Designer lives in Jakarta, Indonesia. Tue, 29 Dec 2009 17:10:33 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Mempercantik CODE dengan CSS http://blog.denysri.com/belajar-css/mempercantik-code-dengan-css/ http://blog.denysri.com/belajar-css/mempercantik-code-dengan-css/#comments Tue, 29 Jan 2008 01:34:44 +0000 deny.sri.supriyono http://blog.denysri.com/belajar-css/mempercantik-code-dengan-css/ 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:

code hasil modifikasi

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

code hasil modifikasi

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:

kode baris satu
kode baris dua
kode baris tiga

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.




Mempercantik CODE dengan CSS

Contoh tampilan kode HTML yang di dalamnya terdapat text yang panjang

<html>
   <head>
   </head>
   <body>
      <p>The <pre> tag is used to display pre-formatted text. The output will mimic exactly how the text is rendered inside the pre element including white space, tabs, and line breaks. This allows you to maintain the appearance of data in rows and columns, or have extra white spaces in text such as poems. Perhaps one of the most common uses of this tag is to display computer code and output.</p>

   </body>
</html>

Contoh tampilan kode CSS

.contoh{
  width:200px;
  line-height:17px;
  text-transform:uppercase;
  background-color:#f4f4f4;
  background-image:url("contoh.gif");
  background-repeat:no-repeat;
  background-position:top right
}

Contoh tampilan kode PHP yang hanya memiliki satu baris kode

if ( $file_name =="") { echo "error"; }

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.

pre code{
width:355px;
display:block;
padding:20px;
border:1px solid #ddd;
overflow:auto
}

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:

.html
{
background:#f4f4f4 url(“html.gif”) no-repeat top right
}

.css
{
background:#f4f4f4 url(“css.gif”) no-repeat top right
}

.php
{
background:#f4f4f4 url(“php.gif”) no-repeat top right
}

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!

Related Posts

]]> http://blog.denysri.com/belajar-css/mempercantik-code-dengan-css/feed/ 33 Mempercantik Blockquote dengan CSS http://blog.denysri.com/belajar-css/mempercantik-blockquote-dengan-css/ http://blog.denysri.com/belajar-css/mempercantik-blockquote-dengan-css/#comments Tue, 08 Jan 2008 16:38:56 +0000 deny.sri.supriyono http://blog.denysri.com/belajar-css/mempercantik-blockquote-dengan-css/ Kenapa harus dipercantik? Apa tidak cukup dengan tampilan text yang agak masuk ke dalam paragraph?

Untuk yang ingin berkreasi, sebenarnya tampilan blockquote bisa dieksplorasi dengan bantuan CSS.

Misalnya, diberi background warna atau gambar, diubah bentuk font serta warnanya atau diberi border – sehingga bisa tampil lebih cantik, manis ataupun macho – terserah yang anda suka.

Dalam artikel ini, kita akan mencoba untuk mempercantik tampilan blockquote – dengan memberi background gambar dan mengubah jenis fontnya sehingga akan memiliki tampilan seperti di bawah ini:

blockquote hasil modifikasi

Serta yang paling utama adalah tampil bagus di Internet Explorer, Mozilla Firefox, Opera dan Safari.

Sedikit mengenai blockquote

Blockquote adalah sebuah tag HTML biasanya digunakan untuk menampilkan quote/kutipan. Misalnya, kita menemukan kalimat menarik dari seseorang dan ingin menampilkannya di blog/website – maka digunakanlah blockquote.

Contoh code blockquote:

Kalimat yang di-quote.

I. Menyiapkan image

Untuk tutorial ini, dibutuhkan 2 image berukuran 40×40 pixel yang bisa dibuat dengan menggunakan aplikasi pengolah gambar. Beri nama file start-quote.gif untuk tanda awal quote dan end-quote.gif untuk tanda akhir quote.

Bisa juga menggunakan image yang saya gunakan dalam tutorial ini: start-quote.gif, end-quote.gif

II. Membuat halaman HTML

Berikut ini halaman HTML yang akan menjadi bahan tutorial.




Belajar dari Steven Gerrard

Football is all about winning things as a team but it’s also important pick up individual awards along the way. (Steven Gerrard)

Final FA Cup 2006 antara Liverpool vs Westham United. Liverpool tampil tidak baik di awal-awal pertandingan. Ketinggalan 2 gol akibat blunder yang dilakukan oleh pemainnya, tidak membuat semangat para pemain Liverpool menurun.

Beruntung Liverpool memiliki seorang Steven Gerrard. Satu assist dan satu golnya mampu menjadikan keadaan imbang dan membuat pertandingan semakin menarik. Pertandingan tersisa 3 menit dan Liverpool masih tertinggal 1 gol. Pemain Liverpool kelihatan mulai frustasi ketika serangan-serangan yang mereka lakukan selalu gagal untuk menjadikan skor imbang.

Pendukung Westham United mulai menyanyikan lagu kebangsaannya dan merayakan kemenangan yang mereka kira sudah dekat. Sampai kemudian sebuah tendangan keras dari luar kotak penalti oleh Steven Gerrard membuat para pendukung Westham United terdiam dan membuat pendukung Liverpool bersorak. Liverpool akhirnya menjuarai FA Cup melalui adu penalti.

Steven Gerrard, seorang kapten yang mempunyai peranan sangat penting bagi timnya. Selalu 100% dalam bermain, tahu apa yang dibutuhkan oleh timnya dan tetap berusaha memberikan yang terbaik sebelum peluit akhir dibunyikan.

Hasil dari kode HTML di atas bisa dilihat di halaman ini. Terlihat ada sebuah paragraph dengan isi kalimat dari Steven Gerrard tampil agak masuk ke dalam hasil dari kode blockquote.

III. Menyisipkan tanda awal quote

Sekarang kita coba sisipkan gambar tanda awal quote yang sudah kita siapkan sebelumnya. Kode di bawah ini akan menghasilkan warna background putih, start-quote.gif sebagai background image yang tidak di ulang-ulang, dengan posisi background di sebelah atas kiri.

blockquote
{
background-color:#fff;
background-image:url(“start-quote.gif”);
background-repeat:no-repeat;
background-position:top left
}

Hasil dari penambahan kode di atas bisa dilihat di halaman ini. Sekarang kita melihat tanda awal quote sudah menjadi background blockquote, tapi posisinya belum tepat. Text masih berada di atas background gambar yang membuatnya susah dibaca.

IV. Memperbaiki jarak text dengan tanda awal quote

Dengan mengatur padding untuk tag <p>, kita bisa mendapatkan jarak text yang diinginkan. Kita berikan padding atas dan bawah 10px, padding kanan 0px dan padding kiri 50px yang akan membuat text menjauh dari background gambar.

Berikut code CSS-nya:

blockquote p
{
padding-top:10px;
padding-right:0;
padding-bottom:10px;
padding-left:50px
}

Bisa terlihat di halaman ini, text sudah berada di posisi yang membuatnya lebih enak di baca.

Sampai pada tahap ini, beberapa dari kita mungkin sudah merasa cukup puas dengan hasil yang di dapat. But the best is yet to come, kita lanjut lagi ke tahap berikutnya.

V. Menyisipkan tanda akhir quote

Di tahap ini, kita akan menambahkan sebuah <div> dengan class “blokkuot” ke dalam blockquote supaya kita bisa menyisipkan image tanda akhir quote.

Baris kode HTML, khusus untuk blockquote berubah menjadi:

Football is all about winning things as a team but it’s also important pick up individual awards along the way. (Steven Gerrard)

Setelah itu, kita tambahkan di bagian style beberapa baris di bawah ini yang akan menghasilkan warna background transparan, end-quote.gif sebagai background image yang tidak di ulang-ulang, dengan posisi background di sebelah bawah kanan.

.blokkuot
{
background-color:transparent;
background-image:url(“end-quote.gif”);
background-repeat:no-repeat;
background-position:bottom right
}

Di halaman ini, kita lihat tanda akhir quote sudah berada di posisinya, tapi posisi text yang berada di atas gambar membuatnya agak susah di baca.

VI. Memperbaiki jarak text dengan tanda akhir quote

Untuk memperbaikinya, kita modifikasi sedikit style untuk tag <p> yang sudah kita buat pada tahap IV. Kita ubah nilai padding kanan menjadi 50px sehingga sama dengan nilai padding kiri.

blockquote p
{
padding-top:10px;
padding-right:50px;
padding-bottom:10px;
padding-left:50px
}

Hasilnya bisa dilihat di sini. Sekarang kita sudah mendapatkan sebuah blockquote yang memiliki tampilan menarik, dengan text yang diapit oleh tanda awal dan akhir quote.

Cukup sampai di sini? Bagi yang sudah merasa cukup boleh stop sampai di tahap ini. Blockquote sudah terlihat cukup bagus untuk digunakan. Tapi saya masih ingin memberikan beberapa sentuhan akhir untuk membuatnya lebih menarik.

VII. Sentuhan akhir

Untuk memperoleh hasil seperti tujuan awal artikel ini, kita perlu sedikit memodifikasi kode CSS untuk blockquote yang sudah dibuat.

Pertama, menghilangkan margin dan padding disekitar blockquote yang dihasilkan secara otomatis.

Kedua, mengubah tampilan huruf dengan bentuk italic, ukuran 13px, font Georgia dan jarak antara baris 21px.

blockquote
{
background-color:#fff;
background-image:url(“start-quote.gif”);
background-repeat:no-repeat;
background-position:top left;
margin:0;
padding:0;
font-style:italic;
font-size:13px;
font-family:Georgia, “Times New Roman”, Times, serif;
line-height:21px
}

Building a wall, one brick at a time – akhirnya selesai juga. Hasil akhir bisa dilihat di sini. Sebuah blockquote dengan tambahan 2 image yang enak dilihat dan tampil baik di semua browser.

Tambahan

Pada tahap 5, ada penambahan sebuah <div> yang disisipkan ke dalam blockquote.

Untuk sebagian dari anda mungkin menganggap penambahan <div> seharusnya tidak dilakukan. Tapi, dalam kebutuhannya untuk mendapatkan hasil akhir yang diinginkan – diperlukan sebuah <div> tambahan.

Jadi, digunakan atau tidak – keputusannya ada di tangan anda sendiri.

Selamat bereksperimen dengan blockquote! Saran dan kritiknya sangat dinanti demi perbaikan.

Belajar CSS? Yuuuk!

Related Posts

]]> http://blog.denysri.com/belajar-css/mempercantik-blockquote-dengan-css/feed/ 40