Cara Memformat Teks pada HTML

Cara Memformat Teks pada HTML - Kita akan membahas bagagaimana Memformat Teks pada HTML.

Kita bisa memformat teks pada HTML yang tadinya teks biasa menjadi teks yang berbeda. Ada tiga yang biasa dan umum digunakan dalam memformat teks yaitu Bold Text, Italic Text, dan Underline Text.

Tidak hanya itu saja, ada juga Marked Text, Deleted Text, Small Text, _{Subscript Text}, dan ^{Superscript Text}.

Berikut ini pembahasan dari masing-masing contoh teks yang telah diformat di atas pada HTML.

#1 Bold Text (Teks Tebal)

Tag yang digunakan untuk membuat teks tebal pada HTML adalah tag <b> (bold) dan tag <strong>. Anda bisa pakai mana saja karena hasilnya akan sama-sama tebal.

Tapi saya lebih seringnya menggunakan tag <strong> pada HTML karena lebih dianjurkan menggunakannya.

Contoh:

<b>Bold Text</b> (teks tebal) berfungsi untuk <strong>memberikan penegasan</strong> pada teks tertentu yang dianggap penting untuk dibaca, misalnya headline, kata atau frase penting pada sebuah kalimat, dll.

Hasilnya:

Bold Text (teks tebal) berfungsi untuk memberikan penegasan pada teks tertentu yang dianggap penting untuk dibaca, misalnya headline, kata atau frase penting pada sebuah kalimat, dll.

#2 Italic Text (Teks Miring)

Teks miring pada HTML dapat kita buat dengan tag <i> (italic) atau tag <em> (emphasis). Kita bisa menggunakan salah satunya dan lebih dianjurkan memakai <em>.

Contoh:

<i>Italic Text</i> (teks miring) biasanya digunakan untuk memberikan penekanan pada teks, sehingga akan <em>menarik perthatian</em> pembaca. Biasanya digunakan pada <i>istilah asing</i> atau kata serapan dari <em>bahasa daerah</em>.

Hasilnya:

Italic Text (teks miring) biasanya digunakan untuk memberikan penekanan pada teks, sehingga akan menarik perthatian pembaca. Biasanya digunakan pada istilah asing atau kata serapan dari bahasa daerah.

#3 Underline Text (Teks Garis Bawah)

Garis bawah di HTML dapat kita buat dengan tag <u> (underlaine) atau <ins> (insert). Kita bisa menggunakan salah satunya dan lebih dianjurkan memakai <ins>.

Contoh:

<u>Underline Text</u> (teks garis bawah) biasanya digunakan untuk menandai <ins>teks yang disisipkan</ins> atau <ins>teks yang mimiliki arti penting</ins> dibandingkan teks normal lainnya.

Hasilnya:

Underline Text (teks garis bawah) biasanya digunakan untuk menandai teks yang disisipkan atau teks yang mimiliki arti penting dibandingkan teks normal lainnya.

#4 Mark Text

Marker bisanya digunakan untuk menandai teks yang penting atau kata kunci yang penting. Marker di HTML dapat kita buat dengan tag <mark>.

Contoh:

Marker biasanya digunakan untuk menandai bagian teks yang penting. Kalau di dunia nyata, kita <mark>menggunakan stabilo</mark> untuk membuat marker.

Hasilnya:

Marker biasanya digunakan untuk menandai bagian teks yang penting. Kalau di dunia nyata, kita menggunakan stabilo untuk membuat marker.

Kita bisa mengganti warna dari kuning ke warna yanng kita ingginkan dengan menggunakan CSS baik secara inline atau menggunakan class name.

#4.1 Penambahan kode CSS secara inline pada tag Mark

<mark style="color:white; background-color: green">Menggunakan stabilo</mark> untuk membuat marker yang berlatar belakang hijau.

Hasilnya:

Menggunakan stabilo untuk membuat marker yang berlatar belakang hijau.

#4.2 Penambahan kode CSS menggunakan class pada tag Mark

<mark class="mark-red">Menggunakan stabilo</mark> untuk membuat marker yang latar belakangnya merah.

Hasilnya:

Menggunakan stabilo untuk membuat marker yang latar belakangnya merah.

