Belajar P Tag Element Paragraf pada HTML dan CSS

agung wisudhatama August 17, 2023 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Belajar P Tag Element Paragraf pada HTML dan CSS

PARAGRAF atau alinea merupakan tulisan yang membentuk sebuah kalimat yang saling berkaitan satu dengan lainnya. Paragraf ini menandakan dimulainya topik baru dan memisahkan dengan gagasan utama atau paragraf sebelumnya. Dengan bentuk paragraf memudahkan para pembaca untuk memahami isi topik yang sudah ditulis. Panjang tulisan tergantung dari penjabaran sebuah topik, bisa panjang dan bisa pendek.

Paragraf berfungsi untuk mengungkapkan pemikiran sang penulis secara sistematis sehingga mudah untuk dipahami oleh para pembaca. Kriteria dari sekumpulan kalimat yang dapat menjadi paragraf yaitu adanya kesatuan, kepaduan, ketuntasan, keruntutan, dan sudut pandang yang tidak berubah-ubah atau konstan.

Deskripsi p Paragraf HTML
Bila berbicara dalam khasanah ilmu CSS yang sedang kita bahas malam ini, Paragraf ditentukan dengan Tag P dan bisa ditulis dengan syntax <p>. Demikian syntax yang dipergunakan pada pembukaan kalimat di suatu paragraf. Tanpa membubuhkan tag <p> pada paragraf di postingan, tentu saja bukan sebuah hal yang krusial. Penunjang berupa tag <p> menandakan bahwa kalimat didalamnya adalah sebuah paragraf.

Baca Juga :

Dalam penulisan, <p> element sebaiknya jangan bercampur dengan element lain yang lebih cocok untuk digunakan pada syntax <p> tersebut, contohnya menggunakan <address> element, lebih tepat dibandingkan dengan <p> element dalam sebuah informasi kontak penulis artikel (author, red).

Tag akhir : </p> tidak harus ditulis jika <p> element didahului secara langsung oleh <address>, <article>, <aside>, <blockquote>, <details>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <main>, <menu>, <nav>, <ol>, <p>, <pre>, <section>, <table>, <ul> element, atau apabila tidak ada konten lain pada induk element dan induk element tersebut merupakan HTML element selain <a>, <audio>, <del>, <ins>, <map>, <noscript>, atau <video> element. Penulisan yang disarankan pada penggunaan syntax pada CSSnya seperti itu.

Berikut ini adalah contoh <p> element yang ditulis tag akhirnya (</p>).

<article>
  <h1>Contoh Kalimat</h1>
  <p>Memberi lebih baik daripada Menerima.</p>
</article>

Berikut ini adalah contoh <p> element yang tidak ditulis tag akhirnya (</p> tidak ada).

<article>
  <h1>Contoh Kalimat</h1>
  <p>Memberi lebih baik daripada Menerima.
</article>

Kedua contoh diatas adalah sama dan valid. Tidak ada yang salah.

Baca Juga :

Attributes Keseluruhan
<p> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Event Attributes
<p> tag mencakup event attributes, bisa diterjemahkan attribute dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian, red). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Examples
Contoh 1
Contoh <p> element sederhana.

<p>
Paragraf pendek atau panjang dapat ditulis disini.
</p>

Contoh 2
Contoh <p> di dalam <article> element.

<article>
  <h1>Judul</h1>
  <p>Paragraf pertama.</p>
  <p>Paragraf kedua.</p>
  <footer>
    <p>Diposting : 17 Agustus 2023</p>
    <address>admin@alifacode.com</address>
  </footer>
</article>

Contoh 3
Contoh <p> dan <ul> yang ditulis secara terpisah. Jika <ul> ditulis di dalam <p> element, maka tidak valid (tidak benar).

<p>Belajar</p>
<ul>
  <li>HTML
  <li>CSS
  <li>JavaScript,
</ul>
<p>bahasa pemrograman dasar untuk blog.</p>

Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML p tag</title>
    <style>
    </style>
  </head>
<body>
  <h3>Contoh 1</h3>
   <p>
    Paragraf pendek atau panjang dapat ditulis disini.
   </p>
   <hr/>
  <h3>Contoh 2</h3>
   <article>
    <h1>Judul</h1>
     <p>Paragraf pertama.</p>
     <p>Paragraf kedua.</p>
    <footer>
   <p>Diposting: 17 Agustus 2023</p>
   <address>admin@alifacode.com</address>
    </footer>
   </article>
  <hr />
    <h3>Contoh 3</h3>
    <p>Belajar</p>
    <ul>
     <li>HTML
     <li>CSS
     <li>JavaScript,
    </ul>
    <p>bahasa pemrograman dasar untuk blog.</p>
  </body>
</html>

Dukungan Browser
Chrome, Safari, Firefox, Opera

Pengaturan CSS

p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}

Guna mengatur jarak antara paragraf satu dengan lainnya, dapat diatur dengan CSS. margin-top untuk jarak tepi atas (jarak dengan paragraf sebelumnya), sedangkan margin-bottom adalah jarak tepi bawah (paragraf setelahnya).

Demikian artikel yang dapat kita bahas kali ini. Semoga dapat bermanfaat dan menambah khasanah ilmu. Sampai disini dulu tutorial kali ini. Sudah malam dan sekarang saatnya istirahat sejenak. Karena besok pagi kita semua akan memulai aktivitas pagi di tempat kerja.

Selalu ingat motivasi hidup kali ini ya, "Seburuk apapun masa lalumu, itu telah berlalu. Sekarang, fokus untuk kebahagiaan dirimu di masa depan". Fokuslah pada hal-hal yang menjadi tujuan utama kamu. Memotivasi supaya fokus dalam mengerjakan yang penting dan utama dalam hidup. Tetap semangat. Salam Blogger.

Bagikan ke teman-teman kamu

Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Belajar P Tag Element Paragraf pada HTML dan CSS . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.