Anak Males – Kali ini kita akan belajar HTML yaitu paragraf. Seperti yang kita sudah tau kemarin kita sudah belajar mengenai heading yang ada di html, untuk lebih jelasnya bisa baca di sini “Membuat Heading di HTML“.
Kita akan mempelajari sebuah elemen penting yang biasanya ada di dalam sebuah website, yaitu paragraf.
Dalam membuat website kita akan lebih sering membuat paragraf dari pada heading. Jadi ini adalah elemen yang lumayan penting.
Mari kita mulai mempelajari cara membuat paragraf di HTML.
Cara Membuat Paragraf di HTML
Paragraf adalah alenia yang merupakan kumpulan dari beberapa kalimat. Itu jika di dalam bahasa indonesia wkwk.
Namun pada website juga sama sih, paragraf adalah elemen yang digunakan untuk menampilkan teks atau artikel.
paragraf biasanya di buat menggunakan tag <p>. Namun selain tag ini ada juga tag pendukung seperti <div> , <span>, <hr>, <br> dan lain lain.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cara Membuat Paragraf HTML</title>
</head>
<body>
<p>Paragraf adalah alenia yang merupakan kumpulan dari beberapa kalimat. Itu jika di dalam bahasa indonesia wkwk.</p>
<p>Namun pada website juga sama sih, paragraf adalah elemen yang digunakan untuk menampilkan teks atau artikel.</p>
</body>
</html>Hasilnya :
Apa Saja Atribut Paragraf
Paragraf juga sama seperti tag tag html lainnya, kita bisa menambahkan atribut seperti class, id dan lain lain. Bahkan kita juga bisa menambahkan css inline, kapan kapan kita akan membahas css, sekarang kita fokus ke cara pembuatan paragraf saja.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cara Membuat Paragraf HTML</title>
</head>
<body>
<p class="p-0">Paragraf adalah alenia yang merupakan kumpulan dari beberapa kalimat. Itu jika di dalam bahasa indonesia wkwk.</p>
<p id="paragraf">Namun pada website juga sama sih, paragraf adalah elemen yang digunakan untuk menampilkan teks atau artikel.</p>
<p align="left">Namun pada website juga sama sih, paragraf adalah elemen yang digunakan untuk menampilkan teks atau artikel.</p>
</body>
</html>Hasilnya :
Mudah sekali, untuk membuat atribut di dalam paragraf. Atribut align digunakan untuk mengatur posisi paragraf ada di mana. Kayak di microsoft word yang digunakan untuk perataan teks.
Namun jika menurut dari W3C atribut ini sebaiknya di ganti ke CSS. Karena atribut ini mengubah tampilan website, yang merupakan tugas dari CSS. Nanti kalau tutorial HTML udah selesai kita akan membahas CSS.
Tapi jika ingin contoh singkatnya seperti dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cara Membuat Paragraf HTML</title>
</head>
<body>
<p style="text-align: left">Paragraf adalah alenia yang merupakan kumpulan dari beberapa kalimat. Itu jika di dalam bahasa indonesia wkwk.</p>
<p style="text-align: right">Namun pada website juga sama sih, paragraf adalah elemen yang digunakan untuk menampilkan teks atau artikel.</p>
</body>
</html>Hasilnya akan sama saja
Penggunaan Tag <br> Di Paragraf
Ketika kita membuat paragraf pasti akan membuat baris baru. Tag br ini bukan digunakan untuk membuat paragraf di HTML. Namun tag ini bisa membantu dalam pembuatan paragraf.
Contohnya deh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cara Membuat Paragraf HTML</title>
</head>
<body>
<p>Ambyar
Tanpa
Balas</p>
</body>
</html>Hasilnya
See the Pen HTML Paragraf : Tag br by Anak Males (@anakmalescom) on CodePen.
Tentu saja, hasilnya akan seperti itu karena memang kita tidak menggunakan tag br, padahal kita ingin yang ada di dalam tag p outputnya seperti ini.
Ambyar
Tanpa
Balas
Nah untuk membuatnya seperti itu kita hanya perlu menambahkan tag br seperti contoh berikut ini.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cara Membuat Paragraf HTML</title>
</head>
<body>
<p>Ambyar <br>
Tanpa <br>
Balas</p>
</body>
</html>See the Pen HTML Paragraf : Tag br by Anak Males (@anakmalescom) on CodePen.
Nah seperti itu kan yang kita harapkan outputnya ?. Fakta dari tag br adalah kita bisa menutupnya atau bisa juga tidak.
Namun lebih baik untuk menutup tag tersebut. Tag ini sedikit berbeda dengan tag tag lainnya.
Tag <hr> Di Paragraf
Kemudian kita akan membuat garis di dalam paragraf. Tag hr ini sama seperti tag br yang bukan digunakan untuk membuat paragraf, namun lebih ke bumbu pelengkap.
Tag hr adalah tag yang digunakan untuk membuat garis lurus horizontal untuk memisahkan beberapa paragraf atau artikel.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cara Membuat Paragraf HTML</title>
</head>
<body>
<p>Ambyar <hr>
Tanpa <hr>
Balas</p>
</body>
</html>Hasilnya
See the Pen HTML Paragraf : Tag hr by Anak Males (@anakmalescom) on CodePen.
Udah gitu doang.
Penutup
Baiklah kita sudahi dulu tutorial untuk membuat paragraf di HTML, sampai jumpa di tutorial berikutnya. Babay