mark-red ini disebut nama class sebagai penanda yang sudah dibuat sebelumnya di dalam tag style sehingga kita bisa menggunakannya pada elemen html.

#5 Deleted Text

Teks tercoret memiliki arti teks yang dihapus. Biasanya untuk memberitahu pembaca bahwa teks tersebut tidak dipakai atau dihapus.

Tag untuk membuat teks tercoret pada HTML adalah tag <s> (strikethrough) atau bisa juga dengan tag <del> (delete).

Contoh:

Coretlah teks yang tidak <s>dibutuhkan</s> terpakai, ini bisa memberitahu pembaca tentang perbaikan dari teks tersebut. Kadang juga teks <del>tercoret</del> <ins>yang dicoret</ins>, diperbaiki dengan menambahkan teks dengan garis bawah.

Hasilnya:

Coretlah teks yang tidak dibutuhkan terpakai, ini bisa memberitahu pembaca tentang perbaikan dari teks tersebut. Kadang juga teks tercoret yang dicoret, diperbaiki dengan menambahkan teks dengan garis bawah.

#6 Small Text

Untuk memformat teks menjadi kecil bisa gunakan tag <small>. Contoh:

Tag <small>Small</small> ini biasanya digunakan untuk membuat nota catatan, hak cipta, ataupun komentar.

Hasilnya:

Tag Small ini biasanya digunakan untuk membuat nota catatan, hak cipta, ataupun komentar.

#7 Subscript and Superscript Text

Untuk membuat pangkat pada HTML, kita dapat menggunakan tag <sub> untuk pangkat bawah (subscript)dan <sub> untuk pangkat atas(superscript). Contoh:

Rumus luas persegi adalah S<sup>2</sup>, dimana <i>S</i> adalah sisi dari persegi. Lalu O<sub>2</sub> adalah rumus kimia dari oksigen.

Hasilnya:

Rumus luas persegi adalah S², dimana S adalah sisi dari persegi. Lalu O₂ adalah rumus kimia dari oksigen.

#8 Teks Formatting untuk Komputer

Selain dari teks formatting di atas, ada juga teks formatting yang khusus untuk menandai teks yang berasal dari komputer. Berikut ini beberapa tag yang digunakan untuk memformat teks dari komputer:

• <code> untuk menandai bagian dari kode program;
• <samp> untuk menandai output dari program komputer;
• <kbd> untuk menandai tombol keyboard;
• <var> untuk menandai sebuah variabel;
• <pre> untuk preformatting teks.

Contoh:

<p>Perintah javascript untuk menampilkan teks ke console adalah <code>console.log()</code>. 
Kita juga bisa menampilkan isi variabel dengan fungsi ini.</p>
<p>Misalkan kita punya variabel <var>name</var>, maka kode programnya bisa ditulis seperti ini:</p>
    <pre>
      var name = "Petani Kode";
      console.log(name);
    </pre>
<p>Maka hasil outputnya: <samp>Petani Kode</samp></p>
<p>
Untuk menjalankan ulang program, lakukan refresh dengan menekan tombol
<kbd>F5</kbd>
</p>

Hasilnya:

Perintah javascript untuk menampilkan teks ke console adalah console.log(). Kita juga bisa menampilkan isi variabel dengan fungsi ini.

Misalkan kita punya variabel name, maka kode programnya bisa ditulis seperti ini:

    var name = "Petani Kode";
    console.log(name);
    

Maka hasil outputnya: Petani Kode

Untuk menjalankan ulang program, lakukan refresh dengan menekan tombol F5

#9 Menggabungkan Format

Apakah format teks dapat digabungkan? Misalkan kiga ingin membuat teks tebal dan garis bawah, apakah bisa? Tentu saja bisa.

Caranya tinggal dipakai saja tag-tagnya, misal mau menggabungkan bold dengan underline. maka kita tinggal pakai tag <b> dan <u>.

Contoh:

<b><u>Teks tebal yang digaris bawahi</u></b>

Hasilnya:

Teks tebal yang digaris bawahi

Demikianlah Cara Memformat Teks pada HTML, semoga bermanfaat.

Buka lainnya di Tutorial HTML untuk Blogger Pemula.