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.

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..

Hai,, pa kabar nich?? Dah lama gak posting nich, dua minggu lebih kayaknya ya, sorry ya, hehehe…

O iya,, selamet hari raya idul fitri ya,,mohon maaf lahir dan batin. Telat ya ngucapinnya,, gak pa2 lah daripada gak sama sekali,,

Kemaren-kemaren khan (kemaren kapan ya?) saya dah sedikit apa itu layout dan juga alasan-alasan membuat layout web tanpa tabel, masih inget khan? Klo dah lupa coba baca aja lagi postingan yang ini dan ini.

Nah,,Kali ini saya akan coba bahas tentang cara ngebuat layout web tanpa menggunakan tabel. Tapi mungkin lebih ke praktek aja ya (langsung ke contoh). Selengkapnya..