Belajar Html Dasar Div Dan Stylenya

Belajar HTML dasar Div -- Div dapat dikatakan sebagai kontainer untuk kode HTML apa saja yang ingin anda tampilkan di dalamnya. HTML Div dapat anda gunakan untuk melaksanakan sedikit modifikasi pada tampilan blog anda. Pengetahuan ini benar-benar standar saja bagi blogger, tapi mungkin beberapa blogger pemula belum mengetahui HTML yang sangat dasar ini. Makara tidak apa-apa kita bahas sedikit.

Bentuk dasar HTML div ialah menyerupai di bawah ini

<div>

ISI DARI DIV HTML TAG

</div>

Jika anda membentuknya menyerupai ini, maka isinya akan standar saja, ukurannya akan mengikuti isi yang ada di dalamnya. Lihat pola yang ada di bawah ini:

ISI DARI DIV HTML TAG

Benar-benar standar saja tampilannya. Makara ada baiknya anda juga mengenal perintah style untuk memberi variasi pada tag ini. Makara mari kita masukkan satu persatu element style untuk melihat perubahan-perubahan yang akan terjadi:

Style background

Style background ini anda gunakan untuk memperlihatkan warna latar apa saja yang anda inginkan ke dalam tag HTML div. Cara menggunakannya sangat gampang cukup tambahkan aba-aba berikut ke dalam aba-aba awal tadi. Lihat pola berikut ini:

<div style="background: #9fc5e8">

ISI DARI DIV HTML TAG

</div>

Kode #9fc5e8 yang anda lihat di atas ialah aba-aba warna yang saya inginkan, yaitu biru muda. Anda dapat mengganti aba-aba #9fc5e8 dengan aba-aba warna apa saja yang anda mau. Jika menginginkan warna lain coba lihat daftar warna HTML hexadecimal di http://www.computerhope.com/htmcolor.htm.

Makara sesudah diberi aba-aba warna, maka tampilannya menyerupai di bawah ini:

ISI DARI DIV HTML TAG

Style Font Color

Mungkin anda kurang nyaman dengan tampilan ini dan ingin memberi warna pada goresan pena di dalamnya. Untuk itu anda dapat menggunakan perintah color:kode warna di dalam style. Tapi sebelumnya tutup dulu aba-aba background tadi dengan titik koma (;). Lihat pola di bawah:

<div style="background: #9fc5e8; color:#0000cc">

ISI DARI DIV HTML TAG

</div>

Kode warna #0000CC dapat anda ganti berdasarkan aba-aba yang ada pada website di atas tadi. Tapi kita lihat dulu hasil edit style pada aba-aba HTML div kita ini.

ISI DARI DIV HTML TAG

Style Padding

Mungkin anda menginginkan semoga goresan pena tidak terlalu melekat pada dinding kontainernya. Anda dapat menggunakan aba-aba style padding untuk itu: Kodenya ialah padding: atas kanan bawah kiri. Sebagai pola lihat pengaturan aksesori di bawah, tapi sebelumnya kita tutup dulu aba-aba color tadi dengan tanda titik koma (;).

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px ">

ISI DARI DIV HTML TAG

</div>

Dari pengaturan di atas anda ingin menaruh "ganjalan" setebal 10px di atas, 20px di kanan, 30px di bawah, dan 25px di kiri. Tampilannya akan berbentuk menyerupai ini:

ISI DARI DIV HTML TAG

Style Text Align

Mungkin kini anda ingin mengatur semoga goresan pena di dalam div rata kiri, rata kanan, sama rata, atau di tengah? Untuk itu anda dapat mengguakan aba-aba text-align:value. Nilai value dapat anda ganti dengan left, right, justify, atau center. Dalam kasus ini saya akan menggunakan nilai center saja... Tapi ingat, ditutup lagi aba-aba sebelumnya dengan tanda epilog ;

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center ">

ISI DARI DIV HTML TAG

</div>

Sekarang mari kita lihat hasilnya...

ISI DARI DIV HTML TAG

Style Font Family

Kalau anda ingin mengubah bentuk font, maka aba-aba font-family: Nama Font harus anda tambahkan ke dalam aba-aba ini. Adapun nama font yang dapat anda gunakan hanya yang disediakan oleh blogger menyerupai Arial, Courier New, Impact; Times New Roman, Verdana, Georgia, dan lain-lain. Ok, ekali lagi anda harus menutup style sebelumnya dengan epilog ; sebelum menambahkan style ini.

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact">

