HTML-materi 3 : Heading dan Paragraph

Baiklah, kita bergabung kembali pada materi mengenai HTML. Bagi yang belum bergabung silakan baca materi awal, yaitu Berkenalan dengan HTML dan materi sebelum penyajian materi ini, yaitu HTML-materi-2 : Element. Pada materi kali ini kita akan memperdalam mengenai heading dan paragraph. Pada materi-materi sebelumnya kedua tema tersebut sebenarnya telah dibahas. Pada materi kali ini kita akan lebih mendalaminya lagi.

Heading

Apa itu heading ? Heading adalah judul atau sub judul tulisan yang ingin kita tampilkan pada halaman web. Heading didefinisikan dengan tag <h1> sampai dengan <h6> dimana <h1> adalah judul paling tinggi tingkatannya dan <h6> adalah sub judul yang paling rendah tingkatannya.

Perhatikan contoh berikut :

<!DOCTYPE html>
<html>
    <body>
        <h1>Judul</h1>
        <h2>Sub Judul</h2>
        <h3>Sub Sub Judul</h3>
    </body>
</html>

Hasilnya :

Perlu diperhatikan bahwa heading mempunyai peran penting pada pencarian halaman web kita di browser. Search engine menggunakan heading untuk mengindeks struktur dan konten dari halaman web kita. Mengenai browser dan search engine dapat dibaca pada artikel : Peristilahan yang berkaitan dengan HTTP.

Pengguna seringkali meluncur langsung ke halaman web kita dengan kriteria pencarian yang mengarah pada judul tulisan. Jadi sangat penting untuk menggunakan heading sebagai penunjuk struktur dokumen.

<h1> merupakan judul utama, diikuti dengan <h2> sebagai sub judul dari <h1>, diikuti dengan <h3> sebagai sub judul dari <h2>, dan seterusnya.

Adalah penting untuk menggunakan heading hanya sebagai judul. Jangan menggunakan heading untuk keperluan lain, misalnya mempertebal atau memperbesar ukuran font.

Kita dapat menambahkan attribute pada heading. Misalnya : attribute style dengan menggunakan property CSS yang bernama font-size, juga property CSS yang bernama color untuk menambahkan warna.

Perhatikan contoh berikut :

<!DOCTYPE html>
<html>
    <body>
        <h1>Heading 1 tanpa style</h1>
        <h1 style="font-size:60px;color:darkred">Heading 1 dengan style</h1>
    </body>
</html>

Hasilnya :

Paragraph

Apa itu paragraph ? Paragraph adalah satu blok teks yang diawali dengan baris baru. Paragraph didefinisikan dengan tag <p>. Dan, sebagai tambahan pengetahuan :

Baris baru pada text editor pada penulisan paragraph akan diabaikan oleh browser.
Spasi kosong pada text editor pada penulisan paragraph akan diabaikan oleh browser.
Tag <hr> akan mengasilkan garis lurus horizontal (horizontal rules)

Perhatikan contoh berikut :

<!DOCTYPE html>
<html>
    <body>
        <h1>Jakarta</h1>
        <p>Jakarta adalah ibukota Indonesia.</p>
        <hr>
        <h2>Penduduk</h2>
        <p>Penduduk Jakarta sangat heterogen.
            berasal dari berbagai suku bangsa di Indonesia.
        </p>
        <hr>
    </body>
</html>

Hasilnya :

Tambahan pengetahuan :

Baris baru dapat dibuat dengan tag <br>.
Kita dapat membuat blok teks yang sudah terformat sebelumnya (preformatted text) dengan tag <pre>.

Perhatikan contoh berikut :

<!DOCTYPE html>
<html>
    <body>
        <h3>Paragraph tanpa break</h3>
        <p>Kalimat 1.
            Kalimat 2.
            Kalimat 3.
        </p>
        <h3>Paragraph dengan break</h3>
        <p>Kalimat 1.<br>
            Kalimat 2.<br>
            Kalimat 3.
        </p>
        <h3>Paragraph dengan preformatted text</h3>
        <pre>
            Kalimat 1.

            Kalimat 2.
            
            Kalimat 3.
        </pre>
    </body>
</html>

Hasilnya :

Perhatikan perbedaan ketiga paragraph di atas.

Nah sampai di sini kita sudah lebih mengenal paragraph dan heading dalam HTML.

Sampai jumpa di pembahasan berikutnya.

Semoga bermanfaat.

HTML-materi 3 : Heading dan Paragraph

Heading

Paragraph

0 Response to "HTML-materi 3 : Heading dan Paragraph"

Post a Comment