Senin, 03 Oktober 2011

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.

Tidak ada komentar:

Posting Komentar