Elemen <p> digunakan untuk mendefinisikan paragraf didalam dokumen HTML. Dalam penyajiannya, browser secara otomatis akan menambahkan margin sebelum dan sesudah paragraf, sehingga sebuah paragraf selalu di mulai dengan baris baru.
Jadi, saat anda menuliskan elemen paragraf di baris baru, anda sudah tidak perlu lagi menambahkan elemen break line atau tag <br>. Misalnya saat anda ingin menulis 3 buah paragraf seperti ini :
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Saat script tersebut dijalankan maka hasilnya akan seperti ini :
This is a paragraph.
This is a paragraph.
This is a paragraph.
Sekarang kita lihat, bahwa untuk memisahkan baris antar paragraf, tidak perlu lagi kita memasukan elemen break line <br>.
Permasalahan yang kemudian muncul adalah, kita tidak bisa menentukan secara pasti bagaimana HTML akan di tampilkan jika hanya mengandalkan permainan spasi dan baris saja saat penulisan dokumen HTML. Ini karena browser secara otomatis akan membuang ekstra spasi dan baris saat page di tampilkan.
Sekarang mari kita lihat contoh berikut :
<!DOCTYPE html>
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>
Anda akan melihat ekstra spasi dan baris yang di buat tidak mempengaruhi tampilan saat script dijalankan :
This paragraph contains a lot of lines in the source code, but the browser ignores it.
This paragraph contains a lot of spaces in the source code, but the browser ignores it.
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
TAG <hr>
Tag <hr> digunakan untuk memisahkan/ mengelompokkan paragraf dengan garis horizontal. Hal ini akan mempermudah dalam mengelompokkan paragraf atau konten sesuai dengan tema nya dalam sebuah dokumen HTML.
Tag <hr> termasuk kedalam elemen Empty tag, sehingga dalam penulisannya tidak perlu tag penutup/ end tag.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci
</p>
<hr>
<h2>This is heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci
</p>
<hr>
<h2>This is heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci
</p>
</body>
</html>
Hasilnya seperti ini :
This is heading 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci
This is heading 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci
This is heading 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci
TAG <br>
Elemen <br> digunakan untuk membuat baris baru sebuah konten HTML. Contoh :
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a paragraph<br>with line breaks.</p>
</body>
</html>
Hasilnya seperti ini :
This is
a paragraph
with line breaks.
TAG <pre>
Masalah lain yang muncul saat menulis sebuah paragraf yang berisi susunan tertentu, seperti misalnya lirik lagu atau puisi. Contohnya saja begini :
<!DOCTYPE html>
<html>
<body>
<p>In HTML, spaces and new lines are ignored:</p>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
</body>
</html>
Saat script diatas dijalankan, browser akan mengabaikan spasi dana baris baru, sehingga hasilnya akan nampak seperti ini :
In HTML, spaces and new lines are ignored:
My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.
Solusi untuk masalah ini adalah dengan menggunakan elemen <pre>. Elemen ini akan format dimana spasi dan baris baru akan dipertahankan. Kita lihat contohnya seperti ini :
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both space and line breaks :</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
oh, bring back my Bonnie to me.
</pre>
</body>
</html>
Maka hasilnya seperti ini :
The pre tag preserves both spaces and line breaks:
My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.
Referensi : w3schools.com
| Prev. Chapter | Next Chapter |
|---|---|
| HTML HEADINGS | HTML Styling |
Tidak ada komentar:
Posting Komentar