Belajar id dan class pada html

belajar atribut id dan class pada html

Id dan Class adalah salah satu atribut pada HTML yang berguna memberikan nama atribut pada elemen HTML. Atribut id harus unik alias tidak boleh sama dengan yang lainnya sedangkan atribut class dapat diberikan pada banyak elemen. Atribut id dan class sangat berguna jika ingin berinteraksi dengan css, javascript dan bahasa sisi server seperti Php.

Cara pemanggilan atribut id sendiri diawali dengan simbol pagar ( # ) dilanjut dengan nama atributnya dan atribut class sendiri diawali dengan tanda titik ( . ) dilanjut dengan nama atributnya.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <p id="teks-sambutan">Hallo semuanya!</p>
    <p class="teks-penutup">Sampai jumpa!</p>
    <p class="teks-penutup">Sampai ketemu dilain waktu!</p>

    </body>
</html>

Pada contoh diatas kita membuat sebuah paragraf yang diberi atribut id yang dinamai teks-sambutan dan membuat sebuah paragraf yang diberi atribut class yang dinamai teks-penutup. Sekilas contoh diatas hanya membuat sebuah paragraf saja. Silakan Anda lihat contoh contoh dibawah biar tidak bingung.

Contoh atribut id dan class untuk CSS

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    <style>
    #teks-sambutan {
         color: yellow;
         background-color: blue;
    }
    .teks-penutup {
         color: red;
         background-color: yellow;
    }  
    </style>
    </head>
    <body>

    <p id="teks-sambutan">Hallo semuanya!</p>
    <p class="teks-penutup">Sampai jumpa!</p>
    <p class="teks-penutup">Sampai ketemu dilain waktu!</p>

    </body>
</html>

Hasilnya:

Hallo semuanya!

Sampai jumpa!

Samapi ketemu dilain waktu!

Kita menggunakan atribut id dan class untuk memberikan CSS atau style. CSS sendiri kepanjangan dari Cascading Style Sheet yang berguna untuk memberikan style atau gaya pada elemen HTML.

Anda akan belajar CSS lebih dalam dilain waktu.

Contoh atribut id dan class untuk Javascript

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <p id="teks-sambutan">Hallo semuanya!</p>
    <p class="teks-penutup">Sampai jumpa!</p>
    <button onclick="getJavascript()">Merubah teks</button>

    <script>
    function getJavascript() {
        document.getElementById("teks-sambutan").innerHTML = "Hai";
        document.getElementsByClassName("teks-penutup").innerHTML = "Good Bye!!";
    }
    </script>

    </body>
</html>

Hasilnya:

Hallo semuanya!

Sampai jumpa!

Silakan klik tombol diatas maka tulisannya akan berubah.

Kita menggunakan atribut id dan class untuk memberikan event Javascript. Javascript sendiri salah satu bahasa pemograman yang berjalan disisi client.

Anda akan belajar Javascript lebih dalam dilain waktu.

Contoh atribut id untuk belompat

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <a href="#bawah">Melompat ke paling bawah.</a>
    <p>paragraf satu.</p>
    <p>paragraf dua.</p>
    <p>paragraf tiga.</p>
    <p>paragraf empat.</p>
    <p>paragraf lima.</p>
    <p>paragraf enam.</p>
    <p id="bawah">paragraf tujuh.</p>

    </body>
</html>

Hasilnya:

Melompat ke paling bawah.

paragraf satu.

paragraf dua.

paragraf tiga.

paragraf empat.

paragraf lima.

paragraf enam.

paragraf tujuh.

Silakan klik link contoh diatas maka Anda akan melompat ke paragraf paling bawah.

Ringkasan pembelajaran

AtributKegunaanya
idMemberikan nama atribut tunggal pada elemen
classMemberikan nama atribut lebih dari satu pada elemen

Leave a Reply

Your email address will not be published. Required fields are marked *