Belajar HTML 4: membuat paragraf di 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.
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.
Atribut pada tag <p>
Tag <p> pada html memiliki beberapa atribut diantaranya ialah atribut class, id dan align yang memiliki fungsi atau kegunaannya masing-masing.
- 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>
- 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>
- 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.
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.
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.
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.
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:
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:
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 05: cara membuat heading di html
- Mengenal Sejarah HTML dan versinya
- Belajar HTML 1: Pengertian HTML dan Struktur Dasarnya
- Belajar HTML 2: memilih text editor
- Balajar HTML 3: mengenal tag, atribut dan elemen dalam html
- Belajar HTML 4: membuat paragraf di html
- Belajar HTML 5: cara membuat heading di html
- Belajar HTML 6: cara membuat list pada html
- Belajar HTML 7: Cara membuat tabel dengan html
- Belajar HTML 8: Cara membuat hyperlink dengan html sangat mudah
- Belajar HTML 9: Cara menampilkan gambar di HTML
- Belajar HTML 10: Cara membuat form di HTML
- Belajar HTML 11: Menampilkan Video di HTML