Warna dalam HTML

Pada HTML, beberapa tag dapat kita rubah warna nya. Seperti pada tabel, font dsb. Bagaimana sih format warna pada HTML. Jujur nih... yang penulis tahu sih ada dua format, yaitu hexadecimal dan RGB.

1. Hexadecimal.

Hexadecimal terdiri dari 6 digit diawali dengan simbol #. Contoh: #000000, #FF9999, #CC33FF. Mungkin kalau anda lihat, anda akan bingung. Apa sih angka dan huruf-huruf tersebut.

Oke saya jelaskan....

Sebenarnya dari 6 digit itu, dibagi 3 jadi 2 digit per warna. Maksudnya 2 digit pertama menentukan warna merah, 2 digit kedua menentukan warna hijau dan 2 digit terakhir menentukan warna biru. Digit tersebut dapat diisi dari 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. Dimana 0 merepresentasikan warna gelap dan F warna terang.

Contoh:

untuk warna merah terang tuliskan #FF0000. Seperti anda lihat, dua digit pertama diisi FF karena kita ingin membuat warna merah terang. Sedangkan sisanya kita buat 0000 karena warna lainnya tidak perlu.

untuk warna biru agak gelap tuliskan #000099. Dua digit terakhir kita isi 99 karena kita ingin biru agak gelap. Sedangkan empat digit di awal diisi 0000 karena warna lain tidak perlu.

untuk membuat warna hitam: #000000. sedangkan warna putih: #FFFFFF. warna ungu kita dapat buat dengan kombinasi biru dan merah. Jadi tuliskan: #FF00FF. Untuk ungu yang lebih gelap turunkan angka nya, misal #990099.

Berikut warna yang sering dipakai.

#000000 = hitam
#FFFFFF = putih
#FF0000 = merah terang
#00FF00 = hijau terang
#0000FF = biru terang
#FFFF00 = kuning terang
#FF00FF = ungu terang
#00FFFF = cyan
#999999 = abu-abu

masih banyak warna lain yang dapat dibuat dengan kombinasi warna Hexadecimal.

2. RGB.

prinsip nya sama saja dengan hexadecimal, hanya format nya bukan 0-9 dan A-F. Tetapi, dari angka 0 sampai 255.

contoh:

rgb(0,0,0) = hitam
rgb(255,255,255) = putih
rgb(255,0,0) = merah terang
rgb(0,255,0) = hijau terang
rgb(0,0,255) = biru terang
rgb(255,255,0) = kuning terang
rgb(255,0,255) = ungu terang
rgb(0,255,255) = cyan
rgb(150,150,150) = abu-abu

Oke, segitu aja artikel tentang format warna dalam html. C U in another article.... Read More...

Membuat Tabel Dengan HTML 4

Tabel yang kita buat dapat kita atur supaya tampilannya lebih bagus. Apa saja yang dapat diatur? Berikut akan saya berikan beberapa hal yang dapat kita lakukan.

1. Menentukan Lebar Tabel.

untuk menentukan lebar tabel kita hanya perlu menambahkan atribut 'width' pada tag <table>. Dan nilai yang dapat kita isi dapat dalam format 'px', '%' dan format lainnya. Tapi yang penulis tahu dan sering digunakan adalah yang kedua format tadi.

-----------------mulai kode html----------------------

<table width="100%">
<tr><td>Tabel dengan lebar tabel 100%. Lebar tabel akan memenuhi 100% layar atau tempat tabel diletakkan</td></tr>
</table>

<table width="200px">
<tr><td>Tabel dengan lebar tabel 200 pixel. Lebar tabel akan terbentuk sebesar 200 pixel</td></tr>
</table>

-----------------akhir kode html----------------------

2. Menentukan Lebar Kolom.

hampir sama seperti lebar tabel, hanya saja letakkan atribut nya di tag <td>.

-----------------mulai kode html----------------------

