Beranda
Belajar HTML

Belajar HTML Dasar Untuk Pemula #11 - Class dan Id Pada HTML

Belajar HTML Dasar Untuk Pemula #11 - Class dan Id Pada HTML

Apa Itu Class dan Id Pada HTML

Class dan Id, sesuai dengan yang di jelaskan pada tutorial sebelumnya yaitu cara menghubungkan HTML dengan CSS di jelaskan bahwa class dan id sangat lah penting. oleh sebab itu pada tutorial belajar HTML mengenal class dan id pada html ini akan di jelaskan tentang apa sih pengertian dari class dan id pada HTML? dan apa perbedaan dari class dan id pada HTML.

Class dan id bisa di bilang sebagai penanda pada html, maksud penanda di sini adalah element-element html dapat di beri tanda dengan class atau id. untuk apa di beri tanda ? agar dapat di manipulasi menggunakan css atau javascript. bayangan sederhananya jika anda memiliki lima buah kotak, semua kotak yang anda miliki berwarna biru, kemudian anda ingin mengubah warna kotak yang ketiga, nah di sinilah letak kegunaan class dan id, untuk memberikan tanda atau nama pada kotak anda agar bisa di ubah dan kotak yang lain tidak akan berubah.

Perbedaan Class dan Id Pada HTML

Perbedaan dari class dan id adalah class di panggil pada css atau javascript dengan menggunakan tanda titik “.”, dan id di panggil pada css atau javascript dengan tanda pagar “#”, ada kelebihan di sini untuk class, yaitu class dapat di berikan pada banyak element html dan dapat di panggil sekaligus, sedangkan id hanya dapat bekerja pada satu penandaan saja, maksudnya satu nama id hanya bisa di berikan pada satu element saja, perhatikan pada contoh berikut untuk memberikan pemahaman lebih tentang class dan id pada html ini.

File Belajar HTML Dasar.html

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Class dan Id pada HTML</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Belajar Class dan Id pada HTML<br/>anakti3.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>
</body>
</html>


File style.css 

h1{
    color: rgb(0, 0, 0);
    font-family: sans-serif;
    text-align: center;
}
.kotak{
    padding: 50px;
    width: 100px;
    color: rgb(0, 0, 0);
    margin: 10px;
    background: rgb(0, 255, 128);
}
#kotak{
    width: 400px;
    color: rgb(0, 0, 0);
    background: rgb(165, 165, 177);
    padding: 50px;
}


Dan Jika File Belajar HTML Dasar.html di jalankan di browser, maka hasilnya seperi di bawah ini :

Belajar HTML Dasar Untuk Pemula - Class dan Id Pada HTML

Perhatikan pada contoh di atas, kotak 1, kotak 2 dan kotak 3 kita beri tanda dengan class yang kita beri nama “kotak”, dan kotak 4 kita beri tanda dengan id yang kita beri nama kotak juga. Maka perbedaannya di sini akan tampak, bahwa class bisa di panggil sekaligus, ini di buktikan dengan kotak 1,2 dan 3 di beri tanda class yang sama yaitu class kotak dan kotak 4 kita beri tanda dengan id kotak. Selanjutnya pada css juga dapat anda lihat, class di panggil dengan tanda titik “.” dan id di panggil dengan tanda pagar “#”

Mungkin cukup sampai disini dulu mengenai pembahasan mengenai class dan id pada HTML, untuk selanjutnya kita akan belajar lebih lanjut mengenai html dan css ini. Semoga sampai disini teman-teman bisa mengikutinya dengan baik ya, kalo ada yang mau ditanyakan bisa tinggalkan komentar di bawah ini iya teman-teman nanti akan saya jawab satu-satu ko pertanyannya.

Sekian dan terimakasih...

Posting Komentar