Belajar HTML Bagian 7 : Cara Membuat Paragraf di HTML

Paragraf adalah serangkaian kalimat yang terdiri dari satu kalimat pokok dan beberapa kalimat penjelas. Di dalam HTML, tentunya terdapat tag untuk membuat paragraf.

Pada pembahasan kali ini Saya akan menjelaskan cara membuat paragraf di HTML, selain paragraf sobat juga akan mempelajari cara membuat baris baru di HTML. Silahkan baca artikel ini sampai selesai :-).

Tag <p>

HTML menyediakan tag khusus untuk membuat paragraf yaitu tag <p>. Tag <p> menyatakan awal dari suatu paragraf sedangkan akhir dari suatu paragraf ditandai dengan tag </p>.

Silahkan buka text editor sobat di sini Saya menggunakan Notepad++, lalu ketikan kode di bawah ini :

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Membuat Paragraf di HTML</title>
</head>
<body>
 <p>Paragraf pertama</p>
 <p>Paragraf kedua</p>
</body>
</html>

Jika sudah di ketikan silahkan simpan dengan nama Paragraf.html, lalu buka di browser. Maka hasilnya akan seperti gambar di bawah ini :

Pada tag <p> sobat juga bisa menambahkan atribut align yang digunakan untuk menampilkan paragraf antara rata kanan, kiri, tengah ataupun kiri dan kanan sesuai keinginan sobat. Berikut ini nilai dari atribut align :

Nilai Fungsi
Left Untuk meratakan teks ke kiri
Right Untuk meratakan teks ke kanan
Center Untuk meratakan teks ke tengah
Justify Untuk meratakan teks ke kanan dan kiri

Berikut ini contoh penggunaan atribut align :

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Membuat Paragraf di HTML</title>
</head>
<body>
    <p align="left">Meratakan teks paragraf ke kanan</p>
    <p align="right">Meratakan teks paragraf ke kiri</p>
    <p align="center">Meratakan teks paragraf ke tengah</p>
    <p align="justify">Meratakan teks paragraf ke kanan dan kiri</p>
</body>
</html>

Maka tampilannya jika dibuka di browser akan seperti gambar di bawah ini :



Silahkan buka text editor sobat lagi, lalu ketikan kode di bawah ini :

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Membuat Paragraf di HTML</title>
</head>
<body>
    <p>
    Paragraf pertama
    Baris 1
    Baris 2
    Baris 3
    </p>
    <p>
    Paragraf kedua        Spasi 1        Spasi 2        Spasi 3
    </p>
</body>
</html>

Maka tampilannya setelah dibuka di browser akan seperti gambar di bawah ini :

Terlihat jelas "Paragraf pertama" pada "Baris 1", "Baris 2" dan "Baris 3" tersebut tidaklah berada pada baris yang berbeda, namun berada pada satu baris yang sama dengan "Paragraf pertama". Hal ini karena baris tambahan yang berada di dalam tag <p> akan di abaikan termasuk juga spasi tambahan yang berada di "Paragraf kedua" juga ikut di abaikan.

Tenang HTML menyediakan tag khusus untuk mengatasi masalah tersebut yaitu dengan menggunakan tag <pre>.

Tag <pre>

Jika sobat ingin menampilkan teks yang sesuai dengan aslinya baik itu tambahan spasi dan baris, maka sobat bisa menggunakan tag <pre>. Tag <pre> adalah singkatan dari Preformatted Text yang digunakan untuk teks yang tidak akan di format. Maksudnya jika di buka di browser tampilan spasi dan baris akan sama persis dengan ada yang di dalam tag <pre>.

Tag <pre> termasuk ke dalam Blok level element yang maksudnya teks yang berada di tag <pre> akan ditampilkan di baris baru dan terpisah dari teks yang berada diluar Tag <pre>. Pada umumnya jenis font yang digunakan adalah Monospace dengan panjang karakter yang sama setiap hurufnya.

Silahkan buka text editor sobat, lalu ketikan kode di bawah ini :

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Membuat Paragraf di HTML</title>
</head>
<body>
 <pre>
 Paragraf pertama
 Baris 1
 Baris 2
 Baris 3
 
 Paragraf kedua Spasi 1 Spasi 2 Spasi 3
 </pre>
</body>
</html>

Maka tampilannya jika dibuka di browser akan seperti gambar di bawah ini :


Terlihat dari gambar di atas, teks yang ditampilkan di browser sesuai dengan yang sobat ketikan dimana tambahan baris dan spasi akan ditampilkan di browser. Penggunaan Tag <pre> ini biasa digunakan untuk menampilkan kode program.

Tag <br>

Jika sobat ingin membuat baris baru di HTML maka sobat bisa menggunakan tag <br>. Tag <br> merupakan singkatan dari break.

Berikut ini contoh penggunaan tag <br> di HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Membuat Paragraf di HTML</title>
</head>
<body>
 Ini adalah baris 1
 <br/>
 Ini adalah baris 2
</body>
</html>

Maka tampilannya jika dibuka di browser akan seperti gambar di bawah ini :


Tag <br> termasuk ke dalam single text yang artinya tag <br> tidak memiliki tag penutup, sobat bisa menulis <br> atau <br/>.

Refrensi Tag HTML

Tag Deskripsi
<p> Membuat paragraf
<br> Membuat baris baru
<pre> Mendefinisikan teks yang tidak diformat
Setelah sobat memahami cara membuat paragraf di HTML, maka pada artikel selanjutnya sobat akan mempelajari Cara Membuat Heading di HTML.

Comments

Popular posts from this blog

20 Template Blogger SEO Friendly dan Responsive Gratis

Cara Menginstall Phoenix OS Pada Windows 10

Cara Menghapus Antivirus Avast Dengan Benar

Cara Membuat Bootable USB Flashdisk Windows 10 Menggunakan Rufus

Cara Mengatur Posisi dan Tampilan Gambar di HTML

Cara Memblokir Akses Internet Aplikasi Windows 10 Tanpa Aplikasi Pihak Ketiga

4 Template Blogger Buatan Mas Sugeng Yang Dibagikan Secara Gratis

7 Aplikasi Pemutar Video Terbaik Untuk PC/Laptop

41 Latar Belakang Abu-abu Yang Cocok Untuk di Desain

Kumpulan Pantun Jenaka