Navbar

▼

Jumat, 10 Mei 2013

Belajar Html Format Huruf.


ke bawah

Pada html versi 3.0, untuk membuat variasi huruf seperti warna huruf, ukuran huruf, jenis huruf dll, diatur menggunakan tag <font>. Namun dengan perkembangannya, sejak terciptanya html v.4.01 dan seterusnya cara seperti itu sudah mulai ditinggalkan dan merupakan deprecated tag (usang). Dan sebagai gantinya yang lebih baik dan inovatif digunakan Atribut "style" . Atribut style dapat diterapkan pada tag <body>, tag <p> maupun tag <h> .

Di bawah ini adalah cara-cara menulis html dalam memformat huruf atau tulisan menggunakan atribut style

Jenis huruf.

Untuk menentukan jenis huruf digunakan atribut style dengan properti fon-family

<body style="font-family:verdana">

tulisan dg jenis huruf verdana
</body>

<p style="font-family:arial">

tulisan dg jenis huruf arial

</p>

Ukuran huruf.

Untuk menentukan ukuran huruf digunakan atribut style dengan properti font-size

<p style="font-size:12px">

membuat ukuran huruf 12px

</p>

hasilnya :

membuat ukuran huruf 12 pixel

ukuran huruf 16px

ukuran huruf 20px

ukuran huruf 24px

Menentukan ukuran huruf juga bisa dilakukan dengan mencantumkan nilai/value : big (ukuran huruf lebih besar dari ukuran normal) dan small (ukuran huruf lebih kecil dari ukuran normal).

Huruf lebih besar :

<p style="font-size:big">

ukuran huruf lebih besar dari ukuran normal
</p>

hasilnya :

ukuran huruf lebih besar dari ukuran normal

Huruf lebih kecil :

<p style="font-size:small">

ukuran huruf lebih kecil dari ukuran normal

</p>

hasilnya :

ukuran huruf lebih kecil dari ukuran normal

Huruf tebal.

Untuk membuat huruf tebal digunakan tag <strong> atau atribut style dengan properti font-weight

<p style="font-weight:bold">

tulisan dengan huruf tebal.

</p>

hasilnya :

tulisan dengan huruf tebal

Huruf miring.

Untuk membuat tulisan miring digunakan atribut style dengan properti font-style.

<p style="font-style:italic">

tulisan dg huruf miring

</p>

hasilnya :

tulisan dg huruf miring

garis bawah.

Untuk membuat tulisan bergaris bawah digunakan properti text-decoration yang diletakan pada atribut style.

<p style="text-decoration:underline">

tulisan bergaris bawah

</p>

hasilnya :

tulisan bergaris bawah

garis atas.

Untuk membuat text dengan garis atas, digunakan atribut style dengan properti text-decoration; dengan value overline

<.p style="text-decortation:overline">

tulisan dengan garis atas.

</p>

hasilnya :

teks dengan bergaris atas

Tulisan tercoret.

Untuk membuat huruf/tulisan tercoret, digunakan atribut style dengan properti text-decoration dengan value: line-through.

<p style="text-decoration:line-through">

tulisan ini tercoret

</p>

hasilnya :

tulisan ini tercoret.

Huruf berwarna.

Untuk membuat tulisan berwarna digunakan atribut style dengan properti color .

<p style="color:red">
Tulisan ini berwarna merah

</p>

hasilnya:

Tulisan ini
berwarna merah

Untuk nilai warna dapat ditulis dengan Nama warna (dalam B.Inggris), kode hexadecimal atau nilai rgb. Seperti contoh diatas nilai warna kita ganti dengan kode hexadecimal, maka hasilnya akan sama.

<p style="color:#FF0000;background-color:white;">
Tulisan ini berwarna merah
</p>

hasilnya :

Tulisan ini berwarna merah

Latar belakang warna

Untuk membuat tulisan berlatar belakang warna, digunakan properti background-color: yang diterapkan pada atribut style

<p style="background-color:yellow"> tulisan ini berlatarbelakang warna kuning </p>

hasllnya:

tulisan ini berlatarbelakang warna kuning

Menerapkan beberapa properti dalam satu deklarasi atribut style.

Dalam satu deklarasi atribut style, kita bisa memasukkan bebrapa properti sekaligus, misalnya: font-size, color, font-style, text-decoration dan lainnya :

<p style="font-size:10px; color:deeppink; text-decoration:underline; font-style:italic;">

tulisan dengan beberapa properti, yaitu: font-size, color, text-decoration dan font-style.

</p>

tulisan dengan beberapa properti, yaitu: font-size, color, text-decoration dan font-style.

Membuat huruf lebih keatas dan lebih kebawah

Huruf yang lebih ke atas dan yang lebih ke bawah dari posisi normal ini banyak digunakan untuk menuliskan rumus-rumus dalam matematika, kimia maupun keperluan lainnya.

Untuk membuat huruf lebih keatas dari posisi normal, digunakan tag <sup> (superscript), dan untuk membuat tulisan lebih ke bawah digunakan tag <sub> (subscript). Secara otomatis kedua tag ini membuat tulisan kebih kecil dari ukuran huruf normal.
Di bawah ini contoh cara penulisannya :

normal <sup> lebih keatas </sup> normal

normal <sub> lebih kebawah </sub> normal

Rumus kimia: Air = H<sub>2</sub>O.

Matematika: 12<sup>3</sup> = 1728

Berikut hasilnya:


normal lebih keatas normal

normal lebih kebawah normal

Rumus kimia: Air = H2O.

Matematika: 123 =1728.



back to top

di

Tidak ada komentar:

Posting Komentar