Tag div html merupakan sebuah ‘container’ untuk elemen-elemen html lainnya. Dalam perkembangannya, tag div banyak digunakan pada layout halaman elemen-elemen html bersama elemen-elemen lainnya secara bersamaan. Memang ada cara lain untuk membuat sebuah halaman layout, yaitu menggunakan ‘table.’ Tapi, kebanyakan halaman web dibangun menggunakan ‘div’ ketimbang table.
Yang harus anda lakukan adalah hanya menyatakan atribut style=” “ pada tag div. Berikut ini adalah ilustrasi penggunaan border style pada tag div:
Div style yang digunakan sebagai berikut:
<div style="border:2px solid black;color:black;"></div>
Pada div style, border menggunakan value sebesar 2px, jenis border solid dengan warna black. Color adalah warna dari teksnya. Tambahkan teks, misalnya <Solid Border> sebelum tanda </div>.
Ilustrasi lengkap untuk membuat border lain pada tag div, lihat dibawah ini:
Berikut adalah contoh penggunaan beberapa atribut sekaligus dalam satu div secara bersamaan.
Sumber kode yang digunakan:
<div align="center"style="background-color:yellow;border:6px ridge green;color:blue;height:60px;padding-top:25px;font-size:30px;font-weight:bold;text-shadow: 2px 6px 3px black;">Tes Atribut Div Tag</div>
Penjelasan:
Atribut (warna biru) yang digunakan: align dan style.
Align: * left, center, right (pilih salah satu).
Style: * background-color, border, color (warna font), height (tinggi div), padding-top (jarak dari atas batas div, atau gunakan <style:”clear:both;”> untuk menghilangkan float:left,center,right pada layout), font-size (ukuran font), font-weight (style font: normal, italic, bold dan lain-lain), text-shadow (style bayangan pada teks:3d, drop-shadow, letter-pressed, embossed, inset, outset, blur dan lain-lain). (tambahkan style lain yang anda ketahui jika diperlukan).
Html div tag cukup memuaskan untuk dimodifikasi sebagai alternatif lain penggunaan css pada layout. Lakukan style-style apa saja yang anda anggap menarik dan bertujuan meningkatkan imajinasi disain web / blog anda. Jika kurang jelas, silahkan anda kunjungi quackit.com, html.net, htmlgoodies.com, atau htmldog.com.
No comments:
Post a Comment