Cara Menggunakan Tanda Fon Berwarna pada HTML

Unduh PDF
Disusun bersama Staf wikiHow

Referensi

Unduh PDF

Saat ini tanda ( tag ) fon HTML sudah ketinggalan zaman, dan pengembang web profesional semestinya sudah tidak menggunakannya lagi. [1] 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fd\/Use-Font-Color-Tags-in-HTML-Step-1-Version-3.jpg\/v4-460px-Use-Font-Color-Tags-in-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fd\/Use-Font-Color-Tags-in-HTML-Step-1-Version-3.jpg\/v4-728px-Use-Font-Color-Tags-in-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Posisikan tag <font> di depan teks yang Anda ingin ganti warnanya. Akhiri dengan tag </font> setelah teks tersebut.
    • Contoh:
      <font>Teks ini akan saya jadikan berwarna biru.</font>
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ae\/Use-Font-Color-Tags-in-HTML-Step-2-Version-2.jpg\/v4-460px-Use-Font-Color-Tags-in-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ae\/Use-Font-Color-Tags-in-HTML-Step-2-Version-2.jpg\/v4-728px-Use-Font-Color-Tags-in-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Masukkan color=" " di dalam tag fon yang di awal. Tulis atribut warna yang Anda inginkan di antara tanda petik.
    • Contoh:
      <font> color=" " Teks ini akan saya jadikan berwarna biru.</font>
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4a\/Use-Font-Color-Tags-in-HTML-Step-3-Version-3.jpg\/v4-460px-Use-Font-Color-Tags-in-HTML-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4a\/Use-Font-Color-Tags-in-HTML-Step-3-Version-3.jpg\/v4-728px-Use-Font-Color-Tags-in-HTML-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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]
    • Contoh:
      <font color=" blue "> Teks ini akan saya jadikan berwarna biru. </font>
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f1\/Use-Font-Color-Tags-in-HTML-Step-4-Version-3.jpg\/v4-460px-Use-Font-Color-Tags-in-HTML-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f1\/Use-Font-Color-Tags-in-HTML-Step-4-Version-3.jpg\/v4-728px-Use-Font-Color-Tags-in-HTML-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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.
    • <font color="FF0000"> Kode #FF0000 sama dengan warna merah. </font>
    • <font color="00FF00"> Kode ini menghasilkan teks berwarna hijau. </font>
    • <font color="0000FF"> Kode ini menghasilkan teks berwarna biru. </font>
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/06\/Use-Font-Color-Tags-in-HTML-Step-5-Version-3.jpg\/v4-460px-Use-Font-Color-Tags-in-HTML-Step-5-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/06\/Use-Font-Color-Tags-in-HTML-Step-5-Version-3.jpg\/v4-728px-Use-Font-Color-Tags-in-HTML-Step-5-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/34\/Use-Font-Color-Tags-in-HTML-Step-6.jpg\/v4-460px-Use-Font-Color-Tags-in-HTML-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/34\/Use-Font-Color-Tags-in-HTML-Step-6.jpg\/v4-728px-Use-Font-Color-Tags-in-HTML-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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]
    Iklan
Metode 2
Metode 2 dari 2:

Menggunakan CSS Inline

Unduh PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d5\/Use-Font-Color-Tags-in-HTML-Step-7.jpg\/v4-460px-Use-Font-Color-Tags-in-HTML-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d5\/Use-Font-Color-Tags-in-HTML-Step-7.jpg\/v4-728px-Use-Font-Color-Tags-in-HTML-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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:
    • <p style=" ">Tag p ada di awal dan akhir suatu paragraf teks.</p>
    • <a style=" " href="https://www.wikihow.com">Tag a ada di awal dan akhir suatu tautan.</a>
    • <span style=" ">Gunakan tag span jika Anda ingin mengganti warna sebagian isi paragraf tanpa mengubah formatnya.</span>
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d1\/Use-Font-Color-Tags-in-HTML-Step-8.jpg\/v4-460px-Use-Font-Color-Tags-in-HTML-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d1\/Use-Font-Color-Tags-in-HTML-Step-8.jpg\/v4-728px-Use-Font-Color-Tags-in-HTML-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tambahkan color: diikuti dengan nama warna atau kode heksanya di antara tanda petik. [4] Untuk mendapatkan informasi yang lebih terperinci tentang nama dan kode warna silakan lihat kembali metode sebelumnya atau coba langsung dengan contoh-contoh berikut:
    • <span style="color:red"> Dengan cara ini teks akan berwarna merah. </span>
    • <span style="color:#556B2F"> Kode warna ini untuk warna hijau zaitun tua. </span>
    • <span style="color:#745"> CSS memungkinkan untuk menyingkat kode warna jadi 3 digit saja. Kode 745 adalah singkatan dari 774455. </span>
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e3\/Use-Font-Color-Tags-in-HTML-Step-9.jpg\/v4-460px-Use-Font-Color-Tags-in-HTML-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e3\/Use-Font-Color-Tags-in-HTML-Step-9.jpg\/v4-728px-Use-Font-Color-Tags-in-HTML-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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] 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 <p class="fancy">paragraf ini</p> 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]
Iklan

Peringatan

  • Elemen fon tidak didukung di XHTML 1.0 Strict DTD.
Iklan

wikiHow Terkait

Cara
Menonaktifkan McAfee
Cara
Membuat Inden pada Baris Pertama di Setiap Paragraf dalam Microsoft Word
Cara
Menandai Teks pada Dokumen PDF
Cara
Menjalankan Berkas HTML di Visual Studio Code
Cara
Menambahkan Gambar ke Berkas PDF
Cara
Membuka Berkas EPUB
Cara
Memperbarui Driver Nvidia
Cara
Membuka Berkas .Dat
Cara
Membuat Program Sederhana dengan C++
Cara
Menambahkan Kata Sandi ke Berkas RAR
Cara
Menjalankan Berkas Python dengan Command Prompt di Windows
Cara
Menyalin Berkas ke Hard Disk Eksternal
Iklan

Referensi

  1. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fon
  2. ↑ https://www.w3.org/TR/SVG/types.html#ColorKeywords
  3. ↑ http://hyperphysics.phy-astr.gsu.edu/hbase/vision/addcol.html
  4. ↑ https://www.w3.org/TR/REC-html40/present/styles#h-14.2.2
  5. ↑ https://www.w3.org/TR/REC-html40/present/styles#h-14.2.2
  6. ↑ http://www.w3schools.com/browsers/browsers_display.asp

Tentang wikiHow ini

Bahasa lain
Halaman ini telah diakses sebanyak 22.206 kali.

Apakah artikel ini membantu Anda?

Iklan