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>

Titel dengan font Verdana

Konten dengan font Times


Untuk membuat ukuran (size):

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

Titel dengan size 5

Konten dengan size 3


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>

Titel dengan warna biru

Konten dengan warna merah


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>

Titelnya Tentang Font

Ini adalah contoh tulisan dengan pengaturan font yang menggunakan tag HTML elemen font dengan atribut face, size dan color...


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>

Titel Menggunakan font verdana

Konten menggunakan font tahoma


Untuk membuat ukuran (size):

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

Titel dengan ukuran 150%

Konten dengan ukuran 80%


Untuk membuat warna font (color):

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

Titel dengan warna Biru

Konten dengan warna merah


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>

Ini adalah contoh tulisan pengaturan font dengan Cassading Style Sheets (CSS) yang menggunakan atribut style font-family, font-size dan color...


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>

Membuat tulisan miring


Untuk membuat tulisan tebal digunakan properti font-weight:

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

Membuat tulisan tebal


Untuk mengatur ukuran font digunakan properti font-size:

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

Tulisan dengan ukuran font 16px


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>

Tulisan dengan ukuran 16px

Tulisan dengan ukuran 100%

Tulisan dengan ukuran 1em

Tulisan dengan ukuran 12pt


Untuk membuat warna font digunakan properti color:

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

Tulisan ini akan berwarna biru


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>

Membuat warna tulisan dengan Nilai RGB

Membuat warna tulisan dengan Kode Hexadecimal

Membuat warna tulisan dengan Nama Warna


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.

<p style="font-family:Georgia;font-size:16px;font-weight:bold;">Ini adalah contoh tulisan dengan font-family, font-size dan font-weight</p>

Ini adalah contoh tulisan dengan font-family, font-size dan font-weight


Kemudian style tersebut diatas dapat di persingkat dengan menggunakan properti font.

<p style="font:bold 16px Georgia">Ini adalah contoh tulisan dengan properti font.</p>

Ini adalah contoh tulisan dengan properti font.


No comments:

Post a Comment