Membuat Border / Kotak Pada Posting
Posted by madridista at Senin, 04 Januari 2010
Share this post:
Ma.gnolia DiggIt! Del.icio.us Yahoo Furl Technorati Reddit
2 Comments
Border dapat dibuat pada tulisan dan gambar. Contoh pada tulisan adalah:
Tulisan ber-border. Ukuran border 1px dan jenisnya solid.
Membuatnya tidaklah susah.
Ada 2 cara pembuatan, yaitu tidak menggunakan CSS dan menggunakan CSS. Keduanya sama mudahnya. Saya akan mengulas kedua.
1. Tidak menggunakan CSS.
Keuntungannya adalah, kita dapat membuat border yang kita sukai dan berbeda-beda untuk tiap kotaknya.
Kekurangannya adalah, kita harus mengetik code untuk tiap kotak. Ini memakan waktu dan tenaga.
Cara membuatnya:
Untuk kasus tulisan dalam kotak yang di atas. Codingnya adalah:
border:1px #ff0000 solid;
1px --> ukuran border
#ff0000 --> warna border, terdiri dari 6 digit angka
solid --> tipe border, untuk bergaris putus-putus adalah 'dashed', titik-titik 'dotted'
padding: 10px;
Padding adalah ukuran jarak antara text dan border
background-color:#000000;
Warna latar belakang hitam. Jika tidak ingin mengubah latar belakang warna, hapus saja.
2. Menggunakan CSS.
Keuntungannya adalah lebih mudah menggunakannya.
Kekurangannya adalah semua kotak sama.
Cara membuatnya:
Perhatikan kembali coding isi tag style yang di atas. Yaitu yang berisi:
border:1px #ff0000 solid; padding:10px; background-color:#000000;
Copy-lah bagian itu kemudian nanti akan diletakkan (paste) di bagian CSS. Masuklah ke bagian 'Edit HTML' pada layout. Perhatikan seluruh HTML yang ada. Bagian CSS diawali dengan tag coding:
Tepat di atas akhiran CSS ini, buatlah elemen baru CSS dengan mengetik:
.border {
Kemudian hasil copy-an tadi letakkan (paste) setelahnya. Akhiri dengan tanda tutup:
}
Hasilnya adalah:
.border { border:1px #ff0000 solid; padding:10px; background-color:#000000; }
Langkah terakhir adalah memanggil elemen CSS border ini melalui tag div. Yaitu:
Posted by madridista at Senin, 04 Januari 2010
Share this post:
Ma.gnolia DiggIt! Del.icio.us Yahoo Furl Technorati Reddit
2 Comments
Border dapat dibuat pada tulisan dan gambar. Contoh pada tulisan adalah:
Tulisan ber-border. Ukuran border 1px dan jenisnya solid.
Membuatnya tidaklah susah.
Ada 2 cara pembuatan, yaitu tidak menggunakan CSS dan menggunakan CSS. Keduanya sama mudahnya. Saya akan mengulas kedua.
1. Tidak menggunakan CSS.
Keuntungannya adalah, kita dapat membuat border yang kita sukai dan berbeda-beda untuk tiap kotaknya.
Kekurangannya adalah, kita harus mengetik code untuk tiap kotak. Ini memakan waktu dan tenaga.
Cara membuatnya:
Untuk kasus tulisan dalam kotak yang di atas. Codingnya adalah:
Tulisan ber-border. Ukuran border 1px dan jenisnya solid.
border:1px #ff0000 solid;
1px --> ukuran border
#ff0000 --> warna border, terdiri dari 6 digit angka
solid --> tipe border, untuk bergaris putus-putus adalah 'dashed', titik-titik 'dotted'
padding: 10px;
Padding adalah ukuran jarak antara text dan border
background-color:#000000;
Warna latar belakang hitam. Jika tidak ingin mengubah latar belakang warna, hapus saja.
2. Menggunakan CSS.
Keuntungannya adalah lebih mudah menggunakannya.
Kekurangannya adalah semua kotak sama.
Cara membuatnya:
Perhatikan kembali coding isi tag style yang di atas. Yaitu yang berisi:
border:1px #ff0000 solid; padding:10px; background-color:#000000;
Copy-lah bagian itu kemudian nanti akan diletakkan (paste) di bagian CSS. Masuklah ke bagian 'Edit HTML' pada layout. Perhatikan seluruh HTML yang ada. Bagian CSS diawali dengan tag coding:
Tepat di atas akhiran CSS ini, buatlah elemen baru CSS dengan mengetik:
.border {
Kemudian hasil copy-an tadi letakkan (paste) setelahnya. Akhiri dengan tanda tutup:
}
Hasilnya adalah:
.border { border:1px #ff0000 solid; padding:10px; background-color:#000000; }
Langkah terakhir adalah memanggil elemen CSS border ini melalui tag div. Yaitu:
isian
