HTML POST Basic-HTML

Basic HTML - Formatting

7. Basic HTML - Formating

Pada bagian ini kita akan membahas tentang formatting, apa itu formatting? dan jenis-jenis formatting? lansung saja kita akan bahas tentang formatting pada HTML.

Apa itu Formatting pada HTML

Formatting adalah element yang digunakan untuk mendefenisikan atau perfomatan terhadap teks tertentu, sama halnya dengan saat kita bekerja di Office. Kita dapat memberikan teks tebal, miring, dan lain sebagainya. Formatting memiliki tag yang berbeda dengan fungsi yang berbeda juga.

Jenis-Jenis Formatting pada HTML

HTML memiliki 10 formatting teks yang dapat digunakan. Berikut 10 tags yang digunakan untuk formatting :

  1. <b> - Teks tebal
  2. <strong> - Penekanan terhadap teks dengan tampilan tebal
  3. <i> - Teks miring
  4. <em> - penekanan terhadap teks dengan tampilan miring
  5. <mark> - Sorotan terhadap teks
  6. <small> - Teks menjadi kecil
  7. <del> - Teks menjadi tercoret
  8. <ins> - Teks bergaris bawah
  9. <sub> - Teks muncul setengah karakter di bawah garis normal
  10. <sup> - Teks muncul setengah karakter di atas garis normal

Selanjut mari kita akan cobakan tags formatting tersebut satu persatu.

Tag Formatting <b>

Tag <b> bold akan menampilkan teks tebal ke dalam browser tanpa ada penekanan terhadap teks tersebut. Kita dapat menuliskan teks tebal seperti script berikut :

<b> Teks menggunakan tags bold </b>

Tag Formatting <strong>

Tag <strong> akan memberikan tampilan ke dalam browser menjadi tebal dengan penekanan terhadap teks tersebut. Tag ini akan menjadi penting jika kita mengguanakan tag <strong>. Tuliskan script berikut untuk melakukan pengujian ke dalam browser.

<strong> Teks ini merupakan teks strong</strong>

Tag Formatting <i>

Tag <i> italic akan memberikan tampilan ke dalam browser menjadi miring tanpa penekanan terhadap teks tersebut. Berikut cara penulisan teks formatting <i>.

<i> Teks ini merupakan teks miring</i>

Tag Formatting <em>

Tag <em> emphasized merupakan tag yang digunakan untuk memberikan teks miring dengan penekanan terhadap teks tersebut. berikut script penulisan tag formatting <em>

<em> Teks ini merupakan teks emphasized </em>

Tag Formatting <mark>

Tag <mark> akan menampilkan teks dengan sorotan, browser akan menampilkan teks yang memiliki backgroud warna kuning, teks tersebut seperti di stabilo. Mungkin untuk lebih jelasnya kamu bisa menyalin script berikut :

<mark> teks ini merupakan teks mark </mark>

Tag Formatting <small>

Tag <small> akan mendefenisikan teks ke dalam browser menjadi kecil dari ukuran normalnya. cobalah salin script berikut, lalu coba tampilkan ke dalam browser.

<small> Teks ini merupakan teks small

Tag Formatting <del>

Tag <del> delete akan menampilkan teks ke dalam browser seperti tercoret. Coba salin script berikut.

<del> teks yang tercoret </del>

Tag Formatting <ins>

Tag <ins> inserted akan menampilkan teks ke dalam browser dengan bergaris bawah. Coba salin script berikut lalu cobakan sendiri.

<ins> Teks ini menggunakan tag ins </ins>

Tag Formatting <sub>

Tag <sub> subscript akan menampilkan teks ke dalam browser tepat di bawah teks normal dengan ukuran setengah dari karakter biasa. Coba gunakan script berikut

<p> teks ini menggunakan tag <sub> sub </sub>  </p>

Tag Formatting <sup>

Tag <sup> supscript akan menampilkan teks ke dalam browser tepat di atas teks normal dengan ukuran setengah dari karakter biasa. teks ini kebalikan dari teks subscript. coba lakukan pengujian nya seperti script berikut.

<p> teks ini menggunakan tag <sup> sup </sup>  </p>

Tampilan Teks Formatting

Jika kamu tidak ingin menyalin script tersebut. kamu bisa melihat hasil dengan klik result tampilan pada 10 formatting yang kita bahas.

See the Pen Formatting by Triadmoko Denny Fatrosa (@triad-moko) on CodePen.

Kesimpulan

Formatting merupakan tags yang penting untuk di pahami, kita bisa melakukan formatting dengan CSS, akan tetapi fungsi dari teks tersebut tidak memiliki makna walaupun tampilan yang saat di lihat pada browser sama.

Sumber

W3Shcool Formatting