[TUTORIAL-HTML] Part 06. HTML Paragraph

List Materi

Silabus

HTML Paragraph (paragraf)
Element <p> mendefinisikan sebuah paragraf

Contoh:

<p>Ini Paragraf Juragan </p>
<p>Paragraf Lagi Juragan</p>

NB: "Browser dengan otomatis akan menambahkan baris kosong setelah element paragraf" 

HTML Display (Tampilan HTML)

Ada tidak dapat memastikan bagaimana HTML akan ditampilkan pada layar.
Ukuran layar besar maupun kecil, akan berbeda hasilnya.
Pada HTML, anda tidak bisa mengubah output HTML dengan menambahkan spasi lebih dari satu.
Browser akan mengabaikan spasi lebih dari satu tersebut ketika halaman ditampilkan.
Mau 5 spasi kek, 10 spasi kek, atau 2 baris kosong, hasilnya tetap "Satu Spasi"

Contoh:

<p>
Ini Paragraf Juragan
Banyak baris
di source code begini,
tapi pada browser
tetap satu spasi hehe
</p>
<p>
Ini Paragraf       Juragan
Banyak           baris
di source           code begini,
tapi                            pada browser
tetap              satu spasi hehe
</p> 

Selalu Ingat!, "Jangan Lupa Tag Tutup"

Kebanyakan browser tetap menampilkan HTMLnya walaupun anda lupa tag tutupnya

Contoh:

<p> Ini Paragraf tanpa tag tutup
<p> Paragraf lagi tanpa tag tutup

Contoh diatas akan bisa tetap berjalan di mayoritas browser, tapi jangan biasakan kebiasaan buruk ini.
Lupa Tag tutup akan menyebabkan kekacauan jika HTML anda sudah komples.

NB: "Versi HTML yang lebih ketat seperti XHTML, tidak membolehkan anda melewatkan tag tutup" 

HTML Line Break (untuk membuat baris baru)

HTML <br> mendefinisikan baris baru.
Gunakan <br> jika anda ingin membuat baris baru tanpa membuat paragraf baru.

Contoh:

<p>Ini <br> sebuah para<br>graf dengan baris baru</p>

Element <br> merupakan elemen kosong tanpa tag tutup.

Contoh Kasus: PUISI

Contoh:

<p>Puisi ini akan ditampilkan menjadi satu baris </p> 

<p>
     Sebuah jaket berlumur darah
     Kami semua telah menatapmu
     Telah pergi duka yang agung
     Dalam kepedihan bertahun-tahun.
</p>

Solusi: Gunakan element <pre>

Element <pre> mendefinisikan pre-formated text (text sebelum diformat), dengan spasi dan baris terstruktur.
Untuk menampilkan sesuatu dengan spasi yang sama, anda tetap harus menggunakan tag <p>

Contoh:

<p>Ini Akan Menampilkan Sebuah Puisi </p> 

<pre>
     Sebuah jaket berlumur darah
     Kami semua telah menatapmu
     Telah pergi duka yang agung
     Dalam kepedihan bertahun-tahun.
</pre>

Download Materi klik disini