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 2
May 3, 2009
Posted by: Fauzie


Dalam rencana kedua membina kotak ini, kita akan membincangkan bagaimana membuat kotak dengan menggunakan <div style>.

Dua cara akan ditunjukkan dalam bahagian ini dan kita akan hanya menggunakan kod html sahaja bagi membina sesuatu kotak. Kotak yang akan dibina ini dipanggil "centered-bordered box".


Ini adalah contoh "centered bordered box". Warna latar ialah menggunakan hexadecimal color code #C0D4AF. Lebar kotak ialah 450 pixels. Paddingnya ialah 5 pixels ini bagi membolehkan teks yang dimasukkan dalam kotak ini tidak "flush up" atau terlalu dekat dengan border.Border yang digunakan ialah "solid line" dan berwarna hitam


Kod html yang digunakan untuk mendapatkan kotak di atas adalah seperti berikut.

<div style="border: 1px solid black; margin: 0px auto; padding: 5px; width: 450px; text-align: left; background-color: rgb(192, 212, 175);font-size:100%;"><p>Ini adalah contoh "centered bordered box". Warna latar ialah menggunakan hexadecimal color code #C0D4AF. Lebar kotak ialah 450 pixels. Paddingnya ialah 5 pixels ini bagi membolehkan teks yang dimasukkan dalam kotak ini tidak "flush up" atau terlalu dekat dengan border.Border yang digunakan ialah "solid line" dan berwarna hitam </p></div>


Seperti biasa copy & paste atau taip kod di atas dalam notepad dan save dengan memberi extension .html dan buka browser klik File->Open File->klik nama fail yang anda simpan dalam notepad untuk melihat kotak ini dalam browser.

Perhatikan perkataan 1px solid black. Ini memberi makna border kotak ialah dalam bentuk solid. Anda boleh tukar kepada bentuk "dotted" (.......) atau "dashed" (------) dan tukar warna border kepada warna yang anda kehendaki seperti merah (red), hijau (green), biru (blue) atau kelabu (grey).

Untuk menukar warna latar belakang anda boleh tukar hexadecimal color code yang anda suka.

Perhatikan juga perkataan "width" (lebar). Anda boleh tukar angka pixel kepada yang anda suka. Jika anda hendak memasukkan kotak ini di bahagian sidebar, "width" selalunya lebih kurang 180px hingga 200px.

Untuk meletakkan kotak ini dalam sidebar, klik Layout->Add a Gadget->HTML/JavaScript dan paste kod di atas. Kod html kotak ini juga boleh di "paste" atau ditaip dalam bahagian blog post. Tetapi sila pastikan anda berada di Edit Html dan bukan dalam Compose. Untuk mendapatkan effect yang baik, semua kod hendaklah dalam bentuk "compressed" atau disusun rapat seperti yang ditunjukkan di atas.

Kotak di bawah ini adalah jenis kedua yang menggunakan <div style>. Pada dasarnya, kedua-dua jenis html ini memberi effect kotak yang serupa. Perbezaan hanya kedudukan kotak ini, iaitu ia terletak di sebelah kiri dan kotak yang di atas terletak di tengah.

BEFORE ANYONE DID ANYTHING, ELVIS HAD DID EVERYTHING

Kod html untuk kotak di atas ini adalah seperti di bawah. Anda boleh tukar saiz border, warna latar belakang dan juga bentuk border, iaitu dashed atau dotted.

<div style="border: 2px solid black; padding: 5px; width: 300px; font-family: sans-serif; font-weight: bold; text-transform: capitalize; text-align: left; background-color: gold;">BEFORE ANYONE DID ANYTHING, ELVIS HAD DID EVERYTHING
</div>

Nota: Perkataan "text-transform: capitalize" memberi maksud semua abjad dalam huruf besar.

Meletakkan Image dan Table Dalam Kotak

Anda boleh meletakkan image atau table dalam kedua-dua kotak ini. Image walau bagaimana pun terlebih dahulu diletakkan dalam "table". Dengan kata lain, image dalam table dan table pula dikelilingi dengan kotak.


Perkara yang pertama perlu dibuat untuk mendapatkan effek seperti di atas ialah dengan mendapatkan satu image yang sesuai dengan berukuran yang tidak terlalu besar dan "save" dalam "my picture" dalam bentuk gif atau jpg.

Kemudian upload image ini untuk mendapatkan URL nya. Dalam contoh ini saya telah upload image ini dengan menggunakan Google Page Creators (program ini sudah diberhentikan oleh Google dan anda tidak boleh sign up untuk mendapatkan akaun baru. Oleh yang demikian sila cari free server yang boleh upload image).

Dengan menggunakan notepad anda perlu menaip kod untuk table seperti di bawah ini dan masukkan sekali URL image anda.

<div style="border: 1px solid black; margin: 2px auto; padding: 2px; width: 200px; text-align: left; background-color: rgb(192, 212, 175); font-size: 12px;"><table style="text-align: left; width: 200px;" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="width: 200px;"><img style="width: 200px; height: 227px;" alt="" src="http://mfm6009.googlepages.com/pretty_girl.GIF" /></td<</tr></tbody></table></div>


Kemudian letakkan kod html kotak (kotak yang pertama diatas) di atas <table style dan di tutup dengan </div> selepas </table>.

Mari kita asingkan kod-kod di atas dengan warnakan seperti ini:

<div style="border: 1px solid black; margin: 2px auto; padding: 2px; width: 200px; text-align: left; background-color: rgb(192, 212, 175); font-size: 12px;"><table style="text-align: left; width: 200px;" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="width: 200px;"><img style="width: 200px; height: 227px;" alt="" src="http://mfm6009.googlepages.com/pretty_girl.GIF" /></td<</tr></tbody></table></div>

Kod berwarna maroon mewakili html untuk kotak dan kod html yang berwarna biru mewakili table dan image. Jika anda biasa menggunakan atau tahu dengan program web development NVU atau Komposer, membina dan mendapatkan kod html table ini sungguh mudah.

Kotak di bawah ini pula adalah contoh bagaimana sebuah kotak mempunyai "table" di dalamnya. Dan table ini pula adalah table dalam bentuk 1 column.

Kod-kod html untuk mendapatkan effek kotak ini adalah seperti di bawahnya.

Rencana Blog
Bina Kotak Dengan Html
Bina Table Dengan Html


<div style="border: 1px solid black; margin: 0px auto; padding: 5px; width: 200px; text-align: left; background-color: yellow; font-size: 12px;">
<table style="text-align: left; width: 200px;" border="0" cellpadding="2" cellspacing="2"><tbody><tr style="font-family: Verdana;"><small></small>
<td style="width: 200px; font-weight: bold; background-color: rgb(0, 204, 204); color: rgb(255, 255, 255);"><small>Rencana Blog</small></td><small></small></tr><tr style="font-family: Verdana;"><small></small>
<td style="width: 200px; background-color: rgb(204, 204, 204);"><small>Bina Kotak Dengan Html</small></td><small></small></tr><tr style="font-family: Verdana;"><small></small>
<td style="width: 200px; background-color: rgb(204, 204, 204);"><small>Bina Table Dengan Html</small></td><small></small></tr></tbody></table>
</div>

Kod-kod berwarna maroon mewakili kotak luar.
Kod-kod berwarna hijau mewakili row atau baris pertama untuk table.
Kod-kod berwarna biru mewakili row atau baris kedua untuk table.
Kod-kod berwarna hitam mewakili row atau baris ke tiga untuk table.