HTML Dasar: Pemformatan Teks

HTML memberikan kita keleluasaan untuk melakukan formatting teks seperti yang kita lakukan pada teks prosesor semisal Microsoft Office dan lain sebagainya.

Contoh pemformatan teks yang bisa kita lakukan pada HTML semisal: mencetak tebal, mencetak miring, memberi garis bawah, memberi stabilo (marker) dan lain sebagainya.

Pada pertemuan kali ini, kita akan mempelajari dan mencoba satu persatu pemformatan teks yang bisa kita lakukan di dalam dokumen HTML.

Teks Tebal

Yang pertama adalah membuat teks menjadi cetak tebal.

Untuk membuat teks menjadi cetak tebal kita bisa menggunakan dua buah tag:

1. Tag <b></b>
2. dan tag <strong></strong>

Keduanya akan mengubah teks apa pun menjadi tercetak tebal.

Perhatikan contoh berikut:

<p>
  Mencetak tebal sebuah teks <strong>sangat penting untuk
  memberikan</strong> tekanan atau penegasan pada suatu kalimat
</p>

<p>
  Tanpa teks yang tercetak tebal, sebuah paragraf akan
  <b>terlihat monoton</b> dan membosankan karena pembaca
  akan <strong>kesulitan</strong> menemukan intisarinya.
</p>

Hasil keluaran:

Teks Miring

Format berikutnya adalah membuat teks menjadi miring.

Untuk membuat sebuah teks menjadi miring, kita bisa menggunakan tag baik tag <i> atau tag <em>.

Tag <i> untuk italic dan tag <em> untuk emphasis (penegasan).

Perhatikan contoh berikut:

<p>
  Teks miring <i>bisa</i> kita gunakan untuk
  <em>memberikan penekanan</em> terhadap suatu kalimat.
</p>

<p>
  Atau bisa juga kita gunakan untuk penulisan
  <i>foreign words</i> atau kata-kata asing.
</p>

Hasil keluaran:

Apa bedanya tag <i> dan <em>?

Secara tampilan keduanya sama, tidak ada perbedaan. Yang menjadi pembeda hanyalah secara semantic, tag <i> digunakan untuk memiringkan teks (secara universal), dan tag <em> lebih cocok digunakan sebagai penegasan [1]. Jadi ini mostly hanya soal tujuannya saja yang berbeda.

Contoh lainnya:

<h1><i>Teks ini adalah teks italic biasa</i></h1>
<h1><em>Sedangkan teks ini memiliki makna penegasan</em></h1>

Hasil keluaran:

Teks Garis Bawah

Pemformatan teks berikutnya yang bisa kita lakukan dengan HTML adalah memberikan garis bawah pada suatu kalimat.

Untuk melakukannya kita bisa menggunakan baik tag <u> yang bermakna underline, atau tag <ins> yang bermakna insert.

Perhatikan contoh berikut:

<p>
  <ins>Pemformatan teks</ins> berikutnya yang bisa kita lakukan
  dengan HTML adalah <u>memberikan garis bawah</u> pada suatu kalimat.
</p>

<p>
  Untuk melakukannya kita bisa <u>menggunakan</u> baik tag &lt;u&gt;
  yang bermakna <i>underline</i>, <ins>atau</ins> tag &lt;ins&gt;
  yang bermakna <i>insert</i>.
</p>

Hasil keluaran:

Teks Dicoret

Berikutnya kita bisa membuat sebuah teks menjadi tercoret dengan Microsoft Word HTML.

Caranya adalah menggunakan baik tag <s> atau strikethrough mau pun tag <del> atau delete.

Perhatikan contoh berikut:

<h1>Terkadang kita butuh untuk mencoret <s>sesuatu</s></h1>
<p>
  Aku sangat suka mencoret-coret <del>tembok rumah</del> di atas kertas.
</p>

Hasil keluaran:

Teks Pangkat

Berikutnya adalah: kita bisa membuat format teks pangkat dengan HTML. Baik pangkat atas mau pun pangkat bawah.

Untuk pangkat atas kita bisa menggunakan tag <sup>, sedangkan pangkat bawah bisa menggunakan tag <sub>.

Ingat: bedanya adalah huruf p dan huruf b 😁

Contoh:

<h2>satu pangkat <sup>dua</sup></h2>
<h2>satu pangkat <sub>tiga</sub></h2>

<hr>

<p>
  2<sup>3</sup> = 8
</p>

<p>
  Air = H<sub>2</sub>O
</p>

Hasil keluaran:

Teks Stabilo (Marker)

Berikutnya kita bisa membuat sebuah marker atau penanda terhadap sebuah kalimat yang penting seakan-akan kita menggunakan stabilo.

Untuk melakukannya kita bisa menggunakan tag <mark>.

Perhatikan contoh berikut:

<h1>Penggunaan <mark>stabilo</mark></h1>

<p>
  Untuk hal-hal yang bersifat penting, kita bisa
  <mark>memanfaatkan fitur stabilo</mark>.
</p>

Hasil keluaran:

Kita juga bisa memanfaatkan style CSS background atau background-color untuk menggunakan warna lain semisal warna pink, orange, magenta, cyan dan lain sebagainya.

Perhatikan contoh berikut;

<p>
  <mark style="background: pink">Ini adalah</mark> sebuah teks penting
</p>
<p>
  Ini adalah <mark style="background: orange">sebuah teks</mark> penting
</p>
<p>
  Ini adalah sebuah <mark style="background: magenta">teks</mark> penting
</p>
<p>
  Ini adalah sebuah teks <mark style="background: orange">penting</mark>
</p>

Hasil keluaran:

Teks Kecil

Yang berikutnya adalah kita bisa membuat sebuah teks menjadi lebih kecil dari pada ukuran normal pada HTML.

Untuk melakukannya kita bisa menggunakan tag <small>.

Perhatikan contoh berikut:

<h2>Aku adalah <small>sebuah judul</small></h2>

<p>
  Ini adalah <small>contoh paragraf</small> di mana <br>
  ada beberapa <br>
  <small>teks yang</small> terlihat <br>
  lebih kecil <small>dari</small> ukuran normal.
</p>

Hasil keluaran:

Gabungan Dari Beberapa Format

Yang terakhir tapi bukan yang paling akhir: kita bisa menggabungkan berbagai pemformatan teks pada HTML secara sekaligus. Misalkan kita bisa menggabungkan antara teks bercetak tebal dengan garis bawah, atau teks stabilo dengan tercoret, teks berukuran kecil yang juga miring, dan lain sebagainya.

Perhatikan contoh berikut:

<p>
  Misalkan kita bisa <b><u><i>menggabungkan</i></u></b>
  antara teks bercetak tebal <b><u>dengan garis bawah</u></b>,
  atau teks <mark><s>stabilo dengan tercoret</s></mark>
  dan lain sebagainya.
</p>

Hasil keluaran:

Kesimpulan

Kesimpulannya, HTML memberikan kita keleluasaan untuk mengatur dan memformat sebuah teks yang ditampilkan pada layar agar terlihat lebih menarik serta memiliki “makna lebih”.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang tag frasa pada dokumen HTML.

Stay tune!

Referensi

[1] https://www.geeksforgeeks.org/difference-between-i-and-em-tag-of-html/ – diakses tanggal 11 Juni 2021