pertemuan 10

Apa fungsi dari tag DIV?
Umumnya yang paling sering digunakan untuk membuat suatu susunan Template adalah elemen tag DIV. Jadi, di dalam Body saya jamin Anda akan banyak menemukan DIV. Elemen tag ini bisa kita pakai untuk membuat suatu bagian tertentu yang terpisah dengan bagian yang lainnya.  Atau sebagai bentuk susunan layout. Sifatnya bisa dikatakan untuk menciptakan suatu ruang. Misal, body itu ibaratkan sekolah. Maka kita perlu DIV untuk memetakan dimana lokasi Kelas 4C, dimana lokasi 6A, seberapa luas Lapangan Upacara, posisi WC sebelah mana. Masih ingat pembahas kemarin tentang section? Iyaa hampir sama seperti DIV ini.



Rumus untuk membuat suatu elemen tag:
1
2
3
<namatag   atribut1='value1'   atribut2='value2'   atribut3='value3'  >
....
</namatag>
Mau pakai atribut apa bisa disesuaikan sendiri. Gak dipaksakan juga, mau pakai tiga atribut, bisa dua atau satu. Maksudnya atribut ini apaan? Makanya kemarin saya suruh Anda mampir di tulisan Macam-macam Atribut HTML.

Bisa gak langsung ditutup pada tag pembuka? Iyaa bisa juga sih. Jadinya akan seperti ini:
<div class='separator' style='text-align:center'  />
Bedanya ini dia gak punya isi di dalamnya. Kita bisa pakai untuk keperluan menciptakan ruang kosong, jarak tertentu (seperti spasi/enter), atau bentuk tetap.

Lalu gimana kalau di dalam suatu tag DIV ada tag DIV lagi?
Iyaa gak papah. Istilahnya itu Elemen Induk (Parent) dan Elemen Anak (Child). Di dalam Anak mau buat lagi, iya terserah. Jadi template Anda nanti akan memiliki garis keturunan yang banyak. Ada Nenek, Kakek, Mamak, Uwak, Bapak, Anak, Cucu, Cicit. Hehe..

Bentuknya misalkan seperti ini:
1
2
3
4
5
6
7
8
9
10
11
<div id='uwakbudi' class='rumah'>
    <div id='sibejo' class='kamar'>
     ....
    </div>
    <div id='sipuput' class='dapur'>
        <div id='sidedek'>
         ....
        </div>
        <div class='kompor'/>
    </div>
</div>
Dari sana bisa kita lihat parent-nya adalah uwakbudi maka child-nya adalah sibejo dan sipuput. Lalu sidedek berarti child milik sipuput. Terus kompor gimana? Iyaa sama tingkatnya dengan sidedek. Pengaruhnya apa sih ini? Nanti kalau kita sudah masuk ke pembahasan CSS baru keliatan jelas. Letak dan susunan serta penggunaan atribut sangat berpengaruh pada tampilan. Misalkan, class dapur kita kasih cat dindingnya warna Hitam Pekat (biar gak cepat kotor! hehe). Maka dampaknya adalah elemen child dibawahnya akan sama-sama kecipratan warna hitam juga. Tapi kalau kita cat dinding child langsung, maka parent gak akan berpengaruh apa-apa.

Penggunaan lainnya bisa untuk menciptakan ruang atau tata letak. Prinsipnya adalah setiap elemen tag yang ditulis diatas, secara default akan muncul dibagian atas. Gimana kalau mau buat letaknya kiri dan kanan? Nah, sama kayak nulis juga. Yang tampil di kiri adalah elemen tag yang urutannya kita tulis diatas. Maka, kalau kita mau buat bagian content di sebelah kiri dan sidebar di sebelah kanan tahu sendiri kan gimana urutan penulisan HTML nya? Tapi sampai disini karna belum menggunakan style tampilannya masih berupa baris biasa saja. Kalau tidak ada tulisan di dalam div sibejo maka iyaa tidak akan muncul apa-apa.

Oh yaa, kenapa penulisan struktur elemen HTML itu mesti ada yang menjorok ke dalam ada yang tidak? Sebenarnya tidak ada keharusan untuk cara penulisan ini. Kebanyakan tutorial hanya ingin mempermudah pembaca dalam hal memahami setiap baris kode yang ditulis. Kalau Anda sudah mahir, ada baiknya malah menggunakan satu baris saja untuk setiap elemen. Misal, contoh diatas bisa aja kita tulis begini:
1
2
3
4
<div id='uwakbudi' class='rumah'>
<div id='sibejo' class='kamar'> .... </div>
<div id='sipuput' class='dapur'><div id='sidedek'> .... </div><div class='kompor'/></div>
</div>

Dalam penulisan HTML, fungsi tombol enter maupun tab pada keyboard sama sekali tidak ada artinya. Untuk membuat baris paragrap baru, kita bisa menutup paragrap pertama :
<p> paragrap satu </p>
Lalu lanjutkan dengan paragrap baru dibawahnya. Atau dengan cara menambah tag br seperti ini :
<p> paragrap satu <br/> paragrap dua </p>

Berdasarkan yang sudah Anda pelajari di episode pengenalan HTML dasar sebelumnya, kita bisa menggunakan berbagai macam pilihan Atribut beserta Value-nya pada sebuah Tag tertentu. Untuk apakah atribut ini digunakan? Intinya supaya nanti kita lebih mudah melakukan pengaturan tampilan, untuk memanggil suatu tag tersebut atau bisa dikatakan sebagai alamat. Dan Atribut juga berfungsi sebagai identitas atau nama agar lebih mudah dikenal oleh bahasa web. Misal tag img, kita pasanglah atribut alt untuk menyatakan bahwa gambar satu ini adalah contoh-gambar-template. Tanpa atribut alt mana bisa robot crawler mengetahui itu gambar apa atau foto siapa. Begitu juga tag lainnya.

Apakah ada aturan untuk value yang digunakan? Sebagian ada yang sudah ditetapkan dan beberapa ada yang bisa kita tentukan sendiri. Contoh atribut yang umum dipakai dan bisa disesuaikan sendiri adalah atribut:  id , class , href , title , alt , src , dll.
Khusus untuk atribut ID walaupun value nya bisa kita tentukan, perlu diingat bahwa tidak boleh ada dua ID yang sama dalam satu template. Berarti kita harus buat ID yang unik dan berbeda-beda sama seperti nomor KTP kan? Kecuali jika menggunakan tag conditional seperti pembahasan kemarin.