Belajar Dasar HTML Part 18 - Mengenal Fungsi Id dan Class Pada HTML

Sebelumnya kita sudah belajar banyak hal tentang meta tag pada HTML dimana kegunaanya untuk memberikan informasi pada mesin pencarian. Sekarang kita akan memperdalami lagi tutorial html yaitu Selector id dan class, silakan lihat penjelasannya dibawah ini.

Mengenal Fungsi Id dan Class Pada HTML

Pada pembuatan website atau aplikasi web kita sangat membutuhkan selector id dan class dimana maksud singkatnya ialah? Kalau menggunaan selector id hanya bisa digunakan satu kali pada halaman web. Jadi kalau kita memiliki satu id bernama content maka pada satu halaman web hanya bisa digunakan satu kali, tidak bisa kita menggunakan id dua kali dalam satu halaman pemakaian. Sedangkan class bisa digunakan beberapa sekaligus dalam satu halaman misalnya kita memiliki class bernama column, kita ingin dalam satu kolom halaman memiliki 3 kolom maka dengan cara menggunakan tersebut kita bisa menggunakannya beberapa sekaligus dan tidak memiliki batas.

Kalau sudah mengerti perbedaan penggunakan atribut id dan class selanjutnya kita menggunakan sedikit contoh. Kali ini kita membuatnya dengan bantuan css, silakan copy kode dibawah ini dan pratekan sendiri.

Kode Selector id dan class

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mengenal Fungsi id dan class</title>
    <style media="screen">
      .column {
        color: green;
      }
      .container {
        background-color: #149d90;
      }
      #content {
        color: yellow;
        text-align: center;
      }
      #list {
        background-color: #149d90;
      }
    </style>
  </head>
  <body>
    <!-- Klik id -->
    <a href="#link">Klik</a>
    <!-- CLass Column -->
    <div class="column container">Menggunakan Column 1</div>
    <div class="column">Menggunakan Column 2</div>
    <div class="column container">Menggunakan Column 3</div>
    <!-- Mengguji Id -->
    <p id="link">Posisi 1</p>
    <!-- Id Column -->
    <p id="content list">Menggunakan Content 1</p>
    <p id="content">Menggunakan Content 2</p>
    <p id="content">Menggunakan Content 3</p>
    <p id="content list">Menggunakan Content 4</p>
    <!-- Mengguji Id -->
    <p id="link">Posisi 2</p>
  </body>
</html>

Maka hasil di browser seperti dibawah ini.

Pada saat di uji coba penggunaan class bisa menggunakan berkali kali dalam selectornya dan sedangkan id hanya bisa sekali saja. Pada gambar diatas kenapa kita bisa mengubah warna teks menjadi kuning dengan dua kali menggunakan id yang sama. Kemungkinan besar kita dapat menyimpulkan bahwa selector id tidak dapat digunakan dua kali nama pada selectornya dan sedangkan class bisa menggunakan dua kali. Hal yang paling penting ialah penggunaan sebenarnya pada selector dimana pada tag <a> kita membuat link dimana link tersebut akan ke posisi satu atau dua. Masing masing memiliki id yang sama, cara mengujinya kecilkan ukuran browser hingga posisi 1 dan 2 menghilang kebawah selanjutnya tekan klik maka yang terjadi ialah pindah ke posisi 1 bukan kedua. Dalam penggunaan id saya biasanya untuk membuat scroll dengan menempatkan id tertentu dalam suatu halaman website.

Category HTMLTags Dasar HTML

Belajar Dasar HTML Part 18 - Mengenal Fungsi Id dan Class Pada HTML

Mengenal Fungsi Id dan Class Pada HTML

Mari Tinggalkan Komentar Batalkan balasan