Install Web App

BRIEF

MINA

HTML

Belajar HTML #05 | Membuat Paragraf di HTML

profil-penulis

Belajar Bareng Minarsih - Edisi Ngoding

30 Agustus 2022

Membuat Paragraf Pada HTML

Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel.

untuk memahami pembuatan paragraf pada HTML, diharapkan anda terlebih dahulu sudah memahami penulisan dan apa itu tag, element, atribut ). paragraf disini merupakan suatu tag untuk membuat suatu elemen dalam penulisan HTML.

Paragraf pada HTML dibuat dengan tag <p>. Selain tag ini, ada juga tag pendukung lain seperti <div>, <hr>, <br>.

Berikut contoh penulisan paragraf <p> pada html,

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Paragraf di HTML</title>
</head>
<body>
    <h1>Membuat Paragraf Pada HTML</h1>
    <p>Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel.</p>

    <p>untuk memahami pembuatan paragraf pada HTML, diharapkan anda terlebih dahulu sudah memahami penulisan dan apa itu tag, element, atribut ). paragraf disini merupakan suatu tag untuk membuat suatu elemen dalam penulisan HTML.</p>
</body>
</html>

Berikut hasilnya saat dibuka di browser

dari contoh di atas dapat kamu lihat bahwa penulisan paragraf pertama dan paragraf kedua di pisahkan. untuk memisahkan antara paragraf satu dan dua ini menggunakana <p>.

Jenis Paragraf

1. paragraf rata kiri menggunakan align left

2. paragraf rata kanan menggunakan align right

3. paragraf rata tengah menggunakan align center

4. paragraf rata kiri kanan menggunaan align justify

Berikut contoh lengkapnya :

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Paragraf di HTML</title>
</head>
<body>
    <p align="left">penulisan paragraf rata kiri dalam dokument HTML</p>
     <p align="right">penulisan paragraf rata kanan dalam dokument HTML</p>
     <p align="center">penulisan paragraf rata tengah dalam dokument HTML</p>
     <p align="justify">penulisan paragraf rata kiri kanan dalam dokument HTML</p>
</body>
</html>

Berikut hasilnya:

Atribut align merupakan atribut yang digunakan untuk penempatan teks pada paragraf. Namun, menurut validator W3C.penggunaan tag ini sebaiknya diganti dengan CSS.

Mengapa? Karena atribut align dapat merubah tampilan dari web. Ini sebenarnya tigas dari CSS. Tugas utama dari HTML adalah membuat struktur dasar dari web.

Contoh menggunakan Css:

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Paragraf di HTML</title>
</head>
<body>
    <h1>Membuat Paragraf Pada HTML</h1>
    <p style="text-align: right;">Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel.</p>

    <p style="text-align: center;">untuk memahami pembuatan paragraf pada HTML, diharapkan anda terlebih dahulu sudah memahami penulisan dan apa itu tag, element, atribut ). paragraf disini merupakan suatu tag untuk membuat suatu elemen dalam penulisan HTML.</p>
</body>
</html>

Berikut hasilnya

Tag <br> Untuk Membuat Paragraf

Tag <br> sebenarnya bukanlah tag untuk membuat paragraf. Fungsi utama tag <br> adalah untuk membuat baris baru.

Contohnya:

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Paragraf di HTML</title>
</head>
<body>
    <h1>Membuat Paragraf Pada HTML</h1>
    <p>Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel.<br> untuk memahami pembuatan paragraf pada HTML, diharapkan anda terlebih dahulu sudah memahami penulisan dan apa itu tag, element, atribut ).<br> paragraf disini merupakan suatu tag untuk membuat suatu elemen dalam penulisan HTML.</p>
</body>
</html>

Hasilnya:

Oh iya, tag <br> ini merupakan tag yang tidak memiliki pasangan penutup.

dari contoh di atas bisa anda lihat penggunaan <br/> dalam HTML. <br/> ini bisa digunakan dalam penulisan paragraf namun fungsi dari <br/> sebenarnya adalah memisahkan teks satu dengan teks lainnya.  ada sedikit perbedaan antara penggunakan <p> dengan <br/>

Salah satu perbedaannya adalah : jika menggunakan <p> maka baris yang di atur dalam HTML lebih besar di bandingkan dengan <br/>,jika memang membutuhkan paragraf dalam dokumen HTML sebaiknya langsung mengguanakan tag <p>.

Tag <hr> Untuk Membuat Garis

