Sesuai dengan namanya, Text formatting pada HTML adalah sebuah teks yang berformat sehingga teks tersebut terlihat berbeda dan mudah dibaca. Penglihatan kita akan lebih mudah menemukannya pada teks yang terformat dibandingkan plain text.
Cara membuat Text Formatting di HTML
Kita dapat membuat Text Formatting menggunakan tag-tag khusus, diantaranya :
<b> (bold) atau <strong>, tag untuk membuat teks tebal
<i> (italic) atau <em> (emphasis), tag untuk membuat teks miring
<u> (underlaine) atau <ins> (insert), tag untuk membuat garis bawah pada teks
<s> (strikethrough) atau <del> (delete), tag untuk membuat teks tercoret
<mark> tag untuk membuat marker atau menandai teks
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Text Formatting di HTML</title>
</head>
<body>
<h1>Text Formatting di HTML</h1>
<p> Ini adalah contoh <strong>Text formatting</strong> dalam membuat <b>teks tebal</b> di HTML.</p>
<p>Ini adalah contoh <i>Text formatting</i> dalam membuat <em>teks miring</em> di HTML.</p>
<p>Ini adalah contoh <u>Text formatting</u> dalam membuat <ins>teks garis bawah</ins> di HTML.</p>
<p>Ini adalah contoh <s>Text formatting</s> dalam membuat <del>teks tercoret</del> di HTML.</p>
<p>Ini adalah contoh <mark>Text formatting</mark> dalam membuat <mark>teks marker/penanda</mark> di HTML.</p>
</body>
</html>
Hasil tampilan di browser:
Menggabungkan teks Formatting
Anda dapat menggabungkan berbagai format teks dari beberapa tag yang ada. misalnya kita ingin membuat teks tebal dan garis bawah, maka kita tinggal menggabungkan tag <b> dan <u>.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menggabungkan Teks formatting di HTML</title>
</head>
<body>
<h1>Penggabungan Teks formatting</h1>
<p>
Ini adalah contoh penggabungan format text antara <b><u>tebal dan garis bawah</u></b> di HTML
</p>
</body>
</html>
Hasil tampilan di browser:
Text Formatting untuk membuat Pangkat
Pada Text Formatting juga terdapat tag untuk membuat Pangkat, yakni :
<sup> membuat pangkat di atas
<sub> membuat pangkat di bawah
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Membuat Pangkat di HTML</title>
</head>
<body>
<h1>Membuat Pangkat di HTML</h1>
<p>
Jika A<sup>2</sup> = B1+C1, maka A<sub>2</sub> adalah
</p>
</body>
</html>
Hasil tampilan di browser:
Teks Formatting untuk Komputer
Ada juga teks formatting yang khusus untuk menandai teks yang berasal dari komputer, yaitu :
- <code> untuk menandai bagian dari kode program;
- <samp> menandai output dari program komputer;
- <kbd> menandai tombol keyboard;
- <var> menandai sebuah variabel;
- <pre> Untuk preformatting teks.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Formatting komputer</title>
</head>
<body>
<h1>Teks Formatting untuk Komputer</h1>
<p>
Fungsi <code>console.log()</code> biasanya digunakan untuk debugging.
Karena setiap pesaan error di Javascript selalu ditampilkan di dalam <var>Console</var>.
<br>
Contoh :
<pre>
a = 1;
b = 2;
c = a + b;
console.log(c);
</pre>
Maka hasil outputnya: <samp>3</samp>
</p>
<p>Aktifkan debugging di browser Anda dengan menekan tombol <kbd>F12</kbd>,
dan pilih "Console" di menu debugger. </p>
</body>
</html>
Hasil tampilan di browser:
Begitulah pembahasan tentang Text Formatting di HTML. Untuk artikel berikutnya yaitu Belajar HTML#7
