Karyaku UMY

Dari Nol saya Memulai

Format Font HTML

Posted by Rizki Pratama Wijaya 0 Comment

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.

PROFIL AKU

Rizki Pratama Wijaya


Popular Posts

Rebutan Rumah Gratis

Selamat Siang sahabat blogger. Rumah adalah tempat dimana manusia singgah dan ...

Jalur Belakang???

Assalamualaikum Wr.Wb Sampai lupa kalo sudah beberapa hari gak posting nih. ...

Menjadi Panitia PIMN

Assalamualaikum Wr.Wb Selamat sore teman - teman. Bagaimana keadaan kalian hari ...

Warna Baju Baru untu

Assalamualaikum Wr.Wb Selamat Sore blogger semuanya. Bagaimana keadaan kalian hari ini? ...

Pemerintah yang Haru

Salam Solidaritas Hanya pemerintah yang harus bisa mencegah pemuda dan pemudi ...