ISI DARI DIV HTML TAG

</div>

Hasilnya dapat anda lihat di bawah ini.

ISI DARI DIV HTML TAG

Style Font Size

Kalau anda merasa perlu memperbesar hurufnya, maka tinggal tambahkan saja aba-aba font-size: ukuran yang anda inginkan. Ukuran dapat dalam px atau pt. Tapi kali ini saya akan menggunakan satuan pixel (px). Lihat pola di bawah.

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px">

ISI DARI DIV HTML TAG

</div>

Hasilnya akan terlihat menyerupai di bawah ini.

ISI DARI DIV HTML TAG

Style Width

Mungkin anda tidak suka kalau ukuran div ini terlalu penuh. Anda dapat mengatur ukurannya dengan menambahkan atribut width: ukuran. Satuannya dapat dalam pixel(px) ataupun persen(%). Kali ini saya akan menggunakan pixel saja.

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px">

ISI DARI DIV HTML TAG

</div>

Hasilnya menyerupai ini:

ISI DARI DIV HTML TAG

Ada juga HTML style height, tapi sama saja pemakaiannya dengan width, jadi terserah kalau anda mau memasukkan atau tidak. Jika anda memasukkan, maka tingginya akan menjadi terbatas. Saya tidak akan membahas style ini di sini.

Center Div
Jika anda ingin div anda berada di tengah-tengah kolom, maka anda dapat mengapitnya dalam aba-aba <center></center>. Seperti berikut ini:

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px">

ISI DARI DIV HTML TAG

</div>

</center>

Hasilnya akan terlihat menyerupai berikut:

ISI DARI DIV HTML TAG

Style Border

Apakah anda ingin memberi garis pembatas pada aba-aba ini? Jika ya maka anda perlu menambahkan aba-aba border: [tebal] [gaya] [warna]. Tebal dapat anda isi dengan angka berapa saja dalam satuan px. Gaya anda dapat isi dengan solid, outset, dotted, dashed, double, dan lain-lain. Sedangkan warna dapat anda isi dengan aba-aba warna dari situs di atas. Coba kalau kita tambahkan aba-aba menyerupai berikut ini:

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px; border: 4px outset #3d85c6">

ISI DARI DIV HTML TAG

</div>

</center>

Maka kesannya akan terlihat menyerupai berikut ini:

ISI DARI DIV HTML TAG

Style Border Radius

Mungkin rekan blogger suka model kapsul dan tidak ingin kotaknya bersudut tajam menyerupai di atas. Anda dapat menambahkan aba-aba border-radius: value, di mana nilai value ini dapat diganti angka dalam satuan pixel. Angka ini menjadi perwakilan jari-jari radius yang anda inginkan. Supaya tidak galau lihat pola di bawah saja.

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px; border: 4px outset #3d85c6; border-radius:15px">

ISI DARI DIV HTML TAG

</div>

</center>

Hasilnya akan terlihat menyerupai di bawah ini:

ISI DARI DIV HTML TAG

Div dengan Bayangan
Kalau anda ingin menambahkan bayangan, maka aba-aba yang perlu anda tambahkan adalah:
-moz-box-shadow: 2px 2px 5px 4px #999; -webkit-box-shadow: 2px 2px 5px 4px #999; box-shadow: 2px 2px 5px 4px #999;
Silahkan mengubah nilai kode-kode di atas sesuka anda untuk bereksperimen. Lalu masukkan ke dalam aba-aba di atas. Hasilnya menyerupai pola di bawah ini:

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px; border: 4px outset #3d85c6; border-radius:15px; -moz-box-shadow: 0px 0px 5px 4px #6fa8dc; -webkit-box-shadow: 0px 0px 5px 4px #6fa8dc; box-shadow: 0px 0px 5px 4px #6fa8dc">

ISI DARI DIV HTML TAG

</div>
</center>

Hasilnya akan terlihat menyerupai berikut ini:

ISI DARI DIV HTML TAG

Ok, itu saja dulu. Silahkan berekperimen sendiri. Jika ada satu atau dua atribut di atas yang kalian hilangkan, maka efeknya juga akan hilang. Sebagai catatan ini dapat anda lakukan ketika menciptakan artikel atau hendak memasukkan widget HTML/JAVASCRIPT. Mudah-mudahan ini dapat membantu anda.