Format Teks Dalam HTML digunakan untuk membuat teks yang ada dalam dokumen html menjadi kelihatan berbeda ,menarik dan memiliki arti serta dapat memberikan kemudahan dalam menuliskan teks yang berupa rumus-rumus atau lambang dari suatu disiplin ilmu.
Contoh penggunaan format text pada HTML untuk menghasilkan tulisan seperti berikut ini :
Untuk menghasilkan tulisan seperti di atas, maka script HTML nya seperti berikut :
<html>
<head>
<title>Text Formatting</title>
</head>
<body>
Come for <del>cheap</del> free H<sub>2</sub>0 on May 7<sup><u>th</u></sup> at 9:00PM
</body>
</html>
Beberapa format text pada HTML seperti terlihat pada tabel berikut ini :
1. Cetak tebal atau Bold
Cetak tebal digunakan untuk menebalkan teks agar berbeda dengan teks lainnya, cotoh penulisan seperti berikut :
<b>...teks...</b>
contoh :
<b>Teks ini tebal</b>
Hasilnya :
Teks ini tebal
2. Cetak Miring atau Italic
Cetak tebal digunakan untuk memiringkan teks agar berbeda dengan teks lainnya, cotoh penulisan seperti berikut :
<i>...teks...</i>
contoh :
<i>teks ini miring</i>
Hasil :
teks ini miring
3. Memberi Garis Bawah atau Underline
Underline digunakan untuk menggarisbawahi suatu teks agar berbeda penekananya atau untuk menegaskan maksud dari teks tersebut, contoh penulisan seperti berikut :
<u>...teks...</u>
contoh :
<u>teks bergaris bawah</u>
Hasil :
teks bergaris bawah
4. Mengecilkan Huruf / Small
Small digunakan untuk mengecilkan suatu teks agar tampak berbeda dengan teks lainnya, contoh penulisan seperti berikut :
<small>...teks...</small>
contoh :
teks ini biasa, <small>yang ini kecil</small>
Hasil :
teks ini biasa, yang ini kecil
5. Membesarkan Huruf / Big
Big digunakan untuk membesarkan huruf sehingga tampak berbeda dengan teks lainnya, contoh penulisan seperti berikut :
<big>...teks...</big>
contoh :
teks ini biasa, <big>yang ini gede</big>
Hasil :
teks ini biasa, yang ini gede
6. Menebalkan Teks dengan Strong
Untuk menebalkan teks selain dengan <b> kita juga dapat menggunakan tag <strong>. Fungsinya sama yaitu untuk menebalkan teks, contoh penulisan seperti berikut :
<strong>...teks...</strong>
contoh :
<strong>teks dengan strong</strong>
Hasil :
teks dengan strong
7. Penekanan Teks / Emphasis
Fungsinya sama dengan <i> yaitu untuk memiringkan teks, contoh penulisan seperti berikut :
<em>...teks...</em>
8. Mencoret Teks dengan Strike
Untuk mencoret sebuah teks dalam html kita dapat menggunakan tag strike, sehingga menghasilkan teks yang dicoret ditengahnya, contoh penulisan seperti berikut :
<strike>...teks...</strike>
contoh :
<strike>teks tercoret</strike>
Hasil :
teks tercoret
9. Subscript dan Superscript
Fungsi Superscript digunakan untuk membuat teks kecil yang berada diatas (pangkat), sedangkan subscript digunakan untuk membuat teks kecil yang berada dibawah. Keduanya kita gunakan untuk membuat teks berbentuk rumus, contoh penulisan seperti berikut :
<sup>teks</sup>
contoh superscript :
5<sup>2</sup>
Hasil :
52
contoh subscript :
<sub>karakter</sub>
contoh :
H<sub>2</sub>O
Hasil subscript :
H2O
10. Membuat Singkatan atau Akronim
Untuk mendefinisikan sebuah singkatan dalam dokumen html kita dapat menggunakan tag acronym, contoh penulisan seperti berikut :
<acronym [properti]>teks singkatan</acronym>
properti pada tag ini adalah title yang berisi judul dari singkatan.
Contohnya :
Siswa <acronym title="Sekolah Menengah Kejuruan Negeri">SMKN</acronym> 1 Cimahi banyak yang meraih Juara 1
Hasilnya :
Siswa SMKN 1 Cimahi banyak yang meraih Juara 1 (coba arahkan mouse pada tulisan SMKN, maka akan muncul tulisan Sekolah Menengah Kejuruan Negeri)
11. Tag <abbr>
Tag abbr atau abbreviation merupakan salah satu elemen HTML yang digunakan untuk menjelaskan suatu singkatan kata di konten Web. Tag ini berfungsi untuk menampilkan keterangan berupa ‘tooltip’ yang berisi kepanjangan dari sebuah singkatan. Penggunaan tag ini wajib diikuti dengan penggunaan atribut title agar keterangan ‘tooltip’-nya bisa muncul saat dihover (mouse diarahkan ke text). Tag <abbr> sendiri mempunyai fungsi yang sama dengan tag <acronym>.
Contoh :
<abbr title=“HyperText Markup Language">HTML</abbr>
Hasilnya :
12. Tag <blockquote> dan <q>
Tag <blockquote> digunakan untuk menampilkan kutipan agak panjang dan terpisah pada paragraf baru. Tag <q> fungsinya khusus untuk menampilkan kutipan (kuotasi) berupa kalimat pendek, serta terdapat tanda petik dua (“) yang mengapit teks kutipannya.
13. Tag <pre> (Preformatted text)
Biasanya secara otomatis jenis font/teks yang ditampilkan adalah Courier, tag <pre> digunakan khusus untuk menuliskan kode. Dengan menggunakan tag <pre> maka teks yang ditampilkan akan memelihara indent dari kode tersebut.
14. Tag <bdo> (bidirectional override)
Cara menuliskan teks dapat diubah dari kelaziman dari kiri ke kanan (left to right – ltr) menjadi dari kanan ke kiri (right to left – rtl). Tag <bdo> – bidirectional override, merupakan tag yang digunakan untuk mendefinisikan arah penulisan teks.
<bdo dir="rtl">
SMK Negeri 1 Cimahi
</bdo>
Hasilnya :
ihamiC 1 iregeN KMS
Font Size and Color
Untuk menge-set ukuran, warna serta jenis text pada halaman web, gunakan tag <FONT>.
Contoh:
<font size="5" color="purple">Text ini berukuran 5 dan berwarna ungu</font>
Hasilnya :
Text ini berukuran 5 dan berwarna ungu
- Atribut SIZE dari ukuran 1-7 dapat digunakan pada tag FONT , ukuran 3 menjadi ukuran default normal.
- Atribut COLOR, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya).
Contoh:
<font size="4" face="Verdana, Arial, Helvetica" color="#FF0000">Text ini berwarna merah</FONT>
Hasil :
Text ini berwarna merah
Contoh warna font pada HTML
- black
- white
- red
- green
- blue
- yellow
- aqua
- fuchsia
- gray
- lime
- maroon
- purple
- navy
- olive
- silver
- teal
Font Face
FACE adalah atribut dari tag FONT yang berisi Jenis atau nama font.
Contoh:
<FONT FACE="verdana" SIZE=“5” COLOR="red">Teks dengan jenis font verdana</FONT>
Hasil :
Kita juga bisa memasukan jenis huruf (font) dengan lebih dari 1 pilihan, maksimal 3 jenis font yang masing-masing dipisahkan oleh koma.
Special Characters
Kita dapat memasukan karakter spesial pada dokumen HTML, seperti pada contoh berikut ini :
Hasilnya :
Special character selalu diawali dengan &# dan diakhiri dengan ; (titik koma)
