Skip to main content

Cara Membuat Tabel Warna di HTML

Dalam pewarnaan HTML dan CSS ada 16 warna dasar dan standar(dalam bentuk nama) yang sering digunakan yaitu :
Black
Silver
Gray
White
Maroon
Red
Purple
Fuchsia
Green Lme Olive Yellow Navy Blue Teal Aqua

Mari kita membuat kode HTML dan CSS yang membentuk tabel dari warna-warna di atas !

 Ketikkanlah script di bawah ini :

<!DOCTYPE HTML>
<html>
<head>
<title>bab 3 lat 17</title>
<style type="text/css">

h1 { border-style: ridge;
border-color: rgb(255, 0, 0);
font-size: 24pt;
border-width: 10px;
float: center;
}

h2 { border-style: groove;
border-width: 15px;
border-color: rgb(121, 32, 22);
font-color: rgb(123, 24, 22);
background-color: rgb(22, 66, 77);
padding: 40px;
font-size: 40pt;
float: center;
font-family: Brush Script, Moonlight, Clarendon;
}
</style>
</head>

<body bgcolor="#FF8337" text="#000000">

<h2>PETA WARNA CSS</h2>

<table border="15" cellspacing="4" cellpadding="10"
   bgcolor="#00FFFF" bordercolor="#779944" align="center"
   width="100%">
<tr>
<th colspan="8">
<font size="6"><h1>16 Warna Berdasarkan Nama</h1></font>
</th>
</tr>

