SERIES HTML5 - CHAPTER 4 : PARAGRAPHS HTML

Dayat Miftahul Jannah
12:20:26 AM
 

 
Pada artikel ini, kita akan melanjutkan postingan SERIES HTML5, di kesempatan kali ini kita akan mengenal dan juga mempelajari tentang Paragraf HTML dan implementasi dasarnya melalui contoh-contoh yang saya sediakan di bawah. Tag <p> dalam HTML mendefinisikan sebuah paragraf. Tg ini memiliki tag pembuka dan juga tag penutup. Jadi apa pun yang disebutkan di dalam <p> dan </p> diperlakukan sebagai paragraf. Sebagian besar browser membaca baris sebagai paragraf meskipun kita tidak menggunakan tag penutup yaitu </p>, tetapi ini dapat meningkatkan hasil yang tidak diharapkan. Jadi, ini adalah konvensi yang baik, dan kita harus menggunakan tag penutup.
 
Syntax Paragraf : 
 <p> Content </p>
 

Contoh 1: Dalam contoh ini, kita menggunakan tag <p> yang digunakan untuk paragraf dalam HTML. 

1:  <!DOCTYPE html>  
2:  <html>  
3:  <body>  
4:    <h2>Selamat Datang di Mata Panda Crew</h2>  
5:    <!-- Gunakan tag <p> -->  
6:  <p>Blog ilmu komputer untuk Programmer.</p>  
7:  </body>  
8:  </html>
 Output :
 

 Contoh 2: Contoh ini menjelaskan tag HTML <p>.

1:  <!DOCTYPE html>  
2:  <html>  
3:  <body>  
4:  <p>Blog ilmu komputer untuk Programmer.</p>  
5:  <p>Ini berisi artikel yang ditulis dengan baik dan dipikirkan dengan baik.</p>  
6:  </body>  
7:  </html>
 Output :

 
Poin Utama: Saat kita melihat sebuah halaman web, kita melihat bahwa ada beberapa spasi yang ditambahkan sebelum dan sesudah paragraf. HTML melakukan ini secara default. Mari kita lihat beberapa properti dari tag paragraf:
 
  • Seperti yang telah disebutkan, tag <p> secara otomatis menambahkan spasi sebelum dan sesudah paragraf apa pun, yang pada dasarnya adalah margin yang ditambahkan oleh browser.
  • Jika pengguna menambahkan beberapa spasi, browser menguranginya menjadi satu spasi.
  • Jika pengguna menambahkan beberapa baris, browser menguranginya menjadi satu baris.
  • Secara default, tampilan elemen Paragraph diatur ke “block” yang dapat kalian ubah menggunakan CSS. Ini berarti bahwa jika kalian menambahkan paragraf lain ke halaman web, paragraf berikutnya akan dimasukkan ke baris berikutnya di halaman web.

 

Contoh 3 : Contoh ini menjelaskan tag HTML <p> yang memiliki banyak baris.

1:  <!DOCTYPE html>  
2:  <html>  
3:  <body>  
4:  <p>  
5:      Paragraf ini memiliki beberapa baris.  
6:       Tapi HTML menguranginya menjadi satu baris,  
7:       menghilangkan carriage return yang telah kita gunakan.  
8:    </p>  
9:  <p>  
10:      Paragraf ini memiliki banyak spasi.  
11:       Tapi HTML mengurangi semuanya menjadi satu  
12:       spasi, menghilangkan spasi dan garis ekstra yang telah kita gunakan.  
13:    </p>  
14:  </body>  
15:  </html>
 Output :

 

Tag <br>: 

Ada cara untuk memberi tahu HTML di mana browser perlu mengubah baris dengan menggunakan tag <br>. Tag ini tidak memiliki tag penutup. Jadi, hanya satu tag pembuka yang akan mengubah baris.
 

Syntax :
 <br>

Contoh 4: Contoh ini menjelaskan tag <br> di dalam tag <p> untuk menambahkan jeda baris.

1:  <!DOCTYPE html>  
2:  <html>  
3:  <body>  
4:  <p>  
5:      Paragraf ini memiliki banyak  
6:       <br />baris. Tapi HTML menguranginya  
7:       <br />ke satu baris, hilangkan  
8:       <br />carriage return yang kita gunakan.  
9:    </p>  
10:  </body>  
11:  </html>
Output :

Atribut Align: 

Tag <p> secara khusus mendukung atribut alignment dan memungkinkan kita untuk menyelaraskan paragraf kita dalam perataan kiri, kanan, atau tengah.

Syntax :
 <p align="value">

Contoh 5 : Contoh ini menjelaskan atribut align untuk menyelaraskan konten dalam tag <p>.

1:  <!DOCTYPE html>  
2:  <html>  
3:  <body>  
4:    <p align="center">Selamat DatangProgrammers</p>  
5:    <p align="left">Blog ilmu komputer untuk Programmer.</p>  
6:    <p align="right">Ini berisi artikel yang ditulis dengan baik dan dipikirkan dengan baik.</p>  
7:  </body>  
8:  </html>
Output :



Tag <pre>: 

Kita telah melihat bagaimana tag paragraf mengabaikan semua perubahan baris dan spasi tambahan dalam sebuah paragraf, tetapi ada cara untuk mempertahankannya dengan menggunakan tag <pre>. Ini juga berisi tag pembuka dan penutup. Ini menampilkan teks dalam tinggi dan lebar tetap dan mempertahankan garis dan spasi tambahan yang kita gunakan.

 <pre> Content </pre>

Contoh 6 : Contoh ini menjelaskan penggunaan tag <pre> pada tag <p>.

1:  <!DOCTYPE html>  
2:  <html>  
3:  <body>  
4:   <pre>  
5:    Paragraf ini memiliki banyak  
6:     garis. Tapi itu ditampilkan  
7:     karena tidak seperti paragraf  
8:     menandai.  
9:    </pre>  
10:   <pre>  
11:    Paragraf ini memiliki banyak  
12:     spasi. Tapi   itu ditampilkan  
13:     karena    tidak seperti          paragraf  
14:       menandai.  
15:    </pre>  
16:  </body>  
17:  </html>

Output :

Browser yang mendukung tag Paragraf:

  • Google Chrome
  • Internet ExplorerMicrosoft Edge 12
  • Firefox 1
  • Opera
  • Safari
 
Oke mungkin sampai disini dulu untuk pembahasan mengenai PARAGRAPHS HTML, kita akan bahas mengenai HTML5 lainnya di postingan slanjutnya.
 
See you next time :).