Beranda / tutorial

Belajar Dasar HTML (Bagian 3): Tag Teks dan Paragraf

Posting Komentar

Pada bagian ini, kita akan belajar bagaimana cara menampilkan teks di halaman web menggunakan tag HTML dasar.

Teks adalah bagian utama dari sebuah website — mulai dari judul artikel, paragraf, sampai penekanan kata seperti tebal atau miring.

Yuk mulai! 🚀

🏷️ Tag Heading (Judul)

Heading digunakan untuk memberikan judul pada halaman atau bagian konten.

Ada 6 level heading:

<h1>Judul Utama (H1)</h1>
<h2>Judul Bagian (H2)</h2>
<h3>Sub Bagian (H3)</h3>
<h4>Sub Bagian kecil (H4)</h4>
<h5>Judul kecil (H5)</h5>
<h6>Judul paling kecil (H6)</h6>

📌 Catatan:

  • Gunakan H1 hanya satu kali per halaman sebagai judul utama.

  • Gunakan H2–H6 untuk struktur seperti daftar isi, subbab, dsb.

📄 Tag Paragraf <p>

Untuk membuat paragraf gunakan tag <p>:

<p>Ini adalah paragraf pertama.</p>
<p>Ini paragraf kedua di halaman.</p>

Browser akan otomatis memberi jarak antar paragraf.

↩️ Memasukkan Baris Baru <br> dan Garis Pemisah <hr>

Baris baru

Hello<br>
World!

Garis horizontal

<hr>

Hasilnya akan muncul garis pemisah di halaman web — cocok untuk memisahkan bagian konten.

✨ Format Teks

TagFungsiContoh
<b>Cetak tebal<b>tebal</b>
<i>Miring<i>miring</i>
<u>Garis bawah<u>garis bawah</u>
<strong>Penekanan penting, tebal<strong>penting</strong>
<em>Penekanan makna (miring)<em>perlu diperhatikan</em>

Contoh gabungan:

<p><strong>Belajar HTML</strong> itu <em>mudah</em> dan menyenangkan!</p>

💬 Contoh Kode Lengkap

Copy dan coba jalankan:

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar Teks di HTML</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>Belajar Dasar HTML</h1>
    <h2>Bagian: Teks & Paragraf</h2>
    <p>HTML adalah bahasa markup untuk membuat halaman web.</p>
    <p><strong>Teks ini penting</strong> dan <em>ini juga penting.</em></p>
    <hr>
    <h3>Contoh Format Teks</h3>
    <p>Teks <b>tebal</b>, teks <i>miring</i>, teks <u>garis bawah</u>.</p>
  </body>
</html>

🧪 Latihan Mini 💪

Buat halaman HTML berisi:

✅ Judul besar nama kamu
✅ Subjudul “Tentang Saya”
✅ Paragraf tentang hobi dan cita-cita
✅ Kalimat motivasi memakai <strong> dan <em>

Contoh panduan format:

<h1>Nama Kamu</h1>
<h2>Tentang Saya</h2>
<p>...</p>
<p>...</p>
<strong>...</strong> <em>...</em>

🎯 Ringkasan

  • Heading untuk judul (<h1>–<h6>)

  • <p> untuk paragraf

  • <br> baris baru, <hr> garis pemisah

  • Gunakan <strong> dan <em> untuk penekanan logis (lebih baik daripada <b> dan <i>)

Kamu sudah menguasai dasar untuk menyusun konten teks di HTML! 🔥
Kita Lanjut Part 4 ya....

Posting Komentar untuk "Belajar Dasar HTML (Bagian 3): Tag Teks dan Paragraf"