Jika kamu ingin membuat gaya pada suatu text kamu bisa menggunkan text formatting. HTML sendiri memiliki banyak jenis format text dan itu menjadi salah satu nilai plus HTML dalam segi dasain.
Pada bab sebelumnya kita telah belajar tentang atribut style HTML. Pada bab ini kita akan membahas sebuah element khusus untuk mendefinisikan sebuah text pada dokumen HTML.
HTML menggunakan elemenet <b> untuk text tebal dan <i> untuk format text miring.
Berikut contoh format element yang dibuat untuk menampilkan jenis pada suatu text
Tag
Keterangan
<b>
Membuat teks tebal
<strong>
Membuat teks tebal, fungsi tag ini sama dengan tag <b>
<i>
Membuat teks miring
<em>
Membuat teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag <em> yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring
<mark>
Membuat warna text seperti di stabilo
<small>
Memperkecil ukuran teks dari ukuran defaultnya
<del>
Untuk memberi garis tengah pada teks/mencoret teks
<ins>
Membuat teks bergaris bawah
<sub>
Memberikan efek subscript pada teks
<sup>
Memberikan efek superscript pada teks
Membuat text tebal
Bold Text
pada suatu dokumen HTML membuat huruf tebal didefinisikan dengan menggunakan tag <b>. Jadi apa pun yang terletak di antara <b> ... </b> elemen, akan ditampilkan dalam huruf tebal seperti yang ditunjukkan di bawah ini:
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Membuat Huruf Tebal
</title>
</head>
<body>
Ini adalah contoh huruf tebal
</body>
</html>
Strong
Fungsi Strong sama dengan <b>. Untuk menggunakan Strong kita bisa membuatnya seperti ini.
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Membuat Huruf Tebal
</title>
</head>
<body>
Ini adalah contoh huruf tebal
</body>
</html>
Membuat Huruf Miring
Italic didefinisikan dengan menggunakan tag <i>. Jadi apa pun yang terletak di antara <i> ... </i> elemen, akan ditampilkan dalam huruf miring.
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Membuat Huruf Tebal
</title>
</head>
<body>
Ini adalah contoh huruf Miring
</body>
</html>
Selain tag <i> untuk membuat text miring kita juga dapat menggunakan <em>. Contoh penggunaanya seperti ini.
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Membuat Huruf Tebal
</title>
</head>
<body>
Ini adalah contoh huruf miring
</body>
</html>
Catatan
Browser akan menampilkan <strong> sebagai <b>, dan <em> sebagai <i>. Namun, ada perbedaan arti pada tag ini: <b> dan <i> untuk mendefinisikan teks tebal dan miring, tapi <strong> dan <em> berarti bahwa teks adalah termasuk kedalam text yang penting.
Membuat Huruf Seperti Distabilo dengan Mark
Pernah kamu lihat tulisan seperti distabilo seperti pada halaman-halaman web lainya? Stabillo membuat tulisan seperti distabilo didefinisikan dengan menggunakan tag <mark>
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Mark
</title>
</head>
<body>
Contoh text menggunakan mark
</body>
</html>
Membuat Huruf Kecil dengan <small> element
<small> element untuk mendefinisikan huruf yang lebih kecil dari ukuran text default.
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Text Small
</title>
</head>
<body>
Contoh text menggunakan small
</body>
</html>
Membuat Huruf seperti tercoret <del> element
<del> element untuk mendefinisikan huruf tercoret seperti Diskon.
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Text del
</title>
</head>
<body>
Contoh text menggunakan del
</body>
</html>
Membuat garis bawah pada text dengan <ins> element
<ins> element untuk mendefinisikan garis bawah pada suatu text html.
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Text ins
</title>
</head>
<body>
Contoh text menggunakan ins
</body>
</html>
Membuat efek subscript pada teks dengan <sub> element
<ins> element untuk mendefinisikan efek subscript pada suatu text html.
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Text sub
</title>
</head>
<body>
HTML Contoh text menggunakan sub
</body>
</html>
Membuat efek superscript pada teks dengan <sub> element
<ins> element untuk mendefinisikan efek superscript pada suatu text html.
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Text superscript
</title>
</head>
<body>
HTML Contoh text menggunakan sup
</body>
</html>
Shared
Shared
Shared
Shared
