Membuat Website Itu Mudah (Bagian V – Warna & Font)

Warna adalah salah satu elemen yang bisa membuat halaman website menjadi lebih menarik. Namun, penerapannya memerlukan pemahaman tersendiri. Sebaiknya kita memiliki pengetahuan mengenai warna dan efek psikologis yang ditimbulkan oleh adanya warna. Hal ini dapat mempermudah kita dalam memilih warna.

Warna dalam konteks HTML, bisa diterapkan dalam berbagai elemen, seperti warna latar belakang halaman, warna teks, tabel, dsb. Warna dalam hal ini merupakan atribut dari elemen-elemen tersebut. Warna juga memiliki beberapa sistem penulisan, dalam HTML ada dua jenis sistem penulisan yang dapat digunakan, yakni dengan menyebutkan nama warnanya (dalam bahasa Inggris), atau dengan menggunakan kode warna.

Contoh penerapan warna pada halaman HTML adalah sebagai berikut:

<html>
<body bgcolor=”red” >
ISI HALAMAN HTML
</body>
</html>

bgcolor dalam kode di atas merupakan property atau atribut yang dimiliki oleh Tag <body>. Sebagai akibatnya, kita dapat melihat halaman dengan latar belakang berwarna merah.

Dengan demikian, kita bisa menampilkan halaman website dengan warna yang kita inginkan. Caranya adalah, cukup tuliskan atribut warna pada Tag <body> dan sebutkan warnanya di bawah atribut bgcolor. Contohnya: <body bgcolor=”yellow”> akan menghasilkan warna kuning, <body bgcolor=”green”> akan menghasilkan warna hijau, <body bgcolor=”blue”> akan menghasilkan warna biru, dst.

Berikut ini adalah daftar warna yang dapat dituliskan sebagai atribut:

Snow Lightgoldenrodyellow Honeydew Lightslategray
Ivory Palegoldenrod Powderblue Slategray
Beige Khaki Lightblue Darkslategray
Papayawhip Goldenrod Skyblue Black
Blanchedalmond Darkgoldenrod Lightskyblue Dimgray
Bisque Darkkhaki Deepskyblue Gray
Antiquewhite Greenyellow Dodgerblue Darkgray
Oldlace Lawngreen Blue Silver
Floralwhite Chartreuse Medium Lightgrey
Linen Lime Darkblue Gainsboro
Moccasin Limegreen Navy Ghostwhite
Navajowhite Yellowgreen Midnightblue Whitesmoke
Wheat Olivedrab Royalblue White
Peachpuff Olive Cornflowerblue
Burlywood Darkolivegreen Lightsteelblue
Tan Darkgreen Steelblue
Sandybrown Green Darkslateblue
Peru Forestgreen Slateblue
Chocolate Seagreen Mediumslateblue
Sienna Mediumseagreen Mediumpurple
Saddlebrown Mediumspringgreen Blueviolet
Darkred Springgreen Indigo
Maroon Palegreen Darkmagenta
Brown Lightgreen Purple
Firebrick Darkseagreen Darkviolet
Indianred Mediumaquamarine Darkorchid
Rosybrown Aquamarine Mediumorchid
Darksalmon Paleturquoise Thistle
Lightsalmon Aqua Lavenderblush
Salmon Turquoise Lavender
Lightcoral Mediumturquoise Plum
Crimson Darkturquoise Violet
Red Lightseagreen Magenta
Orangered Darkcyan Fuchsia
Tomato Teal Mediumvioletred
Coral Cadetblue Palevioletred
Darkorange Cyan Deeppink
Gold Lightcyan Hotpink
Yellow Aliceblue Pink
Lemonchiffon Ghostwhite Lightpink
Cornsilk Azure Mistyrose
Lightyellow Mintcream Seashell

Warna-warna dengan nama standar tersebut di atas tentu saja sangat terbatas jumlahnya, namun dapat dengan cepat kita ingat karena memiliki arti sesuai dengan namanya. Lebih mudah mengenali dan menghafal warna Turquoise daripada mengingat kode warna #40E0D0 bukan? Dengan demikian kita dapat mengingat warna-warna favorit kita dengan mengenali nama standarnya dalam bahasa Inggris.

Sebenarnya jumlah warna yang dapat dipergunakan pada website sangatlah banyak. Ribuan warna dapat dipergunakan dengan kode warna yang sesuai. Semua warna dapat ditampilkan dengan menggunakan kode warna 6 angka. Sebagai contoh untuk warna Hitam kita dapat menuliskan kode warna #000000, Putih=#FFFFFF, Merah=#FF0000, Hijau=#00FF00, Biru=#0000FF.

