HTML DIV tag - Kode HTML tag DIV

Tag DIV adalah salah satu tag dalam kode html yang paling banyak digunakan. Tag DIV merupakan sebuah "wadah" bagi semua dokumen (teks, image dll) dan di dalam tag DIV biasanya berisi sekaligus beberapa elemen html/tag html. Dalam desain web/blog, tag DIV bahkan menjadi wadah (memuat) keseluruhan halaman-halaman blog yang didalamya juga berisikan tag div dan beberapa tag yang lain. Sekalipun tag DIV secara khusus mempunyai karakter/sifat bawaan seperti "display:block", namun sifat-sifat ini dapat dirubah menggunakan kode css.
Dalam penggunaanya, beberapa attribute atau properti css harus ditambahkan agar tag DIV mampu berfungsi sesuai dengan apa yng diharapkan. Dalam bentuk yang paling sederhana anda dapat membuat boks/kotak dengan memanfaatkan tag DIV.

Contoh:

<div style="width:700px;height:30px;background:lightblue;border:5px solid blue;margin:20px auto;"></div>
Tag DIV di atas akan membentuk sebuah box seperti berikut:

Tag DIV menjadi box/wadah bagi beberapa tag lain

<div style="float:left;background:lightblue;border:5px solid green;margin:20px 0;width:400px;padding:10px;font:normal 12px Arial;">
<h3>Rally Paris Dakkar 2012</h3>
<p><img src="https://lh5.googleusercontent.com/-dpt6NkTcje0/UC15GCSzNkI/AAAAAAAAALM/eUcP1uANIqc/s128/red-car-200x143.jpg" width="100" height="62" style="border:2px solid #888;margin:0 20px 5px 0;padding:0;float:left;" />Di tahun 2012 ini, Rally terbesar dan terhebat se-jagad raya "Jelajah - Mars" mendapat kejutan besar dengan keikutsertaan 20 perally dari Indonesia. Ke 20 perally asal Indonesia ini bukanlah peserta yang dapat disepelekan karena mereka sudah berpengalaman dalam berbagai ajang rally tingkat nasional dan antar planet. Salah satu perally Indonesia yang dipandang mampu memberi surprise pada rally terhebat tahun ini adalah <a href="http://gubhugreyot.blogspot.com" target="_blank" title="Panduan, tutorial, tips & trik blogger - blogdetik">'cah ndeso kluthuk</a> atau yang biasa dipanggil <a href="http://bestbloggerhack.blogspot.com" target="_blank" title="Best Blogger Hacks">gubhugreyot</a></p></div>
Hasil kode html di atas adalah seperti di bawah ini:

Rally Paris Dakkar 2012

Di tahun 2012 ini, Rally terbesar dan terhebat se-jagad raya "Jelajah - Mars" mendapat kejutan besar dengan keikutsertaan 20 perally dari Indonesia. Ke 20 perally asal Indonesia ini bukanlah peserta yang dapat disepelekan karena mereka sudah berpengalaman dalam berbagai ajang rally tingkat nasional dan antar planet. Salah satu perally Indonesia yang dipandang mampu memberi surprise pada rally terhebat tahun ini adalah 'cah ndeso kluthuk atau yang biasa dipanggil gubhugreyot

Attribute yang dapat digunakan pada tag DIV

  • align : align="left", align="right", align="center", align="justify"
  • class : Untuk membuat class harus menggunakan css.
    <style type="text/css">
    .my-class{
            width:200px;
            height:100px;
            background:red;
            margin:10px;
    }
    </style>
    
    <div class="my-class">Content here!</div>
  • id : Untuk membuat id harus menggunakan css.
    <style type="text/css">
    .my-id{
            width:100%;
            margin:20 0;
            position:relative;
    }
    </style>
    
    <div id="my-id">Content here!</div>
  • dir : Untuk mengatur posisi elemen teks dalam tag DIV.
    <div dir="rtl">Text here!</div>
    
    <div dir="ltr">Text here!</div>
  • lang : berkaitan dengan penggunaan kode bahasa dan konten.
    <div lang="en">Text here!</div>
    "en" kode untuk bahasa Inggris.
  • style : attribute style berisi properti css dan nilainya.
    <div style="font:normal 1em Arial;padding:10px;line-height:22px;background:#000;color:#eee;border:1px solid blue;margin:20px 0;width:400px;">Text here!</div>
  • title : bisa difungsikan dalam tag DIV namun biasanya sangat jarang digunakan.

Event Attributes dapat digunakan pada tag DIV

Events attribute:
onclick, ondblclick, onmousedown, onmousemove , onmouseout, onmouseover, onmouseup, onkeydown, onkeypress dan onkeyup.
Di bawah telah disertakan demo Tag DIV yang dibangun dengan kode CSS dan tag DIV ini menjadi box bagi beberapa elemen/tag lainnya.

Please click the button to display. Continue with editing code and click to see the results!

3 komentar:

My ProfileC l o s e

FollowerC l o s e