Tutorial belajar dasar HTML : 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>
|
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.
|
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>
|
Hasilnya:
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.