<tr bgcolor="755f11">
<th>Warna></th>
<th>HEX<br>RRGGBB</th>
<th>Fungsi<br>RGB(r#,g#,b#)</th>
<th>Fungsi<br>RGB(r%,g%,b%)</th>
<th>Warna></th>
<th>HEX<br>RRGGBB</th>
<th>Fungsi<br>RGB(r#,g#,b#)</th>
<th>Fungsi<br>RGB(r%,g%,b%)</th>
</tr>

<tr>
<th></th>
</tr>

<tr>
<td bgcolor="#000000"><font color="#ffffff">Black</font></td>
<td bgcolor="#000000"><font color="ffffff">000000</font></td>
<td bgcolor="#000000"><font color="#ffffff">(0,0,0)</font></td>
<td bgcolor="#000000"><font color="#ffffff">(0%,0%,0%)</font></td>
<td bgcolor="#008000"><font color="#ffffff">Green</font></td>
<td bgcolor="#008000"><font color="ffffff">008000</font></td>
<td bgcolor="#008000"><font color="#ffffff">(0,127,0)</font></td>
<td bgcolor="#008000"><font color="#ffffff">(0%,50%,0%)</font></td>
</tr>

<tr>
<td bgcolor="#c0c0c0">Silver</td>
<td bgcolor="#c0c0c0">c0c0c0</td>
<td bgcolor="#c0c0c0">(207,207,207)</td>
<td bgcolor="#c0c0c0">(80%,80%,80%)</td>
<td bgcolor="#00ff00">Lime</td>
<td bgcolor="#00ff00">00ff00</td>
<td bgcolor="#00ff00">(0,255,0)</td>
<td bgcolor="#00ff00">(0%,100%,0%)</td>
</tr>

<tr>
<td bgcolor="#808080">Gray</td>
<td bgcolor="#808080">808080</td>
<td bgcolor="#808080">(127,127,127)</td>
<td bgcolor="#808080">(50%,50%,50%)</td>
<td bgcolor="#808000">Olive</td>
<td bgcolor="#808000">808000</td>
<td bgcolor="#808000">(127,127,0)</td>
<td bgcolor="#808000">(50%,50%,0%)</td>
</tr>

<tr>
<td bgcolor="#ffffff">White</td>
<td bgcolor="#ffffff">ffffff</td>
<td bgcolor="#ffffff">(255,255,255)</td>
<td bgcolor="#ffffff">(100%,100%,100%)</td>
<td bgcolor="#ffff00">Yellow</td>
<td bgcolor="#ffff00">ffff00</td>
<td bgcolor="#ffff00">(255,255,0)</td>
<td bgcolor="#ffff00">(100%,100%,0%)</td>
</tr>


<tr>
<td bgcolor="#800000">Maroon</td>
<td bgcolor="#800000">800000</td>
<td bgcolor="#800000">(127,0,0)</td>
<td bgcolor="#800000">(50%,0%,0%)</td>
<td bgcolor="#000080"><font color="#ffffff">Navy</font></td>
<td bgcolor="#000080"><font color="#ffffff">000080</font></td>
<td bgcolor="#000080"><font color="#ffffff">(0,0,127)</font></td>
<td bgcolor="#000080"><font color="#ffffff">(0%,0%,50%)</font></td>
</tr>


<tr>
<td bgcolor="#ff0000">Red</td>
<td bgcolor="#ff0000">ff0000</td>
<td bgcolor="#ff0000">(255,0,0)</td>
<td bgcolor="#ff0000">(100%,0%,0%)</td>
<td bgcolor="#0000ff"><font color="ffffff">Blue</font></td>
<td bgcolor="#0000ff"><font color="ffffff">0000ff</font></td>
<td bgcolor="#0000ff"><font color="ffffff">(0,0,255)</font></td>
<td bgcolor="#0000ff"><font color="ffffff">(0%,0%,100%)</font></td>
</tr>


<tr>
<td bgcolor="#800080">Purple</td>
<td bgcolor="#800080">800080</td>
<td bgcolor="#800080">(127,0,127)</td>
<td bgcolor="#800080">(50%,0%,50%)</td>
<td bgcolor="#008080">Teal</td>
<td bgcolor="#008080">008080</td>
<td bgcolor="#008080">(0,127,127)</td>
<td bgcolor="#008080">(0%,50%,50%)</td>
</tr>


<tr>
<td bgcolor="#ff00ff">Fucshia</td>
<td bgcolor="#ff00ff">ff0ff</td>
<td bgcolor="#ff00ff">(255,0,255)</td>
<td bgcolor="#ff00ff">(100%,0%,100%)</td>
<td bgcolor="#00ffff">Aqua</td>
<td bgcolor="#00ffff">00ffff</td>
<td bgcolor="#00ffff">(0,255,255)</td>
<td bgcolor="#00ffff">(0%,100%,100%)</td>
</tr>

</body>
</html>


 Hasilnya akan menjadi seperti ini :
contoh table

Jika ada script yang kurang jelas bisa ditanyakan di kolom komentar. Semoga ilmu yang dibagikan dapat bermanfaat.Terima kasih !
Labels:

Comments

Post a Comment

Popular posts from this blog

Cara Aktivasi Microsoft Office 2013 atau 2016 dengan KMS Auto Lite

Aktivasi Microsoft Office 2013 atau 2016 Menggunakan KMS Auto Lite Jika anda tidak memiliki product key Misrosoft Office 2013 atau 2016, dan ingin melakukan aktivasi maka disarankan untuk menggunakan tool aktivator. Salah satu tool aktivator Windows dan Office yang cukup populer adalah KMS Auto Lite. Tool ini sangat mudah digunakan, sehingga proses aktivasi Microsoft Office 2013 atau 2016 bisa dilakukan oleh siapa saja. Untuk menggunakan tool ini dan melakukan aktivasi office, silahkan simak langkah-langkah berikut. (Baca juga: Cara Aktivasi Office 2019 Permanen Secara Offline) Jika hendak melakukan aktivasi office 2013 atau 2016 menggunakan KMS Auto Lite, maka anda harus memastikan tool tersebut sudah tersedia dan dapat digunakan pada komputer anda. Jika belum memilikinya, silahkan download KMS Auto Lite disini . Setelah anda download, silahkan ekstrak File KMS Auto Lite tersebut jika masih dalam format rar. Selanjutnya, buka folder hasil ekstrak KMS Auto Lite. Pada fold...
Post a Comment
Read more

Sekilas Riwayat KH. Dachlan Salim Zarkasyi

A. Mengenal KH. Dachlan Salim Zarkasyi ? Beliau adalah ulama’ yang jarang didapatkan sekarang, ilmunya insya Allah tergolong laduni sebab ilmu yang beliau kasad hanya sampai kelas V SD. Plus pesantren selama satu tahun, sedangkan bobot tulisan serta kepeloporannya dibidang pendidikan dan pengajaran Al Qur’an ada pada kelas nasional bahkan insya Allah internasional. Antara lain buah karya beliau itu adalah: 1. Buku Qiro’ati: buku penuntun membaca Al Qur’an, istimewanya buku ini mengajarkan Al Qur’an langsung dengan petunjuk tartilnya, sehingga setelah anak tamat buku Qiro’aty akan otomatis bisa membaca Al Qur’an tartil, meski belum diajari membaca Al Qur’an sama sekali. 2. Taman Kanak-kanak Al Qur’an: suatu lembaga pendidikan model baru tentang pengajaran Al Qur’an untuk usia kanak-kanak (4/5 th). Lembaga ini awalnya dirintis oleh beliau pada tahun 1986, dan sekarang telah menjamur sampai ke manca Negara, sehingga lembaga ini merupakan yang pertama di dunia, sebab belum p...
Post a Comment
Read more

Windows 7 All in One ISO 32/64 Bit Download (Win 7 AIO 2011)

Berikut ini adalah Windows 7 Semua dalam satu Unduh Gratis ISO dalam tautan langsung tersedia untuk pengguna Softlay. Ini mencakup semua Enam Edisi Windows 7 (DVD ISO Asli) dengan paket layanan 1 (SP1) dari MSDN Resmi dengan kunci produk Windows 7. Softlay memberikan unduhan langsung satu klik gratis Windows 7 All in one versi lengkap ISO untuk 32bit dan 64bit. Unduh Untouched Windows 7 AIO ISO (SP1). Informasi Windows 7 AIO 2011 : Package  : Official ISO / Product Key OS       : Windows 7 Language : English Latest Release : 22 Feb 2011 Version : All in One File Size : 3.8 GB Provided By : Microsoft Inc. Fitur Windows 7 AIO 2011 : memiliki sistem operasi yang paling banyak digunakan. memiliki antarmuka yang ramah pengguna. memiliki OS yang sederhana dan mudah digunakan. telah meningkatkan pengalaman pemutaran. memberikan penelusuran web yang disempurnakan. memiliki Windows defender untuk mengamankan PC Anda. mendukung banya...
Post a Comment
Read more