Pada umumnya saat kita membaca sebuah tulisan baik di artikel koran atau di website, pasti kita akan menemukan tulisan itu dengan berbagai gaya teks, misalnya ada teks yang tebal, bergaris bawah, atau mungkin teks dengan gaya miring.
Nah itulah yang disebut dengan Formatting Text.
Formatting text digunakan untuk mengubah gaya teks seperti tebal, miring, bergaris bawah, dan lainnya.
Dalam pembuatan sebuah artikel atau tulisan sangat dibutuhkan agar tulisan lebih menarik dan membuat pembaca lebih mudah mengerti tulisan kita.
Membuat Teks Tebal (Bold)
Untuk membuat membuat teks tebal di HTML, di awali dengan tag <b> dan di akhiri dengan tag </b> seperti berikut ini :
Ini adalah <b>teks tebal</b>Selain menggunakan tag <b>, kamu juga bisa menggunakan tag <strong>...</strong> untuk membuat tulisan tebal di HTML.
Ini adalah <strong>teks tebal menggunakan strong</strong>Contoh :
See the Pen Membuat Teks Bold di HTML by Babacoding ID (@Babacoding-ID) on CodePen.
Jadi mau pakai yang manapun tidak masalah.
Membuat Teks Miring (Italic)
Untuk membuat teks miring (Italic) di HTML, kamu bisa menggunakan tag <i>...</i>.
Ini adalah <i>teks miring</i>atau bisa menggunakan tag <em>...</em>
Ini adalah <em>teks miring menggunakan em</em>Contoh :
See the Pen Membuat Teks Miring di HTML by Babacoding ID (@Babacoding-ID) on CodePen.
Membuat Teks Bergaris Bawah (Underline)
Untuk membuat sebuah teks atau kalimet bergaris bawah (Underline), kamu bisa dapat menggunakan tag <u>...</u>
Ini adalah <u>teks bergaris bawah</u>Contoh :
See the Pen Membuat Text Underline di HTML by Babacoding ID (@Babacoding-ID) on CodePen.
Membuat Teks Bold, Underline dan Italic Sekaligus
Tentu saja kamu bisa menggunakan beberapa tag sekaligus untuk memformat teks dalam HTML.
Misal ketika kamu ingin menandai sebuat kalimat atau teks dengan tanda tebal, bergaris bawah, dan miring sekaligus karena memang teks tersebut ingin sangat ditekankan. Maka contoh scriptnya seperti berikut
ini adalah contoh <b><u><i>teks yang sangat penting!</i></u></b>Ingat selalu dalam HTML, bahwa tag yang di buka dan dideklarasikan di awal, maka tag penutupnya harus berada di akhir (First In – Last Out).
Pada contoh diatas ada 3 tag yang digunakam, tag <b> di deklarasikan di awal, kedua tag <u> dan ketiga tag <i>, maka saat menutup semua tag tersebut, harus dimulai dari tag tutup </i> kemudian tag tutup </u>, baru lah terakhir tag tutup </b>.
Ingat, (First In – Last Out).
Contoh :
See the Pen Membuat Teks Bold, Underline, Italic Sekaligus di HTML by Babacoding ID (@Babacoding-ID) on CodePen.
Elemen Text Formatting di HTML
Berikut ini adalah beberapa elemen Text Formatting HTML yang sering digunakan, kamu bisa mencobanya sendiri.
| Elemen | Deskripsi | Contoh |
<b> | Membuat teks menjadi tebal (bold) | <b>Ini teks tebal</b> |
<strong> | Menandakan teks yang penting (seperti <b>) | <strong>Penting!</strong> |
<i> | Membuat teks menjadi miring (italic) | <i>Ini teks miring</i> |
<em> | Menekankan teks (serupa dengan <i>) | <em>Ini penting!</em> |
<u> | Membuat teks bergaris bawah | <u>Ini teks bergaris bawah</u> |
<mark> | Menyorot teks (highlight) | <mark>Teks ini disorot</mark> |
<small> | Membuat teks lebih kecil | <small>Ini teks kecil</small> |
<del> | Menampilkan teks yang dicoret | <del>Ini teks yang dihapus</del> |
<ins> | Menampilkan teks yang disisipkan | <ins>Ini teks yang ditambahkan</ins> |
<sub> | Menampilkan teks sebagai subscript | H<sub>2</sub>O |
<sup> | Menampilkan teks sebagai superscript | 10<sup>2</sup> = 100 |
Teruslah mencoba agar kamu terbiasa dan hafal dengan tag-tag untuk memformat teks dalam penulisan HTML.
Belajar selanjutnya..
Komentar