Cara Membuat Label Menggunakan HTML
Yosa AP
---
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 |
Daftar Isi :
Alat dan Bahan
Alat dan bahan yang digunakan adalah sebagai berikut :
1. HTML Editor
1. HTML Editor
Baca Juga : Cara Membuat Kartu Identitas Menggunakan HTML
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 |
Baca Juga : Cara Membuat Flip Card Menggunakan HTML
Sekian tutorial tentang cara membuat label di HTML. Semoga sedikit ilmu ini bermanfaat. Selamat mencoba dan sampai jumpa di tutorial berikutnya. Terimakasih telah berkunjung.
Posting Komentar
Posting Komentar