Belajar HTML Bag. 3 ( Text & Font Formatting )

Keindahan dan daya tarik sebuah judul, tulisan ataupun kombinasi dari keduanya tidak hanya berasal dari isi dari konten tersebut, keindahan kombinasi warna, ukuran, jenis font dan paragraf formatting juga sangat berpengaruh. Pada bagian ini kita akan belajar melakukan formatting pada font dan text / paragraf. Disini kita akan mengunakan sample kode dan hasilnya beserta penjelasan kode-kode tesebut, agar lebih mudah dan cepat anda pahami.
Font Formatting
Untuk melakukan font formatting kita menggunakan tag font, dengan atribut sbb:

color

Digunakan untuk merubah warna font.
Contoh : Font Warna Biru

size

Digunakan untuk merubah ukuran font.
Contoh : Font Ukuran 10

face

Digunakan untuk merubah jenis font.
Contoh : Font Verdana 
Penggunaan ketiga atrribut diatas dapat digabung menjadi 1 tag sbb :
 Font Formatting 
Selain formatting dengan tag standard font, ada beberapa tag formating lain sbb :

bold → Memberikan effect tebal.
italic → Memberikan effect miring.
underline → Memberikan effect garis bawah.
strike → Memberikan effect strike / coretan
big → Memberikan effect huruf besar
small → Memberikan effect huruf kecil.
code → Memberikan effect kode
script → Memberikan effect script
strong → Memberikan effect strong
sup → Memberikan effect superscript
sub → Memberikan effect subscript

Untuk lebih jelasnya silahkan anda gunakan tag-tag tersebut dalam file html dan jalankan pada browser. Cobalah code dibawah ini untuk melihat hasilnya :
Code :
<html>
<head>
<title> Cobalihatsaja Tutorial </title>
</head>
<body>
 Font warna biru 
 Font ukuran 10 
 Font huruf verdana 
 Font Formatting gabungan 
 Font tebal 
 Font miring 
 Font garis bawah 
<s> Font strike </s> 
<big> Font big </big> 
 Font small 
<code> Font code </code> 
<script> Font script </script> 
 Font strong </script> 
 Font superscript 
 Font subscript 
</body>
</html>
Hasil :

Pada contoh kode diatas saya beri tambahan tag break → yang berfungsi untuk berganti baris.
Paragraph Formatting
Untuk paragraf formatting tag-tag yang disediakan sebanyak tag-tag yang digunakan untuk font formatting.
Untuk menandai sebuah text sebagai paragraph, kita harus memberikan tag untuk text tersebut. Contohnya sbb:
 Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. 
Tag sendiri memiliki atribut align yang nilainya dapat diberikan sbb:

left → Untuk membuat paragraf rata kiri.
right → Untuk membuat paragraf rata kanan.
justify → Untuk membuat paragraf rata kanan-kiri.
center → Untuk membuat paragraf rata tengah.

Code :
<html>
<head>
<title> Cobalihatsaja.com Tutorial </title>
</head>
<body>
 Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. 
 Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. 
 Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. 
 Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. 
 Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. 
</body>
</html>
Hasil :