Paragraf HTML

Paragraf HTML

Elemen paragraf di HTML dibuat menggunakan tag <p>. Tag ini memberitahu web browser bahwa teks di dalamnya merupakan suatu paragraf.

Untuk membuat paragraf pada HTML, di awali dengan tag <p> pembuka, dan diakhiri dengan tag </p> penutup. Kemudian tulis isi paragrafnya di antara tag <p> dan </p>

Sehingga web browser akan menjalankan teks yang ada di dalam <p> dan </p> sebagai paragraf.

Contohnya:

<p>Ini adalah contoh paragraf HTML.</p>

Struktur Dasar Paragraf

Elemen paragraf memiliki struktur dasar yang sederhana. Mulai dari tag pembuka <p> hingga tag penutup </p>, semua teks di antara keduanya dianggap sebagai satu paragraf.

Contoh:

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

Format Teks dalam Paragraf

Jika kamu ingin membuat tulisan tebal (bold) dalam paragraf, kamu bisa menggunakan tag <strong> .. </strong> atau tag <b> .. </b>

Dan jika kamu ingin membuat tulisan miring (italic), kamu bisa menggunakan tag <em> .. </em> atau tag <i> .. </i>.

Contoh:

<p><strong>Teks tebal</strong> dan <em>teks miring</em> dalam satu paragraf.</p>

Posisi Text Paragraf

Untuk mengatur alignment atau posisi teks pada paragraf, kita bisa menggunakan atribut align. dan mengisi value “right”, “left”, atau “center”.

Jika ingin posisi text berada di sebelah kiri, kita bisa menambahkan atribut align="left", jika ingin posisi text berada di tengah, kita bisa menambahkann atribut align="center".

Dan jika ingin membuat posisi text berada di kanan, kita bisa menggunakan atribut align="right".

Perhatikan contoh berikut.

<p align="left">Ini adalah paragraf dengan text yang berada di <b>kiri</b>.</p>
<p align="right">Ini adalah paragraf dengan text yang berada di <b>kanan</b>.</p>
<p align="center">Ini adalah paragraf dengan text yang berada di <b>tengah</b>.</p>

Menerapkan CSS pada Paragraf

Jika ingin memberikan tampilan yang lebih menarik, kita dapat menggunakan CSS untuk memodifikasi elemen paragraf. 

Misalnya :

  • mengubah warna teks
  • mengatur spasi
  • merubah jenis huruf
  • dan lain-lain
<style>
 p {
   color: blue;
   font-size: 16px;
 }
</style>

Script CSS di atas hanya contoh saja. Hanya untuk memberitahu bahwa ada yang namanya CSS dan bisa diterapkan pada HTML.

Silahkan lihat tutorial CSS lengkap di codingan.id. 

Tapi pastikan kamu sudah menguasai HTML terlebih dulu sebelum mempelajari CSS. Agar materi belajarnya lebih mudah dan bisa menguasai fundamental.

Contoh Heading dan Paragraf pada Halaman Website

Mari kita praktikkan pengetahuan kita dengan membuat halaman sederhana. 

Gunakan beberapa tag paragraf untuk menyusun konten secara terstruktur. 

Cara ini akan membantu Kamu memahami bagaimana elemen paragraf bekerja dalam sebuah halaman.

<!DOCTYPE html>
<html lang="id">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Tutorial Paragraf HTML</title>
</head>
<body>
	 <h1>Selamat Datang di Tutorial Elemen Paragraf HTML</h1>
	 
	 <p>Ini adalah paragraf pertama.</p>
	 <p>Ini adalah paragraf kedua.</p>
	 
	 <p><strong>Teks tebal</strong> dan <em>teks miring</em> dalam satu paragraf.</p>

	 <p>Jangan lupa untuk berlatih membuat halaman web dengan paragraf!</p>
</body>
</html>

Kesimpulan

Menggunakan elemen paragraf HTML dengan benar adalah langkah penting dalam membangun dasar-dasar konten web. 

Selamat belajar, dan jangan ragu untuk bereksperimen!

Sampai di sini, kamu telah menyelesaikan tutorial elemen paragraf pada HTML.

Yuk lanjut ke materi HTML selanjutnya.