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

Download Avast Premier 2019 v19.1.2 Full Lisense Key (2037) Terbaru

Download Avast Premier Full Version Crack Terbaru Hay Juragan - kali ini saya akan membagikan software lagi nih gan. software yang akan saya bagikan yaitu avast premier 2019  gan .sobat semuanya ada yang belum tau avast? tenang aja  gan ,saya disini akan memberi sedikit bocoran nih wkwkw. Avast adalah sebuah software antivirus yang sudah sangat terkenal nih  gan  baik itu di kalangan pengguna pc. software ini berbasis windows ya  gan  semua windows bisa  gan  mulai dari windows 7 sampai 10 pun bisa. ada juga untuk platform linux dan mac. meskipun avast sekarang ini bisa  Juragan  download secara gratis namun avast juga menyediakan juga produk yang advanced loh  gan , jadi ada yang versi gratis dan ada yang berbayar ya sob.buat sobat yang sudah khatam versi gratisnya ada baiknya mencoba software ini terlebih dahulu sebelum membelinya. Disini  Juragan  bisa menggunakan avast premier yang terbaru secara lengkap ya  gan  sudah full fitur secara gratis dengan license softwa
Post a Comment
Read more

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

Mengenal Sistem NFT (Nutrient Film Technique) Hidroponik Untuk Bisnis

S.M.H Official - Hidroponik adalah budidaya menanam dengan memanfaatkan air tanpa menggunakan tanah dengan menekankan pada pemenuhan kebutuhan nutrisi bagi tanaman. Kebutuhan air pada hidroponik lebih sedikit daripada kebutuhan air pada budidaya dengan tanah. Hidroponik menggunakan air yang lebih efisien, jadi cocok diterapkan pada daerah yang memiliki pasokan air yang terbatas. Hidroponik pada era sekarang menjadi cara menanam tanaman yang sedang naik daun. Cara ini digemari karena untuk menanam tumbuhan tidak lagi diperlukan tanah dan lahan yang luas. Dengan memakai cara menanam hidroponik, maka Anda tidak perlu lagi memusingkan diri akan menanam di mana, karena Anda bisa menanam di mana pun. Anda bisa menggunakan bahan bekas dan bisa menggantungkannya di tembok. Tidak hanya itu saja, media bertanam menggunakan air ini bisa mengasah kreativitas Anda untuk mengolah dan menciptakan media baru untuk bercocok tanam. Dengan menanam memakai cara hidroponik, maka hasil panen akan lebi
Post a Comment
Read more