Sekarang kita sudah masuk ke episode 4 dari seri Tutorial Belajar Cara Membuat Template. Apakah sahabat sudah paham dengan penjelasan-penjelasan saya sebelumnya? Kalau sudah paham apa juga sudah dipraktekkan tugas-tugas yang saya berikan? Bagus sih kalau sudah. Saya harap dari sini kita bisa sama-sama belajar untuk menghasilkan karya template yang sesuai dengan karakter kita masing-masing nantinya. Sampai 5 episode mungkin kita masih akan membahas ilmu dasar dan pengenalan dulu. Baru nanti Insya Allah kalau tutorial ini terus berlanjut, di episode ke-6 dan seterusnya kita akan mulai praktek. Sampai berapa episode sih ini? Pokoknya sampai Anda bisa membuat template! Minimal kalau pun belum bisa bagus, setidaknya bisa buat yang standart. Siip? ^_^

Oh yaa! Gimana hasil dari pengamatan Anda kemarin? Sudah dapat perbedaan-perbedaan antara source input dan output tampilannya? Kalau masih merasa bingung, mudah-mudahan pembahasan berikut ini bisa lebih menambah pemahaman sahabat tentang susunan elemen HTML. Oke, kita lanjut.

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:

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

Elemen Parent dan Child

penggunaan-tag-div-parent-child-template


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:

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

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

Penamaan Value dari Atribut suatu elemen Tag

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.

Untuk class penamaannya lebih bebas. Anda bisa memakai value yang sama untuk beberapa elemen tag sekaligus. Ini lebih seperti jenis atau golongan. Kayak TIM  sepakbola, kita sebut class-nya adalah Brazil dan setiap pemainnya memiliki nama sebagai ID. Kalau Brazil kita kasih warna kuning, seluruh pemain akan memakai jersey kuning. Paham?

*****

Sekarang saya akan kembali memberikan tugas kepada Anda. Saya asumsikan bahwa Anda sudah memiliki bekal dasar tentang HTML. Nantinya kita akan coba untuk membuat susunan layout sebuah template. Secara detail akan kita bahas di pertemuan selanjutnya. Tapi agar Anda tidak bosan menunggu, baiknya Anda coba belajar sendiri dulu. Bagaimana merancang susunan tiap elemen menggunakan beberapa tag HTML. Minimal sampai episode ini Anda harus sudah bisa membaca setiap barisan kode dalam bentuk HTML. 😀

Selamat Belajar!!

Next!! Episode ke-5
Pengenalan Dasar CSS Template Blogger