HTML Dasar | HTML Lanjutan
Dokumen ini adalah terjemahan dari Adding a touch of style dan mungkin terdapat kesalahan penerjemahan.
Dokumen aslinya dapat di temukan di: http://www.w3.org/MarkUp/Guide/Style
Penerjemah: Edwin Rene
Menambahkan sedikit styleDave Raggett, 8 April 2002.
Ini adalah sebuah panduan singkat mengenai cara untuk memberi style pada halaman Web anda. Panduan ini akan menunjukkan bagaimana menggunakaan Cascading Style Sheets language (CSS) dari W3C dan juga alternatif-alternatif lain menggunakan HTML itu sendiri. Rute ini akan membimbing anda menjauhi segala macam masalah yang disebabkan oleh perbedaan merek dan versi browser.
Agar style sheet dapat digunakan, hal yang penting adalah bahwa markup yang anda miliki bersih dari kesalahan. Sebuah cara mudah dimana anda dapat secara otomatis membersihkan kesalahan markup adalah dengan menggunakan program HTML Tidy. Program ini juga membersihkan markup serta membuatnya lebih mudah dibaca dan diedit. Saya menyarankan anda untuk secara teratur menjalankan Tidy pada markup yang anda edit. Tidy adalah sebuah cara yang sangat efektif untuk membersihkan markup yang dibuat dengan program pembuat website yang ceroboh.
Hal berikut akan mengajarkan anda bagaimana cara:
Mari kita awali dengan menentukan warna dan latar belakang. Anda dapat mebuat hal ini menggunakan elemen STYLE untuk menentukan properti style dari tag-tag yang ada di dokumen:
<style type="text/css">
body { color: black; background: white; }
</style>
Elemen style ditempatkan diantara bagian head di dokumen. Berikut adalah sebuah template HTML menunjukkan dimana elemen diatas seharusnya berada. Anda dapat men-copy dan paste berikut ini kedalam editor sebagai sebuah cara yang mudah untuk mempelajari stylesheet:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> replace with your document's title </title>
<style type="text/css">
body { color: black; background: white; }
</style>
</head>
<body>
replace with your document's content
</body>
</html>
Segala sesuatu yang ada diantara <style> dan </style> ditulis dalam notasi khusus untuk aturan style. Setiap aturan di awali dengan nama tag diikuti dengan serangkaian properti style yang berada diantara kurung { dan }. Dalam contoh ini, ataran berlaku untuk tag body. Dan seperti yang anda dapat lihat, tag body merupakan dasar untuk menetapkan keseluruhan tata dan rupa dari halaman Web anda.
Tiap properti style diawali dengan nama properti, kemudian titik dua dan diikuti nilai dari properti. Bila ada lebih dari satu properti dalam daftar, anda memerlukan titik koma diantaranya untuk membatasi satu properti dengan yang berikutnya. Dalam contoh, ada dua properti - "color" yang menentukan warna dari teks, dan "background" yang menentukan warna dari latar belakang halaman. Saya menyarankan agar selalu menambahkan titik koma bahkan setelah properti terakhir.
Warna bisa dibuerikan berupa nama atau nilai numerik, sebagai contoh rgb(255, 204, 204) yang merupakan "fleshy pink". Ketiga angka tersebut secara berturut turut mewakilkan merah, hijau dan biru dengan kisaran 0 hingga 255. Anda juga dapat menggunakan notasi hexadecimal, warna yang sama juga dapat ditulis sebagai #FFCCCC. Detil lebih lanjut mengenai warna akan diberikan di bagian nanti.
Patut dicatat bahwa elemen style harus ditempatkan pada bagian head documen bersama dengan elemen title. Hal tersebut tidak boleh diletakkan pada bagian dalam body.
Bila anda ingin menggunakan style yang sama untuk beberapa halaman Web pages menggunakan sebuah style sheet yang terpisah patut anda pertimbangkan. Anda dapat melakukannya sebagai berikut:
<link type="text/css" rel="stylesheet" href="style.css">
Tag link harus diletakkan diantara elemen <head> ... </head>. Berikut file HTML dengan sebuah link ke style sheet eksternal:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> replace with your document's title </title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
replace with your document's content
</body>
</html>
Atribut rel dari elemen link harus diberi nilai "stylesheet" untuk memungkinkan browser mengenali bahwa atribut href memberikan (URL) bagi style sheet anda. Sebuah stylesheet dapat terlihat sebagai berikut:
/* style.css - a simple style sheet */
body {
margin-left: 10%; margin-right: 10%;
color: black; background: white;
}
Perlu dicatat bahwa file HTML yang sama dapat dihubungkan ke sebuah style sheet external dan juga dimasukkan sebuah elemen style untuk menentukan style tambahan yang khusus untuk halaman ini. BIla anda menaruh elemen link sebelum elemen style, anda dapat menggunakan cara kedua untuk menimpa aturan style dalam style sheet yang terhubung.
Halaman Web terlihat jauh lebih baik dengan margin yang besar. Anda dapat menentukan margin kiri dan kanan dengan properti "margin-left" dan "margin-right", misalnya,
<style type="text/css">
body { margin-left: 10%; margin-right: 10%; }
</style>
Hal tersebut menentukan kedua margin menjadi 10% dari lebar jendela, dan margin tersebut akan bertambah besar sesuai dengan skala bila anda merubah ukuran jendela..
Untuk membuat heading menjadi lebih terlihat beda, anda dapat membuatnya dimulai dengan menentukan margin untuk body, misalnya.
<style type="text/css">
body { margin-left: 10%; margin-right: 10%; }
h1 { margin-left: -8%;}
h2,h3,h4,h5,h6 { margin-left: -4%; }
</style>
Contoh ini memiliki tiga aturan. Satu untuk bagian badan, satu untuk h1 (diguanakan untuk heading yang paling penting) dan satu lagi untuk sisa dari heading (h2, h3, h4, h5 and h6). Margin untuk heading dapat ditambah pada margin dari body. Nilai negatif digunakan untuk memindahkan awal dari heading ke sebelah kiri dari margin yang ditentukan untuk body.
Dalam bagian berikut, contoh dari aturan style tertentu perlu diletakkan bersama dengan elemen style dalam bagian head dari dokumen (bila ada) atau dihubungkan dengan sebuah style sheet.
Browsers melakukan pekerjaan yang baik dengan white space yang berada di atas dan di bawah heading paragraf dsb sebelum sebuah heading atau paragraf dsb. Dua alasan untuk mengaturnya sendiri adalah anda ingin white space yang lebih banyak sebelum sebuah heading atau paragraf khusus, atau ketika anda ingin mendapatkan kontrol yang sempurna untuk pengaturan jarak.
Properti "margin-top" menentukan jarak diatas dan "margin-bottom" menentukan jarak dibawah. Untuk menentukan semua h2 heading anda dapat menulis:
h2 { margin-top: 8em; margin-bottom: 3em; }
Unit em sangatlah berguna karena besarnya dapat menyesuaikan diri dengan besaran fonta. Satu em sama dengan tinggi dari sebuah fonta. Dengan menggunakan em anda dapat mempertahankan bentuk umum dari halaman Web secara terpisah dan tidak tergantung pada besar fonta. Hal ini jauh lebih aman dari alternatif alternatif seperti pixel atau poin, dimana dapat menyebabkan problem untuk pengguna yang membutuhkan fonta besar untuk membaca teks.
Poin umum digunakan dalam program pengolah kata, misalnya, 10pt teks. Sayangnya ukuran poin yang sama di render secara berbeda pada browser yang berbeda. Apa yang kelihatannya baik baik saja di satu browser bisa tidak terbaca sama sekali di browser lain. Dengan menggunakan em anda menghilangkan problem ini.
Untuk menyatakan jarak di atas heading tertentu, anda perlu membuat sebuah style yang sudah diberikan nama untuk heading tersebut. Anda melakukan ini dengan menggunakan atribut class dalam markup.
<h2 class="subsection">Getting started</h2>
Aturan style tersebut kemudian ditulis sebagai berikut.:
h2.subsection { margin-top: 8em; margin-bottom: 3em; }
Rule tersebut dimulai dengan nama tag, sebuah titik dan nilai nama dari atribut class. Anda harus berhati-hati dalam menaruh spasi sebelum dan sesudah titik. Bila menaruh titik tersebut maka aturan tersebut tidak akan jalan.Ada beberapa cara lain untuk menentukan style untuk elemen tertentu tersebut tetapi penggunaan atribut class paling fleksibel.
Ketika sebuah heading diikuti sebuah paragraf, nilai untuk margin-bottom untuk heading tidak ditambahkan pada pada nilai dari margin-top pada paragraf. Malah, nilai maximum dari kedua nilai tersebut digunakan untuk jarak antara heading dan paragraf. Nilai ini digunakan pada margin-top dan margin-bottom tanpa memperdulikan tag apa yang digunakan.
Terkadang anda mungkin ingin indentasi dari baris pertama dari tiap paragraf. Aturan berikut meniru bagaimana paragraf di buat pada novel-novel.
p { text-indent: 2em; margin-top: 0; margin-bottom: 0; }
Aturan tersebut memasukkan baris pertama dari tiap paragraf sebanyak 2 em dan menghilangkan jarak antar paragraf.
Bagian ini menjelaskan bagaimana menentukan fonta dan ukuran, bagaimana menambahkan huruf miring/(italic), huruf tebal(bold) dan style lain.
Jenis aturan paling umum adalah membuat teks jadi huruf miring atau huruf tebal. Kebanyakan browser merender tag em dalam huruf miring dan tag yang strong dalam huruf tebal. Mari berasumsi bahwa anda ingin em untuk muncul dalam bold italic dan strong dalam bold uppercase:
em { font-style: italic; font-weight: bold; }
strong { text-transform: uppercase; font-weight: bold; }
Bila anda ingin, anda dapat membuat heading menjadi huruf kecil seperti berikut:
h2 { text-transform: lowercase; }
Kebanyakan browser menggunakan huruf besar untuk hal-hal yang lebih penting dari headings. Bila anda ingin mengesampingkan ukuran bawaan tersebut, maka anda beresiko untuk membuat teks menjadi terlalu kecil untuk dibaca, khususnya bila anda menggunakan poin. Oleh sebab itu anda disarankan untuk menbuat unkuran fonta dalam bentuk yang relatif.
Contoh ini menbuat ukuran heading dalam persentase relatif terhadap ukuran yang digunakan untuk teks normal:
h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 100%; }
Adalah sebuah kemungkinan besar dimana fonta favorit anda tidak terdapat di semua browser. Untuk mengatasi hal ini, anda diperbolehkan menulis beberapa fonta, sesuai dengan urutan preferensi anda. Ada sebuah daftar pendek dari nama-nama fonta yang generik yang dipastikan ada, jadi anda direkomendasikan untuk mengakhiri daftar tersebut dengan salah satu yang berikut ini: serif, sans-serif, cursive, fantasy, atau monospace, misalnya:
body { font-family: Verdana, sans-serif; }
h1,h2 { font-family: Garamond, "Times New Roman", serif; }
Dalam contoh ini, dalam contoh ini, heading yang penting lebih baik ditampilkan dalam Garamond, bila tidak berhasil maka akan ditampilkan di Times New Roman, dan bila itu tak ada maka menggunakan fonta bawaan browser. Paragraf berikut akan muncul dengan Verdana atau bila tidak ada dalam fonta sans-serif bawaan browser.
Kemampuan untuk membaca fonta-fonta yang berbeda umumnya tergantung pada tinggi dari huruf kecil dari ukuran fonta itu sendiri. Fonta seperti Verdana lebih mudah dibaca dibandingkan "Times New Roman" dan oleh sebab itu disarankan untuk teks paragraf.
Aturan pertama adalah unyuk menghindari teks yang tidak dibungkus dengan elemen level blok seperti p.pada level body. Contohnya:
<h2>Spring in Wiltshire</h2>
Blossom on the trees, bird song and the sound of lambs
bleating in the fields.
Heading berikut beresiko untuk dirender dengan fonta dan margin yang salah. Oleh sebab itu anda disarankan untuk menutup semua text dalam sebuah paragraf, contoh,
<h2>Spring in Wiltshire</h2>
<p>Blossom on the trees, bird song and the sound of lambs
bleating in the fields.</p>
Aturan saya yang kedua adalah untuk menentukan keluarga fonta untuk elemen-elemen pre, karena beberapa browser lupa menggunakan fonta dengan pitch yang tetap ketika anda menentukan ukuran fonta atau properti lain untuk pre.
pre { font-family: monospace; }
Aturan saya yang ketiga adalah untuk membuat font family pada elemen-elemen heading, p dan ul jika anda ingin untuk menentukan batas serta latar belakang dari elemen seperti div. Ini adalah sebuah cara untuk menyiasati sebuah bug dimana browser lupa untuk menggunakan keluarga fonta yang diturunkan, dan malah menggunakan font bawaan yang ditetapkan pada browser.
h1,h2,h3,h4,h5,p,ul { font-family: sans-serif; }
Anda dapat dengan mudah menambah pinggiran di sekeliling sebuah heading, list, paragraph atau kumpulan dari tadi dan ditutup dengan sebuah elemen div. Sebagai contoh:
div.box { border: solid; border-width: thin; width: 100% }
Ingat bahwa tanpa properti "width" beberapa browsers akan menempatkan margin kanan jauh ke kanan. Ini dapat kemudian digunakan dengan markup sebagai berikut:
<div class="box">
The content within this DIV element will be enclosed
in a box with a thin line around it.
</div>
Ada sedikit pilihan untuk batasan tepi: dotted, dashed, solid, double, groove, ridge, inset dan outset. Properti border-width menetapkan lebarnya. Nilainya antara lain termasuk thin, medium dan thick dan juga dapat ditulis lebarnya, contoh,. 0.1em. Properti border-color memungkinkan anda untuk menentukan warna.
Sebuah efek yang bagus adalah dengan menggambar latar belakang dengan kotak berwarna atau gambar yang dapat disusun seperti ubin (tiled image). Untuk melakukan hal ini anda menggunakan properti background. Anda dapat mengisi div yang menutup kotak seperti berikut:
div.color {
background: rgb(204,204,255);
padding: 0.5em;
border: none;
}
Tanpa definisi yang jelas untuk properti border beberapa browser hanya akan menggambarkan latar belakang di setiap huruf. Properti padding memperkenalkan jarak ditiap ujung daerah berwarna dan teks di dalamnya.
Anda dapat menentukan nilai yang berbeda untuk sisi kiri, atas, kanan dan bawah dengan properti padding-left, padding-top, padding-right dan padding-bottom, misalnya. padding-left: 1em.
Misalnya anda hanya ingin batasan di beberapa sisi. Anda dapat mengatur properti batasan untuk tiap sisi secara terpisah menggunakan kelompok properti border-left, border-top, border-right dan border-bottom bersama dengan akhiran yang tepat: style, width atau color, contoh.
p.changed {
padding-left: 0.2em;
border-left: solid;
border-right: none;
border-top: none;
border-bottom: none;
border-left-width: thin;
border-color: red;
}
yang membuat sebuah batasan berwarna merah hanya di sisi sebelah kiri dari paragraf dengan class "changed".
Beberapa contoh untuk menentukan warna yang muncul di beberapa bagian sebelumnya. Berikut sebuah contoh untuk membantu anda mengingat:
body {
color: black;
background: white;
}
strong { color: red }
Hal ini akan membuat text berwarna hitam dan latar belakang menjadi putih, tetapi membuat elemen strong menjadi merah. Ada 16 nama warna standar, yang dijelaskan dibawah. Anda juga dapat menggunakan nilai desimal untuk merah, hijau dan biru, dimana nilainya berkisar antara 0 hingga 255, contoh rgb(255, 0, 0) sama dengan red. Anda juga dapat menggunakan nilai warna hex color yang dimulai dengan karakter '#' diikuti dengan 6 digit hexadesimal. Sebuah konverter tersedia dibawah memungkinkan anda untuk mengubah dari RGB ke nilai warna dalam hexa.
Anda dapat menggunakan CSS untuk menentukan warna untuk untuk link hypertext, dan sebuah warna yang berbeda untuk link yang belum anda ikuti, yang sudah, dan warna aktif untuk ketika link tersebut sedang di click. Anda bahkan dapat menentukan warna pada saat mouse diposisikan di atas link.
:link { color: rgb(0, 0, 153) } /* for unvisited links */
:visited { color: rgb(153, 0, 153) } /* for visited links */
a:active { color: rgb(255, 0, 102) } /* when link is clicked */
a:hover { color: rgb(0, 96, 255) } /* when mouse is over link */
Terkadang anda ingin menunjukkan link hyperteks tanpa membuat mereka diberi garis bawah. Anda dapat melakukan hal berikut dengan membuat properti text-decoration menjadi none, misalnya:
a.plain { text-decoration: none }
Yang akan menghilangkan garis bawah untuk sebuah link seperti:
This is <a class="plain" href="what.html">not underlined</a>
Kebanyakan orang ketika mereka melihat teks dengan garis bawah di sebuah halaman Web, akan mengira bahwa bahwa hal tersebut merupakan bagian dari link hypertext. Akibatnya, anda disarankan untuk membiarkan garis bawah untuk link hypertext. Argumen juga berlaku untuk warna link, kebanyakan orang akan mengartikan text biru bergaris bawah sebagai link hypertext. Anda disarankan untuk membiarkan warna link, kecuali bila warna latar belakang membuatnya sulit dibaca.
Bila menggunakan warna, patut diingat bahwa 5 hingga 10% pria menderita beberapa bentuk buta warna. Hal ini dapat berupa kesulitan membedakan merah dan hijau, atau biru dan ungu. Dalam kasus langka, ada ketidak mampuan untuk melihat warna sama sekali. Anda disarankan untuk menghidari kombinasi warna latar depan/latar belakang yang dapat membuat text susah dibaca bagi orang buta warna.
Kumpulan standar dari nama warna adalah: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, dan yellow. Ke enambelas warna ini di definisikan di HTML 3.2 dan 4.01 serta berhubungan dengan monitor VGA biasa pada PCs. Kebanyakan browser menerima nama warna yang lebih beragam tapi hal ini tidak dianjurkan.
 |
