BAB 6 : MATERI TEKS FORMATING

1. Pengertian Text Formatting

Text Formatting dalam HTML adalah teknik untuk mengatur tampilan dan penekanan teks agar lebih:

Mudah dibaca
Menarik
Informatif
Memiliki penekanan tertentu

2. Jenis-Jenis Text Formatting

HTML menyediakan beberapa tag untuk memformat teks.

2.1 Teks Tebal (Bold)

<b>Teks Tebal</b>

👉 Hanya mengubah tampilan (visual saja)

2.2 Teks Penting (Strong)

<strong>Teks Penting</strong>

👉 Memiliki makna penting (semantic)

📌 Perbedaan penting:

 → hanya tampilan
 → ada arti (penting untuk SEO & accessibility)

2.3 Teks Miring (Italic)

<i>Teks Miring</i>

2.4 Penekanan (Emphasis)

<em>Teks Ditekankan</em>

📌 Sama seperti:

 → visual
 → makna penekanan

2.5 Garis Bawah

<u>Teks Garis Bawah</u>

2.6 Highlight (Mark)

<mark>Teks Disorot</mark>

2.7 Teks Kecil

<small>Teks kecil</small>

2.8 Coret (Deleted)

<del>Harga lama</del>

2.9 Sisipan (Inserted)

<ins>Harga baru</ins>

2.10 Superscript & Subscript

X<sup>2</sup>
H<sub>2</sub>O

3. Perbedaan Visual vs Semantic (Penting di Industri)

Visual	Semantic
`<b>`	`<strong>`
`<i>`	`<em>`

👉 Rekomendasi industri:
Gunakan semantic karena:

Lebih SEO friendly
Lebih baik untuk screen reader
Lebih profesional

4. Contoh Real (Dunia Nyata)

4.1 Contoh Artikel Berita

<h1>Perkembangan Teknologi AI</h1>

<p>
Teknologi <strong>Artificial Intelligence</strong> berkembang sangat pesat.
</p>

<p>
Banyak perusahaan mulai menggunakan <em>AI</em> untuk meningkatkan efisiensi kerja.
</p>

<p>
Namun, penggunaan AI harus dilakukan dengan <mark>bijak</mark>.
</p>

4.2 Contoh Toko Online

<h2>Sepatu Sneakers</h2>

<p>
<del>Rp500.000</del> <ins>Rp350.000</ins>
</p>

<p>
Diskon hingga <strong>30%</strong> hanya hari ini!
</p>

4.3 Contoh Materi Pelajaran

<p>
Rumus luas persegi adalah: L = s<sup>2</sup>
</p>

<p>
Air memiliki rumus kimia: H<sub>2</sub>O
</p>

5. Kombinasi Text Formatting

Tag bisa digabungkan:

<p>
<strong><em>Penting dan ditekankan</em></strong>
</p>

6. Best Practice Industri

✔ Gunakan semantic tag

Gunakan:

<strong> bukan <b>
<em> bukan <i>

✔ Jangan berlebihan

❌ Salah:

<b><i><u><mark>Terlalu banyak</mark></u></i></b>

✔ Benar:

<strong>Penting</strong>

✔ Gunakan sesuai konteks

 → highlight penting
<del> → harga lama
<ins> → update baru

7. Kesalahan Umum Siswa

❌ 1. Semua teks dibuat bold

<b>Semua teks</b>

👉 Tidak efektif

❌ 2. Tidak menggunakan semantic

<b>Penting</b>

👉 Harusnya:

<strong>Penting</strong>

❌ 3. Over styling

👉 Terlalu banyak format → tidak profesional

8. Studi Kasus (Mini Project)

Kasus: Halaman Promo Produk

<!DOCTYPE html>
<html>
<head>
    <title>Promo</title>
</head>
<body>

<h1>Promo Laptop Gaming</h1>

<p>
Laptop dengan performa <strong>tinggi</strong> untuk gaming dan editing.
</p>

<p>
Harga:
<del>Rp15.000.000</del>
<ins>Rp12.000.000</ins>
</p>

<p>
Promo berlaku sampai <mark>akhir bulan</mark>.
</p>

</body>
</html>

9. Latihan Siswa

Latihan 1

Buat paragraf dengan:

Latihan 2

Buat tampilan:

Harga lama (coret)
Harga baru

Latihan 3

Buat materi pelajaran:

Gunakan  dan

10. Mini Project

Buat halaman:

“Artikel Teknologi”

Isi:

Judul
Paragraf
Highlight
Penekanan kata penting

11. Kesimpulan

Text Formatting digunakan untuk:

Memberi penekanan
Memperjelas informasi
Membuat tampilan menarik