2.3 Belajar HTML [ Membuat Paragraf dan Heading Pada HTML ]

pada tanggal

 Membuat Paragraf pada HTML





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 Petani Kode. 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>

Hasilnya:

Contoh paragraf di HTML

Atribut untuk Paragraf

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

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

Mengapa demikian?

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 #2</title>
    </head>
    <body>
        <p style="text-align: justify">Ini adalah sebuah paragraf yang berisi 
        beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini 
        Sedang, Belajar tentang paragraf.</p>
        <p style="text-align: center">Paragraf adalah kumpulan dari beberapa 
        kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide 
        pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

Hasilnya:

Perataan teks paragraf dengan CSS

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:

Misalkan kita ingin menampilkan pantun, bisa saja kita buat seperti ini di dengan tag <p>.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #3</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>

Hasilnya:

Menampilkan pantun di HTML

Meskipun pada kode HTML kita sudah menulis tiap bait pantun dalam baris yang baru. Tapi ia akan tetap ditampilkan seperti baris.

Di sinilah saatnya kita harus menggunakan tag <br>. Maka, kode di atas.. bisa kita perbaiki menjadi seperti ini:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #3</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>

Hasilnya:

Menampilkan pantun di HTML dengan tag br

Oh iya, tag <br> adalah tag yang tidak memiliki pasangan penutup. Cara menutupnya, tambahkan saja garis miring seperti ini <br />.

Tag <br> boleh ditutup, boleh juga tidak. Namun, sebaiknya ditutup agar valid menurut validator W3C.

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.

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 Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <hr />
        <p>Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
    </body>
</html>

Hasilnya:

Tag hr

Tag <pre>

Pada kasus tertentu, kita ingin menampilkan paragraf dengan format yang lebih spesifik. Contohnya seperti pantun dan puisi yang paragrafnya diulis dengan garis baru dan juga indentasi.

Hal ini bisa dilakukan dengan bantuan tag <br>. Namun ada juga tag lain yang bisa jadi alternatif, yakni tag <pre>.

Tag <pre> (preformatting) merupakan tag yang digunakan untuk menampilkan teks atau paragraf dalam format yang sudah kita tentukan di HTML.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tutorial Paragraf di HTML</title>
</head>
<body>
<h1>Hujan Bulan Juni</h1>
<p>oleh Sapardi Djoko Damono</p>
<pre>
tak ada yang lebih tabah
dari hujan bulan Juni
dirahasiakannya rintik rindunya
kepada pohon berbunga itu

    tak ada yang lebih bijak
    dari hujan bulan Juni
    dihapusnya jejak-jejak kakinya
    yang ragu-ragu di jalan itu

tak ada yang lebih arif
dari hujan bulan Juni
dibiarkannya yang tak terucapkan
diserap akar pohon bunga itu
</pre>
</body>
</html>

Hasilnya:

Tag pre untuk paragraf



Pembahasan selanjutnya mengenai heading

Apa itu Heading?

Heading adalah sebuah judul yang biasanya diberikan pada halaman atau beberapa bagian dari artikel.

Jika kamu sering menulis artikel, pasti ini tidak asing buatmu.

Tag <h1> biasanya dipakai pada judul artikel. Lalu tag <h2>, <h3>, <h4>, <h5>, dan <h6> dipakai pada sub judul atau sub heading.

Mari kita coba membuat sebuah artikel yang dilengkapi dengan heading. Buatlah file HTML baru kemudian isi dengan kode berikut:

Cara Membuat Heading di HTML

Judul pada HTML dapat kita buat dengan tag <h1> sampai <h6>. Tag <h1> digunakan pada judul level pertama. Lalu tag lainnya digunakan pada sub heading atau level berikutnya.

Masing-masing judul akan ditampilkan dengan ukuran teks yang bebeda. Tag <h1> adalah yang paling besar, dan tag <h6> paling kecil.

Contoh:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Heading di HTML</title>
    </head>
    <body>
        <h1>Ini Judul Level 1</h1>
        <h2>Ini Judul Level 2</h2>
        <h3>Ini Judul Level 3</h3>
        <h4>Ini Judul Level 4</h4>
        <h5>Ini Judul Level 5</h5>
        <h6>Ini Judul Level 6</h6>
    </body>
</html>

Hasilnya:

Contoh Heading pada HTML

Tag <h1> biasanya dipakai pada judul artikel. Lalu tag <h2>, <h3>, <h4>, <h5>, dan <h6> dipakai pada sub judul atau sub heading.

Mari kita coba membuat sebuah artikel yang dilengkapi dengan heading. Buatlah file HTML baru kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Heading di HTML</title>
    </head>
    <body>
        <h1>Belajar Heading di HTML</h1>
        <p>
          Heading di HTML ada enam, yakni H1, H2, H3, H4, H5, dan H6.
          Heading berfungsi untuk membuat judul untuk artikel dan juga
          sub judul pada bagian artikel.
        </p>
        <h2>Membuat Sub Judul</h2>
        <p>
          Sub judul atau sub heading dimulai dengan tag H2. Lalu diikuti
          dengan tag selanjutnya hingga sampai H6. Sementara itu, tag H1
          hanya digunakan untuk judul artikel saja.
        </p>
    </body>
</html>

Hasilnya:

Contoh Heading Artikel

Berdasarkan pengalaman saya—dalam menulis artikel—tag <h5> dan <h6> jarang sekali dipakai, karena judul yang dibuat hanya sampai pada level 2, 3, dan 4.

Urutan Penulisan Heading

Apakah boleh menulis judul yang tidak urut?

Maksudnya.. seperti menggunakan <h6> untuk judul awal, lalu berikutnya <h4> untuk sub judul.

Ini boleh-boleh saja, tapi kurang bagus untuk SEO. 1

Penulisan judul yang bagus adalah judul yang mengikuti levelnya.

Urutan penulisan heading pada HTML

Judul <h1> pada level pertama, <h2> pada level ke-2, dan seterusnya.

Atribut untuk Heading

Masih ingat tentang atribut?

Ya, dia adalah _______

Sudah lupa ya?

Coba buka lagi pembahasan tentang: Apa itu Tag, Elemen, dan Atribut di HTML?

Heading tidak memiliki atribut khusus. Ia biasanya menggunakan atribut globel.

Contohnya seperti:

  • id untuk memberikan nama id unik. Biasanya ini akan digunakan oleh link, CSS, dan Javascript;
  • class untuk memberikan nama class yang akan dipakai oleh CSS;
  • style untuk memberikan kode css secara langsung;
  • title untuk menambahkan informasi tambahan;
  • dll.

Komentar

Posting Komentar