HTML Dasar: Paragraf

Pendahuluan

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 [1].

Membuat Paragraf di HTML

Di dalam HTML, kita bisa mendefinisikan paragraf dengan tag <p> dan ditutup dengan tag </p>. Ia merupakan block element 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:

Berurusan Dengan Karakter Putih (White Space)

Di dalam tag <p> pada HTML, karakter putih 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>

Output:

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>

Hasil:

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>

Hasil keluaran:

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>

Hasil:

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 [2]. 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>

Hasil:

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 element 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>

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang komentar pada HTML.

Stay tune!

Referensi

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p – diakses tanggal 9 Juni 2021
[2] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p#attributes – diakses tanggal 9 Juni 2021