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 :
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 :
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 :
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 :
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:
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:
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 :
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:
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 :
Demikian tutorial pemrograman HTML (Format Teks) untuk mengembangkan website dengan mudah. Semoga tutorial ini bermanfaat dan terima kasih.