Cara menggunakan font warna html

Question

Table of Contents Show

Cara Menyesuaikan Ukuran, Warna, dan Jenis Huruf di HTML
Gaya apa yang digunakan untuk mengubah warna teks?
Apa itu kode warna HTML?
Elemen apa yang digunakan untuk mengubah warna font dan ukuran teks?

Untuk kali ini saya akan membagikan bagaimana caranya mengubah warna teks menggunakan HTML saja tanpa CSS kalian bisa menggunakan tag font dengan menambah kan attribut color pada tag font, akan tetapi cara ini tidak saya rekomendasikan karena cara ini tidak mensupport untuk file HTML5, karena tag font ini sudah kuno untuk digunakan di HTML5.

Namun, jika Anda bersikeras menggunakan file HTML5, file tersebut masih dapat muncul di browser, tetapi tidak akan divalidasi saat Anda mulai menghosting atau menerbitkan file HTML.

Dan saat ini, kebanyakan orang mengubah warna teks tidak menggunakan bahasa HTML tetapi menggunakan bahasa CSS karena mendukung file HTML5

Atribut warna pada teks font sebanding dengan nama warna yang telah didukung oleh browser Anda, dan terdapat 140 nama warna yang telah didukung oleh browser modern seperti Chrome, Firefox, Edge. Selain menggunakan nama warna, Anda juga bisa menentukan warna dengan menggunakan nilai rgb atau hex

agar anda dapat lebih memahaminya, coba perhatikan contoh di bawah ini

Kode sumber

<!DOCTYPE html>
<html>
  <head>
    <title>Mengubah Warna Tulisan menggunakan HTML</title>
  </head>
  <body>
    <h1>Contoh pemberian warna pada HTML</h1>
    <h4>Teks ini menggunakan colornames :
      <font color="red">Merah</font>
      <font color="green">Hijau</font>
      <font color="blue">Biru</font>
    </h4>
    <h4>Teks ini menggunakan RGB(0-255,0-255,0-255) :
      <font color="rgb(255, 0, 0)">Merah 255</font>
      <font color="rgb(0,255,0)">Hijau 255</font>
      <font color="rgb(0,0,255)">Biru 255</font>
    </h4>
    <h4>Teks ini menggunakan HEXADECIMAL :
      <font color="#FF0000">Merah 255</font>
      <font color="#00FF00">Hijau 255</font>
      <font color="#0000FF">Biru 255</font>
    </h4>
  </body>
</html>

Keluaran

PENJELASAN

Dari contoh di atas kita bisa melihat output bahwa teks akan berubah menjadi warna sesuai dengan warna yang telah ditentukan tetapi jika kita menggunakan nama warna akan menjadi warna yang berbeda ketika kita menggunakan hexadecimal dan rgb
karena nama warna adalah warna yang memiliki nilai heksadesimal tertentu, sedangkan di rgb warnanya tidak sesuai dan itu yang membuat tag font tidak lagi digunakan karena sudah usang

PENUTUPAN

Dari tutorial di atas dapat kita simpulkan bahwa lebih baik tidak menggunakan tag font untuk mengubah warna dan lebih baik menggunakan CSS untuk mengubah warna. Namun tutorial ini saya buat agar anda bisa mengerti cara mengubah warna teks hanya dengan menggunakan HTML saja tanpa menggunakan CSS karena sebelum anda mengenal CSS anda harus mengetahui HTML terlebih dahulu, karena HTML adalah bahasa untuk menampilkan konten pada Halaman Web

Sedangkan CSS dan JavaScript hanya untuk memperindah tampilan suatu konten HTML, dan jika dianalogikan HTML adalah sebuah Rumah, sedangkan CSS adalah cat dan aksesoris di dalam rumah, dan JavaScript seperti Lukisan pada rumah yang membuat rumah anda menjadi lebih indah.

Sekian tutorial yang dapat saya buat, semoga anda dapat memahaminya dengan baik. dan Jangan Lupa Bookmark jika suka dengan tutorial yang saya buat

KeyzeX - Font merupakan satu set karakter. Font terdiri atas huruf, angka, simbol dan tanda baca kemudian fon dapat dibedakan dari ukuran, ketebalan, warna, serta jenisnya. Untuk mengatur font pada HTML kita menggunakan tag . Tag ini menggunakan 3 attribut, yaitu : untuk mengatur jenis dari font, untuk mengatur warna dari font, dan terakhir untuk mengatur ukuran dari font, mudah bukan Cara Mengatur Ukuran, Warna, dan Jenis Font di HTML?

Dengan menggunakan kode di bawah ini, Anda dapat menentukan ukuran dan jenis keluaran browser

<p><font size="2" face="Verdana">
KeyzeX Programming.
</font></p>
<p><font size="3" face="Times">
Media Edukasi Seputar Blog dan Bahasa Pemrograman.
</font></p>