Tag <hr> merupakan tag yang digunakan untuk membuat garis lurus secara horizontal (horizontal rule). Biasanya digunakan untuk memisahkan beberapa konten atau paragraf.

Contohnya:

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Paragraf di HTML</title>
</head>
<body>
    <h1>Membuat Paragraf Pada HTML</h1>
    <p>
        Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel.
        <br>
        <hr>
        untuk memahami pembuatan paragraf pada HTML, diharapkan anda terlebih dahulu sudah memahami penulisan dan apa itu tag, element, atribut ).
        <br>paragraf disini merupakan suatu tag untuk membuat suatu elemen dalam penulisan HTML.
    </p>
</body>
</html>

Hasilnya:

Tag <div> Pada HTML

Tag <p> dan Tag <div>, memiliki perilaku yang hampir sama.

Namun kedua Tag tersebut ada perbedaannya. Tag <p> untuk membuat suatu paragraf yang berarti bukan satu baris yang sama atau pun satu per satu baris.

Sedangkan tag <div> untuk menampilkan satu per satu baris (division/dibagi-bagi) dan untuk membuat layout web.

Contohnya:

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Paragraf di HTML</title>
</head>
<body>
    <h1>Membuat Paragraf Pada HTML</h1>

    <div>Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel.</div>


    <div>untuk memahami pembuatan paragraf pada HTML, diharapkan anda terlebih dahulu sudah memahami penulisan dan apa itu tag, element, atribut ).</div>


    <div>paragraf disini merupakan suatu tag untuk membuat suatu elemen dalam penulisan HTML.</div>
</body>
</html>

Hasilnya:Paragraf yang dibuat dengan tag <div> tidak akan memiliki jarak margin antar paragraf. Tag <div> biasanya digunakan untuk membungkus teks yang ada di luar artikel. 

Pada tutorial ini, kita sudah belajar beberapa tag:

  • <p> untuk membuat paragraf.
  • <hr> untuk membuat garis lurus.
  • <br> untuk membuat baris baru.
  • <div> untuk membuat paragraf di luar artikel atau layaout.

Artikel Lainnya Dengan Kategori Terkait :

1. 5 HTML Tags For Accessibility

2. Belajar HTML #01 | Apa Itu HTML ? Pengertian HTML Lengkap Untuk Pemula

3. Belajar HTML #02 | Cara Sederhana Membuat Code HTML

4. Belajar HTML #03 | Membuat Heading di HTML

5. Belajar HTML #04 | Format Text di HTML

6. Belajar HTML #05 | Membuat Paragraf di HTML

7. Belajar HTML #06 | Membuat Tabel Pada HTML

8. Belajar HTML #07 | Membuat Link Pada HTML

9. Belajar HTML #08 | Cara Membuat List Di HTML

10. Belajar HTML #09 | Cara Membuat Box Shadow CSS dan HTML Praktis Tanpa ribet (efek bayangan CSS)

11. Belajar HTML #10 | Cara Menampilkan Gambar Pada Halaman Website Menggunakan HTML

12. Belajar HTML #11 | Cara Menampilkan Video Pada Halaman Website Menggunakan HTML

13. Belajar HTML #12 | Cara Membuat Form Pada HTML

14. Belajar HTML #13 | Belajar Membuat Layout Pada HTML

15. Belajar HTML #14 | Belajar Menghubungkan HTML dengan CSS

16. Belajar HTML #15 | Cara Menambahkan Audio ke Halaman Website Menggunakan HTML.

17. Belajar HTML #16 | Cara Menambahkan Garis Horizontal di HTML

18. Belajar HTML #17 | Cara Menambahkan Komentar di HTML

19. Belajar HTML #18 | Tutorial Cara Membuat Checkbox dan Radio Button di HTML

20. Buat Desain Web Responsif CSS

21. Cara Membuat Accordions Dengan HTML & CSS

22. Cara Membuat Favicon Dengan HTML

23. CSS Positioning

24. Hal-hal Keren Dalam HTML

25. How to make Card-Profile

26. Input HTML Yang Perlu Diketahui

27. Memahami Pentingnya Semantic HTML dalam Struktur Website

28. Membuat Form HTML dengan Input Sugestion

29. Penggunaan Atribut Elemen Anchor dalam HTML

30. Semantic HTML

31. Tag HTML yang Jarang Diketahui

32. Tips Praktis Membuat Berbagai Jenis HTML List

33. Trik Berguna Dalam HTML

Masuk Terlebih dahulu untuk berkomentar

Paling baru
Lihat Lainnya