Jika Anda biasa menggunakan engolah kata seperti ms-word, Anda pasti sudah biasa menggunakan format teks cetak tebal, dicetak miring, atau digarisbawahi; ini hanya 3 dari 10 cara memformat text yang bisa Anda temukan juga dalam HTML dan XHTML.
Teks cetak tebal
Apa pun yang muncul dalam apitan elemen <b> … </ b>, akan ditampilkan dalam huruf tebal seperti yang ditunjukkan di bawah ini:
Contoh :
<! DOCTYPE html> <html> <head> <title> Contoh Teks Cetak Tebal </title> </head> <body> Kata berikut menggunakan jenis huruf yang<b> dicetak tebal </b>. </body> </html>
Kode Ini akan menampilkan hasil sebagai berikut:
Kata berikut menggunakan jenis huruf yang dicetak tebal .
Teks cetak miring (Italic)
Apa pun yang muncul dalam apitan elemen <i> … </ i> akan ditampilkan dalam huruf miring seperti yang ditunjukkan di bawah ini:
Contoh :
<! DOCTYPE html> <html> <head> <title> Contoh Teks Italic </title> </ head> <body> Kata berikut akan ditampilkan dalam cetakan <i> huruf miring </i>. </body> </html>
Kode ini akan menampilkan hasil sebagai berikut:
Kata berikut akan ditampilkan dalam cetakan huruf miring .
Teks dengan garis bawah
Apa pun yang diapit oleh elemen <u> … </ u>, akan ditampilkan dengan garis bawah seperti yang ditunjukkan di bawah ini:
Contoh :
<! DOCTYPE html> <html> <head> <title> Contoh Tes Dengan Garis Bawah </title> </head> <body> Kata berikut menggunakan jenis huruf <u> yang digarisbawahi </u>. </body> </html>
Kode ini akan menampilkan hasil sebagai berikut:
Kata berikut menggunakan jenis huruf yang digarisbawahi .
Strike Text
Apa pun yang diapit oleh elemen <strike> … </ strike> akan ditampilkan dengan strikethrough (tanda coret), yang merupakan garis tipis melalui teks seperti ditunjukkan di bawah ini:
Contoh
<! DOCTYPE html> <html> <head> <title> Contoh Teks Mogok </title> </head> <body> Kata berikut menggunakan jenis huruf dengan <strike> strikethrough </strike>. </body> </html>
Ini akan menghasilkan hasil sebagai berikut:
Kata berikut menggunakan jenis huruf dengan strikethrough .
Font Monospace
Isi elemen <tt> … </ tt> akan ditulis dalam font monospace. Sebagian besar font dikenal sebagai font dengan lebar variabel karena huruf yang berbeda memiliki lebar yang berbeda (misalnya, huruf ‘m’ lebih lebar dari huruf ‘i’). Namun, dalam font monospace, setiap huruf memiliki lebar yang sama.
Contoh :
<! DOCTYPE html> <html> <head> <title> Contoh Font Monospace </title> </head> <body> <p>Kata berikut menggunakan jenis huruf <tt> monospaced </tt>. </p> </body> </html>
Kode ini akan menampilkan hasil sebagai berikut:
Kata berikut menggunakan jenis huruf monospaced .
Teks Superskrip
Setiap Isi elemen <sup> … </ sup> akan ditulis dalam mode superscript; ukuran font yang digunakan adalah ukuran yang sama dengan karakter yang mengelilinginya tetapi ditampilkan setengah tinggi karakter di atas karakter lainnya.
Contoh :
<! DOCTYPE html> <html> <head> <title> Contoh Teks Superskrip </title> </head> <body> Kata berikut menggunakan mode <sup> superskrip </sup>. </body> </html>
Kode ini akan menampilkan hasil sebagai berikut:
Kata berikut menggunakan mode superskrip .
Teks Subscript
Isi elemen <sub> … </ sub> akan ditulis dalam mode subskrip; ukuran font yang digunakan sama dengan karakter yang mengelilinginya, tetapi ditampilkan setengah tinggi karakter di bawah karakter lainnya.
Contoh :
<! DOCTYPE html> <html> <head> <title> Contoh Teks Subscript </title> </head> <body> Kata berikut menggunakan jenis huruf dengan mode<sub> subskrip </sub>. </body> </html>
Kode ini akan menampilkan hasil sebagai berikut:
Kata berikut menggunakan jenis huruf dengan mode subskrip .
Teks yang Disisipkan
Apa pun yang diapit dalam elemen <ins> … </ ins> akan ditampilkan sebagai teks yang disisipkan.
Contoh :
<! DOCTYPE html> <html> <head> <title> Contoh Teks yang Disisipkan </title> </head> <body> Saya ingin minum <del> coca-cola </del> <ins> anggur </ins> </body> </html>
Kode ini akan menampilkan hasil sebagai berikut:
Saya ingin minum coca-cola anggur
Teks yang Dihapus
Apa pun yang diapit di dalam elemen <del> … </del>, ditampilkan sebagai teks yang dihapus.
Contoh :
<! DOCTYPE html> <html> <head> <title> Contoh Teks yang Dihapus </title> </head> <body> Saya ingin minum <del>coca- cola </del> <ins> anggur </ins> </ body> </ html>
Kode ini akan menampilkan hasil sebagai berikut:
Saya ingin minum coca- cola anggur
Teks Lebih Besar
Isi dari elemen <big> … </ big> akan ditampilkan satu ukuran font lebih besar dari teks yang mengelilinginya seperti ditunjukkan di bawah ini:
Contoh :
<! DOCTYPE html> <html> <head> <title> Contoh Teks Lebih Besar </title> </head> <body> Kata berikut menggunakan jenis huruf yang lebih<big> besar </big>. </p> </body> </html>
Kode ini akan menampilkan hasil sebagai berikut:
Kata berikut menggunakan jenis huruf yang lebih besar .
;
Teks yang lebih kecil
Isi elemen <small> … </ small> akan ditampilkan satu ukuran font lebih kecil dari teks di sekitarnya seperti yang ditunjukkan di bawah ini:
Contoh :
<! DOCTYPE html> <html> <head> <title> Contoh Teks Lebih Kecil </title> </head> <body> Kata berikut menggunakan jenis huruf kecil <small> kecil </small>. </body> </html>
Kode ini akan menampilkan hasil sebagai berikut:
Kata berikut menggunakan jenis huruf kecil kecil .
Pengelompokan Konten
Elemen <div> dan <span> memungkinkan Anda mengelompokkan beberapa elemen untuk membuat bagian atau sub-bagian halaman.
Misalnya, Anda mungkin ingin meletakkan semua catatan kaki pada halaman dalam elemen <div> untuk menunjukkan bahwa semua elemen dalam elemen <div> berhubungan dengan catatan kaki. Anda kemudian dapat melampirkan style elemen <div> ini sehingga akan muncul menggunakan seperangkat aturan style khusus.
Contoh :
<! DOCTYPE html> <html> <head> <title> Contoh Tag Div </title> </head> <body> <div id = "menu" align = "middle"> <a href="/index.htm"> HOME </a> | <a href="/tentang/kontak.htm"> KONTAK </a> | <a href="/tentang/index.htm"> TENTANG </a> </div> <div id = "konten" align = "left" bgcolor = "white"> <h5> Artikel Konten </h5> Konten yang sebenarnya ada di sini ..... </div> </body> </html>
Kode ini akan menampilkan hasil sebagai berikut:
Artikel Konten
Konten yang sebenarnya ada di sini …..
Elemen <span>, di sisi lain, dapat digunakan untuk mengelompokkan elemen inline saja. Jadi, jika Anda memiliki bagian dari kalimat atau paragraf yang ingin Anda gabungkan bersama, Anda bisa menggunakan elemen <span> sebagai berikut
Contoh :
<! DOCTYPE html> <html> <head> <title> Contoh Tag Span </title> </head> <body> Ini adalah contoh <span style = "color:green"> span tag </span> dan tag <span style = "color:red"> </span> dengan CSS </body> </html>
Kode ini akan menampilkan hasil sebagai berikut:
Ini adalah contoh span tag dan tag dengan CSS
Tag ini biasanya digunakan dengan CSS untuk memungkinkan Anda melampirkan style ke bagian halaman.
