Tuesday, April 4, 2017

Daftar Kode Warna HTML

Kode warna html banyak digunakan untuk memperindah tampilan pada penulisan-penulisan kode html. Ada banyak kode warna html yang biasa digunakan, namun untuk mengetahui kode warna saya mencoba memberikan aplikasi berbasis javascipt untuk menampilkan kode warna html.


Kode warna html


Pilih warna favoritenya:

Click "lihat kode" untuk melihat kode warna yang dipilih.



KODE WARNANYA ADA DI BAWAH INI :





pada aplikasi itu kita tinggal memilih kode warna apa yang mau kita ketahui, tinggal memilih jenis warnanya lalu kita lihat kodenya.

Untuk penulisan kode tersebut bisa kita gunakan dalam pembuatan background tulisan maka kode htmlnya seperti di bawah ini
<font color="#0000ff">tulisan ini berwarna biru</font>
 sehingga hasilnya dari kode itu adalah


tulisan ini berwarna biru

Untuk membuat tombol atau button dengan kode warna yang berbeda dapat mencoba menggunakan kode di bawah ini

<!DOCTYPE html>
<html>
<head>
<style>
.btn {
    border: none;
    color: white;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
}

.success {background-color: #4CAF50;} /* Green */
.success:hover {background-color: #46a049;}

.info {background-color: #2196F3;} /* Blue */
.info:hover {background: #0b7dda;}

.warning {background-color: #ff9800;} /* Orange */
.warning:hover {background: #e68a00;}

.danger {background-color: #f44336;} /* Red */
.danger:hover {background: #da190b;}

.default {background-color: #e7e7e7; color: black;} /* Gray */
.default:hover {background: #ddd;}
</style>
</head>
<body>

<h1>Alert Buttons</h1>

<button class="btn success">Kode warna #4CAF50</button>
<button class="btn info">kode warna #2196f3</button>
<button class="btn warning">Kode warna #ff9800</button>
<button class="btn danger">Kode Warna #f44336</button>
<button class="btn default">Kode warna #e7e7e7</button>

</body>
</html>


dan hasilnya adalah seperti di bawah ini
 










 Nah itulah cara mengetahui kode warna pada html, semoga bisa bermanfaat. selamat mencoba!.

0 komentar: