Lika-liku mengenal sampai mengerti div

Pada saat saya dulu belajar mendesain sebuah website, saya pertamakali kenal dengan microsoft frontpage. Dengan fitur-fitur didalamnya saya mampu membuat website dalam waktu yang singkat. Namun ada hal yang membuat saya tidak puas. Yaitu saya tidak dapat mengerti dan memahami mengapa bila suatu obyek dalam desain itu di save menjadi file .htm. Ternyata setelah beberapa waktu saya mencari jawaban ternyata akhirnya ketemu bahwa browser membaca tampilan file dengan format htm atau html.

Nah dari frontpage saya mulai explorasi dengan editor lain, ketemulah dengan editor yang sangat terkenal yaitu Macromedia Dreamweaver saat itu. Coba dicoba ternyata Dreamweaver mempunyai menu yang banyak dan malah akhirnya saya jadi bingung. Karena tidak mau menyerah akhirnya saya berusaha belajar otak atik sebuah tampilan website dengan Dreamweaver. Disaat itulah ternyata saya berkenalan dengan yang namanya CSS (Cascading Style Sheet).

Disaat belajar membuat tampilan dengan Dreamweaver saya banyak menggunakan cara desain dengan tabel. Namun lama-lama saya mulai berani otak atik desain orang lain yang tampil di website, setelah dibongkar ternyata tidak menggunakan cara desain dengan tabel namun dengan menggunakan div. Nah dari sinilah akhirnya saya mulai belajar mendesain dengan div.

Saya belajar div terbilang menghabiskan waktu yang lebih lama dari pada sistem tabel. Walaupun saya juga sudah mengenal pembuatan desain website dengan tehnik slice. Saya mulai mengenal slice sebenarnya sebelum saya mengenal div. Karena pada saat itu saya sering menggunakan photoshop untuk mendesain sebuah karya. Kebetulan saya dulu bekerja di perusahaan digital printing jadi saya sering menggunakan pengolah gambar yang satu ini.

Nah kembali pada perkenalan dengan div, saya lebih lama belajar div karena dalam div dikenal dengan tiga macam penggunaan CSS. Dan penggunaan CSS merupakan hal yang boleh dibilang mutlak. Berbeda dengan tabel yang parameter penyusunnya bisa kita masukkan secara langsung seperti contoh berikut:

table width=”100%” cellpadding=”5px” border=”1″

Bisa dilihat kode diatas tabel mempunyai elemen penyusun width bgcolor border bahkan masih banyak lagi yang bisa kita pasang misalnya cellpadding daln lain sebagianya. Sedangkan div kita dapat memasukkan sebuah css dengan diinjeksikan secara langsung seperti contoh berikut:

<div style=”width: 800px; margin-left: 5px; text-align: justify;”>isinya disini </div >

atau lewat class seperti berikut:

<div class=”contoh_class” style=”text-align: justify;”> isi div </div>

atau lewat id seperti berikut:

<div id=”contoh_id” style=”text-align: justify;”> isi div</div >

Meskipun ditabel juga dapat dipasang class ataupun id namun, yang saya tekankan adalah pada tabel dapat diisikan nilai pada parameter miliknya. Sedangkan bila menggunakan div kita selalu berhubungan dengan css.

Iklan
Perihal

I am system analyst, my specialization are Web programming, mobile programming also graphic design.

Tagged with: , , , , , , , ,
Ditulis dalam Dasar, Merancang Web
4 comments on “Lika-liku mengenal sampai mengerti div
  1. toms alcore mengatakan:

    wah saya pusing bener…
    boleh liat ga hasil anda yang paling cool,,?
    trims

    • improve mengatakan:

      Ada beberapa website yang sudah saya bangun, sudah hasil jadi yang menggunakan div namun biasa saja gak Cool :). Contohnya seperti pada website stimkka.ac.id. Bila anda menginginkan, saya berpikir membuat tutorialnya secara lengkap, nantikan ya.

  2. novi mengatakan:

    Makasih mas tutorialnya,,cuman kalau boleh minta yang banyak codingnya,,,biar lebih mantap…makasih

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Produk Promo
Desktop Mini PC Intel Core i3
Kategori Tulisan

Klik untuk mendapatkan Update melalui email anda

Bergabunglah dengan 164 pengikut lainnya

%d blogger menyukai ini: