Sleepingcodings - Class dan Id merupakan cara / perantara untuk menghubungkan HTML dengan CSS, namun kalau Author simpulkan Class dan Id ini seperti nama panggilan, jadi kita memberi nama pada tag menggunakan Class atau Id, Penggunaan Class dan Id sangatlah penting loh. Oh iya, maksud dari nama panggilan pada HTML disini ialah element" HTML dapat diberi nama panggilan dengan class atau id, untuk apa sih di beri nama ?, yah agar mudah manggilnya donk :v, kayak kalau kamu punya pacar nama nya si A kamu manggilnya sayank kan biar gampang :v, nah kegunaannya agar dapat di manipulasi menggunakan CSS atau JavaScript. Bayangan sederhananya jika anda memiliki lima buah kotak, semua kotak yang anda miliki berawarna biru, kemudian teman" ingin mengubah kotak yang pertama, nah disinilah letak kegunaan class dan id, untuk memberikan nama panggilan pada kotak teman" agar bisa diubah dan kotak yang lain tidak akan berubah.
MENGENAL Class dan Id pada HTML
Nah, Class dan Id punya perbedaan loh, bahkan perbedaannya sangat mencolok, yaitu Perbedaan Class dan Id adalah Class dipanggil pada CSS atau JavaScript dengan menggunakan tanda titik ".", dan Id dipanggil pada CSS atau JavaScript dengan tanda pagar "#". Nah kelebihan dari Class yaitu Class dapat memberikan nama pada banyak element HTML dan dapat dipanggil sekaligus, sedangkan Id hanya dapat bekerja pada satu nama panggilan saja, maksudnya satu nama panggilan Id hanya bisa diberikan pada satu element saja, perhatikan pada contoh berikut untuk memberikan pemahaman lebih tentang Class dan Id pada HTML ini.
index.html
<!DOCTYPE html>
<html>
<head>
<title>sleepingcoding.blogspot.com</title>
<link rel="stylesheet" type="text/css" href="style.css"
</head>
<body>
<h1>Memperdalam pengenalan Class dan Id pada HTML<br/>sleepingcodings.blogspot.com</h1>
<!-----------Contoh Penggunaan Class ---------------->
<div class="kotak">kotak 1</div>
<div class="kotak">kotak 2</div>
<div class="kotak">kotak 3</div>
<!------------Contoh Penggunaan Id------------------->
<div id="kotak">kotak 4</div>
<div id="kotak">kotak 5</div>
</body>
</html>
style.css
h1 {
color: purple;
font-family: sans-serif;
text-align: center;
}
.kotak {
padding: 50px;
width: 100px;
color: #fff;
margin: 10px;
background: purple;
}
#kotak {
width: 400px;
color: #fff;
background: blue;
padding: 50px;
}
dan coba jalankan pada browser, maka hasilnya akan seperti gambar dibawah ini :
 |
| Gambar 1.1 Mengenal Class dan Id pada HTML |
 |
| Gambar 1.2 Mengenal Class dan Id pada HTML |
 |
| Gambar 1.3 Mengenal Class dan Id pada HTML |
 |
| Gambar 1.4 Mengenal Class dan Id pada HTML |
Nah, perhatikan contoh gambar diatas, kotak1, kotak2, dan kotak3 termasuk Div Class yang kita beri nama panggilan "kotak", dan sedangkan kotak 4 dan 5 kita beri nama panggilan pada Div Id-nya yaitu "kotak" juga, maka perbedaannya di sini akan tampak sangat amat jelas, bahwa Class bisa dipanggil sekaligus, ini di buktikan dengan kotak 1,2 dan 3 diberi nama panggilan Class yang sama yaitu Class "kotak", dan kotak 4 dan 5 kita beri nama panggilan dengan Id "kotak".
KESIMPULAN
Nah, mudah-mudah gampangkan pada tutorial kali ini, Inti sari dari Tutorial kali ini ialah penggunaan dan perbedaan div id dan div class, Nah div Id dan div Class ini perbedaannnya ialah Class dapat memberikan nama pada banyak element HTML dan dapat dipanggil sekaligus, sedangkan Div Id hanya dapat bekerja pada satu nama panggilan saja. Nah itu tadi tutorial tentang penggunaan Div Class dan Id. Sekian Tutorial kali ini, ikuti Tutorial selanjutnya ya Friends.
Semoga Bermanfaat ~
Wassalamu'alaikum Wr. Wb
No comments:
Post a Comment