Lompat ke konten Lompat ke sidebar Lompat ke footer

Menggunakan Atribut Class HTML dan Fungsinya

Pada artikel ini dijelaskan bagaimana peran dari atribut class dalam pemformatan HTML menggunakan kode CSS.


4 Contoh Program Penggunaan Atribut Class pada HTML
Ilustrasi Atribut Class HTML

Sebelum memahami lebih dalam materi tentang Menggunakan Atribut Class HTML dan Fungsinya, terlebih dahulu pelajari materi tentang: Membuat Tanda Centang HTML Menggunakan Atribut Checked [klik], Mendefinisikan Karakter Encoding HTML Menggunakan Atribut Charset [klik], dan Fokus Otomatis HTML Menggunakan Atribut Autofocus [klik].

class pada html:
  • class adalah atribut yang digunakan untuk menentukan satu atau lebih nama class untuk elemen html.
  • atribut class dapat digunakan pada elemen html apapun.
  • nama class dapat digunakan oleh CSS dan JavaScript untuk melaksanakan tugas tertentu untuk elemen dengan nama class spesifik.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

.country 

{

background-color: black;

color: white;

padding: 8px;}

</style>

</head>

 

<body>

 

<h2 class="country">

CHINA

</h2>

<p>

Cina adalah negara dengan

populasi yang banyak.

</p>

 

<h2 class="country">

INDIA

</h2>

<p>

India adalah negara dengan

kaum dalit terbanyak.

</p>

 

<h2 class="country">

UNITED STATES

</h2>

<p>

Amerika adalah negara dengan

jumlah tentara yang banyak.

</p>

 

</body>

 

</html>

Output:

CHINA

Cina adalah negara dengan populasi yang banyak.

INDIA

India adalah negara dengan kaum dalit terbanyak.

UNITED STATES

Amerika adalah negara dengan jumlah tentara yang banyak.




Penjelasan: pada contoh program sebelumnya, adalah contoh elemen CSS style dengan nama class "country".

Menggunakan atribut class pada JavaScript: JavaScript dapat mengakses elemen dengan menentukan nama class menggunakan method getElemenByClassName().

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<script>

function myFunction() 

{

var x = document.getElementsByClassName("country");

for (var i = 0; i < x.length; i++

{x[i].style.display = "none";}

}

</script>

</head>

 

<body>

 

<p>

Klik, maka elemen akan 

disembunyikan.

</p>

 

<button 

onclick="myFunction()">

Hide elements

</button>

 

<h2 class="country">

CHINA

</h2>

<p>

Cina adalah negara dengan 

jumlah populasi terbesar.

</p>

 

<h2 class="country">

INDIA</h2>

<p>

Indika adalah negara dengan 

jumlah kaum dalit terbanyak.

</p>

 

<h2 class="country">

UNITED STATES</h2>

<p>

Amerika adalah negara yang 

damai.

</p>

 

</body>

 

</html>

Output:

Klik, maka elemen akan disembunyikan.

CHINA

Cina adalah negara dengan jumlah populasi terbesar.

INDIA

Indika adalah negara dengan jumlah kaum dalit terbanyak.

UNITED STATES

Amerika adalah negara yang damai.




Menggunakan multiple classelemen HTML dapat memiliki lebih dari satu nama class, dimana setiap nama class harus terpisah oleh spasi.

Contoh:

<!DOCTYPE html>

<html>

 

<style>

.country 

{

background-color: black;

color: white;

padding: 10px;}

 

.middle 

{

text-align: center;}

</style>

 

<body>

 

<h2 class="country middle">

CHINA

</h2>

 

<h2 class="country">

INDIA

</h2>

 

<h2 class="country">

UNITED STATES

</h2>

 

</body>

 

</html>

Output:

CHINA

INDIA

UNITED STATES




Penjelasan: Ketiga header memiliki nama class "country", tetapi pada penambahannya, CHINA juga memiliki nama class "middle", yang membuat teks menjadi rata tengah.

Menggunakan class yang sama pada tag yang berbeda: perbedaan tag seperti <h2> dan <p>, dapat diberikan nama class yang sama dan dapat berbagi style yang sama.

Contoh:

<!DOCTYPE html>

<html>

 

<style>

.country 

{

background-color: black;

color: white;

padding: 10px;}

</style>

 

<body>

 

<h2 class="country">

CHINA

</h2>

 

<p class="country">

Cina adalah negara yang besar.

</p>

 

</body>

 

</html>

Output:

CHINA

Cina adalah negara yang besar.




Penjelasan: Meskipun dua elemen tidak memiliki tag name yang sama, tetapi elemen tersebut dapat memiliki nama class yang sama dan mendapat style yang sama pula.

6 komentar untuk "Menggunakan Atribut Class HTML dan Fungsinya"

  1. Bagaimana cara membuat class pada html?

    BalasHapus
    Balasan
    1. Untuk memilih elemen dengan class tertentu pada html, ketik karakter titik (.), yang diikuti dengan nama class. User juga dapat menentukan bahwa hanya elemen HTML tertentu saja yang dapat terpengaruh oleh kelas yang telah dibuat tersebut.

      Hapus
  2. Apa perbedaan antara atritbut ID dan atribut CLASS pada HTML?

    BalasHapus
    Balasan
    1. Perbedaan antara atribut ID dan atribut Class pada html, adalah atribut ID bersifat unik hanya alam satu halaman tertentu saja, dan paling banyak dapat diterapkan pada satu elemen dalam dokumen html, sedangkan class dapat diterapkan paa beberapa elemen dalam dokumen html.

      Hapus
  3. Apa yang dimaksud dengan class pada html dan css?

    BalasHapus
    Balasan
    1. Class CSS merupakan atribut yang digunakan untuk mendefinisikan sekelompok elemen HTML guna diterapkan suatu pemformatan unik tertentu ke dalam elemen tersebut melalui kode CSS. Grup ini dapat berisi lebih satu jenis elemen ataupun lebih. Atribut class tidak memengaruhi makna semantik dari dokumen HTML itu sendiri.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -