BAB 5 : MATERI PARAGRAF DALAM HTML
1. Pengertian Paragraf dalam HTML
Paragraf dalam HTML digunakan untuk menampilkan teks atau isi konten dalam sebuah halaman web.
Tag yang digunakan adalah:
<p>Ini adalah paragraf</p>Tag <p> merupakan singkatan dari paragraph.
2. Fungsi Paragraf
Paragraf memiliki beberapa fungsi penting:
- Menampilkan isi teks utama
- Membuat konten lebih rapi dan mudah dibaca
- Memberikan jarak antar blok teks secara otomatis
- Membantu struktur konten website
3. Cara Kerja Paragraf di HTML
Browser akan secara otomatis:
- Memberikan jarak atas dan bawah
- Menampilkan teks dalam satu blok
- Mengabaikan spasi berlebih
Contoh:
<p>Ini paragraf pertama</p>
<p>Ini paragraf kedua</p>Hasil:
- Paragraf akan terpisah dengan jarak
4. Karakteristik Paragraf HTML
4.1 Mengabaikan Spasi Berlebih
HTML tidak peduli jumlah spasi atau enter dalam kode.
<p>
Ini adalah
paragraf
yang panjang
</p>Hasil di browser:
Ini adalah paragraf yang panjang👉 Semua spasi berlebih akan dirapikan menjadi satu spasi.
4.2 Tidak Otomatis Pindah Baris
Jika ingin pindah baris di dalam paragraf, gunakan:
<br>Contoh:
<p>
Nama: Budi<br>
Kelas: X RPL<br>
Sekolah: SMK
</p>4.3 Membuat Garis Pemisah
Gunakan:
<hr>Contoh:
<p>Paragraf pertama</p>
<hr>
<p>Paragraf kedua</p>5. Atribut pada Tag <p>
5.1 Atribut style
Digunakan untuk mengatur tampilan teks.
Contoh:
<p style="color:blue;">Teks berwarna biru</p>
<p style="text-align:center;">Teks rata tengah</p>
<p style="font-size:20px;">Teks lebih besar</p>5.2 Atribut align (tidak direkomendasikan lagi)
<p align="center">Teks tengah</p>⚠️ Catatan:
- Atribut ini sudah deprecated
- Sebaiknya gunakan CSS
6. Perbedaan Paragraf dan Heading
| Elemen | Fungsi |
|---|---|
<p> | Isi teks |
<h1> - <h6> | Judul |
Contoh:
<h1>Judul Artikel</h1>
<p>Ini adalah isi artikel.</p>7. Best Practice Industri
Sebagai web developer profesional, gunakan paragraf dengan benar:
✔ Gunakan paragraf untuk isi teks
✔ Jangan gunakan <br> berlebihan
✔ Gunakan CSS untuk styling
✔ Pisahkan konten per ide
Contoh bagus:
<p>HTML adalah dasar dari semua website.</p>
<p>Dengan HTML, kita bisa membuat struktur halaman.</p>8. Kesalahan Umum Siswa
❌ 1. Tidak menggunakan <p>
Ini teks tanpa paragraf👉 Salah karena tidak terstruktur
❌ 2. Menggunakan <br> untuk paragraf
Ini paragraf<br><br>
Ini paragraf lagi👉 Tidak profesional
❌ 3. Paragraf terlalu panjang
<p>Paragraf sangat panjang tanpa jeda...</p>👉 Sulit dibaca
9. Studi Kasus (Dunia Nyata)
Kasus: Artikel Website Sekolah
<h1>Profil Sekolah</h1>
<p>
SMK Negeri 1 Teknologi adalah sekolah unggulan yang berfokus pada bidang IT.
</p>
<p>
Sekolah ini memiliki berbagai jurusan seperti RPL, TKJ, dan Multimedia.
</p>👉 Ini adalah contoh penggunaan paragraf yang benar dalam dunia nyata.
10. Contoh Program Lengkap
<!DOCTYPE html>
<html>
<head>
<title>Belajar Paragraf</title>
</head>
<body>
<h1>Belajar HTML</h1>
<p>HTML adalah bahasa dasar untuk membuat website.</p>
<p>
Dengan HTML, kita dapat membuat teks, gambar, dan link.
</p>
<p>
Nama: Andi<br>
Kelas: X RPL<br>
Sekolah: SMK
</p>
<hr>
<p style="text-align:center;">
Terima kasih telah belajar HTML
</p>
</body>
</html>11. Latihan Siswa
Latihan 1 (Dasar)
Buat 3 paragraf tentang:
- Diri sendiri
- Sekolah
- Cita-cita
Latihan 2 (Menengah)
Buat halaman HTML berisi:
- 1 Judul
- 3 Paragraf
- 1
<br> - 1
<hr>
Latihan 3 (Lanjutan)
Buat artikel:
- Judul
- Minimal 5 paragraf
- Gunakan style (warna / rata tengah)
12. Mini Project
Buat halaman:
“Profil Diri Siswa”
Isi:
- Judul
- Paragraf perkenalan
- Paragraf hobi
- Paragraf cita-cita
13. Kesimpulan
Paragraf adalah elemen penting dalam HTML untuk:
- Menampilkan isi teks
- Membuat halaman lebih rapi
- Membantu pembaca memahami konten
Tag utama:
<p>...</p>