Ayam Koding

Belajar Algoritme & Pemrograman

Macam-Macam Format Teks HTML

Updated on 2017-01-03

Kali ini kita akan membahas mengenai macam-macam format teks HTML. Pernah kita menjumpai penulisan teks untuk fungsi pangkat maupun kuadrat pada HTML, untuk menampilkan teks tersebut memerlukan tag seperti subscript. Ada banyak penggunaan format pada HTML antara lain:

1. Format Teks Strike

Format ini digunakan untuk menampilkan teks tercoret dan menggunakan elemen tag <strike>…</strike>

Contoh :

<!DOCTYPE html>
<html>
    <head>
    <title>Contoh Teks Coretan</title>
    </head>
    <body>
    <p>Teks ini <strike>tercoret</strike> hehehe.</p>
</body>
</html>

Output :

Tutorial Pemrograman HTML (Format Teks) coretan

2. Format Teks Superscript

Format ini digunakan untuk menampilkan teks setengah dari ukuran font yang ada dan berada diatasnya. Bisa digunakan untuk memberikan pangkat atas. Menggunakan elemen <sup>…</sup>.

Contoh :

<!DOCTYPE html>
<html>
    <head>
    <title>Contoh Teks Superscript</title>
    </head>
    <body>
    <p>Ini Teks <sup>superscript</sup>, hasil dari 2<sup>2</sup> adalah 4.</p>
    </body>
</html>

Output :

Tutorial Pemrograman HTML (Format Teks)

3. Format Teks Subscript

Format ini digunakan untuk menampilkan teks setengah dari ukuran font dan berada dibawahnya. Menggunakan elemen <sub>…</sub>.

Contoh :

<!DOCTYPE html>
<html>
    <head>
    <title>Contoh Teks Subscript</title>
    </head>
    <body>
    <p>Ini Teks <sub>Subscript</sub>, misalnya F<sub>1</sub> = F<sub>2</sub></p>
    </body>
</html>

Output :

Tutorial Pemrograman HTML (Format Teks) subscript

4. Format Teks Monospace font

Untuk menggunakan format teks font monospace dapat menggunakan elemen <tt>…</tt>.

Contoh :

<!DOCTYPE html>
<html>
    <head>
    <title>Contoh Monospaced Font</title>
    </head>
    <body>
    <p>Teks ini menggunakan  <tt>monospaced</tt> font.</p>
    </body>
</html>

Output :

Tutorial Pemrograman HTML (Format Teks) monospaced

5. Format Teks Deleted

Format teks ini digunakan menampilkan teks terhapus(removed) menggunakan elemen tag <del>..</del>.

Contoh:

<!DOCTYPE html>
<html>
    <head>
    <title>Contoh Teks Deleted</title>
    </head>
    <body>
    <p>Warna kesukaan saya adalah <del>hijau</del> merah.</p>
    </body>
</html>

Output:

Tutorial Pemrograman HTML (Format Teks) deleted

6. Format Teks Inserted

Format teks digunakan untuk menambahkan teks menggunakan elemen tag <ins>…</ins>.

Contoh:

<!DOCTYPE html>
<html>
    <head>
    <title>Contoh Inserted Teks</title>
    </head>
    <body>
    <p>Saya mau minum <del>susu</del> <ins>teh</ins></p>
    </body>
</html>

Output:

Tutorial Pemrograman HTML (Format Teks) inserted

7. Format Teks Besar (Larger Text)

Format ini digunakan untuk memberikan teks lebih besar daripada teks lain dalam sebuah konten. Menggunakan elemen tag <big>…</big>.

Contoh :

<!DOCTYPE html>
<html>
    <head>
    <title>Contoh Teks Besar</title>
    </head>
    <body>
    <p>Ini teks <big>besar</big> sekali.</p>
    </body>
</html>

 

Output :

Tutorial Pemrograman HTML (Format Teks)

8. Format Teks Kecil (Smaller Text)

Format ini digunakan untuk memberikan teks lebih kecil daripada teks lain dalam suatu konten. Menggunakan elemen tag <small>…</small>.

Contoh:

<!DOCTYPE html>
<html>
    <head>
    <title>Contoh Teks Kecil</title>
    </head>
    <body>
    <p>Ini teks <small>kecil</small> sekali.</p>
    </body>
</html>

Output:

Tutorial Pemrograman HTML (Format Teks) smaller text

9. Format Teks Marked

Format ini digunakan untuk menandai sebuah teks dalam HTML. Menggunakan elemen tag <mark>…</mark>.

Contoh :

<!DOCTYPE html>
<html>
    <head>
    <title>Contoh Marked Teks</title>
    </head>
    <body>
    <h2>Penggunaan HTML <mark>Marked</mark> Formatting</h2>
    </body>
</html>

Output :

Tutorial Pemrograman HTML (Format Teks) marked

Demikian tutorial pemrograman HTML (Format Teks) untuk mengembangkan website dengan mudah. Semoga tutorial ini bermanfaat dan terima kasih.