Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



BINA KOTAK BAHAGIAN 1
May 2, 2009
Posted by: Fauzie


Penggunaan kotak dalam blog dan website adalah satu "feature" yang sangat menarik terutama kotak-kotak tersebut mempunyai border yang yang berlainan bentuk dan berlainan warna.

Kotak yang saya kira sangat menarik ialah apabila keempat-empat bucunya dibulatkan (rounded) dan mempunyai sama-ada "single radius", "double-radius" atau "solid".

Untuk rencana kali ini saya akan membincangkan bagaimana untuk membina beberapa jenis kotak yang boleh kita letakkan di bahagian sidebar atau dalam blog post.

Pada dasarnya kotak mudah dibina dengan menggunakan pendekatan "table" iaitu atau "table data style". Malangnya "feature" yang ada terlalu terhad. Untuk rencana ini kita akan belajar membina kotak dengan menggunakan <div style, CSS dan juga javascript. Bagi memudahkan untuk anda mengikutinya, rencana ini akan di bahagi kepada beberapa bahagian.

Membina Kotak Menggunakan Span Style (<span>)

Ini adalah cara yang paling mudah dan ringkas sekali. Tidak memerlukan kod html yang "complicated".

Seperti biasa taip kod-kod berikut dalam notepad anda dan save dengan fail nama yang diberi extension sebagai .html (contoh: kotak.html). Kemudian buka browser, klik File->Open File->klik fail yang anda simpan tadi.

<span style="border: 1px dotted black; padding: 10px, background-color: yellow;">Teks anda di sini</span>

teks anda di sini

Kotak ini sesuai hanya untuk tulisan atau ayat yang pendek sahaja. Ini adalah kerana ayat yang panjang tidak boleh wrap kebawah.

Jika anda ingin meletakkan satu lagi kotak disebelahnya, apa yang anda perlu buat ialah copy kod di atas dan paste di sebelah </span> seperti di bawah ini:

<span style="border: 1px dotted black; padding: 10px; background-color: yellow;">teks anda di sini</span><span style="border: 1px dotted black; padding: 10px; background-color: yellow;">Kotak kedua anda di sini</span>

teks anda di siniKotak kedua anda di sini

Nota:Penggunaan kotak ini tidak digalakkan kerana tidak praktikal