Ayam Koding

Belajar Algoritme & Pemrograman

Format Teks Tebal, Miring, dan Garis Bawah

Updated on 2017-01-02

Kali ini kita akan membahasa mengenai format teks yang ada pada HTML. Format tersebut digunakan untuk memodifikasi tulisan baik berupa tebal (bold), miring (italic), dan garis bawah (underline).

Format Teks Tebal, Miring, dan Garis Bawah sangat sering digunakan dalam penulisan format desain dari suatu website.

1. Teks Tebal (Bold dan Strong)

Untuk menampilkan teks dengan format tebal dapat menggunakan tag <b> menggunakan elemen <b>…</b>. Selain itu untuk huruf tebal juga dapat menggunakan tag <strong> dengan elemen <strong>…</strong>.

Contoh:
Teks Tebal dengan bold

<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Teks Tebal</title>
    </head>
    <body>
        <p>Ini Teks normal.</p>
        <p><b>Ini teks format bold</b>.</p>
    </body>
</html>

Output:

tutorial pemrograman HTML (Format)

Teks Tebal dengan Strong

<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Teks Tebal</title>
    </head>
    <body>
        <p>Ini Teks normal.</p>
        <p><strong>Ini teks format strong</strong>.</p>
    </body>
</html>

Output:

format bold strong pada HTML

2. Teks Miring HTML (Italic dan Emphasized)

Menampilkan teks miring atau italic pada HTML dapat menggunakan elemen tag <i>…</i> maupun menggunakan elemen tag <em>…</em>.

Contoh:
Teks Miring dengan <i>

<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Teks Miring</title>
    </head>
    <body>
        <p>Ini Teks normal.</p>
        <p><i>Ini teks format italic</i>.</p>
    </body>
</html>

Output:

format italic pada HTML

Teks miring dengan <em>

<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Teks Miring</title>
    </head>
    <body>
        <p>Ini Teks normal.</p>
        <p><em>Ini teks format emphasized</em>.</p>
    </body>
</html>

Output:

format Emphasized pada HTML

NB:
Browser akan menampilkan <strong> sebagai <b>, dan <em> sebagai <i>. Bagaimanapun arti dari tag tersebut berbeda karena <b> dan <i> mendefinisikan teks bold dan italic, sedangkan <strong> dan <em> berarti teks tersebut “important”.

3. Teks Garis Bawah (Underline)

Untuk membuat tulisan HTML garis bawah atau underline dapat digunakan elemen tag <u>…</u>.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Teks Garis Bawah</title>
    </head>
    <body>
        <p>Ini teks <u>bergaris bawah</u> pada HTML.</p>
    </body>
</html>

Output:

format garis bawah pada HTML

Demikian tutorial mengenai format teks tebal, miring, dan garis bawah pada HTML yang perlu anda pelajari dan pahami untuk membangun website yang keren. Semoga bermanfaat untuk pembelajaran, terima kasih.