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>

<html>

<head>

.kelas_pertama{

background: red;

width:400px;

height:300px;

color:#fff;

}

</style>

</head>

<body>

<h1>SELAMAT DATANG</h1><br/>

</div>

</body>

</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>

<head>

.kotak{

background: red;

width:100px;

height:100px;

}

.kalimat{

color:blue;

}

#nama{

color:yellow;

}

</style>

</head>

<body>

</div><br/>

</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>

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

Cara Membuat kelas di HTML

Tidak ada komentar:

Posting Komentar

Popular Posts

Welcome

Iklan