Cara merubah warna tulisan di php

Question

Table of Contents Show

Element Font
A. CSS font size
B. CSS font family
C. CSS font weight
D. CSS font style
E. CSS font variant
Bagaimana cara merubah warna huruf?
Apa nama tag untuk mengubah warna tulisan?
Atribut apa yang digunakan untuk mengubah warna sebuah teks?
Tuliskan langkah mengubah warna tulisan pada text box?

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.

Akan tetapi jika anda memaksa untuk menggunakan di file HTML5 akan masih tetap bisa tampil di browser, akan tetapi tidak tervalidasi ketika anda sudah mulai hosting atau mempublikasikan file HTML tersebut.

Dan pada jaman sekarang kebanyakan orang mengubah warna teks tidak menggunakan bahasa HTML akan tetapi menggunakan bahasa CSS karena mendukung untuk file HTML5

Attribut color pada teks font bernilai nama warna yang telah disupport oleh browser anda, dan ada 140 nama warna yang telah disupport oleh browser modern seperti Chrome, Firefox, Edge. Selain menggunakan nama warna anda juga bisa menentukan warnanya dengan menggunakan nilai rgb atau hexnya

agar kalian lebih memahaminya coba perhatikan contoh dibawah ini :

Source Code :

<!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>

Output :

PENJELASAN :

Dari Contoh di atas kita bisa lihat outputnya bahwa teks akan berubah menjadi warna sesuai warna yang telah di tentukan akan tetapi jika kita menggunakan color name akan berbeda warna ketika kita menggunakan hexadecimal dan rgb
karena color name merupakan warna yang memiliki nilai hexadecimal tertentu sedangkan pada rgb warnanya tidak sesuai dan hal itu yang membuat tag font tidak digunakan lagi karena telah usang

PENUTUP

Dari tutorial di atas kita dapat menyimpulkan bahwa sebaiknya tidak menggunakan tag font untuk mengubah warna dan lebih baik menggunakan CSS untuk mengubah warna. Tapi saya membuat Tutorial ini agar kalian mengerti bagaimana mengubah warna teks dengan menggunakan HTML saja tanpa menggunakan CSS karena sebelum kalian mengenal CSS kalian harus mengenal terlebih dahulu HTML, karena HTML merupakan sebuah Bahasa untuk menampilkan sebuah konten pada sebuah Halaman Web.

Sedangkan CSS dan JavaScript hanya untuk memperindah tampilan dari suatu konten HTML, dan jika di analogikan HTML adalah sebuah Rumah, sedangkan CSS adalah cat dan aksesoris yang berada di dalam rumah, dan JavaScript adalah sebagai Lukisan pada sebuah rumah yang membuat rumah anda lebih cantik.

Sekian Tutorial yang dapat saya buat saya berharapa kalian dapat memahaminya dengan baik. dan Jangan Lupa Bookmark jika anda menyukai tutorial yang saya buat.

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

Ada beberapa hal yang harus kita perhatikan seperti apakah jenis font yang diterapkan sesuai dengan desain website, apakah jenis font yang diterapkan memudahkan pengunjung membaca konten di website, apakah jenis font tersebut sesuai dengan tema atau topik dari website ataupun kontennya dan apakah warna teks yang diterapkan sesuai dengan background serta tidak menyulitkan pengunjung untuk membaca teks tersebut dan sebagainya.

HTML sendiri menyediakan elemen – elemen yang khusus untuk mengatur penerapan font dan warna pada dokumen HTML. Ada banyak jenis font yang dapat kita gunakan tetapi kita juga harus ingat bahwa font yang akan ditampilkan pada web browser secara keseluruhan berasal dari komputer user. Tidak menjadi masalah jika browser yang digunakan berasal dari komputer kita tetapi jika dibuka di browser pada komputer lain bisa saja desain web yang sudah dirancang menjadi kacau karena jenis font yang diterapkan tidak tersedia pada komputer tersebut.

Oleh karena itulah digunakan font standar yang umumnya tersedia di Windows, Linux, Mac OS dan yang lainnya. Font standar umumnya didukung oleh mayoritas web browser jadi Anda tidak perlu khawatir. Berikut jenis – jenis font standar yang dapat Anda gunakan :

1. Jenis Font Serif

Font serif adalah jenis font yang memiliki kaki pada setiap hurufnya seperti Times New Roman dan Georgia. Font jenis ini cenderung rapid dan mudah dibaca sehingga umumnya digunakan untuk media cetak kertas.

2. Jenis Font Monospace

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

3. Jenis Font Sans-Serif

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

4. Jenis Font Cursive

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

5. Jenis Font Fantasy

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

Agar Anda lebih memahami materi warna teks dan jenis font di HTML, mari simak penjelasan dibawah ini :

Element Font

Dengan tag font, Anda dapat mengatur ataupun mengubah warna dan ukuran suatu 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 :

AtributFungsiFaceMenyatakan jenis font yang digunakan pada halaman webColorMenyatakan warna teks yang digunakanSizeMenyatakan ukuran suatu teks dengan nilai 1 sampai 7

Berikut contoh kode penggunaan tag font di 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 diatas dijalankan pada browser maka akan terlihat seperti gambar dibawah 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 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 dibawah ini :

Setelah Anda melihat kode CSS dan gambar tampilannya di browser, tentunya Anda memiliki banyak pertanyaan seperti apa fungsi dari properti – properti font yang ada pada kode diatas. Berikut saya berikan sedikit penjelasannya satu per satu (tapi ingat ya, kita tetap fokus di HTML dulu bukan CSS) :

A. CSS font size

Font size digunakan untuk menentukan ukuran dari karakter teks yang akan ditampilkan. Jadi, Anda bisa menerapkan ukuran font yang berbeda-beda untuk setiap teks yang ada pada dokumen HTML. Anda bisa menggunakan satuan pixel, em ataupun % untuk menentukan ukuran font-nya seperti contoh yang ada pada kode sebelumnya yaitu :

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

Sangat disarankan untuk menggunakan satuan em daripada pixel dimana 1em sama dengan 16 pixel. Tapi jika anda lebih nyaman menggunakan pixel juga tidak masalah. Pada contoh #p1 { font-size: 1em; }, nilai pixel-nya adalah 16 pixel karena 16 pixel / 16 = 1em.

B. CSS font family

Font family digunakan untuk menentukan jenis font yang diterapkan pada dokumen HTML. Sebagai contoh lihatlah contoh penggunaan font-family pada kode sebelumnya yaitu :

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

Pada #p, terdapat tiga jenis font yaitu Rockwell, Calibri dan Monospace. Yang mana maksudnya adalah jenis font yang pertama kali akan diterapkan adalah Rockwell. Tetapi jika jenis font Rockwell tidak tersedia pada komputer user maka jenis font yang akan diterapkan menjadi Calibri. Kemudian, jika tidak tersedia juga barulah menerapkan Monospace yang merupakan font standar.

C. CSS font weight

Font weight digunakan untuk mencetak huruf tebal, berikut contohnya pada kode
sebelumnya:

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

D. CSS font style

Font style digunakan untuk membuat tek tercetak miring dimana Anda dapat menggunakan 3 nilai yaitu normal, italic dan oblique. Berikut 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. CSS font variant

Font variant digunakan untuk mencetak teks dalam bentuk huruf kapital semua. Berikut contoh penggunaannya :

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

Setelah membaca artikel diatas, saya harap Anda sudah bisa mengganti warna beserta jenis fontnya pada dokumen HTML anda. Tutorial HTML berikutnya mengenai cara membuat kutipan di HTML dengan menggunakan tag q dan blockquote.

Part 8: Superscript, Subscript, Small dan Marked Text

Part 10: Cara Membuat Quote (Kutipan)

Editor: Muchammad Zakaria

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

Bagaimana cara merubah warna huruf?

Masuk ke Format > Font > Font. + D untuk membuka kotak dialog Font. Pilih panah di samping Warna font, lalu pilih warna.

Apa nama tag untuk mengubah warna tulisan?

Dengan tag font, Anda dapat mengatur ataupun mengubah warna dan ukuran suatu teks.

Atribut apa yang digunakan untuk mengubah warna sebuah teks?

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