Kodewebsite akan membahas fungsi dari tag <div>, Serta bagaimana cara pembuatan tag div pada HTML. Tag ini sangat diperlukan dalam html, Karena tag div seringkali dipakai dalam design layout atau mempercantik halaman web dengan CSS.
Apa Fungsi dari Tag Div ini ?
Tag div berfungsi seperti struktur bangunan, membuat tembok atau penghalang untuk memisahkan bagian ruangan seperti kamar tidur, kamar mandi, atau ruangan tamu.
Jika Digambarkan Seperti ini :
<div>Kamar tidur</div>
<div>kamar mandi</div>
<div>Ruang Tamu</div>
Bagaimana Cara Membuat Tag Div Dalam HTML
Seperti pada kode diatas bahwa tag div diawali dengan kode “<div>” dan diakhiri dengan kode “</div>”.
Pada kode tag div terdapat atribut penting yaitu “id” atau “class”, Penggunaan id lebih tinggi dari class. Artinya yaitu jika kita pasang properti “id” untuk kamar tidur, Maka “class = bantal/kasur/ranjang”.
Jadi class adalah bagian dari id, Berikut ini contoh penulisan atribut id dan class :
<div id=”kamar_tidur”>
<div class=”bantal”>Bantal</div>
<div class=”kasur”>Kasur</div>
<div class=”ranjang”>ranjang</div>
</div>
Tag div ini sering dipakai untuk menghubungkan CSS dan HTML. Maka dari itu Pemakaian tag div, akan mempermudah mendesign halaman website. Lalu bagaimana menerapkan tag div dalam File HTML ?, Silahkan ketikan kode berikut dalam notepad atau text editor yang kamu punya :
<html>
<head>
<title>Membuat tag div</title>
</head>
<body>
Berikut penggunaan div id untuk kamar tidur dan ruang tamu disertai classnya<br/>
<div id="kamar_tidur">
<div class="bantal">Ini Bantal</div>
<div class="kasur">Ini Kasur</div>
<div class="ranjang">Ini Ranjang</div>
</div>
<div id="ruang_tamu">
<div class="kursi">Ini kursi</div>
<div class="meja">ini meja</div>
</div>
<br/><br/>
Berikut penggunanan div id untuk rumah dan classnya<br/>
<div id="Rumah">
<div class="km_tidur">Kamar tidur</div>
<div class="km_mandi">kamar Mandi</div>
<div class="rg_tamu">ruang Tamu</div>
</div>
<br/><br/><br/>
Nama class atau id bisa sama, digunakan agar kode css yang digunakan lebih sedikit. Namun penggunaan ini hanya boleh dipakai jika design layout sama persis<br/>
<div id="kamar">
<div class="keren">Kamar tidur</div>
<div class="keren">kamar Mandi</div>
<div class="keren">ruang Tamu</div>
</div>
</body>
</html>
Ketikan Kode tersebut maka hasilnya akan tampak seperti berikut :
Hasil gambar screanshot diatas, semuanya tampak biasa dan tidak ada perubahan. Tapi perhatikan lebih jelas, setelah membuat tag div, kalimat menjadi garis baru. Agar fungsi div ini maksimal, maka kita perlu menggunakan kode css di dalamnya. Mari kita tambahkan kode css dalam tag head html :
<style type="text/css">
#kamar_tidur {border:1px solid black;margin:2px;padding:10px;overflow:hidden;}
.bantal {border:2px solid blue;padding:2px;margin:2px;width:50px;float:left;}
.kasur {border:2px solid red;padding:2px;margin:2px;width:50px;float:left;}
.ranjang {border:2px solid yellow;padding:2px;margin:2px;width:50px;float:left;}
</style>
Masukan kode tersebut dalam html antara tag <head> sperti gambar berikut :
Pada kode diatas, kita hanya menambahkan kode css untuk id kamar_tidur. Berikut hasilnya :
Kita juga dapat menggunakan nama id atau class yang sama misanya seperti berikut :
<div class=kamar>kamar tidur</div>
<div class=kamar>kamar mandi</div>
Sehingga kita hanya perlu menggunakan satu fitur css saja. misalnya :
.kamar {…..fitur css…..}
dengan cara seperti ini maka seluruh class dengan nama kamar, akan tampil dengan bentuk yang sama sesuai dengan fitur css yang dimasukan. Sekian semoga bermanfaat