Belajar HTML #03: Membuat Paragraf pada HTML

Setelah belajar tentang apa itu HTML, Tag, Elemen, dan Atribut. Berikutnya, kita akan belajar tentang elemen-elemen dasar pada HTML yang sering digunakan dalam membuat web.

Membuat Paragraf di HTML

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

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

Contoh:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
        Saya sedang belajar HTML di Hartoko. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p>Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
    </body>
</html>

Atribut untuk Paragraf

Biasanya paragraf ditambahkan dengan beberapa atribut seperti align, id, class, dll.

Contoh:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa kalimat.
        Saya sedang belajar HTML di Hartoko. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
    </body>
</html>

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

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

Contoh perataan menggunakan CSS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p style="text-align: justify">Ini adalah sebuah paragraf yang berisi beberapa kalimat.
        Saya sedang belajar HTML di Hartoko. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p style="text-align: center">Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
    </body>
</html>

Tag <br> untuk Membuat Paragraf

Tag <br> sebenarnya bukanlah tag untuk membuat paragraf. Tapi tag ini, biasanya digunakan untuk membantu tag <p>.

Fungsi utama tag <br> adalah untuk membuat baris baru.

Contoh: (kurang bagus)

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Rambut berantakan tak pernah di sisir
           Orang melihat tertawa kesenangan
           Pengangguran berserakan seperti pasir
           Kurang usaha dan keterampilan</p>
    </body>
</html>

Contoh: (bagus)

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Rambut berantakan tak pernah di sisir <br/>
           Orang melihat tertawa kesenangan <br/>
           Pengangguran berserakan seperti pasir <br/>
           Kurang usaha dan keterampilan </p>
    </body>
</html>

Tag <hr> untuk Membuat Garis

Sama seperti tag <br>, tag <hr> juga bukanlah tag untuk membuat paragraf.

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

Apa Selanjutnya?

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.
<pre> untuk membuat paragraf dengan format yang sudah ditentukan.

Ini adalah tag-tag dasar yang perlu diingat dalam membuat paragraf di HTML. Selanjutnya, silahkan pelajari tentang:

Belajar HTML #04: Membuat Heading di HTML

Note!
Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Hartoko88