Pada beberapa artikel saya sebelumnya misalnya tentang membuat layout dan membuat menu, saya selalu menggunakan tag div di kode HTMLnya, nah sebenernya apa sih gunanya tag div itu??

div itu singkatan dari division, tag ini merupakan block element yang berguna untuk menggabungkan atau membuat group tag-tag/element-element baik itu block ataupun inline element yang ada di dalam tag div itu.

Misalnya

<div id=”header”>
<h1>Judul</h1>
<p>Deskripsi</p>
</div>

Nah, tag h1 dan p yang ada di dalam tag div di atas itu menjadi satu group yang idnya itu header. Secara default, tag div yang ditulis di atas tag div yang lain, ketika ditampilkan di browser juga berada di atas tag div yang di bawahnya. Makanya ketika membuat layout tanpa tabel, di CSSnya kita memakai property float untuk membuat tag div itu berada di kanan atau kiri tag div yang lain.

Ada lagi temennya tag div, yaitu tag span. Tag span ini sama-sama membuat group tag yang ada di dalamnya, tapi karena span merupakan inline element, jadi yang di group juga cuman inline element juga…

Oke… kali ini saya akan bahas tentang inline element dan block element pada HTML, apa itu??

Sebenernya element-element pada HTML itu terbagi dua jenis yaitu ada yang merupakan inline element dan juga ada yang block, apa bedanya? Hmm… saya jelasin satu-satu ya…

Pertama yang inline element dulu, dari namanya dah keliatan khan?? Hehe… inline element itu adalah element pada HTML yang cuman sebaris, nah lho bingung khan?? pokoknya ya gitu dech,, gak boleh protes , yang termasuk inline element itu contohnya tag-tag <a></a>, <em></em>, <span></span>, <cite></cite> dll deh…hehe…

Nah, beda halnya dengan yang block element, yang ini lawannya yang tadi, berarti gak cuman sebaris, hehe… yang termasuk block element contohnya tag-tag <div></div> , <blockquote></blockquote> , <table></table>, <p></p>, <h1></h1> dan sebagainya…

Makanya di dalam block element boleh di taruh block element lagi atau inline element, sedangkan di dalam inline element gak boleh di taruh block element, cuman bisa di taruh inline element juga. Contohnya :

<div>
<h1>Contoh 1</h1>
<p>ini boleh dilakukan</p>
</div>

<span><h1>ini tidak boleh</h1></span>

<span><a>ini boleh</a></span>

<h1><p>Yang ini boleh</p></h1>

Dah ngerti khan?? tambahan, element-element tersebut, di CSS bisa dirubah bentuknya yang tadinya inline bisa jadi block dengan property display.

Udah hampir dua bulan blog ini gak keurus,,hehe… maafkan aku ya, soalnya beberapa bulan terakhir terutama bulan desember kemaren tugas-tugas kuliah menumpuk, fyuh… waktuku bener-bener tersita buat ngerjain tugas-tugas itu… Buat yang komen, tapi belum di tanggapi maaf juga ya,,hehe…

O iya,,mulai hari ini blog ini ganti template juga… untuk saat ini sih tampilan terbaiknya baru bisa dinikmati di browser opera,firefox,safari dan IE 7 ke atas, untuk IE 6 ke bawah sedang dalam tahap penyesuaian, untuk google chrome gak tau soalnya belum dicoba, widthnya juga saya kecilin dari 965px ke 750px, jadi yang resolusi monitornya 800 x 600 masih bisa melihat blog ini full tanpa scroll ke samping…

Mungkin hari ini cuman bisa posting ini doank,,masih ada urusan laen, hehe… sok sibuk banget…

Kemaren saya dah posting tentang cara ngebuat layout tanpa tabel, dan juga cara ngebuat menu horizontal. Nah, sekarang kita coba gabungin menu yang dah kita buat dengan layout yang udah kita buat juga. Selengkapnya..

Horizontal menu tau khan?? Contohnya klo di blog ini tuh menu yang ada di pojok kanan atas. Jadi kita akan coba buat menu kayak gitu dengan CSS (tapi sederhana dulu ya).

Sebenernya sich cara untuk ngebuat menu kayak gitu gak pake CSS juga bisa, contohnya aja kamu bisa pake flash, trus bisa juga pake HTML aja. Tapi yang lebih banyak di pakai untuk saat ini ya yang pake CSS, karena katanya sich lebih search engine friendly. Selengkapnya..