Belajar HTML Part 4 Perbedaan Class & ID

Belajar HTML Part 4 Perbedaan CLass & ID

Assalamualaikum Wr. Wb.

Bertemu kembali dengan saya orang Gantenk Hehehe. Nah langsung saja pada kesempatan kali ini kita akan membahas tentang perbedaan selektor "ID" & "Class" di dalam HTML

PENGERTIAN

ID dan Class yang sering kita temui dalam setiap elemen website sebenarnya dapat diartikan sebagai variabel, yaitu sebuah nama yang mempunyai isi atau nilai, atau bisa juga diartikan sebagai nama dari elemen, ya walaupun ada sendiri property "name" yang khusus mengatur nama dari elemen tersebut. Tapi kedua selektor tersebut memiliki fungsinya masing-masing.

ID

• Selector ID adalah selector yang digunakan untuk memanggil sebuah elemen yang telah dibuat sebelumnya. Selector ID hanya bisa memanggil satu elemen pada halaman website. Dan cara penggunaanya memiliki beberapa syarat berikut.

1. Pemberian ID pada suatu elemen boleh menggunakan kata atau angka apa saja
2. Tidak boleh ada ID lebih dari satu
3. Tidak boleh diawali oleh angka
4. Tidak boleh mengandung special characters (~ ! @ # $ %)

CLASS

• Selector Class adalah selector yang hampir sama dengan selector ID. Tapi selector Class digunakan untuk grup elemen, atau penamaan yang bisa di gunakan dilebih dari satu elemen. Berikut ini syarat menggunakan selector Class.

1. Pemberian Class pada suatu elemen boleh menggunakan kata atau angka apa saja
2. Class bisa digunakan dilebih dari satu elemen
3. Bisa menggunakan lebih dari satu nama Class pada satu elemen
4. Tidak boleh diawali oleh angka
5. Tidak boleh mengandung special characters

LATAR BELAKANG

Mempelajari lebih lanjut dalam penggunaan fungsi-fungsi selektor di dalam HTML. Dan juga ingin mengimplementasikan dalam sebuah pembuatan website.

MAKSUD & TUJUAN

Memudahkan kita dalam mengatur sebuah element dengan adanya CLASS & ID

Mengurangi penulisan jika ada sebuah tag yang sama fungsinya.

ALAT & BAHAN

• Laptop/PC
• Text Editor
• Browser

LANGKAH KERJA

• Selektor "ID"

Penggunaan selektor ID biasanya diawali dengan tanda "#". Dan cara pemanggilannya adalah dengan cara format id="nama seletctor". Berikut adalah cara penggunaanya.

Selector Id

Pertama buat selector ID terlebih dahulu di tag <style>. Kemudian buat sebuah paragrap dan masukkan selector tersebut dengan format "id". Dan berikut hasilnya.

• Selector CLASS

Penggunaan selector CLASS diawali dengan tanda "." kemudian nama terserah. Dan cara memanggilnya dengan cara class="nama selector". Berikut adalah cara penggunaan selector CLASS.

Pertama sama dengan selector ID, buat terlebih dahulu selectornya di tag <style>. Kemudian masukkan ke dalam sebuah tag dengan perintah "class" nama selector tersebut. Berikut hasilnya.

Itu saja yang dapat saya sampaikan.

Kurang lebihnya mohon maaf.

Syukron

Wassalamualaikum Wr. Wb

Referensi

Buku belajar HTML & CSS Dasar