Teks dalam dokumen web dapat diformat secara khusus untuk menunjukan perbedaan  dan penekanan terhadap bagian tertentu pada dokumen web. Perbedaanya dapat ditampilkan dalam bentuk huruf tebal, miring (italic), digarisbawahi, dan semacamnya.

Belajar HTML #4:  Format Teks pada HTML
Karena sebuah halaman web, tanpa menggunakan format teks sama sekali. Membuat halaman tersebut terlihat menoton. Minimal menggunakan bold, heading untuk mempertegas bagian tertentu.

4.1 Pemformatan

Beberapa pemformatan teks:

  • Menebalkan huruf (bold)
  • Memiringkan huruf (italic)
  • Memberikan tekanan pada teks (emphasize)
  • Mengecilkan huruf
  • Superscript
  • Subscript
Contoh ini mendemostrasikan bagaimana kalian dapat memformat teks dalam suau dokumen HTML.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Teks Berformat</title>
</head>
<body>
<b>Ini contoh kalau ditebalkan</b>
<br>
<strong>Contoh kalau teks tebal</strong>
<br>
<big>Contoh kalau teks besar</big>
<br>
<em>Contoh jika diberi emphsize</em>
<br>
<i>Teks ini miring</i>
<br>
<small>Teks ini kecil</small>
<br>
<sub>Contoh subscript</sub>
<br>
Contoh dikasi <sup>Superscript</sup>

</body>
</html>

Hasilnya Jadi seperti ini:

4.2 Teks Preformat

Jarak antarkata suatu teks atau kalimat di dalam dokumen web adalah sebesar satu spasi. Jarak antarkata atau kalimat di dalam browser web adalah satu spasi, beberapa pun jumlah spasi ataupun jumlah baris dalam dokumen web yang sesungguhnya.

Baca Juga: Mengenal Lebih Detail Apa Itu Web?

Agar browser web menampilkan sesuai dengan dokumen web tersebut di dalam editor teks, maka teks yang bersangkutan harus diberi tanda tag <pre> diawalnya dan </ptre> diakhir teks yang bersangkutan.

Tag ini juga akan menjaga spasi,baris baru, dan tab sesuai dengan aslinya pada saat ditampilkan dalam browser. Salah satu penggunaan dari pre adalah untuk menampilkan suatu source program dalam web.

Contoh penggunaan Preformat:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Teks Preformat</title>
</head>
<body>
<pre>
void Node: : remove(){
if (prev)
prev->next=next;
else if(parent)
parent->SetContent(null);
if (next)
next->prev=prev;
parent=null;
}
</pre>

</body>
</html>

Hasilnya:

4.3 Address

Alamat (addres) merupakan salah satu elemen yang umum di dalam suatu dokumen. Dalam HTML disediakan secara khusus tag address. Dengan adanya tag ini maka penulisan alamat dapat distandarkan.

Baca Juga: Pengenalan Tentang HTML

Diawali dengan tag <address> diakhiri dengan </address>. Setiap baris dalam penulisan alamat dipisahkan dengan menngunakan tag <br>.

Contoh penggunaanya:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Address</title>
</head>
<body>
<address>
SMA Negeri Jayaloka<br>
Jl. Sunan Manjuran <br>
Sumatra Selatan<br>
Indonesia

</address>

</body>
</html>

Hasilnya:

4.4 Arah Teks

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.

Baca Juga: Mengenal Tag Tag Dasar HTML

Contoh penggunaanya:

<!DOCTYPE html>
<html>
<head>
<title>Arah Teks</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<bdo dir="rtl">
Ini beberapa teks hebrew

</bdo>

</body>
</html>

Hasilnya jadi seperti ini:

4.5 Quotation

Suatu kutipan teks lazim ada dalam suatu dokumen, ada dua macam kutipan:

  • Kutipan pendek- taq <q>
  • Kutipan panjang- <blockquote>
Tag <blockquote> digunakan untuk membuat sebagian teks yang dikutip sebagai suatu blok sendiri. Kebanyakan browser umunya mengubah margin untuk kutipan teks tadi untuk memisahkan dari teks lain yang mengililinginya.
Tag <q> Tidak melakukan sesuatu yang khusus, tetpi dengan kita telah mendefinisikan sebagai kutipan, kemudian kita menggunakan style sheet maka kutipan ini bisa diatur pemformatannya dengan menggunakan style sheet.
Contoh penggunaanya:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Quotation</title>
</head>
<body>
<p>
Berikut ini contoh menggunakan quotation yang panjang <blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</blockquote>
<p>
Berikut ini menggunakan quotation pendek:
</p>
<q>
Isi quotation pendek
</q>
</body>
</html>

Hasilnya seperti ini: