Cara Menggunakan Tanda Fon Berwarna pada HTML

Saat ini tanda (tag) fon HTML sudah ketinggalan zaman, dan pengembang web profesional semestinya sudah tidak menggunakannya lagi. ^{[1]XTeliti sumber} Meskipun cara itu memudahkan untuk mengganti warna fon dalam proyek-proyek pribadi, tidak ada jaminan cara tersebut bisa berfungsi dengan baik di berbagai peramban yang telah diperbarui. Untuk mendapatkan hasil terbaik, gunakan metode CSS yang akan disampaikan di akhir artikel ini.

Metode 1

Metode 1 dari 2:

Menggunakan Beragam Tag HTML

Unduh PDF

1
Buat tag fon. Posisikan tag di depan teks yang Anda ingin ganti warnanya. Akhiri dengan tag setelah teks tersebut.
- Contoh:
 Teks ini akan saya jadikan berwarna biru.
2
Tuliskan atribut warnanya. Masukkan color=" " di dalam tag fon yang di awal. Tulis atribut warna yang Anda inginkan di antara tanda petik.
- Contoh:
 color=" "Teks ini akan saya jadikan berwarna biru.
3
Pilih nama warna yang diinginkan. Tiap warna punya nama yang terdiri dari satu kata, tanpa spasi. Coba gunakan nama yang sederhana seperti "blue" atau "red", atau yang lebih spesifik seperti "lightblue" atau "darkblue". Jika Anda menginginkan lebih banyak pilihan, silakan periksa daftar nama warna yang di dalamnya ada semacam "maroon", "steelblue", dan "lime".^{[2]XTeliti sumber}
- Contoh:
 Teks ini akan saya jadikan berwarna biru.
4
Anda juga bisa menggunakan kode warna heksadesimal. Ada jutaan warna yang bisa Anda pilih di HTML, tetapi tidak semuanya punya nama. Kode yang digunakan untuk ragam warna HTML tersebut kode 6 digit yang disebut dengan sistem angka heksadesimal. Banyak sekali situs web yang menampilkan daftar kode warna heksa, atau memungkinkan Anda memilih warna tertentu di layar dan menampilkan kode heksanya. Kode heksa diawali dengan simbol # dan terdiri dari 6 digit kombinasi angka 0-9 dan abjad A-F.
- Kode #FF0000 sama dengan warna merah.
- Kode ini menghasilkan teks berwarna hijau.
- Kode ini menghasilkan teks berwarna biru.
5
Bermain-mainlah dengan nilai RGB. Anda tidak harus tahu cara kerja kode heksa untuk sekedar menggunakan pemilih warna daring. Meskipun demikian, jika Anda ingin bereksperimen mulailah dari dasarnya:
- Kode enam digit heksa terbagi dalam nilai red (merah), green (hijau), dan blue (biru) ("RGB"). Sebagai contoh arti sesungguhnya kode #FF0000 adalah "red: FF green: 00 blue: 00."
- Untuk mengubah nilai warna merah, ubahlah dua digit pertama. Anda bisa memasukkan nilai apa saja mulai 00 (tidak merah sama sekali) ke 99 (agak merah) atau kombinasi huruf AA (sedikit merah) sampai dengan FF (merah maksimal).
- Gunakan cara yang sama untuk mengubah nilai warna hijau (dua digit tengah) atau nilai warna biru (dua digit akhir).
6
Pahami kode warna heksa lebih dalam lagi. Agar bisa memilih warna dengan lebih tepat, ada dua konsep lagi yang Anda harus ketahui:
- Masing-masing dari tiga nilai warna yang ada terdiri dari dua digit. Untuk melakukan perubahan kecil, ubah saja digit keduanya. Misalnya, #850000 dan #890000 sangatlah mirip, tetapi #A50000 warnanya lebih cerah.
- Nilai RGB adalah kombinasi dari sistem warna aditif. Kombinasi merah dan hijau akan menjadi kuning; biru dan hijau menghasilkan sian; sedangkan merah dan biru akan bercampur menjadi magenta.^{[3]XTeliti sumber}
Iklan

Metode 2

Metode 2 dari 2:

Menggunakan CSS Inline

Unduh PDF

1
Masukkan atribut style ke suatu tag HTML. Atribut style=" " memungkinkan Anda menggunakan CSS di dalam dokumen HTML. Dengan cara ini pengaturan warna fon akan mudah dilakukan meskipun Anda tidak tahu tentang CSS. Cobalah memasukkan atribut style ke dalam salah satu dari tag HTML berikut:
- Tag p ada di awal dan akhir suatu paragraf teks.
- <a style=" " href="https://www.wikihow.com">Tag a ada di awal dan akhir suatu tautan.</a>
- Gunakan tag span jika Anda ingin mengganti warna sebagian isi paragraf tanpa mengubah formatnya.
2
Tentukan warnanya. Tambahkan color: diikuti dengan nama warna atau kode heksanya di antara tanda petik.^{[4]XTeliti sumber} Untuk mendapatkan informasi yang lebih terperinci tentang nama dan kode warna silakan lihat kembali metode sebelumnya atau coba langsung dengan contoh-contoh berikut:
- Dengan cara ini teks akan berwarna merah.
- Kode warna ini untuk warna hijau zaitun tua.
- CSS memungkinkan untuk menyingkat kode warna jadi 3 digit saja. Kode 745 adalah singkatan dari 774455.
3
Gunakan kelas CSS untuk style (gaya) yang sering Anda gunakan. Jika Anda ingin menerapkan atribut style pada tiap keterangan foto atau judul bab di suatu situs web besar, Anda tidak perlu terus menerus menulis semua kodenya. Tetapkan saja suatu kelas CSS di kepala dokumen, sehingga Anda bisa selalu merujuk kepada kelas tersebut dengan menggunakan kode singkat tiap kali style tersebut akan digunakan.^{[5]XTeliti sumber} Pada contoh berikut akan ditunjukkan sejumlah kecil penggunaan atribut style:
- Pada bagian <head>dokumen HTML Anda, tempel kode berikut:
 <style type="text/css">
 .fancy {
 fon-family: Cursive;
 color: darkgreen;
 fon-size:150%;
 }
 </style>
- Gunakan atribut class="fancy" pada dokumen yang sama untuk menerapkan style ini pada elemen tertentu. Sebagai contoh paragraf ini akan ditampilkan sebagai teks yang besar, berwarna hijau tua, dengan fon Cursive.
- Anda bisa menggunakan kata apa saja selain "fancy" untuk menjelaskan suatu style.
Iklan

Tips

Upayakan halaman web Anda mudah dibaca. Warna-warna cerah sulit dibaca pada latar belakang yang berwarna putih, sebaliknya warna-warna gelap sulit dibaca pada latar belakang berwarna hitam.
Komputer-komputer lama hanya mampu menampilkan 65.000 warna saja, yang lebih kuno malah terbatas pada 256 warna. Meskipun demikian dapat dipastikan bahwa lebih dari 99% pengguna internet bisa menampilkan warna-warna yang Anda pilih.^{[6]XTeliti sumber}