<table width="100%">
<tr>
<td width="40%">kolom ini mempunyai lebar 40%</td>
<td width="60%">kolom ini mempunyai lebar 60%</td>
</tr>
</table>

<table width="500px">
<tr>
<td width="300px">kolom ini mempunyai lebar 300 pixel</td>
<td width="200px">kolom ini mempunyai lebar 200 pixel</td>
</tr>
</table>

-----------------akhir kode html----------------------

3. Membuat Jarak Antar Kolom.

kadang data yang ditulis di tabel terlihat terlalu rapat ke pinggir kolom. Atau jarak antar kolomnya yang terlalu rapat. Ini dapat kita edit dengan menggunakan atribut 'cellpadding' dan 'cellspacing' pada tag <table>. Nilai nya cukup memasukkan angka positif saja. 'cellpadding' digunakan untuk membuat jarak data dengan kolom tempat data itu ditulis. 'cellspacing' digunakan untuk membuat jarak antara kolom dengan kolom yang lainnya.

-----------------mulai kode html----------------------

<table width="100%" cellpadding="2" cellspacing="1">
<tr>
<td width="40%">kolom ini mempunyai lebar 40%</td>
<td width="60%">kolom ini mempunyai lebar 60%</td>
</tr>
</table>

-----------------akhir kode html----------------------

4. Membuat Border.

untuk membuat border cukup menambahkan atribut 'border' pada tag <table>. Nilainya cukup masukkan angka positif.

-----------------mulai kode html----------------------

<table border="1">
<tr>
<td>table dengan border 1</td>
</tr>
</table>

<table border="5">
<tr>
<td>table dengan border 5</td>
</tr>
</table>

----------------akhir kode html----------------------

5. Perataan Teks.

untuk melakukan perataan teks, cukup menambah atribut 'align' pada tag <td>. Untuk melakukan perataan vertikal (atas, tengah, bawah) gunakan 'valign'.

-----------------mulai kode html----------------------

<table border="1" width="50%">
<tr>
<td align="left">rata kiri</td>
<td align="center">rata tengah</td>
<td align="right">rata kanan</td>
</tr>

<tr>
<td valign="top">teks diatas teks diatas teks diatas teks diatas teks diatas teks diatas</td>
<td valign="bottom">teks dibawah teks dibawah teks dibawah teks dibawah teks dibawah</td>
<td>teks normal<br>teks normal</td>
</tr>

<tr>
<td valign="top" align="center">teks diatas, rata tengah</td>
<td valign="bottom" align="right">teks dibawah, rata kanan</td>
<td>teks normal<br>teks normal</td>
</tr>

</table>

----------------akhir kode html----------------------

6. Warna pada Tabel.

warna dapat ditambahkan pada tabel, atau pada setiap kolom nya. Tambahkan atribut 'bgcolor' pada tag <table> atau pada tag <td>.

-----------------mulai kode html----------------------

<table border="1" width="50%" bgcolor="#FF0000">
<tr>
<td align="left" bgcolor="#0000FF">rata kiri</td>
<td align="center" bgcolor="0,255,0">rata tengah</td>
<td align="right">rata kanan</td>
</tr>

<tr>
<td valign="top">teks diatas teks diatas teks diatas teks diatas teks diatas teks diatas</td>
<td valign="bottom">teks dibawah teks dibawah teks dibawah teks dibawah teks dibawah</td>
<td>teks normal<br>teks normal</td>
</tr>

<tr>
<td valign="top" align="center">teks diatas, rata tengah</td>
<td valign="bottom" align="right">teks dibawah, rata kanan</td>
<td>teks normal<br>teks normal</td>
</tr>

</table>

----------------akhir kode html----------------------