black = "#000000" |  |
green = "#008000" |
 |
silver = "#C0C0C0" |  |
lime = "#00FF00" |
 |
gray = "#808080" |  |
olive = "#808000" |
 |
white = "#FFFFFF" |  |
yellow = "#FFFF00" |
 |
maroon = "#800000" |  |
navy = "#000080" |
 |
red = "#FF0000" |  |
blue = "#0000FF" |
 |
purple = "#800080" |  |
teal = "#008080" |
 |
fuchsia = "#FF00FF" |  |
aqua = "#00FFFF" |
Jadi, nilai warna "#800080" adalah sama dengan "purple".
Niali seperti "#FF9999" mewakili warna sebagai nilai hexadesimal untuk merah, hijau dan biru. Dua karakter setelah # memberikan nilai untuk red, dua yang berikut untuk hijau dan dua yang terakhir untuk biru. Nilai-nilai ini akan selalu berkisar dari 0 hingga 255 desimal. Bila anda tahu nilai desimalnya anda dapat merubahnya ke hexadesimal menggunakan sebuah kalkulator, seperti yang ada pada Microsoft Windows.
Komputer baru dapat menampiilkan ribuan atau jutaan warna, tapi banyak sistim tua yang hanya dapat menampilkan hingga 256 warna pada saat yang bersamaan. Untuk menanggulangi hal ini, browser-browser akan tampil dengan warna dari dari sebuah palet tetap. Efek dari hal ini adalah sering timbulnya bercak warna karena browser berusaha untuk menebak warna gambar yang sesungguhnya. Masalah ini akan perlahan hilang seiring dengan digantikannya komputer tua dengan model yang lebih baru.
Kebanyakan browser mendukung sesuatu yang dinamakan palet "browser safe". Hal tersebut menggunakan enam gradasi warna merah, hijau dan bira serta kombinasinya. Bila anda memilih warna gambar dari palet ini, anda dapat mencegah efek bercak tersebut. Hal ini khususnya berguna untuk gambar dari area latar belakang.
Bila browser menggunakan palet warna yang "browser safe", latar belakang halaman menggunakan warna terdekat dalam palet. Jika anda menetapkan latar belakang halaman dengan warna yang tidak berasal dari palet yang "browser safe", anda beresiko bahwa latar belakang akan memiliki warna yang berbeda tergantung dari warna indeks atau "true-color" yang digunakan oleh komputer anda.
Berikut dibuat dari warna dimana merah, hijau dan biru dibatasi dalam nilainya:
| RGB | 00 | 51 | 102 | 153 | 204 | 255 |
|---|---|---|---|---|---|---|
| Hex | 00 | 33 | 66 | 99 | CC | FF |
Berikut adalah tabel dari warna yang bersifat "browser safe" dan nilai hexanya. Terima kasih pada Bob Stein untuk persiapannyai.
| FFF FFF |
CCC CCC |
999 999 |
666 666 |
333 333 |
000 000 |
FFC C00 |
FF9 900 |
FF6 600 |
FF3 300 |
||||||
| 99C C00 |
CC9 900 |
FFC C33 |
FFC C66 |
FF9 966 |
FF6 633 |
CC3 300 |
CC0 033 |
||||||||
| CCF F00 |
CCF F33 |
333 300 |
666 600 |
999 900 |
CCC C00 |
FFF F00 |
CC9 933 |
CC6 633 |
330 000 |
660 000 |
990 000 |
CC0 000 |
FF0 000 |
FF3 366 |
FF0 033 |
| 99F F00 |
CCF F66 |
99C C33 |
666 633 |
999 933 |
CCC C33 |
FFF F33 |
996 600 |
993 300 |
663 333 |
993 333 |
CC3 333 |
FF3 333 |
CC3 366 |
FF6 699 |
FF0 066 |
| 66F F00 |
99F F66 |
66C C33 |
669 900 |
999 966 |
CCC C66 |
FFF F66 |
996 633 |
663 300 |
996 666 |
CC6 666 |
FF6 666 |
990 033 |
CC3 399 |
FF6 6CC |
FF0 099 |
| 33F F00 |
66F F33 |
339 900 |
66C C00 |
99F F33 |
CCC C99 |
FFF F99 |
CC9 966 |
CC6 600 |
CC9 999 |
FF9 999 |
FF3 399 |
CC0 066 |
990 066 |
FF3 3CC |
FF0 0CC |
| 00C C00 |
33C C00 |
336 600 |
669 933 |
99C C66 |
CCF F99 |
FFF FCC |
FFC C99 |
FF9 933 |
FFC CCC |
FF9 9CC |
CC6 699 |
993 366 |
660 033 |
CC0 099 |
330 033 |
| 33C C33 |
66C C66 |
00F F00 |
33F F33 |
66F F66 |
99F F99 |
CCF FCC |
CC9 9CC |
996 699 |
993 399 |
990 099 |
663 366 |
660 066 |
|||
| 006 600 |
336 633 |
009 900 |
339 933 |
669 966 |
99C C99 |
FFC CFF |
FF9 9FF |
FF6 6FF |
FF3 3FF |
FF0 0FF |
CC6 6CC |
CC3 3CC |
|||
| 003 300 |
00C C33 |
006 633 |
339 966 |
66C C99 |
99F FCC |
CCF FFF |
339 9FF |
99C CFF |
CCC CFF |
CC9 9FF |
996 6CC |
663 399 |
330 066 |
990 0CC |
CC0 0CC |
| 00F F33 |
33F F66 |
009 933 |
00C C66 |
33F F99 |
99F FFF |
99C CCC |
006 6CC |
669 9CC |
999 9FF |
999 9CC |
993 3FF |
660 0CC |
660 099 |
CC3 3FF |
CC0 0FF |
| 00F F66 |
66F F99 |
33C C66 |
009 966 |
66F FFF |
66C CCC |
669 999 |
003 366 |
336 699 |
666 6FF |
666 6CC |
666 699 |
330 099 |
993 3CC |
CC6 6FF |
990 0FF |
| 00F F99 |
66F FCC |
33C C99 |
33F FFF |
33C CCC |
339 999 |
336 666 |
006 699 |
003 399 |
333 3FF |
333 3CC |
333 399 |
333 366 |
663 3CC |
996 6FF |
660 0FF |
| 00F FCC |
33F FCC |
00F FFF |
00C CCC |
009 999 |
006 666 |
003 333 |
339 9CC |
336 6CC |
000 0FF |
000 0CC |
000 099 |
000 066 |
000 033 |
663 3FF |
330 0FF |
| 00C C99 |
009 9CC |
33C CFF |
66C CFF |
669 9FF |
336 6FF |
003 3CC |
330 0CC |
||||||||
| 00C CFF |
009 9FF |
006 6FF |
003 3FF |
||||||||||||
Contoh warna untuk palet yang "browser safe" tersedia di banyak paket software grafis, dari www.visibone.com.
Browser - browser tua, boleh dikatakan sebelum Netscape 4.0 dan Internet Explorer 4.0, tidak mendukung CSS sama sekali atau mendukungnya tapi tidak konsisten. Untuk browser-browser ini anda masih bisa mengontrol style menggunakan HTML.
Anda dapat menentukan warna dengan menggunakan tag BODY. Contoh berikut menentukan warna latar belakang menjadi putih dan warna teks hitam:
<body bgcolor="white" text="black">
Elemen BODY harus ditempatkan sebelum ada isi yang ditampilkan pada halaman Web, contoh, sebelum heading pertama. Anda juga bisa menentukan warna dari link hypertext. Ada tiga atribut untuk ini:
Berikut sebuah contoh dimana ketiganya ditentukan:
<body bgcolor="white" text="black"
link="navy" vlink="maroon" alink="red">
Anda juga dapat membuat browser untuk menyusun latar belakang dari gambar menggunakan atribut latar belakang untuk menentukan alamat Web untuk gambar, misalnya.
<body bgcolor="white" background="texture.jpeg" text="black"
link="navy" vlink="maroon" alink="red">
Merupakan sebuah ide yang baik untuk menentukan warna latar belakang menggunakan attribute bgcolor jika browser tidak dapat merender sebuah image. Anda harus memeriksa warna yang anda pilih tidak membuat sesuatu menjadi sesuatu menjadi susah dibaca: Sebagai sebuah kasus ekstrim pertimbangkan hal berikut ini:
<body bgcolor="black">
Kebanyakan browser akan merender teks dengan warna hitam. Hasilnya adalah bahwa halaman akan menunjukkan teks hitam pada warna hitam! Kebanyakan orang menderita dari kebutaan terhadap satu warna atau lainnya, misalnya olive green dapat terlihat sebagai coklat untuk beberapa orang.
Sebuah masalah lain muncul ketika anda berusaha mencetak halaman Web. Banyak browser akan meniadakan warna latar belakang tetap mereka akan tetap mengikuti warna teks. Menjadikan warna teks putih sering membuat halaman kosong, jadi hal berikut ini tidak disarankan:
<body bgcolor="black" text="white">
Anda juga dapat menggunakan atribut bgcolor dengan sel dari sebuah tabel contoh.
<table border="0" cellpadding="5">
<tr>
<td bgcolor="yellow">colored table cell</td>
</tr>
</table>
Tabel dapat digunakan untuk berbagai macam variasi efek tata letak dan sudah banyak dieksploitasi untuk hal ini. Di masa depan fungsi ini kemungkinan akan digantikan oleh style sheets, dimana masalah tata letak menjadi lebih praktis dalam pencapaiannya dengan usaha yang lebih sedikit.
Tag FONT dapat digunakan untuk memilih fonta, menentukan ukurannya dan warnanya. Contoh ini hanya menentukan warna:
This sentence has a <font color="yellow">word</font> in yellow.
Atribut face digunakan untuk menentukan fonta. Hal terebut mengambil sebuah daftar dengan urutan preferensi, contoh.
<font face="Garamond, Times New Roman">some text ...</font>
Atribut size dapat digunakan untuk memilih ukuran fonta sebagai sebuah nomor dari 1 hingga 6. Bila anda menempatkan tanda - atau + sebelum angka maka akan diartikan sebagai nilai yang relatif. Gunakan ukuran"+1" bila anda ingin melihat ukuran fonta yang lebih besar dan ukuran ="-1" bila anda ingin menggunakan ukuran fonta yang lebih kecil, misalnya,
<font size="+1" color="maroon"
face="Garamond, Times New Roman">some text ...</font>
Ada beberapa hal yang anda harus hindari: Jangan memilih kombinasi warna yang menyebabkan warna menjadi sulit dibaca oleh orang-orang yang menderita buta warna. Jangan menggunakan fonta biasa untuk heading, dimana yang harus selalu digunakan adalah tag h1 hingga h6 sesuai dengan tingkat kepentingan heading..
Untuk informasi lebih lanjut mengenai CSS dan alat yang digunakan untuk mendukungnya, anda sebaiknya melihat halaman W3C untuk CSS. Ini termasuk petuntuk higga buku mengenai HTML dan CSS, misalnya, "Raggett on HTML 4", dipublikasikan tahun 1998 oleh Addison Wesley. Untuk sebuah penjelasan yang lebih detil mengenai CSS, "Cascading Style Sheets" oleh Håkon Wium Lie dan Bert Bos, pub. 1999 oleh Addison Wesley, yang melihat CSS secara lebih detil, oleh orang orang yang merupakan arsitek CSS itu sendiri.
Saya berencana untuk mengembangkan panduan ini dengan tambahan halaman menjelaskan peletakan, pencetakan CSS serta style sheet aural.
Semoga sukses dan mulailah menulis!