HTML

Belajar Html Dasar Div Dan Stylenya

 Div dapat dikatakan sebagai kontainer untuk  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. Kaprikornus 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. Kaprikornus ada baiknya anda juga mengenal perintah style untuk memberi variasi pada tag ini. Kaprikornus mari kita masukkan satu persatu element style untuk melihat perubahan-perubahan yang akan terjadi:

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

<div style="background: #9fc5e8">
ISI DARI DIV HTML TAG
</div>

Kode #9fc5e8 yang anda lihat di atas ialah isyarat warna yang saya inginkan, yaitu biru muda. Anda dapat mengganti isyarat #9fc5e8 dengan isyarat warna apa saja yang anda mau. Jika menginginkan warna lain coba lihat daftar warna HTML hexadecimal di http://www.computerhope.com/htmcolor.htm.
Kaprikornus sehabis diberi isyarat 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 isyarat 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 isyarat yang ada pada website di atas tadi. Tapi kita lihat dulu hasil edit style pada isyarat 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 isyarat style padding untuk itu: Kodenya ialah padding: atas kanan bawah kiri. Sebagai pola lihat pengaturan komplemen di bawah, tapi sebelumnya kita tutup dulu isyarat 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 isyarat 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 isyarat 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 isyarat font-family: Nama Font harus anda tambahkan ke dalam isyarat 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 isyarat 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 isyarat <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 isyarat ini? Jika ya maka anda perlu menambahkan isyarat 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 isyarat warna dari situs di atas. Coba kalau kita tambahkan isyarat 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 kesudahannya 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 isyarat 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 gundah 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 isyarat 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 isyarat 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.

Subscribe to receive free email updates:

0 Response to "Belajar Html Dasar Div Dan Stylenya"

Posting Komentar