untuk warnanya, format nya bisa memakai RGB (0,255,0) atau hexadecimal (#000000).

++ Untuk melihat format warna lengkap, silakan lihat artikel saya "Warna dalam HTML".

Saya rasa sudah cukup untuk artikel membuat tabel. Silakan dipelajari kembali ya.... Baiklah.... sampai jumpa di artikel berikutnya. Read More...

Membuat Tabel Dengan HTML 3

Seperti yang saya tulis pada artikel sebelumnya -Membuat Tabel Dengan HTML 2- disini saya akan memberikan cara membuat kolom yang mengambil lebih dari satu baris, atau memakai atribut 'rowspan' pada tag <td></td>.

Rowspan digunakan untuk menggabungkan dua atau lebih baris pada satu kolom.

Langsung saja. Disini kita akan membuat sebuah tabel (tiga kolom, tiga baris) dimana pada kolom pertama akan menggabungkan dua baris, sedangkan kolom yang lain tetap.

-----------------mulai kode html----------------------

<html>
<head><title>Membuat Tabel Dengan Rowspan</title></head>

<body>

<table border="1">

<tr>
<td rowspan="2">baris pertama dan kedua, kolom satu</td>
<td>baris pertama kolom dua</td>
<td>baris pertama kolom tiga</td>
</tr>

<tr>

<td>baris kedua kolom dua</td>
<td>baris kedua kolom tiga</td>
</tr>

<tr>
<td>baris ketiga kolom satu</td>
<td>baris ketiga kolom dua</td>
<td>baris ketiga kolom tiga</td>
</tr>

</table>

</body>
</html>

-----------------akhir kode html----------------------

Jadi, patokannya adalah jumlah baris. Karena kita mau menggabungkan baris bukan kolom seperti pada colspan. Jumlah baris terbanyak adalah tiga. Jadi pada kolom pertama kita tambahkan atribut 'rowspan' dengan nilai dua, karena kita ingin membuat hanya ada dua baris pada kolom pertama. Lalu pada baris kedua, kita lihat bahwa hanya ada dua pasang tag <td></td> karena kolom pertamanya sudah digabung oleh kolom pertama baris pertama.

Saya beri contoh lagi. Kita akan membuat tabel dengan 4 baris dan 3 kolom. Di kolom pertama hanya ada akan 1 baris. Di kolom kedua 4 baris, kolom ketiga ada 3 baris dimana baris kedua dan ketiga digabung.

-----------------mulai kode html----------------------

<html>
<head><title>Membuat Tabel Dengan Rowspan</title></head>

<body>

<table border="1">

<tr>
<td rowspan="4">baris pertama, kedua, ketiga, keempat pada kolom satu</td>
<td>baris pertama kolom dua</td>
<td>baris pertama kolom tiga</td>
</tr>

<tr>

<td>baris kedua kolom dua</td>
<td rowspan="2">baris kedua kolom tiga</td>
</tr>

<tr>

<td>baris ketiga kolom dua</td>

</tr>

<tr>

<td>baris keempat kolom dua</td>
<td>baris keempat kolom tiga</td>
</tr>

</table>

</body>
</html>

-----------------akhir kode html----------------------

Nah, sudah mengerti. Kalau belum ngerti.... gimana ya... yaaaa belajar lagi aja dan perhatikan kode nya dengan baik.

Hasil akhir kedua tabel dapat dilihat dibawah ini:



Oke... pada artikel berikutnya saya akan mencoba memberikan cara bagaimana melakukan pengaturan pada tabel, seperti menentukan lebar, warna background, perataan teks (alignment) dan semacamnya. Insya Allah.... Read More...

Membuat Tabel Dengan HTML 2

Seperti yang saya tulis pada artikel sebelumnya -Membuat Tabel Dengan HTML 1- disini saya akan memberikan cara membuat kolom yang mengambil lebih dari satu baris, atau kolom dengan jumlah berbeda pada tiap baris.

Kita hanya perlu menambahkan suatu atribut pada tag <td>, bukan pada tag </td> nya.

Untuk pertama saya akan menjelaskan atribut pertama, yaitu 'colspan'. Colspan digunakan untuk membuat sebuah kolom bergabung dengan kolom yang disebelahnya, yang berada pada satu baris. Efek yang akan terlihat adalah jika tabel mempunyai lebih dari satu baris, tiap baris akan memiliki jumlah kolom yang berbeda. Misal, kita akan membuat tabel dimana di baris pertama ada dua kolom, di baris kedua ada tiga kolom dan di baris ketiga ada satu kolom saja. Yuuu... langsung aja kita lihat kode nya.

-----------------mulai kode html----------------------

<html>
<head><title>Membuat Tabel Dengan Colspan</title></head>

<body>

<table border="1">

<tr>
<td colspan="2">baris pertama kolom satu</td>
<td>baris pertama kolom dua</td>
</tr>

<tr>
<td>baris kedua kolom satu</td>
<td>baris kedua kolom dua</td>
<td>baris kedua kolom tiga</td>
</tr>

<tr>
<td colspan="3">baris ketiga kolom satu</td>
</tr>

</table>

</body>
</html>

-----------------akhir kode html----------------------

supaya lebih mudah melihat hasilnya, kita tambahkan atribut 'border' dengan nilai '1' untuk melihat kolom dan baris dengan jelas.

Seperti yang anda lihat, tabel ini sebenarnya memiliki tiga baris dan tiga kolom pada masing-masing baris. Tapi kita hanya ingin membuat baris dua saja yang memiliki tiga kolom. Sedangkan baris pertama hanya ada dua kolom dan baris tiga satu kolom.

Pada baris pertama dan kolom pertama kita lihat ada atribut 'colspan' dengan nilai '2'. Ini maksudnya menggabungkan '2' kolom menjadi '1' kolom saja. Sedangkan pada baris pertama kolom kedua dibiarkan normal, karena kita ingin baris pertama ada dua kolom.

Pada baris kedua semua dibiarkan normal, karena kita ingin baris kedua memiliki tiga kolom.

Pada baris ketiga hanya ada satu tag <td></td>, tapi nilai 'colspan' nya '3'. Ini maksudnya menggabungkan tiga kolom jadi satu.

Saya beri contoh lagi, supaya lebih ngerti. Pada contoh di bawah kita akan membuat sebuah tabel dengan tiga baris, di mana baris pertama terdiri dari satu kolom, baris kedua terdiri dari tiga kolom dan baris ketiga terdiri dari empat kolom. Berarti patokan kolomnya adalah empat kolom.

-----------------mulai kode html----------------------

<html>
<head><title>Membuat Tabel Dengan Colspan 2</title></head>

<body>

<table border="1">

<tr>
<td colspan="4">baris pertama kolom satu</td>
</tr>

<tr>
<td>baris kedua kolom satu</td>
<td>baris kedua kolom dua</td>
<td colspan="2">baris kedua kolom tiga</td>
</tr>

<tr>
<td>baris ketiga kolom satu</td>
<td>baris ketiga kolom dua</td>
<td>baris ketiga kolom tiga</td>
<td>baris ketiga kolom empat</td>
</tr>

</table>

</body>
</html>

-----------------akhir kode html----------------------

Jadi, kalau ingin membuat tabel dengan colspan yang perlu diperhatikan adalah jumlah kolom terbesar nya berapa. Contoh diatas jumlah kolom terbesar adalah empat. Jadi saat ingin membuat baris pertama yang hanya terdiri dari satu kolom, maka kita hanya membuat satu kolom dengan satu tag <td></td> dan atribut 'colspan' diisi dengan nilai '4' karena ingin menggabungkan '4' kolom menjadi satu kolom.

Sedangkan pada baris kedua kita ingin memiliki tiga kolom saja. Jadi buatlah tiga kolom dengan tiga pasang tag <td></td>. Lalu letakkan atribut 'colspan' pada kolom yang disuka -pada contoh diletakkan pada kolom terakhir- dan isi nilai atribut 'colspan' dengan nilai '2'. Karena kita menggabungkan dua kolom jadi satu.

Hasil nya dapat anda lihat pada gambar ini.

Bagaimana, sudah ngerti? Untuk artikel selanjutnya saya akan menjelaskan bagaimana cara membuat kolom yang mengambil lebih dari satu baris. Sebagai bocoran atribut yang digunakan pada tag <td> adalah 'rowspan'.

Sampai jumpa pada artikel berikutnya... Read More...

Membuat Tabel Dengan HTML 1

Sekarang, bagaimana cara menampilkan data di situs web dalam bentuk tabel seperti di word processor atau spreadsheet. Caranya tak lain dan tak bukan menggunakan tag table di html. Bagaimana tag nya? Langsung saja....

Membuat tabel dengan html itu gampang-gampang susah, karena tag tabel tidak hanya tag pembuka dan penutup saja. Didalam tag itu ada tag lain untuk membuat kolom dan baris pada tabel.

Untuk membuat tabel dengan satu baris dan satu kolom inilah kode html nya.

-----------------mulai kode html----------------------

<html>
<head><title>Membuat Tabel</title></head>

<body>

<table>
<tr>
<td>isi dari tabel ditulis di sini</td>
</tr>
</table>

</body>
</html>

-----------------akhir kode html----------------------

seperti yang anda lihat, untuk membuat satu tabel dengan satu baris dan kolom diperlukan tiga pasang tag. Yaitu tag <table> dengan penutupnya </table>, <tr> dengan </tr> dan <td> dengan </td>.

Apa sih guna tag-tag tersebut??? Ok, Saya jelaskan.

Tag yang harus ada di awal untuk membuat satu tabel adalah tag <table>. Untuk penutupnya gunakan tag </table>.

Untuk membuat satu baris pada tabel gunakan tag <tr> dan penutupnya </tr> diantara tag <table> </table>.

Untuk membuat satu kolom pada satu baris yang ada pada tabel gunakan tag <td> dan penutupnya </td>, diantara tag <tr> </tr>.

Biar lebih gampang saya beri contoh membuat satu tabel dengan satu baris dan dua kolom.

-----------------mulai kode html----------------------

<html>
<head><title>Membuat Tabel Dengan Satu Baris dan Dua Kolom</title></head>

<body>

<table>
<tr>

<td>isi dari kolom pertama ditulis di sini</td>

<td>isi dari kolom kedua ditulis di sini</td>

</tr>
</table>

</body>
</html>

-----------------akhir kode html----------------------

Dari contoh di atas dapat anda lihat jika ingin menambah kolom pada baris cukup tambahkan tag <td></td> diantara tag <tr></tr>.

Jika ingin menambah baris bagaimana? Lihat kode di bawah.

-----------------mulai kode html----------------------

<html>
<head><title>Membuat Tabel Dengan Dua Baris dan Tiga Kolom</title></head>

<body>

<table>
<tr>

<td>baris pertama, kolom pertama ditulis di sini</td>

<td>baris pertama, kolom kedua ditulis di sini</td>

<td>baris pertama, kolom ketiga ditulis di sini</td>

</tr>

<tr>

<td>baris kedua, kolom pertama ditulis di sini</td>

<td>baris kedua, kolom kedua ditulis di sini</td>

<td>baris kedua, kolom ketiga ditulis di sini</td>

</tr>

</table>

</body>
</html>

-----------------akhir kode html----------------------

Ingat, jumlah tag kolom <td></td> jumlahnya harus sama pada tiap baris. Jika tidak bentuk tabel akan berantakan.

Tapi mungkin anda pernah melihat ada tabel yang kolomnya mengambil lebih dari satu baris. Jadi, kolom tersebut berada di baris pertama sampai baris ketiga misalnya. Atau, pada satu tabel ada baris yang memiliki cuma dua kolom, sementara baris yang di bawahnya memiliki tiga kolom.

Bagaimana cara membuatnya?? Tunggu artikel berikutnya: Membuat Tabel Dengan HTML 2 Read More...