Format Teks HTML

Apa itu Format Teks?

Format teks adalah gaya cetak pada teks,

Misalnya bold, italic, underline, subscript, superscript, dan semacamnya.

Format teks dalam HTML juga dihitung sebagai elemen, maka dari itu kita akan membutuhkan tag.

Tulisan Tebal

Untuk menebalkan tulisan, ada 2 tag yang bisa digunakan, yaitu <b> dan <strong>.

Mari kita coba dengan menebalkan teks "website" dan "aplikasi":

<p>HTML adalah bahasa markup standar yang digunakan untuk membuat halaman website. Kita bisa membuat <b>website</b> dan <strong>aplikasi</strong> dengan menggunakan HTML.</p>
<p>Mempelajari HTML adalah langkah awal untuk menjadi seorang developer atau programmer.</p>
<p>Banyak praktek, rasa ingin tahu, dan uji coba banyak hal adalah langkah tercepat untuk menguasai programming.</p>

Hasilnya akan seperti ini:

Coba Sendiri: Format Tebal

Sekarang giliran Anda mencoba! Edit kode di bawah ini dan tebalkan beberapa kata:

<p>
 HTML adalah bahasa markup standar yang digunakan untuk membuat halaman
 website. Kita bisa membuat website dan aplikasi dengan menggunakan HTML.
</p>
​
<p>
 Mempelajari HTML adalah langkah awal untuk menjadi seorang developer atau
 programmer.
</p>

Tulisan Miring

Ada 2 tag yang bisa digunakan untuk membuat tulisan miring, yaitu menggunakan <i> dan <em>.

Mari kita coba memiringkan teks "developer" dan "programmer":

<p>HTML adalah bahasa markup standar yang digunakan untuk membuat halaman website. Kita bisa membuat <b>website</b> dan <strong>aplikasi</strong> dengan menggunakan HTML.</p>
​
<p>Mempelajari HTML adalah langkah awal untuk menjadi seorang <i>developer</i> atau <em>programmer</em>.</p>
​
<p>Banyak praktek, rasa ingin tahu, dan uji coba banyak hal adalah langkah tercepat untuk menguasai programming.</p>

Hasilnya akan seperti ini:

Coba Sendiri: Format Miring

Mari praktik memiringkan teks! Edit kode di bawah ini:

<p>
 Mempelajari HTML adalah langkah awal untuk menjadi seorang developer atau
 programmer.
</p>
<p>
 Banyak praktek, rasa ingin tahu, dan uji coba banyak hal adalah langkah
 tercepat untuk menguasai programming.
</p>

Garis Bawah

Hanya ada satu tag yang ditujukan untuk menggaris bawahi tulisan, yaitu tag <u>.

Mari kita coba dengan menggaris bawahi kata "Banyak praktek" dan "uji coba":

<p>
 HTML adalah bahasa markup standar yang digunakan untuk membuat halaman
 website. Kita bisa membuat <b>website</b> dan <strong>aplikasi</strong> dengan
 menggunakan HTML.
</p>
<p>
 Mempelajari HTML adalah langkah awal untuk menjadi seorang
 <i>developer</i> atau <em>programmer</em>.
</p>
<p>
 <u>Banyak praktek</u>, rasa ingin tahu, dan <u>uji coba</u> banyak hal adalah
 langkah tercepat untuk menguasai programming.
</p>

Hasilnya akan seperti ini:

Umumnya garis bawah digunakan untuk menandai sebuah link. (terkadang browser secara otomatis menggaris bawahi link)

Misal: Link Menuju Wikipedia

Jadi, sepertinya Anda tidak akan menggunakan tag <u> di dalam HTML.

Karena akan membingungkan pembaca di mana mereka akan menganggap teks yang digaris bawahi sebagai sebuah link (karena umumnya begitu).

Subscript & Superscript

Subscript dan superscript keduanya jarang digunakan.

Biasanya digunakan untuk menulis rumus kimia semisal O2 dan H2O,

Juga digunakan untuk menandai footnotes seperti: [1]

Tag yang digunakan untuk subscript adalah <sub>, dan superscript tagnya adalah <sup>.

Mari kita coba:

<p>
 HTML adalah bahasa markup standar yang digunakan untuk membuat halaman
 website. Kita bisa membuat <b>website</b> dan <strong>aplikasi</strong> dengan
 menggunakan HTML.
</p>
<p>
 Mempelajari HTML adalah langkah awal untuk menjadi seorang
 <i>developer</i> atau <em>programmer</em>.
</p>
<p>
 <u>Banyak praktek</u>, rasa ingin tahu, dan <u>uji coba</u> banyak hal adalah
 langkah tercepat untuk menguasai programming.
</p>
<p>
 Jangan lupa untuk menghirup O<sup>2</sup> segar dan banyak konsumsi
 H<sub>2</sub>O guna menjaga kesehatan.
</p>

Hasilnya seperti ini:

Coba Sendiri: Subscript & Superscript

Mari praktik membuat rumus kimia dan matematika! Edit kode di bawah:

<p>Air memiliki rumus kimia H2O.</p>
<p>Rumus matematika: E = mc2</p>
<p>Referensi artikel ilmiah [1]</p>

Kombinasi Format

Anda bisa mengombinasikan semuanya bila diperlukan.

Contoh:

<p>
 Temuan ini memberikan
 <strong>pemahaman mendalam tentang <em>mekanisme patogenesis</em></strong>
 mikroorganisme dan memperkuat argumentasi untuk pengembangan vaksin yang lebih
 efektif. <sup>[23]</sup>
</p>

Hasilnya:

Praktik Lengkap

Sekarang saatnya Anda menggabungkan semua yang sudah dipelajari! Edit kode di bawah ini dan buat teks menjadi lebih menarik dengan berbagai format:

<p>
 HTML adalah bahasa markup standar yang digunakan untuk membuat halaman
 website. Kita bisa membuat website dan aplikasi dengan menggunakan HTML.
</p>
<p>
 Mempelajari HTML adalah langkah awal untuk menjadi seorang developer atau
 programmer.
</p>
<p>
 Banyak praktek, rasa ingin tahu, dan uji coba banyak hal adalah langkah
 tercepat untuk menguasai programming.
</p>
<p>Jangan lupa untuk menghirup O2 segar dan banyak konsumsi H2O.</p>

Tantangan:

  • Tebalkan kata-kata penting menggunakan <b> atau <strong>
  • Miringkan profesi seperti "developer" dan "programmer"
  • Buat rumus kimia yang benar dengan subscript dan superscript
  • Kombinasikan beberapa format dalam satu kalimat

Rangkuman

  • Format teks adalah memberi gaya cetak pada tulisan
  • Menebalkan tulisan bisa menggunakan <b> atau <strong>
  • Memiringkan tulisan bisa menggunakan <i> atau <em>
  • Menggaris bawahi tulisan menggunakan <u> namun tidak disarankan
  • Superscript menggunakan <sup>
  • Subscript menggunakan <sub>
  • Tag <strong> dan <em> lebih baik secara semantik daripada <b> dan <i>
  • Selalu pastikan menutup tag dengan benar untuk menghindari format yang berkelanjutan