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

Lirik Sholwat Nurul Musthofa

Sholawat Nurul Musthofa Nurul Musthofa Nurul Musthofa Mala Al-Akwaan Mala Al-Akwaan Habibi Muhammad Muhammad Muhammad Khoiril Mursalin Allahul Jalal Athokal Jamal Allahul Jalal Athokal Jamal Ya Syamsal Kamal Ya Nurol ’Aini Nurul Musthofa Nurul Musthofa Mala Al-Akwaan Mala Al-Akwaan Habibi Muhammad Muhammad Muhammad Khoiril Mursalin Kafaka Fadhlan Fil ’Ulal A’laa Kafaka Fadhlan Fil ’Ulal A’laa Danafatadalla Khobal Khusain Nurul Musthofa Nurul Musthofa Mala Al-Akwaan Mala Al-Akwaan Habibi Muhammad Muhammad Muhammad Khoiril Mursalin Ya Allah Ya Badii’ Balighna Jamii’ Ya Allah Ya Badii’ Balighna Jamii’ Hadhrotasyafi Khoiri Tsaqolain Nurul Musthofa Nurul Musthofa Mala Al-Akwaan Mala Al-Akwaan Habibi Muhammad Muhammad Muhammad Khoiril Mursalin Ya Khoiro Mu’ti Ausin Sholati Ya Khoiro Mu’ti Ausin Sholati Lisirridzati Nuril Kaunain Nurul Musthofa Nurul Musthofa Mala Al-Akwaan Mala Al-Akwaan Habibi Muhammad Muhammad Muhammad Khoiril Mursalin ...
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