Paragraf
Elemen HTML <p> digunakan untuk membuat paragraf pada dokumen HTML. Dalam pembuatan paragraf, gunakan tag pembuka <p> dan penutup </p>.
Contoh
Elemen HTML <p> digunakan untuk membuat paragraf pada dokumen HTML. Dalam pembuatan paragraf, gunakan tag pembuka <p> dan penutup </p>.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>
<p>Ini adalah paragraf</p>
<p>Ini adalah paragraf lain</p>
</body>
</html>Hasilnya:
Catatan: Browser secara otomatis menambahkan beberapa margin (atau ruang kosong) sebelum dan sesudah paragraf.
Tampilan Output HTML
Pada tampilan output halaman HTML, layar besar atau kecil, akan menciptakan hasil yang berbeda.
Dengan HTML, Anda tidak bisa mengubah output dengan menambahkan spasi atau baris dalam kode HTML Anda. Browser akan menghapus sebanyak apapun spasi yang kita berikan saat halaman ditampilkan, seperti pada contoh berikut:
Dengan HTML, Anda tidak bisa mengubah output dengan menambahkan spasi atau baris dalam kode HTML Anda. Browser akan menghapus sebanyak apapun spasi yang kita berikan saat halaman ditampilkan, seperti pada contoh berikut:
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>
<p>
Paragraf ini
terdiri dari beberapa baris
tapi browser
mengabaikan hal tersebut
</p>
<p>
Paragraf ini
memiliki banyak spasi
di dalam sorce code,
tapi browser mengabaikannya
</p>
</body>
</html>Hasilnya:
Pada contoh diatas, terutama di paragraf kedua terdapat banyak spasi dalam teks. Tapi terlihat berbeda ketika dilihat pada hasilnya. Itu artinya, browser akan menghapus sebanyak apapun spasi yang kita berikan saat halaman ditampilkan.
Jangan Lupakan Tag Penutup
Saat kita membuat sebuah paragraf di dokumen HTML, alangkah baiknya kita jangan pernah lupa untuk menuliskan tag penutup.
Contoh
<p>Ini adalah sebuah paragraf
<p>Ini adalah sebuah paragraf
<p>Ini adalah sebuah paragraf
<p>Jangan lupa menuliskan tag penutup</p>
Hasilnya:
Contoh di atas akan bekerja di sebagian besar browser.
Catatan: Tidak mencantumkan tag penutup bisa saja menghasilkan kesalahan dan output yang tidak diharapkan.
Penggunaan elemen <br> pada Paragraf
Elemen HTML <br>mendefinisikan baris baru hanya untuk satu baris. Apabila ingin baris baru lebih dari satu, maka gunakanlah tag <br> lebih dari satu juga sesuai kebutuhan. Gunakan <br> jika Anda ingin membuat baris baru tanpa memulai sebuah paragraf baru.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>
<p>Ini adalah<br>sebuah paragraf<br>dengan dua baris baru.</p>
</body>
</html>Hasilnya:
Tag <br> adalah tag kosong, yang berarti bahwa ia tidak memiliki tag penutup.
Studi Kasus
Puisi ini akan ditampilkan pada satu baris:
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>
<p>
Minum kopi duduk di kedai
Melihat gangsing berputar-putar
Belajar pangkal pandai
Rajin belajar otakpun pintar
</p>
</body>
</html>Hasilnya:
Penggunaan elemen HTML <pre> pada Paragraf
Elemen HTML <pre> mendefinisikan teks preformat. Teks yang ada dalam elemen <pre> ditampilkan dengan apa adanya sesuai yang ditulis.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>
<pre>
Minum kopi duduk di kedai
Melihat gangsing berputar-putar
Belajar pangkal pandai
Rajin belajar otakpun pintar
</pre>
</body>
</html>Hasilnya:
Demikian pembahasan tentang membuat Paragraf pada HTML.
Bagikan
Belajar HTML Part 6 - Membuat Paragraf di HTML
4/
5
Oleh
Octavianus Hasan
