[Belajar HTML #7] Paragraf HTML - Tampilan HTML - Elemen < pre >

Paragraf HTML

Contoh:

<p>Ini adalah sebuah paragraf.</p>
<p>Ini adalah sebuah paragraf.</p>
<p>Ini adalah sebuah paragraf.</p>

Catatan: Browser secara otomatis menambahkan ruang putih (margin) sebelum dan sesudah paragraf.

---

Tampilan HTML

Anda tidak dapat memastikan bagaimana HTML akan ditampilkan.

Layar besar atau kecil, dan ukuran jendela akan menciptakan hasil yang berbeda.

Dengan HTML, Anda tidak dapat mengubah output dengan menambahkan spasi ekstra atau baris tambahan dalam kode HTML Anda.

Browser akan menghapus spasi tambahan dan garis tambahan saat halaman ditampilkan:

Contoh:

<p>
Paragraf ini
berisi banyak baris
dalam kode sumber,
Tetapi browser
mengabaikan saja.
</p>

<p>
Paragraf ini
berisi          banyak spasi
dalam kode              sumber,
Tetapi          browser
mengabaikan           saja.
</p>

Cobalah sendiri

Contoh Jadi:

Paragraf ini berisi banyak baris dalam kode sumber, tetapi browser mengabaikan saja.

Paragraf ini berisi banyak spasi dalam kode sumber, Tetapi browser mengabaikan saja.

---

Jangan Lupa Tag Akhir

Sebagian besar browser akan menampilkan HTML dengan benar bahkan jika Anda lupa tag akhirnya:

Contoh:

<p>Ini adalah sebuah paragraf.
<p>Ini adalah paragraf yang lain.

Cobalah sendiri

Contoh di atas akan berfungsi di sebagian besar browser, tetapi jangan mengandalkannya.

Catatan: Menjatuhkan tag akhir dapat menghasilkan hasil atau kesalahan yang tidak terduga.

---

Pemecah Baris HTML

Elemen <br> HTML mendefinisikan jeda baris .

Gunakan <br> jika Anda ingin jeda baris (baris baru) tanpa memulai paragraf baru:

Contoh:

<p>Ini adalah<br>sebuah paragraf<br>dengan pemecah baris.</p>

Cobalah sendiri

Tag <br> adalah tag kosong, yang berarti bahwa ia tidak memiliki tag akhir.

Contoh Jadi:

Ini adalah
sebuah paragraf
dengan pemecah baris.

---

Masalah Sajak

Dalam HTML, Spasi dan baris baru diabaikan

Contoh:

<p>
  Ini sajak 1.

  Ini sajak 2.

  Ini sajak 3.
  
  Ini sajak 4.
</p>

Cobalah sendiri

Bagaimana yang benar?, Klik tombol "Cobalah Sendiri" diatas

Contoh Jadi:

Ini sajak 1. Ini sajak 2. Ini sajak 3. Ini sajak 4.

---

Elemen HTML <pre>

Elemen <pre> HTML mendefinisikan teks yang telah diformat sebelumnya.

Teks di dalam <pre> elemen ditampilkan dalam font dengan lebar tetap (biasanya Kurir), dan mempertahankan spasi dan pemisah baris:

Contoh:

<pre>
  Ini Paragraf 1.

  Ini Paragraf 2.

  Ini Paragraf 3.
  
  Ini Paragraf 4.
</pre>

Cobalah sendiri

Contoh Jadi:

  Ini Paragraf 1.

  Ini Paragraf 2.

  Ini Paragraf 3.
  
  Ini Paragraf 4.

---

Referensi Tag HTML

Referensi tag ini berisi informasi tambahan tentang elemen HTML dan atributnya.

Tag	Deskripsi
<p>	Mendefinisikan sebuah paragraf
<br>	Memasukkan sebuah satu pemecah baris (Enter)
<pre>	Menentukan teks yang diformat <pre>