Memformat Teks Pada HTML

Agar artikel yang kita buat lebih enak dibaca dan gampang dipahami maksudnya perlu diperhatikan format teksnya. Dalam hal ini kita bisa mengatur format standar, mengatur font atau juga bisa mengatur list teks seperti bullet numbering.

Pada contoh penggunaan tag berikut ini kita sudah mulai mengenal atribut, yaitu sebuah parameter yang berfungsi mengatur properti sebuah tag. Misal pada tag ada atribut untuk mengatur jenis font, ukuran dan warna teks.

Tag html untuk standar formatting

Ada beberapa pengaturan standar formatting, yaitu:

Cetak tebal (bold atau strong)
ada dua cara yang bisa dipakai yaitu menggunakan tag ... atau ...
Cetak miring (italic atau emphasized)
ada dua cara yang bisa dipakai yaitu menggunakan tag ... atau ...
Cetak garis bawah (underline)
ada dua cara yang bisa dipakai yaitu menggunakan tag ... atau <ins>...</ins>
Cetak lebih rendah (subscript)
menggunakan tag ...
Cetak lebih tinggi (superscript)
menggunakan tag ...
Cetak dicoret (deleted)
menggunakan tag <del>...</del>

Contoh penggunaan tag standar formatting:

 <b>Teks dicetak tebal</b>  
 <strong>Ini juda dicetak tebal</strong>  
 <i>Teks dicetak miring</i>  
 <em>Ini juga dicetak miring</em>  
 <u>Teks digaris bawahi</u>  
 <ins>Ini juga teks digaris bawahi</ins>  
 <sub>Teks cetak lebih rendah</sub>  
 <sup>Teks cetak lebih tinggi</sup>  
 <del>Teks cetak dicoret</del>

Tag html untuk mengatur font

Untuk mengatur font menggunakan tag ....
Ada tiga opsi atribut yang bisa dipakai dalam pengaturan font yaitu:

Mengganti jenis font
menggunakan atribut face, contoh: ...
Mensetting ukuran font
menggunakan atribut size, contoh: ...
Mengubah warna font
menggunakan atribut color, contoh: ....
Ada dua cara dalam menentukan warna font, yaitu dengan menyebut warna langsung seperti diatas atau dengan menyebut kode heksa warna seperti contoh berikut: ...

Contoh penggunaan tag dengan satu atribut :

 <font face="arial">  
 <font size="5">Ini adalah font arial size 5 tanpa set warna<br/>  
 <font color="red">Ini adalah font arialsize 5 dengan set warna merah</font>  
 </font>  
 </font>

Contoh penggunaan tag dengan bayak atribut sekaligus :

 <font face="Courier" size="10" color="blue">Teks Biru ukuran 10 Courier</font>

Tag html untuk membuat list teks tanpa order (bullet)

Berfungsi menata sekumpulan teks menurut list tertentu tanpa urutan pasti. Tag ini mirip fitur bullet pada microsoft word. Tag yang digunakan adalah <ul> yang merupakan singkatan dari unorder list. Secara default, tampilan list akan berbentuk bulat hitam.
Untuk menambah list cukup dengan menambahkan tag <li>...</li> diantara <ul>...</ul> sesuai dengan jumlah list yang diinginkan.

Contoh penggunaan tag <ul>:

 <ul>  
 <li>ini unorder list ke-1</li>  
 <li>ini unorder list ke-2</li>  
 <li>ini unorder list ke-3</li>  
 </ul>

Tag html untuk membuat list teks dengan order (numbering)

Berfungsi menata sekumpulan teks menurut list tertentu dengan urutan yang pasti.Tag ini mirip dengan fitur numbering pada microsoft word. Tag yang digunakan adalah <ol> yang merupakan singkatan dari order list. Secara default tampilan list akan berupa angka urut mulai dari 1.
Sama seperti tag <ul> untuk menambah list dilakukan dengan menyisipkan tag <li>...</li> diantara <ol>...</ol> sejumlah list yang diinginkan.

Contoh penggunaan tag <ol> :

 <ol>  
 <li>ini order list ke-1</li>  
 <li>ini order list ke-2</li>  
 <li>ini order list ke-3</li>  
 </ol>

Contoh rangkuman semua script formatting HTML :

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>Belajar Formatting Teks pada HTML</title>  
 <body>  
  <b>Teks dicetak tebal</b> <br/>  
  <strong>Ini juda dicetak tebal</strong>  <br/>  
  <i>Teks dicetak miring</i>  <br/>  
  <em>Ini juga dicetak miring</em>  <br/>  
  <u>Teks digaris bawahi</u>  <br/>  
  <ins>Ini juga teks digaris bawahi</ins>  <br/>  
  <sub>Teks cetak lebih rendah</sub>  <br/>  
  <sup>Teks cetak lebih tinggi</sup>  <br/>  
  <del>Teks cetak dicoret</del>  <br/>  
  <font face="Courier" size="10" color="blue">Teks Biru ukuran 10 Courier</font>   
  <ul>   
  <li>ini unorder list ke-1</li>   
  <li>ini unorder list ke-2</li>   
  <li>ini unorder list ke-3</li>   
  </ul>   
  <ol>   
  <li>ini order list ke-1</li>   
  <li>ini order list ke-2</li>   
  <li>ini order list ke-3</li>   
  </ol>   
 </body>  
 </html>