Cara Membuat kelas di HTML

Dengan elemen kelas html memungkinkan membalut atau mem-block element dan menandai nya dengan berupa nama. Sehingga memungkinkan untuk kemudahan dalam penggunaan javascript dan CSS. Penggunaan kelas menggunakan atribut class=”nama_kelas”. Atau id=”nama_kelas” Dan di mulai dari <div> dan di tutup dengan </div>.

Apa beda id dan class ?

Bedanya adalah saat pemanggilannya atau penggunaannya. Jika menggunakan kelas class. Maka kelas tersebut bisa di pangggil berulang-ulang atau bisa digunakan berkali kali dengan syarat nama class nya harus sama. Dan id hanya bisa di gunakan sekali saja.

Berikut adalah penggunaan dari kelas html.

Element div adalah element khusus berfungsi sebagai pem-block area tertentu (di tengah2 tag <div></div>) sehingga lebih mudah dalam menandai nya dan mengatur nya sesuai kehendak. Untuk menentukan area yang mau di block pastikan area tersebut berada di tengah tag <div> … </div>

<html> <head> <style type="text/css"> .kelas_pertama{ background: red; width:400px; height:300px; color:#fff; } </style> </head> <body> <div class="kelas_pertama"> <h1> SELAMAT DATANG</h1> <br/> </div> </body> </html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<html>   <head>    <style type="text/css">       .kelas_pertama{               background: red;               width:400px;               height:300px;               color:#fff;       }    </style>   </head>   <body>        <div class="kelas_pertama">             <h1>SELAMAT DATANG</h1><br/>        </div>   </body> </html>

Cara Membuat kelas di HTML

Pada contoh di atas bisa perhatikan .saya membuat sebuah kelas dengan nama kelas_pertama. Dan saya mengatur style pada kelas kelas_pertama dengan css. Mengatur warna background,lebar,tinggi dan warna text. Sahabat SEKOLAH-WEB bisa mengembangkan div dan css nya sesuai dengan kebutuhan dan kreatifitas.untuk tutorial CSS nya sendiri akan kita bahas pada tutorial CSS selanjut nya.

Dan berikut adalah contoh penggunaan id dan class untuk kelas html.

<head> <style type="text/css"> .kotak{ background: red; width:100px; height:100px; } .kalimat{ color:blue; } #nama{ color:yellow; } </style> </head> <body> <div class="kotak"> </div> <br/> <div class="kotak"> </div> <h3 id="nama"> nama saya adalah maun syah</h3> <h1 class="kalimat"> SELAMAT DATANG</h1> <br/> <h1 class="kalimat"> DI WEBSITE SAYA</h1> <br/> <h1 class="kalimat"> BELAJAR HTML</h1> <br/> <h1 class="kalimat"> KELAS DI HTML</h1> <br/> </body>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<head>    <style type="text/css"> .kotak{ background: red; width:100px; height:100px; } .kalimat{ color:blue; } #nama{ color:yellow; }    </style> </head> <body>     <div class="kotak">     </div><br/>     <div class="kotak">     </div>     <h3 id="nama">nama saya adalah maun syah</h3>     <h1 class="kalimat">SELAMAT DATANG</h1><br/>     <h1 class="kalimat">DI WEBSITE SAYA</h1><br/>     <h1 class="kalimat">BELAJAR HTML</h1><br/>     <h1 class="kalimat">KELAS DI HTML</h1><br/> </body>

Membuat kelas di html

Pada contoh di atas saya membuat kelas class dengan nama kalimat dan saya
gunakan berkali-kali dan kelas id dengan nama “nama” hanya bisa di gunakan
sekali. dan terdapat perbedaan saat menggunakan class dan id, yaitu untuk
kelas class menggunakan . (titik) untuk memanggilnya. Dan untuk id
digunakan #(pagar).
Coba di perhatikan di bagian css