Paragraf merupakan sekumpulan teks atau kalimat yang tampak pada halaman web. Sebuah paragraf selalu dimulai dari baris baru, dan antar satu paragraf dengan paragraf lainnya biasanya terpisahkan dengan sebuah jarak. Meskipun biasanya paragraf berisi hanya sekumpulan teks, tetapi ia sebenarnya juga bisa digunakan untuk mengelompokkan gambar dan juga form isian.

Membuat Paragraf di HTML

Di dalam HTML, kita bisa mendefinisikan paragraf dengan tag <p> dan ditutup dengan tag </p>. Ia merupakan block elemen sehingga akan memenuhi layar dan akan membuat baris baru secara default.

Perhatikan contoh berikut:

<p>Belajar membuat paragraf.</p>
<p>Membuat paragraf sangat mudah sekali.</p>

Output:

White Space

Di dalam tag <p> pada HTML, whitespace (karakter putih/spasi lebih dari satu) apa pun akan dianggap sebagai satu spasi. Sehingga meskipun kita menambahkan karakter ganti baris, karakter tab, multi spasi, yang ditampilkan pun akan tetap sama yaitu satu spasi saja.

Perhatikan contoh berikut:

<p>Aku punya tangan
kanan dan kiri
setiap tangan ada 5 jari
</p>

<p>Satu ibu jari,    satu telunjuk,
    jari tengah,    jari manis,
dan     kelingking
</p>

Membuat Ganti Baris

Berikutnya kita bisa membuat ganti baris di dalam sebuah paragraf menggunakan tag <br>. Tag <br> merupakan tag yang tidak memiliki penutup.

Perhatikan contoh berikut:

<p>Ini paragraf <br> pertama kesukaanku</p>
<p>Ini paragraf kedua favoritku</p>

Pada kode di atas, kita membuat line break dengan tag <br> sehingga browser akan menambahkan baris baru di dalam sebuah paragraf.

Contoh lain:

<p>Aku punya tangan <br>
kanan dan kiri <br>
setiap tangan ada 5 jari <br>
</p>

<p>Satu ibu jari,<br>satu telunjuk, 
<br>jari tengah,<br>jari manis,
<br>dan     kelingking
</p>

Membuat Garis Lurus Horizontal

Selain itu kita juga bisa menggunakan tag <hr> untuk membuat garis horizontal baik di dalam paragraf mau pun di luar paragraf.

Perhatikan contoh berikut:

<h2>Paragraf 1</h2>
<p>Contoh teks paragraf pertama</p>
<hr>
<h2>Paragraf 2</h2>
<p>Contoh teks paragraf kedua</p>

Atribut Tag

Tag <p> tidak memiliki atribut khusus, ia mendukung global atribut atau atribut umum yang bisa kita gunakan di hampir semua tag HTML seperti:

• id
• class
• style
• dan lain sebagainya

Catatan: atribut align sudah kadaluarsa di HTML 5 sehingga ia harusnya sudah tidak digunakan lagi untuk melakukan perataan teks . Sebagai gantinya kita bisa menggunakan CSS.

Perataan Teks

Untuk melakukan perataan teks seperti rata tengah, rata kiri, rata kanan, rata kanan-kiri, kita bisa memanfaatkan CSS text-align. Perhatikan contoh berikut:

<p style="text-align: right">
  Aku sangat senang karena aku bisa belajar HTML dengan mudah
<p>
<p style="text-align: center">
  Setelah belajar HTML, ingin sekali rasanya aku belajar hal
  yang lebih serius lagi seperti misalnya CSS, kemudian JS.
<p>
<p style="text-align: justify">
  Mempelajari cara membuat halaman web memang sulit,
  tapi kalau kita sungguh-sungguh dan kita jalani dengan
  penuh semangat, semuanya akan terasa lebih ringan.
<p>
<p>
  Oleh karena itu aku harus tetap semangat
</p>

Mendefinisikan Teks Terformat

Yang terakhir tapi bukan yang paling akhir, kita bisa membuat sebuah kumpulan teks dalam bentuk yang terformat: alias apa yang kita definisikan dalam kode html akan ditampilkan apa adanya tanpa ada konversi karakter putih menjadi satu buah spasi.

Perhatikan contoh berikut:

<pre>
Aku punya tangan
kanan dan kiri
setiap tangan ada 5 jari
</pre>

<pre>Satu ibu jari,
   satu telunjuk, 
jari tengah,     jari manis,
  dan     kelingking
</pre>

Hasil:

Kesimpulan

Dari pertemuan kali ini bisa kita simpulkan beberapa poin:

1. Paragraf pada HTML didefinisikan dengan tag <p>
2. Tag <p> merupakan block elemen yang mana setiap kali didefinisikan, ia akan memenuhi lebar layar dan akan membuat baris baru.
3. Tag <p> akan menganggap semua karakter putih sebagai satu buah spasi.
4. Kita bisa menampilkan teks apa adanya menggunakan tag <pre>

<< Kembali HTML