-->

Iklan bawah header

Belajar HTML Part 6 - Memahami Text Formatting di HTML (Bold, Italic, Underline, dll)

Text formatting pada html

Dalam membuat artikel, terkadang terdapat kata yang penting dan untuk membedakannya dengan teks lainnya maka kita perlu memformat teks tersebut. Dengan adanya pemformatan teks, membuat kita bisa lebih mudah memahami setiap tulisan yang kita baca.

Nah, dalam tutorial kali ini kita akan belajar tentang pemformatan teks pada HTML. di HTML sendiri terdapat tag-tag yang khusus digunakan untuk membuat text formatting. Apa saja itu?

Mari kita bahas..

HTML Text Formatting: Tags yang Sering Digunakan untuk Membuat Format Teks

Membuat Teks Miring

Teks miring biasanya hanya digunakan untuk menekankan sebuah kata atau istilah yang penting. Untuk membuat teks miring pada HTML kita bisa menggunakan tag <i> (italic) dan juga tag <em> (emphasis).

Contoh:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Belajar Membuat Teks Miring di HTML</title>
    </head>
    <body>
         <h1>Membuat Teks Miring di HTML</h1>
         <p>
             Membuat teks miring di HTML kita bisa menggunakan tag <i>italic</i> atau juga bisa menggunakan tag <em>emphasis</em>.
         </p>
    </body>
</html>

Membuat Teks tebal

Teks tebal biasanya digunakan dalam memberikan penekanan atau penegasan pada teks tertentu, misalnya seperti memberikan penekan pada sebuah kata yang penting, memberikan penegasan pada judul dan subjudul, dan lainnya.

Untuk membuat teks tebal pada HTML kita bisa menggunakan tag <b> (bold) dan tag <strong>.

Contoh:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Belajar membuat paragraf di HTML</title>
    </head>
    <body>
         <h1>Membuat Teks Tebal di HTML</h1>
         <p>
              <strong>Text Formatting itu penting!</strong> Karena dapat membuat penegasan atau penekanan terhadap kata atau teks yang <b>penting</b>.
         </p>
    </body>
</html>

Membuat Garis Bawah pada Teks

Penggunaan garis bawah biasanya digunakan untuk menandai teks yang memiliki arti penting. Untuk membuat garis bawah pada HTML kita bisa menggunakan tag <u> (underline) dan tag <ins> (insert).

Contoh:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Belajar membuat paragraf di HTML</title>
    </head>
    <body>
         <h1>Membuat Garis Bawah Pada Teks di HTML</h1>
         <p>
            <u>Cara membuat garis bawah pada teks di HTML</u>, kita bisa menggunakan tag <u>underline</u> dan juga tag<ins>insert</ins> untuk membuatnya.
         </p>
    </body>
</html>

Membuat Pangkat di HTML

Tag yang bisa kita gunakan untuk membuat pangkat di HTML yaitu tag <sup> dan <sub>.

  • <sup> (superscript) digunakan untuk membuat pangkat di atas
  • <sub> (subscript) digunakan untuk membuat pangkat di bawah

Contoh:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Belajar membuat paragraf di HTML</title>
    </head>
    <body>
         <h1>Membuat Pangkat di HTML</h1>
         <p>
              Contoh membuat pangkat di atas adalah S<sup>2</sup>
              Contoh membuat pangkat di bawah adalah O<sub>2</sub>
         </p>
    </body>
</html>

Membuat Teks Tercoret

Teks yang tercoret memiliki arti bahwa teks tersebut sudah tidak dipakai atau dihapus. Untuk membuat teks tercoret di HTML kita bisa menggunakan tag <s> (strikethrought) atau bisa juga dengan menggunakan tag <del> (delete).

Contoh:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Belajar membuat paragraf di HTML</title>
    </head>
    <body>
         <h1>Membuat Teks Tercoret di HTML</h1>
         <p>
              Ini contoh <s>teks tercoret</s> di HTML menggunakan tag <i>strikethrought</i> dan ini contoh <del>teks tercoret</del> menggunakan tag <i>delete</i>.
         </p>
    </body>
</html>

Membuat Marker untuk Teks

Marker atau penanda biasanya kita gunakan untuk menandai teks yang penting. Untuk membuat marker atau penanda di HTML kita bisa menggunakan tag <mark>.

Contoh:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Belajar membuat paragraf di HTML</title>
    </head>
    <body>
         <h1>Membuat Marker untuk Teks di HTML</h1>
         <p>
              Marker digunakan untuk menandai bagian teks yang penting. Kalo kita menulis di kertas dan ingin menandai bagian teks yang penting kita bisa <mark>menggunakan stabilo</mark>.
         </p>   
    </body>
</html>

Text Formatting untuk Komputer

Selain format teks diatas, ada juga format teks lainnya yang khusus untuk menandai teks yang berasal dari komputer. Berikut contoh tag yang digunakan untuk memformat teks dari komputer:

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

Selanjutnya

Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel