Skip to main content

HTML Dasar Part 05: Cara Membuat Paragraf di HTML

cara membuat paragraf HTML

Setelah kita sudah belajar dan paham apa pengertian HTML, struktur dasar HTML, pengertian tag, atribut dan elemen. Selanjutnya kita akan sama-sama mempelajari elemen yang sering digunakan pada HTML untuk membuat suatu website.

Kita memulainya dengan membahas tentang paragraf, penulisan paragraf di HTML dan bagaimana cara membuat paragraf di HTML ?


Cara Membuat Paragraf di HTML

Paragraf adalah kumpulan dari banyaknya kalimat. Di website paragraf dibuat untuk menampilkan teks atau artikel.

Tag HTML untuk membuat paragraf adalah tag <p>. Namun, tidak itu saja tag yang digunakan untuk membuat paragraf ada juga tag pendukung yang lain untuk membuat paragraf yaitu : <div>, <hr>, <br>, dan <pre>.

Langsung saja kita memulai koding, silahkan buka text editor dan ketikkan kode dibawah ini, kalau malas tinggal copas aja hehehe 😄

Contoh penggunaan tag paragraf


<!DOCTYPE html>
<html>
<head>
  <title>Paragraf Websiteku</title>
</head>
<body>
  Teks ini adalah paragraf pertama
  Teks ini adalah paragraf kedua
</body>
</html>
 

Kemudian save kode diatas, dengan nama paragraf.html lalu buka di browser

Hasilnya :

Contoh Tag Paragraf

Seperti yang kita lihat hasil kode yang kita tulis tidak sesuai dengan ekspektasi kita. Karena tidak berada di baris yang berbeda melainkan dibaris yang sama. Satu hal yang perlu harus diingat yaitu didalam HTML spasi tidak akan dieksekusi oleh browser.

Seharusnya kita memberitahu browser bahwa kedua kalimat harus berada di baris yang berbeda dan masing-masing kalimat itu merupakan paragraf.

Tag Paragraf <p>

HTML sendiri menyediakan tag khusus untuk membuat suatu paragraf yaitu tag <p> dan mungkin saja ini merupakan tag yang paling banyak digunakan untuk mengisi konten dari sebuah website.

Untuk membuat suatu paragraf hanya dengan mengisi teks diantara tag pembuka <p> dan juga tag penutup </p>. Mari kita perbaiki contoh kode HTML sebelumnya dan menambahkan tag p.

Contoh penggunaan tag paragraf <p>


<!DOCTYPE html>
<html>
<head>
  <title>Paragraf Websiteku</title>
</head>
<body>
  <p>Teks ini adalah paragraf pertama</p>
  <p>Teks ini adalah paragraf kedua</p>
</body>
</html>
 

Hasilnya :

Tag p Paragraf

Nah, sekarang kita sudah melihat bahwa paragraf itu, sudah berada dibaris yang berbeda. Dan tiap-tiap paragraf, akan diberi jarak oleh web browser.

Tag Break <br>

Ada juga cara lain untuk membuat baris baru antar paragraf tanpa menggunakan tag <p>yaitu dengan tag <br>, (br adalah singkatan dari break).

Sebenarnya tag <br> ini bukanlah tag untuk membuat paragraf. Namun, tag ini digunakan untuk membuat baris baru.


<!DOCTYPE html>
<html>
    <head>
        <title>Tutorial Paragraf di HTML #3</title>
    </head>
    <body>
        <p>Ayam goreng setengah mateng <br />
           belinya di depan Tugu <br />
           Abang sayang, abangku ganteng <br />
           neng di sini setia menunggu</p>
    </body>
</html>
 

Hasilnya :

Seperti yang dikatakan tadi, tag <br> berfungsi untuk membuat baris baru dan memisahkan teks yang satu dengan teks yang lain. Jika kita membutuhkan untuk membuat struktur paragraf, maka yang kita gunakan tag <p> bukan tag <br>.

Ada yang perlu harus diperhatikan yaitu penulisan tag <br>. Tag ini adalah salah satu tag yang tidak memiliki penutup. Biasanya ditulis dengan <br> atau bisa juga <br />. Untuk penulisan tag <br /> adalah penulisan bawaan dari xHTML dan dianggap juga penulisan ini lebih rapi. Akan tetapi, sekarang standar HTML5, untuk penulisan tag <br> atau tag <br /> sama-sama dianggap valid.

Tag Huruf Tebal dan Huruf Miring

Didalam sebuah paragraf, kadang kala kita memerlukan huruf cetak tebal dan juga huruf miring untuk kata-kata tertentu.

Tag <em> untuk huruf miring dan tag <strong> untuk huruf cetak tebal.

Contoh penggunaan tag <em> dan <strong>


<!DOCTYPE html>
<html>
<head>
  <title>Paragraf Websiteku</title>
</head>
<body>
  <p>Teks ini adalah kalimat <em>pertama</em>. 
  Dan ini adalah kalimat <strong>kedua</strong></p>
</body>
</html>
 

Hasilnya :


Kita juga sering menemukan tag <i> untuk membuat huruf cetak miring dan tag <b> untuk huruf cetak tebal. Hal ini sama saja terserah kita untuk menggunakan tag apa membuat huruf cetak tebal dan cetak miring

Untuk pembahasan lebih jauh tentang bagaimana cara penulisan dan format text didalam HTML. Kita akan membahas nya nanti di belajar HTML lanjutan : Tag dan Atribut : Pembuatan Text dan Format Text dalam HTML.


Setelah kita sudah memahami cara membuat paragraf di HTML, pada belajar koding kita selanjutnya, kita akan mempelajari bagaimana cara membuat judul di HTML.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar