Belajar HTML 4: membuat paragraf di html

membuat paragraf dengan html

Paragraf merupakan sebuah elemen penting yang biasanya wajib ada pada sebuah halaman web, hal ini berhubungan dengan informasi yang harus ditampilkan oleh halaman website tersebut.

Berkaitan dengan hal tersebut, dipembahasan kita kali ini adalah bagaimana cara membuat paragraf di html agar tampil menjadi sebuah halaman web yang penuh informasi.

Apa itu paragraf?

Singkatnya, paragraf adalah sebuah teks berupa kalimat yang tersusun oleh kata-kata sehingga membentuk sebuah informasi atau pembahasan yang menjelaskan tentang sesuatu hal dari topik apapun yang dibahas atau dibicarakan.

Secara ringkas mengenai definisi paragraf ialah seperti diatas, yang telah saya jelaskan.

Kemudian bagaimana penjelasan dari wikipedia tentang paragraf ini?

Paragraf atau alinea adalah suatu gagasan yang berbentuk serangkaian kalimat yang saling berkaitan satu sama lain. Nama lain dari paragraf ialah wacana mini. Kegunaan dari paragraf adalah untuk menjadi penanda dimulainya topik baru dan memisahkan gagasan-gagasan utama yang berbeda.

Dengan demikian sekiranya kita telah memahami apa yang dimaksud dengan paragraf.

Cara membuat paragraf dengan html

Di html untuk membuat paragraf tentu saja dapat dibilang sangat mudah, kita hanya perlu menggunakan sebuah tag html paragraf yaitu tag <p>.

Menggunakan tag <p>

Seperti kebanyakan tag html lainnya, tag <p> memiliki tag penutup yaitu </p>.

Sehingga kode lengkapnya akan menjadi seperti berikut.

<p></p>

Untuk menulis sebuah kalimat atau paragraf pada tag <p></p>, kita tinggal ketikan saja kalimat didalam tag paragraf tersebut.

Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Paragraf html</title>
</head>
<body>
  <p>Saya sedang belajar html di staykoding</p>
</body>
</html>

Contoh diatas merupakan kalimat yang sangat pendek didalam tag paragraf, berikut untuk contoh 2 kalimat yang panjang dalam tag <p>.

<!DOCTYPE html>
<html>
<head>
  <title>Paragraf html</title>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Saepe sequi est vel et, quas
  in facilis officiis. Eveniet nulla ullam hic
  adipisci aliquam, impedit maiores, eligendi
  sequi maxime omnis illum.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Alias ipsa nisi laborum
  officiis nemo voluptas repellendus quis suscipit
  dicta excepturi iusto placeat, consequuntur ipsum 
  quisquam vero assumenda labore et maiores, harum
  voluptatem. Aut nihil cumque consequuntur
  expedita repellendus fugit veritatis.</p>
</body>
</html>

Jika kita buka dengan browser, maka akan tampil sebagai berikut.

contoh 2 paragraf dengan tag <p></p>
contoh 2 paragraf dengan tag <p></p>

Terlihat tidak ada yang berbeda bukan? bagaimana jika kita tidak menggunakan tag <p> sama sekali dalam menulis paragraf di html.

berikut contohnya:

<!DOCTYPE html>
<html>
<head>
  <title>Paragraf html</title>
</head>
<body>
  Lorem ipsum dolor sit amet, consectetur 
  adipisicing elit. Saepe sequi est vel et, quas in
  facilis officiis. Eveniet nulla ullam hic adipisci aliquam, impedit maiores, eligendi sequi
  maxime omnis illum.
  
  Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Alias ipsa nisi laborum
  officiis nemo voluptas repellendus quis suscipit
  dicta excepturi iusto placeat, consequuntur ipsum
  quisquam vero assumenda labore et maiores, harum
  voluptatem. Aut nihil cumque consequuntur
  expedita repellendus fugit veritatis.
</body>
</html>

Saat kita tidak lagi menggunakan tag <p>, maka seperti 2 paragraf diatas meskipun dalam penulisannya telah kita pisah, Jika saat ditampilkan pada browser.

Maka 2 paragraf diatas akan menyatu seperti tampilan pada browser dibawah ini.

contoh jika tidak menggunakan tag paragraf
contoh jika tidak menggunakan tag paragraf

Atribut pada tag <p&gt

Tag <p> pada html memiliki beberapa atribut diantaranya ialah atribut class, id dan align yang memiliki fungsi atau kegunaannya masing-masing.

  1. Penggunaan atribut class

Atribut class pada html biasanya digunakan untuk menandai sebuah elemen dengan nama class yang mendeskripsikan untuk apa ia dinamakan.

contoh penggunaan atribut class

<p class="text-class">Belajar atribut class, bareng staykoding</p>
  1. Penggunaan atribut id

Atribut id pada html biasanya digunakan untuk menandai sebuah elemen html yang unik serta mendeskripsikan untuk apa juga nama id dinamakan.

Contoh penggunaan atribut id.

<p id="text-id">Belajar atribut id, bareng staykoding</p>
  1. Penggunaan atribut align

Atribut align pada html dalam hal ini adalah tag <p> digunakan untuk mengatur perataan daripada sebuah teks atau kalimat yang akan diatur perataan teksnya.

Terdapat 4 nilai yang digunakan dalam atribut align, antara lain:

  • align left untuk teks rata kiri
  • align right untuk teks rata kanan
  • align center untuk teks rata tengah
  • align justify untuk teks rata kanan dan kiri

Contoh teks dengan atribut align=“left”

<p align="left">Paragraf ini akan menjadi rata kiri, saat ditampilkan pada browser.</p>

Hasilnya dengan atribut align left.

hasilnya teks menjadi rata kiri dengan atribut align left
hasilnya teks menjadi rata kiri dengan atribut align left di html

Contoh teks dengan atribut align=“right”

<p align="right">Paragraf ini akan menjadi rata kanan, saat ditampilkan pada browser.</p>

Hasilnya dengan atribut align right.

hasilnya teks menjadi rata kiri dengan atribut align right
hasilnya teks menjadi rata kanan dengan atribut align right di html

Contoh teks dengab atribut align=“center”

<p align="center">Paragraf ini akan menjadi rata tengah, saat ditampilkan pada browser.</p>

Hasilnya dengan atribut align center.

hasilnya teks menjadi rata tengah dengan atribut align center
hasilnya teks menjadi rata tengah dengan atribut align center di html

Contoh teks dengan atribut align=“justify”

<p align="justify">Paragraf ini akan menjadi rata kanan dan kiri, saat ditampilkan pada browser.</p>

Hasilnya dengan atribut align justify.

hasilnya teks menjadi rata kiri dengan atribut align justify
hasilnya teks menjadi rata kiri dan kanan dengan atribut align justify di html

Menggunakan tag <br/>

Selain menggunakan tag <p>, kita juga bisa membuat paragraf dengan tag <br/> di html.

Apakah kamu tahu, apa yang dimaksud dengan tag <br/>?

Secara pengertian, tag br merupakan singkatan dari istilah break, dalam html berguna untuk membuat baris baru dari kalimat yang terlihat terlalu panjang sebaris.

Contohnya sebagai berikut:

Lorem ipsum dolor sit amet, consectetur.

Kalimat diatas jika kita lihat dari browser maka akan tampil seperti berikut:

contoh tanpa menggunakan tag br html
hasil dari tanpa menggunakan tag <br/> html

Berbeda pada saat kita menggunakan tag <br/>, seperti berikut:

Lorem ipsum<br/> dolor sit amet,<br/> consectetur.

Apabila kita lihat hasil melalui browser, maka tampil seperti gambar dibawah ini:

contoh hasil menggunakan tag br html
hasil dari menggunakan tag <br/> html

Tag br dalam penggunaannya juga dapat kita padukan dengan tag paragraf.

<p>Lorem ipsum dolor sit amet,<br/> consectetur 
adipisicing elit. Saepe sequi est vel et, quas in<br/>
facilis officiis. Eveniet nulla ullam hic adipisci aliquam,<br/> 
impedit maiores, eligendi sequimaxime omnis illum.</p>

Kesimpulan

Dari pembahasan tentang cara membuat paragraf di html, kita belajar dan telah mengenal sebuah tag yang digunakan dalam membuat sebuah paragraf dengan html yaitu tag <p></p>.

Tak hanya itu adanya atribut class, id dan align menambah wawasan kita bagaimana membuat dan mengatur sebuah paragraf dengan atribut yang ada pada tag <p> html.

Dalam pembelajaran inipun, kita membahas juga sebuah tag lain yang biasanya digunakan untuk membuat baris baru apabila sebuah kalimat terlihat terlalu panjang dan tag itu ialah tag <br/>.

Terimakasih telah membaca artikel ini, saya harap dapat menambah pengetahuan teman-teman saat belajar html.

Selanjutnya belajar apa?

Di artikel selanjutnya, kita akan belajar bagaimana cara membuat heading di html. Hal ini penting karena heading merupakan judul daripada sebuah halaman web.

Pelajari : Belajar HTML 5: cara membuat heading di html

Comments