Cara menggunakan warna di html

Question

Pemilihan warna pada teks dan jenis font yang diterapkan pada dokumen HTML yang kita buat merupakan salah satu hal penting yang perlu diperhatikan dan diperhatikan. Dimana font adalah jenis huruf yang digunakan dalam suatu dokumen

Table of Contents Show

Elemen Huruf
A. Ukuran font CSS
B. Keluarga font CSS
C. Berat font CSS
D. Gaya huruf CSS
E. Varian font CSS
Gaya apa yang digunakan untuk mengubah warna teks?
Properti CSS apa yang dapat mengubah warna teks elemen HTML?

Ada beberapa hal yang harus kita perhatikan seperti jenis font apa yang diterapkan sesuai dengan desain situs web, jenis font apa yang diterapkan untuk memudahkan pengunjung membaca konten di situs web, apakah jenisnya font yang sesuai dengan tema atau topik website atau kontennya dan apakah warna teks yang diterapkan sesuai dengan latar belakang dan tidak mempersulit pengunjung untuk membaca teks dan sebagainya

HTML sendiri menyediakan elemen khusus untuk mengatur penerapan font dan warna pada dokumen HTML. Ada banyak sekali jenis font yang bisa kita gunakan namun harus juga kita ingat bahwa font yang akan ditampilkan pada web browser secara keseluruhan berasal dari komputer pengguna. Tidak masalah jika browser yang digunakan adalah dari komputer kita, tetapi jika dibuka di browser di komputer lain, desain web yang telah direncanakan mungkin menjadi berantakan karena jenis font yang diterapkan tidak tersedia di komputer tersebut.

Itu sebabnya font standar digunakan yang umumnya tersedia di Windows, Linux, Mac OS dan lainnya. Font standar umumnya didukung oleh sebagian besar browser web sehingga Anda tidak perlu khawatir. Berikut adalah jenis font standar yang dapat Anda gunakan

1. Jenis Huruf Serif

Font serif adalah jenis font yang memiliki foot pada setiap hurufnya seperti Times New Roman dan Georgian. Jenis font ini cenderung cepat dan mudah dibaca sehingga umumnya digunakan untuk media cetak kertas

2. Jenis Font Monospace

Font Monospace adalah jenis font yang lebar setiap karakternya sama dengan panjang Courier, Courier New, dan Andale Mono. Karena sifatnya, font ini umumnya digunakan untuk menulis program

3. Jenis Font Sans-Serif

Jenis huruf sans-serif adalah jenis huruf yang tidak memiliki kaki pada setiap hurufnya seperti Arial, Verdana, Trebuchet MS, Helvetica, dan Calibri. Font ini sering digunakan sebagai salah satu jenis font pada website

4. Jenis Font Kursif

Font kursif adalah jenis font yang meniru kaligrafi atau tulisan tangan seperti Comic Sans. Font ini biasanya digunakan untuk aspek penulisan yang tidak terlalu formal

5. Jenis Font Fantasi

Font fantasy adalah jenis font yang bersifat visual dengan karakter font khusus seperti font matrix, disney dan lain-lain dan jarang digunakan untuk teks halaman

Agar kamu lebih memahami warna teks dan jenis font pada HTML, yuk simak penjelasannya di bawah ini

Elemen Huruf

Dengan tag font, Anda dapat mengatur atau mengubah warna dan ukuran teks. Anda juga dapat menggunakan elemen font yang sudah disediakan oleh HTML

Penggunaan elemen ini ditandai dengan tag dan diakhiri dengan tag . Pengubahan warna dan ukuran teks dilakukan dengan menggunakan atribut – atribut yang ada pada elemen font yaitu :

Attribute Function Face Menunjukkan jenis font yang digunakan pada halaman web Color Menunjukkan warna teks yang digunakan Size Menunjukkan ukuran teks dengan nilai 1 sampai 7

Berikut adalah contoh kode penggunaan tag font pada HTML

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan Elemen Font</title>
 </head>
 <body>
 <p align="justify"><font face="Courier New" color="green" size="3">Claudio Andres Bravo Munoz menandatangani kontrak sebagai kiper FC Barcelona pada musim panas 2014 berasal dari Real Sociedad. Lahir pada 13 April 1983, di kota kecil Viluco de Buin, di daerah Santiago Cile. Ia mulai bermain sepak bola sejak kecil, walaupun awalnya bukanlah sebagai seorang kiper, sebaliknya ia bermain sebagai seorang striker dan kemudian menjadi pemain bertahan.</font></p>
 </body>
</html>

Setelah kode di atas dijalankan di browser, maka akan terlihat seperti gambar di bawah ini

