SCRIPT KIDDIES - Class dan ID, sesuai dengan yang dijelaskan pada tutorial seebelumnya di belajar HTML Part 16 : Menghubungkan HTML Dengan CSS dijelaskan bahwa class dan id sangat penting. leh sebab itu pada tutorial kali ini akan dijelaskan apa itu Class dan ID pada HTML, dan apa perbedaan antara class dan id pada HTML.
Class dan ID bisa dibilang sebagai penanda pada HTML, maksud penanda disini adlaah element - element HTML dapat diberi tanda dengan class dan id . Untuk apa diberi tanda? agar dapat di manipulasi menggunakan css dan javascript. Bayangan sederhananya jika sobat memiliki 5 buah kotak, semua kotak yang sobat miliki warna biru, kemudian sobat ingin merubah kotak ke 3 saja tanpa mengganti yang lain. Disinilah kita menggunakan Class dan ID, untuk memberikan tanda atau nama pada kotak sobat agar bisa diubah dan kotak yang lain tidak akan berubah.
MENGENAL CLASS DAN ID PADA HTML
Perbedaan dari class dan id adalah class dipanggil pada CSS atau Javascript dengan menggunakan tanda titik ".", dan id dipanggil pada CSS atau Javascript dengan tanda pagar "#", ada kelebihan disini untuk class, yaitu class dapat diberikan pada banyak element HTML dan dapat dipanggil sekaligus, sedangkan ID hanya dapat bekerja pada satu penandaan saja, maksudnya satu nama id hanya bisa diberikan pada satu element saja, perhatikan contoh berikut untuk memberikan pemahaman kepada sobat.
Berikan nama index.htm
<!DOCTYPE html>
<html>
<head>
<title>Mengenal Class dan Id pada HTML | www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Mengenal Class dan Id pada HTML<br/>www.malasngoding.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>
</body>
</html>Berikan nama style.css
h1{
color: red;
font-family: sans-serif;
text-align: center;
}
.kotak{
padding: 50px;
width: 100px;
color: #fff;
margin: 10px;
background: pink;
}
#kotak{
width: 400px;
color: #fff;
background: green;
padding: 50px;
} 
Perhatikan contoh diatas, kotak 1, kotak 2 kita beri tanda dengan class yang kita beri nama "kotak", dan kotak 4 kita beri tanda id yang beri nama kotak juga. maka perbedaanya disini akan tampak, bahwa class bisa dipanggil banyak sekaligus, ini dibuktikan kotak 1 dan dua 2 diberi tanda class yang sama yaitu kotak, dan kotak 3 kita ber tanda dengan id kotak. Perlu diingat class dipanggil dengan tanda titik "." dan id dipanggil dengan tanda pagar "#" . Sekian penjelasan terakhir Belajar HTML semoga bermanfaat sebagai bahan belajar sobat semua. Sekian Terima Kasih
EmoticonEmoticon