Belajar HTML dasar Div dan Stylenya

Belajar HTML dasar Div -- Div bisa dikatakan sebagai kontainer untuk kode HTML apa saja yang ingin anda tampilkan di dalamnya. HTML Div bisa anda gunakan untuk melakukan 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. Jadi tidak apa-apa kita bahas sedikit.

Bentuk dasar HTML div adalah seperti di bawah ini

ISI DARI DIV HTML TAG

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

ISI DARI DIV HTML TAG

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

Style background

Style background ini anda gunakan untuk memberikan warna latar apa saja yang anda inginkan ke dalam tag HTML div. Cara menggunakannya sangat mudah cukup tambahkan kode berikut ke dalam kode awal tadi. Lihat contoh berikut ini:

style="background: #9fc5e8"

>

ISI DARI DIV HTML TAG

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

Jadi setelah diberi kode warna, maka tampilannya seperti di bawah ini:

ISI DARI DIV HTML TAG

Style Font Color

Mungkin anda kurang nyaman dengan tampilan ini dan ingin memberi warna pada tulisan di dalamnya. Untuk itu anda bisa memakai perintah color:kode warna di dalam style. Tapi sebelumnya tutup dulu kode background tadi dengan titik koma (;). Lihat contoh di bawah:

style="

background: #9fc5e8; color:#0000cc">

ISI DARI DIV HTML TAG

Kode warna #0000CC bisa anda ganti menurut kode yang ada pada website di atas tadi. Tapi kita lihat dulu hasil edit style pada kode HTML div kita ini.

ISI DARI DIV HTML TAG

Style Padding

Mungkin anda menginginkan agar tulisan tidak terlalu menempel pada dinding kontainernya. Anda bisa menggunakan kode style padding untuk itu: Kodenya adalah padding: atas kanan bawah kiri. Sebagai contoh lihat pengaturan tambahan di bawah, tapi sebelumnya kita tutup dulu kode color tadi dengan tanda titik koma (;).

style="

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

ISI DARI DIV HTML TAG

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 seperti ini:

ISI DARI DIV HTML TAG

Style Text Align

Mungkin sekarang anda ingin mengatur agar tulisan di dalam div rata kiri, rata kanan, sama rata, atau di tengah? Untuk itu anda bisa mengguakan kode text-align:value. Nilai value bisa anda ganti dengan left, right, justify, atau center. Dalam kasus ini saya akan menggunakan nilai center saja... Tapi ingat, ditutup lagi kode sebelumnya dengan tanda penutup ;

style="

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

ISI DARI DIV HTML TAG

Sekarang mari kita lihat hasilnya...

ISI DARI DIV HTML TAG

Style Font Family

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

style="

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

ISI DARI DIV HTML TAG

Hasilnya bisa anda lihat di bawah ini.

ISI DARI DIV HTML TAG

Style Font Size

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

style="

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

ISI DARI DIV HTML TAG

Hasilnya akan terlihat seperti di bawah ini.

ISI DARI DIV HTML TAG

Style Width

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

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

Hasilnya seperti ini:

ISI DARI DIV HTML TAG

Ada juga HTML style height, tapi sama saja pemakaiannya dengan width, jadi terserah jika 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 bisa mengapitnya dalam kode . Seperti berikut ini:

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

Hasilnya akan terlihat seperti berikut:

ISI DARI DIV HTML TAG

Style Border

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

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

Maka hasilnya akan terlihat seperti berikut ini:

ISI DARI DIV HTML TAG

Style Border Radius

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

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

Hasilnya akan terlihat seperti di bawah ini:

ISI DARI DIV HTML TAG

Div dengan Bayangan
Kalau anda ingin menambahkan bayangan, maka kode 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 kode di atas. Hasilnya seperti contoh di bawah ini:

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

Hasilnya akan terlihat seperti 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 bisa anda lakukan saat membuat artikel atau hendak memasukkan widget HTML/JAVASCRIPT. Mudah-mudahan ini bisa membantu anda.