Tag <font> termasuk salah satu (Deprecated tags) dimana saat ini sudah jarang digunakan karena sudah ada
alternatif pengganti yang lebih baik untuk tag tersebut. Untuk Tag <font>
sebagai gantinya digunakan atribut style atau CSS. Untuk penjelasan singkat
tentang CSS ini bisa di baca di Belajar CSS.
Pada tulisan sebelumnya tentang
Belajar HTML dengan topik Format Font HTML telah dibuat beberapa contoh format font dengan menggunakan
tag <font>. Di tutorial HTML ini kita akan melupakan tag tersebut dan
beralih menggunakan atribut style.
Untuk mengganti jenis font digunakan
properti font-family:
<p
style="font-family:Georgia">Tulisan dengan font-family
Georgia</p>
Hasil:
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:
Membuat tulisan miring
Untuk membuat tulisan tebal
digunakan properti font-weight:
<p
style="font-weight:bold">Membuat tulisan tebal</p>
Hasil:
Membuat tulisan tebal
Untuk mengatur ukuran font digunakan
properti font-size:
<p
style="font-size:16px">Tulisan dengan ukuran font 16px</p>
Hasil:
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>
Hasil:
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>
Hasil:
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>
Hasil:
Membuat warna tulisan dengan Nilai
RGB
Membuat warna tulisan dengan Kode
Hexadecimal
Membuat warna tulisan dengan Nama
Warna
Ikuti link berikut untuk melihat Kode Hexadecimal dan Nama Warna atau gunakan tool kode warna untuk melihat nilai RGB.
Atribut style dapat memiliki
beberapa properti dengan dibatasi oleh tanda titik koma.
<p
style="font-family:Georgia;font-size:16px;font-weight:bold;">Contoh
tulisan dengan font-family, font-size dan font-weight</p>
Hasil:
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">Contoh tulisan dengan properti
font.</p>
Hasil:
Contoh tulisan dengan properti font.
0 komentar:
Posting Komentar