Pengenalan HTML 4
Pengaturan Letak HTML

oleh: Suryo Adhy Chandra, ST

Pengaturan Letak HTML

Kalian semua pasti mengenal aplikasi Microsoft Word yang sering dipakai untuk melakukan pengetikan laporan. Ketika kita membuat penataan atau styling dalam Microsoft Word, kita bisa membagi 1 halaman menjadi beberapa bagian dengan letak dan fungsi masing-masing menggunakan tools yang namanya textbox.

Sebagai contoh pada gambar di bawah ini:

Pada gambar di atas, ada 4 bagian, yaitu:

Di dalam HTML kita bisa melakukan pembagian tersebut dengan menggunakan tag div, dengan penggunaan: <div>Texbox yang akan kita isikan</div>

Di dalam tag <div></div> bisa terdapat banyak <div></div> yang bisa disesuaikan dengan kebutuhan.

Tag <div></div> berbeda penggunaan dengan tag <p></p> yang sudah kita pelajari sebelumnya. Perbedaan ini adalah di dalam hal penggunaannya saja.

Di dalam tag <div></div> pun bisa digabungkan dengan beberapa tag sebelumnya yang sudah kita pelajari, antara lain tag <p></p>, kemudian tag <img src=''> dan tag-tag lain dalam html.

Yukkkk segera kita praktekkan!

Analogi: div sebagai kotak penyimpan

Bayangkan kamu pindah rumah dan memasukkan barang ke dalam kardus. Kardus pertama berisi buku, kedua berisi pakaian, ketiga berisi alat dapur. Tiap kardus diberi label agar mudah dicari dan ditata. Tag <div> bekerja persis seperti kardus itu: ia tidak punya tampilan khusus, tetapi menjadi wadah untuk mengelompokkan elemen yang saling berhubungan. Setelah dikelompokkan, satu kelompok bisa diberi warna, jarak, dan posisi sekaligus.

Perbedaan div dengan p

Tag <p> punya makna: ia adalah sebuah paragraf teks. Sementara <div> tidak punya makna bawaan, sehingga ia hanya dipakai sebagai pembagi area. Karena div boleh berisi apa saja, mulai dari paragraf, gambar, hingga div lain, ia menjadi tag yang paling sering muncul pada kerangka halaman modern.

Contoh: membagi halaman menjadi bagian-bagian

<div>
    <h2>Selamat Datang di Sekolahku</h2>
</div>
<div>
    <p>Kami memiliki laboratorium komputer dan perpustakaan.</p>
    <img src="gedung.jpg" alt="Gedung sekolah" width="300">
</div>
<div>
    <p>Hubungi kami di tata usaha setiap hari kerja.</p>
</div>

Pada contoh tersebut halaman dibagi tiga kelompok: bagian judul, bagian isi, dan bagian kontak. Bila kelak kamu ingin mengganti warna latar bagian kontak saja, cukup beri kelas pada div ketiga tanpa menyentuh bagian lain. Inilah alasan mengelompokkan elemen sejak awal.

div bersarang

Sebuah div boleh berisi div lain. Struktur seperti ini sering dipakai pada kartu produk: kartu luar membungkus gambar, judul, dan tombol, sedangkan tiap bagian di dalamnya bisa punya div sendiri. Supaya kode tidak membingungkan, tulis indentasi (menjorok ke dalam) di setiap tingkat, dan beri komentar penutup misalnya <!-- akhir kartu --> pada struktur yang panjang.

Kesalahan yang sering terjadi

Ringkasan

div adalah pembagi area tanpa makna bawaan. Ia mengelompokkan elemen agar mudah ditata, bisa bersarang, dan menjadi dasar tata letak dengan CSS maupun Bootstrap.

Latihan

  1. Mengapa div disebut seperti kardus penyimpan?
    Lihat jawabanKarena ia mengelompokkan beberapa elemen dalam satu wadah sehingga bisa ditata bersama-sama.
  2. Buat dua div: satu berisi judul "Menu", satu lagi berisi paragraf "Nasi goreng".
    Lihat jawaban<div><h2>Menu</h2></div><div><p>Nasi goreng</p></div>
  3. Apa akibatnya bila satu </div> terlupa?
    Lihat jawabanElemen sesudahnya ikut terbungkus di dalam div yang belum tertutup, sehingga tata letak dan gaya bisa bergeser atau tumpang tindih.
  4. Sebutkan satu tag semantik pengganti div untuk bagian paling bawah halaman.
    Lihat jawaban<footer>.
← Kembali Ke Daftar Pelajaran HTML