1 Des 2016

Tutorial HTML : Cara Membuat Heading

HTML 5 Logo
Dalam postingan kali ini, saya akan membahas tentang Heading pada atribut HTML. Untuk attribut heading, HTML sudah menentukan ada enam klasifikasi heading yakni heading 1 sampai 6. Yakni “<h1> .... </h1>, <h2>....</h2>, hingga <h6>....</h6>“. Semakin besar nilai pada heading, maka semakin kecil teks yang akan tercetak.

Penggunaan heading ini bisa digunakan untuk melakukan penjudulan. Seperti halnya dengan memuat sebuah makalah, bab akan tercetak dengan lebih tebal, dan untuk subbab-nya akan tercetak lebih kecil.

Mengenal Heading HTML

Heading atau lebih tepatnya TAG Heading merupakan TAG khusus yang disediakan oleh HTML untuk membuat sebuah judul pada teks dalam sebuah halaman web. TAG Heading secara default ditampilkan oleh browser dengan ukuran lebih besar dan lebih tebal (bold) dari teks biasa. Tidak hanya sekedar untuk memberikan penampilan yang lebih tegas dan penekanan, TAG Heading juga sangat penting dalam kaitannya dengan teknik Search Engine Optimization (SEO). - See more at: https://www.codepolitan.com/tutorial/belajar-html-cara-membuat-heading#sthash.dSUrEPkz.dpuf

Mengenal Heading pada HTML

Heading atau lebih tepatnya TAG Heading merupakan TAG khusus yang telah disediakan oleh HTML untuk membuat sebuah judul pada teks dalam sebuah halaman web. TAG Heading secara default di tampilkan oleh browser dengan ukuran lebih tebal (bold) dan lebih besar dari pada teks biasa. Tidak hanya untuk memberi penampilan yang lebih tegas dan penakanan, TAG Heading juga berkaitan dengan Search Engine Optimization (SEO).

Tapi perlu diperhatikan meskipun ukuran dari TAG Heading lebih besar dan Lebih Tebal dari teks biasa jangan sekali kali kalian menggunakan TAG Heading untuk memperbesar tulisan. Gunakanlah TAG Heading hanya untuk membuat judul dan sub-judul, bukan malah untuk membuat tulisan yang berukuran lebih besar. Karena untuk memperbesarkan tulisan kita bisa menggunakan element pada HTML dan bisa juga menggunakan CSS yang akan kita pelajari lebih dalam nanti.

Langsung saja ke Contoh penggunaan dari Heading agar kalian lebih memahami :

Contoh Penggunaan TAG Heading

Perhatikan code dibawah ini :


<!DOCTYPE HTML>
<html>
  <head>
    <title>TAG Heading HTML</title>
  </head>
  <body>
    <h1>Heading H1</h1>
    <h2>Heading H2</h2>
    <h3>Heading H3</h3>
    <h4>Heading H4</h4>
    <h5>Heading H5</h5>
    <h6>Heading H6</h6>
  </body>
</html>

Berikut ini penampakannya jika dijalankan di web browser :

Screenshot Membuat Heading HTML

Berikut ini contoh Penggunaan pada HTML untuk membuat judul dan sub-judul beserta tulisan paragraf :


<!DOCTYPE HTML>
<html>
  <head>
    <title>Penggunaan TAG Heading HTML</title>
  </head>
  <body>
    <h1>Judul Utama</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <h2>Sub Judul</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <h2>Sub Judul</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <h3>Sub dari Sub Judul</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo   consequat.</p>
  </body>
</html>

Screenshot Membuat Heading HTML

Begitulah cara membuat Heading pada HTML, Jika sobat sobat disini menyukai tutorial yang saya buat jangan lupa untuk menekan CTRL + D dan share tutorial ini ke teman teman anda agar teman anda juga bisa memahami, dan mengerti apa yang anda telah pelajari

Thanks for Visit


EmoticonEmoticon