Belajar HTML Part 18 - Atribut Class dan Id

Menggunakan Atribut Class

Atribut class bisa juga disebut sebagai pengelompokan elemen-elemen dalam HTML. Atribut class digunakan untuk mengelompokan dan menentukan style atau tampilan pada elemen HTML. Atribut class bisa dipakai berulangkali pada dokumen HTML. Dengan kata lain, sebuah nama class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada halaman web.

Atribut class dipakai untuk memudahkan proses pemanggilan di CSS ataupun di Javascript. Cara pemanggilan atribut class ini dilakukan dengan cara menuliskan tanda titik “.”, ini berlaku di CSS dan Java Script.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
<style>
.nama_kota{
    color: white;
    background-color: lightskyblue;
    padding: 10px;
}
</style>
</head>
<body>

<h2>Pada contoh ini, semua elemen memiliki class yang sama</h2>

<h2 class="nama_kota">Kota Gorontalo</h2>
<p>Kota Gorontalo adalah Ibukota Provinsi Gorontalo</p>

<h2 class="nama_kota">Palu</h2>
<h2 class="nama_kota">Manado</h2>
<p>Palu adalah Ibukota Provinsi Sulawesi Tengah</p>

</body>
</html>

Hasilnya:

Tips: Atribut class dapat digunakan pada setiap elemen HTML.

Multiple Class

Multiple class di HTML artinya elemen HTML boleh memiliki lebih dari satu nama class, masing-masing nama class harus dipisahkan dengan spasi.

Berikut merupakan contoh elemen style dengan nama kelas "kota", dan elemen style dengan nama kelas "besar":

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<style>
.kota{
  background-color: lightskyblue;
  color: white;
  padding: 10px;
} 
.besar{
  text-align: center;
}
</style>
<body>

<h2 class="kota besar">Kota Gorontalo</h2>
<h2 class="kota">Palu</h2>
<h2 class="kota">Manado</h2>

<p>Ketiga header tersebut mempunyai nama class "kota", serta Kota Gorontalo ditambah dengan nama class "besar" dan juga memiliki perataan teks ke tengah</p>

</body>
</html>

Hasilnya:

Class Sama, Tag Berbeda

Tag yang berbeda, seperti <h2> dan <p>, dapat memiliki nama class yang sama dan dengan demikian berbagi gaya yang sama:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<style>
.kota{
  color: white;
  background-color: lightskyblue;
  padding: 10px;
} 
<p class="kota">Kota Gorontalo adalah Ibukota Provinsi Gorontalo</p>
</style>
<body>

<h2 class="kota">Kota Gorontalo</h2>

<p>Bahkan jika kedua elemen tersebut tidak memiliki nama tag yang sama, namun kedua elemen tersebut memiliki nama kelas yang sama, dan memiliki tampilan yang sama.</p>

</body>
</html>

Hasilnya:

Menggunakan Atribut Id

Atribut id digunakan untuk menentukan style pada bagian yang unik dalam elemen-elemen HTML. Unik maksudnya adalah satu nama id hanya bisa digunakan satu kali pada sebuah halaman. Apabila satu nama id digunakan lebih dari satu kali pada sebuah halaman, maka style hanya akan diterapkan pada id yang pertama saja.

Atribut id dipakai untuk memudahkan proses pemanggilan di CSS ataupun di Javascript. Cara pemanggilan atribut id ini dilakukan dengan cara menuliskan tanda pagar atau hastag “#”, ini berlaku di CSS dan Java Script.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
<style>
#header {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
} 
</style>
</head>
<body>

<h2>Atribut Id</h2>
<p>Gunakan CSS untuk menata elemen yang memiliki id "header":</p>

<h1 id="header">Welcome</h1>

</body>
</html>

Hasilnya: