Meong Cat Studios: Format Font HTML

Format Font HTML

Tag HTML untuk font adalah <font>...</font>, dengan tag ini kita bisa menentukan jenis font (face), warna (color), dan ukuran (size), untuk lebih jelasnya mari kita perhatikan contoh berikut ini:

Untuk membuat jenis font (face):

<h1><font face="Verdana">Titel dengan font Verdana</font></h1>
<p><font face="Times">Konten dengan font Times</font></p>

Hasil :

Untuk membuat ukuran (size):

<h1><font size="5">Titel dengan size 5</font></h1>
<p><font size="3">Konten dengan size 3</font></p>

Hasil :

Untuk membuat warna font (color):

<h1><font color="blue">Titel dengan warna biru</font></h1>
<p><font color="red">Konten dengan warna merah</font></p>

Hasil :

Contoh komplit dengan menggabungkan jenis font (face),size dan color sekaligus:

<h1><font face="Verdana" size="4" color="green">Titelnya Tentang Font</font></h1>
<p><font face="Arial" size="3" color="#660000">Ini adalah contoh tulisan dengan <i>pengaturan font</i> yang menggunakan< tag HTML elemen <b>font</b> dengan atribut face, size dan color...</font></p>

Hasil :

Berikut adalah untuk memanipulasi atribut face, color dan size:

face="Jenis font yang digunakan", contoh: face="Tahoma"
size="Ukuran dari font (1-7)", contoh: size="3"
size="Memperbesar ukuran font", contoh: size="+1"
size="Memperkecil ukuran font", contoh: size="-1"
color="Warna dari font", contoh: color="blue"
color="Warna dari font", contoh: color="#FF0000"

Sesuai dengan recomendasi dari World Web Consortium (W3C), untuk HTML 4.0 keatas, tag <font> tidak dipergunakan lagi, sebagai gantinya dibuat atribut <style> atau disebut dengan Cassading Style Sheets (CSS). Berikut adalah contoh penggunaan atribut style sheets:

Untuk membuat jenis font (face):

<h1 style="font-family:verdana">Titel Menggunakan font verdana</h1>
<p style="font-family:tahoma">Konten menggunakan font tahoma</p>

Hasil :

Untuk membuat ukuran (size):

<h1 style="font-size:150%">Titel dengan ukuran 150%</h1>
<p style="font-size:80%">Konten dengan ukuran 80%</p>

Hasil :

Untuk membuat warna font (color):

<h1 style="color:blue">Titel dengan warna Biru</h1>
<p style="color:red">Konten dengan warna merah</p>

Hasil :

Contoh komplit dengan menggabungkan jenis font (face),size dan color sekaligus:

<p style="font-family:verdana;font-size:80%;color:green">
Ini adalah contoh tulisan pengaturan font dengan <i>Cassading Style Sheets</i> (CSS) yang< menggunakan atribut <b>style</b> font-family, font-size dan color...</p>

Hasil :

Berikut akan di bahas lebih lanjut tentang pengaturan for atau format font HTML dengan CSS.

Untuk mengganti jenis font digunakan properti font-family:

<p style="font-family:Georgia">Tulisan dengan font-family Georgia</p>

Tulisan dengan font-family Georgia

Untuk melakukan eksperimen lebih lanjut anda bisa mengganti jenis font-nya dengan font-font yang bisa dilihat di Jenis-jenis Font Family untuk CSS

Untuk membuat tulisan miring digunakan properti font-style:

<p style="font-style:italic">Membuat tulisan miring</p>

Hasil :

Untuk membuat tulisan tebal digunakan properti font-weight:

<p style="font-weight:bold">Membuat tulisan tebal</p>

Hasil :

Untuk mengatur ukuran font digunakan properti font-size:

<p style="font-size:16px">Tulisan dengan ukuran font 16px</p>

Hasil :

Untuk pengaturan ukuran font-size dapat menggunakan satuan px, em, % atau pt. Kode HTML berikut akan menghasilkan ukuran font yang sama.

<p style="font-size:16px">Tulisan dengan ukuran 16px</p>
<p style="font-size:100%">Tulisan dengan ukuran 100%</p>
<p style="font-size:1em">Tulisan dengan ukuran 1em</p>
<p style="font-size:12pt">Tulisan dengan ukuran 12pt</p>

Hasil :

Untuk membuat warna font digunakan properti color:

<p style="color:blue">Tulisan ini akan berwarna biru</p>

Hasil :

Untuk kode warna bisa menggunakan nilai RGB, Hexadecimal atau Nama Warna. Kode HTML berikut akan menghasilkan warna tulisan yang sama.

<p style="color:rgb(0,128,0)">Membuat warna tulisan dengan Nilai RGB</p>
<p style="color:#008000">Membuat warna tulisan dengan Kode Hexadecimal</p>
<p style="color:green">Membuat warna tulisan dengan Nama Warna</p>

Hasil :

Ikuti link berikut untuk melihat nama dan kode hexadecimal warna atau gunakan alat untuk mengetahui kode warna Hexadesimal dan RGB.

Atribut style dapat memiliki beberapa properti dengan dibatasi oleh tanda titik koma.