Pemformatan Teks Pada HTML : Fungsi Tag b, i, u
Pemformatan teks yang dibahas pada tutorial HTML dasar ini diantaranya adalah membuat teks tebal, miring, garis bawah, coret dan penggunaan sup atau sub pada penulisan persamaan matematika. Format teks tersebut sering digunakan dalam penulisan artikel sehari-hari. Sebab itu, kita akan membahasnya satu-persatu penerapannya dalam HTML.
Cara Membuat Huruf Tebal di HTML
Untuk untuk menebalkan teks pada HTML dapat menggunakan tag <b> atau tag <strong>. Kedua tag tersebut menghasilkan tampilan yang sama yaitu huruf yang ada di dalam tag tersebut menjadi tebal namun penggunaan keduanya berbeda. Lalu apa perbedaannya?
Perbedaan tag <b> dan tag <strong>
Perbedaan antara keduanya terdapat pada fungsinya yaitu tag <b> dari kata bold digunakan untuk sekedar membuat huruf tebal saja, sedangkan tag <strong> digunakan untuk menunjukkan bahwa teks atau huruf tersebut lebih penting dari yang lainnya.
Agar lebih jelas, berikut ini contoh penggunannya:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan b dan strong</title>
</head>
<body>
<p>Distributor harus berhati-hati dalam mengantarkan paket dari <b>ASUS</b>. Dimohon untuk <strong>tidak membanting dan menghindari air</strong> agar komponen tidak rusak.</p>
</body>
</html>
Hasil tampilan pada browser:
Penjelasan kode: Secara tampilan tag <b> dan <strong> memiliki tampilan yang sama. Namun pada penggunaannya seperti pada contoh di atas, tag <b> digunakan untuk sekedar menebalkan nama brand, sedangkan tag <strong> digunakan untuk menebalkan teks yang penting dalam kalimat tersebut. Pelajari juga tentang cara membuat list di html.
Cara Membuat Tulisan Miring di HTML
Untuk membuat tulisan atau teks miring pada HTML bisa menggunakan tag <i> atau tag <em>. Seperti 2 tag sebelumnya, kedua tag ini juga memiliki tampilan yang sama namun terdapat perbedaan dalam penggunaannya.
Perbedaan tag <i> dan tag <em>
Kedua tag ini memiliki perbedaan pada fungsi yaitu tag <i> yang merupakan singkatan dari italic digunakan dengan tujuan untuk mencetak tuisan miring saja tanpa ada maksud di dalamnya. Sedangkan tag <em> dari kata emphasis digunakan untuk penekanan terhadap teks yang tertentu (stress emphasis).
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan i dan em</title>
</head>
<body>
<p><i>Rumah Merah Putih</i> merupakan salah satu film yang sangat direkomendasikan untuk pemuda agar menumbuhkan rasa <em>cinta tanah air</em>.</p>
</body>
</html>
Hasilnya:
Penjelasan kode: Pada contoh di atas kita menambahkan tag <i> untuk judul film hanya untuk membedakan cara penulisan dengan teks lainnya. Sedangkan untuk tag <em> kita tekankan pada kata “cinta tanah air” dengan tujuan menekan kalimat tersebut. Seperti contoh sebelumnya, jika dilihat dari tampilan hasil, kedua tag tersebut menghasilkan tampilan yang sama yaitu teks tercetak miring. Simak juga cara membuat tabel di html.
Cara Membuat Huruf Garis Bawah di HTML
Kita bisa menggunakan tag <u> ataupun tag <ins> untuk membuat tulisan garis bawah pada HTML. Secara tampilan kedua tag tersebut menghasilkan tampilan yang sama. Namun sebenarnya terdapat perbedaan dalam penggunaannya.
Perbedaan tag <u> dan tag <ins>
Tag <u> dari kata underline digunakan untuk mencetak huruf atau teks dengan garis bawah tanpa ada maksud lainnya. Hal tersebut sama dengan tag <b> dan <i> yang hanya bertujuan pada visual. Sedangkan tag <ins> dari kata insert digunakan untuk membuat huruf atau teks dengan garis bawah dengan tujuan menunjukkan bahwa teks tersebut baru saja ditambahkan.
Jika ada fungsi untuk menambahkan tulisan maka tentu terdapat juga tag yang berfungsi untuk mendefinikan tulisan yang dihapus (dicoret) yaitu tag <del>.
Untuk lebih jelasnya berikut ini contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan u, ins dan del</title>
</head>
<body>
<p>Inilah <i>versi HTML terbaru</i>:</p>
<p><del>Versi terbaru HTML adalah versi 4.0</del> <ins>Versi terbaru HTML adalah versi 5</ins></p>
</body>
</html>
Hasilnya:
Penjelasan kode: Pada kode di atas kita gunakan tag <i> hanya sekedar menggaris bawahi kata “versi HTML tertentu” sebagai pembeda tampilan judul. Sedangkan tag <del> kita gunakan untuk mendefinisikan bahwa versi 4.0 yang sebelumnya adalah versi terbaru sekarang sudah tidak berlaku lagi karena sudah ada versi 5 yang kita definisikan dengan tag <ins>. Lihat juga materi struktur dasar html.
Cara Membuat Huruf Tercoret pada HTML
Untuk membuat huruf yang dicoret di HTML dapat menggunakan tag <s> ataupun tag <del>. Persamaan kedua tag tersebut adalah pada tampilannya yang sama-sama menghasilkan teks tercoret. Lalu apa perbedaannya?
Perbedaan tag <s> dan tag <del>
Tag <s> dari kata strikethrough hanya digunakan untuk mencetak huruf yang dicoret secara visual tanpa tujuan tertentu. Sedangkan tag <del> dari kata delete berfungsi mendefinisikan bahwa teks tersebut sudah tidak berlaku lagi. Berikut ini contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan s dan del</title>
</head>
<body>
<p>Ini hanya style <s>penulisan html</s>.</p>
<p>Versi HTML terbaru adalah versi <del>4.0</del> <ins>5</ins></p>
</body>
</html>
Hasilnya:
Penjelasan kode: Tag <s> pada contoh di atas digunakan hanya untuk style saja. Sedangkan tag <del> digunakan untuk meralat atau merevisi tulisan yang sudah tidak berlaku, dalam hal ini adalah versi HTML dan diupdate dengan tulisan baru dengan memasukkan versi terbarunya. Pelajari juga tentang Cara Membuat Paragraf pada HTML.
Cara Menulis Persamaan Matematika di HTML
Persamaan dan rumus matematika atau kimia memiliki pangkat atas dan bawah. Untuk menulisnya pada HTML dapat menggunakan tag <sup> atau tag <sub>.
Tag <sup> dari kata superscript digunakan untuk membuat pangkat kecil yang berada di atas.
Tag <sub> dari kata Subscript digunakan untuk membuat pangkat kecil yang berada di bawah.
Agar lebih jelas, berikut ini contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan sup dan sub</title>
</head>
<body>
<p>Persamaan segitiga siku-siku: a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>.</p>
<p>Penulisan rumus kimia Asam sulfat adalah H<sub>2</sub>SO<sub>4</sub></p>
</body>
</html>
Hasilnya:
Penjelasan Kode: Penulisan pangkat 2 pada segitiga siku-siku menggunakan tag <sup> yaitu <sup>2</sup>. Sedangkan penulisan pangkat bawah menggunakan tag <sub> contohnya <sub>4</sub>.
Sebenarnya terdapat banyak tag-tag lain untuk memformat teks dengan fungsinya masing-masing. Namun, tag yang telah kita pelajari pada materi ini adalah yang paling sering digunakan. Kita akan mempelajari tag lainnya pada pembahasan tag masing-masing jika diperlukan. Selanjutnya, jika ada pertanyaan tentang materi ini, silahkan kirim melalui kolom komentar yang ada.