_
Dapat disimpulkan bahwa penggunaan tag font dapat menambahkan lebih dari 1 atribut yang ada. Pada tutorial Setting Ukuran, Warna, dan Tipe Font pada HTML akan kita bahas lebih lanjut

(Baca juga. Membuat Formulir dan Input dalam HTML)

Cara Menyesuaikan Ukuran, Warna, dan Jenis Huruf di HTML

1. Menggunakan Ukuran Font dalam HTML

Font size disini berguna untuk mengatur ukuran font. Contoh di bawah ini menunjukkan cara mengatur ukuran font

<html>
<body>
<font size="1"> KeyzeX Programming - Font Size 1</font><br/> <!-- Tag br ini berfungsi sebagai enter atau untuk membuat garis baru -->
<font size="2"> KeyzeX Programming - Font Size 2</font><br/> <!-- Tag br ini berfungsi sebagai enter atau untuk membuat garis baru -->
<font size="3"> KeyzeX Programming - Font Size 3</font><br/> <!-- Tag br ini berfungsi sebagai enter atau untuk membuat garis baru -->
<font size="4"> KeyzeX Programming - Font Size 4</font><br/> <!-- Tag br ini berfungsi sebagai enter atau untuk membuat garis baru -->
<font size="5"> KeyzeX Programming - Font Size 5</font><br/> <!-- Tag br ini berfungsi sebagai enter atau untuk membuat garis baru -->
<font size="6"> KeyzeX Programming - Font Size 6</font><br/> <!-- Tag br ini berfungsi sebagai enter atau untuk membuat garis baru -->
<font size="7"> KeyzeX Programming - Font Size 7</font><br/> <!-- Tag br ini berfungsi sebagai enter atau untuk membuat garis baru -->
</body>
</html>

2. Menggunakan Font Face pada HTML

Font face disini berguna untuk mengubah jenis font. Contoh di bawah ini menunjukkan cara mengubah jenis font

<html>
<body>
<font face="Arial"> KeyzeX Programming - Font Face Arial</font><br/> <!-- Tag br ini berfungsi sebagai enter atau untuk membuat garis baru -->
<font face="Comic Sans MS"> KeyzeX Programming - Font Face Comic Sans MS</font><br/> <!-- Tag br ini berfungsi sebagai enter atau untuk membuat garis baru -->
<font face="Licida Dingbom"> KeyzeX Programming - Font Face Licida Dingbom</font><br/> <!-- Tag br ini berfungsi sebagai enter atau untuk membuat garis baru -->
<font face="Microsoft Sans Serif"> KeyzeX Programming - Font Face Microsoft Sans Serif</font><br/> <!-- Tag br ini berfungsi sebagai enter atau untuk membuat garis baru -->
<font face="Times"> KeyzeX Programming - Font Face Times</font><br/> <!-- Tag br ini berfungsi sebagai enter atau untuk membuat garis baru -->
</body>
</html>

3. Menggunakan Warna Font dalam HTML

Font color disini berguna untuk mengubah warna Font. Contoh di bawah ini menunjukkan cara mengubah warna font

<html>
<body>
<font Color="Red"> KeyzeX Programming - Font Color Merah</font><br/> <!-- Tag br ini berfungsi sebagai enter atau untuk membuat garis baru -->
<font Color="Green"> KeyzeX Programming - Font Color Hijau</font><br/> <!-- Tag br ini berfungsi sebagai enter atau untuk membuat garis baru -->
<font Color="Blue"> KeyzeX Programming - Font Color Biru</font><br/> <!-- Tag br ini berfungsi sebagai enter atau untuk membuat garis baru -->
</body>
</html>

_
4. Jangan lupa untuk menyimpannya dengan ekstensi file. html dan lihat hasilnya

Sebagai tambahan, tag disisihkan pada versi terakhir HTML (HTML4 dan XHTML). W3C telah membuang tag tag dari rekomendasinya. Pada versi HTML terbaru, style sheet atau CSS dipergunakan untuk mendefinisikan properti layout dan display elemen HTML.

(Baca juga. Pengertian dan Kelebihan HTML5)

Berikut adalah contoh dari Style Sheet

<html>
<head>
<title> KeyzeX Programming </title>
<style type="Text/CSS">
body{
 background-color : yellow;
 font-family : Comic Sans MS;
 font-color : Red;
 font-size : 36px;
</style>
</head>
<body>
<p> KeyzeX Programming - Media Edukasi Seputar Blog dan Bahasa Pemrograman </p>
</body>
</html>

Demikian artikel tentang Cara Mengatur Ukuran, Warna, dan Jenis Huruf Pada HTML. Tutorial selanjutnya akan mencakup CSS, jadi pantau terus

SEMOGA BERMANFAAT