Belajar HTML part3 (Text & Font Formatting) ~ Blogke-bas

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.

<font color=”blue”> Font Warna Biru </font>

Contoh :

size

Digunakan untuk merubah ukuran font.

<font size=”10”> Font Ukuran 10 </font>

Contoh :

face

Digunakan untuk merubah jenis font.
Contoh :

<font face=”verdana”> Font Verdana </font>

Penggunaan ketiga atrribut diatas dapat digabung menjadi 1 tag sbb :

<font color=”blue” size=”10” face=”verdana”> Font Formatting </font>

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 color=”blue”> Font warna biru </font> <br>
<font size=”10”> Font ukuran 10 </font> <br>
<font face=”verdana”> Font huruf verdana </font> <br>
<font color=”blue” size=”10” face=”verdana”> Font Formatting gabungan </font> <br>
<b> Font tebal </b> <br>
<i> Font miring </i> <br>
<u> Font garis bawah </u> <br>
<s> Font strike </s> <br>
<big> Font big </big> <br>
<small> Font small </small> <br>
<code> Font code </code> <br>
<script> Font script </script> <br>
<strong> Font strong </script> <br>
<sup> Font superscript </sup> <br>
<sub> Font subscript </sub> <br>
</body>
</html>

Hasil :

Pada contoh kode diatas saya beri tambahan tag break → <br> 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 <p> untuk text tersebut. Contohnya sbb:

<p> 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. </p>

Tag <p> 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>
<p> 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. </p>
<p align="left"> 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. </p>
<p align="right"> 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. </p>
<p align="justify"> 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. </p>
<p align="center"> 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. </p>
</body>
</html>

Hasil :