Tata Cara Penulisan Font Kode HTML

Font adalah jenis huruf dalam tulisan, jenis font untuk website/ blog sangat beraneka ragam. Menulis font di website tidak seperti memilih font pada Micrososft Word, melainkan menuliskannya dengan kode HTML.

Dengan belajar tata cara penulisan font menggunakan HTML, Anda akan terlatih mengubah dan membuat font lebih menarik. Anda bisa membuat font miring, tebal, huruf besar, dan lain sebagainya. Pilihlah font yang enak dibaca, dilihat mata bentuknya jelas.

Font sering dipakai adalah arial, trebuchet ms, open sans, georgia, times new roman, dan serif. Jenis font ini mendominasi desain website/ blog. Baiklah supaya Anda paham sebaiknya langsung praktik sesuai contoh berikut ini.

1. Cara Mengganti Jenis Font, gunakan kode font-family:

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

Hasil:

Tulisan dengan font-family Georgia

2. Cara Membuat Tulisan Miring, gunakan font-style:

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

Hasil:

Membuat tulisan miring

3. Cara Membuat Tulisan Tebal, gunakan kode font-weight:

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

Hasil:

Membuat tulisan tebal

4. Cara Mengubah Ukuran Font, gunakan kode font-size:

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

Hasil:

Tulisan dengan ukuran font 16px

5. 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

5. Cara Membuat Warna Font, gunakan kode color:

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

Hasil:

Tulisan ini akan berwarna biru

6. 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 RGBMembuat warna tulisan dengan Kode HexadecimalMembuat warna tulisan dengan Nama Warna

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 Courier">Contoh tulisan dengan properti font</p>

Hasil:

Contoh tulisan dengan properti font