Paragraf HTML
Tag paragraf HTML (<p>) akan sering kita gunakan di berbagai jenis situs atau halaman web.
Termasuk toko online, blog, profil perusahaan, portofolio dan sebagainya.
Kita bisa saja membuat paragraf menggunakan tag selain <p> dan menyesuaikan gayanya menggunakan CSS agar menyerupai paragraf, tapi ini bukan praktik yang baik.
Oleh karena itu kali ini kita akan mempelajari beberapa topik terkait paragraf, mulai dari pembuatan, menyesuaikan gaya, mengatur jarak antar paragraf dan sebagainya.
Mari kita mulai.
- Apa Itu Paragraf?
- Cara Membuat Paragraf
- Jangan Gunakan Tag
<div>untuk Paragraf - Membuat Baris Baru dengan Tag
<br> - Membuat Garis Horizontal dengan Tag
<hr> - Menggunkaan Tag
<pre> - Menyesuaikan Gaya Paragraf
Apa Itu Paragraf?
Paragraf adalah elemen yang mewakili sebuah paragraf.
Paragraf biasanya direpresentasikan sebagai blok atau kumpulan teks yang dipisahkan dengan spasi putih dari blok yang berdekatan.
Paragraf digunakan untuk mengelompokkan struktur konten, misalnya gambar dan paragraf akan memiliki tag yang berbeda.
Cara Membuat Paragraf
Untuk membuat paragraf di HTML, kita bisa menggunakan tag yang dibuat khusus untuk paragraf, yaitu <p>.
Dalam stuktur HTML tertentu tag <p> tidak membutuhkan penutup, namun kita disarankan untuk selalu menulis tag penutup.
Teks atau konten yang dijadikan sebagai paragraf bisa ditulis diantara tag pembuka dan penutup.
Contoh:
<p>
Saya sedang belajar HTML di Kodealgo, saat ini saya sedang mempelajari topik
terkait paragraf mulai dari cara membuat hingga mengatur gaya paragraf.
</p>
<p>
Ada banyak materi gratis terkait pemrograman yang bisa kita pelajari di
Kodealgo termasuk HTML, CSS, JavaScript dan sebagainya.
</p>
Hasil:
Jangan Gunakan Tag <div> untuk Paragraf
Kesalahan umum yang sering dilakukan oleh pemula adalah menggunakan tag yang tidak sesuai untuk membuat elemen tertentu.
Misalnya, niatnya ingin membuat paragraf, tapi tag yang digunakan adalah <div>.
Ini bukan hanya soal visual.
Kalau urusan visual bisa kita atur menggunakan CSS agar memiliki tampilan yang mirip seperti paragraf.
Tapi ini bukanlah parktik yang baik, karena tag <div> tidak dirancang untuk paragraf.
Jadi, gunakan tag yang sesuai fungsinya ketika membuat elemen HTML. Untuk paragraf, selalu gunakan tag <p>.
Contoh baik:
<p>
Saya sedang belajar HTML di Kodealgo, saat ini saya sedang mempelajari topik
terkait paragraf mulai dari cara membuat hingga mengatur gaya paragraf.
</p>
<p>
Ada banyak materi gratis terkait pemrograman yang bisa kita pelajari di
Kodealgo termasuk HTML, CSS, JavaScript dan sebagainya.
</p>
Contoh buruk:
<div>
Saya sedang belajar HTML di Kodealgo, saat ini saya sedang mempelajari topik
terkait paragraf mulai dari cara membuat hingga mengatur gaya paragraf.
</div>
<div>
Ada banyak materi gratis terkait pemrograman yang bisa kita pelajari di
Kodealgo termasuk HTML, CSS, JavaScript dan sebagainya.
</div>
Berikut perbandingan paragraf yang menggunakan tag <p> (paragraf 1 dan 2) dan <div> (paragraf 3 dan 4):
Membuat Baris Baru dengan Tag <br>
Baris baru (enter) yang kita tulis di dalam tag <p> tidak ditampilkan di browser.
Lebar paragraf akan secara otomatis menyesuaikan dengan lebar elemen yang membungkusnya.
Jika lebar elemen pembungkus tidak muat dalam satu baris, secara otomatis akan membuat baris baru.
Mari kita lihat contoh berikut:
<p>
Saya sedang belajar HTML di Kodealgo, saat ini saya sedang mempelajari topik
terkait paragraf mulai dari cara membuat hingga mengatur gaya paragraf.
</p>
Lihat baris baru setelah kata "topik", ini tidak ditampilkan di browser.
Seperti ini hasilnya jika saya perkecil jendela browser:
Jika jendela browser seukuran layar hasilnya mungkin akan ditampilkan dalam satu baris, tergantung ukuran layar atau elemen pembungkus.
Terus bagaimana jika saya ingin menambahkan baris baru di dalam paragraf?
Gunakan tag <br> atau <br /> (sama saja), contoh:
<p>
Saya sedang belajar HTML di Kodealgo, <br />
saat ini saya sedang mempelajari topik terkait paragraf <br />
mulai dari cara membuat hingga mengatur gaya paragraf.
</p>
Hasil:
Jangan gunakan tag <br> untuk membuat baris baru antar paragraf. Lebih baik, gunakan tag <p> yang berbeda untuk mengelompokkan setiap paragraf.
Membuat Garis Horizontal dengan Tag <hr>
Tag <hr> atau <hr /> (horzontal rule) dapat digunakan untuk membuat garis horizontal. Ini biasanya digunakan untuk memisahkan paragraf antar topik.
Gaya garis tergantung browser yang digunakan, di Mozilla Firefox garis terlihat lebih tebal dibandingkan dengan Google Chrome.
Tapi, ini bisa kita atur menggunakan CSS.
Contoh:
<p>
Saya sedang belajar HTML di Kodealgo, saat ini saya sedang mempelajari topik
terkait paragraf mulai dari cara membuat hingga mengatur gaya paragraf.
</p>
<hr />
<p>
Ada banyak materi gratis terkait pemrograman yang bisa kita pelajari di
Kodealgo termasuk HTML, CSS, JavaScript dan sebagainya.
</p>
Hasil:
Menggunkaan Tag <pre>
Teks yang dibungkus dengan tag <pre> akan ditampilkan dengan format yang sama seperti yang ditulis di dalam file HTML.
Tidak seperti <p>, jika kita menambahkan baris baru, indentasi (menjorok), spasi dan sebagainya, itu semua akan ditampilkan apa adanya.
Secara default, teks yang ditempatkan di dalam tag ini akan menggunakan jenis huruf monospace.
Contoh:
<pre>
ini teks tanpa indentasi
ini teks dengan identasi
ini paragraf setelah dua kali enter
</pre>
Hasil:
Tag <pre> sering digunakan untuk membungkus kode atau skrip pemrograman agar strukturnya dipertahankan ketika dibuka di browser.
Termasuk semua contoh kode yang Anda lihat di Kodealgo menggunakan tag <pre>.
Menyesuaikan Gaya Paragraf
Secara default, browser akan memberikan gaya dasar untuk paragraf HTML. Tapi kita bisa mengaturnya sesuai keinginan menggunakan CSS.
Kita akan menggunakan atribut style untuk menyisipkan CSS di dalam tag pembuka paragraf.
Metode ini sebetulnya tidak direkomendasikna, jika Anda sudah mempelajari CSS lebih baik tulis di dalam file CSS agar lebih rapi.
Mari kita mulai.
1. Warna Latar Belakang dan Teks
Untuk mengubah warna latar belakang paragraf bisa menggunakan properti CSS background-color, sedangkan untuk warna teks menggunakan color.
Kita bisa menggunakan warna standar seperti tomato, orange, slateblue dan sebagainya, atau menggunkaan kode warna RGB, HEX, HSL, RGBA, atau HSLA.
Contoh:
<p style="background-color: mediumseagreen">
Ini adalah paragraf yang hanya menggunakan warna latar belakang. Semua teks
yang ada di dalam paragraf ini akan memiliki warna latar belakang.
</p>
<p style="color: red">
Ini adalah paragraf yang hanya menggunakan warna teks. Semua teks di dalam
paragraf ini akan memiliki warna.
</p>
<p style="background-color: slateblue; color: yellow">
Ini adalah paragraf yang menggunakan warna latar belakang dan warna teks.
Semua teks di paragraf ini akan memiliki warna latar belakang dan warna teks.
</p>
Hasil:
2. Ukuran Huruf
Untuk mengubah ukuran huruf paragraf, kita bisa menggunakan properti CSS font-size. Kita bisa menggunakan satuan ukuran px, em, rem dan sebagainya.
Contoh:
<p style="font-size: 20px">
Semua teks di dalam paragraf ini memiliki ukuran 20px.
</p>
<p style="font-size: 25px">
Semua teks di dalam paragraf ini memiliki ukuran 25px.
</p>
Hasil:
3. Jarak Antar Baris
Terkadang kita juga perlu mengatur jarak antar baris dalam paragraf.
Misalnya ketika ukuran huruf diperbesar, agar terlihat lebih rapi kita juga perlu memperbesar ukuran jarak antar baris.
Jarak antar baris bisa kita atur menggunakan properti CSS line-height.
Contoh:
<p style="line-height: 35px">
Paragraf 1: Lorem ipsum dolor sit amet consectetur adipisicing elit.
Recusandae odio at quod, doloremque ex vel? Dolore, impedit incidunt cumque
tempore vel officiis esse omnis exercitationem soluta eos. Facere, quam autem!
</p>
Hasil:
4. Jarak Antar Paragraf
Untuk mengatur jarak antar paragraf kita bisa menggunakan properti CSS margin-top (jarak atas) atau margin-bottom (jarak atas).
Contoh:
<p style="margin-bottom: 70px">
Paragraf 1: Lorem ipsum dolor sit amet consectetur adipisicing elit.
Recusandae odio at quod, doloremque ex vel? Dolore, impedit incidunt cumque
tempore vel officiis esse omnis exercitationem soluta eos. Facere, quam autem!
</p>
<p>
Paragraf 1: Lorem ipsum dolor sit amet consectetur adipisicing elit.
Recusandae odio at quod, doloremque ex vel? Dolore, impedit incidunt cumque
tempore vel officiis esse omnis exercitationem soluta eos. Facere, quam autem!
</p>
Hasil:
5. Jenis Huruf
Jika tidak ditentukan secara manual, browser biasanya akan menggunakan jenis huruf yang tersedia di komputer.
Di Windows, biasanya menggunakan Times New Roman.
Di linux atau MacOS mungkin beda lagi, tergantung platform yang digunakan untuk menjalankan browser.
Untuk mengubah jenis huruf paragraf, kita bisa menggunakan properti CSS font-family.
Contoh:
<p style="font-family: 'Times New Roman'">
Times New Roman: Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Quos repellat voluptate voluptatum magni dolore consequuntur perferendis iste
sint? Eius, incidunt?
</p>
<p style="font-family: Arial">
Arial: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium
atque ullam dolorum perferendis architecto veritatis delectus amet fuga
reprehenderit repudiandae?
</p>
<p style="font-family: Georgia">
Georgia: Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse minima
nemo placeat itaque. Iste, officiis veritatis! Autem voluptatibus asperiores
aliquam?
</p>
Hasil:
6. Indentasi (Menjorok)
Untuk membuat baris pertama menjorok ke dalam, kita bisa menggunakan properti CSS text-indent.
Kita bisa menentukan kedalam atau nilai properti text-indent dalam px, em, atau persen.
Contoh:
<p style="text-indent: 50px">
Baris pertama pada paragraf ini akan menjorok sebesar 50px. Hanya baris
pertama saja, baris berikutnya tidak menjorok, mirip seperti koran.
</p>
Hasil:
