Belajar HTML - Cara Membuat Paragraf

Kresna Galuh 23 Januari 2016

Belajar HTML - Cara Membuat Paragraf

Tutorial kali ini melanjutkan 3 tutorial yang saya tulis sebelumnya tentang belajar html yaitu Konsep Dasar HTML, Memahami Konsep Elemen HTML dan Cara Membuat Heading. Sedikit mengulang buat temen-temen yang baru bergabung dalam seri tutorial belajar html yang saya tulis ini, bahwa HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web. Untuk lebih jelasnya mungkin kamu bisa baca tulisan saya sebelumnya. Pada kesempatan kali ini kita akan lanjut pembahasan kita dengan cara membuat paragraf.

Untuk membuat paragraf di dalam HTML tidak sesederhana ketika kita membuatnya di software pengolah kata seperti MS. Word, tidak cukup hanya dengan memberikan jarak dengan menekan ENTER. Karena pada dasarnya HTML akan mengabaikan spasi. Agar mudah dipahami, tulislah kode berikut pada code editor kemudian simpan dengan nama index.html:

<!DOCTYPE HTML>
<html>
	<head>
		<title>Paragraf di HTML</title>
	</head>
	<body>
		Tulisan di baris pertama.

		Tulisan di baris kedua.
	</body>
</html>

Jika dijalankan via browser, maka tampilannya akan sebagai berikut:

Screen Shot 2016-01-22 at 17.48.09

Dari gambar di atas kita bisa lihat bahwa walaupun kita pisahkan dengan spasi, tapi tetap saja HTML tidak membacanya menjadi paragraf terpisah. Tidak hanya spasi ENTER seperti kode di atas, kita menuliskan dengan spasi seperti kode berikut pun hasilnya akan sama seperti gambar di atas:

<!DOCTYPE HTML>
<html>
	<head>
		<title>Paragraf di HTML</title>
	</head>
	<body>
		Tulisan    di            baris pertama.

		Tulisan di 

		baris       kedua.
	</body>
</html>

Itu dikarenakan HTML pada dasarnya akan mengabaikan spasi. So, oleh karena itu untuk membuat paragraf di HTML kita membutuhkan tag khusus, yaitu TAG P.

Contoh Penggunaan TAG P

Berikut ini contoh penggunaan TAG P dalam kode HTML:

<!DOCTYPE HTML>
<html>
	<head>
		<title>Paragraf di HTML</title>
	</head>
	<body>
		<p>Tulisan di baris pertama.</p>

		<p>Tulisan di baris kedua.</p>
	</body>
</html>

Tulislah kode tersebut pada code editor kemudian simpan dengan nama paragraf.html. Selanjutnya jalankan melalui browser, maka akan tampil seperti berikut:

Screen Shot 2016-01-22 at 18.50.53

HTML Line Breaks

Selain menggunakan TAG P, kita juga bisa membuat paragraf dengan TAG BREAK atau BR. Berikut contohnya:

<!DOCTYPE HTML>
<html>
	<head>
		<title>Paragraf di HTML</title>
	</head>
	<body>
		Tulisan di baris pertama.<br>
		Tulisan di baris kedua.<br><br>
		Tulisan di baris ketiga.
	</body>
</html>

Adapun jika dijalankan melalui browser akan tampil seperti berikut:

Screen Shot 2016-01-23 at 10.07.00

Sebenarnya TAG BR pada prinsipnya bukan ditujukan untuk membuat paragraf, TAG BR digunakan untuk membuat baris baru dalam tulisan. Walaupun secara penampilan jika kita membuat dua TAG BR sekaligus akan tampak seperti paragraf (seperti gambar di atas), namun pada dasarnya itu bukanlah paragraf secara struktur. So, jika ingin paragraf gunakanlah TAG P. Namun jika kamu ingin membuat baris baru dalam sebuah paragraf kamu bisa menggunakan TAG BR.

Demikian tutorial belajar html kali ini, kita akan sambung dengan tutorial html lainnya di kesempatan selanjutnya. Semoga bermanfaat :D

Tags
Tutorial
Share to
FacebookTwitterLinkedIn