Cara Membuat Label Menggunakan HTML

Cara Mudah Membuat Label di HTML - Hai Sobat, pada kesempatan ini saya akan memposting tentang cara membuat label yang keren di HTML. Label atau sering kita sebut dengan jenis atau cap biasanya sering kita gunakan untuk mengelompokan sesuatu. Misalkan seperti HTML, C++ dan C# termasuk dalam label bahasa pemrograman. Sedangkan seperti Photoshop dan Coreldraw masuk kedalam label desain grafis. Untuk pembuatan label di HTML sangat mudah sekali karena tidak memerlukan aplikasi, kita bisa memanfaatkan HTML Editor yang tersedia di blog ini.

Cara membuat label di HTML Editor
Cara membuat label di HTML Editor



Daftar Isi :

1. Alat dan Bahan

2. Cara Pembuatan

3. Cara Pengujian


Alat dan Bahan


Alat dan bahan yang digunakan adalah sebagai berikut :
1. HTML Editor


Cara Pembuatan


1. Buka halaman HTML Editor disini.

2. Salin skrip dibawah ini ke HTML Editor apabila ingin membuat label horizontal.


<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.label {
  color: white;
  padding: 8px;
  font-family: Arial;
}
.success {background-color: #04AA6D;} /* Hijau */
.info {background-color: #2196F3;} /* Biru */
.warning {background-color: #ff9800;} /* Jingga */
.danger {background-color: #f44336;} /* Merah */ 
.other {background-color: #e7e7e7; color: black;} /* Abu-ABu */ 
</style>
</head>
<body>

<h1>Label</h1>

<span class="label success">Jaringan Komputer</span>
<span class="label info">Bahasa Pemrograman</span>
<span class="label warning">Desain Grafis</span>
<span class="label danger">Website</span>
<span class="label other">Video Editing</span>

</body>
</html>

3. Jika ingin mengubah label menjadi vertikal, salin tambah kan code <br> di depan <span class seperti dibawah ini.


<h1>Label</h1>

<span class="label success">Jaringan Komputer</span>
<br><br><span class="label info">Bahasa Pemrograman</span>
<br><br><span class="label warning">Desain Grafis</span>
<br><br><span class="label danger">Website</span>
<br><br><span class="label other">Video Editing</span>


Cara Pengujian Code Label di HTML Editor


Untuk pengujiannya sangatlah mudah yaitu tinggal klik "Run" pada HTML Editor maka hasil akan otomatis muncul di kolom bawah. Apabila berhasil maka tampilannya akan seperti dibawah ini :


Cara pengujian skrip label di HTML Editor
Cara pengujian skrip label di HTML Editor


Sekian tutorial tentang cara membuat label di HTML. Semoga sedikit ilmu ini bermanfaat. Selamat mencoba dan sampai jumpa di tutorial berikutnya. Terimakasih telah berkunjung.


Baca Juga :
Guru, Desainer, Programmer

Posting Komentar