Dasar HTML : Text Formatting Pada HTML (Bold, Italic, Underline, dll)

Text formatting pada HTML mengacu pada cara-cara untuk memformat teks, seperti membuat teks menjadi tebal atau miring, menambahkan daftar, membuat paragraf, dan lain sebagainya. HTML memiliki tag-tag khusus yang digunakan untuk mengatur tampilan teks pada halaman web. Beberapa tag dasar untuk text formatting pada HTML antara lain:

 untuk membuat teks menjadi tebal
 untuk membuat teks menjadi miring
 untuk membuat teks menjadi bergaris bawah
<strike> untuk membuat teks tercoret
 untuk membuat teks mengecil dan ditulis di bawah baris tulisan
 untuk membuat teks mengecil dan ditulis di atas baris tulisan
<ul> dan <li> untuk membuat daftar dengan bullet point
<ol> dan <li> untuk membuat daftar dengan angka atau huruf

Selain tag-tag di atas, masih banyak lagi tag-tag lain yang dapat digunakan untuk memformat teks pada HTML. Tag-tag tersebut akan memungkinkan pengguna HTML untuk membuat halaman web yang lebih menarik dan mudah dibaca.

Perbedaan Plain text dan rich text:

Plain text adalah teks yang tidak mengandung format atau gaya apapun, seperti teks biasa dalam file .txt. Plain text hanya terdiri dari karakter-karakter dasar tanpa ada tampilan yang ditambahkan, sehingga tidak ada format teks seperti tebal, miring, atau warna yang bisa ditampilkan. Contoh plain text adalah teks yang ditulis dalam Notepad atau Wordpad tanpa menggunakan format atau gaya apapun.

Rich text, di sisi lain, adalah teks yang mengandung format atau gaya tertentu, seperti teks tebal, miring, atau diberi warna. Rich text biasanya digunakan di program pengolah kata atau editor teks yang lebih canggih seperti Microsoft Word atau Google Docs. Contoh rich text adalah teks yang memiliki format seperti judul teks tebal, kata-kata penting diberi warna, atau bagian-bagian teks yang ditebalkan dan dimiringkan. Rich text memungkinkan kita untuk membuat dokumen atau teks yang lebih menarik dan mudah dibaca dengan menggabungkan elemen-elemen format dan tampilan pada teks tersebut.

Untuk membuat text formatting pada HTML, kita bisa menggunakan tag-tag HTML yang sesuai dengan jenis format yang ingin kita buat. Berikut adalah beberapa contoh tag HTML yang umum digunakan untuk text formatting:

Membuat text menjadi tebal

<!DOCTYPE html>
<html>
<head>
<title>Contoh text tebal dan tidak tebal</title>
</head>
<body>
 <p>Ini adalah text tidak tebal<p>
 <b>Ini adalah text tebal</b> 
</body>
</html>

Hasilnya: Ini adalah text tidak tebal Ini adalah text tebal

Membuat text menjadi miring

<!DOCTYPE html>
<html>
<head>
<title>Contoh text miring dan text tidak miring</title>
</head>
<body>
 <p>Ini adalah text tidak miring<p>
 <i>Ini adalah text miring</i> 
</body>
</html>

Hasilnya: Ini adalah text tidak miring Ini adalah text miring

Membuat text menjadi bergaris bawah

<!DOCTYPE html>
<html>
<head>
<title>Contoh text dengan garis bawah dan text tidak bergaris bawah</title>
</head>
<body>
  <p>Ini adalah text tidak bergaris bawah<p>
  <u>Ini adalah text bergaris bawah</u>
</body>
</html>

Hasilnya: Ini adalah text tidak bergaris bawah Ini adalah text bergaris bawah

Membuat text tercoret

<!DOCTYPE html>
<html>
<head>
<title>Contoh text tercoret dan text tidak tercoret</title>
</head>
<body>
  <p>Ini adalah text tidak tercoret<p>
  <strike>Ini adalah text tercoret</strike>
</body>
</html>

Hasilnya: Ini adalah text tidak tercoret Ini adalah text tercoret

Membuat text kecil dan ditulis di bawah baris tulisan

<!DOCTYPE html>
<html>
<head>
<title>Contoh text kecil dan ditulis di bawah baris tulisan dan text tidak kecil</title>
</head>
<body>
  <p>Ini adalah text tidak bergaris bawah<p>
  <sub>Ini adalah text kecil yang ditulis di bawah baris tulisan</sub>
</body>
</html>

Hasilnya: Ini adalah text tidak bergaris bawah Ini adalah text kecil yang ditulis di bawah baris tulisan

Membuat text kecil dan ditulis di atas baris tulisan

<!DOCTYPE html>
<html>
<head>
<title>Contoh text kecil dan ditulis di atas baris tulisan dan text tidak berbaris atas</title>
</head>
<body>
  <p>Ini adalah text tidak bergaris atas<p>
  <sup>Ini adalah text kecil yang ditulis di atas baris tulisan</sup>
</body>
</html>

Hasilnya: Ini adalah text tidak berbaris atas Ini adalah text kecil yang ditulis di atas baris tulisan

Membuat daftar dengan bullet point

<!DOCTYPE html>
<html>
<head>
<title>Contoh text dengan daftar dengan bullet point dan text tidak bullet point</title>
</head>
<body>
  <p>Ini adalah text tidak bullet point<p>
  <ul>
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ul>
</body>
</html>

Hasilnya: Ini adalah text tidak bullet point Item pertama Item kedua Item ketiga

Membuat daftar dengan angka atau huruf

<!DOCTYPE html>
<html>
<head>
<title>Contoh text dengan daftar angka atau huruf dan text tidak dengan daftar angka atau huruf</title>
</head>
<body>
  <p>Ini adalah text tidak dengan daftar angka atau huruf<p>
  <ol>
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
  </ol>
</body>
</html>

Hasilnya: Ini adalah text tidak dengan daftar angka atau huruf Item pertama Item kedua Item ketiga

Selain tag-tag di atas, masih banyak lagi tag HTML yang dapat digunakan untuk text formatting. Kita dapat menggabungkan beberapa tag untuk menciptakan tampilan text yang lebih kompleks dan menarik.