Cara Menulis Teks HTML + Contoh Kode & Hasilnya

Cara Menulis Teks HTML – Contoh Kode dan Hasil Tampilannya

Artikel ini menjelaskan berbagai cara menulis teks dalam HTML, lengkap dengan contoh kode dan hasil tampilannya. Semua contoh bisa dipakai langsung di Blogspot.

1. Membuat Teks Bold / Tebal

Hasil Tampilan:

Teks ini tebal
Teks ini juga tebal

Kode:

<b>Teks ini tebal</b>
<strong>Teks ini juga tebal</strong>

2. Membuat Teks Miring / Italic

Hasil Tampilan:

Teks miring
Teks miring juga

Kode:

<i>Teks miring</i>
<em>Teks miring juga</em>

3. Membuat Teks Garis Bawah / Underline

Hasil Tampilan:

Teks bergaris bawah

Kode:

<u>Teks bergaris bawah</u>

4. Membuat Teks Tercoret

Hasil Tampilan:

~~Teks tercoret~~

Kode:

<s>Teks tercoret</s>

5. Membuat Teks Berwarna

Hasil Tampilan:

Teks merah
Teks biru muda

Kode:

<span style="color:red;">Teks merah</span>
<span style="color:#00aaff;">Teks biru muda</span>

6. Membuat Background Warna Pada Teks

Hasil Tampilan:

Background kuning
Background hijau muda

Kode:

<span style="background:yellow;">Background kuning</span>
<span style="background:#00ffcc;">Background hijau muda</span>

7. Warna Teks + Background Sekaligus

Hasil Tampilan:

Putih + Hitam
Putih + Oranye

Kode:

<span style="color:white; background:black; padding:3px 6px;">Putih + Hitam</span>
<span style="color:#fff; background:#ff6600; padding:3px 6px;">Putih + Oranye</span>

8. Mengubah Ukuran Teks

Hasil Tampilan:

Teks besar 28px
Teks kecil 14px

Kode:

<span style="font-size:28px;">Teks besar 28px</span>
<span style="font-size:14px;">Teks kecil 14px</span>

9. Mengubah Jenis Font

Hasil Tampilan:

Contoh font Courier
Contoh font Times New Roman

Kode:

<span style="font-family:Courier;">Contoh font Courier</span>
<span style="font-family:'Times New Roman';">Contoh font Times New Roman</span>

10. Teks di Tengah / Center

Hasil Tampilan:

Teks ini berada di tengah

Kode:

<p style="text-align:center;">Teks ini berada di tengah</p>

11. Kombinasi Lengkap (Bold + Warna + Background + Radius)

Hasil Tampilan:

Teks kombinasi lengkap

Kode:

<span style="font-weight:bold; color:#fff; background:#007bff; padding:4px 8px; border-radius:5px;">
Teks kombinasi lengkap
</span>

12. Membuat Teks Stabilo (Highlight)

Hasil Tampilan:

Teks stabilo kuning

Kode:

<mark>Teks stabilo kuning</mark>

Kesimpulan

Dengan HTML, Anda bisa membuat teks lebih menarik menggunakan bold, italic, warna, background, highlight, hingga kombinasi berbagai gaya. Semua contoh di atas bisa langsung Anda gunakan pada artikel Blogspot.