Cobalah menuliskan html dengan kode warna yang berbeda-beda menggunakan 6 angka hexadesimal:

<html>
<body bgcolor=”#123456″ >
ISI HALAMAN HTML
</body>
</html>

Hasilnya akan terlihat pada browser body website ditampilkan dengan warna yang berbeda-beda pula.

Kode Warna RGB

Warna yang ditampilkan dengan menggunakan kode warna jumlahnya adalah 256 pangkat 3, atau sama dengan 16.777.216 warna. Jumlah warna sebanyak ini tentu tidak dapat diwakili dengan nama, melainkan menggunakan kode yang terdiri atas 3 komponen warna utama, yakni Merah, Hijau, Biru (RGB = Red, Green, Blue). Masing-masing komponen warna terdiri atas 256 nuansa warna yang perbedaannya sangat kecil. Ketiga komponen ini bersama-sama membentuk warna sebagai percampuran antara ketiganya. Kode untuk warna merah adalah pada dua angka di depan, kode warna hijau pada dua angka berikutnya, dan kode warna biru pada dua angka terakhir. Masing-masing kode warna ditulis dalam kode hexadesimal, dari 00, 01, 02, 03, sampai dengan FA, FB, FC, FD, FE, FF. Oleh karena itu, warna Merah dapat ditulis dengan kode #FF0000, warna Hijau dapat ditulis dengan kode #00FF00, warna Biru dapat ditulis dengan kode #0000FF. Warna-warna lain yang dibentuk sebagai gabungan dari dua atau tiga komponen tadi harus ditulis dengan melibatkan dua atau tiga komponen warna sekaligus, contohnya warna kuning adalah gabungan warna merah dan hijau, dapat ditulis dengan kode #FFFF00, Cyan adalah gabungan biru dan hijau, dapat ditulis dengan kode #00FFFF, Magenta adalah gabungan merah dan biru, dapat ditulis dengan kode #FF00FF. Warna grayscale dari hitam sampai putih dapat ditulis dengan melibatkan tiga komponen warna dengan kode yang sama, misalnya hitam #000000, abu-abu tua #333333, abu-abu #666666, abu-abu muda #999999, abu-abu terang #CCCCCC, putih #FFFFFF.

Semua Tag HTML yang memiliki atribut warna dapat ditulis dengan menggunakan kode warna di atas. Atribut bgcolor pada Tag <body>, atribut color pada Tag <font>, dan pada Tag <table>.

Font untuk Pengaturan Huruf

Untuk pengaturan atribut pada huruf, dapat menggunakan Tag <font> dan ditutup dengan </font>. Contohnya, untuk font jenis Arial, ukuran 3, warna merah, dapat ditulis seperti di bawah ini:

<html>
<body bgcolor=”#CCCCCC” >
Contoh penggunaan tag font:<br>
<font face=”Arial” color=”#FF0000″ size=”3″>
<b>Tulisan ini menggunakan font Arial,
warna merah, ukuran 3.</b></font>
</body>
</html>

Hasilnya ditampilkan sebagai berikut:

Perlu diketahui bahwa font standar yang dipergunakan di internet pada komputer PC adalah: Arial, Times New Roman, Courier New, Georgia, Verdana, dan Geneva. Sedangkan ukuran huruf menggunakan ukuran standar (kode 1, 2, 3, dst), perbesaran (kode +1, +2, +3, dst, larger atau large, x-large, xx-large), dan perkecilan (kode -1, -2, -3, dst, smaller atau small, x-small, xx-small).

Nah, dengan menggunakan Tag HTML yang diketahui, cobalah untuk membuat halaman sebagai berikut:

Font dan Warna pada kenyataannya memegang peran yang cukup penting agar website bisa tampil menarik. Penggunaan font yang berbeda memberikan penekanan bahwa sebuah bagian berbeda dari bagian yang lainnya tanpa harus ditempatkan secara terpisah. Demikian halnya dengan warna, dipergunakan untuk memberikan penekanan yang berbeda pula, semakin tajam dan berani maka akan semakin menjadi pusat perhatian. Namun, harus diperhatikan bahwa semua warna yang dipergunakan haruslah diatur agar tidak kacau balau. Pengaturan warna pada sebuah layout halaman tentu harus memperhatikan seluruh aspek secara baik. Sebagai contoh tata warna pada sebuah website sport tentu akan sangat berbeda dengan website remaja perempuan misalnya. Keserasian warna dapat dipelajari dari kesan yang ingin ditimbulkan pada sebuah tampilan. Gunakan Color Harmony untuk menghasilkan perpaduan yang harmonis.

Kita lanjutkan di topik bahasan selanjutnya. ■

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: