Home / HTML / Tutorial HTML Bagian 4: Membuat Paragraf di HTML (Tag P)

Tutorial HTML Bagian 4: Membuat Paragraf di HTML (Tag P)

Tutorial HTML kali ini kita akan membahas bagaimana cara membuat paragraf. Seperti pembahasan kita pada tutorial sebelumnya mengenai tag, atribut dan elemen HTML, sudah dijelaskan bahwa tag dalam HTML itu bertujuan untuk memberitahu browser bagaimana objek yang berada di dalam tag tersebut ditampilkan. Jadi, untuk membuat paragraf juga harus menggunakan tag, begitu juga pengaturan format isi dalam paragraf seperti baris baru dan spasi, harus disertakan tag.

Penggunaan tag <p> untuk membuat paragraf

Cara membuat paragraf di HTML menggunakan tag <p> dan diakhiri dengan </p>. Tag <p> ditempatkan dalam elemen body, diantara <body> dan <body> dan content yang berada dalam tag <p> akan otomatis dimulai dengan baris baru. Untuk lebih mudahnya, silakan lihat contoh penggunaan tag <p> untuk memformat paragraf di HTML seperti kode dibawah:

<!DOCTYPE html>
<html>
  <head>
        <title>Membuat paragraf di HTML - ITGeek.id</title>
    </head>
  <body>
        <H1>Selamat datang di ITGeek.id</h1>
        <p>Ini merupakan sebuah paragraf menggunakan tag P.</p>
        <p>ITGeek.id website yang berisi tutorial pemrograman</p>
  </body>
</html>

Pada contoh diatas, terdapat dua paragraf. Baris 8 adalah paragraf pertama dan baris 9 paragraf kedua. Setiap kalimat dalam paragraf akan secara otomatis berpindah baris mengikuti lebar halaman, layaknya kita menggunakan editor pengolah kata (Ms Word).  Hasilnya di browser seperti gambar dibawah.

Hasil membuat paragraf dengan html

 

&nbsp; untuk membuat SPASI lebih dari satu

Di dalam HTML, penggunaan spasi juga secara otomatis hanya dibaca sekali. Jadi ketika kita ingin membuat sebuah kalimat yang memiliki spasi antar karakter/kata lebih dari sekali, sebagai contoh kalimat selamat datang di website    ITGEEK. Spasi antara kata website dan ITGEEK lebih dari satu (4 kali spasi). Contohnya bisa dilihat dibawah:

<!DOCTYPE html>
<html>
  <head>
        <title>Membuat paragraf di HTML - ITGeek.id</title>
    </head>
  <body>
        <H1>Selamat datang di ITGeek.id</h1>
        <p>Selamat datang di website    ITGEEK</p>
        <p>ITGeek.id website yang berisi tutorial pemrograman</p>
  </body>
</html>

Walaupun diberikan spasi sebanyak empat kali seperti baris ke 8 kode diatas, tetapi ketika di tampilkan di browser, maka kalimatnya akan tetap menggunakan satu spasi antara kata website dan ITGEEK. Hasilnya seperti gambar dibawah:

Hasil penggunaan spasi di HTML

Untuk membuat spasi(lebih dari sekali) di HTML, harus menggunakan karakter &nbsp;. Jadi seperti contoh diatas, kita cukup menambahkan &nbsp; sebanyak yang dibutuhkan. Cara penggunaanya, lihat baris ke 8 pada kode dibawah.

<!DOCTYPE html>
<html>
  <head>
        <title>Membuat paragraf di HTML - ITGeek.id</title>
    </head>
  <body>
        <H1>Selamat datang di ITGeek.id</h1>
        <p>Selamat datang di website IT &nbsp;&nbsp;&nbsp;GEEK</p>
        <p>ITGeek.id website yang berisi tutorial pemrograman</p>
  </body>
</html>

Hasilnya di browser seperti berikut:

Hasil 2 penggunaan spasi di HTML

Tag <br/> atau <br> untuk berpindah baris

Seperti yang saya bilang sebelumnya pada contoh pertama, setiap paragraf akan dimulai dengan baris baru dan content/isi dalam paragraf juga harus di format menggunakan tag. Sebagai contoh, pada paragraf pertama, kita ingin menambahkan kalimat yang dimulai dari baris baru, maka tidak bisa langsung di ENTER untuk berpindah baris. Perhatikan kode di bawah,

<!DOCTYPE html>
<html>
  <head>
        <title>Membuat paragraf di HTML - ITGeek.id</title>
    </head>
  <body>
        <H1>Selamat datang di ITGeek.id</h1>
        <p>
            Ini merupakan sebuah paragraf menggunakan tag P.
            Kalimat ini maunya menjadi baris kedua
        </p>
        <p>ITGeek.id website yang berisi tutorial pemrograman</p>
  </body>
</html>

Pada kode diatas, kalimat 9 dan 10 berada dalam sebuah paragraf. Ketika ditampilkan di browser, baris 9 dan 10 tetap berada dalam satu baris, walaupun pada kode di enter/pindah baris. Sebanyak apapun kita enter untuk pindah baris, hasilnya di browser akan tetap ditampilkan dalam satu baris.

Jadi untuk berpindah baris juga harus menggunakan Tag. Kita bisa saja menggunakan tag <p> untuk berpindah baris, tetapi peruntukan tag <p> yang sesungguhnya adalah membuat paragraf baru atau pindah paragraf. Berpindah baris di HTML menggunakan tag </br> ataupun bisa juga tag <br>. Fungsi Tag </br> dan <br> tidak ada perbedaan. Hanya pada versi HTML sebelumnya(ver 4) disarankan menggunakan tag </b> tetapi untuk HTML5 tidak mempermasalahkan kedua tag tersebut.

Berikut contoh penggunaan tag <br/> dan <br> di HTML:

<!DOCTYPE html>
<html>
  <head>
        <title>Membuat paragraf di HTML - ITGeek.id</title>
    </head>
  <body>
        <H1>Selamat datang di ITGeek.id</h1>
        <p>
            Ini merupakan sebuah paragraf menggunakan tag P.<br/>
            Kalimat ini baris kedua<br>
            Kalimat Baris ketiga<br/>
        </p>
        <p>ITGeek.id website yang berisi tutorial pemrograman</p>
  </body>
</html>

Hasilnya di browser seperti gambar berikut:

Hasil membuat paragraf di HTML dengan baris baru

 

Dalam HTML5 tidak dipergunakan lagi atribut align untuk perataan sebuah paragraf. Pada HTML versi sebelumya memang kita masih dapat menggunakan atribut align yang berisi left, right, center maupun justify pada tag <p>. Tetapi pada versi HTML5, untuk memformat sebuah paragraf di anjurkan menggunkan class Css.

Demikian tutorial penggunaan tag <p> untuk membuat paragraf di HTML. Selamat mencoba dan semoga bermanfaat.

Tutorial selanjutnya kita akan membahas Cara membuat list di HTML yang berurut (ordered list) dan list yang tidak berurut (unordered list)

Comments

comments

About admin

admin

My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial HTML Bagian 1: Pengenalan HTML

Pengenalan HTML. Ketika membuka sebuah website menggunakan browser, maka umumnya kita akan disuguhi halaman yang …

Leave a Reply

Your email address will not be published. Required fields are marked *