Di dalam penggunaannya saat ini, tag hanya didukung oleh HTML 4.01 tetapi tidak didukung bahkah dihilangkan oleh HTML5. Hal itu dikarenakan penggunaan tag dapat diganti dengan CSS dimana fungsi CSS yang lebih unggul dan efisien dibanding tag .

Berikut adalah contoh penggunaan CSS dalam pengaturan font di HTML

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan CSS - FONT di HTML</title>
 <style type="text/css">
   #p{
   color: #ff00ff;
   font-size: 20px;
   font-weight: bold;
   font-family:Rockwell, Calibri, Monospace;
   font-style : oblique; }

   #p1{
   color:#0000FF;
   font-size: 1em;
   font-weight: normal;
   font-variant: small-caps;
   font-family: Andale Mono;}
 </style>
 </head>
 <body>
 <p id="p">Contoh penggunaan CSS untuk mengatur font style pada suatu teks di HTML</p>
 <p id="p1">Contoh Berikutnya Ini</h5>
 </body>
</html>

_

Hasilnya akan terlihat seperti gambar di bawah ini

Setelah Anda melihat kode CSS dan gambar yang ditampilkan di browser, tentu Anda memiliki banyak pertanyaan seperti fungsi properti font pada kode di atas. Berikut saya berikan sedikit penjelasannya satu per satu (tapi ingat, kita tetap fokus ke HTML dulu, bukan CSS)

A. Ukuran font CSS

Ukuran font digunakan untuk menentukan ukuran karakter teks yang akan ditampilkan. Jadi, Anda dapat menerapkan ukuran font yang berbeda untuk setiap teks dalam dokumen HTML. Anda dapat menggunakan unit piksel, em atau % untuk menentukan ukuran font seperti contoh pada kode sebelumnya yaitu

#p{ font-size: 20px; }
#p1{ font-size: 1em; }

Sangat disarankan untuk menggunakan satuan em daripada piksel di mana 1 em sama dengan 16 piksel. Tapi kalau lebih nyaman pakai pixel juga tidak masalah. Dalam contoh #p1 { font-size. 1em;

B. Keluarga font CSS

Keluarga font digunakan untuk menentukan jenis font yang diterapkan pada dokumen HTML. Sebagai contoh, lihat contoh penggunaan font-family pada kode sebelumnya

#p{ font-family:Rockwell, Calibri, Monospace;}
#p1{ font-family: Andale Mono;}

Pada #p terdapat tiga jenis font yaitu Rockwell, Calibri dan Monospace. Artinya jenis font yang akan diaplikasikan pertama kali adalah Rockwell. Namun jika jenis font Rockwell tidak tersedia di komputer pengguna, maka jenis font yang akan diterapkan adalah Calibri. Kemudian, jika tidak tersedia maka terapkan Monospace yang merupakan font standar

C. Berat font CSS

Font weight digunakan untuk mencetak huruf tebal, berikut contoh pada kodenya
sebelumnya

#p{ font-weight: bold;}
#p1{ font-weight: normal};

_

D. Gaya huruf CSS

Font style digunakan untuk membuat teks yang dicetak miring dimana bisa menggunakan 3 nilai yaitu normal, italic dan oblique. Berikut adalah contoh penggunaan font style

#p{ font-style : oblique;} // Teks ditampilkan berbentuk condong
#p1{ font-style : normal;} // Teks ditampilkan biasa tanpa style
#p2(font-style : italic;} // Teks ditampilkan dalam huruf miring

E. Varian font CSS

Font varian digunakan untuk mencetak teks dalam huruf kapital semua. Berikut adalah contoh penggunaannya

#p{ font-variant: normal;} // Teks normal
#p1{ font-variant: small-caps ;} // Teks ditampilkan dalam huruf kapital semua

_

Setelah membaca artikel di atas, saya harap Anda dapat mengubah warna dan jenis font pada dokumen HTML Anda. Tutorial HTML selanjutnya adalah tentang cara membuat quotes di HTML menggunakan tag q dan blockquote

Bagian 8. Teks Superskrip, Subskrip, Kecil, dan Ditandai

Bagian 10. Cara Membuat Kutipan

Editor. Muhammad Zakaria

Download berbagai jenis aplikasi terbaru mulai dari windows, aplikasi android, driver dan sistem operasi gratis hanya di Nesabamedia. com

Gaya apa yang digunakan untuk mengubah warna teks?

Cara terbaik untuk mengubah warna teks adalah dengan menggunakan CSS . Atribut HTML lama

Properti CSS apa yang dapat mengubah warna teks elemen HTML?

Warna ( warna ) teks pada CSS dapat diubah dengan menggunakan properti color. Properti ini menerima nilai dalam berbagai bentuk seperti nama warna standar HTML dan CSS (nama warna) yang berjumlah 140 buah, nilai warna dalam bentuk kode heksadesimal, kode warna RGB(A) dan warna HSL(A) kode.

kode html