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 teladan 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 menunjukkan warna latar apa saja yang anda inginkan ke dalam tag HTML div. Cara menggunakannya sangat gampang cukup tambahkan instruksi berikut ke dalam instruksi awal tadi. Lihat teladan berikut ini:

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

ISI DARI DIV HTML TAG

</div>

Kode #9fc5e8 yang anda lihat di atas ialah instruksi warna yang saya inginkan, yaitu biru muda. Anda dapat mengganti instruksi #9fc5e8 dengan instruksi 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 instruksi 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 instruksi background tadi dengan titik koma (;). Lihat teladan di bawah:

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

ISI DARI DIV HTML TAG

</div>

Kode warna #0000CC dapat anda ganti berdasarkan instruksi yang ada pada website di atas tadi. Tapi kita lihat dulu hasil edit style pada instruksi 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 instruksi style padding untuk itu: Kodenya ialah padding: atas kanan bawah kiri. Sebagai teladan lihat pengaturan komplemen di bawah, tapi sebelumnya kita tutup dulu instruksi 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 instruksi 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 instruksi 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 instruksi font-family: Nama Font harus anda tambahkan ke dalam instruksi 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 instruksi font-size: ukuran yang anda inginkan. Ukuran dapat dalam px atau pt. Tapi kali ini saya akan menggunakan satuan pixel (px). Lihat teladan 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 instruksi <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 instruksi ini? Jika ya maka anda perlu menambahkan instruksi 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 instruksi warna dari situs di atas. Coba kalau kita tambahkan instruksi 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 risikonya 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 instruksi 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 teladan 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 instruksi 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 instruksi di atas. Hasilnya menyerupai teladan 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 dikala menciptakan artikel atau hendak memasukkan widget HTML/JAVASCRIPT. Mudah-mudahan ini dapat membantu anda.

Share this post